在 DeepSeek Harness（DSH）的開發調試流程中，模型執行 edit 或 write 工具後，原有的工具卡片通常僅展示代碼片段或文件路徑。這種方式在查看具體修改內容時不夠直觀，容易遺漏行間變化。dsh-client-ui-code-diffs 插件旨在解決這一問題，將工具卡片升級爲內聯 diff 視圖。
這是什麼¶
這是一個純客戶端插件，由用戶 linhoulong123 維護。它通過優先級遮蔽機制，攔截並替換 DSH 默認的 edit/write 工具卡片渲染邏輯，使其在消息流中直接展示代碼變更的對比視圖。
核心功能¶
該插件提供了以下特性：
- 整行紅綠 diff：新增行顯示綠色背景，刪除行顯示紅色背景，背景色跟隨主題變量。
- 字符級高亮：同一行內發生變化的部分會單獨高亮標記。
- 語法着色：支持 Kotlin、Java、TypeScript、JavaScript、Python、JSON、XML、CSS 等語言的語法高亮。
- 信息統計：顯示行號以及新增/刪除的行數統計。
- 狀態標籤：展示執行中、失敗或“打開文件”等狀態標籤。
- 大文件處理：超過 600 行的 diff 會自動截斷中間內容，避免渲染卡頓。
- 自動替換：以較低優先級註冊，自動覆蓋內置的
edit/write卡片。
安裝與啓用¶
在終端執行以下命令安裝插件。安裝後需重啓 dsh web 服務才能生效。
dsh plugin --profile web add <npm-or-github-spec>
典型用法¶
在對話中，當模型調用 edit 或 write 工具修改文件後，消息流中的對應卡片將自動渲染爲整行紅綠背景的 diff 視圖，方便開發者直接比對新增與刪除的內容。
注意與兼容性¶
- 純客戶端：插件無服務端邏輯，所有渲染工作在客戶端完成。
- 運行時依賴：依賴宿主提供的 React 運行時。
- 環境要求：
- DeepSeek Harness 版本：0.1.0-rc.6
- Node.js 版本：>= 20
總結¶
該插件通過視覺化的 diff 展示，顯著提升了在 DSH 中審查代碼變更的效率。插件詳情及源碼可訪問其 GitHub 倉庫 或 社區目錄。
