计划图轨迹视图 HR2AY/DSH-Plan-Graph

8/16更新

dsh-plan-graph

一个树外 DeepSeek Harness 插件包：把会话里的工具调用和消息画成可交互的流程图，在客户端根据对话快照渲染。插件在会话视图环里加了一个「Plan Graph」标签页（可平移缩放的画布、按状态着色的节点卡片、节点详情、隐藏工具调用和按轮次分组两个开关、跟随最新，以及「Merge into conversation」——合并进右侧真正的边栏）。

pkg-3 在流程图之上加了三个功能：

- 收藏 — 面板位于视图底部居中，从工具栏按钮打开（带颜色的类型方块 + 摘要 + 时间）。按会话隔离，以 JSON 形式持久化在 localStorage 的 dsh.plan-graph.fav.<sessionId> 下，按节点 id 去重，上限 100 条。可以从节点右键菜单添加，也可以把节点拖到工具栏的收藏按钮上。点击某条记录，流程图会以该节点为中心并闪烁高亮；如果节点已经离开当前窗口（部分完成、节点被分页出去），点击会退回到按 seq/callId 匹配的聊天行。删除走节点右键菜单。
- 节点右键菜单 — 右键节点可以：添加/移除收藏、在对话中定位（仅工具调用节点）、复制节点信息、查看详情。点击外部、按 Escape、或在画布上操作都会关闭。收藏在这里管理（也可以把节点拖到工具栏收藏按钮上）——详情面板上没有 ★ 按钮。
- 在对话中定位 — 把任意节点映射到它的聊天行：工具调用按 callId，助手输出按 data.finalNode.seq，用户输入 / steering / 上下文按 data.seq（也就是流程图节点 id 里嵌的那个事件 seq），然后用 MutationObserver 等 data-chat-flow-key 锚点出现，滚动到可见位置并闪烁；10 秒超时后静默退回到图内定位。如果部署提供了上游的 chatLocate 可选服务，会优先使用。

浏览器那一半是 plan-graph 动态插件代码（pkg-3），包在 web 模块加载器的交接格式里——纯 JavaScript，没有构建期依赖。prepare 脚本（pnpm 在 git 安装之后会运行）会从 client.body.js 重新生成 client.js。
0.1.0（pkg-20）以来的变更：pkg-21 — user/steering 节点显示「输入」，context 节点显示「已完成」，不再显示空闲；pkg-22 — 拖动画布不再选中文字（user-select: none + mousedown 时 preventDefault）；pkg-3 — 收藏（持久化，拖动即可添加）、节点右键菜单，以及在对话中定位；pkg-4 — 图谱闪烁高亮通过 CSS 动画的 animationend 自行清除（动态客户端那一半不提供浏览器计时器全局变量，所以没用 setTimeout）；pkg-5 — 收藏 UI 采用下拉面板形式（带颜色的类型方块 + 摘要 + 定位图钉 + 详情 ★ 按钮）；pkg-6 — 面板居中渲染在视图底部，每条记录上的 × 删除按钮去掉；pkg-7 — 右键菜单重新排序，定位至对话区 移到收藏开关下方；pkg-8 — chatNodeVisibility 服务新增 subscribe(fn)（它的使用方在 Chat 渲染时调用；没有它，切回 Chat 时对话页会变空白）；pkg-9 — 从右键菜单移除 定位到图内，移除详情 ★ 按钮（收藏只能通过右键菜单），收藏记录保存节点 seq，节点离开窗口时回退到对话行；pkg-10 — 从收藏行移除定位图钉图标；pkg-11 — 定位至对话区 对每种节点类型都可用（tool 按 callId；assistant 按 finalNode.seq；user/steering/context 按 data.seq）。

安装

在包含这个包的目录下（或任意 npm registry / tarball / git 主机）：

dsh plugin --profile demo add ./plan-graph-bundle
dsh --profile demo

- 从 GitHub 安装（源码，不是构建产物 —— prepare 脚本会在安装时构建）：dsh plugin --profile demo add github:<you>/plan-graph-bundle#<sha>。pnpm 在 prepare 脚本被加入允许列表之前会拒绝运行它 —— 把 pnpm 打印出的那个包 key 原样复制到配置档的 pnpm-workspace.yaml：

allowBuilds:
dsh-plan-graph: true

然后重新执行 add。这个允许意味着你同意在安装时于本机执行这个包的代码 —— 请固定到某个 commit（#<sha>），并且只安装你信任的源码。
- 从 tarball 安装（不需要构建权限）：在本目录执行 pnpm pack，然后 dsh plugin --profile demo add ./dsh-plan-graph-0.3.0.tgz。
- 从 npm 安装（发布之后）：dsh plugin --profile demo add dsh-plan-graph。

不启动也能验证这一层：dsh --profile demo --dump-config 会显示一个 # == dsh-plan-graph 层。

它需要什么

- 浏览器那一半通过标准客户端插件服务（slots、locale、layout）注册到 conversation.view / details，这些服务都由 dsh web 界面提供。
- 「隐藏工具调用」提供可选的 chatNodeVisibility 服务。随包发布的 ui-conversation 还没有使用它，所以在未打补丁的 dsh 上，这个开关在对话页什么也隐藏不了（图谱本身会遵循它）；如果部署的 ui-conversation 使用了这个服务，就能得到实时的对话过滤。
- 新会话默认保留 Chat 视图；Plan Graph 标签页点一下就能到。如果部署时想让图直接放在最显眼的位置，就自己提供上游的 conversationDefaultView 服务（{ id: 'plan-graph' }）。
- 「Locate in conversation」会读取共享的会话快照，并定位到聊天行的 data-chat-flow-key 锚点。这个锚点是随附聊天视图的视图层约定；如果将来 dsh 改了名字，该功能会静默回退到图内定位，而不是报错。

重新生成客户端 bundle

npm run prepare（或 node scripts/build-client.mjs）会从 client.body.js 重新生成 client.js。要改就改 body，永远不要改生成出来的文件。