前言¶

在 DSH（DeepSeek Harness）的 Web 界面裏，有幾類信息平時不容易看到：上下文窗口用了多少、本次會話花了多少錢、工作區裏有哪些文件、這一會話改過哪些文件。右側的 details 列雖然承載了一部分內容，但切換、新建會話時會被自動收起，每次都要重新點開。

dsh-sidebar-panel 的做法是：在會話頭部右上角加一個面板摺疊按鈕，把概覽、文件、改動、工具四個頁籤放進右側 details 列，並讓面板常駐——切換、新建會話都不自動收起，收起狀態也會被記住。

這是什麼¶

dsh-sidebar-panel 是 DSH Web profile 的右側面板插件，由 kee0012 維護，當前版本 0.2.0，MIT 許可證。客戶端部分注入右上角摺疊按鈕（樣式與左側摺疊按鈕一致）和麪板本身；服務端部分提供一組同源 HTTP API，爲面板供數據。

核心功能¶

概覽：賬戶、上下文與會話指標¶

概覽頁簽上方是 DeepSeek 賬戶卡片：官方餘額通過 GET https://api.deepseek.com/user/balance 即時查詢，15 秒刷新一次，附帶充值按鈕，跳轉 https://platform.deepseek.com/usage。

下方依次是：

• 上下文窗口：已用 / 總量 / 百分比 / 距壓縮；
• 本輪上下文預算；
• 會話指標：命中率、本次會話費用、運行時間、請求數、累計 tokens；
• 用量分析：按來源 / 按類型，含輸入輸出、命中未命中明細。

服務端數據每 5 秒自動刷新，右上角顯示「更新於 HH:MM:SS」。其中請求數、費用、運行時間由服務端從會話事件日誌摺疊得到；插件安裝之前的歷史會話，會在首次訪問時一次性補算。

費用是估算值：按每次請求的 usage 乘以每百萬 tokens 單價（緩存命中按低價），並按請求時刻的北京時間峯 / 谷時段加權。

文件：文件樹、預覽與右鍵菜單¶

文件頁籤展示當前會話工作區的文件樹。單擊文件即可預覽：文本內聯顯示，PDF 與圖片內嵌預覽，大文件給出截斷提示。

右鍵菜單提供這些操作：

1. 在文件管理器中顯示；
2. 添加文件引用 / 添加文件內容（文件）；
3. 添加文件夾引用（文件夾）；
4. 複製絕對路徑 / 複製相對路徑。

引用和內容會寫入對話輸入框，直接發送即可。

改動與工具¶

改動頁籤列出本次會話中被寫文件類工具（write/edit/str-replace-editor 等）觸碰過的文件。這個追蹤只覆蓋寫文件類工具調用，bash/pwsh 內部發生的文件改動無法可靠捕獲。

工具頁籤是本窗口內的工具調用列表，附參數與結果詳情，爲插件自建渲染。原因是插件以 priority: -1 頂替了內置 DetailsPanel（單槽位只能有一個渲染者），內置面板的工具詳情座無法複用；聊天裏的 Inspect 按鈕仍會打開右側列，但不會自動選中工具。

面板常駐機制¶

面板開合狀態存在瀏覽器 localStorage（dshSidebarPanel:details-open），默認 open。切換、新建會話時插件會讓面板自動保持打開，直到你主動點擊收起；此後所有切換都保持收起，直到再次點開。

新建會話的 blank（hero）階段，插件通過一條聲明式 CSS 規則保持面板常駐，面板結構性固定在右側 360px 寬度，不會全屏或遮擋聊天區。

同源 HTTP API¶

服務端提供一組同源路由供面板使用：config、overview、files、file-content、file-raw、balance、reveal、changes。比如查看配置：

curl "http://127.0.0.1:3080/dsh-sidebar-panel/api/config"

跨域防護上，GET 請求不做 Origin 校驗（同源 GET 本就不帶 Origin 頭）；POST 依賴「不響應 CORS 預檢 + 僅接受 JSON」的防線。

安裝與啓用¶

在 DSH 運行的終端中執行（Web profile）：

dsh plugin --profile web add github:kee0012/dsh-sidebar-panel

安裝後重啓 DSH，並刷新瀏覽器（Ctrl+Shift+R）。

另一種 npm 安裝方式（dsh plugin --profile web add dsh-sidebar-panel）暫未發佈到 npm registry，不建議使用。

配置¶

在 DSH 組合配置（cordis.yml）中給插件加 config 即可，未提供時全部使用默認值。可配置項包括 fileBrowser（maxEntries / maxContentChars / includeHidden）、reference（文件 / 文件夾引用模板）、changes.writeTools、pricing（enabled / currency / 峯谷時段 / 倍率 / models 單價表）。README 給出的示例：

- id: dsh-sidebar-panel
  name: dsh-sidebar-panel
  config:
    fileBrowser:
      maxEntries: 500
      maxContentChars: 40000
      includeHidden: false
    reference:
      file: '@<path>'
      folder: '@<path>/'
    changes:
      writeTools: ['write', 'edit', 'str-replace-editor', 'patch', 'run_code']
    pricing:
      enabled: true
      currency: CNY
      offPeakStartHour: 0.5
      offPeakEndHour: 8.5
      offPeakMultiplier: 0.5
      models:
        deepseek-chat: { inputPerM: 2, cacheHitPerM: 0.5, cacheWritePerM: 2, outputPerM: 8 }
        deepseek-reasoner: { inputPerM: 4, cacheHitPerM: 1, cacheWritePerM: 4, outputPerM: 16 }

若你的模型不在 pricing.models 表中，會使用 pricing.defaultModel（默認與 deepseek-chat 相同）；需要精確匹配實際賬單時，按你的模型實際價格調整單價表。

開發與測試¶

經過上面的安裝步驟，插件即可正常工作。如果你想參與開發，可以先做語法檢查，再跑服務端單元測試：

node --check src/index.js && node --check client/client.js
node test/unit.test.mjs

單元測試 mock 了 ctx，不需要 DSH 實例。API 冒煙測試：

curl "http://127.0.0.1:3080/dsh-sidebar-panel/api/config"

GET 無需 Origin 頭；POST 冒煙需要帶上 Origin。

服務端依賴 @deepseek-ai/schemastery（配置 schema）與 @deepseek-ai/dsh-credentials（讀取 DEEPSEEK_API_KEY 憑據），二者由 DSH 運行時提供；以源碼方式開發時，在插件目錄執行 pnpm install 解析依賴。

適用場景與注意事項¶

適合在瀏覽器裏使用 DSH Web profile、希望一眼看到上下文用量 / 會話費用 / 工作區文件的人。使用前注意：

1. 僅支持 DSH 的 Web profile（HTTP 同源路由）；desktop（Electron）形態下自定義 HTTP 路由不可用。
2. 餘額查詢需要在 DSH 憑據 / 環境變量中配置 DEEPSEEK_API_KEY，否則顯示「未配置」提示；key 永不下發瀏覽器。官方沒有公開的累計消費 / 請求次數接口，賬戶卡片因此不展示這兩項。
3. 費用爲估算值，匹配精度取決於定價表配置。
4. 改動追蹤只覆蓋寫文件類工具，bash/pwsh 內部的改動不在覆蓋範圍。
5. 插件以當前 dsh 進程的權限運行，安裝前建議先閱讀源碼並確認許可證（MIT）。

DSH 的理念是「一切皆插件」，插件生態由社區維護；文末的目錄頁是獨立社區站點，與 DeepSeek、幻方沒有官方從屬關係。

結語¶

dsh-sidebar-panel 把上下文、費用、文件和工具調用這些散落的信息收進一個常駐右側面板，省去了反覆點開 details 列的操作。安裝一條命令即可體驗：

dsh plugin --profile web add github:kee0012/dsh-sidebar-panel

• 目錄頁：https://www.skillhub.cn/plugins/kee0012/dsh-sidebar-panel
• GitHub：https://github.com/kee0012/dsh-sidebar-panel