Agent Flow: A beautiful way to visualize Claude Code actions

Hey HN,

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 in realtime:

- 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

It's also been really useful when building agents into your own product. Having a visual way to see how an agent actually behaves makes it much easier to iterate on prompts, tool design, and orchestration logic.

It's also been invaluable when building agents into your own product. I've been using it every day to understand how the Anthropic Agent SDK behaves, and seeing agent orchestration visually makes it so much easier to iterate on prompts, tool design, and coordination logic.

It's also interactive, and shows what's happening as Claude Code works: which agents are active, what tools they're calling, how they coordinate, and where time and tokens are being spent.

You can pan, zoom, click into any agent or tool call to inspect it.

It runs as a VS Code extension — opens as a panel right alongside your editor.

What you can see:

- Live agent spawning, branching, and completion - Every tool call with timing and token usage - Token consumption per task and per session - Parent-child agent relationships - File attention heatmaps (which files agents are reading/writing most) - Full transcript replay - Multi-session support for concurrent workflows

Currently works with Claude Code. Codex support and iTerm2 integration are next on the roadmap.

GitHub: https://github.com/patoles/agent-flow