智能交互视图 cwd514/dsh-intelligent-ui

dsh-intelligent-ui

这个插件包给 DeepSeek Harness（DSH）加上类似 ChatGPT Intelligent UI 的能力。
模型不只会输出文字，还能调用 render_ui 工具，当场返回交互式视图（表格、图表、对比、步骤、带输入框的小工具）。

会发生什么

1. 模型调用 render_ui。参数是一串声明式区块（JSON），不写 HTML，也不写 JavaScript。
2. 宿主侧校验并规范化参数，再把规范化后的规格作为结果的 meta 公开。
3. 客户端在两处渲染。执行中，把工具调用那一行本身（插槽 tool.call.toolview）替换成视图；响应完成后，再把视图挪到回答正下方（插槽 conversation.chat.turnTail）。同一份规格会留在会话日志里，刷新后照样重新渲染。

显示位置

| 时机 | 工具调用行 | 回答下方（轮次末尾） |
| 执行中（参数流式传输时也算） | 视图（参数每到达一次就重绘） | —（轮次关闭前不出现） |
| 响应完成后 | 一行「视图已显示在回答下方」 | 视图（常驻显示） |

工具行位于「处理折叠组」里，所以响应完成后整组会折叠起来，看不见（取决于工作详情的显示模式，也可能完全隐藏）。因此，确定下来的视图会在轮次末尾再画一次，作为回答的一部分保留。所有权按轮次移交，所以不会同时看到两个相同的视图——就算手动展开折叠组，那里也只显示一行提示。

支持的元件有 15 种（section / row / text / callout / divider / stat / table / chart / comparison / timeline / diagram / tabs / inputs / calc / buttons），最多嵌套 6 层。
inputs 和 calc 在浏览器侧完成重算，buttons[].message 和 inputs.submit.message 会把 {{name}} 替换成当前值，再作为用户发言发送。

卡片类型（共 15 种）

以下全部是在真实 DSH Web GUI 里调用 render_ui 渲染后直接截取的（浅色主题）。5 张图覆盖全部 15 种。

布局 — section / row / text / callout / divider / stat

用 section 分区，用 row 排数字，用 divider 分隔，用 callout 给结论。text 分 lead / body / caption 三档。

布局类区块（section / row / text / callout / divider / stat）

数据 — chart / table

chart 画 bar / line / pie，table 点表头排序（sortable），用 format 把 number / percent 格式化。

图表和表格（chart / table）

对比与步骤 — comparison / timeline

comparison 把选项横向排开，timeline 带 at 展示有先后顺序的内容。

对比与步骤（comparison / timeline）

关系与并列 — diagram / tabs

diagram 支持 flow / tree / cycle 三种布局，选中节点会显示 detail。tabs 用来切换并列的答案。

关系图和标签页（diagram / tabs）

交互 — inputs / calc / buttons

改动 inputs 的值，calc 会当场重算（这个例子是勾选「年付」后的 ¥10,800）。buttons 用来发送发言或打开文件。

输入、重算、按钮（inputs / calc / buttons）

安装

1. 从 Plugin Manager 安装（推荐）

在安装栏粘贴下面的 spec（Settings → Plugins）。

github:cwd514/dsh-intelligent-ui

想交给智能体来做，就把同样的字符串作为 target 传给 plugin_manager 工具的 install_bundle。

install_bundle target="github:cwd514/dsh-intelligent-ui"

2. clone 后指定路径

git clone https://github.com/cwd514/dsh-intelligent-ui.git
plugin_manager install_bundle target="/absolute/path/dsh-intelligent-ui"

两种方式都会注册到配置档的 dsh.profile.bundles，render_ui 工具和视图随之启用。

配置

cordis.patch.yml 里的 config（全部可省略）。

| 键 | 默认值 | 含义 |
| enabled | true | 注册工具和视图 |
| posture | auto | 向系统提示词追加内容。auto（不追加，由模型判断）/ encourage（鼓励积极使用）/ off（仅工具和视图） |
| maxBlocks | 40 | 单个视图的最大块数 |
| maxNodes | 240 | 单个视图的最大元素数（含嵌套的总量） |
| promptOrder | 3200 | encourage 时提示词区块的顺序 |
| extraGuidance | '' | 追加的自由文本（仅在 encourage/off 时生效） |

所有上限都会报出以 render_ui: ... 开头的具体错误，模型可以当场修正参数。

模型看到的样子

- 工具：render_ui。说明文字保持简短，元素细节放在 运行时技能 intelligent-ui 里（目录不会一直挂在提示词上，只在需要时加载）。环境里没有技能注册表时，就把目录折叠进说明文字。
- 技能本体：catalog.md —— 全部元素的类型、字段、输入框种类、calc 语法、实例。
- posture: auto 时不在系统提示词里加任何东西。用不用由模型根据对话判断。

设计约定

- 模型不写 HTML 也不写 JS。 它只收到声明式规格，渲染由插件内的 React 组件完成。不使用 dangerouslySetInnerHTML。
- calc 不用 eval。 用手写的分词器 + 递归下降解析器，只能调用允许的函数（min max sum avg round floor ceil abs sqrt pow if）。属性引用和赋值都会变成语法错误。
- 颜色只用主题 token。 系列色使用 --dsw-alias-state-，在亮色/暗色两种主题下都能作为颜色辨认。
- 坏掉的部分就地止住。 每个块都有错误边界，一个块失败，其余照常显示。读不懂的规格用 展示原始 JSON。
- 流式输出途中也画。 参数还没传完时，补上未闭合的字符串和括号，先把能读的部分画出来（读不了就显示骨架）。

结构

index.js 宿主侧: 工具注册・验证・技能注册・提示词追加 client.js 客户端侧: 2 个插槽实现（渲染・状态・样式・向回合末尾的交接） catalog.md 给模型读的元素目录（运行时技能的本体） cordis.patch.yml 打包插入与 config locale/.json Plugin 列表里显示的名称和说明（ja/en） test/smoke.mjs 宿主 63 件 + 客户端 100 件的自动测试

测试

npm run check # node --check
npm test # 163 件冒烟测试（宿主 63 / 客户端 100）

客户端侧用 vm.runInThisContext 注册到 window.__ModuleLoader__，再用最小的 React 桩组装组件树做验证。调试用的 window.__dshIntelligentUi（looseJson / sanitizeSpec / compileExpr / niceTicks / diagramEdge / lastRender …）已公开。

已验证的范围

在 DSH Web GUI（http://127.0.0.1:3080）上实际确认过。

- 工具执行 → 组件渲染（经 meta，phase: result）
- 执行中工具行里出现视图，响应完成后工具行变成一行提示，同一个视图留在回答下方（lastRender.shown 从 card → note，lastTail.views 为 1）
- 页面刷新后也能从会话日志重新渲染（回合末尾的视图也会恢复）
- inputs / calc 重新计算（方案变更 → ¥0，席位数 40 → ¥48,000）
- 按钮的复制操作，inputActions 确实由真实应用传入（interactive: true）
- 亮色/暗色两种主题下的配色
- 15 种块全部实际渲染（README 画廊里的 docs/blocks-.jpg 就是实际截图）
- 日文显示（英文、中文词典由自动测试验证）

已知限制

- PTC（mode: ptc）下工具被嵌套执行时，meta 不会公开，只能从参数的原始文本恢复。调用会画在 run_code 的卡片里，回合末尾的视图里也会并排出现同样的调用（嵌套不是作为节点，而是进入父块的 subCalls，所以插件侧会向上追溯父块来收集）。
- 不是按 token 的流式渲染，而是按参数的 chunk 渲染。
- 没有设置用的 GUI（用 cordis.patch.yml 配置）。

许可证

MIT

dsh-intelligent-ui 给 DeepSeek Harness（DSH）带来 ChatGPT 风格的 Intelligent UI*：模型可以调用声明式 render_ui 工具，用交互式视图作答——表格、图表、对比、时间线、小型计算器——而不是只给一段散文。模型从不写 HTML 或 JavaScript；每个块都由本插件的 React 组件根据校验过的 JSON spec 渲染。15 种块类型，嵌套最多 6 层，inputs/calc 在浏览器里重新计算，buttons[].message 会作为用户自己的话发回去。

安装

把下面这段 spec 粘贴到 Settings → Plugins，或者作为 target 传给 plugin_manager 的 install_bundle 工具：

github:cwd514/dsh-intelligent-ui

克隆仓库再安装它的绝对路径也可以。

视图出现在哪里

| 时机 | 工具调用行 | 回答下方（Turn 尾部） |
| 运行中（参数还在流式传输时） | 视图 | —（Turn 结束后才发布） |
| Turn 完成 | 一行文字，指向下方 | 视图 |

工具调用行位于可折叠的 Tool 分组里，Turn 完成后该分组会收起。Turn 关闭时，已定稿视图的归属转移到 Turn 尾部（conversation.chat.turnTail）——在分组之外，紧贴收尾的散文下方——这样视图始终是回答的一部分，也不会重复显示。

卡片图库

全部 15 种块类型，截自真实 GUI：layout（section / row / text / callout / divider / stat） · chart / table · comparison / timeline · diagram / tabs · inputs / calc / buttons。

配置

cordis.patch.yml 的 config 下可选这些键：enabled（true）、posture（auto / encourage / off）、maxBlocks（40）、maxNodes（240）、promptOrder（3200）、extraGuidance（''）。

开发

npm run check # node --check
npm test # 163 smoke checks (63 host / 100 client)

客户端那一半会加载进 Node vm 上下文，对着一个极简 React stub 运行：插槽注册、spec 清洗、calc 解析器、流式参数读取、已定稿视图的交接、Turn 尾部，全都有覆盖。同样的检查也在 GitHub Actions 里跑。

限制

- 在 PTC（mode: ptc）下，嵌套调用不发布 meta，所以视图要用原始参数文本重建；它也会出现在 Turn 尾部。
- 流式重绘按参数块触发，不是按 token。
- 没有设置 GUI——通过 cordis.patch.yml 配置。

许可证

MIT