What exactly is Claude Code doing when it goes quiet for 30 seconds? Agent Flow, a new open-source VS Code extension, answers that question with a live visual node graph of every tool call, decision branch, and subagent handoff happening under the hood.
The extension auto-detects active Claude Code sessions in your workspace and streams execution data in real time using Claude Code's hooks system. Each tool call becomes a node on an interactive canvas you can pan, zoom, and click to inspect. You can see where time is being spent, trace the exact sequence of decisions that led to an unexpected result, and spot redundant branching or slow tool calls.
What You Get
Beyond the live graph, Agent Flow includes a timeline panel for reviewing full execution history and a file attention heatmap showing which files Claude Code focused on. It supports multiple concurrent sessions via tabs, and can replay past sessions from JSONL event logs.
Setup takes about a minute: install the extension, open the command palette, and run "Agent Flow: Open Agent Flow." It configures the necessary Claude Code hooks automatically on first launch. The keyboard shortcut is Ctrl+Alt+A (Cmd+Alt+A on Mac).
The project was built by developer Simon Patole while working on CraftMyGame, an AI-driven game platform where debugging agent behavior was critical. It's Apache 2.0 licensed, requires VS Code 1.85+, and is written almost entirely in TypeScript.
For anyone doing serious work with Claude Code - especially multi-step workflows involving subagents - this fills a real gap. The difference between "Claude did something wrong" and "Claude made the wrong tool call at step 4 of 12" is the difference between guessing and debugging.