Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.
Agent Flow is a VS Code extension that provides real-time visualization of Claude Code agent orchestration. It renders agent execution as an interactive node graph, showing tool calls, branching, subagent coordination, and timing — turning Claude Code's black-box execution into a transparent, debuggable flow.
# 1. Open Command Palette
Cmd+Shift+P (Mac) / Ctrl+Shift+P (Win/Linux)
# 2. Run the command
> Agent Flow: Open Agent Flow
# 3. Start a Claude Code session in your workspace
# Agent Flow auto-detects it and begins streaming
Or use the keyboard shortcut:
:
Mac
Cmd+Alt+A
Win/Linux: Ctrl+Alt+A
Commands
Command
Description
Agent Flow: Open Agent Flow
Open visualizer in current editor column
Agent Flow: Open Agent Flow to Side
Open in a side editor column
Agent Flow: Connect to Running Agent
Manually connect to a specific agent session
Agent Flow: Configure Claude Code Hooks
Set up Claude Code hooks for live event streaming
Configuration
Settings available in VS Code settings (settings.json):
{// Path to a JSONL event log file to watch/replay"agentVisualizer.eventLogPath":"/path/to/agent-events.jsonl",// Auto-open the visualizer when an agent session starts"agentVisualizer.autoOpen":true,// Development server port (0 = production mode, use built assets)"agentVisualizer.devServerPort":0}
Auto-Open on Agent Start
// settings.json{"agentVisualizer.autoOpen":true}
Claude Code Hooks Setup
Agent Flow uses Claude Code's hook system for zero-latency event streaming. Hooks are configured automatically on first open, but you can reconfigure manually.
Automatic Configuration
Run from Command Palette:
> Agent Flow: Configure Claude Code Hooks
Manual Hook Configuration
If you need to configure hooks manually, Agent Flow starts a local HTTP server that receives events. The hooks forward Claude Code lifecycle events (tool calls, responses, session start/end) to the extension.
Claude Code hooks are configured in ~/.claude/settings.json or project-level .claude/settings.json:
{"hooks":{"PreToolUse":[{"matcher":".*","hooks":[{"type":"command","command":"curl -s -X POST http://localhost:PORT/hook -H 'Content-Type: application/json' -d @-"}]}],"PostToolUse":[{"matcher":".*","hooks":[{"type":"command","command":"curl -s -X POST http://localhost:PORT/hook -H 'Content-Type: application/json' -d @-"}]}]}}
Agent Flow manages this configuration automatically — prefer using the command palette command.
JSONL Event Log Mode
For replaying past sessions or watching log files generated outside VS Code:
Agent Flow tails the file and visualizes events as they arrive. Use this for:
Post-hoc debugging of agent runs
Sharing agent execution recordings with teammates
CI/CD pipeline agent monitoring
JSONL Event Format
Each line in the log file is a JSON event object:
{"type":"session_start","sessionId":"abc123","timestamp":"2026-03-21T10:00:00Z","model":"claude-opus-4-5"}
{"type":"tool_use","sessionId":"abc123","toolName":"bash","input":{"command":"ls -la"},"timestamp":"2026-03-21T10:00:01Z"}
{"type":"tool_result","sessionId":"abc123","toolName":"bash","output":"total 48\n...","timestamp":"2026-03-21T10:00:02Z"}
{"type":"message","sessionId":"abc123","role":"assistant","content":"I can see the files...","timestamp":"2026-03-21T10:00:03Z"}
Multi-Session Support
Agent Flow tracks multiple concurrent Claude Code sessions with tabs. Each session gets its own visualization canvas.
# Start multiple Claude Code sessions in different terminals
# Each appears as a separate tab in Agent Flow
# Click tabs to switch between session graphs
Interactive Canvas Features
Navigation
Pan: Click and drag on empty canvas
Zoom: Scroll wheel / pinch gesture
Select node: Click any agent or tool call node to inspect details
Timeline: Chronological view of all events with durations
Transcript: Full message history between agent and tools
File Heatmap: Which files received the most attention
Contributing / Development Setup
git clone https://github.com/patoles/agent-flow
cd agent-flow
npm install
# Build the extension
npm run build
# Watch mode for development
npm run watch
# Run with dev server (hot reload)# Set in settings: "agentVisualizer.devServerPort": 3000
npm run dev
Click the failed tool node to inspect input/output
Check the Timeline panel for which tool call took unexpectedly long
Pattern: Replay a Saved Session
# Save Claude Code output to JSONL during a run# (depends on your Claude Code version/config)
claude --output-format jsonl > session-$(date +%s).jsonl
# Point Agent Flow at it
Now every time a Claude Code session starts in your workspace, Agent Flow opens automatically.
Pattern: Side-by-Side Coding and Visualization
# Open Agent Flow to side so you can code and watch simultaneously
Cmd+Shift+P > Agent Flow: Open Agent Flow to Side
This opens the visualizer in a split editor, keeping your code files accessible in the main editor group.
Troubleshooting
Agent Flow doesn't detect my Claude Code session
Verify Claude Code is running in the same workspace folder
Check that hooks are configured: run Agent Flow: Configure Claude Code Hooks
Verify the hook server is running — look for "Agent Flow hook server listening" in the Output panel (View > Output > Agent Flow)
Try Agent Flow: Connect to Running Agent to manually specify the session
Hooks aren't forwarding events
# Test the hook server manually
curl -X POST http://localhost:PORT/hook \
-H 'Content-Type: application/json' \
-d '{"type":"test","sessionId":"test123"}'
Check VS Code Output panel for the correct PORT value.
Graph is empty / not updating
Check agentVisualizer.eventLogPath — if set, Agent Flow reads from file instead of hooks
Clear the setting if you want live hook-based streaming:
{"agentVisualizer.eventLogPath":""}
Reload VS Code window (Cmd+Shift+P > Developer: Reload Window)
Extension not loading
# Check VS Code version meets requirement
code --version
# Must be 1.85 or later# Check extension is enabled# Extensions panel > search "Agent Flow" > verify enabled
Multiple sessions showing in wrong tabs
Each session is identified by a unique session ID from Claude Code. If sessions are merging incorrectly, check that each claude process is started fresh (not reusing an existing session ID).
