ActionFlow

Interactive TUI for installing curated GitHub Actions workflows with a cyberpunk aesthetic.

Features

• 🎨 Cyberpunk UI: Neon colors, smooth animations, modern terminal interface
• ⚡ Fast Navigation: Vim keys (j/k), arrow keys, number shortcuts
• 🎯 Two-Panel Layout: Browse workflows on the left, see details on the right
• 🔒 Safe Installation: Never overwrites without confirmation
• 📐 Terminal Aware: Warns if terminal is too small, adapts to window size
• 🎹 Keyboard Driven: No mouse required

Installation

Option 1: Install from GitHub (Recommended)

# Install globally from GitHub
bun install -g github:openstaticfish/actionflow
actionflow  # Available globally

# Or clone and link globally
git clone https://github.com/openstaticfish/actionflow.git
cd actionflow
bun link
actionflow  # Available globally

Option 2: Clone and run locally

git clone https://github.com/openstaticfish/actionflow.git
cd actionflow
bun install
bun run src/tui/index.tsx

Option 3: NPM (coming soon)

bun install -g @openstaticfish/actionflow
actionflow

Keyboard Shortcuts

Key	Action
↑/↓ or j/k	Navigate workflows
←/→ or h/l	Switch category
Space	Select/unselect current variant row
Enter	Open batch confirmation
D / F	Toggle dry-run / force in confirmation modal
?	Toggle help overlay
q or Ctrl+C	Quit

Available Workflows

Category: opencode

Workflow	Type	Variants	Description
opencode/pr	set	standard, nix	AI-powered PR code review
opencode/opencode	set	standard, nix	Slash command handler (/oc)
opencode/triage	set	standard	AI issue triage

Requirements

• Terminal with minimum 80x24 characters
• Truecolor support recommended (iTerm2, Kitty, Alacritty)
• Bun runtime

Architecture

src/
├── tui/                      # TUI application
│   ├── index.tsx             # Entry point
│   ├── components/           # React components
│   │   ├── App.tsx
│   │   ├── Header.tsx
│   │   ├── Sidebar.tsx
│   │   ├── DetailPanel.tsx
│   │   ├── HelpOverlay.tsx
│   │   ├── TooSmallPopup.tsx
│   │   └── Spinner.tsx
│   ├── hooks/                # Custom hooks
│   │   ├── useTerminalSize.ts
│   │   ├── useWorkflows.ts
│   │   └── useNavigation.ts
│   ├── theme/
│   │   └── cyberpunk.ts      # Color palette
│   └── utils/
│       └── terminal-check.ts
├── core/
│   └── registry.ts           # Workflow discovery
└── models/
    └── workflow.ts           # Type definitions

Theme Customization

Edit src/tui/theme/cyberpunk.ts to customize colors:

colors: {
  bg: '#0a0a0f',           // Background
  primary: '#00f5ff',      // Cyan accent
  secondary: '#ff00ff',    // Magenta
  success: '#00ff88',      // Green
  warning: '#ffea00',      // Yellow
  error: '#ff0044',        // Red
  // ... more colors
}