工作流时间线 zuiyouli/dsh-workflow-ui

dsh-workflow-ui

DeepSeek Harness Web GUI 的对话内工作流运行时间线：把官方 workflow 工具卡与 workflow-run 聊天节点替换成横向时间线——轨道 + 阶段站 + 子代理药丸 + 循环弧线 + 并行带，且开跑之前就能看到全部计划。

English documentation in README.md。

dsh-workflow-ui 截图

功能

- 对话内嵌卡片 — 每次 workflow 运行一张卡，长在对话流里，无需打开任何面板。
- 计划先行 — 客户端扫描 workflow 脚本（phase() 调用、parallel() 块、阶段回访），开跑前就渲染出全部计划站点、药丸占位与依赖弧线。
- 并行带 — parallel() 阶段渲染为抬升轨道，fork/merge 接头为圆角弧。
- 弧线 — 非相邻前向边与循环回边在轨道上空飞行：弧道按跨度分配（短跨低道、相交上推）、8px 圆角拐点、落地箭头；落入运行中站点的弧点亮为 march。
- 药丸折叠 — 单站超过 5 个子代理自动折叠为「＋N」展开片，全计划一键可见。
- DSH 官方图标 — StateDot 状态点（done/error = 6px 实心核，running = 中性 spinner 弧，pending = idle 点）、官方 ListPen 卡头图标、1px Check/Close 标记。
- 子代理药丸 — 逐 agent 状态 + 表情（运行中张望/眨眼），结算勾，未启动的计划占位。
- 主题与无障碍 — 经 DSH 别名 token 适配亮/暗主题，全链路尊重 prefers-reduced-motion，状态字形带 aria 标签。

安装

dsh plugin --profile web add github:zuiyouli/dsh-workflow-ui

安装后重启一次 dsh（组合变更），再刷新页面。要求 DSH >=0.1.0-rc.5；已在 0.2.0-rc.2 实测，web profile。

原理

两个 keyed 槽位以 priority: -1 影子官方渲染器（官方默认 0，priority 最低者渲染；本组件崩溃会自动 abdicate 回退官方）：

- conversation.chat.node key workflow-run — 数据来自官方 Definition 对持久化事件（tool-workflow/run-start|agent-start|agent-end|run-end）的投影，本插件只换呈现。
- tool.call.toolview key workflow — 渲染不可见标记（该行经 CSS :has 隐藏），并把工具入参的脚本元数据 stash 进模块 store，供运行卡做计划先行渲染。

样式以 一次性注入、卸载时移除；类名全部 zcf- 前缀。颜色落在 14 个局部 --color- token，映射到 DSH --dsw-alias-。

开发

零依赖，Node >= 20。

npm run check # 语法检查 + 单元测试 + 构建 + lib 检查 + 门面冒烟
npm run preview # 生成 docs/preview/preview.html（亮/暗卡片）

无头截图预览：

chrome --headless=new --virtual-time-budget=3000 --screenshot=shot.png docs/preview/preview.html

布局常量参考 ZCode 的公开工作流呈现设计（站宽 168 / 间距 192 / 灯心 +17，弧基 26 / 道距 14，6–8px 圆角接头，120/160/200/320ms 运动 token）。状态点与图标复现 DSH 官方 dsh-client-ui-primitives 的形制（StateDot、ListPen、Check、Close）。本插件与 ZCode、DSH 官方均无隶属关系。

边界说明

- 工具行只作为隐形数据源存在；时间线卡是会话中的唯一入口。
- 弧线仅在宽屏（单行，容器 ≥920px）模式渲染；换行模式下隐藏。
- 状态词为内置中文；药丸 → 子会话跳转、运行指标、locale 通道暂未接。
- 只读消费 workflow 事件，不保存任何平行编排状态。

许可

MIT © zuiyouli