Coding Agent Visualizer：把 AI 编程会话变成可视化执行图

最近vibe了一个小工具 Coding Agent Visualizer ，它把 Claude Code、Codex、Gemini、OpenCode、Cursor 这些 AI 编程助手留下的会话记录，变成一张可以交互的执行图。一行命令就能跑：

bunx coding-agent-visualizer@latest

（全局安装 bun add -g coding-agent-visualizer 之后，可以用短命令 cav 启动。）

前提是装了 Bun (https://bun.com/ )。还没装的话：

# macOS & Linux
curl -fsSL https://bun.sh/install | bash

# Windows (PowerShell)
powershell -c "irm bun.sh/install.ps1 | iex"

GitHub (https://github.com/everettjf/coding-agent-visualizer ) · npm (https://www.npmjs.com/package/coding-agent-visualizer )

为什么要做这个

每天用 Claude Code 写代码，它在后台干了一大堆事：读文件、跑命令、改代码、调子 agent……但这些过程最后都被压扁成一行行 JSONL 日志，躺在 ~/.claude/projects/ 里。出了问题想复盘，或者单纯好奇"它到底做了什么、花了多少 token、卡在哪一步"，你只能对着一堆 JSON 干瞪眼。

这些 agent 的执行本质上是一棵树——一次对话里嵌套着工具调用、子 agent、分支推理。既然是树和时间序列，那就天然适合画出来。于是有了 CAV：它扫描你本地各家 agent 的会话文件，解析成统一的数据结构，再用几种不同的视图把它呈现出来。

一个重要前提：所有数据都只在你本地处理，什么都不会上传。它只读你机器上已有的会话文件，跑一个本地服务器渲染，仅此而已。

它读哪些 agent

CAV 会自动发现这些来源的会话，不需要任何配置：

• Claude Code
   — ~/.claude/projects/<encoded-cwd>/*.jsonl
• Codex
   — ~/.codex/sessions/YYYY/MM/DD/rollout-*.jsonl
• Gemini CLI
   — ~/.gemini/tmp/<project-hash>/checkpoint-*.json
• OpenCode
   — ~/.local/share/opencode/storage/…
• Cursor
   — IDE 的 state.vscdb SQLite（composer 对话）

左侧边栏会按项目分组列出所有会话，可以搜索、按来源筛选。每条会话显示消息数、工具调用数和 token 总量。

七种视图

同一份会话数据，CAV 提供了七个角度去看它。

Graph：执行图

默认视图。把整次会话画成一张有向图——用户消息、助手回复、推理块、工具调用、子 agent，各用不同颜色的节点表示，按依赖关系连线。子 agent 可以折叠/展开，点任意节点就能在右侧看到完整内容（消息、推理、工具参数、文件 diff）。这是从宏观上理解"agent 怎么一步步推进"的最佳入口。

Waterfall：瀑布图

如果你关心时间和嵌套深度，瀑布图更合适。每一行是一个事件，横轴是时间，缩进表示调用深度。一眼就能看出哪些步骤串行、哪些耗时长、子 agent 在整条时间线的什么位置展开。绿色块是推断出的执行时长。

Flame：火焰图

火焰图按 token 成本排序——条形的宽度是 token 数，深度是调用嵌套。哪一步最烧钱、整次会话的成本分布如何，看这张图最直观。点任意一块可以下钻查看细节。

Timeline：时间线

按时间顺序逐条列出所有事件，标注相对时间戳、角色、内容摘要。适合线性地、从头到尾"重放"一遍 agent 做过的事。

Files：文件热力图

agent 这次到底碰了哪些文件、各读写了几次，用热力图呈现，快速定位它的"注意力"集中在代码库的什么地方。

Stats：统计面板

整次会话的数字总览：耗时、消息数、工具调用数、改动文件数、输入/输出/缓存 token、推理块数量。下方还有累计 token 曲线、token 构成环形图、各工具使用次数柱状图。想给一次会话做"体检"，看这一页就够了。

Transcript：完整文字记录

回归最朴素的形式——按对话顺序展开的完整文字记录，每条消息带角色标识和工具折叠块。当你就是想老老实实读一遍原文时用它。

跨会话分析与导出

除了单次会话，CAV 还有一个跨会话分析面板，把你本地所有发现的会话聚合起来看趋势——同样全部在本地完成。

每次会话都可以导出成 Markdown 或一个自包含的 HTML 文件（单文件、可分享、本地生成、不上传任何东西），方便存档或发给别人。

侧边栏和详情面板都可以拖拽调整宽度，宽度会记在本地，下次打开还在。

技术栈

整个项目跑在 Bun 上，是一个 Bun 原生的全栈应用——一个进程同时服务 React 前端和读取本地数据的 API，没有任何外部服务。

• 运行时/打包
  ：Bun（Bun.serve 的 HTML bundling）
• 前端
  ：React 19 + TypeScript
• 图
  ：React Flow + dagre 布局
• 图表
  ：Chart.js
• 样式
  ：Tailwind CSS v4 + Radix UI

因为是 Bun 原生应用，发布成 bunx 一键运行有个小坑值得一提：Bun 加载 bunfig.toml（注册 Tailwind 插件）和解析 HTML 打包，都是相对启动时的工作目录的。而 bunx 的工作目录是用户随便哪个文件夹，不修正的话样式和静态资源会全部错位。所以 CLI 入口做的第一件事，就是把工作目录钉到包的根目录再启动服务器——发布前我特地打包后装进一个干净目录、从无关路径跑了一遍端到端验证，确认 CSS 能完整加载才发的 npm。

最后

如果你也每天和这些编程 agent 打交道，欢迎试一下：

bunx coding-agent-visualizer@latest

代码开源在 GitHub，有问题或想法欢迎提 issue。