Agent Execution Visualization Tool Released

Developer Simon Patole has released Agent Flow, an open-source tool that visualizes the agent execution process of Claude Code and Codex in real time. To overcome the limitations of traditional log-based debugging, it represents the agent's tool calls, branching, and return flows as an interactive node graph.

Key Features

• Real-time Visualization: Places running agents and sub-agents as nodes, displaying cumulative token usage and cost for each node. The right panel allows users to view cost distribution by agent and by tool.
• Multi-runtime Support: Automatically detects and displays Claude Code and Codex sessions side-by-side. Claude Code receives events directly via HTTP hooks, while Codex collects events by monitoring rollout files.
• Accurate Token Aggregation: For Codex, the tool uses the token counts aggregated by the runtime as-is, allowing for accurate cost identification without separate estimation by the visualization tool.

Installation and Usage

• Quick Start: Can be run immediately in a browser using the npx agent-flow-app command, and can be automatically detected and visualized within the workspace via a VS Code extension.
• Environment Requirements: Requires Node.js 20 or higher, pnpm, and Claude Code CLI. The VS Code extension is supported on version 1.85 or higher.
• License: Released under the Apache License 2.0, allowing for commercial use, but the name 'Agent Flow' and its logo are protected as trademarks.

This tool is particularly useful for developers who want to diagnose bottlenecks or unnecessary branches in complex workflows and observe the prompt interpretation process.