dsh-turn-marks:给 DSH Web UI 加上 Claude Code 式的会话消息条

前言

用 DeepSeek Harness 调试智能体时,一个会话往往要跑几十轮。想回看某次自己发过的指令,只能在对话流里一路往上滚,窗口越长越难定位。Claude Code 和 Codex 的桌面端在会话左缘放了一排「turn marks」小条,每条消息一根,点一下就能跳过去,这个交互在 DSH 的 Web UI 里目前是没有的。

下面介绍的 dsh-turn-marks 补的就是这块:不动原生组件,在会话左缘加一排消息条,提供跳转、预览和位置指示。

这是什么

dsh-turn-marks 是 magicOF2 维护的一个 DSH Web 插件(MIT 许可证),定位一句话:为 DeepSeek Harness Web UI 在会话左缘添加 Claude Code / Codex 桌面端风格的 turn-marks 消息条——每条用户消息(含斜杠命令)一根小条,点击跳转、悬停预览、当前条变白。

它在浏览器端完成所有工作:无 Host 逻辑、无外部依赖、无网络请求,也不需要 API Key。

核心功能

插件的条条绘制在对话内容区左缘、消息流与窗口左缘之间的空隙里,纵向排列。具体行为如下:

1、你在会话里每发送一条用户消息,左侧就多一根灰色小条;/goal 这类斜杠命令的输入也照样计一根。

2、点击任意一根条条,会话平滑滚动,让对应消息对齐视口顶部;点击过的条条和当前视口内消息对应的条条变白,手动滚动时白条自动跟随。

3、悬停在条条上会弹出预览气泡,显示消息编号、时间和内容前 180 字。

4、排列是密集式的:条条中心距上限 24px,消息少时聚拢在轨道中部,消息多时自动收缩间距填满整条轨道。

实现上有三点值得注意:

  • 注册在 conversation.input.dock 槽位,增量挂载,不替换任何原生组件;
  • 颜色全部使用 DSH 主题 CSS 变量,浅色、深色模式自动适配;
  • 每次会话快照变化会自动重新渲染,插件无需订阅或轮询。

安装与启用

从 GitHub 安装,执行:

dsh plugin --profile web add https://github.com/magicOF2/dsh-turn-marks.git

如果要本地开发或自用,可以先克隆再以链接方式添加:

git clone https://github.com/magicOF2/dsh-turn-marks.git ~/.dsh/external/dsh-turn-marks

dsh plugin --profile web add link:C:/Users/<你的用户名>/.dsh/external/dsh-turn-marks

安装后需要重启 dsh web,并在浏览器里按一次 Ctrl+Shift+R 强制刷新。之后插件随 GUI 自动加载,不需要手动启用。

典型用法

经过上面的步骤,日常使用就是四步:

1、打开任意会话,发送几条消息,对话左侧出现对应数量的灰色小条;

2、点击任意一条,会话平滑滚动到那条消息,条条变白;

3、悬停任意一条,弹出该消息的预览气泡(编号 + 时间 + 内容前 180 字);

4、手动上下滚动,白色条条自动跟随视口内当前的消息。

如果需要调整外观,lib/client.js 顶部留了常量:GUTTER_INSET=6(轨道距滚动容器左缘的像素)、GUTTER_TOP=16BAR_SPACING=24(条条中心距上限)、HIT_SIZE=20(点击热区)、BAR_HEIGHT=14(可见条高)、TOP_MARGIN=8(跳转后消息距视口顶部的边距)、PREVIEW_MAX=180(预览截断字数)。纯逻辑部分抽成了纯函数,改完可以直接跑:

npm test

适用场景与注意

适合的场景很直接:长会话、多轮迭代、经常混用斜杠命令的人。会话越長,这排条条省下的滚动时间越多。

几个使用上的限制要先知道:

  • 条条只统计已加载窗口内的用户消息与斜杠命令,加载更早历史后条条数会自动增加;
  • 非聊天视图(如轨迹)下条条自动隐藏;
  • 加载更多历史时若消息行尚未渲染,点击暂无效果,下次快照变化后恢复;
  • 一条斜杠命令只计一根条条,点击优先跳转输入气泡,结果卡片不算独立消息;无输入气泡的命令(如 /permission)条条对应其结果卡片行。

兼容 DeepSeek Harness 0.1.0-rc.6 及以上、Cordis 4.x,以及 Chrome / Edge / Firefox / Safari 最新两个大版本。

最后提醒一句:这类插件以当前 dsh 进程的权限运行,安装前建议先检查一遍源码和许可证。dsh-turn-marks 是纯浏览器端实现,无数据上传,许可证为 MIT。

结尾

dsh-turn-marks 做的事情不大,但解决了长会话里最高频的一个操作——快速回到某条消息。实现克制、无侵入、卸载干净,属于那种装上之后不太会想起来的小工具。

  • GitHub:https://github.com/magicOF2/dsh-turn-marks
  • 社区插件目录页:https://www.skillhub.cn/plugins/magicOF2/dsh-turn-marks
羽毛球分组比赛记分
小程序二维码

欢迎使用《羽毛球分组比赛记分》微信小程序

小夜