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=16、BAR_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
羽毛球分组比赛记分
小程序二维码

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

小夜