前言¶

在 DSH 插件體系下，WebUI 插件開發經常需要檢查真實界面、修改源碼、調整 Harmony Patch，並在構建後確認運行結果。如果直接在穩定 Host 上修改未完成代碼，容易把調試狀態混入正在使用的環境。

DeepSeek WebUI Studio 是 memorax-ai 維護的可視化工作區，用於構建 DSH WebUI 插件。它的定位是圍繞官方 DSH WebUI 做檢查、編輯、構建和驗證，而不是做一個離線 mock 頁面工具。它要求 dsh-harmony@0.8.7 作爲最低兼容版本，並將 Harmony 作爲傳遞依賴包含進來。

這是什麼¶

• 倉庫：memorax-ai/dsh-webui-studio
• 包名：dsh-webui-studio
• 許可證：MIT
• 用途：可視化構建 DSH WebUI 插件
• 運行前提：Node engines ^22.22.3 || >=24.11.1

這個工具把 Draft 工作區從穩定 DSH Host 中隔離出來。每個 Draft 可以擁有自己的 Git worktree、DSH_HOME、profile、依賴和 child Host。你可以在這個隔離環境裏檢查官方 WebUI、編輯插件源碼、生成樣式、構建插件，並確認 live Client graph revision。

核心功能¶

下面列出的能力都圍繞 Draft 隔離、真實 WebUI 檢查和插件產物驗證展開。

• 創建最小 DSH Web Client 插件，或導入一個已有本地插件文件夾。
• 爲每個 Draft 提供獨立的 Git worktree、DSH_HOME、profile、dependencies 和 child Host。
• 預覽官方 WebUI，但不會把 Draft code 加載進穩定 Host。
• 可以正常瀏覽，也可以檢查 DOM、React owners、source candidates 和 Patch traces。
• 自動顯示 plugin-registered Element controls，並把 defaults 和 subtree-scoped CSS 保存回 Draft source。
• 檢查 Component declaration matches，生成 CSS decorators，同時不修改現有 call-site props。
• 通過一次 transactional reload 調整 Harmony providers 和 individual Patches 的順序與開關。
• 使用 CodeMirror 編輯 Draft source，並把 installed dependency sources 保持爲只讀。
• 執行 Build、通過 Harmony apply、reload，並確認 live Client graph revision。
• 啓動 Draft-scoped Agent，或在現有 DSH session 中繼續使用臨時 Studio tools、skill 和 context。
• 允許外部 Agent 通過本地只讀 Streamable HTTP MCP endpoint 檢查運行中的 WebUI。
• 在 Studio 內回答 one-shot tool approvals、structured questions 和 plan reviews。
• 檢查 package exports、artifacts、Patch state、ordering、dependencies 和 pack output。
• 同時運行多個 isolated Draft Preview Hosts。
• 將當前 WebUI profile 或另一個 local profile 快照到每個 isolated Draft runtime。
• 通過一次 transactional hot reload 調整 plugins 順序，並啓用或禁用 Harmony Providers。

安裝與啓用¶

先確認本地 Node 版本滿足要求：

^22.22.3 || >=24.11.1

然後安裝並啓動 DSH Web：

dsh plugin --profile web add dsh-webui-studio
dsh web

啓動後，Studio 在本地提供：

http://127.0.0.1:<dsh-port>/studio

第一次訪問 /studio 時，需要批准 Install Harmony and restart。這一步會安裝 launcher，並在本地 DSH 進程重啓後返回 Studio。

Studio 的託管數據保存在：

$DSH_HOME/studio/

在編輯過程中，未保存的 Source 修改必須先用 Ctrl+S 或 Command+S 保存，然後再切換或關閉 tabs。

典型用法¶

下面按常見開發順序說明。

1、創建或導入插件¶

可以新建一個最小 DSH Web Client 插件，也可以導入一個已有本地插件文件夾。

新建插件默認保存在 Studio 內部。如果需要指定目標文件夾，可以記錄一個 absolute destination，但 Studio 不會在創建時創建或修改該文件夾。只有後續使用 Save plugin to folder 時，纔會同步 Studio-owned project snapshot，並且不會修改目標文件夾中類似 node_modules 這類 destination-only files。

導入已有插件時，Studio 會複製一個 isolated snapshot，不包含 .git 或 node_modules。符號鏈接會被拒絕，原文件夾不會被修改。

2、檢查真實 WebUI¶

在 Studio 中打開 Draft Preview 後，可以先正常瀏覽界面，再進入檢查模式。可檢查內容包括：

DOM
React owners
source candidates
Patch traces

這一步用於確認當前界面、組件歸屬、相關源碼候選以及 Patch 痕跡，後續修改可以基於真實運行結果進行。

3、修改源碼和樣式¶

Studio 使用 CodeMirror 編輯 Draft source。已安裝的依賴源碼會被保護爲只讀，避免直接修改依賴來源。

對於樣式工作，可以做兩類操作：

1、保存 plugin-registered Element controls 的 defaults。
2、保存 subtree-scoped CSS 回 Draft source。

也可以檢查 Component declaration matches，並生成 CSS decorators。這個過程不改變現有 call-site props，適合需要控制調用點不變的場景。

4、構建、應用和驗證¶

完成修改後，執行構建和驗證流程：

1、Build Draft 插件。
2、通過 Harmony apply。
3、Reload 預覽環境。
4、確認 live Client graph revision。

只有 Preview 確認新的 live Client graph revision 後，構建結果才進入可用狀態。

5、使用 Agent 或外部 MCP 檢查¶

Studio 支持在 Draft 範圍內啓動 Agent，也可以繼續現有 DSH session，並臨時加入 Studio tools、skill 和 context。你可以在 Studio 內處理 one-shot tool approvals、structured questions 和 plan reviews。

外部 Agent 也可以通過本地只讀 Streamable HTTP MCP endpoint 檢查運行中的 WebUI：

http://127.0.0.1:<dsh-port>/studio/mcp

這個 MCP endpoint 遵循 Studio 的 loopback-only boundary，包括通過 SSH loopback tunnel 訪問的情況。MCP tools 只檢查當前 Host；外部 Agent 仍然負責編輯和構建自己的 WebUI project。

6、運行多個 Draft 和 profile 快照¶

可以同時運行多個 isolated Draft Preview Hosts。每個 Draft runtime 可以從當前 WebUI profile 或另一個 local profile 做快照。這樣可以在不同 Draft 中比較不同插件組合、不同 Patch 順序或不同 profile 配置，而不互相影響。

適用場景與注意¶

適合這類工具的場景通常是：

• 開發 DSH WebUI 插件，需要基於官方 WebUI 檢查界面和組件。
• 需要隔離 Draft、獨立 DSH_HOME、獨立 profile 和獨立 Preview Host。
• 需要調整 Harmony Providers、Patches、插件順序，並做 transactional reload。
• 需要檢查 Patch traces、source candidates、package exports、artifacts 和 pack output。
• 需要讓外部 Agent 通過本地 MCP endpoint 只讀檢查運行狀態。

使用前注意以下幾點：

1、插件以當前 dsh 進程權限運行，安裝前應檢查源碼、依賴和許可證。
2、dsh-harmony@0.8.7 是最低兼容版本。
3、首次訪問 /studio 會安裝 Harmony launcher 並重啓本地 DSH 進程。
4、Studio 數據在 $DSH_HOME/studio/，切換或關閉 tabs 前要先保存 Source。
5、MCP endpoint 只用於本地 loopback 檢查，不替代外部 Agent 的編輯和構建職責。
6、導入本地插件時會拒絕符號鏈接，並且不會修改原文件夾。
7、新建插件默認留在 Studio 內部，Save plugin to folder 之前不會創建或修改可選目標文件夾。

小結¶

DeepSeek WebUI Studio 的價值在於把 DSH WebUI 插件開發放進一個可檢查、可隔離、可驗證的工作區：先基於官方 WebUI 做檢查，再編輯 Draft source，然後通過 Harmony 構建、reload 和確認 live Client graph revision。對於需要穩定處理真實插件圖、Patch、樣式和外部 Agent 檢查的開發流程，它是一個偏工程化的選擇。

GitHub 地址：

https://github.com/memorax-ai/dsh-webui-studio