前言¶
在 DeepSeek Harness（DSH）裏跑一輪智能體會話，工具調用、用戶輸入、助手輸出會按時間順序堆在對話區。步驟一多，很難一眼看清「哪一步調了什麼、前後依賴是什麼」。社區裏已有 trajectory 類方案；dsh-plan-graph 是 HR2AY 維護的 out-of-tree 插件包，把當前會話的快照在瀏覽器端渲染成可平移縮放的流程圖，並在會話視圖環上增加 Plan Graph 標籤頁。
下面介紹它的定位、核心能力與安裝方式。事實以 GitHub 倉庫 README 爲準；SkillHub 目錄頁見 skillhub.cn/plugins/HR2AY/DSH-Plan-Graph。
這是什麼¶
dsh-plan-graph（npm 包名 dsh-plan-graph，當前版本 0.3.0）是一個 DSH 插件 bundle：從會話快照讀取工具調用與消息，在客戶端生成交互式流程圖。維護者爲 HR2AY，許可證 MIT，SkillHub 分類爲「模型推理」。
它不替代 DSH 核心，而是通過標準 client plugin 服務（slots、locale、layout）註冊到 conversation.view / details，在會話界面旁掛一個圖視圖。
核心功能¶
流程圖視圖¶
Plan Graph 標籤頁提供平移/縮放畫布、按狀態着色的節點卡片、節點詳情面板，以及若干工具欄開關：
- Hide tool calls：隱藏工具調用節點（圖內生效；若部署的
ui-conversation消費了chatNodeVisibility服務，對話區也會同步過濾）。 - Group by turn：按輪次分組。
- Follow latest：跟隨最新節點。
- Merge into conversation：將圖側欄合併進右側真實對話側欄。
節點類型覆蓋工具調用、助手輸出、用戶輸入、steering、context 等；較新版本對 user/steering 節點顯示「輸入」，context 節點顯示「已完成」。
收藏（Favorites）¶
工具欄按鈕打開底部居中面板，展示帶顏色類型塊、摘要與時間的收藏列表。收藏按會話持久化到 localStorage，鍵名爲 dsh.plan-graph.fav.<sessionId>；按節點 id 去重，上限 100 條。
添加方式：節點右鍵菜單，或將節點拖到工具欄收藏按鈕。點擊條目可在圖內居中並閃爍高亮；若節點已離開當前窗口，則按 seq/callId 回退到對應對話行。刪除通過節點右鍵菜單完成。
節點右鍵菜單¶
右鍵節點可：添加/移除收藏、定位至對話區（工具調用節點）、複製節點信息、查看詳情。菜單在點擊外部、按 Escape 或畫布交互時關閉。
定位至對話區（Locate in conversation）¶
將任意節點映射到對話區對應行：
- 工具調用：按
callId - 助手輸出：按
data.finalNode.seq - 用戶輸入 / steering / context：按
data.seq
隨後等待 data-chat-flow-key 錨點出現，滾動並閃爍高亮；10 秒超時則靜默回退到圖內定位。若部署提供了上游 chatLocate 可選服務，優先使用該服務。
圖內高亮通過 CSS animationend 自動清除（動態 client 半側不暴露瀏覽器定時器全局，setTimeout 不可用）。
安裝與啓用¶
插件以當前 dsh 進程權限運行；從 GitHub 源碼安裝時 prepare 腳本會在本機執行構建。安裝前應檢查源碼與 MIT 許可證，並固定 commit SHA。
本地目錄或 registry¶
在包含該包的目錄下執行：
dsh plugin --profile demo add ./plan-graph-bundle
dsh --profile demo
從 GitHub 安裝¶
源碼安裝，非預構建產物；prepare 會在安裝時構建 client.js：
dsh plugin --profile demo add github:<you>/plan-graph-bundle#<sha>
pnpm 默認拒絕運行 prepare，需將 pnpm 打印的包鍵寫入 profile 的 pnpm-workspace.yaml：
allowBuilds:
dsh-plan-graph: true
然後重新執行 add。allowBuilds 表示允許該包在安裝時在本機執行代碼；請固定 #<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 層。
典型用法¶
- 按上文命令將插件加入 profile 並啓動
dsh --profile demo。 - 打開或新建會話；默認仍爲 Chat 視圖，點擊視圖環上的 Plan Graph 進入流程圖。
- 拖動畫布瀏覽調用鏈；用工具欄切換「隱藏工具調用」「按輪次分組」「跟隨最新」。
- 右鍵節點收藏、複製信息或「定位至對話區」；需要時將圖側欄 Merge into conversation 合併到右側對話欄。
- 若希望會話默認打開流程圖，需由部署方提供
conversationDefaultView服務（{ id: 'plan-graph' }）；插件本身不強制改默認視圖。
開發者修改瀏覽器端邏輯時，編輯 client.body.js，運行 npm run prepare（或 node scripts/build-client.mjs）重新生成 client.js；不要直接改生成文件。
適用場景與注意¶
適合誰
- 需要在 DSH 會話中可視化工具調用鏈路與消息依賴的開發者。
- 已在用 DSH 插件體系、希望 out-of-tree 擴展會話視圖的團隊。
依賴與限制
- 瀏覽器半側依賴 DSH web surface 提供的
conversation.view/details及若干 client 注入（@deepseek-ai/dsh-client-locale、dsh-client-runtime、dsh-client-ui-conversation、dsh-client-ui-layout）。 - 「Hide tool calls」在未打補丁的 stock
ui-conversation上隻影響圖，不改變對話區；需消費chatNodeVisibility的部署才雙向生效。 - 「定位至對話區」依賴對話視圖層的
data-chat-flow-key錨點約定；若上游重命名，功能會靜默回退到圖內定位而非報錯。 chatNodeVisibility服務提供subscribe(fn)；缺少時從 Plan Graph 切回 Chat 可能導致對話頁空白（較新版本已針對此問題修復）。
SkillHub 爲獨立社區目錄，與 DeepSeek / 幻方無官方從屬關係；安裝插件前請自行審閱 HR2AY/DSH-Plan-Graph 源碼。
結尾¶
dsh-plan-graph 把會話裏的工具調用與消息畫成可交互流程圖，並支持收藏、右鍵菜單與對話區雙向定位，適合在 DSH 裏調試複雜 agent 軌跡。目錄頁：skillhub.cn/plugins/HR2AY/DSH-Plan-Graph；源碼與完整說明：github.com/HR2AY/DSH-Plan-Graph。
