dsh-client-ui-pet：DeepSeek Harness Web UI 的桌寵插件

前言¶

DeepSeek Harness (DSH) 是一個基於插件架構的智能體開發環境。在長時間調試或運行 Agent 時，缺乏可視化的狀態反饋會降低工作體驗。dsh-client-ui-pet 是該系統的客戶端寵物插件，在界面右下角注入一隻可拖拽的桌寵。它參考 Codex Pets 的設計，通過狀態跟隨和輕養成系統，爲開發者提供陪伴式交互體驗。

核心功能¶

Codex 式狀態陪伴¶

插件通過 MutationObserver 監聽 Harness Web UI 的 DOM 變化，感知真實活動信號，並切換寵物動作：

typing：在輸入框 [data-composer-seat] 或 textarea 中輸入時，寵物注視鍵盤。
thinking：出現 [data-state="running"] 或停止生成按鈕時，進入思考狀態。
working：檢測到 [data-streaming] 時，處於忙碌狀態。
done：生成結束，觸發慶祝動畫，心情 +2，親密度 +1。
error：檢測到 [data-error]，進入擔心狀態，心情 -3。
sleep：空閒超過設定時間進入睡眠，出現 Zzz 粒子；任何活動或互動會喚醒寵物。

輕養成系統¶

寵物擁有獨立的數據存儲：

心情：0-100 分，隨時間緩慢衰減，互動可恢復。低於 30 時會主動求關注。
親密度：0-100 分，只增不減，記錄共同工作的羈絆。
互動統計：記錄撫摸、餵食、玩耍的次數。
數據存儲：所有養成數據僅保存在瀏覽器的 localStorage 中。

用戶自定義界面¶

點擊寵物工具欄的齒輪按鈕可打開設置面板，包含 5 個頁籤：

寵物：選擇內置或自定義寵物，支持四角定位、復位或隱藏。
外觀：設置暱稱、調整體型，通過顏色選擇器更換顏色（部分模式不支持）。
行爲：控制狀態跟隨、氣泡臺詞、粒子特效及自動睡覺開關（1/3/5/10 分鐘可選）。
養成：查看心情與親密度進度條及互動統計，支持重置數據。
工作室：導入/導出自定義寵物定義 JSON。

寵物支持直接拖拽，並提供 WCAG 2.2 兼容的替代操作（四角按鈕、鍵盤 Enter/Space 撫摸）。

JPG 主圖寵物（Raster 模式）¶

不希望使用手繪 SVG？插件支持將 JPG/PNG/WebP 作爲寵物主圖。引擎會爲圖片疊加狀態動畫（呼吸、點頭、彈跳等），氣泡、粒子與養成系統通用。

限制：JPG 主圖不支持換色，其餘外觀選項可用。
來源：支持 Base64、HTTP/HTTPS URL 或同源路徑 / 開頭的文件。
製作：使用 make-raster-pet.py 腳本摳圖、壓縮並生成定義。

開發者完全自定義：dshPetDefinition¶

通過 dshPetDefinition JSON 對象，開發者可以完全自定義寵物的動作、行爲與表現。定義支持 SVG 繪圖、CSS 關鍵幀動畫、狀態機配置以及自定義觸發器。內置觸發器包括 activity:typing、activity:done、interaction:pet 等，也可通過 window.dshPet.trigger("your:custom-trigger") 觸發。

安裝與啓用¶

該插件爲標準 dsh.client 雙面包（Host 半側爲空 Loader，Browser 半側注入 UI）。

方法 A：profile bundle（推薦）¶

編輯 <DSH_HOME>/profiles/web/package.json，添加依賴和 bundle 配置：

{
  "dependencies": {
    "dsh-client-ui-pet": "file:D:/Softwares/CodeSoftWares/Agents/dsh-client-ui-pet"
  },
  "dsh": {
    "profile": {
      "bundles": [
        "@deepseek-ai/dsh-base",
        "@deepseek-ai/dsh-web-app",
        "dsh-client-ui-pet"
      ]
    }
  }
}

安裝依賴後，重啓 DeepSeek Harness Web（已打開的頁面刷新即可）。

方法 B：手動插入 Loader 行¶

將插件目錄複製到 <DSH_HOME>/profiles/web/node_modules/dsh-client-ui-pet。
編輯 <DSH_HOME>/profiles/web/cordis.patch.yml：

- insert:
    - id: ui-pet
      name: 'dsh-client-ui-pet'
      config:
        enabled: true

刷新 Harness Web 頁面。

驗證：右下角出現 DeepSeek 鯨魚娘，點擊可撫摸，懸停出現工具欄，齒輪打開設置面板。

典型用法¶

拖拽與互動：按住寵物可拖拽至屏幕任意位置。點擊撫摸、餵食或玩耍按鈕進行互動。
自定義寵物：在設置面板的“工作室”頁籤中，粘貼 JSON 定義並導入自定義寵物。
Raster 寵物：將圖片放入 assets/<寵物id>/ 目錄，使用腳本生成定義並內嵌，或通過 URL 引用。

注意事項¶

隱私安全：純瀏覽器端插件，不讀取 API Key，不修改模型輸入，不上傳任何數據。所有數據僅保存在本地 localStorage。
JPG 限制：JPG 格式的主圖不支持換色功能。
Host 更新：若 Host 半側代碼更新，需重啓 Harness Web 才能使新配置生效。

總結¶

dsh-client-ui-pet 爲 DeepSeek Harness 提供了可視化的狀態反饋與陪伴功能。它不依賴後端數據，完全在瀏覽器本地運行，支持高度的自定義開發。無論是使用內置的鯨魚娘，還是通過開發者 API 製作專屬寵物，都能增強在 DSH 環境下的工作體驗。

插件目錄頁 | GitHub 倉庫