Agent Flow：AI 代理编排的可视化工具
实时可视化 Claude Code 与 Codex 代理的编排过程，观察代理如何思考、分支和协作。
证据显示：README 明确说明遥测为 opt-out，且仅聚合事件，不发送提示词、文件路径等敏感数据；但未提供用户确认机制（如安装时询问），也未说明权限最小化原则。数据流透明度较好，有遥测 schema 和序列化函数说明。敏感数据处理有说明但未验证实现。依赖安全仅见 package.json 中的版本范围，无锁文件或审计证据。外部影响包括自动配置 Claude Code hooks，但未说明是否需用户同意。回滚机制未提及。来源归属有作者信息，但发布者未验证。
证据显示：测试覆盖了关键解析器和文件读取逻辑，自洽性较好。依赖可用性仅见 package.json 中的版本范围，无锁文件或 CI 缓存证据。失败消息未在文档中明确说明，但测试中可能隐含。
证据显示：README 明确目标用户（Claude Code/Codex 用户）和使用场景（调试、学习）。能力边界清晰，支持多种入口和运行时选择。触发精度通过设置和环境变量控制。环境适配要求 Node 20+、pnpm、Claude Code CLI 等，但未说明对 Codex 的版本要求。
证据显示：信息架构清晰，有目录和命令表。安装说明详细，包括快速开始和源码安装。命名稳定性未明确说明，但版本号存在。示例和 FAQ 有 demo 视频和截图，但无 FAQ。已知限制未明确列出。许可证为 Apache-2.0，有 LICENSE 文件。版本变更日志在 extension/CHANGELOG.md 中提及，但未提供内容。维护责任有作者信息，但未说明维护策略。
证据显示：输出可用性高，提供实时可视化、时间线、转录等。边际价值明确，解决黑盒问题。成本效益未量化，但作为开源工具，成本低。
证据显示：README 中的功能声明有测试支持（如 Codex 解析器测试），但未提供独立验证。跨来源佐证有限，仅依赖单一仓库。事实与推断分离不明确，如遥测声明未验证。
- 遥测为 opt-out，默认启用，用户需主动关闭，可能引起隐私担忧。
- 自动配置 Claude Code hooks 可能修改用户配置，未明确征得同意。
- 发布者未验证，来源可信度未知。
- 依赖版本范围较宽，未提供锁文件，供应链风险未充分缓解。
这个 Agent 能做什么，适合哪些场景？
Agent Flow 是一个开发工具，提供实时可视化 Claude Code 和 Codex 代理的执行过程。它通过交互式节点图显示工具调用、分支和返回流程，帮助开发者理解代理行为、调试工具调用链、定位耗时环节并学习如何编写更优提示词。该工具提供多种接入方式：浏览器快速启动（npx agent-flow-app）、独立 Web 应用（pnpm run dev）、以及 VS Code 扩展。它支持多种功能，包括多会话标签页、交互式画布、时间线和转录面板、文件关注度热图以及 JSONL 日志文件回放。项目由 CraftMyGame 的开发者创建，采用 Apache 2.0 许可，并内置了可关闭的匿名遥测。
Agent Flow 通过三种方式捕获代理事件：Claude Code 的 HTTP 钩子服务器接收事件流，读取 Codex 的 ~/.codex/sessions/**/rollout-*.jsonl 文件（尊重 CODEX_HOME），以及支持读取任意 JSONL 事件日志文件。它将这些事件实时渲染为交互式节点图，展示代理的思考、工具调用和子代理协调。用户可以通过平移、缩放画布并点击节点查看详情，使用时间线和转录面板回放完整执行过程，查看文件关注度热图。它支持同时监控多个会话，并以标签页形式展示，可通过设置或环境变量限定只监控 Claude 或 Codex。
- 使用 Claude Code 开发复杂项目时，希望实时观察代理的执行过程，了解其如何分解问题和使用工具。
- 当代理执行出错时，回放工具调用链，精确定位导致错误的决策序列和调用序列。
- 在开发多代理协作系统时，观察不同代理之间的协调方式和返回流程，优化协作效率。
- 教学或学习场景中，通过可视化观察 Claude Code 如何解释和执行提示词，建立编写更好提示词的直觉。
- 使用 Codex 进行开发时，查看其工具调用、推理过程和准确的 token 计数。
- 分析离线 JSONL 事件日志文件，无实时会话时也能回放代理行为。
这个 Agent 有哪些优点和局限？
- 提供实时、交互式的代理执行可视化，使不可见的过程变得可见。
- 支持 Claude Code 和 Codex 双运行时，并同时监控多会话。
- 可通过 JSONL 日志文件离线回放，无需实时连接。
- 提供三种接入方式（CLI、Web 应用、VS Code 扩展），灵活适配不同开发环境。
- 内置可选的匿名遥测，默认关闭，保护隐私。
- 主要针对 Claude Code 和 Codex 设计，不支持其他 AI 代理框架或 LLM 提供商。
- 需要 Node.js 20+ 和 pnpm，可能增加开发环境配置负担。
- 遥测默认在 npx 版本中开启，用户需手动关闭。
- 依赖 Claude Code 的钩子机制和 Codex 的日志文件格式，若这些工具更新可能影响兼容性。
- 目前没有文档说明如何与其他 CI/CD 或自动化工具集成。
如何安装或部署这个 Agent？
Agent Flow 提供三种使用方式：
- 无 VS Code 的快速启动：运行
npx agent-flow-app（要求 Node.js 20+）。 - 从源码运行独立 Web 应用：克隆仓库，运行
pnpm i和pnpm run setup（一次性配置 Claude Code 钩子），然后pnpm run dev。 - VS Code 扩展：安装扩展后，打开命令面板运行 'Agent Flow: Open Agent Flow'，首次打开时扩展会自动配置 Claude Code 钩子。需要 Node.js 20+、pnpm 和 Claude Code CLI。
如何使用这个 Agent？
启动 Agent Flow 后，在另一个终端启动 Claude Code 或 Codex 会话，事件将实时流入浏览器。使用 --port 选项更改端口，--no-open 禁止自动打开浏览器，--verbose 显示详细日志。VS Code 扩展用户可通过 'Agent Flow: Open Agent Flow' 打开面板，或使用快捷键 Cmd+Alt+A (Mac) / Ctrl+Alt+A (Win/Linux)。可通过设置 agentVisualizer.runtime 限定运行时，或设置 agentVisualizer.eventLogPath 指向本地 JSONL 日志文件。