dsh-webui-studio

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

<div align="center">

<a href="https://github.com/memorax-ai/dsh-harmony">

<img width="132" alt="Harmony" src="assets/harmony-icon.png">

</a>

<h1>DeepSeek WebUI Studio</h1>

<p>

<strong>DSH WebUI 插件的可视化优先开发环境。</strong>

<br />

实时预览你的插件对 dsh webui 的修改效果，在可视化的集成开发工具中交互式地与 agent 协作构建插件客户端。

<br />

Powered by <a href="https://github.com/memorax-ai/dsh-harmony"><strong>dsh-harmony</strong></a>.

</p>

<p>

<a href="#快速开始"><strong>快速开始</strong></a>

·

<a href="https://github.com/memorax-ai/dsh-webui-studio/issues">报告问题</a>

·

<a href="https://github.com/memorax-ai/dsh-webui-studio/issues">功能建议</a>

</p>







[简体中文](README.zh-CN.md) / [English](README.md)

</div>

面向真实 DSH WebUI 的可视化工作区

WebUI Studio 不是模拟页面生成器。它运行在官方 DSH WebUI 和真实插件图谱之上，

把可视化检查与源码修改转化为可分发、由插件自身拥有的产物。

Studio 是 dsh-harmony

的独立下游应用。它通过公共 package exports 使用 Harmony 的 runtime、Patch engine、

service API 与 CLI 控制面，并使用

dsh-harmony-react

提供的通用 React 注册 API。依赖始终保持单向：Studio 依赖 Harmony，Harmony 不依赖 Studio。

你可以做什么

• [x] 创建最小 DSH Web Client 插件，或导入已有的本地插件文件夹
• [x] 为每个 Draft 分配独立 Git worktree、DSH_HOME、profile、依赖树和 child Host
• [x] 预览官方 WebUI，同时不把 Draft 代码加载进稳定 Host
• [x] 正常浏览，或检查 DOM、React owner、源码候选和 Patch trace
• [x] 自动展示插件注册的 Element 控件，并将默认值与限定在当前子树内的 CSS 保存回草稿源码
• [x] 检查 Component 声明命中后生成 CSS decorator，不修改既有调用点 Props
• [x] 通过一次事务热重载调整 Harmony Provider 与单个 Patch 的顺序和启停状态
• [x] 使用 CodeMirror 编辑 Draft 源码，并保持已安装依赖源码只读
• [x] 构建、经 Harmony 应用、重载，并确认实时 Client graph revision
• [x] 新建 Draft 级 Agent，或让已有 DSH 会话临时挂载 Studio tools、Skill 与上下文后继续工作
• [x] 让外部 Agent 通过本机只读 Streamable HTTP MCP 入口检查正在运行的 WebUI
• [x] 无需离开 Studio 即可处理单次工具授权、结构化问题和计划审核
• [x] 检查 package exports、构建产物、Patch 状态、顺序、依赖和 pack 输出
• [x] 同时运行多个相互隔离的 Draft Preview Host
• [x] 将当前 WebUI profile 或其它本地 profile 复制到每个 Draft 的隔离运行环境
• [x] 通过一次事务热重载调整插件顺序并启停 Harmony Provider

工作原理

flowchart LR
  A["稳定 DSH Host"] --> B["WebUI Studio"]
  B --> C["Draft worktree"]
  B --> D["Draft worktree"]
  C --> E["独立 DSH Home + Preview Host"]
  D --> F["独立 DSH Home + Preview Host"]
  E --> G["Harmony runtime + 真实 WebUI"]
  F --> G

稳定 Host 负责 Studio 界面、Draft registry 和 Agent session。每个 Draft 拥有隔离的

worktree 与 child Preview Host。只有在 Preview 确认新的实时 Client graph revision 后，

构建结果才会激活。停止 Draft 只终止 child Host，不会删除文件和状态。

已有普通 DSH 会话可以在不丢失历史或会话身份的情况下进入 Studio 模式。退出 Studio

会移除 Draft 专属的工具、Skill 与上下文，让会话恢复为普通 DSH 组合。

Studio 的本地地址为：

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

外部 Agent 可以通过以下 MCP 地址连接正在运行的实例：

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

常见 MCP 客户端可使用如下配置：

{
  "mcpServers": {
    "dsh-webui-studio": {
      "type": "http",
      "url": "http://127.0.0.1:<dsh-port>/studio/mcp"
    }
  }
}

在外部 Agent 中将该地址添加为 Streamable HTTP MCP server，即可调用

studio_get_context、studio_get_selection、studio_get_harmony_profile、

studio_inspect_harmony_target、studio_read_dependency_source 和

studio_preview_status。这些工具只检查当前 Host；外部 Agent 继续负责修改和构建自己的

WebUI 项目。Harmony profile、Patch 与依赖源码检查由 Host 直接提供。DOM 选择信息需要

打开 Studio，并在“当前实例”Preview 中选中元素。MCP 入口沿用 Studio 仅限 loopback

访问的边界，也可以通过 SSH loopback tunnel 使用。

托管数据位于 $DSH_HOME/studio/：

studio/
├── workspace.json
├── drafts/<draft-id>.json
├── repositories/<draft-id>/
├── worktrees/<draft-id>/
└── runtimes/<draft-id>/dsh-home/profiles/web/

创建新插件时，Studio 会初始化并提交一个最小 DSH Web Client package，并默认只将它

保存在 Studio 内。创建时也可以记录一个新建或空白本地文件夹的绝对路径；在实例面板

显式点击“保存插件到文件夹”前，Studio 不会创建或修改该目录。后续保存会同步 Studio

中的项目快照，同时保留目标目录独有的 node_modules 等文件。导入已有插件时，

Studio 只接受本机绝对文件夹路径；验证 Web Client manifest 后，它会跳过 .git 与

node_modules，将快照复制到 Studio 自有 Git repository。符号链接会被拒绝，原插件

文件夹始终保持只读且不会被修改。

每个 Draft 可以使用稳定 Host 当前的 web profile，也可以通过绝对文件夹路径选择

另一个本地 DSH profile。Studio 会将其清单与配置复制到 Draft 的隔离运行环境，并以

所选源文件夹为基准解析相对 link: 依赖；源 profile 始终不会被修改。

Draft 显示名与 npm package identity 相互独立，可在实例面板中重命名。Studio 会在

workspace.json 中保存标签顺序与当前 Draft；关闭标签只会将其移出当前工作区，不会

停止或删除 Draft。Source 存在未保存

修改时，必须先按 Ctrl+S 或 Command+S 保存，才能切换或关闭标签。

快速开始

[!IMPORTANT]

Studio 依赖 [docs/harmony-api-requirements.md](docs/harmony-api-requirements.md)

中列出的 Harmony 公共 service 与 CLI API，最低兼容版本为

dsh-harmony@0.8.7。

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

Studio 会把 Harmony 作为传递依赖一并安装。第一次访问 /studio 时，点击

安装 Harmony 并重启；页面会安装 launcher，并在本地 DSH 进程重启后自动返回

Studio，无需再执行第二条 package 安装命令。已经安装 Harmony launcher 时会跳过此步骤。

如需开发 Studio 本身：

git clone https://github.com/memorax-ai/dsh-webui-studio.git
cd dsh-webui-studio
npm install
npm run check

dsh plugin --profile web add link:$(pwd)
dsh web

如需用发布产物验证相同的单包安装流程：

studio_tarball="$(npm pack --silent --ignore-scripts)"
dsh plugin --profile web add "file:$(pwd)/${studio_tarball}"

打开本地 dsh web 进程输出的 Studio 地址，创建或导入 Draft，然后启动它的 Preview Host。

Draft package 必须：

• 声明 dsh.client.platform: "web"；
• 导出 ., ./client 和 ./package.json；
• 定义非空的 scripts.build 命令。

开发命令

命令 · 用途

npm run typecheck · 检查 Host、浏览器应用和 Preview bridge

npm test · 运行单元测试与组件测试

npm run build · 构建 Host、Studio UI 和 Preview bridge

…(truncated)