打开浏览器直接试: conv-viz-storyline.vercel.app
💡 在线 Demo 是**自带 key(BYOK)**的 —— 进去前先准备好一个 OpenRouter API key(蒸馏一个项目约 $0.03)。key 只留在你自己的浏览器里。
把一段真实的长对话蒸馏成 storyline —— 点上面的在线 Demo 自己试,或按下面 30 秒本地跑起来 ↓
下面这个仓库是本地自托管版本:克隆它、指向你自己的 ~/.claude/projects/*.jsonl,一切都在你的机器上运行。
一个很长的 AI 项目 —— 几百个回合、多个 agent、分叉、死胡同 —— 当成一条条聊天记录去翻,根本抓不住全貌。Context Visualizer 把原始 transcript 蒸馏成一张可以「眯眼看清」的空间化 storyline:
- 横向色带 = 各个 agent · 横轴 = 真实时间(空闲压缩)
- 彩色丝带 = 话题线程 · 粗细 = 投入了多少工作量
- 丝带分叉长出新线 = 从父线程分出的新线程
- 淡出 / 虚线尾巴 = 被废弃或暂停的线程
- 跨带虚线 = 一次 agent 之间的交接(handoff)
- 圆点 = 类型化的里程碑(提问 · 决策 · 转向 · 产出 · 验收 · 交接 …)
每个里程碑都能点回 transcript 的确切那一行,所以这张图不只是好看 —— 它对「真实发生了什么」是可证明忠实的。
git clone https://github.com/<你>/context-visualizer.git
cd context-visualizer
cp .env.example .env # 然后把你自己的 OpenRouter key 填进 .env
node serve.js # Windows 上也可以直接双击 start.bat打开 http://localhost:8123 —— 你会看到内置的合成示例(一个虚构的「待办 App」项目),首屏立刻有东西可看。
然后喂给它你自己的对话:
- 在界面里: 点 导入对话 → 选
~/.claude/projects/下的一个项目文件夹 → 蒸馏。 - 或用命令行:
node --env-file=.env distill.js --out events.json ~/.claude/projects/<项目>/<会话>.jsonl node coverage-audit.js # 信任门禁 —— 必须报告 ❌ = 0
刷新页面,你项目的 storyline 就出来了。
原始 .jsonl ──► distill.js + distill-core.js ──► events.json ──► index.html(零依赖 SVG 渲染器)
│ ▲
└─ 你的 OpenRouter key(本地 .env) serve.js ──────┘ /source · /list · /distill
distill-core.js—— 同构的蒸馏引擎:回合识别、对噪声(空消息 / 附和 / 系统通知)的 0-token 预过滤、线程图构建,以及 barycenter 排序让相关线程彼此相邻。events.json—— 蒸馏器与渲染器之间唯一的数据契约。index.html—— 零依赖 SVG 渲染器,支持语义缩放、夜间压缩、拖动重排泳道。serve.js—— 一个极小的零依赖 Node 服务器:提供页面、流式推送蒸馏进度、解析 provenance 回源。
整个工具的核心就是:「看起来完整」= 「真的完整」。
- 每一条用户 turn 都在账本里有记录 ——
extracted(抽取)、merged(折叠并入)或skipped(显式跳过,并附理由)。 coverage-audit.js会独立地重读原始日志,一旦有任何真实 turn 被静默丢弃就报错(❌ 必须等于 0)。- 每个里程碑都带着
session+line,所以在你自己的数据上可以一键点回原始那一行。
在内置的合成示例里,provenance 回源是「哑」的(假数据背后没有真实源文件)。一旦你蒸馏自己的
~/.claude/projects/*.jsonl,回源就会亮起来。
这是一个本地工具。
- 你的 OpenRouter key 只存在本地
.env(已被 git 忽略),并且只发给 OpenRouter 用于蒸馏。 - 你的 transcript 从你自己的机器读取,不会上传到任何其它地方。
- 无账号、无服务器、无遥测。
aliases.json 是可选的 —— 它只是把一个项目文件夹映射成更友好的 agent 名字 / 颜色 / 角色。删掉它,任何对话依然能用自动派生的通用名字正常渲染。
{
"my-project-folder": { "name": "Planner", "hue": "#8BA3FF", "role": "research · planning" }
}| 文件 | 作用 |
|---|---|
index.html |
零依赖 SVG storyline 渲染器 |
serve.js |
本地服务器(/source · /list · /distill) |
distill.js · distill-core.js |
transcript → events.json 蒸馏器 |
coverage-audit.js |
信任门禁 —— 校验没有 turn 被静默丢弃 |
live-update.js |
用于实时更新的无状态增量蒸馏器 |
events.json |
内置的合成示例数据 |
aliases.json |
可选的友好 agent 名字 |
start.bat |
Windows 一键启动 |
MIT © 2026 Zaheer