工具时间线视图 GeekRicardo/dsh-better-tool-ui

dsh-better-tool-ui

DeepSeek Harness（DSH）web 插件：把模型输出的工具调用卡片、MCP 调用和 thinking 行渲染成紧凑的时间线——左侧贯通色轨、行内图标 + 工具名 + 中文描述 + 参数摘要、GitHub PR 风格的代码变更视图，goal 工具渲染成 callout 色块。

本包早期叫 dsh-hebbian-rows，v2 起更名为 dsh-better-tool-ui（渲染范围已经不止最初那套行样式）。

安装

curl -fsSL https://raw.githubusercontent.com/GeekRicardo/dsh-better-tool-ui/main/install.sh | bash

装完重启 dsh web 并硬刷新（Cmd/Ctrl+Shift+R）生效。

先看效果再决定（不写任何文件）：

curl -fsSL https://raw.githubusercontent.com/GeekRicardo/dsh-better-tool-ui/main/install.sh | bash -s -- --dry-run

渲染覆盖

内置工具行（tool.call.toolview 按名接管，28 个 key）：

| 工具 | 行摘要 | 展开详情 |
| bash / pwsh | 命令全文 | 深色终端块（$ 命令 + 尾部输出 + 退出码/信号条），图标沿用 DSH 自带的那枚（IconApiOutline14） |
| read | 相对路径 :#起-止 | 行号代码块 |
| write / edit | 文件名 | GitHub 风 diff（文件名头 + 徽标 + +N−M + 行号 + 整行红绿底色） |
| grep / glob | pattern | 按文件分组的匹配 / 路径列表 |
| web_search / web_fetch | query / url | 引用列表 / 正文回放 |
| todo_write | N 项 · X 完成 · Y 进行中 | 勾选清单 |
| job_output 等 job 系列 | job_id | 终端块 + [status:] 彩色状态条 |
| subagent / send_message 等 | description / 目标 id | 输入输出回放 |
| str_replace_editor | 路径（+view_range） | view→内容回放；create/insert→纯新增视图；str_replace→diff 视图 |
| skill | 技能名 | 内容回放 |
| workflow / subagent 系列 | description | 输入输出回放 |
| ask_user_question | 首个问题的 header/正文（多问题时 N 问） | 分页问题面板：每页一个问题，选项列表按 DSH composer 同款标注选择（单选数字序号 / 多选 checkbox 勾选），自定义文本单独成行；多个问题在同一面板翻页 |

MCP 工具行（mcp__<server>__<tool>）：

- 行首是 MCP 官方标志（simple-icons 的 modelcontextprotocol 路径），标题是去掉服务器前缀的工具名（mcp__dsh__dsh_status → status），紧跟一枚服务器 chip（dsh），摘要按 url / query / path / name … 的顺序取第一个命中的主参数，都没有就退回 第一个标量参数=值。
- 展开后分「参数 / 结果」两段：参数排成 key/value 网格（对象与数组折进 pretty JSON 小块），结果按内容分流——合法 JSON 走轻着色（键/字符串/数字/字面量分色），host 端丢弃字节后留下的 [image: …] [audio: …] [resource: …] 占位行收成 chip，其余按纯文本回放。
- 调用失败时结果段让位给统一的红色错误块（错误名 · code + 正文），不重复渲染同一段文字。

MCP 的公开名由用户装了哪些服务器决定，插件里无从枚举，而 keyed 槽位按精确 key 派发。所以插件订阅会话转录，扫出出现过的调用名后即时补注册，并把认领过的名字存进 localStorage，下次启动先行注册——首次遇到某个工具时可能闪一帧出厂卡片，之后不会。

转录的位置随 DSH 版本搬过家：0.1.5 起 Session 快照只剩生命周期与控制状态，会话内容挪进 ctx.uiConversation.binding(id).target("chat") 的 ChatSnapshot.legacy；更早的版本直接挂在 ctx.sessions.binding(id).session 的快照上。两处形状同为 { getSnapshot, subscribe }，插件按序探测（见 transcriptSource），所以两版都能认领。uiConversation 用 ctx.get 取、不进 inject：cordis 的 inject 是硬依赖，老版本缺这个服务会让整个插件挂起不加载。

「要扫哪个会话」在 0.2.0 换了主人：Session Controller 退出了导航（SessionListState 删掉 current、ISessions 删掉 open，契约注释写明 navigation belongs to view owners），轮询 ctx.sessions.list 取当前会话的老路径从此恒为空——动态认领整条链失效，MCP 行全部落回出厂通用卡片。现在反过来由视图告诉插件：往 conversation.input.dock 挂一个只返回 null 的 session 作用域探针（SessionProbe），拿框架递进 props 的 sessionId 去订阅该会话的转录。谁渲染着会话，谁就是要扫的会话；该座位在新旧 DSH 上形状一致（kind: list / scope: session / props.sessionId），一条路径覆盖所有版本。
子代理 / 工作流内部的工具：DSH 的 ToolCallTree 会把一次调用的 subCalls 递归展开成同级兄弟节点，每个子调用单独过一次 tool.call.toolview 派发——所以子调用本来就会落到本插件的行上。麻烦在于名字：子调用带的是驱动那一侧的工具名，例如 claude-in-dsh 驱动时是 Bash / Read / TodoWrite / Task 这种大驼峰，而 keyed 槽位按精确 key 派发，这些名字过去全部落到出厂通用卡片。现在两头都补上了：

- 名字归一：渲染分派统一先过 canonicalName()——大驼峰拆成蛇形小写，再走一张别名表（Task/Agent → subagent，MultiEdit → edit，BashOutput → job_output，SlashCommand → skill …）。同一个工具无论出现在哪一层，都落到同一套图标 / 描述 / 摘要 / 详情渲染。
- 补位认领：会话快照里出现过的所有工具名都会被认领（不再只认 mcp__ 开头的），但注册用的是正的 priority，只补位、不抢占。DSH 出厂的通用卡片是槽位的 fallback、不占 key，所以无主的名字归本插件；而 DSH 的专用视图、以及别的插件（例如 claude-in-dsh 给 Task / Agent / Workflow 注册的行）都在 priority 0，照旧胜出。

本插件不自绘子调用树——那是 DSH 已经在做的事，插件再画一遍就是同一棵树渲染两遍。样式表里只对 [data-subcalls] 容器做缩进对齐。

goal 系列：create_goal 蓝 / get_goal 灰 / update_goal（complete 绿、blocked 红、pause 黄）callout 色块，直接嵌入消息流。

ask_user_question：把 questions[]（id / question / header / options / multi_select）渲染成分页问题面板——每页一个问题，选项列表按答案 answers[]（按 id 对回，selected 是选中的 label 数组）标注用户的选择，视觉对齐 DSH 原生 composer：单选数字序号、多选 checkbox 勾选，选中的选项行以原生高亮（浅灰背景 + 描边），(Recommended) / （推荐） 后缀拆成 badge，custom 自由文本单独成行。多个问题在同一面板内翻页（‹ 1 / N ›），未回答显示「未回答」，等待回答期间显示「等待回答…」。

thinking 行：紫色轨（#8c93f8）+ 与工具行统一的 12px 网格、图标位对齐。

在途工具行：DSH v0.40 起移除了 conversation.chat.streamingCall 座位，工具调用的在途 / running 态改由 tool.call.toolview 派发（block 是 RunningToolCall），所以在途行与结果行是同一套渲染，插件不再单独注册流式座位。

bash 实时输出：运行中的 tool block 本身不带任何输出（DSH 只在结果落库后才给），所以终端块改从 job 读：DSH 的每次 bash 调用都登记成一个 job（kind: bash，label 为命令），插件经 ctx.jobs（job-controller 的 client 服务）订阅该会话的 job 名单，按 label 认出这一行对应的 job 后 observe 它的输出 ring——只读、不消费，不影响模型的 job_output。cc 会话（claude-in-dsh ≥ 1.13.0）的前台 Bash 由 claude-in-dsh 登记成 claude-task（label 取 Bash 的 description 首行），并把 Claude Code 写的 .output 跟读进 ring，所以同一套渲染两边都生效。job 不带调用 id，只能按 label 匹配；同 label 并行时取启动时刻最近的那个。ctx.jobs 用 ctx.get 可选读取，没有该服务的旧版 DSH 退回「结束后一次性出结果」。

bash 展开的最短停留：running 的 bash 行自动展开看实时输出，完成后自动收回。亚秒级命令会让这一展一收变成一次闪烁，所以自动展开至少停留 2 秒再收。这只推迟折叠——左侧色轨的蓝（运行中）→ 绿（完成）仍按真实完成时刻变色，两者互不影响。

间距：连续工具行 / think 步骤之间 2px 等距贴合（负 margin 抵消聊天列 16px gap），含正文段落的消息不受影响。

色轨语义：绿 #34d59a 完成 / 蓝 #3dbbf5 运行中（呼吸动画）/ 红 #ee5858 错误或非零退出码。

卸载

cd ~/.dsh/profiles/web
node -e '
const fs = require("fs");
const p = "package.json";
const j = JSON.parse(fs.readFileSync(p, "utf8"));
delete (j.dependencies || {})["dsh-better-tool-ui"];
const b = j.dsh?.profile?.bundles ?? [];
j.dsh.profile.bundles = b.filter((x) => x !== "dsh-better-tool-ui");
fs.writeFileSync(p, JSON.stringify(j, null, 2) + "\n");
'
pnpm install

重启 dsh web 后恢复出厂渲染。

工作原理

DSH web 的 profile（~/.dsh/profiles/web）在 boot 时按 package.json 的 dsh.profile.bundles 顺序加载 bundle 包；本包的 cordis.patch.yml 往 host composition 插入一行插件，web 端按 package.json 的 dsh.client 拉取 lib/client.js 执行。插件本体只做四件事：

1. 往 keyed 槽位 tool.call.toolview 注册同名 key，遮蔽出厂工具卡片（停止插件即恢复，不动出厂代码）；
2. 往 conversation.input.dock 挂一个不渲染内容的 session 作用域探针，拿它 props 里的 sessionId 订阅该会话的转录；
3. 从转录里发现运行期才知道的工具名（MCP 名、子调用里的驱动侧名字）并补位注册 tool.call.toolview；
4. 注入一段样式表，把 DSH 原生 thinking 行（[data-variant="think"]）与节点间距调整到统一网格。

全部颜色走 DSH 主题 token（--dsw-alias-*），明暗主题自动跟随。

开发

lib/client.js web 端全部渲染逻辑（ModuleLoader 工厂格式，无构建步骤） lib/index.js host 侧空挂载点（本插件无 host 能力） cordis.patch.yml bundle 挂载补丁（插入插件行） dsh.plugin.json 插件清单 install.sh curl|bash 安装器（幂等改写 profile package.json + pnpm install） scripts/build-dynamic.mjs 由 lib/client.js 生成动态插件形态（沙盒里免装即改即试）

改动后：升 package.json 与 dsh.plugin.json 的 version → push → 使用侧 cd ~/.dsh/profiles/web && pnpm up dsh-better-tool-ui → 重启 dsh web。

License

MIT