DSH Web GUI 擁有一個強大的「軌跡」標籤頁用於記錄執行歷史。然而，在表格中追蹤執行順序和結構關係有時比較困難。此插件在官方視圖旁邊添加了一個交互式 ReactFlow DAG，利用相同的源數據提供因果和執行順序的可視化。
功能概覽¶
該插件將官方軌跡快照投影到 ReactFlow 圖表中。它不維護單獨的日誌；相反，它讀取 snapshot.views.get('trajectory') 並將其渲染爲節點。
- 新增標籤頁：在官方對話視圖旁邊添加一個「軌跡圖譜 / Trace Graph」標籤頁。
- 節點與邊：節點代表軌跡記錄（SYSTEM、USER、CONTEXT、ASSISTANT、TOOL 等）。邊顯示執行順序（灰色虛線）和結構關係（僅當數據證明時出現的彩色實線）。
- 交互：懸停會高亮上游/下游鄰居。點擊節點可檢查記錄的 Input / Output JSON。
- 佈局：工具欄允許在 dagre（層級，默認）和 d3-force（有機）之間切換。ResizeObserver 會根據視圖或側邊欄的調整自動適配佈局。
- 配置：在「設置 → 插件」中，你可以啓用/禁用插件、控制是否向智能體廣播安裝信息以及設置默認佈局。
安裝¶
安裝前，請確保環境滿足要求：Node.js ^22.19 || >=24 和 pnpm 11。
dsh plugin --profile web add github:tieveto666-code/dsh-client-ui-trace-graph
如果在第一次安裝時遇到 prepare 腳本被 pnpm ≥10 阻止，請按照 dsh 的提示，將打印的包密鑰添加到配置文件 pnpm-workspace.yaml 中的 allowBuilds 下，然後再次運行 add。
使用方法¶
安裝後，重啓 dsh web 並刷新頁面。新的「軌跡圖譜」標籤頁會出現在對話標籤頁旁邊。
- 查看圖譜：打開「軌跡圖譜」標籤頁。灰色虛線顯示時間順序。彩色實線顯示證明的因果或嵌套關係。
- 檢查詳情：點擊任意節點以在側邊欄中查看詳細的 Input / Output JSON。
- 切換佈局：在圖譜上方的工具欄中，點擊圖標在 dagre 和 d3-force 佈局之間切換。
注意事項¶
- 邊邏輯：結構邊是保守的。如果軌跡數據未證明關係，僅繪製序列邊。
- ReactFlow 致謝：除非使用 Pro 許可證，否則 ReactFlow 會在角落保留其歸屬標記，這是有意爲之。
- 性能：對於包含數百個節點的大型圖，粒子計數會自動減少。如果遇到渲染問題，考慮禁用節點上的
backdrop-filter。 - 版本兼容性：pnpm ≥10 可能會阻止
prepare腳本。請參閱上面的安裝說明以處理此問題。
