前言¶
在 DeepSeek Harness(DSH)的 Web 界面裏,edit / write 工具調用會出現在對話流中。若只看到工具結果,通常還需要對照“修改前”和“修改後”才能確認改動範圍。
dsh-code-diff-viewer 是面向 DSH Web 界面的第三方客戶端插件。它把這些工具調用渲染爲可摺疊的「修改前 / 修改後」代碼面板,用於在對話中查看代碼變更。
這是什麼¶
kelai141/dsh-code-diff-viewer 是 DSH 的第三方插件,維護者爲 kelai141,許可證爲 MIT。它用於擴展 DSH Web 界面中 edit / write 工具調用的展示方式,不新建模式、不落盤任何文件。
該插件不是 DSH 官方組件。
核心功能¶
修改前後對照¶
插件會按變更類型選擇展示形式:
- 混合增刪:左右雙列展示「修改前 / 修改後」
- 純新增:單列展示綠色新增內容
- 純刪除:單列展示紅色刪除內容
絕對行號¶
插件通過 Host 端 /cdv-locate 反推每個 hunk 的絕對起始行,並在面板中顯示真實行號。這樣即使修改發生在文件中部,也可以按行號定位。
語法高亮¶
插件內置輕量分詞器,用於語法高亮。支持的語言包括 JS/TS、Python、CSS、HTML、Shell、JSON、YAML 等。
卡片摺疊¶
工具調用卡片支持摺疊。最新一次修改自動展開,舊卡片保持收起,便於在對話流中查看最近變更。
注入方式¶
插件以純視覺方式注入 DSH 對話流,不新建模式、不落盤任何文件。它作爲靜態 bundle 層掛載,dsh 啓動後生效,無需審批。
安裝與啓用¶
先確認環境滿足以下要求:
- 已安裝 DeepSeek Harness(
dshCLI) - 已安裝
pnpm - 使用
webprofile Node.js ≥ 22
使用下面的命令安裝插件:
dsh plugin --profile web add github:kelai141/dsh-code-diff-viewer
安裝完成後,需要停止舊的 web 進程,再重新啓動 DSH Web:
dsh web
然後刷新瀏覽器。該插件沒有熱更新,安裝後需要重啓 dsh web 進程。
如果 pnpm 提示插件構建腳本被攔截,按提示在 profiles/web/pnpm-workspace.yaml 的 allowBuilds 中加入對應 key 後重試。dsh-code-diff-viewer 沒有構建腳本,一般不會觸發這個情況。
驗證¶
經過上面的步驟後,可以檢查插件是否進入當前 web profile 的組合樹:
dsh --profile web --dump-config | grep code-diff-viewer
也可以檢查客戶端包是否可訪問:
http://127.0.0.1:3080/plugins/dsh-code-diff-viewer/client.js
如果命令行能檢索到 code-diff-viewer,並且瀏覽器可以訪問上面的客戶端包路徑,說明插件的 Web 端資源已掛載。
卸載¶
如果需要移除插件,執行:
dsh plugin --profile web remove dsh-code-diff-viewer
之後重啓 dsh web 進程,界面會恢復爲原廠工具卡片。
適用場景與注意¶
這個插件適合在 DSH Web 對話流中頻繁查看 edit / write 工具調用的開發者。它把代碼變更以對照面板呈現,並顯示真實行號,適合用於快速確認修改範圍。
使用前注意幾點:
- 它是第三方插件,非 DSH 官方組件。
- 插件會在當前
dsh進程權限下運行,安裝前建議檢查源碼與許可證。 - 客戶端依賴 DSH 自帶的
react seed模塊與slots服務。 - 插件無第三方運行時依賴。
- 安裝或卸載後需要重啓
dsh web進程,沒有熱更新。
結尾¶
dsh-code-diff-viewer 的價值在於把 DSH Web 中的 edit / write 工具調用變成可摺疊的代碼對照面板,便於查看修改前、修改後、增刪類型和真實行號。
GitHub 倉庫:
https://github.com/kelai141/dsh-code-diff-viewer
目錄頁地址未在本篇覈實,因此不在此列出。