前言¶

在 DeepSeek Harness（DSH）裏跑代理會話時，模型會通過 write、edit 或 shell 命令在工作區裏產生文件。主對話區適合看推理與工具調用，但想快速瀏覽「這次會話改了哪些文件」、點開預覽、或把路徑寫回輸入框，往往要在終端和編輯器之間來回切。

下面介紹 e2mcc 維護的 dsh-popout-sidebar：在 Web UI 右上角提供常駐「產物」側邊欄，列出代理產物與文件樹，支持多類型預覽，並可一鍵彈出爲獨立瀏覽器標籤頁——拖到另一塊顯示器上也能更大、更清晰地查看。它與其他 sidebar 插件可同時顯示，不必二選一。

這是什麼¶

dsh-popout-sidebar（GitHub：e2mcc/dsh-popout-sidebar）是 DSH 生態中的客戶端插件，當前版本 1.0.1，許可證 MIT，要求 Node >= 20。

一句話定位：給 DSH Web UI 增加展示產物（artifacts）與文件樹的側邊欄，並可彈出爲獨立瀏覽器標籤頁。

插件已收錄進 DSH 插件生態，可通過 awesome-dsh-plugin.com 詳情頁 或 dsh-market（DSH 內：設置 → Plugin Market）安裝。社區目錄 SkillHub 亦有收錄。

核心功能¶

產物追蹤與預覽¶

側邊欄即時列出代理通過 write / edit 創建或修改的文件，以及 bash / pwsh 命令在工作區裏間接產生的文件（例如腳本生成的圖片）。列表與預覽區之間的分界線可拖動調整。

預覽按文件類型區分：

• 代碼 / 純文本：語法高亮 + 行號
• Markdown：渲染顯示
• 圖片、PDF：瀏覽器原生查看
• HTML：沙箱 iframe
• 超長內容自動截斷

edit 修改過的文件在預覽裏展示「刪除 / 新增」改動片段對比。

文件樹¶

側邊欄與獨立標籤頁內都有「文件樹」，可瀏覽當前工作區目錄（懶加載展開，點擊文件即預覽），並即時跟隨工作區切換。

彈出爲獨立標籤頁¶

點擊面板右上角 ↗，側邊欄彈出爲獨立網頁標籤頁（路由 /popout-sidebar），每 1.5s 自動刷新，可拖到另一塊顯示器上觀看。獨立標籤頁刻意固定爲淺色配色；如需深色，可在地址後手動加 ?scheme=dark。

複製與引用¶

列表行懸浮時可一鍵複製文件路徑，或把 @path 引用寫入會話輸入框。

與其他 sidebar 兼容¶

其他「側邊卡片」打開時，本側邊欄自動讓位到其左側，兩者同時可見。

設置與清除¶

DSH 設置面板新增「Popout Sidebar」選項卡，可開關默認展開、自動刷新、文件樹，設置最短面板寬度等（存於瀏覽器 localStorage，鍵 dsh-popout-sidebar:settings）。右上角進入清除模式後，點擊產物標紅，再點紅色 × 可移除列表條目（僅移除條目，不動磁盤文件）。

安裝與啓用¶

前置：DSH 已裝好，dsh web 能正常運行。

通過插件市場（推薦）¶

先安裝市場插件：

dsh plugin --profile web add dshmarket

重啓 dsh web 後，打開 設置 → Plugin Market，搜索 popout 或 sidebar，點「安裝」。

通過註冊表直接安裝¶

dsh plugin --profile web add github:e2mcc/dsh-popout-sidebar

裝完後重啓 dsh web 並硬刷新瀏覽器（Cmd/Ctrl+Shift+R），界面右上角出現常駐「產物」圖標按鈕（無會話時也可見）。

包內 cordis.patch.yml 讓 CLI 自動掛進 dsh.profile.bundles；client 半由 package.json 的 dsh.client.platform: "web" 自動發現並加載。

更新¶

從 GitHub 源碼安裝時，更新按 commit 比對。命令行：

dsh plugin --profile web update dsh-popout-sidebar

隨後重啓 dsh web 並硬刷新瀏覽器。通過 dsh-market 安裝時，市場會比對本地鎖定 commit 與倉庫 HEAD，有新提交即提示更新。

典型用法¶

靜態安裝後的日常操作¶

1. 啓動 DSH Web UI，點擊右上角「產物」圖標展開側邊欄。
2. 在會話中讓代理 write 或 edit 文件，或執行會產生文件的 shell 命令；側邊欄列表會自動更新（面板打開時默認每 2s 拉取，可在設置裏開關「自動刷新」）。
3. 點擊列表中的文件，在下方預覽區查看內容；edit 過的文件可看 diff。
4. 需要更大視野時，點面板右上角 ↗ 打開 /popout-sidebar 獨立標籤頁，拖到第二顯示器。
5. 切換「文件樹」標籤頁瀏覽工作區目錄，點擊文件即預覽。
6. 懸浮列表行，複製路徑或插入 @path 到輸入框繼續對話。
7. 點擊右上角「產物」圖標收起面板。

動態加載（臨時，進程級）¶

適合臨時試用，無需寫入 profile。在 Harness 會話中：

1. 調用 cordis_define：code.host 填 src/host.js 的 return { ... } 主體；code.client 填 src/client.js 的 return { ... } 主體。
2. 調用 cordis_run 激活返回的 pluginId / packageId。
3. 點擊「產物」按鈕；點面板右上角 ↗ 打開獨立標籤頁。

兩種模式下 host 與 client 都通過 /popout-sidebar/* HTTP 路由通信，行爲一致。

工作原理概要¶

Host（Node 進程） 監聽 tools/result 追蹤 write / edit，監聽 tools/execute 對 bash / pwsh 做工作區前後快照對比，把間接產生的文件併入產物列表；通過 harness.handle 暴露 RPC，通過 webServer.register 提供 /popout-sidebar 系列路由。

Client（瀏覽器） 在 shell.overlay 註冊右上角常駐按鈕與浮動面板，訂閱 session store，並通過跨標籤頁 localStorage 同步當前會話，使側邊欄與獨立標籤頁的文件樹行爲一致。

設置項¶

在 DSH 設置（左下角 ⚙️）的「Popout Sidebar」選項卡：

右上角的「產物」圖標、獨立標籤頁按鈕 ↗、以及自動讓位到其他側邊欄左側，均爲常駐行爲，無需開關。

適用場景與注意¶

適合誰： 經常在 DSH Web UI 裏跑長會話、需要盯產物列表、預覽 Markdown/代碼/圖片、或想把側邊欄拖到第二塊屏的開發者。

權限與安全： 插件以當前 dsh 進程權限運行，能讀取工作區文件並通過 HTTP 路由提供預覽。安裝前應查看 源碼 與 MIT 許可證，確認符合你的環境策略。

生態說明： DSH 理念是「一切皆插件」；SkillHub、awesome-dsh-plugin、dsh-market 等社區目錄爲獨立站點，與 DeepSeek / 幻方無官方從屬關係。

本地開發可將插件目錄以符號鏈接安裝：

dsh plugin --profile web add /絕對路徑/dsh-popout-sidebar

改 src/ 後重啓服務並硬刷新即可；修改源碼後需 npm run build 重新生成 bundle。

結尾¶

dsh-popout-sidebar 把「會話產物 + 文件樹 + 多類型預覽」收進可彈出的側邊欄，解決主界面信息密度不足、跨屏查看不便的問題，且與其他 sidebar 並存。若你已在用 DSH Web UI，可按上文命令安裝，重啓並硬刷新後即可從右上角「產物」按鈕開始用。

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