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脚本。请参阅上面的安装说明以处理此问题。
