对话故事板simikangtao/dsh-storyboard

dsh-storyboard

面向 DeepSeek Harness Web 的对话结束豆包风格可视化故事板。

当一段实质性对话结束时（完成了实际工作、产出了方案，或解释了一个概念），模型会调用一次 storyboard 工具，随后侧边栏中会出现一张紧凑的可视化卡片，概括做了什么以及它如何运作。/storyboard [focus] 命令可按需强制生成一张。

为什么它很轻量

- 纯服务端插件 —— 没有客户端 bundle，不会向浏览器额外发送 JS。
- 零运行时依赖 —— 仅使用 node 内置模块（crypto、fs、os、path）。
- 每个故事板一个自包含 HTML 文件（约 5–20 KB）：系统字体、内联 SVG、无网络请求、无 CDN、可离线使用。
- 极小的提示词占用 —— 注入的指导部分约 500 个字符。
- 故事板写入 $DSH_HOME/storyboard//（默认 ~/.dsh/storyboard//）。

安装

from a workspace containing this folder:
dsh plugin --profile web add file:C:\path\to\dsh-storyboard

or by package name once published:
dsh plugin --profile web add dsh-storyboard

该 bundle 补丁会向 web profile 中插入一行（id: storyboard）。
从 profile 中移除该行即可禁用它（提示词部分、工具和命令均通过该行的存在而注册）。

用法

1. 自动 —— 在实质性交流结束时，模型会自行生成卡片并在侧边栏中打开它。
2. 按需 —— 在聊天输入框中输入 /storyboard（可选 /storyboard the install steps）。

卡片分区

| 分区 | 字段 | 备注 |
| --- | --- | --- |
| 标题 / 副标题 | title、subtitle | 标题必填，最多 40 / 80 个字符 |
| 如何连接 | diagram | ≤8 个节点，≤12 条边，以内联 SVG 渲染，采用分层 DAG 布局 + 箭头 |
| 做了什么 | flow | ≤8 个带可选注释的编号步骤，由一条垂直导轨连接 |
| 关键事实 | facts | ≤8 个标签/值对，采用两列网格 |
| 时间线 | timeline | ≤8 个带可选时间标签的点状导轨事件 |
| 如何运作 | howItWorks | ≤8 条机制要点 |

每个字符串都会在宿主侧进行长度限制和 HTML 转义；当某个分区没有内容时，请省略它。

开发

node test/smoke.mjs   # standalone renderer + registration smoke test (no DSH host needed)

限制

- v1 没有设置开关：profile 行的存在即启用该功能。
- 图表布局是简单的最长路径分层（循环会被截断，而不会绘制为真正的循环）。
- 自动触发是基于指令的（由模型判断对话是否结束）；它刻意不是硬性钩子。