Agent Flow

Agent Flow

Real-time visualization of Claude Code and Codex agent orchestration. Watch your agents think, branch, and coordinate as they work. Demo video here.

Why Agent Flow?

I built Agent Flow while developing Antics, a game creation platform driven by AI agents. Debugging agent behavior was painful, so we made it visual. Now we're sharing it.

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:

- Understand agent behavior — See how Claude breaks down problems, which tools it reaches for, and how subagents coordinate
- Debug tool call chains — When something goes wrong, trace the exact sequence of decisions and tool calls that led there
- See where time is spent — Identify slow tool calls, unnecessary branching, or redundant work at a glance
- Learn by watching — Build intuition for how to write better prompts by observing how Claude interprets and executes them

Features

- Live agent visualization: Watch agent execution as an interactive node graph with real-time tool calls, branching, and return flows
- Claude Code + Codex: Auto-detects sessions from both runtimes concurrently and shows them side-by-side, or restrict to one via the agentVisualizer.runtime setting
- Claude Code hooks: Lightweight HTTP hook server receives events directly from Claude Code for zero-latency streaming
- Codex rollout tailing: Reads ~/.codex/sessions//rollout-*.jsonl (respects CODEX_HOME) and surfaces tool calls, reasoning, and authoritative token counts from Codex's own event stream
- Multi-session support: Track multiple concurrent agent sessions with tabs
- Interactive canvas: Pan, zoom, click agents and tool calls to inspect details
- Timeline & transcript panels: Review the full execution…