[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"readme:agent-flow":3},"\u003Ch1>Agent Flow\u003C\u002Fh1>\n\u003Cp>Real-time visualization of Claude Code and Codex agent orchestration. Watch your agents think, branch, and coordinate as they work. \u003Ca href=\"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=Ud6eDrFN-TA\" rel=\"nofollow ugc noopener\">Demo video here\u003C\u002Fa>. \u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fres.cloudinary.com\u002Fdxlvclh9c\u002Fimage\u002Fupload\u002Fv1773924941\u002Fscreenshot_e7yox3.png\" alt=\"Agent Flow visualization\" \u002F>\u003C\u002Fp>\n\u003Ch2>Why Agent Flow?\u003C\u002Fh2>\n\u003Cp>I built Agent Flow while developing \u003Ca href=\"https:\u002F\u002Fcraftmygame.com\" rel=\"nofollow ugc noopener\">CraftMyGame\u003C\u002Fa>, a game creation platform driven by AI agents. Debugging agent behavior was painful, so we made it visual. Now we're sharing it.\u003C\u002Fp>\n\u003Cp>Claude Code is powerful, but its execution is a black box — you see the final result, not the journey. Agent Flow makes the invisible visible:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>Understand agent behavior\u003C\u002Fstrong> — See how Claude breaks down problems, which tools it reaches for, and how subagents coordinate\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Debug tool call chains\u003C\u002Fstrong> — When something goes wrong, trace the exact sequence of decisions and tool calls that led there\u003C\u002Fli>\n\u003Cli>\u003Cstrong>See where time is spent\u003C\u002Fstrong> — Identify slow tool calls, unnecessary branching, or redundant work at a glance\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Learn by watching\u003C\u002Fstrong> — Build intuition for how to write better prompts by observing how Claude interprets and executes them\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>Features\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>\u003Cstrong>Live agent visualization\u003C\u002Fstrong>: Watch agent execution as an interactive node graph with real-time tool calls, branching, and return flows\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Claude Code + Codex\u003C\u002Fstrong>: Auto-detects sessions from both runtimes concurrently and shows them side-by-side, or restrict to one via the \u003Ccode>agentVisualizer.runtime\u003C\u002Fcode> setting\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Claude Code hooks\u003C\u002Fstrong>: Lightweight HTTP hook server receives events directly from Claude Code for zero-latency streaming\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Codex rollout tailing\u003C\u002Fstrong>: Reads \u003Ccode>~\u002F.codex\u002Fsessions\u002F**\u002Frollout-*.jsonl\u003C\u002Fcode> (respects \u003Ccode>CODEX_HOME\u003C\u002Fcode>) and surfaces tool calls, reasoning, and authoritative token counts from Codex's own event stream\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Multi-session support\u003C\u002Fstrong>: Track multiple concurrent agent sessions with tabs\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Interactive canvas\u003C\u002Fstrong>: Pan, zoom, click agents and tool calls to inspect details\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Timeline & transcript panels\u003C\u002Fstrong>: Review the full execution timeline, file attention heatmap, and message transcript\u003C\u002Fli>\n\u003Cli>\u003Cstrong>JSONL log file support\u003C\u002Fstrong>: Point at any JSONL event log to replay or watch agent activity\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>Getting Started\u003C\u002Fh2>\n\u003Ch3>Quick Start (no VS Code required)\u003C\u002Fh3>\n\u003Cpre>\u003Ccode class=\"language-bash\">npx agent-flow-app\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>This starts the visualizer in your browser. Start a Claude Code session in another terminal — events will stream in real-time.\u003C\u002Fp>\n\u003Cp>Options:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ccode>--port <number>\u003C\u002Fcode> — change the server port (default: 3001)\u003C\u002Fli>\n\u003Cli>\u003Ccode>--no-open\u003C\u002Fcode> — don't open the browser automatically\u003C\u002Fli>\n\u003Cli>\u003Ccode>--verbose\u003C\u002Fcode> — show detailed event logs\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3>Standalone Web App (from source)\u003C\u002Fh3>\n\u003Cpre>\u003Ccode class=\"language-bash\">git clone https:\u002F\u002Fgithub.com\u002Fpatoles\u002Fagent-flow.git\ncd agent-flow\npnpm i\npnpm run setup      # configure Claude Code hooks (one-time)\npnpm run dev        # start the web app + event relay\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Open \u003Ca href=\"http:\u002F\u002Flocalhost:3000\" rel=\"nofollow ugc noopener\">http:\u002F\u002Flocalhost:3000\u003C\u002Fa> and start a Claude Code session in another terminal — events will stream to the browser in real-time.\u003C\u002Fp>\n\u003Ch3>VS Code Extension\u003C\u002Fh3>\n\u003Col>\n\u003Cli>Install the extension\u003C\u002Fli>\n\u003Cli>Open the Command Palette (\u003Ccode>Cmd+Shift+P\u003C\u002Fcode>) and run \u003Cstrong>Agent Flow: Open Agent Flow\u003C\u002Fstrong>\u003C\u002Fli>\n\u003Cli>Start a Claude Code or Codex session in your workspace — Agent Flow will auto-detect it\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>Agent Flow automatically configures Claude Code hooks the first time you open the panel. To manually reconfigure, run \u003Cstrong>Agent Flow: Configure Claude Code Hooks\u003C\u002Fstrong> from the Command Palette.\u003C\u002Fp>\n\u003Ch3>Runtime selection\u003C\u002Fh3>\n\u003Cp>By default Agent Flow watches both Claude Code (\u003Ccode>~\u002F.claude\u002Fprojects\u002F\u003C\u002Fcode>) and Codex (\u003Ccode>~\u002F.codex\u002Fsessions\u002F\u003C\u002Fcode>) concurrently in all three entry points (VS Code extension, \u003Ccode>pnpm run dev\u003C\u002Fcode>, \u003Ccode>npx agent-flow-app\u003C\u002Fcode>). Sessions are shown side-by-side and tagged by runtime. If you only use one, the other is a harmless no-op — no visible effect, no user action needed.\u003C\u002Fp>\n\u003Cp>To restrict to one runtime:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>VS Code extension:\u003C\u002Fstrong> set \u003Ccode>agentVisualizer.runtime\u003C\u002Fcode> to \u003Ccode>\"auto\"\u003C\u002Fcode> \u002F \u003Ccode>\"claude\"\u003C\u002Fcode> \u002F \u003Ccode>\"codex\"\u003C\u002Fcode> in your settings\u003C\u002Fli>\n\u003Cli>\u003Cstrong>\u003Ccode>pnpm run dev\u003C\u002Fcode> and \u003Ccode>npx agent-flow-app\u003C\u002Fcode>:\u003C\u002Fstrong> set the \u003Ccode>AGENT_FLOW_RUNTIME\u003C\u002Fcode> environment variable to \u003Ccode>claude\u003C\u002Fcode> or `co\u003C\u002Fli>\n\u003C\u002Ful>\n",1784240406334]