Trace Canvas 0.3.0教程：一张图管住多个AI Agent

多个 AI Agent 同时开工——一个写代码、一个改论文、一个投简历——几天后回来，谁做到哪、哪件事停了，全靠脑子记。Trace Canvas 试图把这种混乱画成一张地铁线路图：每个项目一条线，每一步一个站点，人看得懂，Agent 也读得懂。0.3.0 版本用 11 节短课覆盖了从安装到多机协作的全流程，下面拆解它的核心设计。

安装与接入：零依赖，本地运行

装好接上只需要 Node.js，不用 npm install，克隆后一条命令启动，页面就跑在本机。空页面上可先载入示例数据看效果，清除数据后所有内容只存在本地一个文件里，免费开源、本地运行为整套工具定下基调。

接入 Agent 同样是一条命令：Claude Code 通过 Hooks 自动留痕，MCP 工具让 Agent 读写这张图，Sk** 让你一句话把会话放进画布；Codex 加 Agents Codex 后，两种 Agent 共用一张画布。接好之后，每个会话都会自己出现在图上。

MCP（Model Context Protocol） 是一套让 AI Agent 与外部工具、数据源标准化交互的开放协议。在这里，MCP 工具把 Trace Canvas 的画布暴露为 Agent 可调用的接口：Agent 通过它读取某条线的目标、待办、历史决策，也能写入新的站点或更新状态。与 Hooks 不同，Hooks 是 Claude Code 在会话生命周期中自动触发的回调，用于被动留痕；而 MCP 是 Agent 主动读写画布的通道。两者配合，既保证了会话过程被自动记录，又让 Agent 能按需查询上下文，从而实现“新 Agent 几秒接上进度”。

核心概念：线、项目、分支与 Agent

一条线就是一个项目

最重要的规则是：线对应项目。在 TripSplit 文件夹里开的 Agent，不管是 Claude Code 还是 Codex、开了几个对话，记录都落在同一条线上。这条线就是这个项目的全部来历——目标、待办、做过它的每一条会话，每一步做了什么。管 Agent 也就按线来：新 Agent 先读这条线就能接上，代办交给这条线上的 Agent，线停了会提醒你。

一个项目同时做几件事就开分支

最省事的办法是照常切 Git 分支，图上自动分出一条新线，这个分支上的会话都记在它上面。也可以在画布上自己分：点任意一站从这里分叉、起个名字创建分支；要一条全新的线，点工具栏上的新线程，或者直接跟 Agent 说“从 TripSplit 分一条线叫深色模式，把你自己放上去”。Agent 在哪个项目、哪个分支开的，就自动在那条线上；想换线，在实时栏点它，面板里改选所属线，或者说一句“把你自己放到 Currencies 这条线上”。要新开 Agent 直接在某条线上开工，用待办的“交给他”。

整台电脑的 Agent 收进一张图

假设电脑上有四个项目：记账应用、毕业论文、求职、宣传视频，每个项目里都开过好几个 Agent。在任意一个窗口说一句“把这几个项目的会话都放进画布”，它找出每个文件夹里的会话，跟你确认一次就全放上去，每个文件夹下的会话一条线，分支各自分出来。刚放上来有点乱，再让它整理按项目分组，它还会提建议——比如论文的数据分析在另一个文件夹其实是同一件事，并成一条线——先确认再动手。分好组点一下整理，一个项目一个框，分支紧跟在原线后面。以后两个文件夹的会话都记在这条线上，每个会话都带着它的文件夹，新 Agent 读这条线就知道该去哪个文件夹干活。

读懂画布：五种站点与两种视图

画布上一张卡片就是一条线，上面是它的几站。站点有五种：想法、任务、Agent、决策、笔记；深色的是你写的，彩色的是 Agent 写的。做完的分支合并回主线，卡片上写“已并入 n 条”，什么都不丢。

分支式图是一张 GET 图，所有记录按时间排，每条线一条泳道，每行前面有小标记：人形是你写的，星形是 Agent 写的，旁边还写着是哪个 Agent。点一条线它突出出来，面板里是这条线的目标、会话和所有站点；只想看当时定了什么，就只看决策和笔记，线还是完整的，对上的站点亮一圈光。时间线看每条线哪些天在动，按日、周、月切换；项目多了可以专注只看一个项目，不常用的组折叠起来。

GET 图 在这里指一种以时间顺序排列事件记录的图结构（Graph of Events over Time），每条线对应一条泳道，所有站点按发生时间横向展开。这种视图便于追溯“什么时候谁做了什么”，而不是展示任务之间的依赖关系。与常见的甘特图或看板不同，GET 图不强调计划与截止日期，而是忠实记录已经发生的交互，因此人和 Agent 都能从中还原出项目的历史脉络。配合泳道和小标记（人形/星形），可以快速区分人类操作与 Agent 操作。

会话留痕与恢复

装好之后什么都不用做，照常和 Agent 干活，Hooks 自动记下第一条指令、改了哪些文件、每次提交，会话结束时再记一条总结。想让 Claude 自己写几句要点，输入斜杠 trace canvas，或者说“把这次会话放进画布”。页头实时栏显示此刻在跑的会话，等你批准的最前；Agent 的视图画出谁启动了谁；每条线的面板列着做过它的会话，一键复制恢复命令，也能直接跳回那个对话、那个终端窗口。

Hooks 是 Claude Code 提供的事件钩子机制，允许在会话开始、工具调用、文件修改、提交、会话结束等关键节点自动执行指定命令。Trace Canvas 利用 Hooks 在后台静默记录第一条指令、文件变更和提交信息，无需用户手动操作。这种设计把“记录”从负担变成了默认行为，确保了画布数据的完整性和实时性。同时，Hooks 记录的是结构化事件，而非完整对话文本，既保护隐私又便于后续检索与复盘。

目标与待办：新 Agent 几秒接上进度

先给线写一个目标——这条线最后要达到什么。页头的目标打开一张清单，每条线的目标进度条和待办都在主页面上，手机上也能记，不时想到的事记到对应项目的目标下面。每条待办可以选由谁做：交给他，复制启动命令在终端打开，直接让他在这条线上开工；或者对一个 Agent 说“分派每条线”，新记的待办交给做这条线的 Agent，再跑的发消息、停了的恢复、没人做的新开一个 Agent，做完自己勾掉。新开一个 Agent，他先通过 MCP 读这条线的目标、待办、之前每个结果和决定，几秒钟就接上进度，不用你从头讲。

提交与 Diff：画布里不存代码

Agent 说改好了，到底改了什么？点开提交站点，改过的文件按改动多少排好，点一个文件看 diff，对比两次提交之间改了什么。画布里不存代码，打开时现问 Git，所以看到的总和仓库一致。

停滞检测与复盘

有的线坐着坐着就停了：一条线停的比平时久很多、又没有 Agent 在跑，目标上就多一个小成点，不弹窗。点开最上面一行是安静了的线，每条停了几天都标着。点一个，它只问一句“做完了吗”——完成、搁置、还在做。点“AI 梳理”让 Claude 把每条线读一遍，建议哪些该合并、哪些可以收尾、哪些待办其实做完了，每条一个按钮，你点了才改。

复盘则针对来回最多的事：线面板里点复盘，默认接着上次往下看，读这条线的对话，按来回轮次给每件事排行，每件来回多的事写出卡在哪、哪一句终于说清楚了，再给一条规矩；点“写入”才会写进项目规矩或长期记忆，下次换个 Agent 也一轮就过。

多机协作与收尾

笔记本上查资料、工作站上跑训练、手机随时看一眼，几台设备上的 Agent 也能用一张图统筹。给每台机器起个名字，指向同一个私有 Git 仓库，同步一下就共用一张画布，之后每两分钟在后台自动同步；哪一站是哪台机器写的，旁边都标着名字。待办可以指定机器，分派时交给那台机器上这条线的会话，远程叫醒打开其他电脑的会话，实时栏里两边在跑的 Agent 一起看得到。

看久了刺眼，可以换个乌兰主题，线路颜色也跟着变柔和；有新版本会提示，点一下就更新。Trace Canvas 的定位很明确——一张人和 Agent 都看得懂的地图，而不是又一个任务管理器。