dsh-webui-studio 0.1.0 → 0.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/PRODUCT.md +11 -7
- package/README.md +69 -21
- package/README.zh-CN.md +64 -20
- package/dist/bridge.js +10 -10
- package/dist/studio.css +1 -1
- package/dist/studio.js +16691 -10202
- package/docs/bidirectional-connection-handoff.md +729 -0
- package/docs/harmony-api-requirements.md +17 -13
- package/docs/remote-development.md +80 -0
- package/lib/bridge/element-style-selector.d.ts +1 -0
- package/lib/bridge/element-style-selector.js +53 -0
- package/lib/contracts.d.ts +152 -83
- package/lib/contracts.js +0 -2
- package/lib/host/agent.d.ts +15 -13
- package/lib/host/agent.js +213 -56
- package/lib/host/automatic-patch.d.ts +9 -0
- package/lib/host/automatic-patch.js +433 -0
- package/lib/host/backend.d.ts +134 -4
- package/lib/host/backend.js +465 -114
- package/lib/host/drafts.d.ts +1 -1
- package/lib/host/drafts.js +65 -15
- package/lib/host/element-source.d.ts +9 -0
- package/lib/host/element-source.js +295 -0
- package/lib/host/mcp.d.ts +4 -0
- package/lib/host/mcp.js +97 -0
- package/lib/host/preview-draft.d.ts +22 -0
- package/lib/host/preview-draft.js +162 -0
- package/lib/host/preview-port.d.ts +8 -0
- package/lib/host/preview-port.js +32 -0
- package/lib/host/preview-worker.d.ts +65 -2
- package/lib/host/preview-worker.js +195 -76
- package/lib/host/preview.d.ts +26 -5
- package/lib/host/preview.js +130 -49
- package/lib/host/readiness.d.ts +2 -2
- package/lib/host/readiness.js +14 -17
- package/lib/host/routes.d.ts +1 -7
- package/lib/host/routes.js +34 -50
- package/lib/host/runtime-profile.d.ts +2 -1
- package/lib/host/runtime-profile.js +30 -8
- package/lib/host/source-resolution.d.ts +11 -1
- package/lib/host/source-resolution.js +69 -24
- package/lib/host/studio-service.d.ts +129 -0
- package/lib/host/studio-service.js +53 -0
- package/lib/index.d.ts +5 -0
- package/lib/index.js +64 -30
- package/lib/studio-remote.d.ts +126 -0
- package/lib/studio-remote.js +188 -0
- package/lib/variable-tree.d.ts +2 -0
- package/lib/variable-tree.js +13 -0
- package/package.json +62 -25
- package/studio.patch.yml +12 -0
package/PRODUCT.md
CHANGED
|
@@ -26,7 +26,7 @@ Its defining mechanism is a stable DSH control plane paired with one isolated Gi
|
|
|
26
26
|
|
|
27
27
|
## Operating Context
|
|
28
28
|
|
|
29
|
-
Studio is served by a stable local `dsh web` Host at `/studio`. The stable Host owns the Studio interface, Draft registry, and Agent sessions. Each running Draft is previewed by a separate child `dsh web` Host inside Studio's main iframe, which can expand to fullscreen.
|
|
29
|
+
Studio is served by a stable local `dsh web` Host at `/studio`. The stable Host owns the Studio interface, Draft registry, and Agent sessions. Studio can inspect that Host's current WebUI directly in read-only mode. Each running Draft is previewed by a separate child `dsh web` Host inside Studio's main iframe, which can expand to fullscreen.
|
|
30
30
|
|
|
31
31
|
Developers may create a minimal new Web Client plugin or import an existing local plugin folder as an isolated snapshot. A new plugin remains Studio-only by default; creation may record an optional absolute destination for a new or empty local folder, but Studio does not touch that folder until the user explicitly saves the project there. Later explicit saves synchronize the Studio snapshot without deleting destination-only files. Studio validates the Web Client manifest, excludes `.git` and `node_modules`, rejects symbolic links, and commits the copy into a Studio-owned Git repository without modifying the source folder. Draft repositories, worktrees, runtime homes, and registry records live under the stable Harness home's `studio` directory.
|
|
32
32
|
|
|
@@ -35,16 +35,20 @@ The normal loop is to start a Draft Preview Host, interact with the WebUI in Bro
|
|
|
35
35
|
## Capabilities and Constraints
|
|
36
36
|
|
|
37
37
|
- Every Draft owns an isolated worktree, child Harness home, `profiles/web`, dependency installation, Harmony state, and Preview Host. Multiple Draft Preview Hosts may run at once.
|
|
38
|
-
-
|
|
38
|
+
- A Draft snapshots either the main `web` profile or another local profile selected by absolute folder path. Relative `link:` dependencies are resolved against the selected source profile, and the Draft package is linked to its worktree. Studio never modifies the source profile and never silently falls back to the main profile.
|
|
39
39
|
- Browse mode preserves normal WebUI interaction. Inspect mode captures a redacted DOM snapshot and provides best-effort React component, owner, and source mapping.
|
|
40
40
|
- The Source panel edits UTF-8 files inside the selected Draft package. Builds use the package's fixed `scripts.build`; activation completes only after Preview confirms the new live Client graph revision.
|
|
41
41
|
- Readiness inspection covers package identity, DSH exports, built and Patch artifacts, dependencies, Harmony state and order, target version bounds, and differential Source Patch providers. Package inspection uses `npm pack --dry-run --json --ignore-scripts` through the managed DSH subprocess runtime.
|
|
42
|
-
- Agent sessions stay in the stable DSH and
|
|
42
|
+
- Agent sessions stay in the stable DSH and retain their model, history, identity, and session configuration. Studio can create a session or temporarily attach an existing ordinary session. Entering Studio mode adds one scoped tool set, runtime skill, system instruction, and target context; leaving removes that scope and restores ordinary DSH composition. Current-instance mode exposes only read-only tools for the live DOM selection, Harmony profile and targets, installed dependency source, and Preview status. Draft mode additionally exposes Draft files, exact patches, build, and reload. The Agent panel answers pending one-shot tool approvals, structured questions, and plan reviews through the Host interaction protocol. Preview-derived DOM, source, Patch, and comment data is untrusted evidence rather than Agent instruction. The child Preview Host does not own the Agent control plane.
|
|
43
|
+
- The stable Host exposes the same current-instance inspection set to out-of-process Agents through a stateless Streamable HTTP MCP endpoint at `/studio/mcp`. It remains loopback-only and contains no Draft write, build, reload, or profile mutation tools; the external Agent owns edits in its own workspace. Harmony and dependency inspection are Host-native, while live DOM selection is supplied by an open current-instance Studio Preview.
|
|
43
44
|
- The official WebUI continues to use its own-origin `/api` and WebSockets. Studio does not proxy WebUI traffic or introduce a second backend address.
|
|
44
|
-
- Draft labels are persisted independently from npm package names. Studio stores ordered open Draft tabs and the active Draft in `$DSH_HOME/studio/workspace.json`; closing every tab remains an explicit empty workspace across Host restarts
|
|
45
|
+
- Draft labels are persisted independently from npm package names. Studio stores ordered open Draft tabs and the active Draft in `$DSH_HOME/studio/workspace.json`; closing every tab remains an explicit empty workspace across Host restarts, and closing a tab never stops or deletes its Draft. Unsaved Source changes block tab switching and closing until saved.
|
|
46
|
+
- Plugin Management reads the active Draft Preview's public Harmony profile and inspection. Provider controls stay in the sidebar; the wider Patch ordering workspace stages Patch order and enablement, then commits the Draft profile through one transactional hot reload. The stable Studio Host is never modified.
|
|
47
|
+
- Element CSS editing persists generated, subtree-scoped CSS beside the registered Element source and restores the editable rule model after a Studio reload.
|
|
48
|
+
- Automatic CSS Patch creation analyzes named Component declarations, presents every match for confirmation, and emits a Component decorator plus Draft client export without touching existing JSX call sites or Props.
|
|
45
49
|
- Stopping a Draft terminates its child Host but preserves its repository, worktree, profile, and registry record. Closing the Studio page does not delete Drafts.
|
|
46
50
|
- A Draft package must be a buildable DSH Web Client package with `dsh.client.platform: "web"`, the required package exports, and a non-empty `scripts.build`.
|
|
47
|
-
- Studio is a local development surface. Its Host
|
|
51
|
+
- Studio is a local development surface. Its Host plugin is disabled when `dsh web` is not bound to `127.0.0.1`.
|
|
48
52
|
|
|
49
53
|
## Brand Commitments
|
|
50
54
|
|
|
@@ -54,7 +58,7 @@ Studio is a focused developer environment rather than a decorative mod manager.
|
|
|
54
58
|
|
|
55
59
|
## Evidence on Hand
|
|
56
60
|
|
|
57
|
-
- The runnable Studio Host
|
|
61
|
+
- The runnable Studio Host plugin and browser application live under `src`.
|
|
58
62
|
- The implemented architecture and development contract are documented in `README.md`.
|
|
59
63
|
- Harmony runtime behavior and public terminology are documented in the repository root `README.md`.
|
|
60
64
|
- React-aware patch factories available to Draft plugin authors are documented by the upstream `dsh-harmony-react` package.
|
|
@@ -66,7 +70,7 @@ Studio is a focused developer environment rather than a decorative mod manager.
|
|
|
66
70
|
- Preserve the stable DSH environment: unfinished Draft code belongs in isolated Preview Hosts.
|
|
67
71
|
- Express changes as distributable plugin and Harmony artifacts, not arbitrary edits to installed WebUI sources.
|
|
68
72
|
- Preview the real system: retain DSH origin, plugin graph, data, and interaction semantics during testing.
|
|
69
|
-
- Make state transitions explicit: distinguish
|
|
73
|
+
- Make state transitions explicit: distinguish built, preview-pending, active, stopped, and preserved Draft state.
|
|
70
74
|
- Keep the development loop layered and direct: inspect, edit, build, activate, and verify without hiding the underlying files or Patch behavior.
|
|
71
75
|
|
|
72
76
|
## Accessibility & Inclusion
|
package/README.md
CHANGED
|
@@ -16,17 +16,17 @@
|
|
|
16
16
|
<p>
|
|
17
17
|
<a href="#getting-started"><strong>Get started</strong></a>
|
|
18
18
|
·
|
|
19
|
-
<a href="https://github.com/
|
|
19
|
+
<a href="https://github.com/memorax-ai/dsh-webui-studio/issues">Report a bug</a>
|
|
20
20
|
·
|
|
21
|
-
<a href="https://github.com/
|
|
21
|
+
<a href="https://github.com/memorax-ai/dsh-webui-studio/issues">Request a feature</a>
|
|
22
22
|
</p>
|
|
23
23
|
|
|
24
24
|
[](LICENSE)
|
|
25
|
-
[](https://github.com/memorax-ai/dsh-webui-studio/actions/workflows/ci.yml)
|
|
26
26
|
[](https://www.npmjs.com/package/dsh-webui-studio)
|
|
27
27
|
[](package.json)
|
|
28
|
-
[](https://github.com/memorax-ai/dsh-webui-studio/stargazers)
|
|
29
|
+
[](https://memorax-ai.github.io/dsh-harmony/)
|
|
30
30
|
|
|
31
31
|
[简体中文](README.zh-CN.md) / [English](README.md)
|
|
32
32
|
</div>
|
|
@@ -39,7 +39,7 @@ distributable plugin-owned artifacts.
|
|
|
39
39
|
|
|
40
40
|
Studio is an independent downstream application of
|
|
41
41
|
[`dsh-harmony`](https://github.com/CH4ACKO3/dsh-harmony). It uses Harmony's
|
|
42
|
-
public
|
|
42
|
+
public runtime, Patch engine, service API, and CLI control surface together with the
|
|
43
43
|
generic React registration API from
|
|
44
44
|
[`dsh-harmony-react`](https://github.com/CH4ACKO3/dsh-harmony/tree/main/packages/react).
|
|
45
45
|
The dependency direction stays one-way: Studio depends on Harmony; Harmony does
|
|
@@ -51,12 +51,18 @@ not depend on Studio.
|
|
|
51
51
|
- [x] Give every Draft its own Git worktree, `DSH_HOME`, profile, dependencies, and child Host
|
|
52
52
|
- [x] Preview the official WebUI without loading Draft code into the stable Host
|
|
53
53
|
- [x] Browse normally or inspect DOM, React owners, source candidates, and Patch traces
|
|
54
|
+
- [x] Surface plugin-registered Element controls automatically; save defaults and subtree-scoped CSS back to Draft source
|
|
55
|
+
- [x] Review Component declaration matches and generate CSS decorators without changing existing call-site props
|
|
56
|
+
- [x] Reorder and toggle both Harmony providers and individual Patches through one transactional reload
|
|
54
57
|
- [x] Edit Draft source with CodeMirror and protect installed dependency sources as read-only
|
|
55
58
|
- [x] Build, apply through Harmony, reload, and confirm the live Client graph revision
|
|
56
|
-
- [x]
|
|
59
|
+
- [x] Start a Draft-scoped Agent or continue an existing DSH session with temporary Studio tools, skill, and context
|
|
60
|
+
- [x] Let an external Agent inspect the running WebUI through a local read-only Streamable HTTP MCP endpoint
|
|
61
|
+
- [x] Answer one-shot tool approvals, structured questions, and plan reviews without leaving Studio
|
|
57
62
|
- [x] Check package exports, artifacts, Patch state, ordering, dependencies, and pack output
|
|
58
63
|
- [x] Run multiple isolated Draft Preview Hosts at the same time
|
|
59
|
-
- [
|
|
64
|
+
- [x] Snapshot the current WebUI profile or another local profile into each isolated Draft runtime
|
|
65
|
+
- [x] Reorder plugins and enable or disable Harmony Providers through one transactional hot reload
|
|
60
66
|
|
|
61
67
|
## How it works
|
|
62
68
|
|
|
@@ -75,6 +81,9 @@ The stable Host owns the Studio interface, Draft registry, and Agent sessions.
|
|
|
75
81
|
Each Draft owns an isolated worktree and child Preview Host. A build becomes
|
|
76
82
|
active only after the Preview confirms the new live Client graph revision.
|
|
77
83
|
Stopping a Draft terminates its child Host but preserves its files and state.
|
|
84
|
+
An existing ordinary DSH session can enter Studio mode without losing its
|
|
85
|
+
history or identity. Leaving Studio removes the scoped Draft tools, skill, and
|
|
86
|
+
context so the session resumes through its ordinary DSH composition.
|
|
78
87
|
|
|
79
88
|
Studio is served locally at:
|
|
80
89
|
|
|
@@ -82,6 +91,35 @@ Studio is served locally at:
|
|
|
82
91
|
http://127.0.0.1:<dsh-port>/studio
|
|
83
92
|
```
|
|
84
93
|
|
|
94
|
+
External Agents can connect to the running instance through MCP at:
|
|
95
|
+
|
|
96
|
+
```text
|
|
97
|
+
http://127.0.0.1:<dsh-port>/studio/mcp
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
A typical MCP client entry is:
|
|
101
|
+
|
|
102
|
+
```json
|
|
103
|
+
{
|
|
104
|
+
"mcpServers": {
|
|
105
|
+
"dsh-webui-studio": {
|
|
106
|
+
"type": "http",
|
|
107
|
+
"url": "http://127.0.0.1:<dsh-port>/studio/mcp"
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
Add that URL as a Streamable HTTP MCP server in the external Agent. It exposes
|
|
114
|
+
`studio_get_context`, `studio_get_selection`, `studio_get_harmony_profile`,
|
|
115
|
+
`studio_inspect_harmony_target`, `studio_read_dependency_source`, and
|
|
116
|
+
`studio_preview_status`. These tools inspect the current Host only; the external
|
|
117
|
+
Agent remains responsible for editing and building its own WebUI project. Harmony
|
|
118
|
+
profile, Patch, and dependency-source inspection work directly from the Host.
|
|
119
|
+
DOM selection is available while Studio is open and an element is selected in
|
|
120
|
+
the current-instance Preview. The endpoint follows Studio's existing loopback-only
|
|
121
|
+
boundary, including access through an SSH loopback tunnel.
|
|
122
|
+
|
|
85
123
|
Its managed data lives under `$DSH_HOME/studio/`:
|
|
86
124
|
|
|
87
125
|
```text
|
|
@@ -104,33 +142,39 @@ its Web Client manifest, then copies an isolated snapshot without `.git` or
|
|
|
104
142
|
`node_modules` into a Studio-owned Git repository. Symbolic links are rejected,
|
|
105
143
|
and the original folder is never modified.
|
|
106
144
|
|
|
145
|
+
Each Draft can start from the stable Host's current `web` profile or from
|
|
146
|
+
another local DSH profile selected by absolute folder path. Studio copies that
|
|
147
|
+
profile's manifest and configuration into the isolated runtime and resolves
|
|
148
|
+
relative `link:` dependencies against the selected source folder. The source
|
|
149
|
+
profile remains untouched.
|
|
150
|
+
|
|
107
151
|
Draft display names are independent from npm package identities and can be
|
|
108
152
|
renamed in the instance panel. Studio persists the ordered open tabs and active
|
|
109
153
|
Draft in `workspace.json`; closing a tab only removes it from the current
|
|
110
|
-
workspace and never stops or deletes the Draft.
|
|
111
|
-
any persisted Draft. Unsaved Source changes must be saved with `Ctrl+S` or
|
|
154
|
+
workspace and never stops or deletes the Draft. Unsaved Source changes must be saved with `Ctrl+S` or
|
|
112
155
|
`Command+S` before switching or closing tabs.
|
|
113
156
|
|
|
114
157
|
## Getting started
|
|
115
158
|
|
|
116
159
|
> [!IMPORTANT]
|
|
117
|
-
> Studio requires the public Harmony
|
|
160
|
+
> Studio requires the public Harmony service and CLI APIs documented in
|
|
118
161
|
> [`docs/harmony-api-requirements.md`](docs/harmony-api-requirements.md).
|
|
119
|
-
> `dsh-harmony@0.
|
|
162
|
+
> `dsh-harmony@0.8.7` is the minimum compatible release.
|
|
120
163
|
|
|
121
164
|
```sh
|
|
122
|
-
dsh plugin --profile web add dsh-webui-studio
|
|
165
|
+
dsh plugin --profile web add dsh-webui-studio
|
|
123
166
|
dsh web
|
|
124
167
|
```
|
|
125
168
|
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
169
|
+
Studio includes Harmony as a transitive dependency. On the first visit to
|
|
170
|
+
`/studio`, approve **Install Harmony and restart**; the page installs the
|
|
171
|
+
launcher and returns to Studio after the local DSH process restarts. No second
|
|
172
|
+
package command is required. An existing Harmony launcher skips this setup.
|
|
129
173
|
|
|
130
174
|
To develop Studio itself from source:
|
|
131
175
|
|
|
132
176
|
```sh
|
|
133
|
-
git clone https://github.com/
|
|
177
|
+
git clone https://github.com/memorax-ai/dsh-webui-studio.git
|
|
134
178
|
cd dsh-webui-studio
|
|
135
179
|
npm install
|
|
136
180
|
npm run check
|
|
@@ -143,8 +187,7 @@ To exercise the same single-package installation path as a release artifact:
|
|
|
143
187
|
|
|
144
188
|
```sh
|
|
145
189
|
studio_tarball="$(npm pack --silent --ignore-scripts)"
|
|
146
|
-
dsh plugin --profile web add "file:$(pwd)/${studio_tarball}"
|
|
147
|
-
--allow-build=dsh-harmony
|
|
190
|
+
dsh plugin --profile web add "file:$(pwd)/${studio_tarball}"
|
|
148
191
|
```
|
|
149
192
|
|
|
150
193
|
Open the Studio URL printed by the local `dsh web` process, create or import a
|
|
@@ -166,6 +209,9 @@ A Draft package must:
|
|
|
166
209
|
| `npm run check` | Run typecheck, tests, build, and packed fresh-install integration |
|
|
167
210
|
| `npm run test:integration` | Pack and install the tarball in a fresh DSH home, then exercise Host, Draft, Preview, build, activation, and shutdown end to end |
|
|
168
211
|
|
|
212
|
+
For isolated Agent environments on a remote Docker host, see
|
|
213
|
+
[`docs/remote-development.md`](docs/remote-development.md).
|
|
214
|
+
|
|
169
215
|
The integration test requires a Harmony build that exposes the APIs described
|
|
170
216
|
in the compatibility note above.
|
|
171
217
|
|
|
@@ -176,6 +222,8 @@ in the compatibility note above.
|
|
|
176
222
|
- Preview DOM, React, source, Patch, and comment data is treated as untrusted evidence.
|
|
177
223
|
- Source writes stay inside the selected Draft package and never follow symbolic links outside it.
|
|
178
224
|
- Registered element boundaries and Patch traces are candidate evidence, not claims of exact DOM ownership.
|
|
225
|
+
- Element controls change the live Preview through plugin bindings. **Save to plugin source** updates declared default initializers and generated subtree-scoped CSS inside the Draft worktree; it never rewrites component use sites or freezes the runtime binding.
|
|
226
|
+
- Automatic CSS Patch creation uses a Harmony React Component decorator. Studio shows every matching declaration before writing, adds an immediately available Draft client export, and leaves all existing JSX calls and Props intact.
|
|
179
227
|
|
|
180
228
|
## Frequently asked questions
|
|
181
229
|
|
|
@@ -201,11 +249,11 @@ The DSH WebUI exposes many useful slots, but Studio aims for deeper and more
|
|
|
201
249
|
flexible changes—including UI and behavior introduced by other plugins—while
|
|
202
250
|
keeping independently authored modifications as compatible as possible.
|
|
203
251
|
[`dsh-harmony`](https://github.com/CH4ACKO3/dsh-harmony) provides the runtime
|
|
204
|
-
patching and
|
|
252
|
+
patching and runtime model that makes this possible.
|
|
205
253
|
|
|
206
254
|
## Related projects
|
|
207
255
|
|
|
208
|
-
- [`dsh-harmony`](https://github.com/CH4ACKO3/dsh-harmony) - runtime patching,
|
|
256
|
+
- [`dsh-harmony`](https://github.com/CH4ACKO3/dsh-harmony) - runtime patching, transactional plugin reloads, and Patch inspection
|
|
209
257
|
- [`dsh-harmony-react`](https://github.com/CH4ACKO3/dsh-harmony/tree/main/packages/react) - React-aware Patch factories and Studio element/variable registration
|
|
210
258
|
|
|
211
259
|
## License
|
package/README.zh-CN.md
CHANGED
|
@@ -16,17 +16,17 @@
|
|
|
16
16
|
<p>
|
|
17
17
|
<a href="#快速开始"><strong>快速开始</strong></a>
|
|
18
18
|
·
|
|
19
|
-
<a href="https://github.com/
|
|
19
|
+
<a href="https://github.com/memorax-ai/dsh-webui-studio/issues">报告问题</a>
|
|
20
20
|
·
|
|
21
|
-
<a href="https://github.com/
|
|
21
|
+
<a href="https://github.com/memorax-ai/dsh-webui-studio/issues">功能建议</a>
|
|
22
22
|
</p>
|
|
23
23
|
|
|
24
24
|
[](LICENSE)
|
|
25
|
-
[](https://github.com/memorax-ai/dsh-webui-studio/actions/workflows/ci.yml)
|
|
26
26
|
[](https://www.npmjs.com/package/dsh-webui-studio)
|
|
27
27
|
[](package.json)
|
|
28
|
-
[](https://github.com/memorax-ai/dsh-webui-studio/stargazers)
|
|
29
|
+
[](https://memorax-ai.github.io/dsh-harmony/)
|
|
30
30
|
|
|
31
31
|
[简体中文](README.zh-CN.md) / [English](README.md)
|
|
32
32
|
</div>
|
|
@@ -37,8 +37,8 @@ WebUI Studio 不是模拟页面生成器。它运行在官方 DSH WebUI 和真
|
|
|
37
37
|
把可视化检查与源码修改转化为可分发、由插件自身拥有的产物。
|
|
38
38
|
|
|
39
39
|
Studio 是 [`dsh-harmony`](https://github.com/CH4ACKO3/dsh-harmony)
|
|
40
|
-
的独立下游应用。它通过公共 package exports 使用 Harmony 的
|
|
41
|
-
|
|
40
|
+
的独立下游应用。它通过公共 package exports 使用 Harmony 的 runtime、Patch engine、
|
|
41
|
+
service API 与 CLI 控制面,并使用
|
|
42
42
|
[`dsh-harmony-react`](https://github.com/CH4ACKO3/dsh-harmony/tree/main/packages/react)
|
|
43
43
|
提供的通用 React 注册 API。依赖始终保持单向:Studio 依赖 Harmony,Harmony 不依赖 Studio。
|
|
44
44
|
|
|
@@ -48,12 +48,18 @@ Patch engine 与 Draft API,并使用
|
|
|
48
48
|
- [x] 为每个 Draft 分配独立 Git worktree、`DSH_HOME`、profile、依赖树和 child Host
|
|
49
49
|
- [x] 预览官方 WebUI,同时不把 Draft 代码加载进稳定 Host
|
|
50
50
|
- [x] 正常浏览,或检查 DOM、React owner、源码候选和 Patch trace
|
|
51
|
+
- [x] 自动展示插件注册的 Element 控件,并将默认值与限定在当前子树内的 CSS 保存回草稿源码
|
|
52
|
+
- [x] 检查 Component 声明命中后生成 CSS decorator,不修改既有调用点 Props
|
|
53
|
+
- [x] 通过一次事务热重载调整 Harmony Provider 与单个 Patch 的顺序和启停状态
|
|
51
54
|
- [x] 使用 CodeMirror 编辑 Draft 源码,并保持已安装依赖源码只读
|
|
52
55
|
- [x] 构建、经 Harmony 应用、重载,并确认实时 Client graph revision
|
|
53
|
-
- [x]
|
|
56
|
+
- [x] 新建 Draft 级 Agent,或让已有 DSH 会话临时挂载 Studio tools、Skill 与上下文后继续工作
|
|
57
|
+
- [x] 让外部 Agent 通过本机只读 Streamable HTTP MCP 入口检查正在运行的 WebUI
|
|
58
|
+
- [x] 无需离开 Studio 即可处理单次工具授权、结构化问题和计划审核
|
|
54
59
|
- [x] 检查 package exports、构建产物、Patch 状态、顺序、依赖和 pack 输出
|
|
55
60
|
- [x] 同时运行多个相互隔离的 Draft Preview Host
|
|
56
|
-
- [
|
|
61
|
+
- [x] 将当前 WebUI profile 或其它本地 profile 复制到每个 Draft 的隔离运行环境
|
|
62
|
+
- [x] 通过一次事务热重载调整插件顺序并启停 Harmony Provider
|
|
57
63
|
|
|
58
64
|
## 工作原理
|
|
59
65
|
|
|
@@ -71,6 +77,8 @@ flowchart LR
|
|
|
71
77
|
稳定 Host 负责 Studio 界面、Draft registry 和 Agent session。每个 Draft 拥有隔离的
|
|
72
78
|
worktree 与 child Preview Host。只有在 Preview 确认新的实时 Client graph revision 后,
|
|
73
79
|
构建结果才会激活。停止 Draft 只终止 child Host,不会删除文件和状态。
|
|
80
|
+
已有普通 DSH 会话可以在不丢失历史或会话身份的情况下进入 Studio 模式。退出 Studio
|
|
81
|
+
会移除 Draft 专属的工具、Skill 与上下文,让会话恢复为普通 DSH 组合。
|
|
74
82
|
|
|
75
83
|
Studio 的本地地址为:
|
|
76
84
|
|
|
@@ -78,6 +86,33 @@ Studio 的本地地址为:
|
|
|
78
86
|
http://127.0.0.1:<dsh-port>/studio
|
|
79
87
|
```
|
|
80
88
|
|
|
89
|
+
外部 Agent 可以通过以下 MCP 地址连接正在运行的实例:
|
|
90
|
+
|
|
91
|
+
```text
|
|
92
|
+
http://127.0.0.1:<dsh-port>/studio/mcp
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
常见 MCP 客户端可使用如下配置:
|
|
96
|
+
|
|
97
|
+
```json
|
|
98
|
+
{
|
|
99
|
+
"mcpServers": {
|
|
100
|
+
"dsh-webui-studio": {
|
|
101
|
+
"type": "http",
|
|
102
|
+
"url": "http://127.0.0.1:<dsh-port>/studio/mcp"
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
在外部 Agent 中将该地址添加为 Streamable HTTP MCP server,即可调用
|
|
109
|
+
`studio_get_context`、`studio_get_selection`、`studio_get_harmony_profile`、
|
|
110
|
+
`studio_inspect_harmony_target`、`studio_read_dependency_source` 和
|
|
111
|
+
`studio_preview_status`。这些工具只检查当前 Host;外部 Agent 继续负责修改和构建自己的
|
|
112
|
+
WebUI 项目。Harmony profile、Patch 与依赖源码检查由 Host 直接提供。DOM 选择信息需要
|
|
113
|
+
打开 Studio,并在“当前实例”Preview 中选中元素。MCP 入口沿用 Studio 仅限 loopback
|
|
114
|
+
访问的边界,也可以通过 SSH loopback tunnel 使用。
|
|
115
|
+
|
|
81
116
|
托管数据位于 `$DSH_HOME/studio/`:
|
|
82
117
|
|
|
83
118
|
```text
|
|
@@ -97,30 +132,35 @@ Studio 只接受本机绝对文件夹路径;验证 Web Client manifest 后,
|
|
|
97
132
|
`node_modules`,将快照复制到 Studio 自有 Git repository。符号链接会被拒绝,原插件
|
|
98
133
|
文件夹始终保持只读且不会被修改。
|
|
99
134
|
|
|
135
|
+
每个 Draft 可以使用稳定 Host 当前的 `web` profile,也可以通过绝对文件夹路径选择
|
|
136
|
+
另一个本地 DSH profile。Studio 会将其清单与配置复制到 Draft 的隔离运行环境,并以
|
|
137
|
+
所选源文件夹为基准解析相对 `link:` 依赖;源 profile 始终不会被修改。
|
|
138
|
+
|
|
100
139
|
Draft 显示名与 npm package identity 相互独立,可在实例面板中重命名。Studio 会在
|
|
101
140
|
`workspace.json` 中保存标签顺序与当前 Draft;关闭标签只会将其移出当前工作区,不会
|
|
102
|
-
停止或删除 Draft
|
|
141
|
+
停止或删除 Draft。Source 存在未保存
|
|
103
142
|
修改时,必须先按 `Ctrl+S` 或 `Command+S` 保存,才能切换或关闭标签。
|
|
104
143
|
|
|
105
144
|
## 快速开始
|
|
106
145
|
|
|
107
146
|
> [!IMPORTANT]
|
|
108
147
|
> Studio 依赖 [`docs/harmony-api-requirements.md`](docs/harmony-api-requirements.md)
|
|
109
|
-
> 中列出的 Harmony 公共
|
|
110
|
-
> `dsh-harmony@0.
|
|
148
|
+
> 中列出的 Harmony 公共 service 与 CLI API,最低兼容版本为
|
|
149
|
+
> `dsh-harmony@0.8.7`。
|
|
111
150
|
|
|
112
151
|
```sh
|
|
113
|
-
dsh plugin --profile web add dsh-webui-studio
|
|
152
|
+
dsh plugin --profile web add dsh-webui-studio
|
|
114
153
|
dsh web
|
|
115
154
|
```
|
|
116
155
|
|
|
117
|
-
Harmony
|
|
118
|
-
|
|
156
|
+
Studio 会把 Harmony 作为传递依赖一并安装。第一次访问 `/studio` 时,点击
|
|
157
|
+
**安装 Harmony 并重启**;页面会安装 launcher,并在本地 DSH 进程重启后自动返回
|
|
158
|
+
Studio,无需再执行第二条 package 安装命令。已经安装 Harmony launcher 时会跳过此步骤。
|
|
119
159
|
|
|
120
160
|
如需开发 Studio 本身:
|
|
121
161
|
|
|
122
162
|
```sh
|
|
123
|
-
git clone https://github.com/
|
|
163
|
+
git clone https://github.com/memorax-ai/dsh-webui-studio.git
|
|
124
164
|
cd dsh-webui-studio
|
|
125
165
|
npm install
|
|
126
166
|
npm run check
|
|
@@ -133,8 +173,7 @@ dsh web
|
|
|
133
173
|
|
|
134
174
|
```sh
|
|
135
175
|
studio_tarball="$(npm pack --silent --ignore-scripts)"
|
|
136
|
-
dsh plugin --profile web add "file:$(pwd)/${studio_tarball}"
|
|
137
|
-
--allow-build=dsh-harmony
|
|
176
|
+
dsh plugin --profile web add "file:$(pwd)/${studio_tarball}"
|
|
138
177
|
```
|
|
139
178
|
|
|
140
179
|
打开本地 `dsh web` 进程输出的 Studio 地址,创建或导入 Draft,然后启动它的 Preview Host。
|
|
@@ -155,6 +194,9 @@ Draft package 必须:
|
|
|
155
194
|
| `npm run check` | 运行 typecheck、测试、构建和 tarball 全新安装集成验证 |
|
|
156
195
|
| `npm run test:integration` | 将 tarball 安装到全新的 DSH home,再端到端验证 Host、Draft、Preview、构建、激活与停止 |
|
|
157
196
|
|
|
197
|
+
如需在远程 Docker 主机上运行相互隔离的 Agent 开发环境,请参阅
|
|
198
|
+
[`docs/remote-development.md`](docs/remote-development.md)。
|
|
199
|
+
|
|
158
200
|
集成测试需要 Harmony build 已公开兼容性说明中列出的 API。
|
|
159
201
|
|
|
160
202
|
## 设计边界
|
|
@@ -164,6 +206,8 @@ Draft package 必须:
|
|
|
164
206
|
- 来自 Preview 的 DOM、React、源码、Patch 与注释数据均被视为不可信证据。
|
|
165
207
|
- 源码写入始终限制在所选 Draft package 内,且不会沿符号链接写到外部。
|
|
166
208
|
- 已注册 element boundary 与 Patch trace 只是候选证据,不代表对 DOM 的精确所有权声明。
|
|
209
|
+
- Element 控件通过插件 binding 修改实时 Preview。“保存到插件源码”会在 Draft 工作树中更新插件声明的默认初始化值与限定子树 CSS,不会改写组件使用位置,也不会固定运行时 binding。
|
|
210
|
+
- 自动 CSS Patch 使用 Harmony React 的 Component decorator。Studio 会先展示所有声明命中,再写入可立即加载的 Draft client export;现有 JSX 调用与 Props 保持不变。
|
|
167
211
|
|
|
168
212
|
## 常见问题
|
|
169
213
|
|
|
@@ -184,11 +228,11 @@ Agent,而是为 Agent 和开发者提供更好的交互式修改体验。
|
|
|
184
228
|
DSH WebUI 已经提供了许多 Slot 点位,但 Studio 不满足于此。我们希望实现更深层、
|
|
185
229
|
更高自由度的修改,包括修改其他插件加入的 UI 和逻辑,同时让不同修改插件之间尽可能
|
|
186
230
|
兼容。[`dsh-harmony`](https://github.com/CH4ACKO3/dsh-harmony) 提供的运行时 Patch 与
|
|
187
|
-
|
|
231
|
+
运行时模型,让这种能力成为可能。
|
|
188
232
|
|
|
189
233
|
## 相关项目
|
|
190
234
|
|
|
191
|
-
- [`dsh-harmony`](https://github.com/CH4ACKO3/dsh-harmony) - runtime patch
|
|
235
|
+
- [`dsh-harmony`](https://github.com/CH4ACKO3/dsh-harmony) - runtime patch、事务式插件重载与 Patch 检查
|
|
192
236
|
- [`dsh-harmony-react`](https://github.com/CH4ACKO3/dsh-harmony/tree/main/packages/react) - React-aware Patch 工厂与 Studio element/variable 注册
|
|
193
237
|
|
|
194
238
|
## 许可证
|