diff --git a/alias.ts b/alias.ts
index 08db230d3..6cefefa01 100644
--- a/alias.ts
+++ b/alias.ts
@@ -78,63 +78,52 @@ export const alias = {
   '@devframes/json-render-ui/spa': r('json-render-ui/src/spa.ts'),
   '@devframes/json-render-ui': r('json-render-ui/src/index.ts'),
   'json-render/dashboard': fileURLToPath(new URL('./examples/json-render/src/dashboard.ts', import.meta.url)),
-  '@devframes/plugin-code-server/client': p('code-server/src/client/index.ts'),
-  '@devframes/plugin-code-server/node': p('code-server/src/node/index.ts'),
-  '@devframes/plugin-code-server/constants': p('code-server/src/constants.ts'),
-  '@devframes/plugin-code-server/types': p('code-server/src/types.ts'),
-  '@devframes/plugin-code-server/rpc': p('code-server/src/rpc/index.ts'),
-  '@devframes/plugin-code-server/cli': p('code-server/src/cli.ts'),
-  '@devframes/plugin-code-server/vite': p('code-server/src/vite.ts'),
-  '@devframes/plugin-code-server': p('code-server/src/index.ts'),
-  '@devframes/plugin-terminals/client': p('terminals/src/client/index.ts'),
-  '@devframes/plugin-terminals/node': p('terminals/src/node/index.ts'),
-  '@devframes/plugin-terminals/constants': p('terminals/src/constants.ts'),
-  '@devframes/plugin-terminals/types': p('terminals/src/types.ts'),
-  '@devframes/plugin-terminals/cli': p('terminals/src/cli.ts'),
-  '@devframes/plugin-terminals/vite': p('terminals/src/vite.ts'),
-  '@devframes/plugin-terminals': p('terminals/src/index.ts'),
-  '@devframes/plugin-git': p('git/src/index.ts'),
+  '@devframes/plugin-code-server/node': p('code-server/src/node/setup.ts'),
+  '@devframes/plugin-code-server/constants': p('code-server/src/node/constants.ts'),
+  '@devframes/plugin-code-server/types': p('code-server/src/node/types.ts'),
+  '@devframes/plugin-code-server/rpc': p('code-server/src/node/rpc/index.ts'),
+  '@devframes/plugin-code-server/cli': p('code-server/src/node/cli.ts'),
+  '@devframes/plugin-code-server/vite': p('code-server/src/node/vite.ts'),
+  '@devframes/plugin-code-server': p('code-server/src/node/index.ts'),
+  '@devframes/plugin-terminals/client': p('terminals/app/client/index.ts'),
+  '@devframes/plugin-terminals/node': p('terminals/src/node/setup.ts'),
+  '@devframes/plugin-terminals/constants': p('terminals/src/node/constants.ts'),
+  '@devframes/plugin-terminals/types': p('terminals/src/node/types.ts'),
+  '@devframes/plugin-terminals/cli': p('terminals/src/node/cli.ts'),
+  '@devframes/plugin-terminals/vite': p('terminals/src/node/vite.ts'),
+  '@devframes/plugin-terminals': p('terminals/src/node/index.ts'),
+  '@devframes/plugin-git': p('git/src/node/index.ts'),
   'devframe/recipes/interactive-auth': r('devframe/src/recipes/interactive-auth.ts'),
   'devframe/recipes/common-rpc-functions': r('devframe/src/recipes/common-rpc-functions.ts'),
   'devframe/client': r('devframe/src/client/index.ts'),
   'devframe': r('devframe/src'),
-  '@devframes/plugin-data-inspector/client': p('data-inspector/src/client/index.ts'),
-  '@devframes/plugin-data-inspector/node': p('data-inspector/src/node/index.ts'),
-  '@devframes/plugin-data-inspector/registry': p('data-inspector/src/registry/index.ts'),
-  '@devframes/plugin-data-inspector/engine': p('data-inspector/src/engine/index.ts'),
   '@devframes/plugin-data-inspector/inject': p('data-inspector/src/inject/index.ts'),
-  '@devframes/plugin-data-inspector/cli': p('data-inspector/src/cli.ts'),
-  '@devframes/plugin-data-inspector/vite': p('data-inspector/src/vite.ts'),
-  '@devframes/plugin-data-inspector': p('data-inspector/src/index.ts'),
-  '@devframes/plugin-inspect/client': p('inspect/src/client/index.ts'),
-  '@devframes/plugin-inspect/node': p('inspect/src/node/index.ts'),
-  '@devframes/plugin-inspect/cli': p('inspect/src/cli.ts'),
-  '@devframes/plugin-inspect/vite': p('inspect/src/vite.ts'),
-  '@devframes/plugin-inspect': p('inspect/src/index.ts'),
-  '@devframes/plugin-og/client': p('og/src/client/index.ts'),
-  '@devframes/plugin-og/node': p('og/src/node/index.ts'),
-  '@devframes/plugin-og/rpc': p('og/src/rpc/index.ts'),
-  '@devframes/plugin-og/cli': p('og/src/cli.ts'),
-  '@devframes/plugin-og/vite': p('og/src/vite.ts'),
-  '@devframes/plugin-og': p('og/src/index.ts'),
-  '@devframes/plugin-a11y/client': p('a11y/src/client/index.ts'),
-  '@devframes/plugin-a11y/node': p('a11y/src/node/index.ts'),
-  '@devframes/plugin-a11y/cli': p('a11y/src/cli.ts'),
-  '@devframes/plugin-a11y/vite': p('a11y/src/vite.ts'),
-  '@devframes/plugin-a11y': p('a11y/src/index.ts'),
-  '@devframes/plugin-messages/client': p('messages/src/client/index.ts'),
-  '@devframes/plugin-messages/node': p('messages/src/node/index.ts'),
-  '@devframes/plugin-messages/constants': p('messages/src/constants.ts'),
-  '@devframes/plugin-messages/rpc': p('messages/src/rpc/index.ts'),
-  '@devframes/plugin-messages/cli': p('messages/src/cli.ts'),
-  '@devframes/plugin-messages/vite': p('messages/src/vite.ts'),
-  '@devframes/plugin-messages': p('messages/src/index.ts'),
-  '@devframes/plugin-assets/client': p('assets/src/client/index.ts'),
-  '@devframes/plugin-assets/node': p('assets/src/node/index.ts'),
-  '@devframes/plugin-assets/rpc': p('assets/src/rpc/index.ts'),
-  '@devframes/plugin-assets/cli': p('assets/src/cli.ts'),
-  '@devframes/plugin-assets/vite': p('assets/src/vite.ts'),
-  '@devframes/plugin-assets': p('assets/src/index.ts'),
+  '@devframes/plugin-data-inspector/node': p('data-inspector/src/node/setup.ts'),
+  '@devframes/plugin-data-inspector/registry': p('data-inspector/src/node/registry/index.ts'),
+  '@devframes/plugin-data-inspector/engine': p('data-inspector/src/node/engine/index.ts'),
+  '@devframes/plugin-data-inspector/cli': p('data-inspector/src/node/cli.ts'),
+  '@devframes/plugin-data-inspector': p('data-inspector/src/node/index.ts'),
+  '@devframes/plugin-inspect/node': p('inspect/src/node/setup.ts'),
+  '@devframes/plugin-inspect/cli': p('inspect/src/node/cli.ts'),
+  '@devframes/plugin-inspect': p('inspect/src/node/index.ts'),
+  '@devframes/plugin-og/node': p('og/src/node/setup.ts'),
+  '@devframes/plugin-og/rpc': p('og/src/node/rpc/index.ts'),
+  '@devframes/plugin-og/cli': p('og/src/node/cli.ts'),
+  '@devframes/plugin-og': p('og/src/node/index.ts'),
+  '@devframes/plugin-a11y/client-script': p('a11y/src/client-script/index.ts'),
+  '@devframes/plugin-a11y/node': p('a11y/src/node/setup.ts'),
+  '@devframes/plugin-a11y/cli': p('a11y/src/node/cli.ts'),
+  '@devframes/plugin-a11y': p('a11y/src/node/index.ts'),
+  '@devframes/plugin-messages/client': p('messages/app/client/index.ts'),
+  '@devframes/plugin-messages/node': p('messages/src/node/setup.ts'),
+  '@devframes/plugin-messages/constants': p('messages/src/node/constants.ts'),
+  '@devframes/plugin-messages/rpc': p('messages/src/node/rpc/index.ts'),
+  '@devframes/plugin-messages/cli': p('messages/src/node/cli.ts'),
+  '@devframes/plugin-messages': p('messages/src/node/index.ts'),
+  '@devframes/plugin-assets/node': p('assets/src/node/setup.ts'),
+  '@devframes/plugin-assets/rpc': p('assets/src/node/rpc/index.ts'),
+  '@devframes/plugin-assets/cli': p('assets/src/node/cli.ts'),
+  '@devframes/plugin-assets': p('assets/src/node/index.ts'),
   '@devframes/service-git': s('git/src/index.ts'),
   '@devframes/service-open': s('open/src/index.ts'),
   '@devframes/service-shiki': s('shiki/src/index.ts'),
diff --git a/docs/content/1.guide/1.tutorial-server-data-inspector.md b/docs/content/1.guide/1.tutorial-server-data-inspector.md
index 48cfbe90b..e31785259 100644
--- a/docs/content/1.guide/1.tutorial-server-data-inspector.md
+++ b/docs/content/1.guide/1.tutorial-server-data-inspector.md
@@ -13,6 +13,8 @@ You'll need [Node 24+](https://nodejs.org/) and a terminal. Every code block is
 
 A devframe is two halves talking over a typed connection: the **node side** exposes functions, and the **browser side** calls them and renders the results. Devframe is everything in between: the wire, the UI hosting, auth, builds, and a CLI.
 
+The two halves live in their own folders: the node side under `src/node/`, the web app under `app/`. A `playgrounds/` folder holds hosts that boot the built tool. We'll fill these in as we go.
+
 ## Step 1: Define the tool
 
 Everything starts with `defineDevframe`: your tool's name, plus a `setup` where you register what it can do. Create the project and the definition:
@@ -23,7 +25,7 @@ npm init -y && npm pkg set type=module
 npm install devframe && npm install -D typescript
 ```
 
-```ts [src/data-inspector.ts]
+```ts [src/node/data-inspector.ts]
 import { defineDevframe } from 'devframe'
 
 // Some example server-side data, whatever you want to peek at while your
@@ -95,7 +97,7 @@ npm install react react-dom @devframes/vite
 npm install -D vite @vitejs/plugin-react @types/react @types/react-dom
 ```
 
-```html [client/index.html]
+```html [app/index.html]
 <!doctype html>
 <html>
   <head>
@@ -109,14 +111,14 @@ npm install -D vite @vitejs/plugin-react @types/react @types/react-dom
 </html>
 ```
 
-```tsx [client/main.tsx]
+```tsx [app/main.tsx]
 import { createRoot } from 'react-dom/client'
 import { App } from './App'
 
 createRoot(document.getElementById('app')!).render(<App />)
 ```
 
-```tsx [client/App.tsx]
+```tsx [app/App.tsx]
 import type { DevframeRpcClient } from 'devframe/client'
 import { connectDevframe } from 'devframe/client'
 import { useEffect, useState } from 'react'
@@ -173,14 +175,13 @@ export function App() {
 
 To try what we've built, let Vite serve the UI and hand RPC traffic to devframe:
 
-```ts [vite.client.config.ts]
+```ts [app/vite.config.ts]
 import { devframeViteBridge } from '@devframes/vite/single'
 import react from '@vitejs/plugin-react'
 import { defineConfig } from 'vite'
-import dataInspectorFrame from './src/data-inspector.ts'
+import dataInspectorFrame from '../src/node/data-inspector.ts'
 
 export default defineConfig({
-  root: 'client',
   base: './', // relative asset URLs, so the built UI works under any mount path
   build: { outDir: '../dist/client', emptyOutDir: true },
   plugins: [
@@ -193,7 +194,7 @@ export default defineConfig({
 ```
 
 ```sh
-npx vite --config vite.client.config.ts
+npx vite --config app/vite.config.ts
 ```
 
 Open the printed URL. The three keys and their types show up, and typing `config.port` or `users.0.name` and hitting **Query** prints the value. Button → `call` → your `handler` → back to the page: that's the whole devframe working.
@@ -201,19 +202,19 @@ Open the printed URL. The three keys and their types show up, and typing `config
 > [!WARNING]
 > `auth: false` trusts anything that can reach the port. It's off here to keep the tutorial simple; turn it on for anything you publish or expose beyond localhost. See [Security](/guide/security).
 
-From here on we reuse this same `src/data-inspector.ts` and `client/` unchanged; all that changes is where they run.
+From here on we reuse this same `src/node/data-inspector.ts` and `app/` unchanged; all that changes is where they run.
 
 ## Step 4: Dock it in a hub
 
 A [hub](/guide/hub) puts many devframes behind one interface, each a **dock entry** you switch between, the tool's own UI in an iframe. Since our SPA uses a bare `connectDevframe()`, it already works anywhere; the hub just needs the built UI, so point the definition at it:
 
-```ts [src/data-inspector.ts]
+```ts [src/node/data-inspector.ts]
 import { fileURLToPath } from 'node:url'
 // …
 const dataInspectorFrame = defineDevframe({
   id: 'data-inspector',
   /** … */
-  clientAssets: fileURLToPath(new URL('../dist/client', import.meta.url)),
+  clientAssets: fileURLToPath(new URL('../../dist/client', import.meta.url)),
   setup(ctx) { /* unchanged */ },
 })
 ```
@@ -222,14 +223,14 @@ Build the UI and stand up a one-devframe hub:
 
 ```sh
 npm install @devframes/hub @devframes/hub-ui
-npx vite build --config vite.client.config.ts
+npx vite build --config app/vite.config.ts
 ```
 
-```ts [vite.hub.config.ts]
+```ts [playgrounds/hub.config.ts]
 import { createUi } from '@devframes/hub-ui'
 import { viteDevframeHub } from '@devframes/vite/hub'
 import { defineConfig } from 'vite'
-import dataInspectorFrame from './src/data-inspector.ts'
+import dataInspectorFrame from '../src/node/data-inspector.ts'
 
 export default defineConfig({
   plugins: [
@@ -242,7 +243,7 @@ export default defineConfig({
 ```
 
 ```sh
-npx vite --config vite.hub.config.ts
+npx vite --config playgrounds/hub.config.ts
 ```
 
 Your inspector now sits in the hub's dock rail as a dock entry. Add more to `devframes: [...]` (your own or the [built-in devframes](/add-ons)) and each gets its own. (The hub prints a code to authorize on first connect.)
@@ -265,14 +266,14 @@ ctx.rpc.register({
 
 ```js [scripts/build.mjs]
 import { createBuild } from 'devframe/adapters/build'
-import dataInspectorFrame from '../src/data-inspector.ts'
+import dataInspectorFrame from '../src/node/data-inspector.ts'
 
 await createBuild(dataInspectorFrame, { outDir: 'dist-static' })
 ```
 
 ```sh
-npx vite build          # refresh dist/client
-node scripts/build.mjs  # → dist-static/
+npx vite build --config app/vite.config.ts   # refresh dist/client
+node scripts/build.mjs                        # → dist-static/
 ```
 
 Serve `dist-static/` anywhere and the meta list renders from the baked snapshot, no Node in sight. `query` takes an argument, so it still needs the live node side (next), or you can bake specific inputs ([Client Assets](/guide/client-assets)).
@@ -281,16 +282,16 @@ Serve `dist-static/` anywhere and the meta list renders from the baked snapshot,
 
 The definition never depended on Vite. `createDevServer` runs the tool on its own, serving the UI from `clientAssets` and answering RPC live:
 
-```js [scripts/serve.mjs]
+```js [playgrounds/serve.mjs]
 import { createDevServer } from 'devframe/adapters/dev'
-import dataInspectorFrame from '../src/data-inspector.ts'
+import dataInspectorFrame from '../src/node/data-inspector.ts'
 
 await createDevServer(dataInspectorFrame, { openBrowser: true })
 ```
 
 ```sh
-npx vite build
-node scripts/serve.mjs
+npx vite build --config app/vite.config.ts
+node playgrounds/serve.mjs
 ```
 
 Same UI, same live calls, no bundler in the loop: this is what you'd drop into your own Node program.
@@ -302,7 +303,7 @@ Finally, wrap that dev server in a CLI. `devframe/adapters/cac` turns a devframe
 ```js [bin.mjs]
 #!/usr/bin/env node
 import { createCac } from 'devframe/adapters/cac'
-import dataInspectorFrame from './src/data-inspector.ts'
+import dataInspectorFrame from './src/node/data-inspector.ts'
 
 createCac(dataInspectorFrame).parse()
 ```
diff --git a/knip.jsonc b/knip.jsonc
index 92d0782e2..24548d877 100644
--- a/knip.jsonc
+++ b/knip.jsonc
@@ -19,6 +19,7 @@
   // the default export is the conventional single-devframe import. Service
   // packages (`create<X>Service`) follow the same rule.
   "ignoreIssues": {
+    "plugins/*/src/node/index.ts": ["duplicates"],
     "plugins/*/src/index.ts": ["duplicates"],
     "services/*/src/index.ts": ["duplicates"],
     // Deprecated rename aliases (old name re-exported next to its canonical
@@ -209,10 +210,11 @@
       // the monorepo. Repeat the `plugins/*` entry glob (a workspace config
       // replaces, not merges, it).
       "entry": [
-        "src/{index,cli,vite,constants,types}.ts",
-        "src/{client,node,rpc,inject,engine,registry}/index.ts"
+        "src/node/{index,setup,cli}.ts",
+        "src/node/rpc/index.ts",
+        "app/**/*.stories.@(ts|tsx)"
       ],
-      "ignoreDependencies": ["@devframes/plugin-inspect--assets"]
+      "ignoreDependencies": ["@devframes/plugin-inspect--assets", "@devframes/vite"]
     },
     "plugins/inspect/assets-pkg": {
       // Assets-only package: no source, just a prebuilt `dist` produced by
@@ -225,32 +227,60 @@
     // so knip can't see the dev-only workspace link. A workspace config
     // replaces (not merges) the `plugins/*` glob's `entry`, so repeat it.
     "plugins/og": {
-      "entry": ["src/{index,cli,vite,constants,types}.ts", "src/{client,node,rpc,inject,engine,registry}/index.ts"],
-      "ignoreDependencies": ["@devframes/plugin-og--assets"]
+      "entry": [
+        "src/node/{index,setup,cli}.ts",
+        "src/node/rpc/index.ts",
+        "app/**/*.stories.@(ts|tsx)"
+      ],
+      "ignoreDependencies": ["@devframes/plugin-og--assets", "@devframes/vite"]
     },
     "plugins/og/assets-pkg": { "entry": [], "project": [] },
     "plugins/data-inspector": {
-      "entry": ["src/{index,cli,vite,constants,types}.ts", "src/{client,node,rpc,inject,engine,registry}/index.ts"],
-      "ignoreDependencies": ["@devframes/plugin-data-inspector--assets"]
+      "entry": [
+        "src/node/{index,setup,cli}.ts",
+        "src/node/rpc/index.ts",
+        "src/node/{engine,registry}/index.ts",
+        "src/inject/index.ts",
+        "app/**/*.stories.@(ts|tsx)"
+      ],
+      "ignoreDependencies": ["@devframes/plugin-data-inspector--assets", "@devframes/vite"]
     },
     "plugins/data-inspector/assets-pkg": { "entry": [], "project": [] },
     "plugins/code-server": {
-      "entry": ["src/{index,cli,vite,constants,types}.ts", "src/{client,node,rpc,inject,engine,registry}/index.ts"],
+      "entry": [
+        "src/node/{index,setup,cli,constants,types,vite}.ts",
+        "src/node/rpc/index.ts",
+        "app/**/*.stories.@(ts|tsx)"
+      ],
       "ignoreDependencies": ["@devframes/plugin-code-server--assets"]
     },
     "plugins/code-server/assets-pkg": { "entry": [], "project": [] },
     "plugins/assets": {
-      "entry": ["src/{index,cli,vite,constants,types}.ts", "src/{client,node,rpc,inject,engine,registry}/index.ts"],
-      "ignoreDependencies": ["@devframes/plugin-assets--assets"]
+      "entry": [
+        "src/node/{index,setup,cli,constants,types}.ts",
+        "src/node/rpc/index.ts",
+        "app/**/*.stories.@(ts|tsx)"
+      ],
+      "ignoreDependencies": ["@devframes/plugin-assets--assets", "@devframes/vite"]
     },
     "plugins/assets/assets-pkg": { "entry": [], "project": [] },
     "plugins/messages": {
-      "entry": ["src/{index,cli,vite,constants,types}.ts", "src/{client,node,rpc,inject,engine,registry}/index.ts"],
-      "ignoreDependencies": ["@devframes/plugin-messages--assets"]
+      "entry": [
+        "src/node/{index,setup,cli,constants}.ts",
+        "src/node/rpc/index.ts",
+        "app/client/index.ts",
+        "app/**/*.stories.@(ts|tsx)"
+      ],
+      "ignoreDependencies": ["@devframes/plugin-messages--assets", "@devframes/vite"]
     },
     "plugins/messages/assets-pkg": { "entry": [], "project": [] },
     "plugins/terminals": {
-      "entry": ["src/{index,cli,vite,constants,types}.ts", "src/{client,node,rpc,inject,engine,registry}/index.ts"],
+      "entry": [
+        "src/node/{index,setup,cli,constants,types,vite}.ts",
+        "src/node/rpc/index.ts",
+        "app/client/index.ts",
+        "app/**/*.stories.@(ts|tsx)"
+      ],
       "ignoreDependencies": ["@devframes/plugin-terminals--assets"]
     },
     "plugins/terminals/assets-pkg": { "entry": [], "project": [] },
@@ -269,19 +299,24 @@
       // `plugins/*` glob's `entry` above, so repeat that pattern here
       // alongside the stories.
       "entry": [
-        "src/{index,cli,vite,constants,types}.ts",
-        "src/{client,node,rpc,inject,engine,registry}/index.ts",
-        "src/**/*.stories.tsx"
+        "src/node/{index,setup,cli}.ts",
+        "src/node/rpc/index.ts",
+        "src/client-script/index.ts",
+        "app/**/*.stories.tsx"
       ],
-      "ignoreDependencies": ["@devframes/plugin-a11y--assets"]
+      "ignoreDependencies": ["@devframes/plugin-a11y--assets", "@devframes/vite"]
     },
     "plugins/git": {
-      // The React client build's root sits at `src/client` (`next dev
-      // src/client`), not the workspace root, so knip's default PostCSS
-      // config glob (workspace-root `postcss.config.*`) misses it.
+      // The React client build's root sits at `app/` (`next dev app`), not the
+      // workspace root, so knip's default PostCSS config glob (workspace-root
+      // `postcss.config.*`) misses it.
       "postcss": {
-        "config": ["src/client/postcss.config.mjs"]
+        "config": ["app/postcss.config.mjs"]
       },
+      "entry": [
+        "src/node/{index,cli}.ts",
+        "app/**/*.stories.@(ts|tsx)"
+      ],
       "ignoreDependencies": ["@devframes/plugin-git--assets"]
     }
   }
diff --git a/plugins/a11y/.storybook/main.ts b/plugins/a11y/.storybook/main.ts
index f3fb6eab1..a04d03afe 100644
--- a/plugins/a11y/.storybook/main.ts
+++ b/plugins/a11y/.storybook/main.ts
@@ -4,7 +4,7 @@ import { mergeConfig } from 'vite'
 import { alias } from '../../../alias'
 
 const config: StorybookConfig = {
-  stories: ['../src/**/*.stories.@(ts|tsx)'],
+  stories: ['../{src,app}/**/*.stories.@(ts|tsx)'],
   framework: {
     name: 'storybook-solidjs-vite',
     options: {},
diff --git a/plugins/a11y/.storybook/preview.tsx b/plugins/a11y/.storybook/preview.tsx
index 4e9db35ef..0dabc3eb2 100644
--- a/plugins/a11y/.storybook/preview.tsx
+++ b/plugins/a11y/.storybook/preview.tsx
@@ -1,7 +1,7 @@
 import type { Preview } from 'storybook-solidjs-vite'
 import 'virtual:uno.css'
 import '@antfu/design/styles.css'
-import '../src/spa/styles.css'
+import '../app/styles.css'
 
 // Drive the shared `@antfu/design` tokens off the toolbar theme toggle: dark mode
 // is the `.dark` class on `<html>`, and the canvas takes the semantic
diff --git a/plugins/a11y/src/spa/app.tsx b/plugins/a11y/app/app.tsx
similarity index 99%
rename from plugins/a11y/src/spa/app.tsx
rename to plugins/a11y/app/app.tsx
index 9226340cd..8cc919804 100644
--- a/plugins/a11y/src/spa/app.tsx
+++ b/plugins/a11y/app/app.tsx
@@ -1,8 +1,8 @@
-import type { Impact, PinTarget, Violation, ViolationNode } from '../shared/protocol.ts'
+import type { Impact, PinTarget, Violation, ViolationNode } from '../src/shared/protocol.ts'
 import type { SelectedItem } from './lib/fix-prompt.ts'
 import type { RouteGroupModel, SelectionApi } from './lib/violation-view.ts'
 import { batch, createEffect, createMemo, createSignal, Match, on, Show, Switch } from 'solid-js'
-import { emptyCounts } from '../shared/protocol.ts'
+import { emptyCounts } from '../src/shared/protocol.ts'
 import { EmptyState } from './components/EmptyState.tsx'
 import { FixPromptsDialog } from './components/FixPromptsDialog.tsx'
 import { Header } from './components/Header.tsx'
diff --git a/plugins/a11y/src/spa/components/EmptyState.stories.tsx b/plugins/a11y/app/components/EmptyState.stories.tsx
similarity index 100%
rename from plugins/a11y/src/spa/components/EmptyState.stories.tsx
rename to plugins/a11y/app/components/EmptyState.stories.tsx
diff --git a/plugins/a11y/src/spa/components/EmptyState.tsx b/plugins/a11y/app/components/EmptyState.tsx
similarity index 100%
rename from plugins/a11y/src/spa/components/EmptyState.tsx
rename to plugins/a11y/app/components/EmptyState.tsx
diff --git a/plugins/a11y/src/spa/components/FixPromptsDialog.stories.tsx b/plugins/a11y/app/components/FixPromptsDialog.stories.tsx
similarity index 100%
rename from plugins/a11y/src/spa/components/FixPromptsDialog.stories.tsx
rename to plugins/a11y/app/components/FixPromptsDialog.stories.tsx
diff --git a/plugins/a11y/src/spa/components/FixPromptsDialog.tsx b/plugins/a11y/app/components/FixPromptsDialog.tsx
similarity index 100%
rename from plugins/a11y/src/spa/components/FixPromptsDialog.tsx
rename to plugins/a11y/app/components/FixPromptsDialog.tsx
diff --git a/plugins/a11y/src/spa/components/Header.stories.tsx b/plugins/a11y/app/components/Header.stories.tsx
similarity index 100%
rename from plugins/a11y/src/spa/components/Header.stories.tsx
rename to plugins/a11y/app/components/Header.stories.tsx
diff --git a/plugins/a11y/src/spa/components/Header.tsx b/plugins/a11y/app/components/Header.tsx
similarity index 100%
rename from plugins/a11y/src/spa/components/Header.tsx
rename to plugins/a11y/app/components/Header.tsx
diff --git a/plugins/a11y/src/spa/components/MetaLine.stories.tsx b/plugins/a11y/app/components/MetaLine.stories.tsx
similarity index 100%
rename from plugins/a11y/src/spa/components/MetaLine.stories.tsx
rename to plugins/a11y/app/components/MetaLine.stories.tsx
diff --git a/plugins/a11y/src/spa/components/MetaLine.tsx b/plugins/a11y/app/components/MetaLine.tsx
similarity index 100%
rename from plugins/a11y/src/spa/components/MetaLine.tsx
rename to plugins/a11y/app/components/MetaLine.tsx
diff --git a/plugins/a11y/src/spa/components/RouteGroup.stories.tsx b/plugins/a11y/app/components/RouteGroup.stories.tsx
similarity index 100%
rename from plugins/a11y/src/spa/components/RouteGroup.stories.tsx
rename to plugins/a11y/app/components/RouteGroup.stories.tsx
diff --git a/plugins/a11y/src/spa/components/RouteGroup.tsx b/plugins/a11y/app/components/RouteGroup.tsx
similarity index 97%
rename from plugins/a11y/src/spa/components/RouteGroup.tsx
rename to plugins/a11y/app/components/RouteGroup.tsx
index c91c57f4c..c3c5c74f1 100644
--- a/plugins/a11y/src/spa/components/RouteGroup.tsx
+++ b/plugins/a11y/app/components/RouteGroup.tsx
@@ -1,4 +1,4 @@
-import type { ScanReport, Violation } from '../../shared/protocol.ts'
+import type { ScanReport, Violation } from '../../src/shared/protocol.ts'
 import type { A11yChannel } from '../lib/channel.ts'
 import type { SelectionApi } from '../lib/violation-view.ts'
 import { For, Show } from 'solid-js'
diff --git a/plugins/a11y/src/spa/components/Summary.stories.tsx b/plugins/a11y/app/components/Summary.stories.tsx
similarity index 100%
rename from plugins/a11y/src/spa/components/Summary.stories.tsx
rename to plugins/a11y/app/components/Summary.stories.tsx
diff --git a/plugins/a11y/src/spa/components/Summary.tsx b/plugins/a11y/app/components/Summary.tsx
similarity index 97%
rename from plugins/a11y/src/spa/components/Summary.tsx
rename to plugins/a11y/app/components/Summary.tsx
index a04f233eb..50f6ea9fa 100644
--- a/plugins/a11y/src/spa/components/Summary.tsx
+++ b/plugins/a11y/app/components/Summary.tsx
@@ -1,4 +1,4 @@
-import type { Impact } from '../../shared/protocol.ts'
+import type { Impact } from '../../src/shared/protocol.ts'
 import { For } from 'solid-js'
 import { IMPACT_COLOR, IMPACT_LABEL } from '../lib/impact.ts'
 
diff --git a/plugins/a11y/src/spa/components/SummaryBar.stories.tsx b/plugins/a11y/app/components/SummaryBar.stories.tsx
similarity index 100%
rename from plugins/a11y/src/spa/components/SummaryBar.stories.tsx
rename to plugins/a11y/app/components/SummaryBar.stories.tsx
diff --git a/plugins/a11y/src/spa/components/SummaryBar.tsx b/plugins/a11y/app/components/SummaryBar.tsx
similarity index 98%
rename from plugins/a11y/src/spa/components/SummaryBar.tsx
rename to plugins/a11y/app/components/SummaryBar.tsx
index dc70547d6..81827c423 100644
--- a/plugins/a11y/src/spa/components/SummaryBar.tsx
+++ b/plugins/a11y/app/components/SummaryBar.tsx
@@ -1,4 +1,4 @@
-import type { Impact } from '../../shared/protocol.ts'
+import type { Impact } from '../../src/shared/protocol.ts'
 import { Show } from 'solid-js'
 import { Summary } from './Summary.tsx'
 import { Switch } from './Switch.tsx'
diff --git a/plugins/a11y/src/spa/components/Switch.stories.tsx b/plugins/a11y/app/components/Switch.stories.tsx
similarity index 100%
rename from plugins/a11y/src/spa/components/Switch.stories.tsx
rename to plugins/a11y/app/components/Switch.stories.tsx
diff --git a/plugins/a11y/src/spa/components/Switch.tsx b/plugins/a11y/app/components/Switch.tsx
similarity index 100%
rename from plugins/a11y/src/spa/components/Switch.tsx
rename to plugins/a11y/app/components/Switch.tsx
diff --git a/plugins/a11y/src/spa/components/ViolationList.stories.tsx b/plugins/a11y/app/components/ViolationList.stories.tsx
similarity index 100%
rename from plugins/a11y/src/spa/components/ViolationList.stories.tsx
rename to plugins/a11y/app/components/ViolationList.stories.tsx
diff --git a/plugins/a11y/src/spa/components/ViolationList.tsx b/plugins/a11y/app/components/ViolationList.tsx
similarity index 100%
rename from plugins/a11y/src/spa/components/ViolationList.tsx
rename to plugins/a11y/app/components/ViolationList.tsx
diff --git a/plugins/a11y/src/spa/components/ViolationRow.stories.tsx b/plugins/a11y/app/components/ViolationRow.stories.tsx
similarity index 100%
rename from plugins/a11y/src/spa/components/ViolationRow.stories.tsx
rename to plugins/a11y/app/components/ViolationRow.stories.tsx
diff --git a/plugins/a11y/src/spa/components/ViolationRow.tsx b/plugins/a11y/app/components/ViolationRow.tsx
similarity index 98%
rename from plugins/a11y/src/spa/components/ViolationRow.tsx
rename to plugins/a11y/app/components/ViolationRow.tsx
index 5524c6cf9..de00674fd 100644
--- a/plugins/a11y/src/spa/components/ViolationRow.tsx
+++ b/plugins/a11y/app/components/ViolationRow.tsx
@@ -1,4 +1,4 @@
-import type { Violation } from '../../shared/protocol.ts'
+import type { Violation } from '../../src/shared/protocol.ts'
 import type { A11yChannel } from '../lib/channel.ts'
 import { For, Show } from 'solid-js'
 import { IMPACT_COLOR, IMPACT_LABEL } from '../lib/impact.ts'
diff --git a/plugins/a11y/src/spa/components/_fixtures.ts b/plugins/a11y/app/components/_fixtures.ts
similarity index 93%
rename from plugins/a11y/src/spa/components/_fixtures.ts
rename to plugins/a11y/app/components/_fixtures.ts
index 3e36f67fd..54d30e7a7 100644
--- a/plugins/a11y/src/spa/components/_fixtures.ts
+++ b/plugins/a11y/app/components/_fixtures.ts
@@ -1,7 +1,7 @@
-import type { ScanReport, Violation } from '../../shared/protocol.ts'
+import type { ScanReport, Violation } from '../../src/shared/protocol.ts'
 import type { A11yChannel } from '../lib/channel.ts'
 import type { RouteGroupModel, SelectionApi } from '../lib/violation-view.ts'
-import { emptyCounts } from '../../shared/protocol.ts'
+import { emptyCounts } from '../../src/shared/protocol.ts'
 
 function noop() {}
 
diff --git a/plugins/assets/src/spa/app/design.ts b/plugins/a11y/app/design.ts
similarity index 75%
rename from plugins/assets/src/spa/app/design.ts
rename to plugins/a11y/app/design.ts
index af3b99e68..0bf9debcd 100644
--- a/plugins/assets/src/spa/app/design.ts
+++ b/plugins/a11y/app/design.ts
@@ -1,3 +1,3 @@
 // Re-exports the shared devframe class-helper builders (see
 // `design/design.ts`) so this surface stays in lockstep with every other.
-export * from '../../../../../design/design'
+export * from '../../../design/design'
diff --git a/plugins/a11y/src/spa/index.html b/plugins/a11y/app/index.html
similarity index 100%
rename from plugins/a11y/src/spa/index.html
rename to plugins/a11y/app/index.html
diff --git a/plugins/a11y/src/spa/lib/channel.ts b/plugins/a11y/app/lib/channel.ts
similarity index 97%
rename from plugins/a11y/src/spa/lib/channel.ts
rename to plugins/a11y/app/lib/channel.ts
index cb0e92c07..7b416fe89 100644
--- a/plugins/a11y/src/spa/lib/channel.ts
+++ b/plugins/a11y/app/lib/channel.ts
@@ -1,8 +1,8 @@
 import type { Accessor } from 'solid-js'
-import type { A11yChannelProtocol, A11yState, PageScriptConfig, PinTarget } from '../../shared/protocol.ts'
+import type { A11yChannelProtocol, A11yState, PageScriptConfig, PinTarget } from '../../src/shared/protocol.ts'
 import { connectPanelChannel } from 'devframe/in-page-channel'
 import { createSignal, onCleanup } from 'solid-js'
-import { A11Y_CHANNEL } from '../../shared/protocol.ts'
+import { A11Y_CHANNEL } from '../../src/shared/protocol.ts'
 
 export interface A11yChannel {
   /** Latest full route → report aggregate, or `null` until the page script reports in. */
diff --git a/plugins/a11y/src/spa/lib/devframe.ts b/plugins/a11y/app/lib/devframe.ts
similarity index 96%
rename from plugins/a11y/src/spa/lib/devframe.ts
rename to plugins/a11y/app/lib/devframe.ts
index 3a528ea62..2beacf3ea 100644
--- a/plugins/a11y/src/spa/lib/devframe.ts
+++ b/plugins/a11y/app/lib/devframe.ts
@@ -1,9 +1,9 @@
 import type { DevframeConnectionStatus } from 'devframe/client'
 import type { Accessor } from 'solid-js'
-import type { Impact, PageScriptConfig } from '../../shared/protocol.ts'
+import type { Impact, PageScriptConfig } from '../../src/shared/protocol.ts'
 import { connectDevframe } from 'devframe/client'
 import { createSignal } from 'solid-js'
-import { A11Y_DOCKS_ACTIVE_KEY } from '../../shared/protocol.ts'
+import { A11Y_DOCKS_ACTIVE_KEY } from '../../src/shared/protocol.ts'
 
 interface ImpactMeta {
   id: Impact
diff --git a/plugins/a11y/src/spa/lib/fix-prompt.ts b/plugins/a11y/app/lib/fix-prompt.ts
similarity index 97%
rename from plugins/a11y/src/spa/lib/fix-prompt.ts
rename to plugins/a11y/app/lib/fix-prompt.ts
index 0e439baa6..779010608 100644
--- a/plugins/a11y/src/spa/lib/fix-prompt.ts
+++ b/plugins/a11y/app/lib/fix-prompt.ts
@@ -1,4 +1,4 @@
-import type { Violation } from '../../shared/protocol.ts'
+import type { Violation } from '../../src/shared/protocol.ts'
 
 /** One selected violation, with the route context it was found on. */
 export interface SelectedItem {
diff --git a/plugins/a11y/src/spa/lib/impact.ts b/plugins/a11y/app/lib/impact.ts
similarity index 71%
rename from plugins/a11y/src/spa/lib/impact.ts
rename to plugins/a11y/app/lib/impact.ts
index bae18453f..6228d457c 100644
--- a/plugins/a11y/src/spa/lib/impact.ts
+++ b/plugins/a11y/app/lib/impact.ts
@@ -1,8 +1,8 @@
-import type { Impact } from '../../shared/protocol.ts'
+import type { Impact } from '../../src/shared/protocol.ts'
 
 // The severity palette is shared with the page script, a single source in the
 // protocol module so the panel and the highlight ring never drift.
-export { IMPACT_COLOR } from '../../shared/protocol.ts'
+export { IMPACT_COLOR } from '../../src/shared/protocol.ts'
 
 export const IMPACT_LABEL: Record<Impact, string> = {
   critical: 'Critical',
diff --git a/plugins/a11y/src/spa/lib/violation-view.ts b/plugins/a11y/app/lib/violation-view.ts
similarity index 90%
rename from plugins/a11y/src/spa/lib/violation-view.ts
rename to plugins/a11y/app/lib/violation-view.ts
index ef13f482d..49ec1b8d6 100644
--- a/plugins/a11y/src/spa/lib/violation-view.ts
+++ b/plugins/a11y/app/lib/violation-view.ts
@@ -1,4 +1,4 @@
-import type { ScanReport, Violation } from '../../shared/protocol.ts'
+import type { ScanReport, Violation } from '../../src/shared/protocol.ts'
 
 /** Controller the violation list uses to read/mutate the selection. */
 export interface SelectionApi {
diff --git a/plugins/a11y/src/spa/main.tsx b/plugins/a11y/app/main.tsx
similarity index 100%
rename from plugins/a11y/src/spa/main.tsx
rename to plugins/a11y/app/main.tsx
diff --git a/plugins/a11y/src/spa/styles.css b/plugins/a11y/app/styles.css
similarity index 100%
rename from plugins/a11y/src/spa/styles.css
rename to plugins/a11y/app/styles.css
diff --git a/plugins/a11y/app/vite.config.ts b/plugins/a11y/app/vite.config.ts
new file mode 100644
index 000000000..e588e2bac
--- /dev/null
+++ b/plugins/a11y/app/vite.config.ts
@@ -0,0 +1,54 @@
+import type { Server } from 'node:http'
+import type { Plugin } from 'vite'
+import { fileURLToPath } from 'node:url'
+import createA11yDevframe from '@devframes/plugin-a11y'
+import { initDevframe } from 'devframe/initiate'
+import { resolveBasePath } from 'devframe/internal'
+import UnoCSS from 'unocss/vite'
+import { defineConfig } from 'vite'
+import solid from 'vite-plugin-solid'
+import { alias } from '../../../alias'
+
+/**
+ * Serve-only plugin that bridges the a11y node side (RPC + WebSocket +
+ * `__connection.json`) onto Vite's own dev server under the devframe base
+ * path, mounted as a **post** middleware so Vite serves the HMR SPA first and
+ * the devframe host only answers the routes it owns. Inert during `vite build`.
+ */
+function a11yDevBridge(): Plugin {
+  const devframe = createA11yDevframe()
+  return {
+    name: 'a11y-dev-bridge',
+    apply: 'serve',
+    configureServer(server) {
+      const instance = initDevframe(devframe, {
+        base: resolveBasePath(devframe, 'hosted'),
+        distDir: false,
+        server: server.httpServer as Server,
+        auth: false,
+      })
+      return () => server.middlewares.use(instance.nodeMiddleware)
+    },
+  }
+}
+
+/**
+ * `base: './'` for the build keeps the mount path portable: the same `app`
+ * output works whether devframe serves it at `/` (standalone) or
+ * `/__devframes_plugin_a11y/` (mounted in a hub). `connectDevframe` resolves
+ * its connection meta relative to `document.baseURI` to match.
+ *
+ * In `vite dev` the panel is served under the devframe base path so its
+ * `document.baseURI` matches production, and {@link a11yDevBridge} bridges the
+ * node side there with HMR.
+ */
+export default defineConfig(({ command }) => ({
+  base: command === 'serve' ? resolveBasePath(createA11yDevframe(), 'hosted') : './',
+  root: fileURLToPath(new URL('.', import.meta.url)),
+  resolve: { alias },
+  plugins: [solid(), UnoCSS(), a11yDevBridge()],
+  build: {
+    outDir: fileURLToPath(new URL('../assets-pkg/dist', import.meta.url)),
+    emptyOutDir: true,
+  },
+}))
diff --git a/plugins/a11y/bin.mjs b/plugins/a11y/bin.mjs
index 8e7267a04..fb3c9d931 100755
--- a/plugins/a11y/bin.mjs
+++ b/plugins/a11y/bin.mjs
@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 import process from 'node:process'
-import { createA11yCli } from './dist/cli.mjs'
+import { createA11yCli } from './dist/node/cli.mjs'
 
 async function main() {
   const cli = createA11yCli()
diff --git a/plugins/a11y/package.json b/plugins/a11y/package.json
index 582b3ff85..fa80c33d6 100644
--- a/plugins/a11y/package.json
+++ b/plugins/a11y/package.json
@@ -22,13 +22,13 @@
   ],
   "sideEffects": false,
   "exports": {
-    ".": "./dist/index.mjs",
-    "./client": "./dist/client/index.mjs",
-    "./cli": "./dist/cli.mjs",
-    "./node": "./dist/node/index.mjs",
+    ".": "./dist/node/index.mjs",
+    "./client-script": "./dist/client-script/index.mjs",
+    "./cli": "./dist/node/cli.mjs",
+    "./node": "./dist/node/setup.mjs",
     "./package.json": "./package.json"
   },
-  "types": "./dist/index.d.mts",
+  "types": "./dist/node/index.d.mts",
   "bin": {
     "devframes_plugin_a11y": "./bin.mjs"
   },
@@ -37,16 +37,15 @@
     "dist"
   ],
   "scripts": {
-    "build": "tsdown && vite build --config src/spa/vite.config.ts && vite build --config src/inject/vite.config.ts",
-    "build:spa": "vite build --config src/spa/vite.config.ts",
-    "build:inject": "vite build --config src/inject/vite.config.ts",
+    "build": "tsdown && vite build --config app/vite.config.ts",
+    "build:app": "vite build --config app/vite.config.ts",
     "watch": "tsdown --watch",
-    "dev": "node bin.mjs",
+    "dev": "vite --config app/vite.config.ts --host",
+    "play": "pnpm run build && node playgrounds/server.mjs",
+    "play:build": "pnpm run build && pnpm run cli:build && node playgrounds/server.mjs build",
     "storybook": "storybook dev -p 6015",
     "build-storybook": "storybook build",
     "cli:build": "node bin.mjs build --out-dir dist/static",
-    "demo": "node demo/server.mjs",
-    "demo:build": "node demo/server.mjs build",
     "typecheck": "tsc --noEmit",
     "prepack": "turbo run build --filter=@devframes/plugin-a11y",
     "test": "vitest run"
@@ -70,6 +69,7 @@
   "devDependencies": {
     "@antfu/design": "catalog:frontend",
     "@devframes/plugin-a11y--assets": "workspace:*",
+    "@devframes/vite": "workspace:*",
     "axe-core": "catalog:frontend",
     "colorjs.io": "catalog:frontend",
     "devframe": "workspace:*",
diff --git a/plugins/a11y/demo/index.html b/plugins/a11y/playgrounds/index.html
similarity index 99%
rename from plugins/a11y/demo/index.html
rename to plugins/a11y/playgrounds/index.html
index 5c0fda45d..8b05338db 100644
--- a/plugins/a11y/demo/index.html
+++ b/plugins/a11y/playgrounds/index.html
@@ -161,6 +161,6 @@ <h2>This week's roasts</h2>
     </aside>
 
     <!-- The a11y page script: scans this page and answers the panel. -->
-    <script type="module" src="/__df-inject/inject.js"></script>
+    <script type="module" src="/__df-inject/index.mjs"></script>
   </body>
 </html>
diff --git a/plugins/a11y/demo/server.mjs b/plugins/a11y/playgrounds/server.mjs
similarity index 86%
rename from plugins/a11y/demo/server.mjs
rename to plugins/a11y/playgrounds/server.mjs
index 50d17da52..47d6b2863 100644
--- a/plugins/a11y/demo/server.mjs
+++ b/plugins/a11y/playgrounds/server.mjs
@@ -6,13 +6,13 @@
  * panel (devtools iframe) can handshake their in-page channel:
  *
  *   GET  /                              → the demo page (intentional a11y bugs)
- *   GET  /__df-inject/inject.js         → the page script bundle
+ *   GET  /__df-inject/index.mjs        → the page script bundle
  *   GET  /__devframes_plugin_a11y/**  → the Solid panel SPA
  *
  * Two modes prove the plugin works either way:
  *
- *   node demo/server.mjs          dev    → live WebSocket RPC (`assets-pkg/dist`)
- *   node demo/server.mjs build    static → baked RPC dump,    (`dist/static`)
+ *   node playgrounds/server.mjs          dev    → live WebSocket RPC (`assets-pkg/dist`)
+ *   node playgrounds/server.mjs build    static → baked RPC dump,    (`dist/static`)
  *
  * The scan/highlight loop is identical in both: it rides the in-page channel,
  * not the devframe backend.
@@ -27,7 +27,7 @@ import { getPort } from 'devframe/utils/get-port'
 import { mountStaticHandler } from 'devframe/utils/serve-static'
 import { H3, toNodeHandler } from 'h3'
 import { resolve } from 'pathe'
-import createA11yDevframe from '../src/index.ts'
+import createA11yDevframe from '../src/node/index.ts'
 
 const HERE = fileURLToPath(new URL('.', import.meta.url))
 const ROOT = resolve(HERE, '..')
@@ -35,12 +35,12 @@ const ROOT = resolve(HERE, '..')
 const devframe = createA11yDevframe()
 const mode = process.argv[2] === 'build' ? 'build' : 'dev'
 const basePath = devframe.basePath
-const injectDir = resolve(ROOT, 'dist/inject')
+const injectDir = resolve(ROOT, 'dist/client-script')
 const panelDir = mode === 'build' ? resolve(ROOT, 'dist/static') : resolve(ROOT, 'assets-pkg/dist')
 
 function requireBuilt(file, hint) {
   if (!existsSync(file)) {
-    console.error(`\n[a11y-inspector demo] missing ${file}\n  → run \`${hint}\` first.\n`)
+    console.error(`\n[a11y-inspector playground] missing ${file}\n  → run \`${hint}\` first.\n`)
     process.exit(1)
   }
 }
@@ -56,7 +56,7 @@ function banner(origin) {
 }
 
 async function main() {
-  requireBuilt(resolve(injectDir, 'inject.js'), 'pnpm -C plugins/a11y build')
+  requireBuilt(resolve(injectDir, 'index.mjs'), 'pnpm -C plugins/a11y build')
   requireBuilt(
     resolve(panelDir, 'index.html'),
     mode === 'build'
diff --git a/plugins/a11y/src/inject/index.ts b/plugins/a11y/src/client-script/index.ts
similarity index 100%
rename from plugins/a11y/src/inject/index.ts
rename to plugins/a11y/src/client-script/index.ts
diff --git a/plugins/a11y/src/inject/messages.ts b/plugins/a11y/src/client-script/messages.ts
similarity index 100%
rename from plugins/a11y/src/inject/messages.ts
rename to plugins/a11y/src/client-script/messages.ts
diff --git a/plugins/a11y/src/inject/overlay.ts b/plugins/a11y/src/client-script/overlay.ts
similarity index 100%
rename from plugins/a11y/src/inject/overlay.ts
rename to plugins/a11y/src/client-script/overlay.ts
diff --git a/plugins/a11y/src/inject/scanner.ts b/plugins/a11y/src/client-script/scanner.ts
similarity index 100%
rename from plugins/a11y/src/inject/scanner.ts
rename to plugins/a11y/src/client-script/scanner.ts
diff --git a/plugins/a11y/src/client/index.ts b/plugins/a11y/src/client/index.ts
deleted file mode 100644
index 38e7883a7..000000000
--- a/plugins/a11y/src/client/index.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { DevframeRpcClient, DevframeRpcClientOptions } from 'devframe/client'
-import { connectDevframe } from 'devframe/client'
-
-export type { DevframeRpcClient }
-export type { Impact, ScanReport, Violation, ViolationNode } from '../shared/protocol.ts'
-
-/**
- * Connect to the a11y inspector's devframe backend. A thin, typed wrapper
- * around devframe's {@link connectDevframe}; the panel derives its base from
- * `document.baseURI`, so no options are required in the common case. The
- * live scan/highlight loop itself rides the same-origin in-page channel,
- * independent of this connection.
- */
-export function connectA11y(options?: DevframeRpcClientOptions): Promise<DevframeRpcClient> {
-  return connectDevframe(options)
-}
diff --git a/plugins/a11y/src/client/shims.d.ts b/plugins/a11y/src/client/shims.d.ts
deleted file mode 100644
index 12545710f..000000000
--- a/plugins/a11y/src/client/shims.d.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-// Side-effect style imports used by the Solid SPA entry.
-declare module '*.css' {}
-declare module 'virtual:uno.css' {}
diff --git a/plugins/a11y/src/index.ts b/plugins/a11y/src/index.ts
deleted file mode 100644
index 38b1d4238..000000000
--- a/plugins/a11y/src/index.ts
+++ /dev/null
@@ -1,116 +0,0 @@
-import type { DevframeDefinition, RemoteAssets } from 'devframe'
-import { fileURLToPath } from 'node:url'
-import { defineDevframe } from 'devframe'
-import pkg from '../package.json' with { type: 'json' }
-import { setupA11y } from './node/index.ts'
-
-/** Default devframe id, driving the standalone CLI command and the hosted mount path `/__<id>/`. */
-const DEFAULT_ID = 'devframes_plugin_a11y'
-const BASE_PATH = '/__devframes_plugin_a11y/'
-
-// The Solid panel SPA ships in the lockstep `@devframes/plugin-a11y--assets`
-// package, served on demand through devframe's remote-assets back-proxy. The
-// definition's `importMetaUrl` (below) supplies the default `resolveFrom`, so a
-// locally installed copy (a workspace link here) is served with zero network.
-// The page-script bundle (`dist/inject`, below) stays here.
-const distDir: RemoteAssets = {
-  package: `${pkg.name}--assets`,
-  version: pkg.version,
-}
-
-/**
- * Absolute path to the built **page script** module (`dist/inject/inject.js`),
- * the dock **client script** the client runtime imports into the host page to
- * scan it (its default export boots the page script; importing it does too).
- *
- * The definition already declares this as its dock `clientScript`, so a hub
- * serves it with no host wiring. Exported for hosts that mount the module
- * themselves (e.g. via `/@fs/` under Vite). Requires the built bundle
- * (`pnpm -C plugins/a11y build`).
- */
-export const a11yPageScriptBundlePath: string = fileURLToPath(new URL('../dist/inject/inject.js', import.meta.url))
-
-/** @deprecated Renamed; use {@link a11yPageScriptBundlePath}. */
-export const a11yAgentBundlePath: string = a11yPageScriptBundlePath
-
-export interface A11yDevframeOptions {
-  /** Override the devframe id (and the default CLI command / mount path). */
-  id?: string
-  /** Override the display name shown in a host dock. */
-  name?: string
-  /** Override the dock icon. */
-  icon?: string
-  /**
-   * Override the mount path. Defaults to `/__devframes_plugin_a11y/` so the
-   * panel iframe shares an origin with the host page it scans.
-   */
-  basePath?: string
-  /** Preferred standalone CLI port. */
-  port?: number
-  /**
-   * Rescan on debounced user interaction (mouse/keyboard/touch), on top of the
-   * DOM MutationObserver. Default `true`.
-   */
-  autoScan?: boolean
-  /** Log newly-appeared violations to the browser console. Default `true`. */
-  logIssues?: boolean
-  /**
-   * Auto-pin all of a route's violations the first time it's scanned.
-   * Default `false`.
-   */
-  defaultHighlight?: boolean
-  /** axe-core configuration. */
-  axe?: {
-    /** Rule tags to run (defaults to the broadened WCAG 2.0–2.2 + best-practice set). */
-    tags?: string[]
-    /** Extra axe `run` options merged over the defaults. */
-    runOptions?: Record<string, unknown>
-  }
-}
-
-/**
- * Build a {@link DevframeDefinition} for the a11y inspector. The same
- * definition runs standalone (`/cli`, `/build`) and mounts into a host
- * (`/vite`, hub). The panel talks to the page script over the in-page channel
- * (`devframe/in-page-channel`), so the scan/highlight loop works identically in dev
- * (live WebSocket RPC) and in a baked static build.
- *
- * @experimental This plugin is experimental and may change without a major
- * version bump until it stabilizes.
- */
-export function createA11yDevframe(options: A11yDevframeOptions = {}): DevframeDefinition {
-  const id = options.id ?? DEFAULT_ID
-  return defineDevframe({
-    id,
-    name: options.name ?? 'A11y Inspector',
-    version: pkg.version,
-    packageName: pkg.name,
-    importMetaUrl: import.meta.url,
-    homepage: pkg.homepage,
-    description: pkg.description,
-    icon: options.icon ?? 'ph:person-simple-circle-duotone',
-    basePath: options.basePath ?? BASE_PATH,
-    /** Declare the page script by path; the hub serves it with no host wiring. */
-    dock: {
-      category: '~builtin',
-      clientScript: { importFrom: a11yPageScriptBundlePath },
-    },
-    cli: {
-      command: id,
-      port: options.port ?? 9899,
-      distDir,
-    },
-    setup(ctx) {
-      setupA11y(ctx, {
-        dockId: id,
-        autoScan: options.autoScan,
-        logIssues: options.logIssues,
-        defaultHighlight: options.defaultHighlight,
-        axe: options.axe,
-      })
-    },
-  })
-}
-
-export default createA11yDevframe
-export type { Impact, ScanReport, Violation, ViolationNode } from './shared/protocol.ts'
diff --git a/plugins/a11y/src/inject/vite.config.ts b/plugins/a11y/src/inject/vite.config.ts
deleted file mode 100644
index 93a1ac922..000000000
--- a/plugins/a11y/src/inject/vite.config.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { fileURLToPath } from 'node:url'
-import { defineConfig } from 'vite'
-
-/**
- * Builds the page script into a single self-contained ES module
- * (`dist/inject/inject.js`) with axe-core bundled in. Loaded by the host app
- * via `<script type="module" src=".../inject.js">`, so it must not rely on a
- * chunk graph or an import map.
- */
-export default defineConfig({
-  root: fileURLToPath(new URL('.', import.meta.url)),
-  build: {
-    target: 'esnext',
-    outDir: fileURLToPath(new URL('../../dist/inject', import.meta.url)),
-    emptyOutDir: true,
-    lib: {
-      entry: fileURLToPath(new URL('./index.ts', import.meta.url)),
-      formats: ['es'],
-      fileName: () => 'inject.js',
-    },
-  },
-})
diff --git a/plugins/a11y/src/cli.ts b/plugins/a11y/src/node/cli.ts
similarity index 100%
rename from plugins/a11y/src/cli.ts
rename to plugins/a11y/src/node/cli.ts
diff --git a/plugins/a11y/src/node/index.ts b/plugins/a11y/src/node/index.ts
index 29c5bfc22..11ee04225 100644
--- a/plugins/a11y/src/node/index.ts
+++ b/plugins/a11y/src/node/index.ts
@@ -1,16 +1,119 @@
-import type { DevframeNodeContext } from 'devframe'
-import type { A11yRuntimeConfig } from '../rpc/functions/get-config.ts'
-import { buildServerFunctions, serverFunctions } from '../rpc/index.ts'
+import type { DevframeDefinition, RemoteAssets } from 'devframe'
+import { fileURLToPath } from 'node:url'
+import { defineDevframe } from 'devframe'
+import pkg from '../../package.json' with { type: 'json' }
+import { setupA11y } from './setup.ts'
+
+/** Default devframe id, driving the standalone CLI command and the hosted mount path `/__<id>/`. */
+const DEFAULT_ID = 'devframes_plugin_a11y'
+const BASE_PATH = '/__devframes_plugin_a11y/'
+
+// The Solid panel SPA ships in the lockstep `@devframes/plugin-a11y--assets`
+// package, served on demand through devframe's remote-assets back-proxy. The
+// definition's `importMetaUrl` (below) supplies the default `resolveFrom`, so a
+// locally installed copy (a workspace link here) is served with zero network.
+// The client-script bundle (`dist/client-script`, below) stays here.
+const distDir: RemoteAssets = {
+  package: `${pkg.name}--assets`,
+  version: pkg.version,
+}
+
+/**
+ * Absolute path to the built **client script** module (`dist/client-script/index.mjs`),
+ * the dock client script the client runtime imports into the host page to scan
+ * it (its default export boots the script; importing it does too).
+ *
+ * The definition already declares this as its dock `clientScript`, so a hub
+ * serves it with no host wiring. Exported for hosts that mount the module
+ * themselves (e.g. via `/@fs/` under Vite). Requires the built bundle
+ * (`pnpm -C plugins/a11y build`).
+ */
+export const a11yClientScriptBundlePath: string = fileURLToPath(new URL('../../dist/client-script/index.mjs', import.meta.url))
+
+/** @deprecated Renamed; use {@link a11yClientScriptBundlePath}. */
+export const a11yPageScriptBundlePath: string = a11yClientScriptBundlePath
+
+/** @deprecated Renamed; use {@link a11yClientScriptBundlePath}. */
+export const a11yAgentBundlePath: string = a11yClientScriptBundlePath
+
+export interface A11yDevframeOptions {
+  /** Override the devframe id (and the default CLI command / mount path). */
+  id?: string
+  /** Override the display name shown in a host dock. */
+  name?: string
+  /** Override the dock icon. */
+  icon?: string
+  /**
+   * Override the mount path. Defaults to `/__devframes_plugin_a11y/` so the
+   * panel iframe shares an origin with the host page it scans.
+   */
+  basePath?: string
+  /** Preferred standalone CLI port. */
+  port?: number
+  /**
+   * Rescan on debounced user interaction (mouse/keyboard/touch), on top of the
+   * DOM MutationObserver. Default `true`.
+   */
+  autoScan?: boolean
+  /** Log newly-appeared violations to the browser console. Default `true`. */
+  logIssues?: boolean
+  /**
+   * Auto-pin all of a route's violations the first time it's scanned.
+   * Default `false`.
+   */
+  defaultHighlight?: boolean
+  /** axe-core configuration. */
+  axe?: {
+    /** Rule tags to run (defaults to the broadened WCAG 2.0–2.2 + best-practice set). */
+    tags?: string[]
+    /** Extra axe `run` options merged over the defaults. */
+    runOptions?: Record<string, unknown>
+  }
+}
 
 /**
- * Register the a11y inspector's RPC functions on a devframe node context.
- * Called from the definition's `setup(ctx)` and reusable by host adapters
- * that wire their own context. Author options (auto-scan, logging, axe tags,
- * default-highlight) are surfaced through the `get-config` function.
+ * Build a {@link DevframeDefinition} for the a11y inspector. The same
+ * definition runs standalone (`/cli`, `/build`) and mounts into a host
+ * (`/vite`, hub). The panel talks to the page script over the in-page channel
+ * (`devframe/in-page-channel`), so the scan/highlight loop works identically in dev
+ * (live WebSocket RPC) and in a baked static build.
+ *
+ * @experimental This plugin is experimental and may change without a major
+ * version bump until it stabilizes.
  */
-export function setupA11y(ctx: DevframeNodeContext, options: A11yRuntimeConfig = {}): void {
-  for (const fn of buildServerFunctions(options))
-    ctx.rpc.register(fn)
+export function createA11yDevframe(options: A11yDevframeOptions = {}): DevframeDefinition {
+  const id = options.id ?? DEFAULT_ID
+  return defineDevframe({
+    id,
+    name: options.name ?? 'A11y Inspector',
+    version: pkg.version,
+    packageName: pkg.name,
+    importMetaUrl: import.meta.url,
+    homepage: pkg.homepage,
+    description: pkg.description,
+    icon: options.icon ?? 'ph:person-simple-circle-duotone',
+    basePath: options.basePath ?? BASE_PATH,
+    /** Declare the page script by path; the hub serves it with no host wiring. */
+    dock: {
+      category: '~builtin',
+      clientScript: { importFrom: a11yClientScriptBundlePath },
+    },
+    cli: {
+      command: id,
+      port: options.port ?? 9899,
+      distDir,
+    },
+    setup(ctx) {
+      setupA11y(ctx, {
+        dockId: id,
+        autoScan: options.autoScan,
+        logIssues: options.logIssues,
+        defaultHighlight: options.defaultHighlight,
+        axe: options.axe,
+      })
+    },
+  })
 }
 
-export { serverFunctions }
+export default createA11yDevframe
+export type { Impact, ScanReport, Violation, ViolationNode } from '../shared/protocol.ts'
diff --git a/plugins/a11y/src/rpc/functions/get-config.ts b/plugins/a11y/src/node/rpc/functions/get-config.ts
similarity index 95%
rename from plugins/a11y/src/rpc/functions/get-config.ts
rename to plugins/a11y/src/node/rpc/functions/get-config.ts
index 03fa565ff..8d154f4be 100644
--- a/plugins/a11y/src/rpc/functions/get-config.ts
+++ b/plugins/a11y/src/node/rpc/functions/get-config.ts
@@ -1,6 +1,6 @@
-import type { PageScriptConfig } from '../../shared/protocol.ts'
+import type { PageScriptConfig } from '../../../shared/protocol.ts'
 import { defineRpcFunction } from 'devframe'
-import { A11Y_CHANNEL, A11Y_DEFAULT_DOCK_ID, A11Y_NODE_ATTR, IMPACT_ORDER } from '../../shared/protocol.ts'
+import { A11Y_CHANNEL, A11Y_DEFAULT_DOCK_ID, A11Y_NODE_ATTR, IMPACT_ORDER } from '../../../shared/protocol.ts'
 
 const IMPACT_COPY = {
   critical: {
diff --git a/plugins/a11y/src/rpc/index.ts b/plugins/a11y/src/node/rpc/index.ts
similarity index 100%
rename from plugins/a11y/src/rpc/index.ts
rename to plugins/a11y/src/node/rpc/index.ts
diff --git a/plugins/a11y/src/node/setup.ts b/plugins/a11y/src/node/setup.ts
new file mode 100644
index 000000000..483761f64
--- /dev/null
+++ b/plugins/a11y/src/node/setup.ts
@@ -0,0 +1,16 @@
+import type { DevframeNodeContext } from 'devframe'
+import type { A11yRuntimeConfig } from './rpc/functions/get-config.ts'
+import { buildServerFunctions, serverFunctions } from './rpc/index.ts'
+
+/**
+ * Register the a11y inspector's RPC functions on a devframe node context.
+ * Called from the definition's `setup(ctx)` and reusable by host adapters
+ * that wire their own context. Author options (auto-scan, logging, axe tags,
+ * default-highlight) are surfaced through the `get-config` function.
+ */
+export function setupA11y(ctx: DevframeNodeContext, options: A11yRuntimeConfig = {}): void {
+  for (const fn of buildServerFunctions(options))
+    ctx.rpc.register(fn)
+}
+
+export { serverFunctions }
diff --git a/plugins/a11y/src/spa/vite.config.ts b/plugins/a11y/src/spa/vite.config.ts
deleted file mode 100644
index 102f5859b..000000000
--- a/plugins/a11y/src/spa/vite.config.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { fileURLToPath } from 'node:url'
-import UnoCSS from 'unocss/vite'
-import { defineConfig } from 'vite'
-import solid from 'vite-plugin-solid'
-import { alias } from '../../../../alias'
-
-/**
- * `base: './'` + `<base href="./" />` keeps the bundle mount-path portable:
- * the same `dist/spa` works whether devframe serves it at `/` (standalone)
- * or `/__devframes_plugin_a11y/` (mounted in a hub). `connectDevframe`
- * resolves its connection meta relative to `document.baseURI` to match.
- */
-export default defineConfig({
-  base: './',
-  root: fileURLToPath(new URL('.', import.meta.url)),
-  resolve: { alias },
-  plugins: [solid(), UnoCSS()],
-  build: {
-    outDir: fileURLToPath(new URL('../../assets-pkg/dist', import.meta.url)),
-    emptyOutDir: true,
-  },
-})
diff --git a/plugins/a11y/tests/_utils.ts b/plugins/a11y/tests/_utils.ts
index 1468f01d9..10cd29a13 100644
--- a/plugins/a11y/tests/_utils.ts
+++ b/plugins/a11y/tests/_utils.ts
@@ -12,7 +12,7 @@ import { mountStaticHandler } from 'devframe/utils/serve-static'
 import { H3 } from 'h3'
 import { resolve } from 'pathe'
 import { serveTestContext } from '../../../tests/helpers/serve-test-context'
-import createA11yDevframe from '../src/index'
+import createA11yDevframe from '../src/node/index'
 
 const devframe = createA11yDevframe()
 
diff --git a/plugins/a11y/tests/fix-prompt.test.ts b/plugins/a11y/tests/fix-prompt.test.ts
index 8d300e063..7befe5513 100644
--- a/plugins/a11y/tests/fix-prompt.test.ts
+++ b/plugins/a11y/tests/fix-prompt.test.ts
@@ -1,7 +1,7 @@
+import type { SelectedItem } from '../app/lib/fix-prompt.ts'
 import type { Violation } from '../src/shared/protocol.ts'
-import type { SelectedItem } from '../src/spa/lib/fix-prompt.ts'
 import { describe, expect, it } from 'vitest'
-import { buildFixPrompt } from '../src/spa/lib/fix-prompt.ts'
+import { buildFixPrompt } from '../app/lib/fix-prompt.ts'
 
 function violation(ruleId: string, over: Partial<Violation> = {}): Violation {
   return {
diff --git a/plugins/a11y/tests/inject-messages.test.ts b/plugins/a11y/tests/inject-messages.test.ts
index 22e64d05c..69eb758e9 100644
--- a/plugins/a11y/tests/inject-messages.test.ts
+++ b/plugins/a11y/tests/inject-messages.test.ts
@@ -1,7 +1,7 @@
-import type { HubMessageInput } from '../src/inject/messages.ts'
+import type { HubMessageInput } from '../src/client-script/messages.ts'
 import type { ScanReport, Violation } from '../src/shared/protocol.ts'
 import { describe, expect, it } from 'vitest'
-import { createMessagesReporter } from '../src/inject/messages.ts'
+import { createMessagesReporter } from '../src/client-script/messages.ts'
 import { emptyCounts } from '../src/shared/protocol.ts'
 
 function createStubMessages() {
diff --git a/plugins/a11y/tests/protocol.test.ts b/plugins/a11y/tests/protocol.test.ts
index 2d0343277..9d9fc7d98 100644
--- a/plugins/a11y/tests/protocol.test.ts
+++ b/plugins/a11y/tests/protocol.test.ts
@@ -1,6 +1,6 @@
 import type { ScanReport } from '../src/shared/protocol.ts'
 import { describe, expect, it } from 'vitest'
-import { createGetConfig } from '../src/rpc/functions/get-config.ts'
+import { createGetConfig } from '../src/node/rpc/functions/get-config.ts'
 import { DEFAULT_AXE_TAGS, emptyCounts, sumCounts } from '../src/shared/protocol.ts'
 
 function report(counts: Partial<ReturnType<typeof emptyCounts>>, route = '/'): ScanReport {
diff --git a/plugins/a11y/tests/static-build.test.ts b/plugins/a11y/tests/static-build.test.ts
index 335f9f4a0..8e2a8baec 100644
--- a/plugins/a11y/tests/static-build.test.ts
+++ b/plugins/a11y/tests/static-build.test.ts
@@ -8,7 +8,7 @@ import {
   DEVFRAME_RPC_DUMP_MANIFEST_FILENAME,
 } from 'devframe/constants'
 import { afterAll, beforeAll, describe, expect, it } from 'vitest'
-import createA11yDevframe from '../src/index'
+import createA11yDevframe from '../src/node/index'
 import { assertClientBuilt } from './_utils'
 
 interface DumpManifest {
diff --git a/plugins/a11y/tsconfig.json b/plugins/a11y/tsconfig.json
index b94840971..3ef67e676 100644
--- a/plugins/a11y/tsconfig.json
+++ b/plugins/a11y/tsconfig.json
@@ -11,5 +11,5 @@
     "esModuleInterop": true,
     "isolatedDeclarations": false
   },
-  "include": ["src", "tests", "demo", "bin.mjs"]
+  "include": ["src", "app", "tests", "playgrounds", "bin.mjs"]
 }
diff --git a/plugins/a11y/tsdown.config.ts b/plugins/a11y/tsdown.config.ts
index 26c46e76e..a7167402f 100644
--- a/plugins/a11y/tsdown.config.ts
+++ b/plugins/a11y/tsdown.config.ts
@@ -2,31 +2,32 @@ import { defineConfig } from 'tsdown'
 
 const tsconfig = '../../tsconfig.base.json'
 
-// Browser-loaded entry. Kept in its own rolldown graph so node-only
-// imports can never leak into the client bundle.
-const clientEntries = {
-  'client/index': 'src/client/index.ts',
+// Injected client script: loaded into the user app's page via a bare
+// `<script type="module">`, so it must be one self-contained ES module with no
+// chunk graph. axe-core and `devframe/in-page-channel` are bundled in.
+const clientScriptEntries = {
+  'client-script/index': 'src/client-script/index.ts',
 }
 
-// Node-side entries: the devframe definition, the CLI/Vite host
-// adapters, the setup module, and the RPC registry.
-const serverEntries = {
-  'index': 'src/index.ts',
-  'cli': 'src/cli.ts',
+// Node-side entries: the devframe definition (root), the setup module, the
+// CLI adapter, and the RPC registry.
+const nodeEntries = {
   'node/index': 'src/node/index.ts',
-  'rpc/index': 'src/rpc/index.ts',
+  'node/setup': 'src/node/setup.ts',
+  'node/cli': 'src/node/cli.ts',
+  'node/rpc/index': 'src/node/rpc/index.ts',
 }
 
 /**
- * Three configs mirror `packages/devframe`:
- * 1. browser runtime build (`dts: false`, `clean: true`): clears dist/
- * and emits the client bundle in an isolated graph;
- * 2. node runtime build (`dts: false`, `clean: false`): appends;
- * 3. combined dts (`emitDtsOnly`): one rolldown graph so the
- * `declare module 'devframe'` RPC augmentation resolves once.
+ * Three configs keep the graphs isolated:
+ * 1. browser client script (`clean: true`): clears dist/, self-contained
+ *    (`alwaysBundle` inlines devframe + axe);
+ * 2. node runtime (appends);
+ * 3. combined dts in one graph so the `declare module 'devframe'` RPC
+ *    augmentation resolves once.
  *
- * The Solid panel SPA (`src/spa`) and the in-page agent (`src/inject`)
- * build separately with Vite into `dist/spa` and `dist/inject`.
+ * The Solid panel SPA (`app/`) builds separately with Vite into the lockstep
+ * `@devframes/plugin-a11y--assets` package.
  */
 export default defineConfig([
   {
@@ -35,14 +36,15 @@ export default defineConfig([
     tsconfig,
     dts: false,
     outExtensions: () => ({ js: '.mjs' }),
-    entry: clientEntries,
+    deps: { alwaysBundle: [/^devframe(\/|$)/, 'axe-core'] },
+    entry: clientScriptEntries,
   },
   {
     clean: false,
     platform: 'node',
     tsconfig,
     dts: false,
-    entry: serverEntries,
+    entry: nodeEntries,
   },
   {
     clean: false,
@@ -50,6 +52,6 @@ export default defineConfig([
     tsconfig,
     dts: { emitDtsOnly: true },
     outExtensions: () => ({ dts: '.d.mts' }),
-    entry: { ...clientEntries, ...serverEntries },
+    entry: { ...clientScriptEntries, ...nodeEntries },
   },
 ])
diff --git a/plugins/a11y/uno.config.ts b/plugins/a11y/uno.config.ts
index 04eaeef2a..d338c66d8 100644
--- a/plugins/a11y/uno.config.ts
+++ b/plugins/a11y/uno.config.ts
@@ -4,7 +4,7 @@ import { designConfig } from '../../design/uno.config'
 /**
  * The a11y inspector's Solid SPA composes the shared devframe base (see
  * `design/uno.config.ts`) and adds only its own extraction globs. The in-page
- * agent bundle (src/inject) is deliberately excluded, since it inlines its own styles
+ * client script (src/client-script) is deliberately excluded, since it inlines its own styles
  * into the host document. `.tsx` is scanned by default; `.ts` (the co-located
  * `design.ts` helpers) is opted in.
  */
diff --git a/plugins/assets/.storybook/main.ts b/plugins/assets/.storybook/main.ts
index c0fc723f7..838f250b9 100644
--- a/plugins/assets/.storybook/main.ts
+++ b/plugins/assets/.storybook/main.ts
@@ -5,7 +5,7 @@ import { mergeConfig } from 'vite'
 import { alias } from '../../../alias'
 
 const config: StorybookConfig = {
-  stories: ['../src/spa/app/**/*.stories.@(ts|tsx)'],
+  stories: ['../{src,app}/**/*.stories.@(ts)'],
   addons: ['@storybook/addon-docs', '@storybook/addon-a11y'],
   framework: {
     name: '@storybook/vue3-vite',
diff --git a/plugins/assets/src/spa/app/App.vue b/plugins/assets/app/app/App.vue
similarity index 99%
rename from plugins/assets/src/spa/app/App.vue
rename to plugins/assets/app/app/App.vue
index 748e270b0..7aaf133dc 100644
--- a/plugins/assets/src/spa/app/App.vue
+++ b/plugins/assets/app/app/App.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { AssetInfo, AssetType } from '../../types'
+import type { AssetInfo, AssetType } from './connect'
 import ActionButton from '@antfu/design/components/Action/ActionButton.vue'
 import FormTextInput from '@antfu/design/components/Form/FormTextInput.vue'
 import OverlayModal from '@antfu/design/components/Overlay/OverlayModal.vue'
diff --git a/plugins/assets/src/spa/app/components/AssetDetails.stories.ts b/plugins/assets/app/app/components/AssetDetails.stories.ts
similarity index 96%
rename from plugins/assets/src/spa/app/components/AssetDetails.stories.ts
rename to plugins/assets/app/app/components/AssetDetails.stories.ts
index ba4897880..b0c95a2af 100644
--- a/plugins/assets/src/spa/app/components/AssetDetails.stories.ts
+++ b/plugins/assets/app/app/components/AssetDetails.stories.ts
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
-import type { AssetInfo } from '../../../types'
+import type { AssetInfo } from '../connect'
 import AssetDetails from './AssetDetails.vue'
 
 const SAMPLE_SVG = `data:image/svg+xml,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300"><rect width="400" height="300" fill="#3a6a45"/></svg>')}`
diff --git a/plugins/assets/src/spa/app/components/AssetDetails.vue b/plugins/assets/app/app/components/AssetDetails.vue
similarity index 99%
rename from plugins/assets/src/spa/app/components/AssetDetails.vue
rename to plugins/assets/app/app/components/AssetDetails.vue
index 33669d6ca..2557cd73d 100644
--- a/plugins/assets/src/spa/app/components/AssetDetails.vue
+++ b/plugins/assets/app/app/components/AssetDetails.vue
@@ -3,7 +3,7 @@
 // `open.rpc.call('open-in-editor', …)` below is fully typed.
 import type {} from '@devframes/service-open'
 import type { DevframeRpcClient } from 'devframe/client'
-import type { AssetImageMeta, AssetInfo } from '../../../types'
+import type { AssetImageMeta, AssetInfo } from '../connect'
 import ActionButton from '@antfu/design/components/Action/ActionButton.vue'
 import ActionIconButton from '@antfu/design/components/Action/ActionIconButton.vue'
 import FormTextInput from '@antfu/design/components/Form/FormTextInput.vue'
diff --git a/plugins/assets/src/spa/app/components/AssetGrid.vue b/plugins/assets/app/app/components/AssetGrid.vue
similarity index 97%
rename from plugins/assets/src/spa/app/components/AssetGrid.vue
rename to plugins/assets/app/app/components/AssetGrid.vue
index a9ec7d97a..4513f5206 100644
--- a/plugins/assets/src/spa/app/components/AssetGrid.vue
+++ b/plugins/assets/app/app/components/AssetGrid.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { AssetInfo } from '../../../types'
+import type { AssetInfo } from '../connect'
 import { computed } from 'vue'
 import { groupByFolder } from '../utils/tree'
 import AssetGridItem from './AssetGridItem.vue'
diff --git a/plugins/assets/src/spa/app/components/AssetGridItem.stories.ts b/plugins/assets/app/app/components/AssetGridItem.stories.ts
similarity index 95%
rename from plugins/assets/src/spa/app/components/AssetGridItem.stories.ts
rename to plugins/assets/app/app/components/AssetGridItem.stories.ts
index 69b1c547f..0faa74a0b 100644
--- a/plugins/assets/src/spa/app/components/AssetGridItem.stories.ts
+++ b/plugins/assets/app/app/components/AssetGridItem.stories.ts
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
-import type { AssetInfo } from '../../../types'
+import type { AssetInfo } from '../connect'
 import AssetGridItem from './AssetGridItem.vue'
 
 const SAMPLE_SVG = `data:image/svg+xml,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><rect width="200" height="200" fill="#3a6a45"/></svg>')}`
diff --git a/plugins/assets/src/spa/app/components/AssetGridItem.vue b/plugins/assets/app/app/components/AssetGridItem.vue
similarity index 95%
rename from plugins/assets/src/spa/app/components/AssetGridItem.vue
rename to plugins/assets/app/app/components/AssetGridItem.vue
index 5ae865ec8..aec28e8e3 100644
--- a/plugins/assets/src/spa/app/components/AssetGridItem.vue
+++ b/plugins/assets/app/app/components/AssetGridItem.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { AssetInfo } from '../../../types'
+import type { AssetInfo } from '../connect'
 import FormCheckbox from '@antfu/design/components/Form/FormCheckbox.vue'
 import AssetPreview from './AssetPreview.vue'
 
diff --git a/plugins/assets/src/spa/app/components/AssetListItem.vue b/plugins/assets/app/app/components/AssetListItem.vue
similarity index 100%
rename from plugins/assets/src/spa/app/components/AssetListItem.vue
rename to plugins/assets/app/app/components/AssetListItem.vue
diff --git a/plugins/assets/src/spa/app/components/AssetPreview.stories.ts b/plugins/assets/app/app/components/AssetPreview.stories.ts
similarity index 97%
rename from plugins/assets/src/spa/app/components/AssetPreview.stories.ts
rename to plugins/assets/app/app/components/AssetPreview.stories.ts
index 070b64e39..2013d04bc 100644
--- a/plugins/assets/src/spa/app/components/AssetPreview.stories.ts
+++ b/plugins/assets/app/app/components/AssetPreview.stories.ts
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
-import type { AssetInfo } from '../../../types'
+import type { AssetInfo } from '../connect'
 import AssetPreview from './AssetPreview.vue'
 
 const SAMPLE_SVG = `data:image/svg+xml,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="200" height="120"><rect width="200" height="120" fill="#3a6a45"/><text x="100" y="65" fill="white" font-size="16" text-anchor="middle">logo.svg</text></svg>')}`
diff --git a/plugins/assets/src/spa/app/components/AssetPreview.vue b/plugins/assets/app/app/components/AssetPreview.vue
similarity index 98%
rename from plugins/assets/src/spa/app/components/AssetPreview.vue
rename to plugins/assets/app/app/components/AssetPreview.vue
index 3a522f538..28071f67c 100644
--- a/plugins/assets/src/spa/app/components/AssetPreview.vue
+++ b/plugins/assets/app/app/components/AssetPreview.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { AssetInfo } from '../../../types'
+import type { AssetInfo } from '../connect'
 import FontPreview from './FontPreview.vue'
 
 defineProps<{
diff --git a/plugins/assets/src/spa/app/components/AssetTree.vue b/plugins/assets/app/app/components/AssetTree.vue
similarity index 94%
rename from plugins/assets/src/spa/app/components/AssetTree.vue
rename to plugins/assets/app/app/components/AssetTree.vue
index c0e1237c7..14fca05a0 100644
--- a/plugins/assets/src/spa/app/components/AssetTree.vue
+++ b/plugins/assets/app/app/components/AssetTree.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { AssetInfo } from '../../../types'
+import type { AssetInfo } from '../connect'
 import type { TreeNode } from '../utils/tree'
 import { computed } from 'vue'
 import { buildTree } from '../utils/tree'
diff --git a/plugins/assets/src/spa/app/components/CodeSnippets.stories.ts b/plugins/assets/app/app/components/CodeSnippets.stories.ts
similarity index 100%
rename from plugins/assets/src/spa/app/components/CodeSnippets.stories.ts
rename to plugins/assets/app/app/components/CodeSnippets.stories.ts
diff --git a/plugins/assets/src/spa/app/components/CodeSnippets.vue b/plugins/assets/app/app/components/CodeSnippets.vue
similarity index 96%
rename from plugins/assets/src/spa/app/components/CodeSnippets.vue
rename to plugins/assets/app/app/components/CodeSnippets.vue
index b65fa86a5..83102a849 100644
--- a/plugins/assets/src/spa/app/components/CodeSnippets.vue
+++ b/plugins/assets/app/app/components/CodeSnippets.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { CodeSnippet } from '../../../types'
+import type { CodeSnippet } from '../connect'
 import { computed, ref } from 'vue'
 
 const props = defineProps<{ snippets: CodeSnippet[] }>()
diff --git a/plugins/assets/src/spa/app/components/FontPreview.vue b/plugins/assets/app/app/components/FontPreview.vue
similarity index 94%
rename from plugins/assets/src/spa/app/components/FontPreview.vue
rename to plugins/assets/app/app/components/FontPreview.vue
index 352922ff9..7d93b230c 100644
--- a/plugins/assets/src/spa/app/components/FontPreview.vue
+++ b/plugins/assets/app/app/components/FontPreview.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { AssetInfo } from '../../../types'
+import type { AssetInfo } from '../connect'
 import { onBeforeUnmount, onMounted, watch } from 'vue'
 
 const props = defineProps<{ asset: AssetInfo }>()
diff --git a/plugins/assets/src/spa/app/components/SectionBlock.vue b/plugins/assets/app/app/components/SectionBlock.vue
similarity index 100%
rename from plugins/assets/src/spa/app/components/SectionBlock.vue
rename to plugins/assets/app/app/components/SectionBlock.vue
diff --git a/plugins/assets/src/spa/app/components/Toolbar.stories.ts b/plugins/assets/app/app/components/Toolbar.stories.ts
similarity index 100%
rename from plugins/assets/src/spa/app/components/Toolbar.stories.ts
rename to plugins/assets/app/app/components/Toolbar.stories.ts
diff --git a/plugins/assets/src/spa/app/components/Toolbar.vue b/plugins/assets/app/app/components/Toolbar.vue
similarity index 100%
rename from plugins/assets/src/spa/app/components/Toolbar.vue
rename to plugins/assets/app/app/components/Toolbar.vue
diff --git a/plugins/assets/src/spa/app/components/TypeFilter.stories.ts b/plugins/assets/app/app/components/TypeFilter.stories.ts
similarity index 100%
rename from plugins/assets/src/spa/app/components/TypeFilter.stories.ts
rename to plugins/assets/app/app/components/TypeFilter.stories.ts
diff --git a/plugins/assets/src/spa/app/components/TypeFilter.vue b/plugins/assets/app/app/components/TypeFilter.vue
similarity index 96%
rename from plugins/assets/src/spa/app/components/TypeFilter.vue
rename to plugins/assets/app/app/components/TypeFilter.vue
index fde447e8e..54dc27f5b 100644
--- a/plugins/assets/src/spa/app/components/TypeFilter.vue
+++ b/plugins/assets/app/app/components/TypeFilter.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { AssetType } from '../../../types'
+import type { AssetType } from '../connect'
 import { TYPE_META } from '../utils/assetType'
 
 interface TypeFilterItem {
diff --git a/plugins/assets/src/spa/app/composables/useAssets.ts b/plugins/assets/app/app/composables/useAssets.ts
similarity index 94%
rename from plugins/assets/src/spa/app/composables/useAssets.ts
rename to plugins/assets/app/app/composables/useAssets.ts
index adcb25330..75e874f74 100644
--- a/plugins/assets/src/spa/app/composables/useAssets.ts
+++ b/plugins/assets/app/app/composables/useAssets.ts
@@ -1,9 +1,9 @@
+import type { AssetsCapabilities } from '@devframes/plugin-assets/rpc'
 import type { DevframeConnectionStatus, DevframeRpcClient } from 'devframe/client'
 import type { Ref } from 'vue'
-import type { AssetsCapabilities } from '../../../rpc/functions/capabilities'
-import type { AssetInfo } from '../../../types'
+import type { AssetInfo } from '../connect'
 import { shallowRef } from 'vue'
-import { connectAssets } from '../../../client'
+import { connectAssets } from '../connect'
 
 const CHANGED_EVENT = 'devframes:plugin:assets:changed'
 
diff --git a/plugins/assets/src/spa/app/composables/useFileDrop.ts b/plugins/assets/app/app/composables/useFileDrop.ts
similarity index 100%
rename from plugins/assets/src/spa/app/composables/useFileDrop.ts
rename to plugins/assets/app/app/composables/useFileDrop.ts
diff --git a/plugins/assets/src/spa/app/composables/useLocalStorage.ts b/plugins/assets/app/app/composables/useLocalStorage.ts
similarity index 100%
rename from plugins/assets/src/spa/app/composables/useLocalStorage.ts
rename to plugins/assets/app/app/composables/useLocalStorage.ts
diff --git a/plugins/assets/src/spa/app/composables/useUpload.ts b/plugins/assets/app/app/composables/useUpload.ts
similarity index 100%
rename from plugins/assets/src/spa/app/composables/useUpload.ts
rename to plugins/assets/app/app/composables/useUpload.ts
diff --git a/plugins/assets/src/client/index.ts b/plugins/assets/app/app/connect.ts
similarity index 90%
rename from plugins/assets/src/client/index.ts
rename to plugins/assets/app/app/connect.ts
index 16674c773..9df059654 100644
--- a/plugins/assets/src/client/index.ts
+++ b/plugins/assets/app/app/connect.ts
@@ -1,7 +1,7 @@
 import type { DevframeRpcClientOptions } from 'devframe/client'
 import { connectDevframe } from 'devframe/client'
 
-export type { AssetImageMeta, AssetInfo, AssetType, CodeSnippet } from '../types'
+export type { AssetImageMeta, AssetInfo, AssetType, CodeSnippet } from '../../src/node/types'
 
 export function connectAssets(options?: DevframeRpcClientOptions) {
   return connectDevframe(options)
diff --git a/plugins/a11y/src/spa/design.ts b/plugins/assets/app/app/design.ts
similarity index 100%
rename from plugins/a11y/src/spa/design.ts
rename to plugins/assets/app/app/design.ts
diff --git a/plugins/assets/src/spa/app/utils/assetType.ts b/plugins/assets/app/app/utils/assetType.ts
similarity index 93%
rename from plugins/assets/src/spa/app/utils/assetType.ts
rename to plugins/assets/app/app/utils/assetType.ts
index 410c5d506..746b24202 100644
--- a/plugins/assets/src/spa/app/utils/assetType.ts
+++ b/plugins/assets/app/app/utils/assetType.ts
@@ -1,4 +1,4 @@
-import type { AssetType } from '../../../types'
+import type { AssetType } from '../connect'
 
 /** Canonical display order for the type filter. */
 export const ASSET_TYPES: readonly AssetType[] = ['image', 'video', 'audio', 'font', 'text', 'other']
diff --git a/plugins/assets/src/spa/app/utils/format.ts b/plugins/assets/app/app/utils/format.ts
similarity index 100%
rename from plugins/assets/src/spa/app/utils/format.ts
rename to plugins/assets/app/app/utils/format.ts
diff --git a/plugins/assets/src/spa/app/utils/highlight.ts b/plugins/assets/app/app/utils/highlight.ts
similarity index 100%
rename from plugins/assets/src/spa/app/utils/highlight.ts
rename to plugins/assets/app/app/utils/highlight.ts
diff --git a/plugins/assets/src/spa/app/utils/snippets.ts b/plugins/assets/app/app/utils/snippets.ts
similarity index 99%
rename from plugins/assets/src/spa/app/utils/snippets.ts
rename to plugins/assets/app/app/utils/snippets.ts
index 1cff41a10..a215ec7c3 100644
--- a/plugins/assets/src/spa/app/utils/snippets.ts
+++ b/plugins/assets/app/app/utils/snippets.ts
@@ -1,4 +1,4 @@
-import type { AssetImageMeta, AssetInfo, CodeSnippet } from '../../../types'
+import type { AssetImageMeta, AssetInfo, CodeSnippet } from '../connect'
 import { fileNameOf } from './format'
 
 /**
diff --git a/plugins/assets/src/spa/app/utils/tree.ts b/plugins/assets/app/app/utils/tree.ts
similarity index 97%
rename from plugins/assets/src/spa/app/utils/tree.ts
rename to plugins/assets/app/app/utils/tree.ts
index 13138043c..093170b50 100644
--- a/plugins/assets/src/spa/app/utils/tree.ts
+++ b/plugins/assets/app/app/utils/tree.ts
@@ -1,4 +1,4 @@
-import type { AssetInfo } from '../../../types'
+import type { AssetInfo } from '../connect'
 import { folderOf } from './format'
 
 export interface FolderGroup {
diff --git a/plugins/assets/src/spa/index.html b/plugins/assets/app/index.html
similarity index 100%
rename from plugins/assets/src/spa/index.html
rename to plugins/assets/app/index.html
diff --git a/plugins/assets/src/spa/main.ts b/plugins/assets/app/main.ts
similarity index 100%
rename from plugins/assets/src/spa/main.ts
rename to plugins/assets/app/main.ts
diff --git a/plugins/assets/src/spa/shims.d.ts b/plugins/assets/app/shims.d.ts
similarity index 100%
rename from plugins/assets/src/spa/shims.d.ts
rename to plugins/assets/app/shims.d.ts
diff --git a/plugins/assets/app/vite.config.ts b/plugins/assets/app/vite.config.ts
new file mode 100644
index 000000000..ec59571ce
--- /dev/null
+++ b/plugins/assets/app/vite.config.ts
@@ -0,0 +1,61 @@
+import type { Server } from 'node:http'
+import type { Plugin } from 'vite'
+import { fileURLToPath } from 'node:url'
+import createAssetsDevframe from '@devframes/plugin-assets'
+import vue from '@vitejs/plugin-vue'
+import { initDevframe } from 'devframe/initiate'
+import { resolveBasePath } from 'devframe/internal'
+import UnoCSS from 'unocss/vite'
+import { defineConfig } from 'vite'
+import { alias } from '../../../alias'
+
+const devframe = createAssetsDevframe()
+// Hosted base (`/__devframes_plugin_assets/`): the SPA and the dev bridge share
+// it so `document.baseURI` matches production while Vite serves the HMR panel.
+const basePath = resolveBasePath(devframe, 'hosted')
+
+/**
+ * Serve-only plugin that bridges the assets node side (RPC + WebSocket +
+ * `__connection.json`) onto Vite's own dev server under the devframe base
+ * path, mounted as a **post** middleware so Vite serves the HMR SPA first and
+ * the devframe host only answers the routes it owns. Inert during `vite build`.
+ */
+function assetsDevBridge(): Plugin {
+  return {
+    name: 'assets-dev-bridge',
+    apply: 'serve',
+    configureServer(server) {
+      const instance = initDevframe(devframe, {
+        base: basePath,
+        distDir: false,
+        server: server.httpServer as Server,
+        auth: false,
+      })
+      return () => server.middlewares.use(instance.nodeMiddleware)
+    },
+  }
+}
+
+/**
+ * `base: './'` for the build keeps the mount path portable: the same `app`
+ * output works whether devframe serves it at `/` (standalone) or
+ * `/__devframes_plugin_assets/` (mounted in a hub). `connectDevframe` resolves
+ * its connection meta relative to `document.baseURI` to match.
+ *
+ * In `vite dev` the panel is served under the devframe base path so its
+ * `document.baseURI` matches production, and {@link assetsDevBridge} bridges the
+ * node side there with HMR. The managed `public/` fixtures are served at `/`
+ * (matching the default `baseURL`) in dev only, so they never land in dist.
+ */
+export default defineConfig(({ command }) => ({
+  base: command === 'serve' ? basePath : './',
+  root: fileURLToPath(new URL('.', import.meta.url)),
+  publicDir: command === 'serve' ? fileURLToPath(new URL('../public', import.meta.url)) : false,
+  resolve: { alias },
+  plugins: [vue(), UnoCSS(), assetsDevBridge()],
+  optimizeDeps: { exclude: ['@antfu/design'] },
+  build: {
+    outDir: fileURLToPath(new URL('../assets-pkg/dist', import.meta.url)),
+    emptyOutDir: true,
+  },
+}))
diff --git a/plugins/assets/bin.mjs b/plugins/assets/bin.mjs
index 6f40a6999..31c3611c5 100755
--- a/plugins/assets/bin.mjs
+++ b/plugins/assets/bin.mjs
@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 import process from 'node:process'
-import { createAssetsCli } from './dist/cli.mjs'
+import { createAssetsCli } from './dist/node/cli.mjs'
 
 async function main() {
   await createAssetsCli().parse()
diff --git a/plugins/assets/package.json b/plugins/assets/package.json
index e493f461c..83f3dd1b6 100644
--- a/plugins/assets/package.json
+++ b/plugins/assets/package.json
@@ -21,14 +21,13 @@
   ],
   "sideEffects": false,
   "exports": {
-    ".": "./dist/index.mjs",
-    "./client": "./dist/client/index.mjs",
-    "./cli": "./dist/cli.mjs",
-    "./node": "./dist/node/index.mjs",
-    "./rpc": "./dist/rpc/index.mjs",
+    ".": "./dist/node/index.mjs",
+    "./cli": "./dist/node/cli.mjs",
+    "./node": "./dist/node/setup.mjs",
+    "./rpc": "./dist/node/rpc/index.mjs",
     "./package.json": "./package.json"
   },
-  "types": "./dist/index.d.mts",
+  "types": "./dist/node/index.d.mts",
   "bin": {
     "devframe-assets": "./bin.mjs"
   },
@@ -37,9 +36,11 @@
     "dist"
   ],
   "scripts": {
-    "build": "tsdown && vite build --config src/spa/vite.config.ts",
-    "dev": "vite --config src/spa/vite.config.ts --host 0.0.0.0",
+    "build": "tsdown && vite build --config app/vite.config.ts",
+    "build:app": "vite build --config app/vite.config.ts",
     "watch": "tsdown --watch",
+    "dev": "vite --config app/vite.config.ts --host",
+    "play": "pnpm run build && node playgrounds/server.mjs",
     "storybook": "storybook dev -p 6013 --host 0.0.0.0",
     "storybook:build": "storybook build",
     "prepack": "turbo run build --filter=@devframes/plugin-assets",
diff --git a/plugins/assets/playgrounds/server.mjs b/plugins/assets/playgrounds/server.mjs
new file mode 100644
index 000000000..6351b9ba4
--- /dev/null
+++ b/plugins/assets/playgrounds/server.mjs
@@ -0,0 +1,59 @@
+#!/usr/bin/env node
+/**
+ * Standalone demo host for the assets manager.
+ *
+ * `initDevframe` runs setup, serves the built Vue panel SPA + `__connection.json`
+ * from `assets-pkg/dist` under the devframe base path, and binds the WebSocket
+ * RPC upgrade onto our http server. The devframe self-serves the managed
+ * directory's bytes (`serveStatic`), pointed at the bundled `public/` fixtures.
+ *
+ *   node playgrounds/server.mjs   → live WebSocket RPC (`assets-pkg/dist`)
+ */
+import { existsSync } from 'node:fs'
+import { createServer } from 'node:http'
+import process from 'node:process'
+import { fileURLToPath } from 'node:url'
+import { initDevframe } from 'devframe/initiate'
+import { getPort } from 'devframe/utils/get-port'
+import { H3, toNodeHandler } from 'h3'
+import { resolve } from 'pathe'
+import createAssetsDevframe from '../src/node/index.ts'
+
+const HERE = fileURLToPath(new URL('.', import.meta.url))
+const ROOT = resolve(HERE, '..')
+const panelDir = resolve(ROOT, 'assets-pkg/dist')
+
+const devframe = createAssetsDevframe({ serveStatic: true, dir: resolve(ROOT, 'public') })
+const basePath = devframe.basePath
+
+async function main() {
+  if (!existsSync(resolve(panelDir, 'index.html'))) {
+    console.error('\n[assets playground] missing assets-pkg/dist/index.html\n  → run `pnpm -C plugins/assets build` first.\n')
+    process.exit(1)
+  }
+
+  const bindHost = '0.0.0.0'
+  const port = await getPort({ host: bindHost, port: 4415 })
+  const origin = `http://localhost:${port}`
+
+  const app = new H3()
+  const server = createServer(toNodeHandler(app))
+  const instance = initDevframe(devframe, {
+    base: basePath,
+    distDir: panelDir,
+    app,
+    server,
+    host: bindHost,
+    origin,
+    auth: false,
+  })
+  await new Promise(r => server.listen(port, bindHost, r))
+  await instance.ready
+
+  process.stdout.write(`\n  Assets manager: dev (live WebSocket RPC)\n  ▸ panel:  ${origin}${basePath}\n\n`)
+}
+
+main().catch((error) => {
+  console.error(error)
+  process.exit(1)
+})
diff --git a/plugins/assets/src/index.ts b/plugins/assets/src/index.ts
deleted file mode 100644
index a8f0f6b47..000000000
--- a/plugins/assets/src/index.ts
+++ /dev/null
@@ -1,160 +0,0 @@
-import type { DevframeDefinition, RemoteAssets } from 'devframe'
-import process from 'node:process'
-import { defineDevframe } from 'devframe'
-import { resolve } from 'pathe'
-import pkg from '../package.json' with { type: 'json' }
-import { DEFAULT_PORT } from './constants'
-import { setupAssets } from './node/index'
-import { DEFAULT_ALLOWED_UPLOAD_EXTENSIONS } from './types'
-
-export type { AssetImageMeta, AssetInfo, AssetType, CodeSnippet } from './types'
-export { DEFAULT_ALLOWED_UPLOAD_EXTENSIONS } from './types'
-
-// The SPA ships in the lockstep `@devframes/plugin-assets--assets` package,
-// served on demand through devframe's remote-assets back-proxy. The definition's
-// `importMetaUrl` (below) supplies the default `resolveFrom`, so a locally
-// installed copy (a workspace link here) is served with zero network.
-const remoteAssets: RemoteAssets = {
-  package: `${pkg.name}--assets`,
-  version: pkg.version,
-}
-
-const DEFAULT_ID = 'devframes_plugin_assets'
-
-export interface AssetsDevframeOptions {
-  id?: string
-  name?: string
-  icon?: string
-  /**
-   * Directory this devframe manages. Defaults to `<cwd>/public`, the
-   * conventional static-asset folder for Nuxt, Vite, and most static-site
-   * frameworks. Pass an absolute path, or one relative to the devframe's
-   * own `cwd`.
-   */
-  dir?: string
-  /**
-   * URL base the **host** serves the managed directory at, used to build
-   * each asset's `publicPath`. Defaults to `/`; Vite, Nuxt, and most
-   * frameworks serve their `public/` folder at the site root. Set this to
-   * match a non-root deployment base (e.g. Nuxt's `app.baseURL`).
-   */
-  baseURL?: string
-  /**
-   * Serve the managed directory's bytes from this devframe itself.
-   * Defaults to `false`: when mounted into a host (Vite/Nuxt/…) that host
-   * already serves `public/` at {@link baseURL}, so the plugin references
-   * those URLs instead of standing up its own route. The standalone CLI
-   * sets this to `true` (it is its own host), serving the directory under
-   * a dedicated base so it doesn't collide with the SPA at `/`.
-   */
-  serveStatic?: boolean
-  basePath?: string
-  distDir?: string
-  /** Preferred standalone CLI port (default 9015). */
-  port?: number
-  /**
-   * Enable upload, rename, delete, and folder creation from the UI.
-   * Enabled by default; set `false` (or pass `--read-only` on the
-   * standalone CLI) for a browse-only deployment.
-   */
-  write?: boolean
-  /**
-   * Extensions `upload` accepts, or `'*'` to accept any file. Defaults to
-   * the same allow-list Nuxt DevTools ships.
-   */
-  uploadExtensions?: readonly string[] | '*'
-  /**
-   * Watch the managed directory in dev mode and push live listing updates.
-   * Enabled by default. Set `false` to skip the file watcher, useful when a
-   * host mounts the devframe in a short-lived or repeatedly-recreated
-   * context (tests, some SSR dev servers) where a background watcher isn't
-   * wanted.
-   */
-  watch?: boolean
-  /**
-   * Require the trust handshake on the standalone server. Enabled by
-   * default, because this devframe can read, write, and delete real files.
-   */
-  auth?: boolean
-  /**
-   * Register the `build` CLI subcommand. Disabled by default: a static
-   * export can only ever list file metadata from a baked snapshot; there
-   * is no live host serving the files, and every write action is inherently
-   * excluded from a static dump, so the command would produce a broken,
-   * write-less shell of the tool. Opt back in if that degraded export is
-   * still useful to you.
-   */
-  build?: boolean
-}
-
-/**
- * Create the assets manager devframe, a framework-neutral port of Nuxt
- * DevTools' Assets tab. Mount it into any host via devframe's adapters, or
- * run it standalone with the bundled CLI (`devframe-assets`).
- *
- * @experimental This plugin is experimental and may change without a major
- * version bump until it stabilizes.
- */
-export function createAssetsDevframe(options: AssetsDevframeOptions = {}): DevframeDefinition {
-  const id = options.id ?? DEFAULT_ID
-  // Resolve the managed dir at factory time (process.cwd() here equals the
-  // adapter's ctx.cwd, the same process) so it can be declared as a service-open
-  // allowed root before any setup runs. Only matters when `dir` points
-  // outside the workspace; an in-workspace `public/` is already allowed.
-  const dir = options.dir ? resolve(process.cwd(), options.dir) : resolve(process.cwd(), 'public')
-  const distDir = options.distDir ?? remoteAssets
-  const write = options.write ?? true
-  const serveStatic = options.serveStatic ?? false
-  // When self-serving (standalone CLI), mount under a dedicated base so the
-  // asset bytes don't collide with the SPA served at `/`. Otherwise trust the
-  // host to serve `public/` at `baseURL` (default `/`).
-  const baseURL = options.baseURL ?? (serveStatic ? `/__${id}-raw/` : '/')
-
-  return defineDevframe({
-    id,
-    name: options.name ?? 'Assets',
-    version: pkg.version,
-    packageName: pkg.name,
-    importMetaUrl: import.meta.url,
-    homepage: pkg.homepage,
-    description: pkg.description,
-    icon: options.icon ?? 'ph:image-square-duotone',
-    basePath: options.basePath,
-    capabilities: { build: options.build ?? false },
-    cli: {
-      command: 'devframe-assets',
-      port: options.port ?? DEFAULT_PORT,
-      distDir,
-      auth: options.auth ?? true,
-      configure(cli) {
-        cli.option('--read-only', 'Disable upload, rename, delete, and folder creation')
-      },
-    },
-    dock: { category: '~builtin' },
-    /**
-     * Both wire services are declared, not imperatively installed: devframe
-     * constructs them (deep-merging options across every declarer) before
-     * setup runs. `service-open` gets the managed dir as an allowed root so
-     * out-of-workspace dirs open; the client hits it directly with the
-     * dev-only absolute `fsPath`. `service-shiki` backs server-highlighted
-     * text previews, with a plain `<pre>` fallback when it isn't advertised.
-     */
-    services: [
-      { package: '@devframes/service-open', options: { roots: [dir] } },
-      { package: '@devframes/service-shiki' },
-    ],
-    async setup(ctx, info) {
-      const readOnlyFlag = info?.flags?.readOnly === true
-      await setupAssets(ctx, {
-        dir,
-        write: readOnlyFlag ? false : write,
-        uploadExtensions: options.uploadExtensions ?? DEFAULT_ALLOWED_UPLOAD_EXTENSIONS,
-        baseURL,
-        serveStatic,
-        watch: options.watch ?? true,
-      })
-    },
-  })
-}
-
-export default createAssetsDevframe
diff --git a/plugins/assets/src/cli.ts b/plugins/assets/src/node/cli.ts
similarity index 100%
rename from plugins/assets/src/cli.ts
rename to plugins/assets/src/node/cli.ts
diff --git a/plugins/assets/src/constants.ts b/plugins/assets/src/node/constants.ts
similarity index 100%
rename from plugins/assets/src/constants.ts
rename to plugins/assets/src/node/constants.ts
diff --git a/plugins/assets/src/diagnostics.ts b/plugins/assets/src/node/diagnostics.ts
similarity index 100%
rename from plugins/assets/src/diagnostics.ts
rename to plugins/assets/src/node/diagnostics.ts
diff --git a/plugins/assets/src/node/index.ts b/plugins/assets/src/node/index.ts
index ff9d1b94d..27239d30f 100644
--- a/plugins/assets/src/node/index.ts
+++ b/plugins/assets/src/node/index.ts
@@ -1,91 +1,160 @@
-import type { DevframeNodeContext } from 'devframe'
-import { existsSync } from 'node:fs'
-import fsp from 'node:fs/promises'
-import { UPLOAD_CHANNEL } from '../rpc/functions/upload'
-import { readFunctions, writeFunctions } from '../rpc/index'
-import { configureAssets } from './context'
-import { watchAssetsDir } from './watcher'
+import type { DevframeDefinition, RemoteAssets } from 'devframe'
+import process from 'node:process'
+import { defineDevframe } from 'devframe'
+import { resolve } from 'pathe'
+import pkg from '../../package.json' with { type: 'json' }
+import { DEFAULT_PORT } from './constants'
+import { setupAssets } from './setup'
+import { DEFAULT_ALLOWED_UPLOAD_EXTENSIONS } from './types'
 
-export interface SetupAssetsOptions {
-  /** Directory this devframe manages. */
-  dir: string
-  /** Whether upload / rename / delete / mkdir are registered. */
-  write: boolean
-  /** Extensions `upload` accepts, or `'*'` to accept any. */
-  uploadExtensions: readonly string[] | '*'
+export type { AssetImageMeta, AssetInfo, AssetType, CodeSnippet } from './types'
+export { DEFAULT_ALLOWED_UPLOAD_EXTENSIONS } from './types'
+
+// The SPA ships in the lockstep `@devframes/plugin-assets--assets` package,
+// served on demand through devframe's remote-assets back-proxy. The definition's
+// `importMetaUrl` (below) supplies the default `resolveFrom`, so a locally
+// installed copy (a workspace link here) is served with zero network.
+const remoteAssets: RemoteAssets = {
+  package: `${pkg.name}--assets`,
+  version: pkg.version,
+}
+
+const DEFAULT_ID = 'devframes_plugin_assets'
+
+export interface AssetsDevframeOptions {
+  id?: string
+  name?: string
+  icon?: string
+  /**
+   * Directory this devframe manages. Defaults to `<cwd>/public`, the
+   * conventional static-asset folder for Nuxt, Vite, and most static-site
+   * frameworks. Pass an absolute path, or one relative to the devframe's
+   * own `cwd`.
+   */
+  dir?: string
+  /**
+   * URL base the **host** serves the managed directory at, used to build
+   * each asset's `publicPath`. Defaults to `/`; Vite, Nuxt, and most
+   * frameworks serve their `public/` folder at the site root. Set this to
+   * match a non-root deployment base (e.g. Nuxt's `app.baseURL`).
+   */
+  baseURL?: string
+  /**
+   * Serve the managed directory's bytes from this devframe itself.
+   * Defaults to `false`: when mounted into a host (Vite/Nuxt/…) that host
+   * already serves `public/` at {@link baseURL}, so the plugin references
+   * those URLs instead of standing up its own route. The standalone CLI
+   * sets this to `true` (it is its own host), serving the directory under
+   * a dedicated base so it doesn't collide with the SPA at `/`.
+   */
+  serveStatic?: boolean
+  basePath?: string
+  distDir?: string
+  /** Preferred standalone CLI port (default 9015). */
+  port?: number
+  /**
+   * Enable upload, rename, delete, and folder creation from the UI.
+   * Enabled by default; set `false` (or pass `--read-only` on the
+   * standalone CLI) for a browse-only deployment.
+   */
+  write?: boolean
+  /**
+   * Extensions `upload` accepts, or `'*'` to accept any file. Defaults to
+   * the same allow-list Nuxt DevTools ships.
+   */
+  uploadExtensions?: readonly string[] | '*'
+  /**
+   * Watch the managed directory in dev mode and push live listing updates.
+   * Enabled by default. Set `false` to skip the file watcher, useful when a
+   * host mounts the devframe in a short-lived or repeatedly-recreated
+   * context (tests, some SSR dev servers) where a background watcher isn't
+   * wanted.
+   */
+  watch?: boolean
   /**
-   * URL base the managed directory is served at, the base every asset's
-   * `publicPath` is resolved against.
+   * Require the trust handshake on the standalone server. Enabled by
+   * default, because this devframe can read, write, and delete real files.
    */
-  baseURL: string
+  auth?: boolean
   /**
-   * Whether this devframe should serve the managed directory's bytes
-   * itself. Left `false` when mounted into a host (Vite / Nuxt / …) that
-   * already serves `public/` at {@link baseURL}; set `true` only for the
-   * standalone CLI, which is its own host.
+   * Register the `build` CLI subcommand. Disabled by default: a static
+   * export can only ever list file metadata from a baked snapshot; there
+   * is no live host serving the files, and every write action is inherently
+   * excluded from a static dump, so the command would produce a broken,
+   * write-less shell of the tool. Opt back in if that degraded export is
+   * still useful to you.
    */
-  serveStatic: boolean
-  /** Start the live file watcher (dev mode only). */
-  watch: boolean
+  build?: boolean
 }
 
-const watchers = new WeakMap<DevframeNodeContext, () => Promise<void>>()
-
 /**
- * Register the assets RPC surface on a devframe node context: ensures the
- * managed directory exists, registers the read RPCs (always) and write
- * RPCs (when enabled), and starts a live file watcher in dev mode.
+ * Create the assets manager devframe, a framework-neutral port of Nuxt
+ * DevTools' Assets tab. Mount it into any host via devframe's adapters, or
+ * run it standalone with the bundled CLI (`devframe-assets`).
  *
- * Raw asset bytes (for `<img>`/`<video>`/download previews) are served by
- * the **host** the plugin is attached to: Vite, Nuxt, or any framework
- * already serves its `public/` dir at {@link SetupAssetsOptions.baseURL}.
- * The plugin only serves them itself when `serveStatic` is set (the
- * standalone CLI, which is its own host).
- *
- * Called from the definition's `setup(ctx)` and reusable by host adapters
- * that wire their own context.
+ * @experimental This plugin is experimental and may change without a major
+ * version bump until it stabilizes.
  */
-export async function setupAssets(ctx: DevframeNodeContext, options: SetupAssetsOptions): Promise<void> {
-  if (!existsSync(options.dir))
-    await fsp.mkdir(options.dir, { recursive: true })
-
-  const uploadChannel = options.write
-    ? ctx.rpc.streaming.create<Uint8Array>(UPLOAD_CHANNEL)
-    : undefined
-
-  configureAssets(ctx, { ...options, uploadChannel })
+export function createAssetsDevframe(options: AssetsDevframeOptions = {}): DevframeDefinition {
+  const id = options.id ?? DEFAULT_ID
+  // Resolve the managed dir at factory time (process.cwd() here equals the
+  // adapter's ctx.cwd, the same process) so it can be declared as a service-open
+  // allowed root before any setup runs. Only matters when `dir` points
+  // outside the workspace; an in-workspace `public/` is already allowed.
+  const dir = options.dir ? resolve(process.cwd(), options.dir) : resolve(process.cwd(), 'public')
+  const distDir = options.distDir ?? remoteAssets
+  const write = options.write ?? true
+  const serveStatic = options.serveStatic ?? false
+  // When self-serving (standalone CLI), mount under a dedicated base so the
+  // asset bytes don't collide with the SPA served at `/`. Otherwise trust the
+  // host to serve `public/` at `baseURL` (default `/`).
+  const baseURL = options.baseURL ?? (serveStatic ? `/__${id}-raw/` : '/')
 
-  // Only self-serve when this devframe is its own host (the standalone
-  // CLI). When attached to a Vite/Nuxt/etc. dev server, that host already
-  // serves the managed directory at `baseURL`, so we reference its URLs
-  // rather than mounting our own route.
-  if (options.serveStatic)
-    ctx.views.hostStatic(options.baseURL, options.dir)
-
-  for (const fn of readFunctions)
-    ctx.rpc.register(fn)
-  if (options.write) {
-    for (const fn of writeFunctions)
-      ctx.rpc.register(fn)
-  }
-
-  if (ctx.mode === 'dev' && options.watch)
-    watchers.set(ctx, watchAssetsDir(ctx, options.dir))
-}
-
-/**
- * Stop the live file watcher started by {@link setupAssets}. Test harnesses
- * wrap their dev-server `close()` with this (see `test/_utils.ts`), so a
- * leaked chokidar watcher doesn't keep the process alive.
- */
-export async function disposeAssetsWatcher(ctx: DevframeNodeContext): Promise<void> {
-  const dispose = watchers.get(ctx)
-  if (!dispose)
-    return
-  watchers.delete(ctx)
-  await dispose()
+  return defineDevframe({
+    id,
+    name: options.name ?? 'Assets',
+    version: pkg.version,
+    packageName: pkg.name,
+    importMetaUrl: import.meta.url,
+    homepage: pkg.homepage,
+    description: pkg.description,
+    icon: options.icon ?? 'ph:image-square-duotone',
+    basePath: options.basePath,
+    capabilities: { build: options.build ?? false },
+    cli: {
+      command: 'devframe-assets',
+      port: options.port ?? DEFAULT_PORT,
+      distDir,
+      auth: options.auth ?? true,
+      configure(cli) {
+        cli.option('--read-only', 'Disable upload, rename, delete, and folder creation')
+      },
+    },
+    dock: { category: '~builtin' },
+    /**
+     * Both wire services are declared, not imperatively installed: devframe
+     * constructs them (deep-merging options across every declarer) before
+     * setup runs. `service-open` gets the managed dir as an allowed root so
+     * out-of-workspace dirs open; the client hits it directly with the
+     * dev-only absolute `fsPath`. `service-shiki` backs server-highlighted
+     * text previews, with a plain `<pre>` fallback when it isn't advertised.
+     */
+    services: [
+      { package: '@devframes/service-open', options: { roots: [dir] } },
+      { package: '@devframes/service-shiki' },
+    ],
+    async setup(ctx, info) {
+      const readOnlyFlag = info?.flags?.readOnly === true
+      await setupAssets(ctx, {
+        dir,
+        write: readOnlyFlag ? false : write,
+        uploadExtensions: options.uploadExtensions ?? DEFAULT_ALLOWED_UPLOAD_EXTENSIONS,
+        baseURL,
+        serveStatic,
+        watch: options.watch ?? true,
+      })
+    },
+  })
 }
 
-export { configureAssets, getAssetsContext } from './context'
-export { resolveAssetPath } from './paths'
-export { guessAssetType, scanAssets } from './scanner'
+export default createAssetsDevframe
diff --git a/plugins/assets/src/node/paths.ts b/plugins/assets/src/node/paths.ts
index a86d4b4e0..7f7b672a1 100644
--- a/plugins/assets/src/node/paths.ts
+++ b/plugins/assets/src/node/paths.ts
@@ -1,6 +1,6 @@
 import fsp from 'node:fs/promises'
 import { normalize, resolve } from 'pathe'
-import { diagnostics } from '../diagnostics'
+import { diagnostics } from './diagnostics'
 
 /** realpath, pathe-normalized, or `null` when the path doesn't exist. */
 async function realpath(path: string): Promise<string | null> {
diff --git a/plugins/assets/src/rpc/functions/capabilities.ts b/plugins/assets/src/node/rpc/functions/capabilities.ts
similarity index 96%
rename from plugins/assets/src/rpc/functions/capabilities.ts
rename to plugins/assets/src/node/rpc/functions/capabilities.ts
index 0a57148a4..8c7e70c4a 100644
--- a/plugins/assets/src/rpc/functions/capabilities.ts
+++ b/plugins/assets/src/node/rpc/functions/capabilities.ts
@@ -1,7 +1,7 @@
 import type { DevframeNodeContext } from 'devframe'
 import { createDefineWrapperWithContext } from 'devframe/rpc'
 import { s } from 'devframe/utils/simple-schema'
-import { getAssetsContext } from '../../node/context'
+import { getAssetsContext } from '../../context'
 
 const defineAssetsRpc = createDefineWrapperWithContext<DevframeNodeContext>()
 
diff --git a/plugins/assets/src/rpc/functions/delete.ts b/plugins/assets/src/node/rpc/functions/delete.ts
similarity index 93%
rename from plugins/assets/src/rpc/functions/delete.ts
rename to plugins/assets/src/node/rpc/functions/delete.ts
index 3f143fdd6..c27df8087 100644
--- a/plugins/assets/src/rpc/functions/delete.ts
+++ b/plugins/assets/src/node/rpc/functions/delete.ts
@@ -2,8 +2,8 @@ import type { DevframeNodeContext } from 'devframe'
 import fsp from 'node:fs/promises'
 import { createDefineWrapperWithContext } from 'devframe/rpc'
 import { s } from 'devframe/utils/simple-schema'
-import { getAssetsContext } from '../../node/context'
-import { assertAssetMutationPath } from '../../node/paths'
+import { getAssetsContext } from '../../context'
+import { assertAssetMutationPath } from '../../paths'
 
 const defineAssetsRpc = createDefineWrapperWithContext<DevframeNodeContext>()
 
diff --git a/plugins/assets/src/rpc/functions/list.ts b/plugins/assets/src/node/rpc/functions/list.ts
similarity index 93%
rename from plugins/assets/src/rpc/functions/list.ts
rename to plugins/assets/src/node/rpc/functions/list.ts
index e15a6263c..9ed94f5cf 100644
--- a/plugins/assets/src/rpc/functions/list.ts
+++ b/plugins/assets/src/node/rpc/functions/list.ts
@@ -2,8 +2,8 @@ import type { DevframeNodeContext } from 'devframe'
 import type { AssetInfo } from '../../types'
 import { createDefineWrapperWithContext } from 'devframe/rpc'
 import { s } from 'devframe/utils/simple-schema'
-import { getAssetsContext } from '../../node/context'
-import { scanAssets } from '../../node/scanner'
+import { getAssetsContext } from '../../context'
+import { scanAssets } from '../../scanner'
 
 const defineAssetsRpc = createDefineWrapperWithContext<DevframeNodeContext>()
 
diff --git a/plugins/assets/src/rpc/functions/mkdir.ts b/plugins/assets/src/node/rpc/functions/mkdir.ts
similarity index 92%
rename from plugins/assets/src/rpc/functions/mkdir.ts
rename to plugins/assets/src/node/rpc/functions/mkdir.ts
index 82d8aca0c..73615eee4 100644
--- a/plugins/assets/src/rpc/functions/mkdir.ts
+++ b/plugins/assets/src/node/rpc/functions/mkdir.ts
@@ -2,9 +2,9 @@ import type { DevframeNodeContext } from 'devframe'
 import fsp from 'node:fs/promises'
 import { createDefineWrapperWithContext } from 'devframe/rpc'
 import { s } from 'devframe/utils/simple-schema'
+import { getAssetsContext } from '../../context'
 import { diagnostics } from '../../diagnostics'
-import { getAssetsContext } from '../../node/context'
-import { assertAssetMutationPath } from '../../node/paths'
+import { assertAssetMutationPath } from '../../paths'
 
 const defineAssetsRpc = createDefineWrapperWithContext<DevframeNodeContext>()
 
diff --git a/plugins/assets/src/rpc/functions/read-image-meta.ts b/plugins/assets/src/node/rpc/functions/read-image-meta.ts
similarity index 92%
rename from plugins/assets/src/rpc/functions/read-image-meta.ts
rename to plugins/assets/src/node/rpc/functions/read-image-meta.ts
index 07eac9241..d313717a0 100644
--- a/plugins/assets/src/rpc/functions/read-image-meta.ts
+++ b/plugins/assets/src/node/rpc/functions/read-image-meta.ts
@@ -4,8 +4,8 @@ import fsp from 'node:fs/promises'
 import { createDefineWrapperWithContext } from 'devframe/rpc'
 import { s } from 'devframe/utils/simple-schema'
 import { imageMeta } from 'image-meta'
-import { getAssetsContext } from '../../node/context'
-import { resolveAssetReadPath } from '../../node/paths'
+import { getAssetsContext } from '../../context'
+import { resolveAssetReadPath } from '../../paths'
 
 const defineAssetsRpc = createDefineWrapperWithContext<DevframeNodeContext>()
 
diff --git a/plugins/assets/src/rpc/functions/read-text.ts b/plugins/assets/src/node/rpc/functions/read-text.ts
similarity index 91%
rename from plugins/assets/src/rpc/functions/read-text.ts
rename to plugins/assets/src/node/rpc/functions/read-text.ts
index 646bc37a3..a6b255885 100644
--- a/plugins/assets/src/rpc/functions/read-text.ts
+++ b/plugins/assets/src/node/rpc/functions/read-text.ts
@@ -2,8 +2,8 @@ import type { DevframeNodeContext } from 'devframe'
 import fsp from 'node:fs/promises'
 import { createDefineWrapperWithContext } from 'devframe/rpc'
 import { s } from 'devframe/utils/simple-schema'
-import { getAssetsContext } from '../../node/context'
-import { resolveAssetReadPath } from '../../node/paths'
+import { getAssetsContext } from '../../context'
+import { resolveAssetReadPath } from '../../paths'
 
 const defineAssetsRpc = createDefineWrapperWithContext<DevframeNodeContext>()
 
diff --git a/plugins/assets/src/rpc/functions/rename.ts b/plugins/assets/src/node/rpc/functions/rename.ts
similarity index 94%
rename from plugins/assets/src/rpc/functions/rename.ts
rename to plugins/assets/src/node/rpc/functions/rename.ts
index 58fbbfbdc..278188a97 100644
--- a/plugins/assets/src/rpc/functions/rename.ts
+++ b/plugins/assets/src/node/rpc/functions/rename.ts
@@ -4,10 +4,10 @@ import fsp from 'node:fs/promises'
 import { createDefineWrapperWithContext } from 'devframe/rpc'
 import { s } from 'devframe/utils/simple-schema'
 import { dirname, extname } from 'pathe'
+import { getAssetsContext } from '../../context'
 import { diagnostics } from '../../diagnostics'
-import { getAssetsContext } from '../../node/context'
-import { assertAssetMutationPath } from '../../node/paths'
-import { statToAssetInfo } from '../../node/scanner'
+import { assertAssetMutationPath } from '../../paths'
+import { statToAssetInfo } from '../../scanner'
 import { assetInfoSchema } from './list'
 
 const defineAssetsRpc = createDefineWrapperWithContext<DevframeNodeContext>()
diff --git a/plugins/assets/src/rpc/functions/upload.ts b/plugins/assets/src/node/rpc/functions/upload.ts
similarity index 96%
rename from plugins/assets/src/rpc/functions/upload.ts
rename to plugins/assets/src/node/rpc/functions/upload.ts
index 90ccb3bf1..7714abcfc 100644
--- a/plugins/assets/src/rpc/functions/upload.ts
+++ b/plugins/assets/src/node/rpc/functions/upload.ts
@@ -4,9 +4,9 @@ import fsp from 'node:fs/promises'
 import { createDefineWrapperWithContext } from 'devframe/rpc'
 import { s } from 'devframe/utils/simple-schema'
 import { dirname, extname } from 'pathe'
+import { getAssetsContext } from '../../context'
 import { diagnostics } from '../../diagnostics'
-import { getAssetsContext } from '../../node/context'
-import { assertAssetMutationPath } from '../../node/paths'
+import { assertAssetMutationPath } from '../../paths'
 
 const defineAssetsRpc = createDefineWrapperWithContext<DevframeNodeContext>()
 
diff --git a/plugins/assets/src/rpc/index.ts b/plugins/assets/src/node/rpc/index.ts
similarity index 100%
rename from plugins/assets/src/rpc/index.ts
rename to plugins/assets/src/node/rpc/index.ts
diff --git a/plugins/assets/src/node/scanner.ts b/plugins/assets/src/node/scanner.ts
index 7871ab595..d670d4a11 100644
--- a/plugins/assets/src/node/scanner.ts
+++ b/plugins/assets/src/node/scanner.ts
@@ -1,5 +1,5 @@
 import type { Stats } from 'node:fs'
-import type { AssetInfo, AssetType } from '../types'
+import type { AssetInfo, AssetType } from './types'
 import fsp from 'node:fs/promises'
 import { join } from 'pathe'
 import { glob } from 'tinyglobby'
diff --git a/plugins/assets/src/node/setup.ts b/plugins/assets/src/node/setup.ts
new file mode 100644
index 000000000..868a1905a
--- /dev/null
+++ b/plugins/assets/src/node/setup.ts
@@ -0,0 +1,91 @@
+import type { DevframeNodeContext } from 'devframe'
+import { existsSync } from 'node:fs'
+import fsp from 'node:fs/promises'
+import { configureAssets } from './context'
+import { UPLOAD_CHANNEL } from './rpc/functions/upload'
+import { readFunctions, writeFunctions } from './rpc/index'
+import { watchAssetsDir } from './watcher'
+
+export interface SetupAssetsOptions {
+  /** Directory this devframe manages. */
+  dir: string
+  /** Whether upload / rename / delete / mkdir are registered. */
+  write: boolean
+  /** Extensions `upload` accepts, or `'*'` to accept any. */
+  uploadExtensions: readonly string[] | '*'
+  /**
+   * URL base the managed directory is served at, the base every asset's
+   * `publicPath` is resolved against.
+   */
+  baseURL: string
+  /**
+   * Whether this devframe should serve the managed directory's bytes
+   * itself. Left `false` when mounted into a host (Vite / Nuxt / …) that
+   * already serves `public/` at {@link baseURL}; set `true` only for the
+   * standalone CLI, which is its own host.
+   */
+  serveStatic: boolean
+  /** Start the live file watcher (dev mode only). */
+  watch: boolean
+}
+
+const watchers = new WeakMap<DevframeNodeContext, () => Promise<void>>()
+
+/**
+ * Register the assets RPC surface on a devframe node context: ensures the
+ * managed directory exists, registers the read RPCs (always) and write
+ * RPCs (when enabled), and starts a live file watcher in dev mode.
+ *
+ * Raw asset bytes (for `<img>`/`<video>`/download previews) are served by
+ * the **host** the plugin is attached to: Vite, Nuxt, or any framework
+ * already serves its `public/` dir at {@link SetupAssetsOptions.baseURL}.
+ * The plugin only serves them itself when `serveStatic` is set (the
+ * standalone CLI, which is its own host).
+ *
+ * Called from the definition's `setup(ctx)` and reusable by host adapters
+ * that wire their own context.
+ */
+export async function setupAssets(ctx: DevframeNodeContext, options: SetupAssetsOptions): Promise<void> {
+  if (!existsSync(options.dir))
+    await fsp.mkdir(options.dir, { recursive: true })
+
+  const uploadChannel = options.write
+    ? ctx.rpc.streaming.create<Uint8Array>(UPLOAD_CHANNEL)
+    : undefined
+
+  configureAssets(ctx, { ...options, uploadChannel })
+
+  // Only self-serve when this devframe is its own host (the standalone
+  // CLI). When attached to a Vite/Nuxt/etc. dev server, that host already
+  // serves the managed directory at `baseURL`, so we reference its URLs
+  // rather than mounting our own route.
+  if (options.serveStatic)
+    ctx.views.hostStatic(options.baseURL, options.dir)
+
+  for (const fn of readFunctions)
+    ctx.rpc.register(fn)
+  if (options.write) {
+    for (const fn of writeFunctions)
+      ctx.rpc.register(fn)
+  }
+
+  if (ctx.mode === 'dev' && options.watch)
+    watchers.set(ctx, watchAssetsDir(ctx, options.dir))
+}
+
+/**
+ * Stop the live file watcher started by {@link setupAssets}. Test harnesses
+ * wrap their dev-server `close()` with this (see `test/_utils.ts`), so a
+ * leaked chokidar watcher doesn't keep the process alive.
+ */
+export async function disposeAssetsWatcher(ctx: DevframeNodeContext): Promise<void> {
+  const dispose = watchers.get(ctx)
+  if (!dispose)
+    return
+  watchers.delete(ctx)
+  await dispose()
+}
+
+export { configureAssets, getAssetsContext } from './context'
+export { resolveAssetPath } from './paths'
+export { guessAssetType, scanAssets } from './scanner'
diff --git a/plugins/assets/src/types.ts b/plugins/assets/src/node/types.ts
similarity index 100%
rename from plugins/assets/src/types.ts
rename to plugins/assets/src/node/types.ts
diff --git a/plugins/assets/src/node/watcher.ts b/plugins/assets/src/node/watcher.ts
index f83dd38ae..58b6aebca 100644
--- a/plugins/assets/src/node/watcher.ts
+++ b/plugins/assets/src/node/watcher.ts
@@ -2,7 +2,7 @@ import type { DevframeNodeContext } from 'devframe'
 import process from 'node:process'
 import { watch } from 'chokidar'
 import { debounce } from 'perfect-debounce'
-import { CHANGED_EVENT } from '../constants'
+import { CHANGED_EVENT } from './constants'
 
 /**
  * Watch the managed directory and broadcast {@link CHANGED_EVENT} (debounced)
diff --git a/plugins/assets/src/spa/vite.config.ts b/plugins/assets/src/spa/vite.config.ts
deleted file mode 100644
index c23213593..000000000
--- a/plugins/assets/src/spa/vite.config.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import process from 'node:process'
-import { fileURLToPath } from 'node:url'
-import { devframeVite } from '@devframes/vite/single'
-import vue from '@vitejs/plugin-vue'
-import { resolve } from 'pathe'
-import UnoCSS from 'unocss/vite'
-import { defineConfig } from 'vite'
-import { alias } from '../../../../alias'
-import createAssetsDevframe from '../index'
-
-/**
- * The plugin manages `<cwd>/public` and (as a mounted plugin) does NOT serve
- * those bytes itself; it references the host's URLs. Here the host is Vite,
- * so in dev point Vite's own `publicDir` at the managed directory and it
- * serves the fixtures at `/` (matching the default `baseURL`), exactly as a
- * real Vite app serves its `public/` folder. Disabled for `build` so the
- * fixtures never get copied into the shipped SPA dist.
- */
-export default defineConfig(({ command }) => ({
-  base: './',
-  root: fileURLToPath(new URL('.', import.meta.url)),
-  publicDir: command === 'serve' ? resolve(process.cwd(), 'public') : false,
-  resolve: { alias },
-  plugins: [
-    vue(),
-    UnoCSS(),
-    devframeVite(createAssetsDevframe(), { bridge: true, base: '/' }),
-  ],
-  /**
-   * `@antfu/design` ships raw `.ts`/`.vue`; let `@vitejs/plugin-vue` compile
-   * its SFCs instead of esbuild pre-bundling them.
-   */
-  optimizeDeps: { exclude: ['@antfu/design'] },
-  build: {
-    outDir: fileURLToPath(new URL('../../assets-pkg/dist', import.meta.url)),
-    emptyOutDir: true,
-  },
-}))
diff --git a/plugins/assets/test/_utils.ts b/plugins/assets/test/_utils.ts
index 5c3e92eb4..42f63b573 100644
--- a/plugins/assets/test/_utils.ts
+++ b/plugins/assets/test/_utils.ts
@@ -1,6 +1,6 @@
 import type { DevframeNodeContext } from 'devframe'
 import type { StartedServer } from 'devframe/internal'
-import type { AssetsDevframeOptions } from '../src/index'
+import type { AssetsDevframeOptions } from '../src/node/index'
 import { mkdtemp, rm } from 'node:fs/promises'
 import { tmpdir } from 'node:os'
 import { join } from 'node:path'
@@ -14,8 +14,8 @@ import { getPort } from 'devframe/utils/get-port'
 import { mountStaticHandler } from 'devframe/utils/serve-static'
 import { H3 } from 'h3'
 import { serveTestContext } from '../../../tests/helpers/serve-test-context'
-import { createAssetsDevframe } from '../src/index'
-import { disposeAssetsWatcher } from '../src/node/index'
+import { createAssetsDevframe } from '../src/node/index'
+import { disposeAssetsWatcher } from '../src/node/setup'
 
 export interface AssetsServer extends StartedServer {
   ctx: DevframeNodeContext
diff --git a/plugins/assets/tsconfig.json b/plugins/assets/tsconfig.json
index ae26cc848..12b39049a 100644
--- a/plugins/assets/tsconfig.json
+++ b/plugins/assets/tsconfig.json
@@ -8,5 +8,5 @@
     "noEmit": true,
     "isolatedDeclarations": false
   },
-  "include": ["src", "test", "bin.mjs", ".storybook"]
+  "include": ["src", "app", "test", "playgrounds", "bin.mjs", ".storybook"]
 }
diff --git a/plugins/assets/tsdown.config.ts b/plugins/assets/tsdown.config.ts
index 1465c436d..b55de95ad 100644
--- a/plugins/assets/tsdown.config.ts
+++ b/plugins/assets/tsdown.config.ts
@@ -2,32 +2,31 @@ import { defineConfig } from 'tsdown'
 
 const tsconfig = '../../tsconfig.base.json'
 
-const clientEntries = {
-  'client/index': 'src/client/index.ts',
-}
-
-const serverEntries = {
-  'index': 'src/index.ts',
-  'cli': 'src/cli.ts',
+// Node-side entries: the devframe definition (root), the setup module, the
+// CLI adapter, and the RPC registry.
+const nodeEntries = {
   'node/index': 'src/node/index.ts',
-  'rpc/index': 'src/rpc/index.ts',
+  'node/setup': 'src/node/setup.ts',
+  'node/cli': 'src/node/cli.ts',
+  'node/rpc/index': 'src/node/rpc/index.ts',
 }
 
+/**
+ * Two configs keep the graphs isolated:
+ * 1. node runtime (`clean: true`): clears dist/;
+ * 2. dts in one graph so the `declare module 'devframe'` RPC
+ *    augmentation resolves once.
+ *
+ * The Vue panel SPA (`app/`) builds separately with Vite into the lockstep
+ * `@devframes/plugin-assets--assets` package.
+ */
 export default defineConfig([
   {
     clean: true,
-    platform: 'browser',
-    tsconfig,
-    dts: false,
-    outExtensions: () => ({ js: '.mjs' }),
-    entry: clientEntries,
-  },
-  {
-    clean: false,
     platform: 'node',
     tsconfig,
     dts: false,
-    entry: serverEntries,
+    entry: nodeEntries,
   },
   {
     clean: false,
@@ -35,6 +34,6 @@ export default defineConfig([
     tsconfig,
     dts: { emitDtsOnly: true },
     outExtensions: () => ({ dts: '.d.mts' }),
-    entry: { ...clientEntries, ...serverEntries },
+    entry: nodeEntries,
   },
 ])
diff --git a/plugins/code-server/.storybook/main.ts b/plugins/code-server/.storybook/main.ts
index e6a304aea..1113ca5b6 100644
--- a/plugins/code-server/.storybook/main.ts
+++ b/plugins/code-server/.storybook/main.ts
@@ -5,7 +5,7 @@ import { mergeConfig } from 'vite'
 import { alias } from '../../../alias'
 
 const config: StorybookConfig = {
-  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  stories: ['../{src,app}/**/*.stories.@(ts)'],
   addons: ['@storybook/addon-docs'],
   framework: {
     name: '@storybook/vue3-vite',
diff --git a/plugins/code-server/.storybook/preview.ts b/plugins/code-server/.storybook/preview.ts
index f7ff9c3f6..759a14cb0 100644
--- a/plugins/code-server/.storybook/preview.ts
+++ b/plugins/code-server/.storybook/preview.ts
@@ -1,7 +1,7 @@
 import type { Decorator, Preview } from '@storybook/vue3-vite'
 import 'virtual:uno.css'
 import '@antfu/design/styles.css'
-import '../src/spa/style.css'
+import '../app/style.css'
 
 // Drive the shared `@antfu/design` tokens off the toolbar theme toggle: dark mode
 // is the `.dark` class on `<html>`, and the canvas takes the semantic
diff --git a/plugins/code-server/src/spa/App.vue b/plugins/code-server/app/App.vue
similarity index 100%
rename from plugins/code-server/src/spa/App.vue
rename to plugins/code-server/app/App.vue
diff --git a/plugins/code-server/src/spa/components/ConnectionOverlay.vue b/plugins/code-server/app/components/ConnectionOverlay.vue
similarity index 95%
rename from plugins/code-server/src/spa/components/ConnectionOverlay.vue
rename to plugins/code-server/app/components/ConnectionOverlay.vue
index af93642fc..bf4cc8763 100644
--- a/plugins/code-server/src/spa/components/ConnectionOverlay.vue
+++ b/plugins/code-server/app/components/ConnectionOverlay.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { DevframeConnectionStatus } from '@devframes/plugin-code-server/client'
+import type { DevframeConnectionStatus } from '../connect'
 import ActionButton from '@antfu/design/components/Action/ActionButton.vue'
 import { computed } from 'vue'
 
diff --git a/plugins/code-server/src/spa/components/EditorFrame.stories.ts b/plugins/code-server/app/components/EditorFrame.stories.ts
similarity index 100%
rename from plugins/code-server/src/spa/components/EditorFrame.stories.ts
rename to plugins/code-server/app/components/EditorFrame.stories.ts
diff --git a/plugins/code-server/src/spa/components/EditorFrame.vue b/plugins/code-server/app/components/EditorFrame.vue
similarity index 95%
rename from plugins/code-server/src/spa/components/EditorFrame.vue
rename to plugins/code-server/app/components/EditorFrame.vue
index 4fd88c65c..f1fd0a880 100644
--- a/plugins/code-server/src/spa/components/EditorFrame.vue
+++ b/plugins/code-server/app/components/EditorFrame.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { CodeServerConnect } from '@devframes/plugin-code-server/client'
+import type { CodeServerConnect } from '../connect'
 import { onMounted, ref, watch } from 'vue'
 
 const props = defineProps<{
diff --git a/plugins/code-server/src/spa/components/LauncherView.stories.ts b/plugins/code-server/app/components/LauncherView.stories.ts
similarity index 97%
rename from plugins/code-server/src/spa/components/LauncherView.stories.ts
rename to plugins/code-server/app/components/LauncherView.stories.ts
index bf0fe2100..13ee9d8f5 100644
--- a/plugins/code-server/src/spa/components/LauncherView.stories.ts
+++ b/plugins/code-server/app/components/LauncherView.stories.ts
@@ -1,5 +1,5 @@
-import type { CodeServerDetection } from '@devframes/plugin-code-server/client'
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import type { CodeServerDetection } from '../connect'
 import LauncherView from './LauncherView.vue'
 
 const localCodeServer: CodeServerDetection = {
diff --git a/plugins/code-server/src/spa/components/LauncherView.vue b/plugins/code-server/app/components/LauncherView.vue
similarity index 99%
rename from plugins/code-server/src/spa/components/LauncherView.vue
rename to plugins/code-server/app/components/LauncherView.vue
index 3582cd858..20a967905 100644
--- a/plugins/code-server/src/spa/components/LauncherView.vue
+++ b/plugins/code-server/app/components/LauncherView.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { CodeServerDetection, CodeServerServerInfo } from '@devframes/plugin-code-server/client'
 import type { CodeServerPhase } from '../composables/code-server'
+import type { CodeServerDetection, CodeServerServerInfo } from '../connect'
 import ActionButton from '@antfu/design/components/Action/ActionButton.vue'
 import FeedbackSpinner from '@antfu/design/components/Feedback/FeedbackSpinner.vue'
 import { computed, ref } from 'vue'
diff --git a/plugins/code-server/src/spa/composables/code-server.ts b/plugins/code-server/app/composables/code-server.ts
similarity index 97%
rename from plugins/code-server/src/spa/composables/code-server.ts
rename to plugins/code-server/app/composables/code-server.ts
index 3a5b79806..290ec7768 100644
--- a/plugins/code-server/src/spa/composables/code-server.ts
+++ b/plugins/code-server/app/composables/code-server.ts
@@ -4,9 +4,9 @@ import type {
   CodeServerServerInfo,
   CodeServerSharedState,
   CodeServerStatusResult,
-} from '@devframes/plugin-code-server/client'
-import { STATE_KEY } from '@devframes/plugin-code-server/client'
+} from '../connect'
 import { computed, onScopeDispose, reactive, ref, shallowRef } from 'vue'
+import { STATE_KEY } from '../connect'
 import { useRpc } from './rpc'
 
 /** Discrete UI phases, one per launcher story. */
diff --git a/plugins/code-server/src/spa/composables/rpc.ts b/plugins/code-server/app/composables/rpc.ts
similarity index 92%
rename from plugins/code-server/src/spa/composables/rpc.ts
rename to plugins/code-server/app/composables/rpc.ts
index 0f52fbab8..244c0bdf7 100644
--- a/plugins/code-server/src/spa/composables/rpc.ts
+++ b/plugins/code-server/app/composables/rpc.ts
@@ -1,6 +1,6 @@
-import type { ConnectionMeta, DevframeConnectionStatus, DevframeRpcClient } from '@devframes/plugin-code-server/client'
-import { connectCodeServer } from '@devframes/plugin-code-server/client'
+import type { ConnectionMeta, DevframeConnectionStatus, DevframeRpcClient } from '../connect'
 import { reactive, shallowRef } from 'vue'
+import { connectCodeServer } from '../connect'
 
 export const connection = reactive<{
   connected: boolean
diff --git a/plugins/code-server/src/client/index.ts b/plugins/code-server/app/connect.ts
similarity index 83%
rename from plugins/code-server/src/client/index.ts
rename to plugins/code-server/app/connect.ts
index 4bc2392e8..77b856484 100644
--- a/plugins/code-server/src/client/index.ts
+++ b/plugins/code-server/app/connect.ts
@@ -2,20 +2,15 @@ import type { DevframeConnectionStatus, DevframeRpcClient, DevframeRpcClientOpti
 import type { ConnectionMeta } from 'devframe/types'
 import { connectDevframe } from 'devframe/client'
 
-export { STATE_KEY } from '../constants'
+export { STATE_KEY } from '../src/node/constants'
 export type { ConnectionMeta, DevframeConnectionStatus, DevframeRpcClient }
 export type {
-  CodeServerBackend,
   CodeServerConnect,
   CodeServerDetection,
-  CodeServerLogin,
-  CodeServerMode,
   CodeServerServerInfo,
   CodeServerSharedState,
-  CodeServerStartResult,
-  CodeServerStatus,
   CodeServerStatusResult,
-} from '../types'
+} from '../src/node/types'
 
 /**
  * Connect to the code-server plugin's devframe backend. A thin, typed wrapper
diff --git a/plugins/code-server/src/spa/index.html b/plugins/code-server/app/index.html
similarity index 100%
rename from plugins/code-server/src/spa/index.html
rename to plugins/code-server/app/index.html
diff --git a/plugins/code-server/src/spa/main.ts b/plugins/code-server/app/main.ts
similarity index 100%
rename from plugins/code-server/src/spa/main.ts
rename to plugins/code-server/app/main.ts
diff --git a/plugins/code-server/src/spa/style.css b/plugins/code-server/app/style.css
similarity index 100%
rename from plugins/code-server/src/spa/style.css
rename to plugins/code-server/app/style.css
diff --git a/plugins/code-server/app/vite.config.ts b/plugins/code-server/app/vite.config.ts
new file mode 100644
index 000000000..049914c37
--- /dev/null
+++ b/plugins/code-server/app/vite.config.ts
@@ -0,0 +1,60 @@
+import type { Server } from 'node:http'
+import type { Plugin } from 'vite'
+import { fileURLToPath } from 'node:url'
+import createCodeServerDevframe from '@devframes/plugin-code-server'
+import vue from '@vitejs/plugin-vue'
+import { initDevframe } from 'devframe/initiate'
+import { resolveBasePath } from 'devframe/internal'
+import UnoCSS from 'unocss/vite'
+import { defineConfig } from 'vite'
+import { alias } from '../../../alias'
+
+const devframe = createCodeServerDevframe()
+// Hosted base (`/__devframes_plugin_code-server/`): the SPA and the dev bridge
+// share it so `document.baseURI` matches production while Vite serves the HMR
+// panel.
+const basePath = resolveBasePath(devframe, 'hosted')
+
+/**
+ * Serve-only plugin that bridges the code-server node side (RPC + WebSocket +
+ * `__connection.json`) onto Vite's own dev server under the devframe base
+ * path, mounted as a **post** middleware so Vite serves the HMR SPA first and
+ * the devframe host only answers the routes it owns. Inert during `vite build`.
+ */
+function codeServerDevBridge(): Plugin {
+  return {
+    name: 'code-server-dev-bridge',
+    apply: 'serve',
+    configureServer(server) {
+      const instance = initDevframe(devframe, {
+        base: basePath,
+        distDir: false,
+        server: server.httpServer as Server,
+        auth: false,
+      })
+      return () => server.middlewares.use(instance.nodeMiddleware)
+    },
+  }
+}
+
+/**
+ * `base: './'` for the build keeps the mount path portable: the same `app`
+ * output works whether devframe serves it at `/` (standalone) or
+ * `/__devframes_plugin_code-server/` (mounted in a hub). `connectDevframe`
+ * resolves its connection meta relative to `document.baseURI` to match.
+ *
+ * In `vite dev` the panel is served under the devframe base path so its
+ * `document.baseURI` matches production, and {@link codeServerDevBridge}
+ * bridges the node side there with HMR.
+ */
+export default defineConfig(({ command }) => ({
+  base: command === 'serve' ? basePath : './',
+  root: fileURLToPath(new URL('.', import.meta.url)),
+  resolve: { alias },
+  plugins: [vue(), UnoCSS(), codeServerDevBridge()],
+  optimizeDeps: { exclude: ['@antfu/design'] },
+  build: {
+    outDir: fileURLToPath(new URL('../assets-pkg/dist', import.meta.url)),
+    emptyOutDir: true,
+  },
+}))
diff --git a/plugins/code-server/bin.mjs b/plugins/code-server/bin.mjs
index d692b016c..dcbd90723 100755
--- a/plugins/code-server/bin.mjs
+++ b/plugins/code-server/bin.mjs
@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 import process from 'node:process'
-import { createCodeServerCli } from './dist/cli.mjs'
+import { createCodeServerCli } from './dist/node/cli.mjs'
 
 async function main() {
   const cli = createCodeServerCli()
diff --git a/plugins/code-server/package.json b/plugins/code-server/package.json
index 11d9347c3..82647c9ba 100644
--- a/plugins/code-server/package.json
+++ b/plugins/code-server/package.json
@@ -21,17 +21,16 @@
   ],
   "sideEffects": false,
   "exports": {
-    ".": "./dist/index.mjs",
-    "./client": "./dist/client/index.mjs",
-    "./cli": "./dist/cli.mjs",
-    "./constants": "./dist/constants.mjs",
-    "./node": "./dist/node/index.mjs",
-    "./rpc": "./dist/rpc/index.mjs",
-    "./types": "./dist/types.mjs",
-    "./vite": "./dist/vite.mjs",
+    ".": "./dist/node/index.mjs",
+    "./cli": "./dist/node/cli.mjs",
+    "./constants": "./dist/node/constants.mjs",
+    "./node": "./dist/node/setup.mjs",
+    "./rpc": "./dist/node/rpc/index.mjs",
+    "./types": "./dist/node/types.mjs",
+    "./vite": "./dist/node/vite.mjs",
     "./package.json": "./package.json"
   },
-  "types": "./dist/index.d.mts",
+  "types": "./dist/node/index.d.mts",
   "bin": {
     "devframe-code-server": "./bin.mjs"
   },
@@ -40,14 +39,17 @@
     "dist"
   ],
   "scripts": {
-    "build": "tsdown && vite build --config src/spa/vite.config.ts",
+    "build": "tsdown && vite build --config app/vite.config.ts",
+    "build:app": "vite build --config app/vite.config.ts",
     "watch": "tsdown --watch",
-    "typecheck": "tsc --noEmit",
-    "dev": "vite --config src/spa/vite.config.ts",
+    "dev": "vite --config app/vite.config.ts --host",
+    "play": "pnpm run build && node playgrounds/server.mjs",
     "storybook": "storybook dev -p 6013",
     "build-storybook": "storybook build",
-    "test": "vitest run",
-    "prepack": "turbo run build --filter=@devframes/plugin-code-server"
+    "cli:build": "node bin.mjs build --out-dir dist/static",
+    "typecheck": "tsc --noEmit",
+    "prepack": "turbo run build --filter=@devframes/plugin-code-server",
+    "test": "vitest run"
   },
   "peerDependencies": {
     "@devframes/plugin-code-server--assets": "workspace:*",
@@ -76,6 +78,8 @@
     "@vitejs/plugin-vue": "catalog:build",
     "colorjs.io": "catalog:frontend",
     "devframe": "workspace:*",
+    "h3": "catalog:deps",
+    "pathe": "catalog:deps",
     "storybook": "catalog:storybook",
     "tsdown": "catalog:build",
     "unocss": "catalog:frontend",
diff --git a/plugins/code-server/playgrounds/server.mjs b/plugins/code-server/playgrounds/server.mjs
new file mode 100644
index 000000000..c12863806
--- /dev/null
+++ b/plugins/code-server/playgrounds/server.mjs
@@ -0,0 +1,58 @@
+#!/usr/bin/env node
+/**
+ * Standalone demo host for the code-server launcher.
+ *
+ * `initDevframe` runs setup, serves the built Vue panel SPA + `__connection.json`
+ * from `assets-pkg/dist` under the devframe base path, and binds the WebSocket
+ * RPC upgrade onto our http server.
+ *
+ *   node playgrounds/server.mjs   → live WebSocket RPC (`assets-pkg/dist`)
+ */
+import { existsSync } from 'node:fs'
+import { createServer } from 'node:http'
+import process from 'node:process'
+import { fileURLToPath } from 'node:url'
+import { initDevframe } from 'devframe/initiate'
+import { getPort } from 'devframe/utils/get-port'
+import { H3, toNodeHandler } from 'h3'
+import { resolve } from 'pathe'
+import createCodeServerDevframe from '../src/node/index.ts'
+
+const HERE = fileURLToPath(new URL('.', import.meta.url))
+const ROOT = resolve(HERE, '..')
+const panelDir = resolve(ROOT, 'assets-pkg/dist')
+
+const devframe = createCodeServerDevframe()
+const basePath = devframe.basePath
+
+async function main() {
+  if (!existsSync(resolve(panelDir, 'index.html'))) {
+    console.error('\n[code-server playground] missing assets-pkg/dist/index.html\n  → run `pnpm -C plugins/code-server build` first.\n')
+    process.exit(1)
+  }
+
+  const bindHost = '0.0.0.0'
+  const port = await getPort({ host: bindHost, port: 4413 })
+  const origin = `http://localhost:${port}`
+
+  const app = new H3()
+  const server = createServer(toNodeHandler(app))
+  const instance = initDevframe(devframe, {
+    base: basePath,
+    distDir: panelDir,
+    app,
+    server,
+    host: bindHost,
+    origin,
+    auth: false,
+  })
+  await new Promise(r => server.listen(port, bindHost, r))
+  await instance.ready
+
+  process.stdout.write(`\n  Code Server launcher: dev (live WebSocket RPC)\n  ▸ panel:  ${origin}${basePath}\n\n`)
+}
+
+main().catch((error) => {
+  console.error(error)
+  process.exit(1)
+})
diff --git a/plugins/code-server/src/index.ts b/plugins/code-server/src/index.ts
deleted file mode 100644
index 65a2e644c..000000000
--- a/plugins/code-server/src/index.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import type { DevframeDefinition, RemoteAssets } from 'devframe'
-import type { CodeServerOptions } from './types'
-import { defineDevframe } from 'devframe'
-import pkg from '../package.json' with { type: 'json' }
-import { DEFAULT_PORT, PLUGIN_ID } from './constants'
-
-export {
-  DEFAULT_CODE_SERVER_PORT,
-  DEFAULT_PORT,
-  getCookieSessionName,
-  PLUGIN_ID,
-  STATE_KEY,
-} from './constants'
-export type * from './types'
-
-// The SPA ships in the lockstep `@devframes/plugin-code-server--assets` package,
-// served on demand through devframe's remote-assets back-proxy. The definition's
-// `importMetaUrl` (below) supplies the default `resolveFrom`, so a locally
-// installed copy (a workspace link here) is served with zero network.
-const remoteAssets: RemoteAssets = {
-  package: `${pkg.name}--assets`,
-  version: pkg.version,
-}
-
-/**
- * Build a {@link DevframeDefinition} for the code-server panel. The same
- * definition runs standalone (`createCac`), mounts into a Vite host
- * (`/vite`), or docks inside a hub, since its `setup` only relies on the core
- * devframe RPC + shared-state surface.
- *
- * @experimental This plugin is experimental and may change without a major
- * version bump until it stabilizes.
- *
- * @example
- * ```ts
- * import { createCodeServerDevframe } from '@devframes/plugin-code-server'
- *
- * export default createCodeServerDevframe({ serverPort: 8080 })
- * ```
- */
-export function createCodeServerDevframe(options: CodeServerOptions = {}): DevframeDefinition {
-  const resolvedDist = options.distDir ?? remoteAssets
-  return defineDevframe({
-    id: PLUGIN_ID,
-    name: 'Code Server',
-    version: pkg.version,
-    packageName: pkg.name,
-    importMetaUrl: import.meta.url,
-    homepage: pkg.homepage,
-    description: pkg.description,
-    icon: 'ph:code-duotone',
-    /**
-     * Leave undefined so `resolveBasePath` picks `/` standalone and
-     * `/__<id>/` when hosted. Authors override via `options.basePath`.
-     */
-    basePath: options.basePath,
-    cli: {
-      command: options.command ?? 'devframe-code-server',
-      port: options.port ?? DEFAULT_PORT,
-      portRange: options.portRange,
-      random: options.random,
-      distDir: resolvedDist,
-      /**
-       * Gate the standalone launcher by default; `maybeOpenBrowser` folds the
-       * current OTP into the `--open` URL so the tab lands already trusted.
-       * Hosted adapters supply their own auth layer and ignore this.
-       */
-      auth: options.auth ?? true,
-    },
-    async setup(ctx) {
-      const { setupCodeServer } = await import('./node/index')
-      await setupCodeServer(ctx, options)
-    },
-  })
-}
-
-export default createCodeServerDevframe
diff --git a/plugins/code-server/src/node/backends.ts b/plugins/code-server/src/node/backends.ts
index 622574d2a..6b383ac54 100644
--- a/plugins/code-server/src/node/backends.ts
+++ b/plugins/code-server/src/node/backends.ts
@@ -1,4 +1,4 @@
-import type { CodeServerBackend, CodeServerConnect, CodeServerLogin, CodeServerMode } from '../types'
+import type { CodeServerBackend, CodeServerConnect, CodeServerLogin, CodeServerMode } from './types'
 import { createHash } from 'node:crypto'
 
 /**
diff --git a/plugins/code-server/src/cli.ts b/plugins/code-server/src/node/cli.ts
similarity index 100%
rename from plugins/code-server/src/cli.ts
rename to plugins/code-server/src/node/cli.ts
diff --git a/plugins/code-server/src/constants.ts b/plugins/code-server/src/node/constants.ts
similarity index 100%
rename from plugins/code-server/src/constants.ts
rename to plugins/code-server/src/node/constants.ts
diff --git a/plugins/code-server/src/node/index.ts b/plugins/code-server/src/node/index.ts
index 510ae915d..2295c3e60 100644
--- a/plugins/code-server/src/node/index.ts
+++ b/plugins/code-server/src/node/index.ts
@@ -1,40 +1,77 @@
-import type { DevframeNodeContext } from 'devframe'
-import type { CodeServerOptions } from '../types'
-import { serverFunctions } from '../rpc/index'
-import { setCodeServerSupervisor } from './context'
-import { CodeServerSupervisor } from './supervisor'
+import type { DevframeDefinition, RemoteAssets } from 'devframe'
+import type { CodeServerOptions } from './types'
+import { defineDevframe } from 'devframe'
+import pkg from '../../package.json' with { type: 'json' }
+import { DEFAULT_PORT, PLUGIN_ID } from './constants'
 
-export type { CodeServerProfile, CodeServerProfileKind } from './backends'
-export { resolveProfile } from './backends'
-export * from './context'
-export { detectCodeServer } from './detect'
-export { diagnostics } from './diagnostics'
-export { CodeServerSupervisor } from './supervisor'
+export {
+  DEFAULT_CODE_SERVER_PORT,
+  DEFAULT_PORT,
+  getCookieSessionName,
+  PLUGIN_ID,
+  STATE_KEY,
+} from './constants'
+export type * from './types'
+
+// The SPA ships in the lockstep `@devframes/plugin-code-server--assets` package,
+// served on demand through devframe's remote-assets back-proxy. The definition's
+// `importMetaUrl` (below) supplies the default `resolveFrom`, so a locally
+// installed copy (a workspace link here) is served with zero network.
+const remoteAssets: RemoteAssets = {
+  package: `${pkg.name}--assets`,
+  version: pkg.version,
+}
 
 /**
- * Wire the code-server subsystem onto a devframe node context: create the
- * {@link CodeServerSupervisor}, run the initial binary detection, publish
- * status into shared state, and register the control RPC functions. Returns
- * the supervisor so callers can launch/stop or dispose it on shutdown.
+ * Build a {@link DevframeDefinition} for the code-server panel. The same
+ * definition runs standalone (`createCac`), mounts into a Vite host
+ * (`/vite`), or docks inside a hub, since its `setup` only relies on the core
+ * devframe RPC + shared-state surface.
+ *
+ * @experimental This plugin is experimental and may change without a major
+ * version bump until it stabilizes.
+ *
+ * @example
+ * ```ts
+ * import { createCodeServerDevframe } from '@devframes/plugin-code-server'
  *
- * Works in any devframe runtime (CLI, Vite, embedded, build), since it only relies
- * on the core `ctx.rpc` shared-state surface, not on the hub.
+ * export default createCodeServerDevframe({ serverPort: 8080 })
+ * ```
  */
-export async function setupCodeServer(
-  ctx: DevframeNodeContext,
-  options: CodeServerOptions = {},
-): Promise<CodeServerSupervisor> {
-  const supervisor = new CodeServerSupervisor(ctx, options)
-  setCodeServerSupervisor(ctx, supervisor)
-  await supervisor.init()
-
-  for (const fn of serverFunctions)
-    ctx.rpc.register(fn)
-
-  // Launch eagerly when asked, rather than waiting for the launcher's button.
-  // Failures surface through shared state (status `error`); don't reject setup.
-  if (options.startOnBoot)
-    void supervisor.start().catch(() => {})
-
-  return supervisor
+export function createCodeServerDevframe(options: CodeServerOptions = {}): DevframeDefinition {
+  const resolvedDist = options.distDir ?? remoteAssets
+  return defineDevframe({
+    id: PLUGIN_ID,
+    name: 'Code Server',
+    version: pkg.version,
+    packageName: pkg.name,
+    importMetaUrl: import.meta.url,
+    homepage: pkg.homepage,
+    description: pkg.description,
+    icon: 'ph:code-duotone',
+    /**
+     * Leave undefined so `resolveBasePath` picks `/` standalone and
+     * `/__<id>/` when hosted. Authors override via `options.basePath`.
+     */
+    basePath: options.basePath,
+    cli: {
+      command: options.command ?? 'devframe-code-server',
+      port: options.port ?? DEFAULT_PORT,
+      portRange: options.portRange,
+      random: options.random,
+      distDir: resolvedDist,
+      /**
+       * Gate the standalone launcher by default; `maybeOpenBrowser` folds the
+       * current OTP into the `--open` URL so the tab lands already trusted.
+       * Hosted adapters supply their own auth layer and ignore this.
+       */
+      auth: options.auth ?? true,
+    },
+    async setup(ctx) {
+      const { setupCodeServer } = await import('./setup')
+      await setupCodeServer(ctx, options)
+    },
+  })
 }
+
+export default createCodeServerDevframe
diff --git a/plugins/code-server/src/rpc/functions/detect.ts b/plugins/code-server/src/node/rpc/functions/detect.ts
similarity index 89%
rename from plugins/code-server/src/rpc/functions/detect.ts
rename to plugins/code-server/src/node/rpc/functions/detect.ts
index 8d2f0ab85..61e712bc6 100644
--- a/plugins/code-server/src/rpc/functions/detect.ts
+++ b/plugins/code-server/src/node/rpc/functions/detect.ts
@@ -1,6 +1,6 @@
 import type { CodeServerDetection } from '../../types'
 import { defineRpcFunction } from 'devframe'
-import { getCodeServerSupervisor } from '../../node/context'
+import { getCodeServerSupervisor } from '../../context'
 
 export const detect = defineRpcFunction({
   name: 'devframes:plugin:code-server:detect',
diff --git a/plugins/code-server/src/rpc/functions/start.ts b/plugins/code-server/src/node/rpc/functions/start.ts
similarity index 90%
rename from plugins/code-server/src/rpc/functions/start.ts
rename to plugins/code-server/src/node/rpc/functions/start.ts
index 32fd761bc..9e2667856 100644
--- a/plugins/code-server/src/rpc/functions/start.ts
+++ b/plugins/code-server/src/node/rpc/functions/start.ts
@@ -1,6 +1,6 @@
 import type { CodeServerStartRequest, CodeServerStartResult } from '../../types'
 import { defineRpcFunction } from 'devframe'
-import { getCodeServerSupervisor } from '../../node/context'
+import { getCodeServerSupervisor } from '../../context'
 
 export const start = defineRpcFunction({
   name: 'devframes:plugin:code-server:start',
diff --git a/plugins/code-server/src/rpc/functions/status.ts b/plugins/code-server/src/node/rpc/functions/status.ts
similarity index 85%
rename from plugins/code-server/src/rpc/functions/status.ts
rename to plugins/code-server/src/node/rpc/functions/status.ts
index b2d86d0e0..7605541a7 100644
--- a/plugins/code-server/src/rpc/functions/status.ts
+++ b/plugins/code-server/src/node/rpc/functions/status.ts
@@ -1,6 +1,6 @@
 import type { CodeServerStatusResult } from '../../types'
 import { defineRpcFunction } from 'devframe'
-import { getCodeServerSupervisor } from '../../node/context'
+import { getCodeServerSupervisor } from '../../context'
 
 export const status = defineRpcFunction({
   name: 'devframes:plugin:code-server:status',
diff --git a/plugins/code-server/src/rpc/functions/stop.ts b/plugins/code-server/src/node/rpc/functions/stop.ts
similarity index 87%
rename from plugins/code-server/src/rpc/functions/stop.ts
rename to plugins/code-server/src/node/rpc/functions/stop.ts
index eeef76b6b..98ecb05cb 100644
--- a/plugins/code-server/src/rpc/functions/stop.ts
+++ b/plugins/code-server/src/node/rpc/functions/stop.ts
@@ -1,6 +1,6 @@
 import type { CodeServerStatusResult } from '../../types'
 import { defineRpcFunction } from 'devframe'
-import { getCodeServerSupervisor } from '../../node/context'
+import { getCodeServerSupervisor } from '../../context'
 
 export const stop = defineRpcFunction({
   name: 'devframes:plugin:code-server:stop',
diff --git a/plugins/code-server/src/rpc/index.ts b/plugins/code-server/src/node/rpc/index.ts
similarity index 100%
rename from plugins/code-server/src/rpc/index.ts
rename to plugins/code-server/src/node/rpc/index.ts
diff --git a/plugins/code-server/src/node/setup.ts b/plugins/code-server/src/node/setup.ts
new file mode 100644
index 000000000..1b01946ee
--- /dev/null
+++ b/plugins/code-server/src/node/setup.ts
@@ -0,0 +1,40 @@
+import type { DevframeNodeContext } from 'devframe'
+import type { CodeServerOptions } from './types'
+import { setCodeServerSupervisor } from './context'
+import { serverFunctions } from './rpc/index'
+import { CodeServerSupervisor } from './supervisor'
+
+export type { CodeServerProfile, CodeServerProfileKind } from './backends'
+export { resolveProfile } from './backends'
+export * from './context'
+export { detectCodeServer } from './detect'
+export { diagnostics } from './diagnostics'
+export { CodeServerSupervisor } from './supervisor'
+
+/**
+ * Wire the code-server subsystem onto a devframe node context: create the
+ * {@link CodeServerSupervisor}, run the initial binary detection, publish
+ * status into shared state, and register the control RPC functions. Returns
+ * the supervisor so callers can launch/stop or dispose it on shutdown.
+ *
+ * Works in any devframe runtime (CLI, Vite, embedded, build), since it only relies
+ * on the core `ctx.rpc` shared-state surface, not on the hub.
+ */
+export async function setupCodeServer(
+  ctx: DevframeNodeContext,
+  options: CodeServerOptions = {},
+): Promise<CodeServerSupervisor> {
+  const supervisor = new CodeServerSupervisor(ctx, options)
+  setCodeServerSupervisor(ctx, supervisor)
+  await supervisor.init()
+
+  for (const fn of serverFunctions)
+    ctx.rpc.register(fn)
+
+  // Launch eagerly when asked, rather than waiting for the launcher's button.
+  // Failures surface through shared state (status `error`); don't reject setup.
+  if (options.startOnBoot)
+    void supervisor.start().catch(() => {})
+
+  return supervisor
+}
diff --git a/plugins/code-server/src/node/supervisor.ts b/plugins/code-server/src/node/supervisor.ts
index 28abe8da2..97766199c 100644
--- a/plugins/code-server/src/node/supervisor.ts
+++ b/plugins/code-server/src/node/supervisor.ts
@@ -2,6 +2,7 @@ import type { DevframeNodeContext } from 'devframe'
 import type { SharedState } from 'devframe/utils/shared-state'
 import type { Buffer } from 'node:buffer'
 import type { ChildProcess } from 'node:child_process'
+import type { CodeServerProfile, ProfileContext } from './backends'
 import type {
   CodeServerBackend,
   CodeServerConnect,
@@ -14,14 +15,14 @@ import type {
   CodeServerStartRequest,
   CodeServerStartResult,
   CodeServerStatusResult,
-} from '../types'
-import type { CodeServerProfile, ProfileContext } from './backends'
+} from './types'
 import { execSync, spawn } from 'node:child_process'
 import { randomBytes } from 'node:crypto'
 import { request as httpRequest } from 'node:http'
 import { hostname } from 'node:os'
 import process from 'node:process'
 import { getPort } from 'devframe/utils/get-port'
+import { AUTO_DETECT_ORDER, resolveProfile } from './backends'
 import {
   DEFAULT_CODE_SERVER_PORT,
   DEFAULT_START_TIMEOUT,
@@ -30,8 +31,7 @@ import {
   STATE_KEY,
   TERMINAL_SESSION_ICON,
   TERMINAL_SESSION_TITLE,
-} from '../constants'
-import { AUTO_DETECT_ORDER, resolveProfile } from './backends'
+} from './constants'
 import { detectCodeServer } from './detect'
 import { diagnostics } from './diagnostics'
 
diff --git a/plugins/code-server/src/types.ts b/plugins/code-server/src/node/types.ts
similarity index 100%
rename from plugins/code-server/src/types.ts
rename to plugins/code-server/src/node/types.ts
diff --git a/plugins/code-server/src/vite.ts b/plugins/code-server/src/node/vite.ts
similarity index 100%
rename from plugins/code-server/src/vite.ts
rename to plugins/code-server/src/node/vite.ts
diff --git a/plugins/code-server/src/spa/vite.config.ts b/plugins/code-server/src/spa/vite.config.ts
deleted file mode 100644
index f52f449f6..000000000
--- a/plugins/code-server/src/spa/vite.config.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { fileURLToPath } from 'node:url'
-import { devframeViteBridge } from '@devframes/vite/single'
-import vue from '@vitejs/plugin-vue'
-import UnoCSS from 'unocss/vite'
-import { defineConfig } from 'vite'
-import { alias } from '../../../../alias'
-import { createCodeServerDevframe } from '../index'
-
-/**
- * The launcher SPA. `base: './'` keeps every asset URL relative so the bundle
- * is mount-path portable, discovering its runtime base from
- * `document.baseURI` and connecting via `connectDevframe()`. The build is copied
- * verbatim by `createBuild`; no HTML rewriting.
- *
- * `devframeViteBridge()` runs a side-car devframe RPC + WS server during
- * `vite dev` so the launcher can detect/start/stop the editor while Vite
- * serves the UI source with HMR.
- */
-export default defineConfig({
-  base: './',
-  root: fileURLToPath(new URL('.', import.meta.url)),
-  resolve: { alias },
-  plugins: [
-    vue(),
-    UnoCSS(),
-    devframeViteBridge(createCodeServerDevframe(), { base: '/' }),
-  ],
-  /**
-   * `@antfu/design` ships raw `.ts`/`.vue`; let `@vitejs/plugin-vue` compile its
-   * SFCs instead of esbuild pre-bundling them.
-   */
-  optimizeDeps: { exclude: ['@antfu/design'] },
-  build: {
-    outDir: fileURLToPath(new URL('../../assets-pkg/dist', import.meta.url)),
-    emptyOutDir: true,
-  },
-})
diff --git a/plugins/code-server/test/code-server.test.ts b/plugins/code-server/test/code-server.test.ts
index 18a6f9fb6..8e31af6ea 100644
--- a/plugins/code-server/test/code-server.test.ts
+++ b/plugins/code-server/test/code-server.test.ts
@@ -1,10 +1,10 @@
-import type { CodeServerSharedState } from '../src/types'
+import type { CodeServerSharedState } from '../src/node/types'
 import { mkdtempSync, readFileSync } from 'node:fs'
 import { tmpdir } from 'node:os'
 import { join } from 'node:path'
 import { afterEach, describe, expect, it } from 'vitest'
-import { PLUGIN_ID, STATE_KEY, TERMINAL_SESSION_ICON, TERMINAL_SESSION_TITLE } from '../src/constants'
-import { setupCodeServer } from '../src/node/index'
+import { PLUGIN_ID, STATE_KEY, TERMINAL_SESSION_ICON, TERMINAL_SESSION_TITLE } from '../src/node/constants'
+import { setupCodeServer } from '../src/node/setup'
 import {
   createFakeHubTerminals,
   createTestContext,
diff --git a/plugins/code-server/tsconfig.json b/plugins/code-server/tsconfig.json
index 1b1d87cd4..ee99b2f2e 100644
--- a/plugins/code-server/tsconfig.json
+++ b/plugins/code-server/tsconfig.json
@@ -3,6 +3,6 @@
   "compilerOptions": {
     "lib": ["esnext", "dom"]
   },
-  "include": ["src", "test", "tsdown.config.ts"],
-  "exclude": ["dist", "src/spa/dist", ".next", "out", "node_modules"]
+  "include": ["src", "app", "test", "playgrounds", "bin.mjs"],
+  "exclude": ["dist", ".next", "out", "node_modules"]
 }
diff --git a/plugins/code-server/tsdown.config.ts b/plugins/code-server/tsdown.config.ts
index 5c2b73e5d..f7d461c4e 100644
--- a/plugins/code-server/tsdown.config.ts
+++ b/plugins/code-server/tsdown.config.ts
@@ -11,49 +11,35 @@ const deps = {
   ],
 }
 
-// Browser-loaded module: the launcher/iframe shell. Kept in its own
-// rolldown graph so the node-only supervisor never leaks into the client
-// bundle.
-const clientEntries = {
-  'client/index': 'src/client/index.ts',
-}
-
-// Node + neutral modules: the devframe definition/factory, RPC functions,
-// the code-server supervisor, and the host adapters.
-const serverEntries = {
-  'index': 'src/index.ts',
+// Node-side entries: the devframe definition (root), the setup module, the
+// CLI adapter, the host adapters, constants, types, and the RPC registry.
+const nodeEntries = {
   'node/index': 'src/node/index.ts',
-  'rpc/index': 'src/rpc/index.ts',
-  'cli': 'src/cli.ts',
-  'vite': 'src/vite.ts',
-  'constants': 'src/constants.ts',
-  'types': 'src/types.ts',
+  'node/setup': 'src/node/setup.ts',
+  'node/cli': 'src/node/cli.ts',
+  'node/vite': 'src/node/vite.ts',
+  'node/constants': 'src/node/constants.ts',
+  'node/types': 'src/node/types.ts',
+  'node/rpc/index': 'src/node/rpc/index.ts',
 }
 
 /**
- * Three configs, mirroring `packages/devframe/tsdown.config.ts`:
- * 1. browser client build (independent graph, `.mjs`),
- * 2. node server build (appends to the same dist/),
- * 3. combined dts so `declare module 'devframe'` augmentations resolve
- * across every entry.
+ * Two configs keep the graphs isolated:
+ * 1. node runtime (`clean: true`): clears dist/;
+ * 2. dts in one graph so the `declare module 'devframe'` RPC augmentation
+ *    resolves once.
+ *
+ * The Vue panel SPA (`app/`) builds separately with Vite into the lockstep
+ * `@devframes/plugin-code-server--assets` package.
  */
 export default defineConfig([
   {
     clean: true,
-    platform: 'browser',
-    tsconfig,
-    deps,
-    dts: false,
-    outExtensions: () => ({ js: '.mjs' }),
-    entry: clientEntries,
-  },
-  {
-    clean: false,
     platform: 'node',
     tsconfig,
     deps,
     dts: false,
-    entry: serverEntries,
+    entry: nodeEntries,
   },
   {
     clean: false,
@@ -62,6 +48,6 @@ export default defineConfig([
     deps,
     dts: { emitDtsOnly: true },
     outExtensions: () => ({ dts: '.d.mts' }),
-    entry: { ...clientEntries, ...serverEntries },
+    entry: nodeEntries,
   },
 ])
diff --git a/plugins/data-inspector/.storybook/main.ts b/plugins/data-inspector/.storybook/main.ts
index 43fc9da03..227468539 100644
--- a/plugins/data-inspector/.storybook/main.ts
+++ b/plugins/data-inspector/.storybook/main.ts
@@ -5,7 +5,7 @@ import { mergeConfig } from 'vite'
 import { alias } from '../../../alias'
 
 const config: StorybookConfig = {
-  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  stories: ['../{src,app}/**/*.stories.@(ts|tsx)'],
   addons: ['@storybook/addon-docs'],
   framework: {
     name: '@storybook/vue3-vite',
diff --git a/plugins/data-inspector/.storybook/preview.ts b/plugins/data-inspector/.storybook/preview.ts
index f7ff9c3f6..759a14cb0 100644
--- a/plugins/data-inspector/.storybook/preview.ts
+++ b/plugins/data-inspector/.storybook/preview.ts
@@ -1,7 +1,7 @@
 import type { Decorator, Preview } from '@storybook/vue3-vite'
 import 'virtual:uno.css'
 import '@antfu/design/styles.css'
-import '../src/spa/style.css'
+import '../app/style.css'
 
 // Drive the shared `@antfu/design` tokens off the toolbar theme toggle: dark mode
 // is the `.dark` class on `<html>`, and the canvas takes the semantic
diff --git a/plugins/data-inspector/src/spa/App.vue b/plugins/data-inspector/app/App.vue
similarity index 98%
rename from plugins/data-inspector/src/spa/App.vue
rename to plugins/data-inspector/app/App.vue
index 0da81935d..09576eac7 100644
--- a/plugins/data-inspector/src/spa/App.vue
+++ b/plugins/data-inspector/app/App.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { SavedQueryScope } from '../engine'
+import type { SavedQueryScope } from '@devframes/plugin-data-inspector/engine'
 import LayoutSplitPane from '@antfu/design/components/Layout/LayoutSplitPane.vue'
 import { provideColorScheme } from '@antfu/design/composables/colorScheme'
 import { Pane } from 'splitpanes'
diff --git a/plugins/data-inspector/src/spa/components/AppHeader.vue b/plugins/data-inspector/app/components/AppHeader.vue
similarity index 96%
rename from plugins/data-inspector/src/spa/components/AppHeader.vue
rename to plugins/data-inspector/app/components/AppHeader.vue
index dd3fa06f2..f2bdecdd3 100644
--- a/plugins/data-inspector/src/spa/components/AppHeader.vue
+++ b/plugins/data-inspector/app/components/AppHeader.vue
@@ -3,7 +3,7 @@ import ActionIconButton from '@antfu/design/components/Action/ActionIconButton.v
 import DisplayBadge from '@antfu/design/components/Display/DisplayBadge.vue'
 import LayoutToolbar from '@antfu/design/components/Layout/LayoutToolbar.vue'
 import { computed } from 'vue'
-import { connectionIndicator } from '../../../../../design/design'
+import { connectionIndicator } from '../../../../design/design'
 import { connection } from '../composables/rpc'
 import { isDark } from '../composables/scheme'
 
diff --git a/plugins/data-inspector/src/spa/components/DataShapePanel.stories.ts b/plugins/data-inspector/app/components/DataShapePanel.stories.ts
similarity index 100%
rename from plugins/data-inspector/src/spa/components/DataShapePanel.stories.ts
rename to plugins/data-inspector/app/components/DataShapePanel.stories.ts
diff --git a/plugins/data-inspector/src/spa/components/DataShapePanel.vue b/plugins/data-inspector/app/components/DataShapePanel.vue
similarity index 97%
rename from plugins/data-inspector/src/spa/components/DataShapePanel.vue
rename to plugins/data-inspector/app/components/DataShapePanel.vue
index 07ef98f3b..544870b33 100644
--- a/plugins/data-inspector/src/spa/components/DataShapePanel.vue
+++ b/plugins/data-inspector/app/components/DataShapePanel.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { DataSourceMeta } from '../../engine'
+import type { DataSourceMeta } from '@devframes/plugin-data-inspector/engine'
 import ActionIconButton from '@antfu/design/components/Action/ActionIconButton.vue'
 import { computed } from 'vue'
 
diff --git a/plugins/data-inspector/src/spa/components/DataSourcePanel.vue b/plugins/data-inspector/app/components/DataSourcePanel.vue
similarity index 100%
rename from plugins/data-inspector/src/spa/components/DataSourcePanel.vue
rename to plugins/data-inspector/app/components/DataSourcePanel.vue
diff --git a/plugins/data-inspector/src/spa/components/DataSourceSelect.stories.ts b/plugins/data-inspector/app/components/DataSourceSelect.stories.ts
similarity index 100%
rename from plugins/data-inspector/src/spa/components/DataSourceSelect.stories.ts
rename to plugins/data-inspector/app/components/DataSourceSelect.stories.ts
diff --git a/plugins/data-inspector/src/spa/components/DataSourceSelect.vue b/plugins/data-inspector/app/components/DataSourceSelect.vue
similarity index 97%
rename from plugins/data-inspector/src/spa/components/DataSourceSelect.vue
rename to plugins/data-inspector/app/components/DataSourceSelect.vue
index e8fb3e9b8..46aacae68 100644
--- a/plugins/data-inspector/src/spa/components/DataSourceSelect.vue
+++ b/plugins/data-inspector/app/components/DataSourceSelect.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { DataSourceMeta } from '../../engine'
+import type { DataSourceMeta } from '@devframes/plugin-data-inspector/engine'
 import DisplayIconifyRemoteIcon from '@antfu/design/components/Display/DisplayIconifyRemoteIcon.vue'
 import { SelectContent, SelectIcon, SelectItem, SelectItemIndicator, SelectPortal, SelectRoot, SelectTrigger, SelectViewport } from 'reka-ui'
 import { computed } from 'vue'
diff --git a/plugins/data-inspector/src/spa/components/EditPanel.vue b/plugins/data-inspector/app/components/EditPanel.vue
similarity index 99%
rename from plugins/data-inspector/src/spa/components/EditPanel.vue
rename to plugins/data-inspector/app/components/EditPanel.vue
index 02e534067..71c7edc8d 100644
--- a/plugins/data-inspector/src/spa/components/EditPanel.vue
+++ b/plugins/data-inspector/app/components/EditPanel.vue
@@ -5,7 +5,7 @@
  * entry to a container, and delete. Values travel as discriminated
  * `WriteValue` payloads so `undefined` survives JSON transport.
  */
-import type { NodePath, WriteRequest, WriteValue } from '../../engine'
+import type { NodePath, WriteRequest, WriteValue } from '@devframes/plugin-data-inspector/engine'
 import Button from '@antfu/design/components/Action/ActionButton.vue'
 import ActionIconButton from '@antfu/design/components/Action/ActionIconButton.vue'
 import { computed, ref, shallowRef, watch } from 'vue'
diff --git a/plugins/data-inspector/src/spa/components/QueryEditor.vue b/plugins/data-inspector/app/components/QueryEditor.vue
similarity index 99%
rename from plugins/data-inspector/src/spa/components/QueryEditor.vue
rename to plugins/data-inspector/app/components/QueryEditor.vue
index 4b3f4dec8..e084aa8c5 100644
--- a/plugins/data-inspector/src/spa/components/QueryEditor.vue
+++ b/plugins/data-inspector/app/components/QueryEditor.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { SuggestItem } from '@devframes/plugin-data-inspector/engine'
 /**
  * Jora query editor on CodeMirror 5, via the `Editor` class shipped by
  * @discoveryjs/discovery (which bundles CM5, registers the `jora` mode and
@@ -22,7 +23,6 @@
  * semantics of the stock addon).
  */
 import type * as CM from 'codemirror'
-import type { SuggestItem } from '../../engine'
 import type { SyntaxState } from '../composables/workbench'
 import { Editor as DiscoveryEditor } from '@discoveryjs/discovery/lib/views/editor/editors.js'
 import { nextTick, onBeforeUnmount, onMounted, shallowRef, watch } from 'vue'
diff --git a/plugins/data-inspector/src/spa/components/QueryPanel.vue b/plugins/data-inspector/app/components/QueryPanel.vue
similarity index 100%
rename from plugins/data-inspector/src/spa/components/QueryPanel.vue
rename to plugins/data-inspector/app/components/QueryPanel.vue
diff --git a/plugins/data-inspector/src/spa/components/QuerySettings.stories.ts b/plugins/data-inspector/app/components/QuerySettings.stories.ts
similarity index 100%
rename from plugins/data-inspector/src/spa/components/QuerySettings.stories.ts
rename to plugins/data-inspector/app/components/QuerySettings.stories.ts
diff --git a/plugins/data-inspector/src/spa/components/QuerySettings.vue b/plugins/data-inspector/app/components/QuerySettings.vue
similarity index 95%
rename from plugins/data-inspector/src/spa/components/QuerySettings.vue
rename to plugins/data-inspector/app/components/QuerySettings.vue
index 56c05114f..e026d046b 100644
--- a/plugins/data-inspector/src/spa/components/QuerySettings.vue
+++ b/plugins/data-inspector/app/components/QuerySettings.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { FilterOptions } from '../../engine'
+import type { FilterOptions } from '@devframes/plugin-data-inspector/engine'
 import FormCheckbox from '@antfu/design/components/Form/FormCheckbox.vue'
 
 const settings = defineModel<Required<FilterOptions>>({ required: true })
diff --git a/plugins/data-inspector/src/spa/components/ResultViewer.vue b/plugins/data-inspector/app/components/ResultViewer.vue
similarity index 98%
rename from plugins/data-inspector/src/spa/components/ResultViewer.vue
rename to plugins/data-inspector/app/components/ResultViewer.vue
index c57b6a098..1b1fdff3f 100644
--- a/plugins/data-inspector/src/spa/components/ResultViewer.vue
+++ b/plugins/data-inspector/app/components/ResultViewer.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { NodePath, QueryStats } from '../../engine'
+import type { NodePath, QueryStats } from '@devframes/plugin-data-inspector/engine'
 import ActionIconButton from '@antfu/design/components/Action/ActionIconButton.vue'
 import DisplayBadge from '@antfu/design/components/Display/DisplayBadge.vue'
 import DisplayBytes from '@antfu/design/components/Display/DisplayBytes.vue'
diff --git a/plugins/data-inspector/src/spa/components/SavedQueriesPanel.stories.ts b/plugins/data-inspector/app/components/SavedQueriesPanel.stories.ts
similarity index 100%
rename from plugins/data-inspector/src/spa/components/SavedQueriesPanel.stories.ts
rename to plugins/data-inspector/app/components/SavedQueriesPanel.stories.ts
diff --git a/plugins/data-inspector/src/spa/components/SavedQueriesPanel.vue b/plugins/data-inspector/app/components/SavedQueriesPanel.vue
similarity index 99%
rename from plugins/data-inspector/src/spa/components/SavedQueriesPanel.vue
rename to plugins/data-inspector/app/components/SavedQueriesPanel.vue
index 8bc3b2890..6e0b87cea 100644
--- a/plugins/data-inspector/src/spa/components/SavedQueriesPanel.vue
+++ b/plugins/data-inspector/app/components/SavedQueriesPanel.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { FilterOptions, Query, SavedQuery, SavedQueryScope } from '../../engine'
+import type { FilterOptions, Query, SavedQuery, SavedQueryScope } from '@devframes/plugin-data-inspector/engine'
 import ActionButton from '@antfu/design/components/Action/ActionButton.vue'
 import ActionIconButton from '@antfu/design/components/Action/ActionIconButton.vue'
 import ActionToggleGroup from '@antfu/design/components/Action/ActionToggleGroup.vue'
diff --git a/plugins/data-inspector/src/spa/components/_fixtures.ts b/plugins/data-inspector/app/components/_fixtures.ts
similarity index 97%
rename from plugins/data-inspector/src/spa/components/_fixtures.ts
rename to plugins/data-inspector/app/components/_fixtures.ts
index 058884f20..d4c1a856b 100644
--- a/plugins/data-inspector/src/spa/components/_fixtures.ts
+++ b/plugins/data-inspector/app/components/_fixtures.ts
@@ -1,4 +1,4 @@
-import type { DataSourceMeta, FilterOptions, Query, SavedQuery } from '../../engine'
+import type { DataSourceMeta, FilterOptions, Query, SavedQuery } from '@devframes/plugin-data-inspector/engine'
 
 /**
  * Shared, static sample data so the presentational components render in
diff --git a/plugins/data-inspector/src/spa/composables/discovery.ts b/plugins/data-inspector/app/composables/discovery.ts
similarity index 99%
rename from plugins/data-inspector/src/spa/composables/discovery.ts
rename to plugins/data-inspector/app/composables/discovery.ts
index c58e948be..06010ae13 100644
--- a/plugins/data-inspector/src/spa/composables/discovery.ts
+++ b/plugins/data-inspector/app/composables/discovery.ts
@@ -1,3 +1,4 @@
+import type { NodePath } from '@devframes/plugin-data-inspector/engine'
 /**
  * Discovery `ViewModel` lifecycle bound to a Vue container ref.
  * The default page is redefined as a struct view so every result renders
@@ -6,7 +7,6 @@
  * (`{ $type: 'Map' }`, `$class`, `$ref`, ...) so exotic values read at a glance.
  */
 import type { Ref, ShallowRef } from 'vue'
-import type { NodePath } from '../../engine'
 import type { ColorScheme } from './scheme'
 import { ViewModel } from '@discoveryjs/discovery'
 import discoveryCss from '@discoveryjs/discovery/dist/discovery.css?inline'
diff --git a/plugins/data-inspector/src/spa/composables/display-transform.ts b/plugins/data-inspector/app/composables/display-transform.ts
similarity index 99%
rename from plugins/data-inspector/src/spa/composables/display-transform.ts
rename to plugins/data-inspector/app/composables/display-transform.ts
index 33e23a464..d2b12c156 100644
--- a/plugins/data-inspector/src/spa/composables/display-transform.ts
+++ b/plugins/data-inspector/app/composables/display-transform.ts
@@ -15,7 +15,7 @@
  *   - `{ $truncated: 'depth', $path, $preview }` -> the preview string  + a "load deeper" LINK badge (lazy expand)
  *   - `{ $ref }` / `{ $truncated: 'entries' }` -> untouched (informative as data)
  */
-import type { NodePath, PathSegment } from '../../engine'
+import type { NodePath, PathSegment } from '@devframes/plugin-data-inspector/engine'
 
 export interface DisplayBadge {
   text: string
diff --git a/plugins/data-inspector/src/spa/composables/rpc.ts b/plugins/data-inspector/app/composables/rpc.ts
similarity index 99%
rename from plugins/data-inspector/src/spa/composables/rpc.ts
rename to plugins/data-inspector/app/composables/rpc.ts
index 9f1727152..274882ba6 100644
--- a/plugins/data-inspector/src/spa/composables/rpc.ts
+++ b/plugins/data-inspector/app/composables/rpc.ts
@@ -1,3 +1,16 @@
+import type {
+  DataSourceMeta,
+  FilterOptions,
+  NodePath,
+  QueryOutcome,
+  SavedQuery,
+  SavedQueryScope,
+  SaveQueryInput,
+  SkeletonOutcome,
+  SuggestOutcome,
+  WriteOutcome,
+  WriteRequest,
+} from '@devframes/plugin-data-inspector/engine'
 /**
  * Devframe connection state + the data BACKEND the workbench talks through.
  *
@@ -14,23 +27,10 @@
 // Erased at build time.
 import type {} from 'devframe'
 import type { DevframeConnectionStatus, DevframeRpcClient } from 'devframe/client'
-import type {
-  DataSourceMeta,
-  FilterOptions,
-  NodePath,
-  QueryOutcome,
-  SavedQuery,
-  SavedQueryScope,
-  SaveQueryInput,
-  SkeletonOutcome,
-  SuggestOutcome,
-  WriteOutcome,
-  WriteRequest,
-} from '../../engine'
+import { runQuery, runQueryAtPath, skeletonOf, suggest as suggestQuery } from '@devframes/plugin-data-inspector/engine'
 import { connectDevframe } from 'devframe/client'
 import { DEVFRAME_AUTH_TOKEN_QUERY_PARAM } from 'devframe/constants'
 import { reactive, shallowRef } from 'vue'
-import { runQuery, runQueryAtPath, skeletonOf, suggest as suggestQuery } from '../../engine'
 
 export const connection = reactive<{
   connected: boolean
diff --git a/plugins/data-inspector/src/spa/composables/saved.ts b/plugins/data-inspector/app/composables/saved.ts
similarity index 87%
rename from plugins/data-inspector/src/spa/composables/saved.ts
rename to plugins/data-inspector/app/composables/saved.ts
index 6cf0c6d3a..1b63eef95 100644
--- a/plugins/data-inspector/src/spa/composables/saved.ts
+++ b/plugins/data-inspector/app/composables/saved.ts
@@ -1,5 +1,5 @@
 /** Saved-query CRUD state over the data backend. */
-import type { SavedQuery, SaveQueryInput } from '../../engine'
+import type { SavedQuery, SaveQueryInput } from '@devframes/plugin-data-inspector/engine'
 import { ref } from 'vue'
 import { backend } from './rpc'
 
diff --git a/plugins/data-inspector/src/spa/composables/scheme.ts b/plugins/data-inspector/app/composables/scheme.ts
similarity index 100%
rename from plugins/data-inspector/src/spa/composables/scheme.ts
rename to plugins/data-inspector/app/composables/scheme.ts
diff --git a/plugins/data-inspector/src/spa/composables/workbench.ts b/plugins/data-inspector/app/composables/workbench.ts
similarity index 99%
rename from plugins/data-inspector/src/spa/composables/workbench.ts
rename to plugins/data-inspector/app/composables/workbench.ts
index b5b4def6d..7a41f000a 100644
--- a/plugins/data-inspector/src/spa/composables/workbench.ts
+++ b/plugins/data-inspector/app/composables/workbench.ts
@@ -1,3 +1,4 @@
+import type { DataSourceMeta, FilterOptions, NodePath, QueryOutcome, QueryStats, SkeletonOutcome, SuggestItem, SuggestOutcome, WriteOutcome, WriteRequest } from '@devframes/plugin-data-inspector/engine'
 /**
  * The query workbench pipeline:
  * debounced auto-run, client-side jora syntax gate (malformed queries never
@@ -7,7 +8,6 @@
  * An empty query runs `$` (the root), so every source lands on a full view.
  */
 import type { InjectionKey } from 'vue'
-import type { DataSourceMeta, FilterOptions, NodePath, QueryOutcome, QueryStats, SkeletonOutcome, SuggestItem, SuggestOutcome, WriteOutcome, WriteRequest } from '../../engine'
 import jora from 'jora'
 import { computed, inject, reactive, ref, shallowRef, watch } from 'vue'
 import { backend, connection } from './rpc'
diff --git a/plugins/data-inspector/src/spa/index.html b/plugins/data-inspector/app/index.html
similarity index 100%
rename from plugins/data-inspector/src/spa/index.html
rename to plugins/data-inspector/app/index.html
diff --git a/plugins/data-inspector/src/spa/main.ts b/plugins/data-inspector/app/main.ts
similarity index 100%
rename from plugins/data-inspector/src/spa/main.ts
rename to plugins/data-inspector/app/main.ts
diff --git a/plugins/data-inspector/src/spa/shims.d.ts b/plugins/data-inspector/app/shims.d.ts
similarity index 100%
rename from plugins/data-inspector/src/spa/shims.d.ts
rename to plugins/data-inspector/app/shims.d.ts
diff --git a/plugins/data-inspector/src/spa/style.css b/plugins/data-inspector/app/style.css
similarity index 100%
rename from plugins/data-inspector/src/spa/style.css
rename to plugins/data-inspector/app/style.css
diff --git a/plugins/data-inspector/app/vite.config.ts b/plugins/data-inspector/app/vite.config.ts
new file mode 100644
index 000000000..944bc8870
--- /dev/null
+++ b/plugins/data-inspector/app/vite.config.ts
@@ -0,0 +1,69 @@
+import type { Server } from 'node:http'
+import type { Plugin } from 'vite'
+import { fileURLToPath } from 'node:url'
+import createDataInspectorDevframe from '@devframes/plugin-data-inspector'
+import vue from '@vitejs/plugin-vue'
+import { initDevframe } from 'devframe/initiate'
+import { resolveBasePath } from 'devframe/internal'
+import UnoCSS from 'unocss/vite'
+import { defineConfig } from 'vite'
+import { alias } from '../../../alias'
+
+const devframe = createDataInspectorDevframe()
+// Hosted base (`/__devframes_plugin_data_inspector/`): the SPA and the dev
+// bridge share it so `document.baseURI` matches production while Vite serves
+// the HMR panel.
+const basePath = resolveBasePath(devframe, 'hosted')
+
+/**
+ * Serve-only plugin that bridges the data-inspector node side (RPC + WebSocket
+ * + `__connection.json`) onto Vite's own dev server under the devframe base
+ * path, mounted as a **post** middleware so Vite serves the HMR SPA first and
+ * the devframe host only answers the routes it owns. Inert during `vite build`.
+ */
+function dataInspectorDevBridge(): Plugin {
+  return {
+    name: 'data-inspector-dev-bridge',
+    apply: 'serve',
+    configureServer(server) {
+      const instance = initDevframe(devframe, {
+        base: basePath,
+        distDir: false,
+        server: server.httpServer as Server,
+        auth: false,
+      })
+      return () => server.middlewares.use(instance.nodeMiddleware)
+    },
+  }
+}
+
+/**
+ * `base: './'` for the build keeps the mount path portable: the same `app`
+ * output works whether devframe serves it at `/` (standalone) or
+ * `/__devframes_plugin_data_inspector/` (mounted in a hub). `connectDevframe`
+ * resolves its connection meta relative to `document.baseURI` to match.
+ *
+ * In `vite dev` the panel is served under the devframe base path so its
+ * `document.baseURI` matches production, and {@link dataInspectorDevBridge}
+ * bridges the node side there with HMR.
+ */
+export default defineConfig(({ command }) => ({
+  base: command === 'serve' ? basePath : './',
+  root: fileURLToPath(new URL('.', import.meta.url)),
+  resolve: { alias },
+  /**
+   * discovery (or a dep) references the Node-style `global`; webpack shims it
+   * by default, Vite needs the classic define.
+   */
+  define: { global: 'globalThis' },
+  plugins: [vue(), UnoCSS(), dataInspectorDevBridge()],
+  /**
+   * `@antfu/design` ships raw `.ts`/`.vue`; let `@vitejs/plugin-vue` compile
+   * its SFCs instead of esbuild pre-bundling them.
+   */
+  optimizeDeps: { exclude: ['@antfu/design'] },
+  build: {
+    outDir: fileURLToPath(new URL('../assets-pkg/dist', import.meta.url)),
+    emptyOutDir: true,
+  },
+}))
diff --git a/plugins/data-inspector/bin.mjs b/plugins/data-inspector/bin.mjs
index 44d160958..c70d485ca 100755
--- a/plugins/data-inspector/bin.mjs
+++ b/plugins/data-inspector/bin.mjs
@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 import process from 'node:process'
-import { createDataInspectorCli } from './dist/cli.mjs'
+import { createDataInspectorCli } from './dist/node/cli.mjs'
 
 async function main() {
   const cli = createDataInspectorCli()
diff --git a/plugins/data-inspector/package.json b/plugins/data-inspector/package.json
index 69d2673db..0c84e4d55 100644
--- a/plugins/data-inspector/package.json
+++ b/plugins/data-inspector/package.json
@@ -21,16 +21,15 @@
   ],
   "sideEffects": false,
   "exports": {
-    ".": "./dist/index.mjs",
-    "./client": "./dist/client/index.mjs",
+    ".": "./dist/node/index.mjs",
     "./inject": "./dist/inject/index.mjs",
-    "./cli": "./dist/cli.mjs",
-    "./engine": "./dist/engine/index.mjs",
-    "./node": "./dist/node/index.mjs",
-    "./registry": "./dist/registry/index.mjs",
+    "./cli": "./dist/node/cli.mjs",
+    "./engine": "./dist/node/engine/index.mjs",
+    "./node": "./dist/node/setup.mjs",
+    "./registry": "./dist/node/registry/index.mjs",
     "./package.json": "./package.json"
   },
-  "types": "./dist/index.d.mts",
+  "types": "./dist/node/index.d.mts",
   "bin": {
     "devframe-data-inspector": "./bin.mjs"
   },
@@ -39,11 +38,14 @@
     "dist"
   ],
   "scripts": {
-    "build": "tsdown && vite build --config src/spa/vite.config.ts",
-    "dev": "vite --config src/spa/vite.config.ts",
+    "build": "tsdown && vite build --config app/vite.config.ts",
+    "build:app": "vite build --config app/vite.config.ts",
     "watch": "tsdown --watch",
+    "dev": "vite --config app/vite.config.ts --host",
+    "play": "pnpm run build && node playgrounds/server.mjs",
     "storybook": "storybook dev -p 6016",
     "build-storybook": "storybook build",
+    "cli:build": "node bin.mjs build --out-dir dist/static",
     "prepack": "turbo run build --filter=@devframes/plugin-data-inspector",
     "test": "vitest run",
     "typecheck": "tsc --noEmit"
@@ -78,6 +80,7 @@
     "devframe": "workspace:*",
     "dompurify": "catalog:frontend",
     "floating-vue": "catalog:frontend",
+    "h3": "catalog:deps",
     "jora": "catalog:inlined",
     "reka-ui": "catalog:frontend",
     "splitpanes": "catalog:frontend",
diff --git a/plugins/data-inspector/playgrounds/server.mjs b/plugins/data-inspector/playgrounds/server.mjs
new file mode 100644
index 000000000..847cbc26d
--- /dev/null
+++ b/plugins/data-inspector/playgrounds/server.mjs
@@ -0,0 +1,59 @@
+#!/usr/bin/env node
+/**
+ * Standalone demo host for the Data Inspector.
+ *
+ * `initDevframe` runs setup, serves the built Vue panel SPA + `__connection.json`
+ * from `assets-pkg/dist` under the devframe base path, and binds the WebSocket
+ * RPC upgrade onto our http server. The built-in example source is registered
+ * by setup, so the panel has data to query out of the box.
+ *
+ *   node playgrounds/server.mjs   → live WebSocket RPC (`assets-pkg/dist`)
+ */
+import { existsSync } from 'node:fs'
+import { createServer } from 'node:http'
+import process from 'node:process'
+import { fileURLToPath } from 'node:url'
+import { initDevframe } from 'devframe/initiate'
+import { getPort } from 'devframe/utils/get-port'
+import { H3, toNodeHandler } from 'h3'
+import { resolve } from 'pathe'
+import createDataInspectorDevframe from '../src/node/index.ts'
+
+const HERE = fileURLToPath(new URL('.', import.meta.url))
+const ROOT = resolve(HERE, '..')
+const panelDir = resolve(ROOT, 'assets-pkg/dist')
+
+const devframe = createDataInspectorDevframe()
+const basePath = devframe.basePath
+
+async function main() {
+  if (!existsSync(resolve(panelDir, 'index.html'))) {
+    console.error('\n[data-inspector playground] missing assets-pkg/dist/index.html\n  → run `pnpm -C plugins/data-inspector build` first.\n')
+    process.exit(1)
+  }
+
+  const bindHost = '0.0.0.0'
+  const port = await getPort({ host: bindHost, port: 4414 })
+  const origin = `http://localhost:${port}`
+
+  const app = new H3()
+  const server = createServer(toNodeHandler(app))
+  const instance = initDevframe(devframe, {
+    base: basePath,
+    distDir: panelDir,
+    app,
+    server,
+    host: bindHost,
+    origin,
+    auth: false,
+  })
+  await new Promise(r => server.listen(port, bindHost, r))
+  await instance.ready
+
+  process.stdout.write(`\n  Data Inspector: dev (live WebSocket RPC)\n  ▸ panel:  ${origin}${basePath}\n\n`)
+}
+
+main().catch((error) => {
+  console.error(error)
+  process.exit(1)
+})
diff --git a/plugins/data-inspector/src/client/index.ts b/plugins/data-inspector/src/client/index.ts
deleted file mode 100644
index 03ab6aa86..000000000
--- a/plugins/data-inspector/src/client/index.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import type { DevframeConnectionStatus, DevframeRpcClient, DevframeRpcClientOptions } from 'devframe/client'
-import { connectDevframe } from 'devframe/client'
-
-export type { DevframeConnectionStatus, DevframeRpcClient }
-export type {
-  DataSourceMeta,
-  FilterOptions,
-  Query,
-  QueryOutcome,
-  QueryStats,
-  SavedQuery,
-  SavedQueryScope,
-  SaveQueryInput,
-  SkeletonOutcome,
-  SuggestItem,
-  SuggestOutcome,
-} from '../engine/contract'
-
-/**
- * Connect to the data inspector's devframe backend. A thin, typed wrapper
- * around devframe's {@link connectDevframe}; the SPA derives its base from
- * `document.baseURI`, so no options are required in the common case.
- */
-export function connectDataInspector(options?: DevframeRpcClientOptions): Promise<DevframeRpcClient> {
-  return connectDevframe(options)
-}
diff --git a/plugins/data-inspector/src/index.ts b/plugins/data-inspector/src/index.ts
deleted file mode 100644
index 06639a354..000000000
--- a/plugins/data-inspector/src/index.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-import type { DevframeDefinition, RemoteAssets } from 'devframe'
-import { defineDevframe } from 'devframe'
-import pkg from '../package.json' with { type: 'json' }
-import { setupDataInspector } from './node/index'
-
-/** Default devframe id, also the RPC namespace. */
-const DEFAULT_ID = 'devframes:plugin:data-inspector'
-
-/** Preferred standalone CLI port. */
-const DEFAULT_PORT = 9014
-
-// The SPA ships in the lockstep `@devframes/plugin-data-inspector--assets` package,
-// served on demand through devframe's remote-assets back-proxy. The definition's
-// `importMetaUrl` (below) supplies the default `resolveFrom`, so a locally
-// installed copy (a workspace link here) is served with zero network.
-const remoteAssets: RemoteAssets = {
-  package: `${pkg.name}--assets`,
-  version: pkg.version,
-}
-
-export interface DataInspectorDevframeOptions {
-  /** Override the devframe id (and default mount path). */
-  id?: string
-  /** Override the display name shown in a host dock. */
-  name?: string
-  /** Override the dock icon. */
-  icon?: string
-  /**
-   * Override the mount path. Left unset, the SPA mounts at `/` standalone
-   * and `/__<id>/` when hosted (Vite/embedded).
-   */
-  basePath?: string
-  /** Preferred standalone CLI port. */
-  port?: number
-  /**
-   * Require the trust handshake on the standalone server. Enabled by
-   * default; `--open` embeds the current OTP in the opened URL, so the
-   * tab authenticates automatically without extra prompts. The in-process
-   * inject endpoint (`@devframes/plugin-data-inspector/inject`) uses its own
-   * pre-shared-token scheme and is unaffected by this option.
-   */
-  auth?: boolean
-  /**
-   * Register the built-in example source, a small live playground graph
-   * with suggested queries (default `true`). Disable once your own sources
-   * cover the first-run experience.
-   */
-  exampleSource?: boolean
-}
-
-/**
- * Build a {@link DevframeDefinition} for the Data Inspector: an interactive
- * jora query workbench over data sources registered by other plugins, hosts,
- * files, or attached processes.
- *
- * The plugin is fully headless about sources; register them via
- * `@devframes/plugin-data-inspector/registry` (process-global, no context
- * needed) or through the `devframes:plugin:data-inspector:sources` context
- * service.
- *
- * @experimental This plugin is experimental and may change without a major
- * version bump until it stabilizes.
- */
-export function createDataInspectorDevframe(options: DataInspectorDevframeOptions = {}): DevframeDefinition {
-  const id = options.id ?? DEFAULT_ID
-  return defineDevframe({
-    id,
-    name: options.name ?? 'Data Inspector',
-    version: pkg.version,
-    packageName: pkg.name,
-    importMetaUrl: import.meta.url,
-    homepage: pkg.homepage,
-    description: pkg.description,
-    icon: options.icon ?? 'ph:crosshair-duotone',
-    basePath: options.basePath,
-    cli: {
-      command: 'data-inspector',
-      port: options.port ?? DEFAULT_PORT,
-      distDir: remoteAssets,
-      auth: options.auth ?? true,
-    },
-    dock: { category: '~builtin' },
-    setup(ctx) {
-      setupDataInspector(ctx, { exampleSource: options.exampleSource })
-    },
-  })
-}
-
-export default createDataInspectorDevframe
-export type { DataSourceEntry, DataSourceHandle, DataSourcesService } from './registry/index'
-export { DATA_SOURCES_SERVICE_ID, registerDataSource } from './registry/index'
diff --git a/plugins/data-inspector/src/inject/index.ts b/plugins/data-inspector/src/inject/index.ts
index 1b76bf267..9ca7cdbd3 100644
--- a/plugins/data-inspector/src/inject/index.ts
+++ b/plugins/data-inspector/src/inject/index.ts
@@ -37,7 +37,7 @@
  * treat the endpoint like a debugger port.
  */
 import type { DevframeHost, DevframeNodeContext } from 'devframe'
-import type { DataSourceEntry } from '../registry/index'
+import type { DataSourceEntry } from '../node/registry/index'
 import { mkdirSync, rmSync, writeFileSync } from 'node:fs'
 import { createServer } from 'node:http'
 import { homedir } from 'node:os'
@@ -121,10 +121,10 @@ export function createGlobalThisDataSource(): DataSourceEntry {
 export async function exposeDataInspector(options: ExposeDataInspectorOptions = {}): Promise<DataInspectorEndpoint> {
   // Deferred so `--import`ing the inject entry never pulls the whole node module graph
   // into processes that don't enable it.
-  const { setupDataInspector } = await import('../node/index')
+  const { setupDataInspector } = await import('../node/setup')
 
   if (options.sources?.length) {
-    const { registerDataSource } = await import('../registry/index')
+    const { registerDataSource } = await import('../node/registry/index')
     for (const source of options.sources)
       registerDataSource(source)
   }
diff --git a/plugins/data-inspector/src/cli.ts b/plugins/data-inspector/src/node/cli.ts
similarity index 95%
rename from plugins/data-inspector/src/cli.ts
rename to plugins/data-inspector/src/node/cli.ts
index 7f632b09c..ee2252a4d 100644
--- a/plugins/data-inspector/src/cli.ts
+++ b/plugins/data-inspector/src/node/cli.ts
@@ -8,7 +8,7 @@
  * devframe-data-inspector build stats.json         # self-contained static export
  * ```
  */
-import type { InjectDiscovery } from './inject/index'
+import type { InjectDiscovery } from '../inject/index'
 import { existsSync, readFileSync } from 'node:fs'
 import { cp, mkdir, writeFile } from 'node:fs/promises'
 import { createServer } from 'node:http'
@@ -20,13 +20,13 @@ import { createDevServer } from 'devframe/adapters/dev'
 import { DEVFRAME_AUTH_TOKEN_QUERY_PARAM, DEVFRAME_CONNECTION_META_FILENAME } from 'devframe/constants'
 import { getPort } from 'devframe/utils/get-port'
 import { serveStaticNodeMiddleware } from 'devframe/utils/serve-static'
-import pkg from '../package.json' with { type: 'json' }
+import pkg from '../../package.json' with { type: 'json' }
+import { DISCOVERY_FILE } from '../inject/index'
+import { createFileDataSource, loadDataFile } from './files'
 import { createDataInspectorDevframe } from './index'
-import { DISCOVERY_FILE } from './inject/index'
-import { createFileDataSource, loadDataFile } from './node/files'
 import { listDataSources, registerDataSource } from './registry/index'
 
-const distDir = fileURLToPath(new URL('../dist/spa', import.meta.url))
+const distDir = fileURLToPath(new URL('../../assets-pkg/dist', import.meta.url))
 
 /** The static-export dataset consumed by the SPA in static mode. */
 export interface StaticDataset {
diff --git a/plugins/data-inspector/src/engine/contract.ts b/plugins/data-inspector/src/node/engine/contract.ts
similarity index 100%
rename from plugins/data-inspector/src/engine/contract.ts
rename to plugins/data-inspector/src/node/engine/contract.ts
diff --git a/plugins/data-inspector/src/engine/index.ts b/plugins/data-inspector/src/node/engine/index.ts
similarity index 100%
rename from plugins/data-inspector/src/engine/index.ts
rename to plugins/data-inspector/src/node/engine/index.ts
diff --git a/plugins/data-inspector/src/engine/jora.d.ts b/plugins/data-inspector/src/node/engine/jora.d.ts
similarity index 100%
rename from plugins/data-inspector/src/engine/jora.d.ts
rename to plugins/data-inspector/src/node/engine/jora.d.ts
diff --git a/plugins/data-inspector/src/engine/normalize.ts b/plugins/data-inspector/src/node/engine/normalize.ts
similarity index 100%
rename from plugins/data-inspector/src/engine/normalize.ts
rename to plugins/data-inspector/src/node/engine/normalize.ts
diff --git a/plugins/data-inspector/src/engine/query-engine.ts b/plugins/data-inspector/src/node/engine/query-engine.ts
similarity index 100%
rename from plugins/data-inspector/src/engine/query-engine.ts
rename to plugins/data-inspector/src/node/engine/query-engine.ts
diff --git a/plugins/data-inspector/src/engine/skeleton.ts b/plugins/data-inspector/src/node/engine/skeleton.ts
similarity index 100%
rename from plugins/data-inspector/src/engine/skeleton.ts
rename to plugins/data-inspector/src/node/engine/skeleton.ts
diff --git a/plugins/data-inspector/src/engine/write.ts b/plugins/data-inspector/src/node/engine/write.ts
similarity index 100%
rename from plugins/data-inspector/src/engine/write.ts
rename to plugins/data-inspector/src/node/engine/write.ts
diff --git a/plugins/data-inspector/src/node/example-source.ts b/plugins/data-inspector/src/node/example-source.ts
index ff5241d7a..73d2913f8 100644
--- a/plugins/data-inspector/src/node/example-source.ts
+++ b/plugins/data-inspector/src/node/example-source.ts
@@ -1,5 +1,5 @@
 import type { DevframeNodeContext } from 'devframe'
-import type { DataSourceEntry } from '../registry/index'
+import type { DataSourceEntry } from './registry/index'
 import os from 'node:os'
 import process from 'node:process'
 
diff --git a/plugins/data-inspector/src/node/files.ts b/plugins/data-inspector/src/node/files.ts
index e7e8c0461..55a5670b1 100644
--- a/plugins/data-inspector/src/node/files.ts
+++ b/plugins/data-inspector/src/node/files.ts
@@ -3,7 +3,7 @@
  * `.ndjson` parse as an array of records. Each file becomes one static
  * source in the registry.
  */
-import type { DataSourceEntry } from '../registry/index'
+import type { DataSourceEntry } from './registry/index'
 import { readFile } from 'node:fs/promises'
 import { basename, extname, resolve } from 'node:path'
 import process from 'node:process'
diff --git a/plugins/data-inspector/src/node/index.ts b/plugins/data-inspector/src/node/index.ts
index c64a98897..89e23411a 100644
--- a/plugins/data-inspector/src/node/index.ts
+++ b/plugins/data-inspector/src/node/index.ts
@@ -1,53 +1,91 @@
-import type { DevframeNodeContext } from 'devframe'
-import { createDataSourcesService, DATA_SOURCES_SERVICE_ID, getDataSource, onDataSourceDataChanged, onDataSourcesChanged, registerDataSource } from '../registry/index'
-import { serverFunctions } from '../rpc/index'
-import { createExampleDataSource, EXAMPLE_SOURCE_ID } from './example-source'
+import type { DevframeDefinition, RemoteAssets } from 'devframe'
+import { defineDevframe } from 'devframe'
+import pkg from '../../package.json' with { type: 'json' }
+import { setupDataInspector } from './setup'
 
-/** Broadcast whenever the source registry changes (register/unregister). */
-export const SOURCES_CHANGED_EVENT = 'devframes:plugin:data-inspector:sources:changed'
+/** Default devframe id, also the RPC namespace. */
+const DEFAULT_ID = 'devframes:plugin:data-inspector'
 
-/**
- * Broadcast whenever a source's DATA changes: a successful `write`, a
- * `notifyChanged()` handle call, or a source's own `subscribe` bridge.
- * Carries the source id so clients refresh only the affected view.
- */
-export const DATA_CHANGED_EVENT = 'devframes:plugin:data-inspector:data:changed'
+/** Preferred standalone CLI port. */
+const DEFAULT_PORT = 9014
 
-export interface SetupDataInspectorOptions {
-  /** Register the built-in example source (default `true`). */
+// The SPA ships in the lockstep `@devframes/plugin-data-inspector--assets` package,
+// served on demand through devframe's remote-assets back-proxy. The definition's
+// `importMetaUrl` (below) supplies the default `resolveFrom`, so a locally
+// installed copy (a workspace link here) is served with zero network.
+const remoteAssets: RemoteAssets = {
+  package: `${pkg.name}--assets`,
+  version: pkg.version,
+}
+
+export interface DataInspectorDevframeOptions {
+  /** Override the devframe id (and default mount path). */
+  id?: string
+  /** Override the display name shown in a host dock. */
+  name?: string
+  /** Override the dock icon. */
+  icon?: string
+  /**
+   * Override the mount path. Left unset, the SPA mounts at `/` standalone
+   * and `/__<id>/` when hosted (Vite/embedded).
+   */
+  basePath?: string
+  /** Preferred standalone CLI port. */
+  port?: number
+  /**
+   * Require the trust handshake on the standalone server. Enabled by
+   * default; `--open` embeds the current OTP in the opened URL, so the
+   * tab authenticates automatically without extra prompts. The in-process
+   * inject endpoint (`@devframes/plugin-data-inspector/inject`) uses its own
+   * pre-shared-token scheme and is unaffected by this option.
+   */
+  auth?: boolean
+  /**
+   * Register the built-in example source, a small live playground graph
+   * with suggested queries (default `true`). Disable once your own sources
+   * cover the first-run experience.
+   */
   exampleSource?: boolean
 }
 
 /**
- * Register the data-inspector's RPC functions on a devframe node context,
- * provide the source registry as a typed context service, and broadcast
- * registry changes so connected UIs refresh their source list live.
+ * Build a {@link DevframeDefinition} for the Data Inspector: an interactive
+ * jora query workbench over data sources registered by other plugins, hosts,
+ * files, or attached processes.
+ *
+ * The plugin is fully headless about sources; register them via
+ * `@devframes/plugin-data-inspector/registry` (process-global, no context
+ * needed) or through the `devframes:plugin:data-inspector:sources` context
+ * service.
  *
- * Called from the definition's `setup(ctx)` and reusable by host adapters
- * (the CLI and the inject endpoint wire their own contexts through this).
+ * @experimental This plugin is experimental and may change without a major
+ * version bump until it stabilizes.
  */
-export function setupDataInspector(ctx: DevframeNodeContext, options: SetupDataInspectorOptions = {}): void {
-  for (const fn of serverFunctions)
-    ctx.rpc.register(fn)
-
-  // The registry itself is process-global; the service is the typed,
-  // zero-dependency access path for other integrations on this context.
-  if (!ctx.services.has(DATA_SOURCES_SERVICE_ID))
-    ctx.services.provide(DATA_SOURCES_SERVICE_ID, createDataSourcesService())
-
-  // Always on unless opted out: the example source doubles as an
-  // environment inspector (this context, OS, live process stats).
-  if ((options.exampleSource ?? true) && !getDataSource(EXAMPLE_SOURCE_ID))
-    registerDataSource(createExampleDataSource(ctx))
-
-  onDataSourcesChanged(() => {
-    void ctx.rpc.broadcast({ method: SOURCES_CHANGED_EVENT, args: [] } as never)
-  })
-
-  onDataSourceDataChanged((sourceId) => {
-    void ctx.rpc.broadcast({ method: DATA_CHANGED_EVENT, args: [sourceId] } as never)
+export function createDataInspectorDevframe(options: DataInspectorDevframeOptions = {}): DevframeDefinition {
+  const id = options.id ?? DEFAULT_ID
+  return defineDevframe({
+    id,
+    name: options.name ?? 'Data Inspector',
+    version: pkg.version,
+    packageName: pkg.name,
+    importMetaUrl: import.meta.url,
+    homepage: pkg.homepage,
+    description: pkg.description,
+    icon: options.icon ?? 'ph:crosshair-duotone',
+    basePath: options.basePath,
+    cli: {
+      command: 'data-inspector',
+      port: options.port ?? DEFAULT_PORT,
+      distDir: remoteAssets,
+      auth: options.auth ?? true,
+    },
+    dock: { category: '~builtin' },
+    setup(ctx) {
+      setupDataInspector(ctx, { exampleSource: options.exampleSource })
+    },
   })
 }
 
-export { createExampleDataSource, EXAMPLE_SOURCE_ID }
-export { serverFunctions }
+export default createDataInspectorDevframe
+export type { DataSourceEntry, DataSourceHandle, DataSourcesService } from './registry/index'
+export { DATA_SOURCES_SERVICE_ID, registerDataSource } from './registry/index'
diff --git a/plugins/data-inspector/src/registry/index.ts b/plugins/data-inspector/src/node/registry/index.ts
similarity index 99%
rename from plugins/data-inspector/src/registry/index.ts
rename to plugins/data-inspector/src/node/registry/index.ts
index bf191eb38..1abbc1d25 100644
--- a/plugins/data-inspector/src/registry/index.ts
+++ b/plugins/data-inspector/src/node/registry/index.ts
@@ -27,7 +27,7 @@
  * ```
  */
 import type { DataSourceMeta, Query } from '../engine/contract'
-import { diagnostics } from '../node/diagnostics'
+import { diagnostics } from '../diagnostics'
 
 export interface DataSourceEntry {
   /** Unique id; namespace it with your plugin id (`my-plugin:thing`). */
diff --git a/plugins/data-inspector/src/rpc/functions/_define.ts b/plugins/data-inspector/src/node/rpc/functions/_define.ts
similarity index 100%
rename from plugins/data-inspector/src/rpc/functions/_define.ts
rename to plugins/data-inspector/src/node/rpc/functions/_define.ts
diff --git a/plugins/data-inspector/src/rpc/functions/query-path.ts b/plugins/data-inspector/src/node/rpc/functions/query-path.ts
similarity index 100%
rename from plugins/data-inspector/src/rpc/functions/query-path.ts
rename to plugins/data-inspector/src/node/rpc/functions/query-path.ts
diff --git a/plugins/data-inspector/src/rpc/functions/query.ts b/plugins/data-inspector/src/node/rpc/functions/query.ts
similarity index 100%
rename from plugins/data-inspector/src/rpc/functions/query.ts
rename to plugins/data-inspector/src/node/rpc/functions/query.ts
diff --git a/plugins/data-inspector/src/rpc/functions/saved.ts b/plugins/data-inspector/src/node/rpc/functions/saved.ts
similarity index 97%
rename from plugins/data-inspector/src/rpc/functions/saved.ts
rename to plugins/data-inspector/src/node/rpc/functions/saved.ts
index d46236422..72c828e4e 100644
--- a/plugins/data-inspector/src/rpc/functions/saved.ts
+++ b/plugins/data-inspector/src/node/rpc/functions/saved.ts
@@ -1,5 +1,5 @@
 import type { SavedQueryScope, SaveQueryInput } from '../../engine/contract'
-import { deleteSavedQuery, listSavedQueries, saveQuery } from '../../node/saved-queries'
+import { deleteSavedQuery, listSavedQueries, saveQuery } from '../../saved-queries'
 import { defineDataInspectorRpc, NS } from './_define'
 
 export const savedList = defineDataInspectorRpc({
diff --git a/plugins/data-inspector/src/rpc/functions/skeleton.ts b/plugins/data-inspector/src/node/rpc/functions/skeleton.ts
similarity index 100%
rename from plugins/data-inspector/src/rpc/functions/skeleton.ts
rename to plugins/data-inspector/src/node/rpc/functions/skeleton.ts
diff --git a/plugins/data-inspector/src/rpc/functions/sources.ts b/plugins/data-inspector/src/node/rpc/functions/sources.ts
similarity index 100%
rename from plugins/data-inspector/src/rpc/functions/sources.ts
rename to plugins/data-inspector/src/node/rpc/functions/sources.ts
diff --git a/plugins/data-inspector/src/rpc/functions/suggest.ts b/plugins/data-inspector/src/node/rpc/functions/suggest.ts
similarity index 100%
rename from plugins/data-inspector/src/rpc/functions/suggest.ts
rename to plugins/data-inspector/src/node/rpc/functions/suggest.ts
diff --git a/plugins/data-inspector/src/rpc/functions/write.ts b/plugins/data-inspector/src/node/rpc/functions/write.ts
similarity index 100%
rename from plugins/data-inspector/src/rpc/functions/write.ts
rename to plugins/data-inspector/src/node/rpc/functions/write.ts
diff --git a/plugins/data-inspector/src/rpc/index.ts b/plugins/data-inspector/src/node/rpc/index.ts
similarity index 100%
rename from plugins/data-inspector/src/rpc/index.ts
rename to plugins/data-inspector/src/node/rpc/index.ts
diff --git a/plugins/data-inspector/src/node/saved-queries.ts b/plugins/data-inspector/src/node/saved-queries.ts
index 83e3b06e6..a3fb801e7 100644
--- a/plugins/data-inspector/src/node/saved-queries.ts
+++ b/plugins/data-inspector/src/node/saved-queries.ts
@@ -12,7 +12,7 @@
  * devframe's `createStorage` (debounced atomic JSON writes).
  */
 import type { DevframeNodeContext } from 'devframe'
-import type { SavedQuery, SavedQueryScope, SaveQueryInput } from '../engine/contract'
+import type { SavedQuery, SavedQueryScope, SaveQueryInput } from './engine/contract'
 import { join } from 'node:path'
 import { createStorage } from 'devframe/node'
 
diff --git a/plugins/data-inspector/src/node/setup.ts b/plugins/data-inspector/src/node/setup.ts
new file mode 100644
index 000000000..4f6f4c07d
--- /dev/null
+++ b/plugins/data-inspector/src/node/setup.ts
@@ -0,0 +1,53 @@
+import type { DevframeNodeContext } from 'devframe'
+import { createExampleDataSource, EXAMPLE_SOURCE_ID } from './example-source'
+import { createDataSourcesService, DATA_SOURCES_SERVICE_ID, getDataSource, onDataSourceDataChanged, onDataSourcesChanged, registerDataSource } from './registry/index'
+import { serverFunctions } from './rpc/index'
+
+/** Broadcast whenever the source registry changes (register/unregister). */
+export const SOURCES_CHANGED_EVENT = 'devframes:plugin:data-inspector:sources:changed'
+
+/**
+ * Broadcast whenever a source's DATA changes: a successful `write`, a
+ * `notifyChanged()` handle call, or a source's own `subscribe` bridge.
+ * Carries the source id so clients refresh only the affected view.
+ */
+export const DATA_CHANGED_EVENT = 'devframes:plugin:data-inspector:data:changed'
+
+export interface SetupDataInspectorOptions {
+  /** Register the built-in example source (default `true`). */
+  exampleSource?: boolean
+}
+
+/**
+ * Register the data-inspector's RPC functions on a devframe node context,
+ * provide the source registry as a typed context service, and broadcast
+ * registry changes so connected UIs refresh their source list live.
+ *
+ * Called from the definition's `setup(ctx)` and reusable by host adapters
+ * (the CLI and the inject endpoint wire their own contexts through this).
+ */
+export function setupDataInspector(ctx: DevframeNodeContext, options: SetupDataInspectorOptions = {}): void {
+  for (const fn of serverFunctions)
+    ctx.rpc.register(fn)
+
+  // The registry itself is process-global; the service is the typed,
+  // zero-dependency access path for other integrations on this context.
+  if (!ctx.services.has(DATA_SOURCES_SERVICE_ID))
+    ctx.services.provide(DATA_SOURCES_SERVICE_ID, createDataSourcesService())
+
+  // Always on unless opted out: the example source doubles as an
+  // environment inspector (this context, OS, live process stats).
+  if ((options.exampleSource ?? true) && !getDataSource(EXAMPLE_SOURCE_ID))
+    registerDataSource(createExampleDataSource(ctx))
+
+  onDataSourcesChanged(() => {
+    void ctx.rpc.broadcast({ method: SOURCES_CHANGED_EVENT, args: [] } as never)
+  })
+
+  onDataSourceDataChanged((sourceId) => {
+    void ctx.rpc.broadcast({ method: DATA_CHANGED_EVENT, args: [sourceId] } as never)
+  })
+}
+
+export { createExampleDataSource, EXAMPLE_SOURCE_ID }
+export { serverFunctions }
diff --git a/plugins/data-inspector/src/spa/vite.config.ts b/plugins/data-inspector/src/spa/vite.config.ts
deleted file mode 100644
index fb94cc910..000000000
--- a/plugins/data-inspector/src/spa/vite.config.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { fileURLToPath } from 'node:url'
-import { devframeVite } from '@devframes/vite/single'
-import vue from '@vitejs/plugin-vue'
-import UnoCSS from 'unocss/vite'
-import { defineConfig } from 'vite'
-import { alias } from '../../../../alias'
-import createDataInspectorDevframe from '../index'
-
-/**
- * The data-inspector SPA. `base: './'` keeps every asset URL relative so the
- * bundle is mount-path portable; it discovers its runtime base from
- * `document.baseURI` and connects via `connectDevframe()`. The build is
- * copied verbatim by `createBuild`; no HTML rewriting.
- *
- * `devframeVite(createDataInspectorDevframe(), { bridge: true })` dogfoods
- * the plugin: it runs a side-car RPC + WS backend (with the built-in example
- * source) next to this HMR frontend, so `pnpm dev` is a full devframe dev
- * server, not a backend-less SPA.
- */
-export default defineConfig({
-  base: './',
-  root: fileURLToPath(new URL('.', import.meta.url)),
-  resolve: { alias },
-  /**
-   * discovery (or a dep) references the Node-style `global`; webpack shims it
-   * by default, Vite needs the classic define.
-   */
-  define: { global: 'globalThis' },
-  plugins: [
-    vue(),
-    UnoCSS(),
-    devframeVite(createDataInspectorDevframe(), { bridge: true, base: '/' }),
-  ],
-  /**
-   * `@antfu/design` ships raw `.ts`/`.vue`; let `@vitejs/plugin-vue` compile its
-   * SFCs instead of esbuild pre-bundling them.
-   */
-  optimizeDeps: { exclude: ['@antfu/design'] },
-  build: {
-    outDir: fileURLToPath(new URL('../../assets-pkg/dist', import.meta.url)),
-    emptyOutDir: true,
-  },
-})
diff --git a/plugins/data-inspector/test/engine.test.ts b/plugins/data-inspector/test/engine.test.ts
index deb230691..efeed5924 100644
--- a/plugins/data-inspector/test/engine.test.ts
+++ b/plugins/data-inspector/test/engine.test.ts
@@ -1,7 +1,7 @@
 import { describe, expect, it } from 'vitest'
-import { navigate, normalize } from '../src/engine/normalize'
-import { runQuery, runQueryAtPath, suggest } from '../src/engine/query-engine'
-import { skeletonOf } from '../src/engine/skeleton'
+import { navigate, normalize } from '../src/node/engine/normalize'
+import { runQuery, runQueryAtPath, suggest } from '../src/node/engine/query-engine'
+import { skeletonOf } from '../src/node/engine/skeleton'
 
 class Store {
   name = 'sessions'
diff --git a/plugins/data-inspector/test/registry.test.ts b/plugins/data-inspector/test/registry.test.ts
index b66095477..5dc75919b 100644
--- a/plugins/data-inspector/test/registry.test.ts
+++ b/plugins/data-inspector/test/registry.test.ts
@@ -9,7 +9,7 @@ import {
   resetDataSources,
   resolveSourceData,
   unregisterDataSource,
-} from '../src/registry/index'
+} from '../src/node/registry/index'
 
 afterEach(() => resetDataSources())
 
@@ -156,7 +156,7 @@ describe('example source', () => {
     const entry = createExampleDataSource()
     registerDataSource(entry)
     const data = await resolveSourceData(getDataSource(entry.id)!)
-    const { runQuery } = await import('../src/engine/query-engine')
+    const { runQuery } = await import('../src/node/engine/query-engine')
     for (const recipe of entry.queries ?? []) {
       const out = await runQuery(data, recipe.query.trim() || '$', recipe)
       expect(out.ok, `suggested query "${recipe.title}" must run`).toBe(true)
diff --git a/plugins/data-inspector/test/write.test.ts b/plugins/data-inspector/test/write.test.ts
index e78c06066..bd5ba2c71 100644
--- a/plugins/data-inspector/test/write.test.ts
+++ b/plugins/data-inspector/test/write.test.ts
@@ -1,6 +1,6 @@
-import type { WriteRequest } from '../src/engine/contract'
+import type { WriteRequest } from '../src/node/engine/contract'
 import { describe, expect, it } from 'vitest'
-import { applyWrite } from '../src/engine/write'
+import { applyWrite } from '../src/node/engine/write'
 
 const json = (value: unknown) => ({ kind: 'json', value }) as const
 
diff --git a/plugins/data-inspector/tsconfig.json b/plugins/data-inspector/tsconfig.json
index 9c7effe1f..826793da2 100644
--- a/plugins/data-inspector/tsconfig.json
+++ b/plugins/data-inspector/tsconfig.json
@@ -8,5 +8,5 @@
     "noEmit": true,
     "isolatedDeclarations": false
   },
-  "include": ["src", "test", "bin.mjs"]
+  "include": ["src", "app", "test", "playgrounds", "bin.mjs"]
 }
diff --git a/plugins/data-inspector/tsdown.config.ts b/plugins/data-inspector/tsdown.config.ts
index 76bed97d1..d74d63089 100644
--- a/plugins/data-inspector/tsdown.config.ts
+++ b/plugins/data-inspector/tsdown.config.ts
@@ -2,45 +2,46 @@ import { defineConfig } from 'tsdown'
 
 const tsconfig = '../../tsconfig.base.json'
 
-// Browser-loaded entries. Kept in their own rolldown graph so node-only
-// imports can never leak into the client bundle. The engine is isomorphic:
-// it runs server-side for live queries and client-side for static exports.
-const clientEntries = {
-  'client/index': 'src/client/index.ts',
-  'engine/index': 'src/engine/index.ts',
+// Inject endpoint: loaded via `node --import`. It runs in the user's Node
+// process (node:http, node:fs, devframe/node), so it builds on the node
+// platform with `devframe` external, resolved as a peer at runtime.
+const injectEntries = {
+  'inject/index': 'src/inject/index.ts',
 }
 
-// Node-side entries: the devframe definition, the CLI/Vite host adapters,
-// the setup module, the source registry, and the in-process inject entry.
-const serverEntries = {
-  'index': 'src/index.ts',
-  'cli': 'src/cli.ts',
+// Node-side entries: the devframe definition (root), the setup module, the
+// CLI adapter, the RPC registry, the isomorphic query engine, and the
+// source registry.
+const nodeEntries = {
   'node/index': 'src/node/index.ts',
-  'registry/index': 'src/registry/index.ts',
-  'inject/index': 'src/inject/index.ts',
+  'node/setup': 'src/node/setup.ts',
+  'node/cli': 'src/node/cli.ts',
+  'node/rpc/index': 'src/node/rpc/index.ts',
+  'node/engine/index': 'src/node/engine/index.ts',
+  'node/registry/index': 'src/node/registry/index.ts',
 }
 
 export default defineConfig([
   {
     clean: true,
-    platform: 'browser',
+    platform: 'node',
     tsconfig,
     dts: false,
     outExtensions: () => ({ js: '.mjs' }),
-    entry: clientEntries,
+    entry: injectEntries,
   },
   {
     clean: false,
     platform: 'node',
     tsconfig,
     dts: false,
-    entry: serverEntries,
+    entry: nodeEntries,
   },
   // One dts graph PER entry: a single-entry graph can never split shared
   // chunks, so declarations always inline and the emitted .d.mts files are
   // byte-deterministic (a combined graph let rolldown hoist entry contents
   // into shared chunks nondeterministically, flaking the tsnapi snapshots).
-  ...Object.entries({ ...clientEntries, ...serverEntries }).map(([name, source]) => ({
+  ...Object.entries({ ...injectEntries, ...nodeEntries }).map(([name, source]) => ({
     clean: false,
     platform: 'neutral' as const,
     tsconfig,
diff --git a/plugins/git/.storybook/main.ts b/plugins/git/.storybook/main.ts
index 4245973ff..2b4917d19 100644
--- a/plugins/git/.storybook/main.ts
+++ b/plugins/git/.storybook/main.ts
@@ -3,7 +3,7 @@ import react from '@vitejs/plugin-react-oxc'
 import UnoCSS from 'unocss/vite'
 
 const config: StorybookConfig = {
-  stories: ['../src/client/**/*.stories.@(ts|tsx)'],
+  stories: ['../app/**/*.stories.@(ts|tsx)'],
   addons: ['@storybook/addon-docs', '@storybook/addon-a11y'],
   framework: {
     name: '@storybook/react-vite',
diff --git a/plugins/git/README.md b/plugins/git/README.md
index 30d713607..745bac17a 100644
--- a/plugins/git/README.md
+++ b/plugins/git/README.md
@@ -90,7 +90,7 @@ The SPA connects to the backend over the WebSocket port carried in
 `dev:server`.
 
 The SPA is a standard shadcn/ui setup (Tailwind v4, `components/ui/*`). Three
-Next.js settings in `src/client/next.config.mjs` keep it portable: `output:
+Next.js settings in `app/next.config.mjs` keep it portable: `output:
 'export'` (devframe owns the server), `assetPrefix: '.'` (relative assets so the
 same bundle works at any base), and `trailingSlash: true` (composes with
 devframe's static directory-with-index resolution).
diff --git a/plugins/git/src/client/app/globals.css b/plugins/git/app/app/globals.css
similarity index 100%
rename from plugins/git/src/client/app/globals.css
rename to plugins/git/app/app/globals.css
diff --git a/plugins/git/src/client/app/layout.tsx b/plugins/git/app/app/layout.tsx
similarity index 100%
rename from plugins/git/src/client/app/layout.tsx
rename to plugins/git/app/app/layout.tsx
diff --git a/plugins/git/src/client/app/page.tsx b/plugins/git/app/app/page.tsx
similarity index 100%
rename from plugins/git/src/client/app/page.tsx
rename to plugins/git/app/app/page.tsx
diff --git a/plugins/git/src/client/components/commit-details-panel.tsx b/plugins/git/app/components/commit-details-panel.tsx
similarity index 100%
rename from plugins/git/src/client/components/commit-details-panel.tsx
rename to plugins/git/app/components/commit-details-panel.tsx
diff --git a/plugins/git/src/client/components/connection-state.tsx b/plugins/git/app/components/connection-state.tsx
similarity index 100%
rename from plugins/git/src/client/components/connection-state.tsx
rename to plugins/git/app/components/connection-state.tsx
diff --git a/plugins/git/src/client/components/dashboard.tsx b/plugins/git/app/components/dashboard.tsx
similarity index 100%
rename from plugins/git/src/client/components/dashboard.tsx
rename to plugins/git/app/components/dashboard.tsx
diff --git a/plugins/git/src/client/components/diff/build-model.test.ts b/plugins/git/app/components/diff/build-model.test.ts
similarity index 100%
rename from plugins/git/src/client/components/diff/build-model.test.ts
rename to plugins/git/app/components/diff/build-model.test.ts
diff --git a/plugins/git/src/client/components/diff/build-model.ts b/plugins/git/app/components/diff/build-model.ts
similarity index 100%
rename from plugins/git/src/client/components/diff/build-model.ts
rename to plugins/git/app/components/diff/build-model.ts
diff --git a/plugins/git/src/client/components/diff/diff-file.tsx b/plugins/git/app/components/diff/diff-file.tsx
similarity index 100%
rename from plugins/git/src/client/components/diff/diff-file.tsx
rename to plugins/git/app/components/diff/diff-file.tsx
diff --git a/plugins/git/src/client/components/diff/diff-view.tsx b/plugins/git/app/components/diff/diff-view.tsx
similarity index 100%
rename from plugins/git/src/client/components/diff/diff-view.tsx
rename to plugins/git/app/components/diff/diff-view.tsx
diff --git a/plugins/git/src/client/components/diff/parse-patch.test.ts b/plugins/git/app/components/diff/parse-patch.test.ts
similarity index 100%
rename from plugins/git/src/client/components/diff/parse-patch.test.ts
rename to plugins/git/app/components/diff/parse-patch.test.ts
diff --git a/plugins/git/src/client/components/diff/parse-patch.ts b/plugins/git/app/components/diff/parse-patch.ts
similarity index 100%
rename from plugins/git/src/client/components/diff/parse-patch.ts
rename to plugins/git/app/components/diff/parse-patch.ts
diff --git a/plugins/git/src/client/components/diff/render-segments.test.ts b/plugins/git/app/components/diff/render-segments.test.ts
similarity index 100%
rename from plugins/git/src/client/components/diff/render-segments.test.ts
rename to plugins/git/app/components/diff/render-segments.test.ts
diff --git a/plugins/git/src/client/components/diff/render-segments.ts b/plugins/git/app/components/diff/render-segments.ts
similarity index 100%
rename from plugins/git/src/client/components/diff/render-segments.ts
rename to plugins/git/app/components/diff/render-segments.ts
diff --git a/plugins/git/src/client/components/diff/use-diff-tokens.ts b/plugins/git/app/components/diff/use-diff-tokens.ts
similarity index 100%
rename from plugins/git/src/client/components/diff/use-diff-tokens.ts
rename to plugins/git/app/components/diff/use-diff-tokens.ts
diff --git a/plugins/git/src/client/components/log-panel.tsx b/plugins/git/app/components/log-panel.tsx
similarity index 100%
rename from plugins/git/src/client/components/log-panel.tsx
rename to plugins/git/app/components/log-panel.tsx
diff --git a/plugins/git/src/client/components/rpc-provider.tsx b/plugins/git/app/components/rpc-provider.tsx
similarity index 100%
rename from plugins/git/src/client/components/rpc-provider.tsx
rename to plugins/git/app/components/rpc-provider.tsx
diff --git a/plugins/git/src/client/components/status-panel.tsx b/plugins/git/app/components/status-panel.tsx
similarity index 100%
rename from plugins/git/src/client/components/status-panel.tsx
rename to plugins/git/app/components/status-panel.tsx
diff --git a/plugins/git/src/client/components/theme.ts b/plugins/git/app/components/theme.ts
similarity index 100%
rename from plugins/git/src/client/components/theme.ts
rename to plugins/git/app/components/theme.ts
diff --git a/plugins/git/src/client/components/ui/avatar.tsx b/plugins/git/app/components/ui/avatar.tsx
similarity index 100%
rename from plugins/git/src/client/components/ui/avatar.tsx
rename to plugins/git/app/components/ui/avatar.tsx
diff --git a/plugins/git/src/client/components/ui/badge.tsx b/plugins/git/app/components/ui/badge.tsx
similarity index 100%
rename from plugins/git/src/client/components/ui/badge.tsx
rename to plugins/git/app/components/ui/badge.tsx
diff --git a/plugins/git/src/client/components/ui/button.tsx b/plugins/git/app/components/ui/button.tsx
similarity index 100%
rename from plugins/git/src/client/components/ui/button.tsx
rename to plugins/git/app/components/ui/button.tsx
diff --git a/plugins/git/src/client/components/ui/file-icon.tsx b/plugins/git/app/components/ui/file-icon.tsx
similarity index 100%
rename from plugins/git/src/client/components/ui/file-icon.tsx
rename to plugins/git/app/components/ui/file-icon.tsx
diff --git a/plugins/git/src/client/components/ui/icon.tsx b/plugins/git/app/components/ui/icon.tsx
similarity index 100%
rename from plugins/git/src/client/components/ui/icon.tsx
rename to plugins/git/app/components/ui/icon.tsx
diff --git a/plugins/git/src/client/components/ui/scroll-area.tsx b/plugins/git/app/components/ui/scroll-area.tsx
similarity index 100%
rename from plugins/git/src/client/components/ui/scroll-area.tsx
rename to plugins/git/app/components/ui/scroll-area.tsx
diff --git a/plugins/git/src/client/components/ui/skeleton.tsx b/plugins/git/app/components/ui/skeleton.tsx
similarity index 100%
rename from plugins/git/src/client/components/ui/skeleton.tsx
rename to plugins/git/app/components/ui/skeleton.tsx
diff --git a/plugins/git/src/client/components/ui/status-mark.tsx b/plugins/git/app/components/ui/status-mark.tsx
similarity index 100%
rename from plugins/git/src/client/components/ui/status-mark.tsx
rename to plugins/git/app/components/ui/status-mark.tsx
diff --git a/plugins/git/src/client/components/ui/textarea.tsx b/plugins/git/app/components/ui/textarea.tsx
similarity index 100%
rename from plugins/git/src/client/components/ui/textarea.tsx
rename to plugins/git/app/components/ui/textarea.tsx
diff --git a/plugins/git/src/client/components/use-rpc-resource.ts b/plugins/git/app/components/use-rpc-resource.ts
similarity index 100%
rename from plugins/git/src/client/components/use-rpc-resource.ts
rename to plugins/git/app/components/use-rpc-resource.ts
diff --git a/plugins/git/src/client/components/views/branches-panel-view.stories.tsx b/plugins/git/app/components/views/branches-panel-view.stories.tsx
similarity index 100%
rename from plugins/git/src/client/components/views/branches-panel-view.stories.tsx
rename to plugins/git/app/components/views/branches-panel-view.stories.tsx
diff --git a/plugins/git/src/client/components/views/branches-panel-view.tsx b/plugins/git/app/components/views/branches-panel-view.tsx
similarity index 100%
rename from plugins/git/src/client/components/views/branches-panel-view.tsx
rename to plugins/git/app/components/views/branches-panel-view.tsx
diff --git a/plugins/git/src/client/components/views/commit-details-view.stories.tsx b/plugins/git/app/components/views/commit-details-view.stories.tsx
similarity index 100%
rename from plugins/git/src/client/components/views/commit-details-view.stories.tsx
rename to plugins/git/app/components/views/commit-details-view.stories.tsx
diff --git a/plugins/git/src/client/components/views/commit-details-view.tsx b/plugins/git/app/components/views/commit-details-view.tsx
similarity index 100%
rename from plugins/git/src/client/components/views/commit-details-view.tsx
rename to plugins/git/app/components/views/commit-details-view.tsx
diff --git a/plugins/git/src/client/components/views/diff-panel-view.stories.tsx b/plugins/git/app/components/views/diff-panel-view.stories.tsx
similarity index 100%
rename from plugins/git/src/client/components/views/diff-panel-view.stories.tsx
rename to plugins/git/app/components/views/diff-panel-view.stories.tsx
diff --git a/plugins/git/src/client/components/views/diff-panel-view.tsx b/plugins/git/app/components/views/diff-panel-view.tsx
similarity index 100%
rename from plugins/git/src/client/components/views/diff-panel-view.tsx
rename to plugins/git/app/components/views/diff-panel-view.tsx
diff --git a/plugins/git/src/client/components/views/log-panel-view.stories.tsx b/plugins/git/app/components/views/log-panel-view.stories.tsx
similarity index 100%
rename from plugins/git/src/client/components/views/log-panel-view.stories.tsx
rename to plugins/git/app/components/views/log-panel-view.stories.tsx
diff --git a/plugins/git/src/client/components/views/log-panel-view.tsx b/plugins/git/app/components/views/log-panel-view.tsx
similarity index 100%
rename from plugins/git/src/client/components/views/log-panel-view.tsx
rename to plugins/git/app/components/views/log-panel-view.tsx
diff --git a/plugins/git/src/client/components/views/status-panel-view.stories.tsx b/plugins/git/app/components/views/status-panel-view.stories.tsx
similarity index 100%
rename from plugins/git/src/client/components/views/status-panel-view.stories.tsx
rename to plugins/git/app/components/views/status-panel-view.stories.tsx
diff --git a/plugins/git/src/client/components/views/status-panel-view.tsx b/plugins/git/app/components/views/status-panel-view.tsx
similarity index 100%
rename from plugins/git/src/client/components/views/status-panel-view.tsx
rename to plugins/git/app/components/views/status-panel-view.tsx
diff --git a/plugins/git/src/client/lib/commit-graph.ts b/plugins/git/app/lib/commit-graph.ts
similarity index 100%
rename from plugins/git/src/client/lib/commit-graph.ts
rename to plugins/git/app/lib/commit-graph.ts
diff --git a/plugins/terminals/src/client/design.ts b/plugins/git/app/lib/design.ts
similarity index 100%
rename from plugins/terminals/src/client/design.ts
rename to plugins/git/app/lib/design.ts
diff --git a/plugins/git/src/client/lib/file-icon.ts b/plugins/git/app/lib/file-icon.ts
similarity index 100%
rename from plugins/git/src/client/lib/file-icon.ts
rename to plugins/git/app/lib/file-icon.ts
diff --git a/plugins/git/src/client/lib/refs.test.ts b/plugins/git/app/lib/refs.test.ts
similarity index 100%
rename from plugins/git/src/client/lib/refs.test.ts
rename to plugins/git/app/lib/refs.test.ts
diff --git a/plugins/git/src/client/lib/refs.ts b/plugins/git/app/lib/refs.ts
similarity index 100%
rename from plugins/git/src/client/lib/refs.ts
rename to plugins/git/app/lib/refs.ts
diff --git a/plugins/git/src/client/lib/utils.ts b/plugins/git/app/lib/utils.ts
similarity index 100%
rename from plugins/git/src/client/lib/utils.ts
rename to plugins/git/app/lib/utils.ts
diff --git a/plugins/git/src/client/next.config.mjs b/plugins/git/app/next.config.mjs
similarity index 100%
rename from plugins/git/src/client/next.config.mjs
rename to plugins/git/app/next.config.mjs
diff --git a/plugins/git/src/client/postcss.config.mjs b/plugins/git/app/postcss.config.mjs
similarity index 100%
rename from plugins/git/src/client/postcss.config.mjs
rename to plugins/git/app/postcss.config.mjs
diff --git a/plugins/git/src/client/tsconfig.json b/plugins/git/app/tsconfig.json
similarity index 90%
rename from plugins/git/src/client/tsconfig.json
rename to plugins/git/app/tsconfig.json
index 3a6791386..df7f7d07c 100644
--- a/plugins/git/src/client/tsconfig.json
+++ b/plugins/git/app/tsconfig.json
@@ -1,5 +1,5 @@
 {
-  "extends": "../../../../tsconfig.base.json",
+  "extends": "../../../tsconfig.base.json",
   "compilerOptions": {
     "incremental": true,
     "jsx": "preserve",
diff --git a/plugins/git/bin.mjs b/plugins/git/bin.mjs
index aae9b29c8..e949f19ee 100755
--- a/plugins/git/bin.mjs
+++ b/plugins/git/bin.mjs
@@ -1,3 +1,3 @@
 #!/usr/bin/env node
 // Thin launcher for the published package; runs the compiled CLI entry.
-import './dist/cli.mjs'
+import './dist/node/cli.mjs'
diff --git a/plugins/git/package.json b/plugins/git/package.json
index 5ca72aeab..4a347a0e7 100644
--- a/plugins/git/package.json
+++ b/plugins/git/package.json
@@ -21,10 +21,10 @@
   ],
   "sideEffects": false,
   "exports": {
-    ".": "./dist/index.mjs",
+    ".": "./dist/node/index.mjs",
     "./package.json": "./package.json"
   },
-  "types": "./dist/index.d.mts",
+  "types": "./dist/node/index.d.mts",
   "bin": {
     "devframe-git": "./bin.mjs"
   },
@@ -34,11 +34,12 @@
   ],
   "scripts": {
     "build": "tsdown && pnpm run build:spa",
-    "build:spa": "next build src/client && node scripts/build-spa.mjs",
+    "build:spa": "next build app && node scripts/build-spa.mjs",
     "cli:build": "node bin.mjs build --out-dir dist/static",
     "dev": "node scripts/dev.mjs",
-    "dev:server": "node src/cli.ts",
-    "dev:client": "next dev src/client",
+    "dev:server": "node src/node/cli.ts",
+    "dev:client": "next dev app",
+    "play": "pnpm run build && node playgrounds/server.mjs",
     "storybook": "storybook dev -p 6011",
     "storybook:build": "storybook build -o storybook-static",
     "watch": "tsdown --watch",
diff --git a/plugins/git/playgrounds/server.mjs b/plugins/git/playgrounds/server.mjs
new file mode 100644
index 000000000..d731d2a04
--- /dev/null
+++ b/plugins/git/playgrounds/server.mjs
@@ -0,0 +1,58 @@
+#!/usr/bin/env node
+/**
+ * Standalone demo host for the Git dashboard.
+ *
+ * `initDevframe` runs setup, serves the built Next.js panel SPA +
+ * `__connection.json` from `assets-pkg/dist` under the devframe base path, and
+ * binds the WebSocket RPC upgrade onto our http server.
+ *
+ *   node playgrounds/server.mjs   → live WebSocket RPC (`assets-pkg/dist`)
+ */
+import { existsSync } from 'node:fs'
+import { createServer } from 'node:http'
+import process from 'node:process'
+import { fileURLToPath } from 'node:url'
+import { initDevframe } from 'devframe/initiate'
+import { getPort } from 'devframe/utils/get-port'
+import { H3, toNodeHandler } from 'h3'
+import { resolve } from 'pathe'
+import createGitDevframe from '../src/node/index.ts'
+
+const HERE = fileURLToPath(new URL('.', import.meta.url))
+const ROOT = resolve(HERE, '..')
+const panelDir = resolve(ROOT, 'assets-pkg/dist')
+
+const devframe = createGitDevframe()
+const basePath = devframe.basePath
+
+async function main() {
+  if (!existsSync(resolve(panelDir, 'index.html'))) {
+    console.error('\n[git playground] missing assets-pkg/dist/index.html\n  → run `pnpm -C plugins/git build` first.\n')
+    process.exit(1)
+  }
+
+  const bindHost = '0.0.0.0'
+  const port = await getPort({ host: bindHost, port: 9710 })
+  const origin = `http://localhost:${port}`
+
+  const app = new H3()
+  const server = createServer(toNodeHandler(app))
+  const instance = initDevframe(devframe, {
+    base: basePath,
+    distDir: panelDir,
+    app,
+    server,
+    host: bindHost,
+    origin,
+    auth: false,
+  })
+  await new Promise(r => server.listen(port, bindHost, r))
+  await instance.ready
+
+  process.stdout.write(`\n  Git dashboard: dev (live WebSocket RPC)\n  ▸ panel:  ${origin}${basePath}\n\n`)
+}
+
+main().catch((error) => {
+  console.error(error)
+  process.exit(1)
+})
diff --git a/plugins/git/scripts/build-spa.mjs b/plugins/git/scripts/build-spa.mjs
index 2e5f439c8..1e57a6de2 100644
--- a/plugins/git/scripts/build-spa.mjs
+++ b/plugins/git/scripts/build-spa.mjs
@@ -1,6 +1,23 @@
-import { cpSync, rmSync } from 'node:fs'
+import { copyFileSync, mkdirSync, readdirSync, rmSync } from 'node:fs'
+import { join } from 'node:path'
 
 // The Next.js static export is the plugin's iframe SPA; it ships in the
 // lockstep `@devframes/plugin-git--assets` package, not the node package.
+
+// A manual walk with explicit modes: Next's export emits entries with
+// restrictive modes that node's `cpSync` inherits and then trips over, so
+// recreate the tree with normal directory/file permissions instead.
+function copyTree(src, dest) {
+  mkdirSync(dest, { recursive: true, mode: 0o755 })
+  for (const entry of readdirSync(src, { withFileTypes: true })) {
+    const from = join(src, entry.name)
+    const to = join(dest, entry.name)
+    if (entry.isDirectory())
+      copyTree(from, to)
+    else if (entry.isFile())
+      copyFileSync(from, to)
+  }
+}
+
 rmSync('assets-pkg/dist', { recursive: true, force: true })
-cpSync('src/client/out', 'assets-pkg/dist', { recursive: true })
+copyTree('app/out', 'assets-pkg/dist')
diff --git a/plugins/git/scripts/dev.mjs b/plugins/git/scripts/dev.mjs
index 880a136c0..f332029a4 100644
--- a/plugins/git/scripts/dev.mjs
+++ b/plugins/git/scripts/dev.mjs
@@ -17,13 +17,13 @@ const nextBin = require.resolve('next/dist/bin/next')
 const children = [
   // RPC + WebSocket backend (devframe). Serves the prebuilt SPA too, but in
   // dev you open the Next server below for hot-reloading.
-  spawn(process.execPath, ['src/cli.ts', '--port', serverPort, '--host', host], {
+  spawn(process.execPath, ['src/node/cli.ts', '--port', serverPort, '--host', host], {
     cwd: root,
     stdio: 'inherit',
     env: process.env,
   }),
   // Next.js dev server (HMR). Points the client at the backend WebSocket.
-  spawn(process.execPath, [nextBin, 'dev', 'src/client', '--port', clientPort, '--hostname', host], {
+  spawn(process.execPath, [nextBin, 'dev', 'app', '--port', clientPort, '--hostname', host], {
     cwd: root,
     stdio: 'inherit',
     env: { ...process.env, NEXT_PUBLIC_DEVFRAME_WS: serverPort },
diff --git a/plugins/git/src/cli.ts b/plugins/git/src/node/cli.ts
similarity index 100%
rename from plugins/git/src/cli.ts
rename to plugins/git/src/node/cli.ts
diff --git a/plugins/git/src/index.ts b/plugins/git/src/node/index.ts
similarity index 98%
rename from plugins/git/src/index.ts
rename to plugins/git/src/node/index.ts
index ef0a7fe9e..15ecc67f4 100644
--- a/plugins/git/src/index.ts
+++ b/plugins/git/src/node/index.ts
@@ -5,7 +5,7 @@ import type { DevframeDefinition, RemoteAssets } from 'devframe'
 import process from 'node:process'
 import { defineDevframe } from 'devframe'
 import { resolve } from 'pathe'
-import pkg from '../package.json' with { type: 'json' }
+import pkg from '../../package.json' with { type: 'json' }
 
 // The Next.js static-export SPA ships in the lockstep
 // `@devframes/plugin-git--assets` package, served on demand through devframe's
diff --git a/plugins/git/test/_utils.ts b/plugins/git/test/_utils.ts
index 5fefd6a5c..083df75bd 100644
--- a/plugins/git/test/_utils.ts
+++ b/plugins/git/test/_utils.ts
@@ -1,6 +1,6 @@
 import type { DevframeNodeContext } from 'devframe'
 import type { StartedServer } from 'devframe/internal'
-import type { GitDevframeOptions } from '../src/index'
+import type { GitDevframeOptions } from '../src/node/index'
 import { tmpdir } from 'node:os'
 import { DEVFRAME_CONNECTION_META_FILENAME } from 'devframe/constants'
 import { createH3DevframeHost } from 'devframe/internal'
@@ -11,7 +11,7 @@ import { mountStaticHandler } from 'devframe/utils/serve-static'
 import { H3 } from 'h3'
 import { resolve } from 'pathe'
 import { serveTestContext } from '../../../tests/helpers/serve-test-context'
-import { createGitDevframe } from '../src/index'
+import { createGitDevframe } from '../src/node/index'
 
 export interface DashboardServer extends StartedServer {
   basePath: string
diff --git a/plugins/git/test/git.test.ts b/plugins/git/test/git.test.ts
index baa43275d..733ab9857 100644
--- a/plugins/git/test/git.test.ts
+++ b/plugins/git/test/git.test.ts
@@ -7,7 +7,7 @@ import { collectStaticRpcDump } from 'devframe/rpc/dump'
 import { createWsRpcChannel } from 'devframe/rpc/transports/ws-client'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { WebSocket } from 'ws'
-import createGitDevframe from '../src/index'
+import createGitDevframe from '../src/node/index'
 import { createTempRepo } from './_repo'
 import { createDashboardContext, startDashboardServer } from './_utils'
 
diff --git a/plugins/git/tsconfig.json b/plugins/git/tsconfig.json
index bd57e7815..e1a0a26f7 100644
--- a/plugins/git/tsconfig.json
+++ b/plugins/git/tsconfig.json
@@ -4,5 +4,5 @@
     "lib": ["esnext", "dom"]
   },
   "include": ["src", "test", "tsdown.config.ts"],
-  "exclude": ["dist", "src/client", ".next", "out", "node_modules"]
+  "exclude": ["dist", "app", ".next", "out", "node_modules"]
 }
diff --git a/plugins/git/tsdown.config.ts b/plugins/git/tsdown.config.ts
index 17ab5f0dd..c2fa24429 100644
--- a/plugins/git/tsdown.config.ts
+++ b/plugins/git/tsdown.config.ts
@@ -2,14 +2,14 @@ import { defineConfig } from 'tsdown'
 
 export default defineConfig({
   entry: {
-    index: 'src/index.ts',
-    cli: 'src/cli.ts',
+    'node/index': 'src/node/index.ts',
+    'node/cli': 'src/node/cli.ts',
   },
   outExtensions: () => ({ js: '.mjs', dts: '.d.mts' }),
   clean: true,
   tsconfig: '../../tsconfig.base.json',
   dts: true,
   platform: 'node',
-  // The Next.js SPA under src/client is built separately (`build:spa`);
+  // The Next.js SPA under app/ is built separately (`build:spa`);
   // tsdown only compiles the node-side entries above.
 })
diff --git a/plugins/git/uno.config.ts b/plugins/git/uno.config.ts
index 61a1adfa0..bd2e3bd38 100644
--- a/plugins/git/uno.config.ts
+++ b/plugins/git/uno.config.ts
@@ -3,19 +3,19 @@ import { mergeConfigs } from 'unocss'
 import { designConfig } from '../../design/uno.config'
 
 // The Git dashboard composes the shared devframe base (see `design/uno.config.ts`).
-// `@unocss/postcss` (see src/client/postcss.config.mjs) and Storybook both load
-// this config. Absolute globs keep class extraction working regardless of the
-// working directory PostCSS runs in (Next builds from `src/client`).
-const client = fileURLToPath(new URL('./src/client', import.meta.url))
+// `@unocss/postcss` (see app/postcss.config.mjs) and Storybook both load this
+// config. Absolute globs keep class extraction working regardless of the
+// working directory PostCSS runs in (Next builds from `app`).
+const app = fileURLToPath(new URL('./app', import.meta.url))
 
 export default mergeConfigs([
   designConfig,
   {
     content: {
       filesystem: [
-        `${client}/app/**/*.{ts,tsx}`,
-        `${client}/components/**/*.{ts,tsx}`,
-        `${client}/lib/**/*.{ts,tsx}`,
+        `${app}/app/**/*.{ts,tsx}`,
+        `${app}/components/**/*.{ts,tsx}`,
+        `${app}/lib/**/*.{ts,tsx}`,
       ],
     },
   },
diff --git a/plugins/inspect/.storybook/main.ts b/plugins/inspect/.storybook/main.ts
index e6a304aea..c134134d2 100644
--- a/plugins/inspect/.storybook/main.ts
+++ b/plugins/inspect/.storybook/main.ts
@@ -5,7 +5,7 @@ import { mergeConfig } from 'vite'
 import { alias } from '../../../alias'
 
 const config: StorybookConfig = {
-  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  stories: ['../{src,app}/**/*.stories.@(ts|tsx)'],
   addons: ['@storybook/addon-docs'],
   framework: {
     name: '@storybook/vue3-vite',
diff --git a/plugins/inspect/.storybook/preview.ts b/plugins/inspect/.storybook/preview.ts
index f7ff9c3f6..759a14cb0 100644
--- a/plugins/inspect/.storybook/preview.ts
+++ b/plugins/inspect/.storybook/preview.ts
@@ -1,7 +1,7 @@
 import type { Decorator, Preview } from '@storybook/vue3-vite'
 import 'virtual:uno.css'
 import '@antfu/design/styles.css'
-import '../src/spa/style.css'
+import '../app/style.css'
 
 // Drive the shared `@antfu/design` tokens off the toolbar theme toggle: dark mode
 // is the `.dark` class on `<html>`, and the canvas takes the semantic
diff --git a/plugins/inspect/src/spa/App.vue b/plugins/inspect/app/App.vue
similarity index 99%
rename from plugins/inspect/src/spa/App.vue
rename to plugins/inspect/app/App.vue
index f60e4f0f0..e2ec1ccc8 100644
--- a/plugins/inspect/src/spa/App.vue
+++ b/plugins/inspect/app/App.vue
@@ -12,7 +12,7 @@ import {
   connectionPanel,
   connectionState,
   connectionTitle,
-} from '../../../../design/design'
+} from '../../../design/design'
 import AgentSmart from './components/AgentSmart.vue'
 import CommandsSmart from './components/CommandsSmart.vue'
 import FunctionsSmart from './components/FunctionsSmart.vue'
diff --git a/plugins/inspect/src/spa/components/AgentSmart.vue b/plugins/inspect/app/components/AgentSmart.vue
similarity index 95%
rename from plugins/inspect/src/spa/components/AgentSmart.vue
rename to plugins/inspect/app/components/AgentSmart.vue
index b72846a1a..d4e66b0f0 100644
--- a/plugins/inspect/src/spa/components/AgentSmart.vue
+++ b/plugins/inspect/app/components/AgentSmart.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { AgentManifest, InvokeResult } from '@devframes/plugin-inspect/client'
+import type { AgentManifest, InvokeResult } from '../connect'
 import { onMounted, reactive, shallowRef } from 'vue'
 import { useRefreshProvider } from '../composables/refresh'
 import { isStatic, useRpc } from '../composables/rpc'
diff --git a/plugins/inspect/src/spa/components/AgentView.stories.ts b/plugins/inspect/app/components/AgentView.stories.ts
similarity index 100%
rename from plugins/inspect/src/spa/components/AgentView.stories.ts
rename to plugins/inspect/app/components/AgentView.stories.ts
diff --git a/plugins/inspect/src/spa/components/AgentView.vue b/plugins/inspect/app/components/AgentView.vue
similarity index 98%
rename from plugins/inspect/src/spa/components/AgentView.vue
rename to plugins/inspect/app/components/AgentView.vue
index 40c843463..fe29d43ac 100644
--- a/plugins/inspect/src/spa/components/AgentView.vue
+++ b/plugins/inspect/app/components/AgentView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { AgentManifest, InvokeResult } from '@devframes/plugin-inspect/client'
+import type { AgentManifest, InvokeResult } from '../connect'
 import ActionButton from '@antfu/design/components/Action/ActionButton.vue'
 import { toAgentToolName } from 'devframe/utils/agent-tool-name'
 import { reactive, ref } from 'vue'
diff --git a/plugins/inspect/src/spa/components/CommandRow.vue b/plugins/inspect/app/components/CommandRow.vue
similarity index 97%
rename from plugins/inspect/src/spa/components/CommandRow.vue
rename to plugins/inspect/app/components/CommandRow.vue
index 7394854af..5f00e9109 100644
--- a/plugins/inspect/src/spa/components/CommandRow.vue
+++ b/plugins/inspect/app/components/CommandRow.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { DevframeInspectCommandInfo } from '@devframes/plugin-inspect/client'
+import type { DevframeInspectCommandInfo } from '../connect'
 import ActionButton from '@antfu/design/components/Action/ActionButton.vue'
 import { computed, ref } from 'vue'
 import JsonView from './JsonView.vue'
diff --git a/plugins/inspect/src/spa/components/CommandsSmart.vue b/plugins/inspect/app/components/CommandsSmart.vue
similarity index 93%
rename from plugins/inspect/src/spa/components/CommandsSmart.vue
rename to plugins/inspect/app/components/CommandsSmart.vue
index 5e7b5cede..ba516cc51 100644
--- a/plugins/inspect/src/spa/components/CommandsSmart.vue
+++ b/plugins/inspect/app/components/CommandsSmart.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { DevframeInspectCommandInfo, InvokeResult } from '@devframes/plugin-inspect/client'
+import type { DevframeInspectCommandInfo, InvokeResult } from '../connect'
 import { onMounted, reactive, shallowRef } from 'vue'
 import { useRefreshProvider } from '../composables/refresh'
 import { isStatic, useRpc } from '../composables/rpc'
diff --git a/plugins/inspect/src/spa/components/CommandsView.stories.ts b/plugins/inspect/app/components/CommandsView.stories.ts
similarity index 100%
rename from plugins/inspect/src/spa/components/CommandsView.stories.ts
rename to plugins/inspect/app/components/CommandsView.stories.ts
diff --git a/plugins/inspect/src/spa/components/CommandsView.vue b/plugins/inspect/app/components/CommandsView.vue
similarity index 96%
rename from plugins/inspect/src/spa/components/CommandsView.vue
rename to plugins/inspect/app/components/CommandsView.vue
index 3472b5a5d..8fa77c86e 100644
--- a/plugins/inspect/src/spa/components/CommandsView.vue
+++ b/plugins/inspect/app/components/CommandsView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { DevframeInspectCommandInfo, InvokeResult } from '@devframes/plugin-inspect/client'
+import type { DevframeInspectCommandInfo, InvokeResult } from '../connect'
 import { computed, reactive, ref } from 'vue'
 import CommandRow from './CommandRow.vue'
 
diff --git a/plugins/inspect/src/spa/components/FunctionName.vue b/plugins/inspect/app/components/FunctionName.vue
similarity index 100%
rename from plugins/inspect/src/spa/components/FunctionName.vue
rename to plugins/inspect/app/components/FunctionName.vue
diff --git a/plugins/inspect/src/spa/components/FunctionRow.vue b/plugins/inspect/app/components/FunctionRow.vue
similarity index 98%
rename from plugins/inspect/src/spa/components/FunctionRow.vue
rename to plugins/inspect/app/components/FunctionRow.vue
index 28c1ebccb..e684efe66 100644
--- a/plugins/inspect/src/spa/components/FunctionRow.vue
+++ b/plugins/inspect/app/components/FunctionRow.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { RpcFunctionInfo } from '@devframes/plugin-inspect/client'
+import type { RpcFunctionInfo } from '../connect'
 import ActionButton from '@antfu/design/components/Action/ActionButton.vue'
 import { computed, ref } from 'vue'
 import FunctionName from './FunctionName.vue'
diff --git a/plugins/inspect/src/spa/components/FunctionsSmart.vue b/plugins/inspect/app/components/FunctionsSmart.vue
similarity index 93%
rename from plugins/inspect/src/spa/components/FunctionsSmart.vue
rename to plugins/inspect/app/components/FunctionsSmart.vue
index 2a2400605..020271793 100644
--- a/plugins/inspect/src/spa/components/FunctionsSmart.vue
+++ b/plugins/inspect/app/components/FunctionsSmart.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { InvokeResult, RpcFunctionInfo } from '@devframes/plugin-inspect/client'
+import type { InvokeResult, RpcFunctionInfo } from '../connect'
 import { onMounted, reactive, shallowRef } from 'vue'
 import { useRefreshProvider } from '../composables/refresh'
 import { isStatic, useRpc } from '../composables/rpc'
diff --git a/plugins/inspect/src/spa/components/FunctionsView.stories.ts b/plugins/inspect/app/components/FunctionsView.stories.ts
similarity index 100%
rename from plugins/inspect/src/spa/components/FunctionsView.stories.ts
rename to plugins/inspect/app/components/FunctionsView.stories.ts
diff --git a/plugins/inspect/src/spa/components/FunctionsView.vue b/plugins/inspect/app/components/FunctionsView.vue
similarity index 96%
rename from plugins/inspect/src/spa/components/FunctionsView.vue
rename to plugins/inspect/app/components/FunctionsView.vue
index b43033292..f4025203e 100644
--- a/plugins/inspect/src/spa/components/FunctionsView.vue
+++ b/plugins/inspect/app/components/FunctionsView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { InvokeResult, RpcFunctionInfo } from '@devframes/plugin-inspect/client'
+import type { InvokeResult, RpcFunctionInfo } from '../connect'
 import { computed, reactive, ref } from 'vue'
 import FunctionRow from './FunctionRow.vue'
 
diff --git a/plugins/inspect/src/spa/components/HistorySmart.vue b/plugins/inspect/app/components/HistorySmart.vue
similarity index 100%
rename from plugins/inspect/src/spa/components/HistorySmart.vue
rename to plugins/inspect/app/components/HistorySmart.vue
diff --git a/plugins/inspect/src/spa/components/HistoryView.stories.ts b/plugins/inspect/app/components/HistoryView.stories.ts
similarity index 100%
rename from plugins/inspect/src/spa/components/HistoryView.stories.ts
rename to plugins/inspect/app/components/HistoryView.stories.ts
diff --git a/plugins/inspect/src/spa/components/HistoryView.vue b/plugins/inspect/app/components/HistoryView.vue
similarity index 100%
rename from plugins/inspect/src/spa/components/HistoryView.vue
rename to plugins/inspect/app/components/HistoryView.vue
diff --git a/plugins/inspect/src/spa/components/InstancesSmart.vue b/plugins/inspect/app/components/InstancesSmart.vue
similarity index 87%
rename from plugins/inspect/src/spa/components/InstancesSmart.vue
rename to plugins/inspect/app/components/InstancesSmart.vue
index 36dd6182f..602fc9d73 100644
--- a/plugins/inspect/src/spa/components/InstancesSmart.vue
+++ b/plugins/inspect/app/components/InstancesSmart.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { DevframeInspectInstanceInfo } from '@devframes/plugin-inspect/client'
+import type { DevframeInspectInstanceInfo } from '../connect'
 import { onMounted, shallowRef } from 'vue'
 import { useRefreshProvider } from '../composables/refresh'
 import { useRpc } from '../composables/rpc'
diff --git a/plugins/inspect/src/spa/components/InstancesView.stories.ts b/plugins/inspect/app/components/InstancesView.stories.ts
similarity index 100%
rename from plugins/inspect/src/spa/components/InstancesView.stories.ts
rename to plugins/inspect/app/components/InstancesView.stories.ts
diff --git a/plugins/inspect/src/spa/components/InstancesView.vue b/plugins/inspect/app/components/InstancesView.vue
similarity index 97%
rename from plugins/inspect/src/spa/components/InstancesView.vue
rename to plugins/inspect/app/components/InstancesView.vue
index 508e36614..11ae3f810 100644
--- a/plugins/inspect/src/spa/components/InstancesView.vue
+++ b/plugins/inspect/app/components/InstancesView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { DevframeInspectInstanceInfo } from '@devframes/plugin-inspect/client'
+import type { DevframeInspectInstanceInfo } from '../connect'
 import { computed } from 'vue'
 
 const props = defineProps<{
diff --git a/plugins/inspect/src/spa/components/JsonView.vue b/plugins/inspect/app/components/JsonView.vue
similarity index 100%
rename from plugins/inspect/src/spa/components/JsonView.vue
rename to plugins/inspect/app/components/JsonView.vue
diff --git a/plugins/inspect/src/spa/components/StateSmart.vue b/plugins/inspect/app/components/StateSmart.vue
similarity index 100%
rename from plugins/inspect/src/spa/components/StateSmart.vue
rename to plugins/inspect/app/components/StateSmart.vue
diff --git a/plugins/inspect/src/spa/components/StateView.stories.ts b/plugins/inspect/app/components/StateView.stories.ts
similarity index 100%
rename from plugins/inspect/src/spa/components/StateView.stories.ts
rename to plugins/inspect/app/components/StateView.stories.ts
diff --git a/plugins/inspect/src/spa/components/StateView.vue b/plugins/inspect/app/components/StateView.vue
similarity index 100%
rename from plugins/inspect/src/spa/components/StateView.vue
rename to plugins/inspect/app/components/StateView.vue
diff --git a/plugins/inspect/src/spa/composables/history.ts b/plugins/inspect/app/composables/history.ts
similarity index 76%
rename from plugins/inspect/src/spa/composables/history.ts
rename to plugins/inspect/app/composables/history.ts
index 588b92273..7d99fc04c 100644
--- a/plugins/inspect/src/spa/composables/history.ts
+++ b/plugins/inspect/app/composables/history.ts
@@ -9,7 +9,9 @@ export const isRecording = ref(true)
 
 let nextId = 1
 
-export function addHistoryRecord(record: Omit<HistoryRecord, 'id'>) {
+type DistributiveOmit<T, K extends keyof any> = T extends unknown ? Omit<T, K> : never
+
+export function addHistoryRecord(record: DistributiveOmit<HistoryRecord, 'id'>) {
   if (!isRecording.value)
     return
   historyRecords.value.push({ ...record, id: nextId++ })
diff --git a/plugins/inspect/src/spa/composables/refresh.ts b/plugins/inspect/app/composables/refresh.ts
similarity index 100%
rename from plugins/inspect/src/spa/composables/refresh.ts
rename to plugins/inspect/app/composables/refresh.ts
diff --git a/plugins/inspect/src/spa/composables/rpc.ts b/plugins/inspect/app/composables/rpc.ts
similarity index 82%
rename from plugins/inspect/src/spa/composables/rpc.ts
rename to plugins/inspect/app/composables/rpc.ts
index 6611e2f39..3d0385498 100644
--- a/plugins/inspect/src/spa/composables/rpc.ts
+++ b/plugins/inspect/app/composables/rpc.ts
@@ -1,13 +1,13 @@
-import type { DevframeConnectionStatus, DevframeRpcClient } from '@devframes/plugin-inspect/client'
-import { connectInspect } from '@devframes/plugin-inspect/client'
+import type { DevframeConnectionStatus, DevframeRpcClient } from '../connect'
 import { reactive, shallowRef } from 'vue'
+import { connectInspect } from '../connect'
 import { addHistoryRecord } from './history'
 
 export const connection = reactive<{
   connected: boolean
   status: DevframeConnectionStatus
   error: string | null
-  backend: 'websocket' | 'static' | null
+  backend: 'websocket' | 'static' | 'sse' | 'none' | null
 }>({
   connected: false,
   status: 'connecting',
@@ -18,8 +18,9 @@ export const connection = reactive<{
 const rpcRef = shallowRef<DevframeRpcClient | null>(null)
 
 function setupHistoryHooks(client: DevframeRpcClient) {
-  // Wrap outgoing calls
-  const origCall = client.call.bind(client)
+  // Wrap outgoing calls. The panel inspects arbitrary method ids as strings,
+  // so widen the bound signatures past the typed `keyof` server-function map.
+  const origCall = client.call.bind(client) as (method: string, ...args: any[]) => Promise<any>
   client.call = async (method: string, ...args: any[]) => {
     const start = Date.now()
     try {
@@ -37,7 +38,7 @@ function setupHistoryHooks(client: DevframeRpcClient) {
     }
   }
 
-  const origCallEvent = client.callEvent.bind(client)
+  const origCallEvent = client.callEvent.bind(client) as (method: string, ...args: any[]) => any
   client.callEvent = (method: string, ...args: any[]) => {
     if (!method.includes('list-functions') && !method.includes('list-state-keys') && method !== 'devframe:rpc:server-state:subscribe') {
       addHistoryRecord({ type: 'call', method, args, duration: 0, time: Date.now() })
@@ -45,9 +46,8 @@ function setupHistoryHooks(client: DevframeRpcClient) {
     return origCallEvent(method, ...args)
   }
 
-  // Hook into state updates
-  // We can patch the client definition for state updates to catch all broadcasts
-  const updatedDef = client.client.get('devframe:rpc:client-state:updated')
+  // Hook into state updates: patch the client definition to catch all broadcasts.
+  const updatedDef = client.client.definitions.get('devframe:rpc:client-state:updated')
   if (updatedDef && updatedDef.handler) {
     const origUpdated = updatedDef.handler
     updatedDef.handler = (key: string, fullState: any, syncId: string) => {
@@ -56,7 +56,7 @@ function setupHistoryHooks(client: DevframeRpcClient) {
     }
   }
 
-  const patchDef = client.client.get('devframe:rpc:client-state:patch')
+  const patchDef = client.client.definitions.get('devframe:rpc:client-state:patch')
   if (patchDef && patchDef.handler) {
     const origPatch = patchDef.handler
     patchDef.handler = (key: string, patches: any, syncId: string) => {
diff --git a/plugins/inspect/src/client/index.ts b/plugins/inspect/app/connect.ts
similarity index 87%
rename from plugins/inspect/src/client/index.ts
rename to plugins/inspect/app/connect.ts
index 7496d2520..02fe3983d 100644
--- a/plugins/inspect/src/client/index.ts
+++ b/plugins/inspect/app/connect.ts
@@ -2,7 +2,7 @@ import type { DevframeConnectionStatus, DevframeRpcClient, DevframeRpcClientOpti
 import { connectDevframe } from 'devframe/client'
 
 export type { DevframeConnectionStatus, DevframeRpcClient }
-export type { AgentManifest, DevframeInspectCommandInfo, DevframeInspectInstanceInfo, InvokeResult, RpcFunctionAgentInfo, RpcFunctionInfo } from '../types'
+export type { AgentManifest, DevframeInspectCommandInfo, DevframeInspectInstanceInfo, InvokeResult, RpcFunctionInfo } from '../src/node/types'
 
 /**
  * Connect to the inspector's devframe backend. A thin, typed wrapper
diff --git a/plugins/inspect/src/spa/index.html b/plugins/inspect/app/index.html
similarity index 100%
rename from plugins/inspect/src/spa/index.html
rename to plugins/inspect/app/index.html
diff --git a/plugins/inspect/src/spa/main.ts b/plugins/inspect/app/main.ts
similarity index 100%
rename from plugins/inspect/src/spa/main.ts
rename to plugins/inspect/app/main.ts
diff --git a/plugins/inspect/src/spa/shims.d.ts b/plugins/inspect/app/shims.d.ts
similarity index 100%
rename from plugins/inspect/src/spa/shims.d.ts
rename to plugins/inspect/app/shims.d.ts
diff --git a/plugins/inspect/src/spa/style.css b/plugins/inspect/app/style.css
similarity index 100%
rename from plugins/inspect/src/spa/style.css
rename to plugins/inspect/app/style.css
diff --git a/plugins/inspect/src/spa/utils/color.ts b/plugins/inspect/app/utils/color.ts
similarity index 100%
rename from plugins/inspect/src/spa/utils/color.ts
rename to plugins/inspect/app/utils/color.ts
diff --git a/plugins/inspect/app/vite.config.ts b/plugins/inspect/app/vite.config.ts
new file mode 100644
index 000000000..a16ccc242
--- /dev/null
+++ b/plugins/inspect/app/vite.config.ts
@@ -0,0 +1,66 @@
+import type { Server } from 'node:http'
+import type { Plugin } from 'vite'
+import { fileURLToPath } from 'node:url'
+import createInspectDevframe from '@devframes/plugin-inspect'
+import vue from '@vitejs/plugin-vue'
+import { initDevframe } from 'devframe/initiate'
+import { resolveBasePath } from 'devframe/node/hub-internals'
+import UnoCSS from 'unocss/vite'
+import { defineConfig } from 'vite'
+import { alias } from '../../../alias'
+
+/**
+ * The inspector definition leaves `basePath` unset so it mounts at `/`
+ * standalone; the dev bridge is a hosted context, so it resolves the hosted
+ * mount path `/__<id>/` to sit alongside Vite on one origin.
+ */
+const hostedBase = resolveBasePath(createInspectDevframe(), 'hosted')
+
+/**
+ * Serve-only plugin that bridges the inspect node side (RPC + WebSocket +
+ * `__connection.json`) onto Vite's own dev server under the hosted base
+ * path, mounted as a **post** middleware so Vite serves the HMR SPA first and
+ * the devframe host only answers the routes it owns. Inert during `vite build`.
+ */
+function inspectDevBridge(): Plugin {
+  const devframe = createInspectDevframe()
+  return {
+    name: 'inspect-dev-bridge',
+    apply: 'serve',
+    configureServer(server) {
+      const instance = initDevframe(devframe, {
+        base: hostedBase,
+        distDir: false,
+        server: server.httpServer as Server,
+        auth: false,
+      })
+      return () => server.middlewares.use(instance.nodeMiddleware)
+    },
+  }
+}
+
+/**
+ * `base: './'` for the build keeps the mount path portable: the same `app`
+ * output works whether devframe serves it at `/` (standalone) or
+ * `/__devframes_plugin_inspect/` (mounted in a hub). `connectDevframe`
+ * resolves its connection meta relative to `document.baseURI` to match.
+ *
+ * In `vite dev` the panel is served under the hosted base path so its
+ * `document.baseURI` matches production, and {@link inspectDevBridge} bridges
+ * the node side there with HMR.
+ */
+export default defineConfig(({ command }) => ({
+  base: command === 'serve' ? hostedBase : './',
+  root: fileURLToPath(new URL('.', import.meta.url)),
+  resolve: { alias },
+  plugins: [vue(), UnoCSS(), inspectDevBridge()],
+  /**
+   * `@antfu/design` ships raw `.ts`/`.vue`; let `@vitejs/plugin-vue` compile its
+   * SFCs instead of esbuild pre-bundling them.
+   */
+  optimizeDeps: { exclude: ['@antfu/design'] },
+  build: {
+    outDir: fileURLToPath(new URL('../assets-pkg/dist', import.meta.url)),
+    emptyOutDir: true,
+  },
+}))
diff --git a/plugins/inspect/bin.mjs b/plugins/inspect/bin.mjs
index fcc045e14..54a37f15d 100755
--- a/plugins/inspect/bin.mjs
+++ b/plugins/inspect/bin.mjs
@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 import process from 'node:process'
-import { createInspectCli } from './dist/cli.mjs'
+import { createInspectCli } from './dist/node/cli.mjs'
 
 async function main() {
   const cli = createInspectCli()
diff --git a/plugins/inspect/package.json b/plugins/inspect/package.json
index 114b8d7cb..ee3aa48d9 100644
--- a/plugins/inspect/package.json
+++ b/plugins/inspect/package.json
@@ -21,13 +21,12 @@
   ],
   "sideEffects": false,
   "exports": {
-    ".": "./dist/index.mjs",
-    "./client": "./dist/client/index.mjs",
-    "./cli": "./dist/cli.mjs",
-    "./node": "./dist/node/index.mjs",
+    ".": "./dist/node/index.mjs",
+    "./cli": "./dist/node/cli.mjs",
+    "./node": "./dist/node/setup.mjs",
     "./package.json": "./package.json"
   },
-  "types": "./dist/index.d.mts",
+  "types": "./dist/node/index.d.mts",
   "bin": {
     "devframe-inspect": "./bin.mjs"
   },
@@ -36,13 +35,16 @@
     "dist"
   ],
   "scripts": {
-    "build": "tsdown && vite build --config src/spa/vite.config.ts",
-    "dev": "vite --config src/spa/vite.config.ts",
+    "build": "tsdown && vite build --config app/vite.config.ts",
+    "build:app": "vite build --config app/vite.config.ts",
     "watch": "tsdown --watch",
+    "dev": "vite --config app/vite.config.ts --host",
+    "play": "pnpm run build && node playgrounds/server.mjs",
     "cli:build": "node bin.mjs build --out-dir dist/static",
     "prepack": "turbo run build --filter=@devframes/plugin-inspect",
     "storybook": "storybook dev -p 6012",
     "build-storybook": "storybook build",
+    "typecheck": "tsc --noEmit",
     "test": "vitest run"
   },
   "peerDependencies": {
diff --git a/plugins/inspect/playgrounds/server.mjs b/plugins/inspect/playgrounds/server.mjs
new file mode 100644
index 000000000..78f2a6fc6
--- /dev/null
+++ b/plugins/inspect/playgrounds/server.mjs
@@ -0,0 +1,58 @@
+#!/usr/bin/env node
+/**
+ * Standalone demo host for the Devframe Inspector.
+ *
+ * `initDevframe` runs setup, serves the built Vue panel SPA plus
+ * `__connection.json` at the devframe base path, and binds the WebSocket RPC
+ * upgrade onto the server, so the panel talks to a live backend:
+ *
+ *   GET  /__devframes_plugin_inspect/**  -> the Vue panel SPA (live RPC)
+ */
+import { existsSync } from 'node:fs'
+import { createServer } from 'node:http'
+import process from 'node:process'
+import { fileURLToPath } from 'node:url'
+import { initDevframe } from 'devframe/initiate'
+import { getPort } from 'devframe/utils/get-port'
+import { H3, toNodeHandler } from 'h3'
+import { resolve } from 'pathe'
+import createInspectDevframe from '../src/node/index.ts'
+
+const HERE = fileURLToPath(new URL('.', import.meta.url))
+const ROOT = resolve(HERE, '..')
+
+const devframe = createInspectDevframe()
+const basePath = devframe.basePath
+const panelDir = resolve(ROOT, 'assets-pkg/dist')
+
+async function main() {
+  if (!existsSync(resolve(panelDir, 'index.html'))) {
+    console.error('\n[inspect playground] missing built SPA\n  -> run `pnpm -C plugins/inspect build` first.\n')
+    process.exit(1)
+  }
+
+  const bindHost = '0.0.0.0'
+  const port = await getPort({ host: bindHost, port: 9012 })
+  const origin = `http://localhost:${port}`
+
+  const app = new H3()
+  const server = createServer(toNodeHandler(app))
+  const instance = initDevframe(devframe, {
+    base: basePath,
+    distDir: panelDir,
+    app,
+    server,
+    host: bindHost,
+    origin,
+    auth: false,
+  })
+  await new Promise(r => server.listen(port, bindHost, r))
+  await instance.ready
+
+  process.stdout.write(`\n  Devframe Inspector demo (live WebSocket RPC)\n  > panel:  ${origin}${basePath}\n\n`)
+}
+
+main().catch((error) => {
+  console.error(error)
+  process.exit(1)
+})
diff --git a/plugins/inspect/src/index.ts b/plugins/inspect/src/index.ts
deleted file mode 100644
index b77174681..000000000
--- a/plugins/inspect/src/index.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-import type { DevframeDefinition, RemoteAssets } from 'devframe'
-import { defineDevframe } from 'devframe'
-import pkg from '../package.json' with { type: 'json' }
-import { setupInspect } from './node/index'
-
-/** Default devframe id, driving the hosted mount path `/__<id>/`. */
-const DEFAULT_ID = 'devframes_plugin_inspect'
-
-// The Vue SPA ships in the lockstep-versioned `@devframes/plugin-inspect--assets`
-// package, not this slim node one. A locally installed copy (workspace link, or
-// an explicit install for air-gapped setups) is served with zero network via the
-// definition's `importMetaUrl`; otherwise assets stream through devframe's CDN.
-const distDir: RemoteAssets = {
-  package: `${pkg.name}--assets`,
-  version: pkg.version,
-}
-
-export interface InspectDevframeOptions {
-  /** Override the devframe id (and default CLI command / mount path). */
-  id?: string
-  /** Override the display name shown in a host dock. */
-  name?: string
-  /** Override the dock icon. */
-  icon?: string
-  /**
-   * Override the mount path. Left unset, the SPA mounts at `/` standalone
-   * and `/__<id>/` when hosted (Vite/embedded).
-   */
-  basePath?: string
-  /** Preferred standalone CLI port. */
-  port?: number
-  /**
-   * Require the trust handshake on the standalone server. Enabled by
-   * default; `--open` embeds the current OTP in the opened URL, so the
-   * tab authenticates automatically without extra prompts. Hosted adapters
-   * manage their own auth and ignore this.
-   */
-  auth?: boolean
-}
-
-/**
- * Build a {@link DevframeDefinition} for the Devframe Inspector. The
- * same definition runs standalone (`/cli`, `/build`) and mounts
- * into a host (`/vite`, hub).
- *
- * @experimental This plugin is experimental and may change without a major
- * version bump until it stabilizes.
- */
-export function createInspectDevframe(options: InspectDevframeOptions = {}): DevframeDefinition {
-  const id = options.id ?? DEFAULT_ID
-  return defineDevframe({
-    id,
-    name: options.name ?? 'Devframe Inspector',
-    version: pkg.version,
-    packageName: pkg.name,
-    importMetaUrl: import.meta.url,
-    homepage: pkg.homepage,
-    description: pkg.description,
-    icon: options.icon ?? 'ph:stethoscope-duotone',
-    basePath: options.basePath,
-    cli: {
-      command: id,
-      port: options.port ?? 9012,
-      distDir,
-      /**
-       * Gate the standalone server by default; `maybeOpenBrowser` folds the
-       * current OTP into the `--open` URL so the tab lands already trusted.
-       * Hosted adapters (Vite/hub) supply their own auth layer and ignore this.
-       */
-      auth: options.auth ?? true,
-    },
-    dock: {
-      category: '~builtin',
-    },
-    setup(ctx) {
-      setupInspect(ctx)
-    },
-  })
-}
-
-export default createInspectDevframe
-export type { InvokeResult, RpcFunctionInfo } from './types'
diff --git a/plugins/inspect/src/cli.ts b/plugins/inspect/src/node/cli.ts
similarity index 100%
rename from plugins/inspect/src/cli.ts
rename to plugins/inspect/src/node/cli.ts
diff --git a/plugins/inspect/src/diagnostics.ts b/plugins/inspect/src/node/diagnostics.ts
similarity index 100%
rename from plugins/inspect/src/diagnostics.ts
rename to plugins/inspect/src/node/diagnostics.ts
diff --git a/plugins/inspect/src/node/index.ts b/plugins/inspect/src/node/index.ts
index 9de3f2244..be930c177 100644
--- a/plugins/inspect/src/node/index.ts
+++ b/plugins/inspect/src/node/index.ts
@@ -1,14 +1,82 @@
-import type { DevframeNodeContext } from 'devframe'
-import { serverFunctions } from '../rpc/index'
+import type { DevframeDefinition, RemoteAssets } from 'devframe'
+import { defineDevframe } from 'devframe'
+import pkg from '../../package.json' with { type: 'json' }
+import { setupInspect } from './setup'
+
+/** Default devframe id, driving the hosted mount path `/__<id>/`. */
+const DEFAULT_ID = 'devframes_plugin_inspect'
+
+// The Vue SPA ships in the lockstep-versioned `@devframes/plugin-inspect--assets`
+// package, not this slim node one. A locally installed copy (workspace link, or
+// an explicit install for air-gapped setups) is served with zero network via the
+// definition's `importMetaUrl`; otherwise assets stream through devframe's CDN.
+const distDir: RemoteAssets = {
+  package: `${pkg.name}--assets`,
+  version: pkg.version,
+}
+
+export interface InspectDevframeOptions {
+  /** Override the devframe id (and default CLI command / mount path). */
+  id?: string
+  /** Override the display name shown in a host dock. */
+  name?: string
+  /** Override the dock icon. */
+  icon?: string
+  /**
+   * Override the mount path. Left unset, the SPA mounts at `/` standalone
+   * and `/__<id>/` when hosted (Vite/embedded).
+   */
+  basePath?: string
+  /** Preferred standalone CLI port. */
+  port?: number
+  /**
+   * Require the trust handshake on the standalone server. Enabled by
+   * default; `--open` embeds the current OTP in the opened URL, so the
+   * tab authenticates automatically without extra prompts. Hosted adapters
+   * manage their own auth and ignore this.
+   */
+  auth?: boolean
+}
 
 /**
- * Register the inspector's introspection RPC functions on a devframe
- * node context. Called from the definition's `setup(ctx)` and reusable
- * by host adapters that wire their own context.
+ * Build a {@link DevframeDefinition} for the Devframe Inspector. The
+ * same definition runs standalone (`/cli`, `/build`) and mounts
+ * into a host (`/vite`, hub).
+ *
+ * @experimental This plugin is experimental and may change without a major
+ * version bump until it stabilizes.
  */
-export function setupInspect(ctx: DevframeNodeContext): void {
-  for (const fn of serverFunctions)
-    ctx.rpc.register(fn)
+export function createInspectDevframe(options: InspectDevframeOptions = {}): DevframeDefinition {
+  const id = options.id ?? DEFAULT_ID
+  return defineDevframe({
+    id,
+    name: options.name ?? 'Devframe Inspector',
+    version: pkg.version,
+    packageName: pkg.name,
+    importMetaUrl: import.meta.url,
+    homepage: pkg.homepage,
+    description: pkg.description,
+    icon: options.icon ?? 'ph:stethoscope-duotone',
+    basePath: options.basePath,
+    cli: {
+      command: id,
+      port: options.port ?? 9012,
+      distDir,
+      /**
+       * Gate the standalone server by default; `maybeOpenBrowser` folds the
+       * current OTP into the `--open` URL so the tab lands already trusted.
+       * Hosted adapters (Vite/hub) supply their own auth layer and ignore this.
+       */
+      auth: options.auth ?? true,
+    },
+    dock: {
+      category: '~builtin',
+    },
+    setup(ctx) {
+      setupInspect(ctx)
+    },
+  })
 }
 
-export { serverFunctions }
+export default createInspectDevframe
+export type { DevframeInspectCommandInfo, InvokeResult, RpcFunctionInfo } from './types'
diff --git a/plugins/inspect/src/rpc/functions/_define.ts b/plugins/inspect/src/node/rpc/functions/_define.ts
similarity index 100%
rename from plugins/inspect/src/rpc/functions/_define.ts
rename to plugins/inspect/src/node/rpc/functions/_define.ts
diff --git a/plugins/inspect/src/rpc/functions/_hub-commands.ts b/plugins/inspect/src/node/rpc/functions/_hub-commands.ts
similarity index 100%
rename from plugins/inspect/src/rpc/functions/_hub-commands.ts
rename to plugins/inspect/src/node/rpc/functions/_hub-commands.ts
diff --git a/plugins/inspect/src/rpc/functions/_schema.ts b/plugins/inspect/src/node/rpc/functions/_schema.ts
similarity index 100%
rename from plugins/inspect/src/rpc/functions/_schema.ts
rename to plugins/inspect/src/node/rpc/functions/_schema.ts
diff --git a/plugins/inspect/src/rpc/functions/describe-agent.ts b/plugins/inspect/src/node/rpc/functions/describe-agent.ts
similarity index 100%
rename from plugins/inspect/src/rpc/functions/describe-agent.ts
rename to plugins/inspect/src/node/rpc/functions/describe-agent.ts
diff --git a/plugins/inspect/src/rpc/functions/execute-command.ts b/plugins/inspect/src/node/rpc/functions/execute-command.ts
similarity index 100%
rename from plugins/inspect/src/rpc/functions/execute-command.ts
rename to plugins/inspect/src/node/rpc/functions/execute-command.ts
diff --git a/plugins/inspect/src/rpc/functions/invoke-agent-tool.ts b/plugins/inspect/src/node/rpc/functions/invoke-agent-tool.ts
similarity index 100%
rename from plugins/inspect/src/rpc/functions/invoke-agent-tool.ts
rename to plugins/inspect/src/node/rpc/functions/invoke-agent-tool.ts
diff --git a/plugins/inspect/src/rpc/functions/invoke.ts b/plugins/inspect/src/node/rpc/functions/invoke.ts
similarity index 100%
rename from plugins/inspect/src/rpc/functions/invoke.ts
rename to plugins/inspect/src/node/rpc/functions/invoke.ts
diff --git a/plugins/inspect/src/rpc/functions/list-commands.ts b/plugins/inspect/src/node/rpc/functions/list-commands.ts
similarity index 100%
rename from plugins/inspect/src/rpc/functions/list-commands.ts
rename to plugins/inspect/src/node/rpc/functions/list-commands.ts
diff --git a/plugins/inspect/src/rpc/functions/list-functions.ts b/plugins/inspect/src/node/rpc/functions/list-functions.ts
similarity index 100%
rename from plugins/inspect/src/rpc/functions/list-functions.ts
rename to plugins/inspect/src/node/rpc/functions/list-functions.ts
diff --git a/plugins/inspect/src/rpc/functions/list-instances.ts b/plugins/inspect/src/node/rpc/functions/list-instances.ts
similarity index 100%
rename from plugins/inspect/src/rpc/functions/list-instances.ts
rename to plugins/inspect/src/node/rpc/functions/list-instances.ts
diff --git a/plugins/inspect/src/rpc/functions/list-state-keys.ts b/plugins/inspect/src/node/rpc/functions/list-state-keys.ts
similarity index 100%
rename from plugins/inspect/src/rpc/functions/list-state-keys.ts
rename to plugins/inspect/src/node/rpc/functions/list-state-keys.ts
diff --git a/plugins/inspect/src/rpc/functions/read-agent-resource.ts b/plugins/inspect/src/node/rpc/functions/read-agent-resource.ts
similarity index 100%
rename from plugins/inspect/src/rpc/functions/read-agent-resource.ts
rename to plugins/inspect/src/node/rpc/functions/read-agent-resource.ts
diff --git a/plugins/inspect/src/rpc/index.ts b/plugins/inspect/src/node/rpc/index.ts
similarity index 100%
rename from plugins/inspect/src/rpc/index.ts
rename to plugins/inspect/src/node/rpc/index.ts
diff --git a/plugins/inspect/src/node/setup.ts b/plugins/inspect/src/node/setup.ts
new file mode 100644
index 000000000..8e0091ab0
--- /dev/null
+++ b/plugins/inspect/src/node/setup.ts
@@ -0,0 +1,14 @@
+import type { DevframeNodeContext } from 'devframe'
+import { serverFunctions } from './rpc/index'
+
+/**
+ * Register the inspector's introspection RPC functions on a devframe
+ * node context. Called from the definition's `setup(ctx)` and reusable
+ * by host adapters that wire their own context.
+ */
+export function setupInspect(ctx: DevframeNodeContext): void {
+  for (const fn of serverFunctions)
+    ctx.rpc.register(fn)
+}
+
+export { serverFunctions }
diff --git a/plugins/inspect/src/types.ts b/plugins/inspect/src/node/types.ts
similarity index 100%
rename from plugins/inspect/src/types.ts
rename to plugins/inspect/src/node/types.ts
diff --git a/plugins/inspect/src/spa/vite.config.ts b/plugins/inspect/src/spa/vite.config.ts
deleted file mode 100644
index f18803d6f..000000000
--- a/plugins/inspect/src/spa/vite.config.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { fileURLToPath } from 'node:url'
-import { devframeVite } from '@devframes/vite/single'
-import vue from '@vitejs/plugin-vue'
-import UnoCSS from 'unocss/vite'
-import { defineConfig } from 'vite'
-import { alias } from '../../../../alias'
-import createInspectDevframe from '../index'
-
-/**
- * The inspector SPA. `base: './'` keeps every asset URL relative so the
- * bundle is mount-path portable; it discovers its runtime base from
- * `document.baseURI` and connects via `connectDevframe()`. The build is
- * copied verbatim by `createBuild`; no HTML rewriting.
- */
-export default defineConfig({
-  base: './',
-  root: fileURLToPath(new URL('.', import.meta.url)),
-  resolve: { alias },
-  plugins: [
-    vue(),
-    UnoCSS(),
-    devframeVite(createInspectDevframe(), { bridge: true, base: '/' }),
-  ],
-  /**
-   * `@antfu/design` ships raw `.ts`/`.vue`; let `@vitejs/plugin-vue` compile its
-   * SFCs instead of esbuild pre-bundling them.
-   */
-  optimizeDeps: { exclude: ['@antfu/design'] },
-  build: {
-    /**
-     * Emit into the sibling `@devframes/plugin-inspect--assets` package, which
-     * ships these assets to npm; the node package stays slim and serves them
-     * on demand through devframe's remote-assets back-proxy.
-     */
-    outDir: fileURLToPath(new URL('../../assets-pkg/dist', import.meta.url)),
-    emptyOutDir: true,
-  },
-})
diff --git a/plugins/inspect/test/function-name.test.ts b/plugins/inspect/test/function-name.test.ts
index 106dddf02..b484f7979 100644
--- a/plugins/inspect/test/function-name.test.ts
+++ b/plugins/inspect/test/function-name.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { parseNamespacedName } from '../src/spa/utils/color'
+import { parseNamespacedName } from '../app/utils/color'
 
 describe('parseNamespacedName', () => {
   it('splits a single `:` namespace into a colored prefix and an uncolored leaf', () => {
diff --git a/plugins/inspect/tsconfig.json b/plugins/inspect/tsconfig.json
index 93d967f96..826793da2 100644
--- a/plugins/inspect/tsconfig.json
+++ b/plugins/inspect/tsconfig.json
@@ -1,7 +1,6 @@
 {
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
-    "composite": true,
     "lib": ["esnext", "dom", "dom.iterable"],
     "module": "esnext",
     "moduleResolution": "Bundler",
@@ -9,5 +8,5 @@
     "noEmit": true,
     "isolatedDeclarations": false
   },
-  "include": ["src", "test", "bin.mjs"]
+  "include": ["src", "app", "test", "playgrounds", "bin.mjs"]
 }
diff --git a/plugins/inspect/tsdown.config.ts b/plugins/inspect/tsdown.config.ts
index 8aec4c8ea..99d87f922 100644
--- a/plugins/inspect/tsdown.config.ts
+++ b/plugins/inspect/tsdown.config.ts
@@ -2,44 +2,31 @@ import { defineConfig } from 'tsdown'
 
 const tsconfig = '../../tsconfig.base.json'
 
-// Browser-loaded entry. Kept in its own rolldown graph so node-only
-// imports can never leak into the client bundle.
-const clientEntries = {
-  'client/index': 'src/client/index.ts',
-}
-
-// Node-side entries: the devframe definition, the CLI/Vite host
-// adapters, the setup module, and the RPC registry.
-const serverEntries = {
-  'index': 'src/index.ts',
-  'cli': 'src/cli.ts',
+// Node-side entries: the devframe definition (root), the setup module, the
+// CLI adapter, and the RPC registry.
+const nodeEntries = {
   'node/index': 'src/node/index.ts',
-  'rpc/index': 'src/rpc/index.ts',
+  'node/setup': 'src/node/setup.ts',
+  'node/cli': 'src/node/cli.ts',
+  'node/rpc/index': 'src/node/rpc/index.ts',
 }
 
 /**
- * Three configs mirror `packages/devframe`:
- * 1. browser runtime build (`dts: false`, `clean: true`): clears dist/
- * and emits the client bundle in an isolated graph;
- * 2. node runtime build (`dts: false`, `clean: false`): appends;
- * 3. combined dts (`emitDtsOnly`): one rolldown graph so the
- * `declare module 'devframe'` RPC augmentation resolves once.
+ * Two configs keep the graphs isolated:
+ * 1. node runtime (`clean: true`): clears dist/;
+ * 2. combined dts in one graph so the `declare module 'devframe'` RPC
+ *    augmentation resolves once.
+ *
+ * The Vue panel SPA (`app/`) builds separately with Vite into the lockstep
+ * `@devframes/plugin-inspect--assets` package.
  */
 export default defineConfig([
   {
     clean: true,
-    platform: 'browser',
-    tsconfig,
-    dts: false,
-    outExtensions: () => ({ js: '.mjs' }),
-    entry: clientEntries,
-  },
-  {
-    clean: false,
     platform: 'node',
     tsconfig,
     dts: false,
-    entry: serverEntries,
+    entry: nodeEntries,
   },
   {
     clean: false,
@@ -47,6 +34,6 @@ export default defineConfig([
     tsconfig,
     dts: { emitDtsOnly: true },
     outExtensions: () => ({ dts: '.d.mts' }),
-    entry: { ...clientEntries, ...serverEntries },
+    entry: { ...nodeEntries },
   },
 ])
diff --git a/plugins/messages/.storybook/main.ts b/plugins/messages/.storybook/main.ts
index e6a304aea..c134134d2 100644
--- a/plugins/messages/.storybook/main.ts
+++ b/plugins/messages/.storybook/main.ts
@@ -5,7 +5,7 @@ import { mergeConfig } from 'vite'
 import { alias } from '../../../alias'
 
 const config: StorybookConfig = {
-  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  stories: ['../{src,app}/**/*.stories.@(ts|tsx)'],
   addons: ['@storybook/addon-docs'],
   framework: {
     name: '@storybook/vue3-vite',
diff --git a/plugins/messages/.storybook/preview.ts b/plugins/messages/.storybook/preview.ts
index c8e542461..fce523a58 100644
--- a/plugins/messages/.storybook/preview.ts
+++ b/plugins/messages/.storybook/preview.ts
@@ -1,7 +1,7 @@
 import type { Decorator, Preview } from '@storybook/vue3-vite'
 import 'virtual:uno.css'
 import '@antfu/design/styles.css'
-import '../src/client/style.css'
+import '../app/client/style.css'
 
 // Drive the shared `@antfu/design` tokens off the toolbar theme toggle: dark mode
 // is the `.dark` class on `<html>`, and the canvas takes the semantic
diff --git a/plugins/messages/src/client/App.vue b/plugins/messages/app/client/App.vue
similarity index 100%
rename from plugins/messages/src/client/App.vue
rename to plugins/messages/app/client/App.vue
diff --git a/plugins/messages/src/client/components/FilterToggles.stories.ts b/plugins/messages/app/client/components/FilterToggles.stories.ts
similarity index 100%
rename from plugins/messages/src/client/components/FilterToggles.stories.ts
rename to plugins/messages/app/client/components/FilterToggles.stories.ts
diff --git a/plugins/messages/src/client/components/FilterToggles.vue b/plugins/messages/app/client/components/FilterToggles.vue
similarity index 100%
rename from plugins/messages/src/client/components/FilterToggles.vue
rename to plugins/messages/app/client/components/FilterToggles.vue
diff --git a/plugins/messages/src/client/components/MessageDetail.vue b/plugins/messages/app/client/components/MessageDetail.vue
similarity index 100%
rename from plugins/messages/src/client/components/MessageDetail.vue
rename to plugins/messages/app/client/components/MessageDetail.vue
diff --git a/plugins/messages/src/client/components/MessageFilterBar.vue b/plugins/messages/app/client/components/MessageFilterBar.vue
similarity index 100%
rename from plugins/messages/src/client/components/MessageFilterBar.vue
rename to plugins/messages/app/client/components/MessageFilterBar.vue
diff --git a/plugins/messages/src/client/components/MessageItem.stories.ts b/plugins/messages/app/client/components/MessageItem.stories.ts
similarity index 100%
rename from plugins/messages/src/client/components/MessageItem.stories.ts
rename to plugins/messages/app/client/components/MessageItem.stories.ts
diff --git a/plugins/messages/src/client/components/MessageItem.vue b/plugins/messages/app/client/components/MessageItem.vue
similarity index 100%
rename from plugins/messages/src/client/components/MessageItem.vue
rename to plugins/messages/app/client/components/MessageItem.vue
diff --git a/plugins/messages/src/client/components/MessageList.vue b/plugins/messages/app/client/components/MessageList.vue
similarity index 100%
rename from plugins/messages/src/client/components/MessageList.vue
rename to plugins/messages/app/client/components/MessageList.vue
diff --git a/plugins/messages/src/client/components/MessageTag.vue b/plugins/messages/app/client/components/MessageTag.vue
similarity index 100%
rename from plugins/messages/src/client/components/MessageTag.vue
rename to plugins/messages/app/client/components/MessageTag.vue
diff --git a/plugins/messages/src/client/components/MessageToolbarActions.vue b/plugins/messages/app/client/components/MessageToolbarActions.vue
similarity index 100%
rename from plugins/messages/src/client/components/MessageToolbarActions.vue
rename to plugins/messages/app/client/components/MessageToolbarActions.vue
diff --git a/plugins/messages/src/client/components/MessagesView.stories.ts b/plugins/messages/app/client/components/MessagesView.stories.ts
similarity index 100%
rename from plugins/messages/src/client/components/MessagesView.stories.ts
rename to plugins/messages/app/client/components/MessagesView.stories.ts
diff --git a/plugins/messages/src/client/components/MessagesView.vue b/plugins/messages/app/client/components/MessagesView.vue
similarity index 100%
rename from plugins/messages/src/client/components/MessagesView.vue
rename to plugins/messages/app/client/components/MessagesView.vue
diff --git a/plugins/messages/src/client/components/_fixtures.ts b/plugins/messages/app/client/components/_fixtures.ts
similarity index 100%
rename from plugins/messages/src/client/components/_fixtures.ts
rename to plugins/messages/app/client/components/_fixtures.ts
diff --git a/plugins/messages/src/client/components/message-styles.ts b/plugins/messages/app/client/components/message-styles.ts
similarity index 100%
rename from plugins/messages/src/client/components/message-styles.ts
rename to plugins/messages/app/client/components/message-styles.ts
diff --git a/plugins/messages/src/client/composables/useMessageFilters.ts b/plugins/messages/app/client/composables/useMessageFilters.ts
similarity index 100%
rename from plugins/messages/src/client/composables/useMessageFilters.ts
rename to plugins/messages/app/client/composables/useMessageFilters.ts
diff --git a/plugins/messages/src/client/index.ts b/plugins/messages/app/client/index.ts
similarity index 95%
rename from plugins/messages/src/client/index.ts
rename to plugins/messages/app/client/index.ts
index 28073a3c9..f1807dfef 100644
--- a/plugins/messages/src/client/index.ts
+++ b/plugins/messages/app/client/index.ts
@@ -9,7 +9,7 @@ import '@antfu/design/styles.css'
 import './style.css'
 
 export type { DevframeRpcClient }
-export { MESSAGES_UPDATED_EVENT } from '../constants'
+export { useMessages } from './state/messages'
 
 /**
  * Connect to the plugin's devframe backend. A thin, typed wrapper around
@@ -52,7 +52,6 @@ export async function mountMessages(
   }
 }
 
-export { useMessages } from './state/messages'
 export type { MessagesState } from './state/messages'
 export type {
   DevframeMessageEntry,
@@ -61,3 +60,4 @@ export type {
   DevframeMessageLevel,
   DevframeMessagesListDelta,
 } from '@devframes/hub/types'
+export { MESSAGES_UPDATED_EVENT } from '@devframes/plugin-messages/constants'
diff --git a/plugins/messages/src/client/state/messages.ts b/plugins/messages/app/client/state/messages.ts
similarity index 97%
rename from plugins/messages/src/client/state/messages.ts
rename to plugins/messages/app/client/state/messages.ts
index b53b81581..5d5e85d1b 100644
--- a/plugins/messages/src/client/state/messages.ts
+++ b/plugins/messages/app/client/state/messages.ts
@@ -1,8 +1,8 @@
 import type { DevframeMessageEntry, DevframeMessagesListDelta } from '@devframes/hub/types'
 import type { DevframeRpcClient } from 'devframe/client'
 import type { Reactive } from 'vue'
+import { MESSAGES_UPDATED_EVENT } from '@devframes/plugin-messages/constants'
 import { reactive } from 'vue'
-import { MESSAGES_UPDATED_EVENT } from '../../constants'
 
 export interface MessagesState {
   entries: DevframeMessageEntry[]
diff --git a/plugins/messages/src/client/style.css b/plugins/messages/app/client/style.css
similarity index 100%
rename from plugins/messages/src/client/style.css
rename to plugins/messages/app/client/style.css
diff --git a/plugins/messages/src/client/vite.config.ts b/plugins/messages/app/client/vite.config.ts
similarity index 100%
rename from plugins/messages/src/client/vite.config.ts
rename to plugins/messages/app/client/vite.config.ts
diff --git a/plugins/messages/src/spa/dev-host.ts b/plugins/messages/app/dev-host.ts
similarity index 96%
rename from plugins/messages/src/spa/dev-host.ts
rename to plugins/messages/app/dev-host.ts
index a712a1255..1bbcec773 100644
--- a/plugins/messages/src/spa/dev-host.ts
+++ b/plugins/messages/app/dev-host.ts
@@ -1,9 +1,9 @@
 import type { DevframeMessagesHost as DevframeMessagesHostType } from '@devframes/hub/types'
 import type { DevframeDefinition, DevframeNodeContext } from 'devframe'
 import { HUB_EVENTS } from '@devframes/hub/constants'
+import { createMessagesDevframe } from '@devframes/plugin-messages'
+import { MESSAGES_UPDATED_EVENT } from '@devframes/plugin-messages/constants'
 import { defineDevframe } from 'devframe'
-import { MESSAGES_UPDATED_EVENT } from '../constants'
-import { createMessagesDevframe } from '../index'
 
 /**
  * Dev-only self-host harness for `pnpm dev`. The plugin itself is headless
diff --git a/plugins/messages/src/env.d.ts b/plugins/messages/app/env.d.ts
similarity index 100%
rename from plugins/messages/src/env.d.ts
rename to plugins/messages/app/env.d.ts
diff --git a/plugins/messages/src/spa/index.html b/plugins/messages/app/index.html
similarity index 100%
rename from plugins/messages/src/spa/index.html
rename to plugins/messages/app/index.html
diff --git a/plugins/messages/src/spa/main.ts b/plugins/messages/app/main.ts
similarity index 94%
rename from plugins/messages/src/spa/main.ts
rename to plugins/messages/app/main.ts
index 8ccbdd379..1a314e3d0 100644
--- a/plugins/messages/src/spa/main.ts
+++ b/plugins/messages/app/main.ts
@@ -1,4 +1,4 @@
-import { mountMessages } from '../client/index'
+import { mountMessages } from './client/index'
 
 // The shared design tokens flip on the `.dark` class; mirror the OS preference
 // onto <html> (the other devframe plugins follow the same approach). The
diff --git a/plugins/messages/app/vite.config.ts b/plugins/messages/app/vite.config.ts
new file mode 100644
index 000000000..c95ed607f
--- /dev/null
+++ b/plugins/messages/app/vite.config.ts
@@ -0,0 +1,66 @@
+import type { Server } from 'node:http'
+import type { Plugin } from 'vite'
+import { fileURLToPath } from 'node:url'
+import createMessagesDevframe from '@devframes/plugin-messages'
+import vue from '@vitejs/plugin-vue'
+import { initDevframe } from 'devframe/initiate'
+import { resolveBasePath } from 'devframe/internal'
+import UnoCSS from 'unocss/vite'
+import { defineConfig } from 'vite'
+import { alias } from '../../../alias'
+import { createMessagesDevDevframe } from './dev-host'
+
+const devframe = createMessagesDevframe()
+// Hosted base (`/__devframes_plugin_messages/`): the SPA and the dev bridge
+// share it so `document.baseURI` matches production while Vite serves HMR.
+const basePath = resolveBasePath(devframe, 'hosted')
+
+/**
+ * Serve-only plugin that bridges the messages node side (RPC + WebSocket +
+ * `__connection.json`) onto Vite's own dev server under the devframe base
+ * path, mounted as a **post** middleware so Vite serves the HMR SPA first and
+ * the devframe host only answers the routes it owns. The demo-seeded dev
+ * harness stands in for a hub messages host. Inert during `vite build`.
+ */
+function messagesDevBridge(): Plugin {
+  return {
+    name: 'messages-dev-bridge',
+    apply: 'serve',
+    configureServer(server) {
+      const instance = initDevframe(createMessagesDevDevframe(), {
+        base: basePath,
+        distDir: false,
+        server: server.httpServer as Server,
+        auth: false,
+      })
+      return () => server.middlewares.use(instance.nodeMiddleware)
+    },
+  }
+}
+
+/**
+ * The messages panel SPA. `base: './'` for the build keeps the mount path
+ * portable: the same output works whether devframe serves it at `/`
+ * (standalone) or `/__devframes_plugin_messages/` (mounted in a hub).
+ * `connectDevframe` resolves its connection meta relative to `document.baseURI`
+ * to match.
+ *
+ * In `vite dev` the panel is served under the devframe base path so its
+ * `document.baseURI` matches production, and {@link messagesDevBridge} bridges
+ * the node side there with HMR.
+ */
+export default defineConfig(({ command }) => ({
+  base: command === 'serve' ? basePath : './',
+  root: fileURLToPath(new URL('.', import.meta.url)),
+  resolve: { alias },
+  plugins: [vue(), UnoCSS(), messagesDevBridge()],
+  /**
+   * `@antfu/design` ships raw `.ts`/`.vue`; let `@vitejs/plugin-vue` compile its
+   * SFCs instead of esbuild pre-bundling them.
+   */
+  optimizeDeps: { exclude: ['@antfu/design'] },
+  build: {
+    outDir: fileURLToPath(new URL('../assets-pkg/dist', import.meta.url)),
+    emptyOutDir: true,
+  },
+}))
diff --git a/plugins/messages/bin.mjs b/plugins/messages/bin.mjs
index 07b93147a..3f4fed0dd 100755
--- a/plugins/messages/bin.mjs
+++ b/plugins/messages/bin.mjs
@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 import process from 'node:process'
-import { createMessagesCli } from './dist/cli.mjs'
+import { createMessagesCli } from './dist/node/cli.mjs'
 
 async function main() {
   const cli = createMessagesCli()
diff --git a/plugins/messages/package.json b/plugins/messages/package.json
index 6554ae3b0..31834f77a 100644
--- a/plugins/messages/package.json
+++ b/plugins/messages/package.json
@@ -21,15 +21,15 @@
   ],
   "sideEffects": false,
   "exports": {
-    ".": "./dist/index.mjs",
+    ".": "./dist/node/index.mjs",
     "./client": "./dist/client/index.mjs",
-    "./cli": "./dist/cli.mjs",
-    "./constants": "./dist/constants.mjs",
-    "./node": "./dist/node/index.mjs",
-    "./rpc": "./dist/rpc/index.mjs",
+    "./cli": "./dist/node/cli.mjs",
+    "./constants": "./dist/node/constants.mjs",
+    "./node": "./dist/node/setup.mjs",
+    "./rpc": "./dist/node/rpc/index.mjs",
     "./package.json": "./package.json"
   },
-  "types": "./dist/index.d.mts",
+  "types": "./dist/node/index.d.mts",
   "bin": {
     "devframe-messages": "./bin.mjs"
   },
@@ -38,9 +38,12 @@
     "dist"
   ],
   "scripts": {
-    "build": "tsdown && vite build --config src/client/vite.config.ts && vite build --config src/spa/vite.config.ts",
-    "dev": "vite --config src/spa/vite.config.ts",
+    "build": "tsdown && vite build --config app/client/vite.config.ts && vite build --config app/vite.config.ts",
+    "build:client": "vite build --config app/client/vite.config.ts",
+    "build:app": "vite build --config app/vite.config.ts",
+    "dev": "vite --config app/vite.config.ts --host",
     "watch": "tsdown --watch",
+    "play": "pnpm run build && node playgrounds/server.mjs",
     "cli:build": "node bin.mjs build --out-dir dist/static",
     "prepack": "turbo run build --filter=@devframes/plugin-messages",
     "storybook": "storybook dev -p 6006",
diff --git a/plugins/messages/playgrounds/server.mjs b/plugins/messages/playgrounds/server.mjs
new file mode 100644
index 000000000..5cd67834b
--- /dev/null
+++ b/plugins/messages/playgrounds/server.mjs
@@ -0,0 +1,59 @@
+#!/usr/bin/env node
+/**
+ * Standalone demo host for the messages panel.
+ *
+ * `initDevframe` runs setup, serves the built Vue panel SPA + `__connection.json`
+ * from `assets-pkg/dist` under the devframe base path, and binds the WebSocket
+ * RPC upgrade onto our http server. The dev harness seeds a demo feed since the
+ * plugin itself is headless and reads whatever hub host it's mounted on.
+ *
+ *   node playgrounds/server.mjs   → live WebSocket RPC (`assets-pkg/dist`)
+ */
+import { existsSync } from 'node:fs'
+import { createServer } from 'node:http'
+import process from 'node:process'
+import { fileURLToPath } from 'node:url'
+import { initDevframe } from 'devframe/initiate'
+import { getPort } from 'devframe/utils/get-port'
+import { H3, toNodeHandler } from 'h3'
+import { resolve } from 'pathe'
+import { createMessagesDevDevframe } from '../app/dev-host.ts'
+
+const HERE = fileURLToPath(new URL('.', import.meta.url))
+const ROOT = resolve(HERE, '..')
+const panelDir = resolve(ROOT, 'assets-pkg/dist')
+
+const devframe = createMessagesDevDevframe()
+const basePath = devframe.basePath
+
+async function main() {
+  if (!existsSync(resolve(panelDir, 'index.html'))) {
+    console.error('\n[messages playground] missing assets-pkg/dist/index.html\n  → run `pnpm -C plugins/messages build` first.\n')
+    process.exit(1)
+  }
+
+  const bindHost = '0.0.0.0'
+  const port = await getPort({ host: bindHost, port: 4414 })
+  const origin = `http://localhost:${port}`
+
+  const app = new H3()
+  const server = createServer(toNodeHandler(app))
+  const instance = initDevframe(devframe, {
+    base: basePath,
+    distDir: panelDir,
+    app,
+    server,
+    host: bindHost,
+    origin,
+    auth: false,
+  })
+  await new Promise(r => server.listen(port, bindHost, r))
+  await instance.ready
+
+  process.stdout.write(`\n  Messages panel: dev (live WebSocket RPC)\n  ▸ panel:  ${origin}${basePath}\n\n`)
+}
+
+main().catch((error) => {
+  console.error(error)
+  process.exit(1)
+})
diff --git a/plugins/messages/src/index.ts b/plugins/messages/src/index.ts
deleted file mode 100644
index 6f0c74340..000000000
--- a/plugins/messages/src/index.ts
+++ /dev/null
@@ -1,96 +0,0 @@
-import type { DevframeDefinition, RemoteAssets } from 'devframe'
-import { defineDevframe } from 'devframe'
-import pkg from '../package.json' with { type: 'json' }
-import { DEFAULT_PORT, PLUGIN_ID } from './constants'
-import { setupMessages } from './node/index'
-
-// The SPA ships in the lockstep `@devframes/plugin-messages--assets` package,
-// served on demand through devframe's remote-assets back-proxy. The definition's
-// `importMetaUrl` (below) supplies the default `resolveFrom`, so a locally
-// installed copy (a workspace link here) is served with zero network.
-const remoteAssets: RemoteAssets = {
-  package: `${pkg.name}--assets`,
-  version: pkg.version,
-}
-/** The panel `clientScript` bundle (`dist/client`) stays in this node package. */
-export interface MessagesDevframeOptions {
-  /** Override the devframe id (and default CLI command / mount path). */
-  id?: string
-  /** Override the display name shown in a host dock. */
-  name?: string
-  /** Override the dock icon. */
-  icon?: string
-  /**
-   * Override the mount path. Left unset, the SPA mounts at `/` standalone
-   * and `/__<id>/` when hosted (Vite/embedded).
-   */
-  basePath?: string
-  /** Preferred standalone CLI port. */
-  port?: number
-  /**
-   * Require the trust handshake on the standalone server. Enabled by
-   * default; `--open` embeds the current OTP in the opened URL, so the
-   * tab authenticates automatically without extra prompts. Hosted adapters
-   * manage their own auth and ignore this.
-   */
-  auth?: boolean
-}
-
-/**
- * Build a {@link DevframeDefinition} for the hub message feed panel,
- * a portable view over `ctx.messages`, ported from vitejs/devtools'
- * built-in Messages view. The same definition runs standalone
- * (`/cli`, `/build`) and mounts into a host (`/vite`, hub);
- * a hub host is what feeds it live entries.
- *
- * @experimental This plugin is experimental and may change without a major
- * version bump until it stabilizes.
- */
-export function createMessagesDevframe(options: MessagesDevframeOptions = {}): DevframeDefinition {
-  const id = options.id ?? PLUGIN_ID
-  return defineDevframe({
-    id,
-    name: options.name ?? 'Messages',
-    version: pkg.version,
-    packageName: pkg.name,
-    importMetaUrl: import.meta.url,
-    homepage: pkg.homepage,
-    description: pkg.description,
-    icon: options.icon ?? 'ph:notification-duotone',
-    basePath: options.basePath,
-    cli: {
-      command: id,
-      port: options.port ?? DEFAULT_PORT,
-      distDir: remoteAssets,
-      /**
-       * Gate the standalone server by default; `maybeOpenBrowser` folds the
-       * current OTP into the `--open` URL so the tab lands already trusted.
-       * Hosted adapters (Vite/hub) supply their own auth layer and ignore this.
-       */
-      auth: options.auth ?? true,
-    },
-    dock: {
-      category: '~builtin',
-    },
-    /**
-     * Backs the detail panel's "open file" affordance; the panel hides it
-     * when the service isn't advertised.
-     */
-    services: [{ package: '@devframes/service-open' }],
-    setup(ctx) {
-      setupMessages(ctx)
-    },
-  })
-}
-
-export default createMessagesDevframe
-export { DEFAULT_PORT, MESSAGES_UPDATED_EVENT, PLUGIN_ID } from './constants'
-// The plugin's data vocabulary is the hub's, re-exported so the SPA, the
-// embeddable client, and consumers can type against the plugin package alone.
-export type {
-  DevframeMessageEntry,
-  DevframeMessageEntryFrom,
-  DevframeMessageEntryInput,
-  DevframeMessageLevel,
-  DevframeMessagesListDelta,
-} from '@devframes/hub/types'
diff --git a/plugins/messages/src/cli.ts b/plugins/messages/src/node/cli.ts
similarity index 100%
rename from plugins/messages/src/cli.ts
rename to plugins/messages/src/node/cli.ts
diff --git a/plugins/messages/src/constants.ts b/plugins/messages/src/node/constants.ts
similarity index 100%
rename from plugins/messages/src/constants.ts
rename to plugins/messages/src/node/constants.ts
diff --git a/plugins/messages/src/diagnostics.ts b/plugins/messages/src/node/diagnostics.ts
similarity index 100%
rename from plugins/messages/src/diagnostics.ts
rename to plugins/messages/src/node/diagnostics.ts
diff --git a/plugins/messages/src/node/index.ts b/plugins/messages/src/node/index.ts
index 7d7527ab0..377ac9442 100644
--- a/plugins/messages/src/node/index.ts
+++ b/plugins/messages/src/node/index.ts
@@ -1,28 +1,96 @@
-import type { DevframeNodeContext } from 'devframe'
-import { PLUGIN_ID } from '../constants'
-import { diagnostics } from '../diagnostics'
-import { getMessagesHost } from '../rpc/functions/_define'
-import { serverFunctions } from '../rpc/index'
+import type { DevframeDefinition, RemoteAssets } from 'devframe'
+import { defineDevframe } from 'devframe'
+import pkg from '../../package.json' with { type: 'json' }
+import { DEFAULT_PORT, PLUGIN_ID } from './constants'
+import { setupMessages } from './setup'
+
+// The SPA ships in the lockstep `@devframes/plugin-messages--assets` package,
+// served on demand through devframe's remote-assets back-proxy. The definition's
+// `importMetaUrl` (below) supplies the default `resolveFrom`, so a locally
+// installed copy (a workspace link here) is served with zero network.
+const remoteAssets: RemoteAssets = {
+  package: `${pkg.name}--assets`,
+  version: pkg.version,
+}
+/** The panel `clientScript` bundle (`dist/client`) stays in this node package. */
+export interface MessagesDevframeOptions {
+  /** Override the devframe id (and default CLI command / mount path). */
+  id?: string
+  /** Override the display name shown in a host dock. */
+  name?: string
+  /** Override the dock icon. */
+  icon?: string
+  /**
+   * Override the mount path. Left unset, the SPA mounts at `/` standalone
+   * and `/__<id>/` when hosted (Vite/embedded).
+   */
+  basePath?: string
+  /** Preferred standalone CLI port. */
+  port?: number
+  /**
+   * Require the trust handshake on the standalone server. Enabled by
+   * default; `--open` embeds the current OTP in the opened URL, so the
+   * tab authenticates automatically without extra prompts. Hosted adapters
+   * manage their own auth and ignore this.
+   */
+  auth?: boolean
+}
 
 /**
- * Register the message-feed RPC functions on a devframe node context.
- * Called from the definition's `setup(ctx)` and reusable by host adapters
- * that wire their own context.
+ * Build a {@link DevframeDefinition} for the hub message feed panel,
+ * a portable view over `ctx.messages`, ported from vitejs/devtools'
+ * built-in Messages view. The same definition runs standalone
+ * (`/cli`, `/build`) and mounts into a host (`/vite`, hub);
+ * a hub host is what feeds it live entries.
  *
- * The plugin reads the feed from the hub-attached `ctx.messages` host. On a
- * plain (non-hub) context it warns once and keeps the RPC surface registered
- * as no-ops, so the panel still renders, with an empty feed.
+ * @experimental This plugin is experimental and may change without a major
+ * version bump until it stabilizes.
  */
-export function setupMessages(ctx: DevframeNodeContext): void {
-  if (!getMessagesHost(ctx))
-    diagnostics.DP_MESSAGES_0001({ id: PLUGIN_ID })
-
-  // The detail panel's "open file" affordance calls the
-  // `@devframes/service-open` wire service (declared in the definition's
-  // `services`) directly from the client; the service resolves the
-  // workspace-relative file position itself, so the plugin needs no bridge.
-  for (const fn of serverFunctions)
-    ctx.rpc.register(fn)
+export function createMessagesDevframe(options: MessagesDevframeOptions = {}): DevframeDefinition {
+  const id = options.id ?? PLUGIN_ID
+  return defineDevframe({
+    id,
+    name: options.name ?? 'Messages',
+    version: pkg.version,
+    packageName: pkg.name,
+    importMetaUrl: import.meta.url,
+    homepage: pkg.homepage,
+    description: pkg.description,
+    icon: options.icon ?? 'ph:notification-duotone',
+    basePath: options.basePath,
+    cli: {
+      command: id,
+      port: options.port ?? DEFAULT_PORT,
+      distDir: remoteAssets,
+      /**
+       * Gate the standalone server by default; `maybeOpenBrowser` folds the
+       * current OTP into the `--open` URL so the tab lands already trusted.
+       * Hosted adapters (Vite/hub) supply their own auth layer and ignore this.
+       */
+      auth: options.auth ?? true,
+    },
+    dock: {
+      category: '~builtin',
+    },
+    /**
+     * Backs the detail panel's "open file" affordance; the panel hides it
+     * when the service isn't advertised.
+     */
+    services: [{ package: '@devframes/service-open' }],
+    setup(ctx) {
+      setupMessages(ctx)
+    },
+  })
 }
 
-export { serverFunctions }
+export default createMessagesDevframe
+export { DEFAULT_PORT, MESSAGES_UPDATED_EVENT, PLUGIN_ID } from './constants'
+// The plugin's data vocabulary is the hub's, re-exported so the SPA, the
+// embeddable client, and consumers can type against the plugin package alone.
+export type {
+  DevframeMessageEntry,
+  DevframeMessageEntryFrom,
+  DevframeMessageEntryInput,
+  DevframeMessageLevel,
+  DevframeMessagesListDelta,
+} from '@devframes/hub/types'
diff --git a/plugins/messages/src/rpc/functions/_define.ts b/plugins/messages/src/node/rpc/functions/_define.ts
similarity index 100%
rename from plugins/messages/src/rpc/functions/_define.ts
rename to plugins/messages/src/node/rpc/functions/_define.ts
diff --git a/plugins/messages/src/rpc/functions/add.ts b/plugins/messages/src/node/rpc/functions/add.ts
similarity index 100%
rename from plugins/messages/src/rpc/functions/add.ts
rename to plugins/messages/src/node/rpc/functions/add.ts
diff --git a/plugins/messages/src/rpc/functions/clear.ts b/plugins/messages/src/node/rpc/functions/clear.ts
similarity index 100%
rename from plugins/messages/src/rpc/functions/clear.ts
rename to plugins/messages/src/node/rpc/functions/clear.ts
diff --git a/plugins/messages/src/rpc/functions/list.ts b/plugins/messages/src/node/rpc/functions/list.ts
similarity index 100%
rename from plugins/messages/src/rpc/functions/list.ts
rename to plugins/messages/src/node/rpc/functions/list.ts
diff --git a/plugins/messages/src/rpc/functions/remove.ts b/plugins/messages/src/node/rpc/functions/remove.ts
similarity index 100%
rename from plugins/messages/src/rpc/functions/remove.ts
rename to plugins/messages/src/node/rpc/functions/remove.ts
diff --git a/plugins/messages/src/rpc/functions/update.ts b/plugins/messages/src/node/rpc/functions/update.ts
similarity index 100%
rename from plugins/messages/src/rpc/functions/update.ts
rename to plugins/messages/src/node/rpc/functions/update.ts
diff --git a/plugins/messages/src/rpc/index.ts b/plugins/messages/src/node/rpc/index.ts
similarity index 100%
rename from plugins/messages/src/rpc/index.ts
rename to plugins/messages/src/node/rpc/index.ts
diff --git a/plugins/messages/src/node/setup.ts b/plugins/messages/src/node/setup.ts
new file mode 100644
index 000000000..32b9c3bef
--- /dev/null
+++ b/plugins/messages/src/node/setup.ts
@@ -0,0 +1,28 @@
+import type { DevframeNodeContext } from 'devframe'
+import { PLUGIN_ID } from './constants'
+import { diagnostics } from './diagnostics'
+import { getMessagesHost } from './rpc/functions/_define'
+import { serverFunctions } from './rpc/index'
+
+/**
+ * Register the message-feed RPC functions on a devframe node context.
+ * Called from the definition's `setup(ctx)` and reusable by host adapters
+ * that wire their own context.
+ *
+ * The plugin reads the feed from the hub-attached `ctx.messages` host. On a
+ * plain (non-hub) context it warns once and keeps the RPC surface registered
+ * as no-ops, so the panel still renders, with an empty feed.
+ */
+export function setupMessages(ctx: DevframeNodeContext): void {
+  if (!getMessagesHost(ctx))
+    diagnostics.DP_MESSAGES_0001({ id: PLUGIN_ID })
+
+  // The detail panel's "open file" affordance calls the
+  // `@devframes/service-open` wire service (declared in the definition's
+  // `services`) directly from the client; the service resolves the
+  // workspace-relative file position itself, so the plugin needs no bridge.
+  for (const fn of serverFunctions)
+    ctx.rpc.register(fn)
+}
+
+export { serverFunctions }
diff --git a/plugins/messages/src/spa/vite.config.ts b/plugins/messages/src/spa/vite.config.ts
deleted file mode 100644
index 464991cf4..000000000
--- a/plugins/messages/src/spa/vite.config.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { fileURLToPath } from 'node:url'
-import { devframeViteBridge } from '@devframes/vite/single'
-import vue from '@vitejs/plugin-vue'
-import UnoCSS from 'unocss/vite'
-import { defineConfig } from 'vite'
-import { alias } from '../../../../alias'
-import { createMessagesDevDevframe } from './dev-host'
-
-/**
- * The messages panel SPA. `base: './'` keeps every asset URL relative so the
- * bundle is mount-path portable, discovering its runtime base from
- * `document.baseURI` and connecting via `connectDevframe()`. The build is
- * copied verbatim by `createBuild`; no HTML rewriting.
- *
- * `pnpm dev` self-hosts through the demo-seeded dev harness (a stand-in hub
- * messages host) so the feed is lively without a full hub host.
- */
-export default defineConfig({
-  base: './',
-  root: fileURLToPath(new URL('.', import.meta.url)),
-  resolve: { alias },
-  plugins: [
-    vue(),
-    UnoCSS(),
-    devframeViteBridge(createMessagesDevDevframe(), { base: '/' }),
-  ],
-  /**
-   * `@antfu/design` ships raw `.ts`/`.vue`; let `@vitejs/plugin-vue` compile its
-   * SFCs instead of esbuild pre-bundling them.
-   */
-  optimizeDeps: { exclude: ['@antfu/design'] },
-  build: {
-    outDir: fileURLToPath(new URL('../../assets-pkg/dist', import.meta.url)),
-    emptyOutDir: true,
-  },
-})
diff --git a/plugins/messages/tsconfig.json b/plugins/messages/tsconfig.json
index 9be47e570..1261ddb25 100644
--- a/plugins/messages/tsconfig.json
+++ b/plugins/messages/tsconfig.json
@@ -3,6 +3,6 @@
   "compilerOptions": {
     "lib": ["esnext", "dom", "dom.iterable"]
   },
-  "include": ["src", "test", "tsdown.config.ts", "uno.config.ts"],
+  "include": ["src", "app", "test", "playgrounds", "bin.mjs", "tsdown.config.ts", "uno.config.ts"],
   "exclude": ["dist", "node_modules"]
 }
diff --git a/plugins/messages/tsdown.config.ts b/plugins/messages/tsdown.config.ts
index 4a896822a..fa319d6b0 100644
--- a/plugins/messages/tsdown.config.ts
+++ b/plugins/messages/tsdown.config.ts
@@ -2,25 +2,20 @@ import { defineConfig } from 'tsdown'
 
 const tsconfig = '../../tsconfig.base.json'
 
-// Browser-loaded entry: the embeddable Vue panel. Its runtime bundle is
-// produced by the Vite lib build (`src/client/vite.config.ts`, CSS injected
-// via JS); tsdown only emits its declarations below.
-const clientEntries = {
-  'client/index': 'src/client/index.ts',
-}
-
-// Node + neutral modules: the devframe definition/factory, the RPC
-// functions, and the host adapters.
-const serverEntries = {
-  'index': 'src/index.ts',
-  'cli': 'src/cli.ts',
-  'constants': 'src/constants.ts',
+// Node + neutral modules only: the devframe definition/factory, the setup
+// module, the RPC functions, the CLI adapter, and the shared constants. The
+// Vue component library (`./client`) and the SPA host build separately with
+// Vite (`app/client/vite.config.ts`, `app/vite.config.ts`).
+const nodeEntries = {
   'node/index': 'src/node/index.ts',
-  'rpc/index': 'src/rpc/index.ts',
+  'node/setup': 'src/node/setup.ts',
+  'node/cli': 'src/node/cli.ts',
+  'node/constants': 'src/node/constants.ts',
+  'node/rpc/index': 'src/node/rpc/index.ts',
 }
 
 /**
- * Two configs mirror `plugins/terminals`:
+ * Two configs mirror the other plugins:
  * 1. node runtime build (`dts: false`, `clean: true`);
  * 2. combined dts (`emitDtsOnly`): one rolldown graph so the
  * `declare module 'devframe'` RPC augmentation resolves once.
@@ -31,24 +26,21 @@ export default defineConfig([
     platform: 'node',
     tsconfig,
     dts: false,
-    entry: serverEntries,
+    entry: nodeEntries,
   },
   {
     clean: false,
     platform: 'neutral',
     tsconfig,
     /**
-     * `client/index.ts` re-exports `useMessages(): Reactive<MessagesState>`,
-     * a genuine Vue reactivity type, not just a documentation import. Without
-     * this, the dts bundler inlines Vue's entire runtime-core/reactivity type
-     * surface to describe `Reactive<T>` (≈935 KB); `neverBundle` keeps the
-     * reference as `import('vue').Reactive<...>` instead. This build is
-     * `emitDtsOnly`, so it has no effect on the JS output (built separately
-     * by the Vite lib build for the client, and by the node build above).
+     * The RPC list types reference `@devframes/hub` message types; keep Vue
+     * external so the dts bundler references `import('vue').Reactive<...>`
+     * rather than inlining Vue's reactivity type surface. This build is
+     * `emitDtsOnly`, so it has no effect on the JS output.
      */
     deps: { neverBundle: ['vue'] },
     dts: { emitDtsOnly: true },
     outExtensions: () => ({ dts: '.d.mts' }),
-    entry: { ...clientEntries, ...serverEntries },
+    entry: nodeEntries,
   },
 ])
diff --git a/plugins/og/.storybook/main.ts b/plugins/og/.storybook/main.ts
index 43fc9da03..227468539 100644
--- a/plugins/og/.storybook/main.ts
+++ b/plugins/og/.storybook/main.ts
@@ -5,7 +5,7 @@ import { mergeConfig } from 'vite'
 import { alias } from '../../../alias'
 
 const config: StorybookConfig = {
-  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  stories: ['../{src,app}/**/*.stories.@(ts|tsx)'],
   addons: ['@storybook/addon-docs'],
   framework: {
     name: '@storybook/vue3-vite',
diff --git a/plugins/og/.storybook/preview.ts b/plugins/og/.storybook/preview.ts
index 734229066..0bc649755 100644
--- a/plugins/og/.storybook/preview.ts
+++ b/plugins/og/.storybook/preview.ts
@@ -1,7 +1,7 @@
 import type { Decorator, Preview } from '@storybook/vue3-vite'
 import 'virtual:uno.css'
 import '@antfu/design/styles.css'
-import '../src/spa/app/assets/main.css'
+import '../app/app/assets/main.css'
 
 // Drive the shared `@antfu/design` tokens off the toolbar theme toggle: dark mode
 // is the `.dark` class on `<html>`, and the canvas takes the semantic
diff --git a/plugins/og/src/spa/app/app.vue b/plugins/og/app/app/app.vue
similarity index 100%
rename from plugins/og/src/spa/app/app.vue
rename to plugins/og/app/app/app.vue
diff --git a/plugins/og/src/spa/app/assets/main.css b/plugins/og/app/app/assets/main.css
similarity index 100%
rename from plugins/og/src/spa/app/assets/main.css
rename to plugins/og/app/app/assets/main.css
diff --git a/plugins/og/src/spa/app/components/MetadataTable.stories.ts b/plugins/og/app/app/components/MetadataTable.stories.ts
similarity index 100%
rename from plugins/og/src/spa/app/components/MetadataTable.stories.ts
rename to plugins/og/app/app/components/MetadataTable.stories.ts
diff --git a/plugins/og/src/spa/app/components/MetadataTable.vue b/plugins/og/app/app/components/MetadataTable.vue
similarity index 97%
rename from plugins/og/src/spa/app/components/MetadataTable.vue
rename to plugins/og/app/app/components/MetadataTable.vue
index 09c9faa45..ddfcc03d2 100644
--- a/plugins/og/src/spa/app/components/MetadataTable.vue
+++ b/plugins/og/app/app/components/MetadataTable.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { OgHeadTag } from '../../../types'
+import type { OgHeadTag } from '../connect'
 import { tagDefinitions } from '../utils/metadata'
 
 defineProps<{
diff --git a/plugins/og/src/spa/app/components/MissingTags.stories.ts b/plugins/og/app/app/components/MissingTags.stories.ts
similarity index 100%
rename from plugins/og/src/spa/app/components/MissingTags.stories.ts
rename to plugins/og/app/app/components/MissingTags.stories.ts
diff --git a/plugins/og/src/spa/app/components/MissingTags.vue b/plugins/og/app/app/components/MissingTags.vue
similarity index 98%
rename from plugins/og/src/spa/app/components/MissingTags.vue
rename to plugins/og/app/app/components/MissingTags.vue
index afb0e807a..e3a7c9a34 100644
--- a/plugins/og/src/spa/app/components/MissingTags.vue
+++ b/plugins/og/app/app/components/MissingTags.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { OgHeadTag } from '../../../types'
+import type { OgHeadTag } from '../connect'
 import ActionButton from '@antfu/design/components/Action/ActionButton.vue'
 import LayoutTabs from '@antfu/design/components/Layout/LayoutTabs.vue'
 import { computed, shallowRef } from 'vue'
diff --git a/plugins/og/src/spa/app/components/SocialPreview.stories.ts b/plugins/og/app/app/components/SocialPreview.stories.ts
similarity index 100%
rename from plugins/og/src/spa/app/components/SocialPreview.stories.ts
rename to plugins/og/app/app/components/SocialPreview.stories.ts
diff --git a/plugins/og/src/spa/app/components/SocialPreview.vue b/plugins/og/app/app/components/SocialPreview.vue
similarity index 97%
rename from plugins/og/src/spa/app/components/SocialPreview.vue
rename to plugins/og/app/app/components/SocialPreview.vue
index 234d5a6ab..9407a2ca5 100644
--- a/plugins/og/src/spa/app/components/SocialPreview.vue
+++ b/plugins/og/app/app/components/SocialPreview.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { OgSnapshot } from '../../../types'
+import type { OgSnapshot } from '../connect'
 import LayoutTabs from '@antfu/design/components/Layout/LayoutTabs.vue'
 import { computed, shallowRef } from 'vue'
 import { toSocialCard } from '../utils/metadata'
diff --git a/plugins/og/src/spa/app/components/ViewerToolbar.stories.ts b/plugins/og/app/app/components/ViewerToolbar.stories.ts
similarity index 100%
rename from plugins/og/src/spa/app/components/ViewerToolbar.stories.ts
rename to plugins/og/app/app/components/ViewerToolbar.stories.ts
diff --git a/plugins/og/src/spa/app/components/ViewerToolbar.vue b/plugins/og/app/app/components/ViewerToolbar.vue
similarity index 100%
rename from plugins/og/src/spa/app/components/ViewerToolbar.vue
rename to plugins/og/app/app/components/ViewerToolbar.vue
diff --git a/plugins/og/src/spa/app/components/_fixtures.ts b/plugins/og/app/app/components/_fixtures.ts
similarity index 96%
rename from plugins/og/src/spa/app/components/_fixtures.ts
rename to plugins/og/app/app/components/_fixtures.ts
index 5531f568d..8616d7fbf 100644
--- a/plugins/og/src/spa/app/components/_fixtures.ts
+++ b/plugins/og/app/app/components/_fixtures.ts
@@ -1,4 +1,4 @@
-import type { OgHeadTag, OgSnapshot } from '../../../types'
+import type { OgHeadTag, OgSnapshot } from '../connect'
 
 /**
  * A static, fully-populated Open Graph snapshot so the presentational
diff --git a/plugins/og/src/spa/app/components/previews/FacebookPreview.vue b/plugins/og/app/app/components/previews/FacebookPreview.vue
similarity index 100%
rename from plugins/og/src/spa/app/components/previews/FacebookPreview.vue
rename to plugins/og/app/app/components/previews/FacebookPreview.vue
diff --git a/plugins/og/src/spa/app/components/previews/LinkedinPreview.vue b/plugins/og/app/app/components/previews/LinkedinPreview.vue
similarity index 100%
rename from plugins/og/src/spa/app/components/previews/LinkedinPreview.vue
rename to plugins/og/app/app/components/previews/LinkedinPreview.vue
diff --git a/plugins/og/src/spa/app/components/previews/PreviewImage.vue b/plugins/og/app/app/components/previews/PreviewImage.vue
similarity index 100%
rename from plugins/og/src/spa/app/components/previews/PreviewImage.vue
rename to plugins/og/app/app/components/previews/PreviewImage.vue
diff --git a/plugins/og/src/spa/app/components/previews/TelegramPreview.vue b/plugins/og/app/app/components/previews/TelegramPreview.vue
similarity index 100%
rename from plugins/og/src/spa/app/components/previews/TelegramPreview.vue
rename to plugins/og/app/app/components/previews/TelegramPreview.vue
diff --git a/plugins/og/src/spa/app/components/previews/TwitterPreview.vue b/plugins/og/app/app/components/previews/TwitterPreview.vue
similarity index 100%
rename from plugins/og/src/spa/app/components/previews/TwitterPreview.vue
rename to plugins/og/app/app/components/previews/TwitterPreview.vue
diff --git a/plugins/og/src/spa/app/composables/useOgViewer.ts b/plugins/og/app/app/composables/useOgViewer.ts
similarity index 94%
rename from plugins/og/src/spa/app/composables/useOgViewer.ts
rename to plugins/og/app/app/composables/useOgViewer.ts
index 76dbcdebb..112bf7fbd 100644
--- a/plugins/og/src/spa/app/composables/useOgViewer.ts
+++ b/plugins/og/app/app/composables/useOgViewer.ts
@@ -1,7 +1,7 @@
 import type { DevframeRpcClient } from 'devframe/client'
-import type { OgSnapshot } from '../../../types'
+import type { OgSnapshot } from '../connect'
 import { computed, readonly, shallowRef } from 'vue'
-import { connectOg } from '../../../client'
+import { connectOg } from '../connect'
 
 export function useOgViewer() {
   const rpc = shallowRef<DevframeRpcClient | null>(null)
diff --git a/plugins/og/src/client/index.ts b/plugins/og/app/app/connect.ts
similarity index 56%
rename from plugins/og/src/client/index.ts
rename to plugins/og/app/app/connect.ts
index 3b066d8e8..db3ae7efa 100644
--- a/plugins/og/src/client/index.ts
+++ b/plugins/og/app/app/connect.ts
@@ -1,8 +1,7 @@
 import type { DevframeRpcClientOptions } from 'devframe/client'
 import { connectDevframe } from 'devframe/client'
 
-export type { OgHeadTag, OgHeadTagName, OgResolveInput, OgSnapshot } from '../types'
-export type { DevframeConnectionStatus, DevframeRpcClient } from 'devframe/client'
+export type { OgHeadTag, OgSnapshot } from '../../src/node/types'
 
 export function connectOg(options?: DevframeRpcClientOptions) {
   return connectDevframe(options)
diff --git a/plugins/og/src/spa/app/utils/metadata.ts b/plugins/og/app/app/utils/metadata.ts
similarity index 98%
rename from plugins/og/src/spa/app/utils/metadata.ts
rename to plugins/og/app/app/utils/metadata.ts
index 10f9ac8e3..520e7c56d 100644
--- a/plugins/og/src/spa/app/utils/metadata.ts
+++ b/plugins/og/app/app/utils/metadata.ts
@@ -1,4 +1,4 @@
-import type { OgHeadTag, OgSnapshot } from '../../../types'
+import type { OgHeadTag, OgSnapshot } from '../connect'
 
 type Suggestion = 'optional' | 'recommended' | 'required'
 
diff --git a/plugins/og/src/spa/index.html b/plugins/og/app/index.html
similarity index 100%
rename from plugins/og/src/spa/index.html
rename to plugins/og/app/index.html
diff --git a/plugins/og/src/spa/main.ts b/plugins/og/app/main.ts
similarity index 100%
rename from plugins/og/src/spa/main.ts
rename to plugins/og/app/main.ts
diff --git a/plugins/og/src/spa/shims.d.ts b/plugins/og/app/shims.d.ts
similarity index 100%
rename from plugins/og/src/spa/shims.d.ts
rename to plugins/og/app/shims.d.ts
diff --git a/plugins/og/app/vite.config.ts b/plugins/og/app/vite.config.ts
new file mode 100644
index 000000000..95f14d254
--- /dev/null
+++ b/plugins/og/app/vite.config.ts
@@ -0,0 +1,59 @@
+import type { Server } from 'node:http'
+import type { Plugin } from 'vite'
+import { fileURLToPath } from 'node:url'
+import createOgDevframe from '@devframes/plugin-og'
+import vue from '@vitejs/plugin-vue'
+import { initDevframe } from 'devframe/initiate'
+import { resolveBasePath } from 'devframe/internal'
+import UnoCSS from 'unocss/vite'
+import { defineConfig } from 'vite'
+import { alias } from '../../../alias'
+
+const devframe = createOgDevframe()
+// Hosted base (`/__devframes_plugin_og/`): the SPA and the dev bridge share it
+// so `document.baseURI` matches production while Vite serves the HMR panel.
+const basePath = resolveBasePath(devframe, 'hosted')
+
+/**
+ * Serve-only plugin that bridges the og node side (RPC + WebSocket +
+ * `__connection.json`) onto Vite's own dev server under the devframe base
+ * path, mounted as a **post** middleware so Vite serves the HMR SPA first and
+ * the devframe host only answers the routes it owns. Inert during `vite build`.
+ */
+function ogDevBridge(): Plugin {
+  return {
+    name: 'og-dev-bridge',
+    apply: 'serve',
+    configureServer(server) {
+      const instance = initDevframe(devframe, {
+        base: basePath,
+        distDir: false,
+        server: server.httpServer as Server,
+        auth: false,
+      })
+      return () => server.middlewares.use(instance.nodeMiddleware)
+    },
+  }
+}
+
+/**
+ * `base: './'` for the build keeps the mount path portable: the same `app`
+ * output works whether devframe serves it at `/` (standalone) or
+ * `/__devframes_plugin_og/` (mounted in a hub). `connectDevframe` resolves
+ * its connection meta relative to `document.baseURI` to match.
+ *
+ * In `vite dev` the panel is served under the devframe base path so its
+ * `document.baseURI` matches production, and {@link ogDevBridge} bridges the
+ * node side there with HMR.
+ */
+export default defineConfig(({ command }) => ({
+  base: command === 'serve' ? basePath : './',
+  root: fileURLToPath(new URL('.', import.meta.url)),
+  resolve: { alias },
+  plugins: [vue(), UnoCSS(), ogDevBridge()],
+  optimizeDeps: { exclude: ['@antfu/design'] },
+  build: {
+    outDir: fileURLToPath(new URL('../assets-pkg/dist', import.meta.url)),
+    emptyOutDir: true,
+  },
+}))
diff --git a/plugins/og/bin.mjs b/plugins/og/bin.mjs
index 04bf447de..13404f0a8 100755
--- a/plugins/og/bin.mjs
+++ b/plugins/og/bin.mjs
@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 import process from 'node:process'
-import { createOgCli } from './dist/cli.mjs'
+import { createOgCli } from './dist/node/cli.mjs'
 
 async function main() {
   await createOgCli().parse()
diff --git a/plugins/og/package.json b/plugins/og/package.json
index f3918eac0..32fb1775e 100644
--- a/plugins/og/package.json
+++ b/plugins/og/package.json
@@ -21,14 +21,13 @@
   ],
   "sideEffects": false,
   "exports": {
-    ".": "./dist/index.mjs",
-    "./client": "./dist/client/index.mjs",
-    "./cli": "./dist/cli.mjs",
-    "./node": "./dist/node/index.mjs",
-    "./rpc": "./dist/rpc/index.mjs",
+    ".": "./dist/node/index.mjs",
+    "./cli": "./dist/node/cli.mjs",
+    "./node": "./dist/node/setup.mjs",
+    "./rpc": "./dist/node/rpc/index.mjs",
     "./package.json": "./package.json"
   },
-  "types": "./dist/index.d.mts",
+  "types": "./dist/node/index.d.mts",
   "bin": {
     "devframe-og": "./bin.mjs"
   },
@@ -37,15 +36,17 @@
     "dist"
   ],
   "scripts": {
-    "build": "tsdown && vite build --config src/spa/vite.config.ts",
-    "dev": "vite --config src/spa/vite.config.ts",
+    "build": "tsdown && vite build --config app/vite.config.ts",
+    "build:app": "vite build --config app/vite.config.ts",
     "watch": "tsdown --watch",
+    "dev": "vite --config app/vite.config.ts --host",
+    "play": "pnpm run build && node playgrounds/server.mjs",
     "storybook": "storybook dev -p 6017",
     "build-storybook": "storybook build",
     "cli:build": "node bin.mjs build --out-dir dist/static",
+    "typecheck": "tsc --noEmit",
     "prepack": "turbo run build --filter=@devframes/plugin-og",
-    "test": "vitest run",
-    "typecheck": "tsc --noEmit"
+    "test": "vitest run"
   },
   "peerDependencies": {
     "@devframes/plugin-og--assets": "workspace:*",
diff --git a/plugins/og/playgrounds/server.mjs b/plugins/og/playgrounds/server.mjs
new file mode 100644
index 000000000..786b936f5
--- /dev/null
+++ b/plugins/og/playgrounds/server.mjs
@@ -0,0 +1,58 @@
+#!/usr/bin/env node
+/**
+ * Standalone demo host for the Open Graph viewer.
+ *
+ * `initDevframe` runs setup, serves the built Vue panel SPA + `__connection.json`
+ * from `assets-pkg/dist` under the devframe base path, and binds the WebSocket
+ * RPC upgrade onto our http server.
+ *
+ *   node playgrounds/server.mjs   → live WebSocket RPC (`assets-pkg/dist`)
+ */
+import { existsSync } from 'node:fs'
+import { createServer } from 'node:http'
+import process from 'node:process'
+import { fileURLToPath } from 'node:url'
+import { initDevframe } from 'devframe/initiate'
+import { getPort } from 'devframe/utils/get-port'
+import { H3, toNodeHandler } from 'h3'
+import { resolve } from 'pathe'
+import createOgDevframe from '../src/node/index.ts'
+
+const HERE = fileURLToPath(new URL('.', import.meta.url))
+const ROOT = resolve(HERE, '..')
+const panelDir = resolve(ROOT, 'assets-pkg/dist')
+
+const devframe = createOgDevframe()
+const basePath = devframe.basePath
+
+async function main() {
+  if (!existsSync(resolve(panelDir, 'index.html'))) {
+    console.error('\n[og-viewer playground] missing assets-pkg/dist/index.html\n  → run `pnpm -C plugins/og build` first.\n')
+    process.exit(1)
+  }
+
+  const bindHost = '0.0.0.0'
+  const port = await getPort({ host: bindHost, port: 4416 })
+  const origin = `http://localhost:${port}`
+
+  const app = new H3()
+  const server = createServer(toNodeHandler(app))
+  const instance = initDevframe(devframe, {
+    base: basePath,
+    distDir: panelDir,
+    app,
+    server,
+    host: bindHost,
+    origin,
+    auth: false,
+  })
+  await new Promise(r => server.listen(port, bindHost, r))
+  await instance.ready
+
+  process.stdout.write(`\n  Open Graph viewer: dev (live WebSocket RPC)\n  ▸ panel:  ${origin}${basePath}\n\n`)
+}
+
+main().catch((error) => {
+  console.error(error)
+  process.exit(1)
+})
diff --git a/plugins/og/src/index.ts b/plugins/og/src/index.ts
deleted file mode 100644
index ecf691eda..000000000
--- a/plugins/og/src/index.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import type { DevframeDefinition, RemoteAssets } from 'devframe'
-import type { OgFetch } from './types'
-import { defineDevframe } from 'devframe'
-import pkg from '../package.json' with { type: 'json' }
-import { setupOg } from './node/index'
-
-const DEFAULT_ID = 'devframes_plugin_og'
-// The SPA ships in the lockstep `@devframes/plugin-og--assets` package,
-// served on demand through devframe's remote-assets back-proxy. The definition's
-// `importMetaUrl` (below) supplies the default `resolveFrom`, so a locally
-// installed copy (a workspace link here) is served with zero network.
-const remoteAssets: RemoteAssets = {
-  package: `${pkg.name}--assets`,
-  version: pkg.version,
-}
-
-export interface OgDevframeOptions {
-  id?: string
-  name?: string
-  icon?: string
-  basePath?: string
-  port?: number
-  /** Require the trust handshake. Enabled by default for the network-capable backend. */
-  auth?: boolean
-  /** URL inspected when the UI does not supply one and baked by `build`. */
-  defaultUrl?: string
-  /** Override the request implementation, primarily for custom transports and tests. */
-  fetch?: OgFetch
-}
-
-/**
- * Create the standalone Open Graph viewer definition.
- *
- * @experimental This plugin is experimental and may change without a major
- * version bump until it stabilizes.
- */
-export function createOgDevframe(options: OgDevframeOptions = {}): DevframeDefinition {
-  const id = options.id ?? DEFAULT_ID
-  return defineDevframe({
-    id,
-    name: options.name ?? 'Open Graph',
-    version: pkg.version,
-    packageName: pkg.name,
-    importMetaUrl: import.meta.url,
-    homepage: pkg.homepage,
-    description: pkg.description,
-    icon: options.icon ?? 'ph:image-square-duotone',
-    basePath: options.basePath,
-    cli: {
-      command: id,
-      port: options.port ?? 9016,
-      distDir: remoteAssets,
-      auth: options.auth ?? true,
-    },
-    dock: { category: '~builtin' },
-    setup(ctx) {
-      setupOg(ctx, { defaultUrl: options.defaultUrl, fetch: options.fetch })
-    },
-  })
-}
-
-export default createOgDevframe
-export type { OgFetch, OgHeadTag, OgHeadTagName, OgResolveInput, OgSnapshot } from './types'
diff --git a/plugins/og/src/cli.ts b/plugins/og/src/node/cli.ts
similarity index 100%
rename from plugins/og/src/cli.ts
rename to plugins/og/src/node/cli.ts
diff --git a/plugins/og/src/diagnostics.ts b/plugins/og/src/node/diagnostics.ts
similarity index 100%
rename from plugins/og/src/diagnostics.ts
rename to plugins/og/src/node/diagnostics.ts
diff --git a/plugins/og/src/node/index.ts b/plugins/og/src/node/index.ts
index c6545b0f4..f7bbc931e 100644
--- a/plugins/og/src/node/index.ts
+++ b/plugins/og/src/node/index.ts
@@ -1,10 +1,63 @@
-import type { DevframeNodeContext } from 'devframe'
-import type { ResolveMetadataOptions } from '../rpc/functions/resolve-metadata'
-import { createResolveMetadataRpc, resolveMetadata } from '../rpc/functions/resolve-metadata'
+import type { DevframeDefinition, RemoteAssets } from 'devframe'
+import type { OgFetch } from './types'
+import { defineDevframe } from 'devframe'
+import pkg from '../../package.json' with { type: 'json' }
+import { setupOg } from './setup'
 
-export function setupOg(ctx: DevframeNodeContext, options: ResolveMetadataOptions = {}): void {
-  const hasOptions = options.defaultUrl !== undefined || options.fetch !== undefined
-  ctx.rpc.register(hasOptions ? createResolveMetadataRpc(options) : resolveMetadata)
+const DEFAULT_ID = 'devframes_plugin_og'
+// The SPA ships in the lockstep `@devframes/plugin-og--assets` package,
+// served on demand through devframe's remote-assets back-proxy. The definition's
+// `importMetaUrl` (below) supplies the default `resolveFrom`, so a locally
+// installed copy (a workspace link here) is served with zero network.
+const remoteAssets: RemoteAssets = {
+  package: `${pkg.name}--assets`,
+  version: pkg.version,
 }
 
-export { fetchOgMetadata, parseOgMetadata } from './metadata'
+export interface OgDevframeOptions {
+  id?: string
+  name?: string
+  icon?: string
+  basePath?: string
+  port?: number
+  /** Require the trust handshake. Enabled by default for the network-capable backend. */
+  auth?: boolean
+  /** URL inspected when the UI does not supply one and baked by `build`. */
+  defaultUrl?: string
+  /** Override the request implementation, primarily for custom transports and tests. */
+  fetch?: OgFetch
+}
+
+/**
+ * Create the standalone Open Graph viewer definition.
+ *
+ * @experimental This plugin is experimental and may change without a major
+ * version bump until it stabilizes.
+ */
+export function createOgDevframe(options: OgDevframeOptions = {}): DevframeDefinition {
+  const id = options.id ?? DEFAULT_ID
+  return defineDevframe({
+    id,
+    name: options.name ?? 'Open Graph',
+    version: pkg.version,
+    packageName: pkg.name,
+    importMetaUrl: import.meta.url,
+    homepage: pkg.homepage,
+    description: pkg.description,
+    icon: options.icon ?? 'ph:image-square-duotone',
+    basePath: options.basePath,
+    cli: {
+      command: id,
+      port: options.port ?? 9016,
+      distDir: remoteAssets,
+      auth: options.auth ?? true,
+    },
+    dock: { category: '~builtin' },
+    setup(ctx) {
+      setupOg(ctx, { defaultUrl: options.defaultUrl, fetch: options.fetch })
+    },
+  })
+}
+
+export default createOgDevframe
+export type { OgFetch, OgHeadTag, OgHeadTagName, OgResolveInput, OgSnapshot } from './types'
diff --git a/plugins/og/src/node/metadata.ts b/plugins/og/src/node/metadata.ts
index 0f55c0c10..4586d5b50 100644
--- a/plugins/og/src/node/metadata.ts
+++ b/plugins/og/src/node/metadata.ts
@@ -1,6 +1,6 @@
-import type { OgFetch, OgHeadTag, OgSnapshot } from '../types'
+import type { OgFetch, OgHeadTag, OgSnapshot } from './types'
 import { parse } from 'parse5'
-import { diagnostics } from '../diagnostics'
+import { diagnostics } from './diagnostics'
 
 const MAX_HTML_BYTES = 2 * 1024 * 1024
 const URL_TAGS = new Set([
diff --git a/plugins/og/src/rpc/functions/resolve-metadata.ts b/plugins/og/src/node/rpc/functions/resolve-metadata.ts
similarity index 97%
rename from plugins/og/src/rpc/functions/resolve-metadata.ts
rename to plugins/og/src/node/rpc/functions/resolve-metadata.ts
index c2ba3e85c..7bf2ecf38 100644
--- a/plugins/og/src/rpc/functions/resolve-metadata.ts
+++ b/plugins/og/src/node/rpc/functions/resolve-metadata.ts
@@ -3,7 +3,7 @@ import type { OgFetch, OgSnapshot } from '../../types'
 import { createDefineWrapperWithContext } from 'devframe/rpc'
 import { s } from 'devframe/utils/simple-schema'
 import { diagnostics } from '../../diagnostics'
-import { fetchOgMetadata } from '../../node/metadata'
+import { fetchOgMetadata } from '../../metadata'
 
 export interface ResolveMetadataOptions {
   defaultUrl?: string
diff --git a/plugins/og/src/rpc/index.ts b/plugins/og/src/node/rpc/index.ts
similarity index 100%
rename from plugins/og/src/rpc/index.ts
rename to plugins/og/src/node/rpc/index.ts
diff --git a/plugins/og/src/node/setup.ts b/plugins/og/src/node/setup.ts
new file mode 100644
index 000000000..81e105747
--- /dev/null
+++ b/plugins/og/src/node/setup.ts
@@ -0,0 +1,10 @@
+import type { DevframeNodeContext } from 'devframe'
+import type { ResolveMetadataOptions } from './rpc/functions/resolve-metadata'
+import { createResolveMetadataRpc, resolveMetadata } from './rpc/functions/resolve-metadata'
+
+export function setupOg(ctx: DevframeNodeContext, options: ResolveMetadataOptions = {}): void {
+  const hasOptions = options.defaultUrl !== undefined || options.fetch !== undefined
+  ctx.rpc.register(hasOptions ? createResolveMetadataRpc(options) : resolveMetadata)
+}
+
+export { fetchOgMetadata, parseOgMetadata } from './metadata'
diff --git a/plugins/og/src/types.ts b/plugins/og/src/node/types.ts
similarity index 100%
rename from plugins/og/src/types.ts
rename to plugins/og/src/node/types.ts
diff --git a/plugins/og/src/spa/vite.config.ts b/plugins/og/src/spa/vite.config.ts
deleted file mode 100644
index 77130d9df..000000000
--- a/plugins/og/src/spa/vite.config.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { fileURLToPath } from 'node:url'
-import { devframeVite } from '@devframes/vite/single'
-import vue from '@vitejs/plugin-vue'
-import UnoCSS from 'unocss/vite'
-import { defineConfig } from 'vite'
-import { alias } from '../../../../alias'
-import createOgDevframe from '../index'
-
-export default defineConfig({
-  base: './',
-  root: fileURLToPath(new URL('.', import.meta.url)),
-  resolve: { alias },
-  plugins: [
-    vue(),
-    UnoCSS(),
-    devframeVite(createOgDevframe(), { bridge: true, base: '/' }),
-  ],
-  optimizeDeps: { exclude: ['@antfu/design'] },
-  build: {
-    outDir: fileURLToPath(new URL('../../assets-pkg/dist', import.meta.url)),
-    emptyOutDir: true,
-  },
-})
diff --git a/plugins/og/test/social-card.test.ts b/plugins/og/test/social-card.test.ts
index f18ee9aa1..ce07f85ea 100644
--- a/plugins/og/test/social-card.test.ts
+++ b/plugins/og/test/social-card.test.ts
@@ -1,6 +1,6 @@
-import type { OgSnapshot } from '../src/types'
+import type { OgSnapshot } from '../src/node/types'
 import { describe, expect, it } from 'vitest'
-import { toSocialCard } from '../src/spa/app/utils/metadata'
+import { toSocialCard } from '../app/app/utils/metadata'
 
 const snapshot: OgSnapshot = {
   requestedUrl: 'https://example.com/article',
diff --git a/plugins/og/tsconfig.json b/plugins/og/tsconfig.json
index 9c7effe1f..826793da2 100644
--- a/plugins/og/tsconfig.json
+++ b/plugins/og/tsconfig.json
@@ -8,5 +8,5 @@
     "noEmit": true,
     "isolatedDeclarations": false
   },
-  "include": ["src", "test", "bin.mjs"]
+  "include": ["src", "app", "test", "playgrounds", "bin.mjs"]
 }
diff --git a/plugins/og/tsdown.config.ts b/plugins/og/tsdown.config.ts
index 1465c436d..18d940d25 100644
--- a/plugins/og/tsdown.config.ts
+++ b/plugins/og/tsdown.config.ts
@@ -2,32 +2,31 @@ import { defineConfig } from 'tsdown'
 
 const tsconfig = '../../tsconfig.base.json'
 
-const clientEntries = {
-  'client/index': 'src/client/index.ts',
-}
-
-const serverEntries = {
-  'index': 'src/index.ts',
-  'cli': 'src/cli.ts',
+// Node-side entries: the devframe definition (root), the setup module, the
+// CLI adapter, and the RPC registry.
+const nodeEntries = {
   'node/index': 'src/node/index.ts',
-  'rpc/index': 'src/rpc/index.ts',
+  'node/setup': 'src/node/setup.ts',
+  'node/cli': 'src/node/cli.ts',
+  'node/rpc/index': 'src/node/rpc/index.ts',
 }
 
+/**
+ * Two configs keep the graphs isolated:
+ * 1. node runtime (`clean: true`): clears dist/;
+ * 2. dts in one graph so the `declare module 'devframe'` RPC augmentation
+ *    resolves once.
+ *
+ * The Vue panel SPA (`app/`) builds separately with Vite into the lockstep
+ * `@devframes/plugin-og--assets` package.
+ */
 export default defineConfig([
   {
     clean: true,
-    platform: 'browser',
-    tsconfig,
-    dts: false,
-    outExtensions: () => ({ js: '.mjs' }),
-    entry: clientEntries,
-  },
-  {
-    clean: false,
     platform: 'node',
     tsconfig,
     dts: false,
-    entry: serverEntries,
+    entry: nodeEntries,
   },
   {
     clean: false,
@@ -35,6 +34,6 @@ export default defineConfig([
     tsconfig,
     dts: { emitDtsOnly: true },
     outExtensions: () => ({ dts: '.d.mts' }),
-    entry: { ...clientEntries, ...serverEntries },
+    entry: nodeEntries,
   },
 ])
diff --git a/plugins/terminals/.storybook/main.ts b/plugins/terminals/.storybook/main.ts
index f863e4eac..787ba4226 100644
--- a/plugins/terminals/.storybook/main.ts
+++ b/plugins/terminals/.storybook/main.ts
@@ -5,7 +5,7 @@ import { mergeConfig } from 'vite'
 import { alias } from '../../../alias'
 
 const config: StorybookConfig = {
-  stories: ['../src/**/*.stories.@(ts|tsx|svelte)'],
+  stories: ['../{src,app}/**/*.stories.@(ts)'],
   framework: {
     name: '@storybook/svelte-vite',
     options: {},
diff --git a/plugins/terminals/.storybook/preview.ts b/plugins/terminals/.storybook/preview.ts
index f845aa50b..d3964148e 100644
--- a/plugins/terminals/.storybook/preview.ts
+++ b/plugins/terminals/.storybook/preview.ts
@@ -1,7 +1,7 @@
 import type { Decorator, Preview } from '@storybook/svelte-vite'
 import 'virtual:uno.css'
 import '@antfu/design/styles.css'
-import '../src/client/styles.css'
+import '../app/client/styles.css'
 
 // Drive the shared `@antfu/design` tokens off the toolbar theme toggle: dark mode
 // is the `.dark` class on `<html>`, and the canvas takes the semantic
diff --git a/plugins/terminals/src/client/App.stories.ts b/plugins/terminals/app/client/App.stories.ts
similarity index 100%
rename from plugins/terminals/src/client/App.stories.ts
rename to plugins/terminals/app/client/App.stories.ts
diff --git a/plugins/terminals/src/client/App.svelte b/plugins/terminals/app/client/App.svelte
similarity index 99%
rename from plugins/terminals/src/client/App.svelte
rename to plugins/terminals/app/client/App.svelte
index 7e16f3afc..0f845c227 100644
--- a/plugins/terminals/src/client/App.svelte
+++ b/plugins/terminals/app/client/App.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { DevframeConnectionStatus, DevframeRpcClient } from 'devframe/client'
-  import type { TerminalPreset, TerminalSessionInfo } from '../types'
+  import type { TerminalPreset, TerminalSessionInfo } from '@devframes/plugin-terminals/types'
   import type { DotState } from './design'
   import {
     button,
@@ -20,7 +20,7 @@
     toolbar,
   } from './design'
   import { onMount } from 'svelte'
-  import { DOCKS_ACTIVE_STATE_KEY, PLUGIN_ID, PRESETS_STATE_KEY, SESSIONS_STATE_KEY } from '../constants'
+  import { DOCKS_ACTIVE_STATE_KEY, PLUGIN_ID, PRESETS_STATE_KEY, SESSIONS_STATE_KEY } from '@devframes/plugin-terminals/constants'
   import TerminalView from './TerminalView.svelte'
 
   const { rpc, autostart } = $props<{
diff --git a/plugins/terminals/src/client/TerminalView.svelte b/plugins/terminals/app/client/TerminalView.svelte
similarity index 96%
rename from plugins/terminals/src/client/TerminalView.svelte
rename to plugins/terminals/app/client/TerminalView.svelte
index bd34763ad..e0d91aa89 100644
--- a/plugins/terminals/src/client/TerminalView.svelte
+++ b/plugins/terminals/app/client/TerminalView.svelte
@@ -3,8 +3,8 @@
   import { Terminal, type ITheme } from '@xterm/xterm'
   import { FitAddon } from '@xterm/addon-fit'
   import type { DevframeRpcClient } from 'devframe/client'
-  import type { TerminalSessionInfo } from '../types'
-  import { TERMINAL_STREAM_CHANNEL } from '../constants'
+  import type { TerminalSessionInfo } from '@devframes/plugin-terminals/types'
+  import { TERMINAL_STREAM_CHANNEL } from '@devframes/plugin-terminals/constants'
   import '@xterm/xterm/css/xterm.css'
 
   let { rpc, info, active, isDark } = $props<{
diff --git a/plugins/git/src/client/lib/design.ts b/plugins/terminals/app/client/design.ts
similarity index 75%
rename from plugins/git/src/client/lib/design.ts
rename to plugins/terminals/app/client/design.ts
index af3b99e68..d8e49c73a 100644
--- a/plugins/git/src/client/lib/design.ts
+++ b/plugins/terminals/app/client/design.ts
@@ -1,3 +1,3 @@
 // Re-exports the shared devframe class-helper builders (see
 // `design/design.ts`) so this surface stays in lockstep with every other.
-export * from '../../../../../design/design'
+export * from '../../../../design/design'
diff --git a/plugins/terminals/src/client/index.ts b/plugins/terminals/app/client/index.ts
similarity index 82%
rename from plugins/terminals/src/client/index.ts
rename to plugins/terminals/app/client/index.ts
index 5a7402496..dcdfdc833 100644
--- a/plugins/terminals/src/client/index.ts
+++ b/plugins/terminals/app/client/index.ts
@@ -39,5 +39,5 @@ export async function mountTerminals(
   }
 }
 
-export { TERMINAL_STREAM_CHANNEL } from '../constants'
-export type { TerminalPreset, TerminalSessionInfo } from '../types'
+export { TERMINAL_STREAM_CHANNEL } from '@devframes/plugin-terminals/constants'
+export type { TerminalPreset, TerminalSessionInfo } from '@devframes/plugin-terminals/types'
diff --git a/plugins/terminals/src/client/styles.css b/plugins/terminals/app/client/styles.css
similarity index 100%
rename from plugins/terminals/src/client/styles.css
rename to plugins/terminals/app/client/styles.css
diff --git a/plugins/terminals/src/client/vite.config.ts b/plugins/terminals/app/client/vite.config.ts
similarity index 100%
rename from plugins/terminals/src/client/vite.config.ts
rename to plugins/terminals/app/client/vite.config.ts
diff --git a/plugins/terminals/src/env.d.ts b/plugins/terminals/app/env.d.ts
similarity index 100%
rename from plugins/terminals/src/env.d.ts
rename to plugins/terminals/app/env.d.ts
diff --git a/plugins/terminals/src/spa/index.html b/plugins/terminals/app/index.html
similarity index 100%
rename from plugins/terminals/src/spa/index.html
rename to plugins/terminals/app/index.html
diff --git a/plugins/terminals/src/spa/main.ts b/plugins/terminals/app/main.ts
similarity index 83%
rename from plugins/terminals/src/spa/main.ts
rename to plugins/terminals/app/main.ts
index cb9257ac0..d545c981c 100644
--- a/plugins/terminals/src/spa/main.ts
+++ b/plugins/terminals/app/main.ts
@@ -1,4 +1,4 @@
-import { mountTerminals } from '../client/index'
+import { mountTerminals } from './client/index'
 
 const app = document.getElementById('app')
 if (!app)
diff --git a/plugins/terminals/app/vite.config.ts b/plugins/terminals/app/vite.config.ts
new file mode 100644
index 000000000..40f8adc8e
--- /dev/null
+++ b/plugins/terminals/app/vite.config.ts
@@ -0,0 +1,59 @@
+import type { Server } from 'node:http'
+import type { Plugin } from 'vite'
+import { fileURLToPath } from 'node:url'
+import createTerminalsDevframe from '@devframes/plugin-terminals'
+import { svelte } from '@sveltejs/vite-plugin-svelte'
+import { initDevframe } from 'devframe/initiate'
+import { resolveBasePath } from 'devframe/internal'
+import UnoCSS from 'unocss/vite'
+import { defineConfig } from 'vite'
+import { alias } from '../../../alias'
+
+const devframe = createTerminalsDevframe()
+// Hosted base (`/__devframes_plugin_terminals/`): the SPA and the dev bridge
+// share it so `document.baseURI` matches production while Vite serves the HMR
+// panel.
+const basePath = resolveBasePath(devframe, 'hosted')
+
+/**
+ * Serve-only plugin that bridges the terminals node side (RPC + WebSocket +
+ * `__connection.json`) onto Vite's own dev server under the devframe base
+ * path, mounted as a **post** middleware so Vite serves the HMR SPA first and
+ * the devframe host only answers the routes it owns. Inert during `vite build`.
+ */
+function terminalsDevBridge(): Plugin {
+  return {
+    name: 'terminals-dev-bridge',
+    apply: 'serve',
+    configureServer(server) {
+      const instance = initDevframe(devframe, {
+        base: basePath,
+        distDir: false,
+        server: server.httpServer as Server,
+        auth: false,
+      })
+      return () => server.middlewares.use(instance.nodeMiddleware)
+    },
+  }
+}
+
+/**
+ * `base: './'` for the build keeps the mount path portable: the same `app`
+ * output works whether devframe serves it at `/` (standalone) or
+ * `/__devframes_plugin_terminals/` (mounted in a hub). `connectDevframe`
+ * resolves its connection meta relative to `document.baseURI` to match.
+ *
+ * In `vite dev` the panel is served under the devframe base path so its
+ * `document.baseURI` matches production, and {@link terminalsDevBridge} bridges
+ * the node side there with HMR.
+ */
+export default defineConfig(({ command }) => ({
+  base: command === 'serve' ? basePath : './',
+  root: fileURLToPath(new URL('.', import.meta.url)),
+  resolve: { alias },
+  plugins: [svelte(), UnoCSS(), terminalsDevBridge()],
+  build: {
+    outDir: fileURLToPath(new URL('../assets-pkg/dist', import.meta.url)),
+    emptyOutDir: true,
+  },
+}))
diff --git a/plugins/terminals/bin.mjs b/plugins/terminals/bin.mjs
index 47ee97da3..7272609fa 100755
--- a/plugins/terminals/bin.mjs
+++ b/plugins/terminals/bin.mjs
@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 import process from 'node:process'
-import { createTerminalsCli } from './dist/cli.mjs'
+import { createTerminalsCli } from './dist/node/cli.mjs'
 
 async function main() {
   const cli = createTerminalsCli()
diff --git a/plugins/terminals/package.json b/plugins/terminals/package.json
index 61fd45d5f..22f2ab239 100644
--- a/plugins/terminals/package.json
+++ b/plugins/terminals/package.json
@@ -21,17 +21,17 @@
   ],
   "sideEffects": false,
   "exports": {
-    ".": "./dist/index.mjs",
-    "./cli": "./dist/cli.mjs",
+    ".": "./dist/node/index.mjs",
+    "./cli": "./dist/node/cli.mjs",
     "./client": "./dist/client/index.mjs",
-    "./constants": "./dist/constants.mjs",
-    "./node": "./dist/node/index.mjs",
-    "./rpc": "./dist/rpc/index.mjs",
-    "./types": "./dist/types.mjs",
-    "./vite": "./dist/vite.mjs",
+    "./constants": "./dist/node/constants.mjs",
+    "./node": "./dist/node/setup.mjs",
+    "./rpc": "./dist/node/rpc/index.mjs",
+    "./types": "./dist/node/types.mjs",
+    "./vite": "./dist/node/vite.mjs",
     "./package.json": "./package.json"
   },
-  "types": "./dist/index.d.mts",
+  "types": "./dist/node/index.d.mts",
   "bin": {
     "devframe-terminals": "./bin.mjs"
   },
@@ -40,9 +40,12 @@
     "dist"
   ],
   "scripts": {
-    "build": "tsdown && vite build --config src/client/vite.config.ts && vite build --config src/spa/vite.config.ts",
+    "build": "tsdown && vite build --config app/client/vite.config.ts && vite build --config app/vite.config.ts",
+    "build:client": "vite build --config app/client/vite.config.ts",
+    "build:app": "vite build --config app/vite.config.ts",
     "watch": "tsdown --watch",
-    "dev": "node bin.mjs",
+    "dev": "vite --config app/vite.config.ts --host",
+    "play": "pnpm run build && node playgrounds/server.mjs",
     "storybook": "storybook dev -p 6014",
     "build-storybook": "storybook build",
     "test": "vitest run",
diff --git a/plugins/terminals/playgrounds/server.mjs b/plugins/terminals/playgrounds/server.mjs
new file mode 100644
index 000000000..0378ac19c
--- /dev/null
+++ b/plugins/terminals/playgrounds/server.mjs
@@ -0,0 +1,58 @@
+#!/usr/bin/env node
+/**
+ * Standalone demo host for the terminals panel.
+ *
+ * `initDevframe` runs setup, serves the built Svelte panel SPA + `__connection.json`
+ * from `assets-pkg/dist` under the devframe base path, and binds the WebSocket
+ * RPC upgrade onto our http server.
+ *
+ *   node playgrounds/server.mjs   → live WebSocket RPC (`assets-pkg/dist`)
+ */
+import { existsSync } from 'node:fs'
+import { createServer } from 'node:http'
+import process from 'node:process'
+import { fileURLToPath } from 'node:url'
+import { initDevframe } from 'devframe/initiate'
+import { getPort } from 'devframe/utils/get-port'
+import { H3, toNodeHandler } from 'h3'
+import { resolve } from 'pathe'
+import createTerminalsDevframe from '../src/node/index.ts'
+
+const HERE = fileURLToPath(new URL('.', import.meta.url))
+const ROOT = resolve(HERE, '..')
+const panelDir = resolve(ROOT, 'assets-pkg/dist')
+
+const devframe = createTerminalsDevframe({ auth: false })
+const basePath = devframe.basePath
+
+async function main() {
+  if (!existsSync(resolve(panelDir, 'index.html'))) {
+    console.error('\n[terminals playground] missing assets-pkg/dist/index.html\n  → run `pnpm -C plugins/terminals build` first.\n')
+    process.exit(1)
+  }
+
+  const bindHost = '0.0.0.0'
+  const port = await getPort({ host: bindHost, port: 4411 })
+  const origin = `http://localhost:${port}`
+
+  const app = new H3()
+  const server = createServer(toNodeHandler(app))
+  const instance = initDevframe(devframe, {
+    base: basePath,
+    distDir: panelDir,
+    app,
+    server,
+    host: bindHost,
+    origin,
+    auth: false,
+  })
+  await new Promise(r => server.listen(port, bindHost, r))
+  await instance.ready
+
+  process.stdout.write(`\n  Terminals: dev (live WebSocket RPC)\n  ▸ panel:  ${origin}${basePath}\n\n`)
+}
+
+main().catch((error) => {
+  console.error(error)
+  process.exit(1)
+})
diff --git a/plugins/terminals/src/index.ts b/plugins/terminals/src/index.ts
deleted file mode 100644
index 820246cef..000000000
--- a/plugins/terminals/src/index.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-import type { DevframeDefinition, RemoteAssets } from 'devframe'
-import type { TerminalsOptions } from './types'
-import { defineDevframe } from 'devframe'
-import pkg from '../package.json' with { type: 'json' }
-import {
-  DEFAULT_PORT,
-  PLUGIN_ID,
-  PRESETS_STATE_KEY,
-  SESSIONS_STATE_KEY,
-  TERMINAL_STREAM_CHANNEL,
-} from './constants'
-
-export type * from './types'
-export {
-  DEFAULT_PORT,
-  PLUGIN_ID,
-  PRESETS_STATE_KEY,
-  SESSIONS_STATE_KEY,
-  TERMINAL_STREAM_CHANNEL,
-}
-
-/**
- * Build a {@link DevframeDefinition} for the terminals panel. The same
- * definition runs standalone (`createCac`), mounts into a Vite host
- * (`/vite`), or docks inside a hub, since its `setup` only relies on the core
- * devframe RPC surface.
- *
- * @experimental This plugin is experimental and may change without a major
- * version bump until it stabilizes.
- *
- * @example
- * ```ts
- * import { createTerminalsDevframe } from '@devframes/plugin-terminals'
- *
- * export default createTerminalsDevframe({
- *   presets: [{ id: 'dev', title: 'pnpm dev', command: 'pnpm', args: ['dev'] }],
- * })
- * ```
- */
-// The SPA ships in the lockstep `@devframes/plugin-terminals--assets` package,
-// served on demand through devframe's remote-assets back-proxy. The definition's
-// `importMetaUrl` (below) supplies the default `resolveFrom`, so a locally
-// installed copy (a workspace link here) is served with zero network. The panel
-// `clientScript` bundle (`dist/client`) stays in this node package.
-const remoteAssets: RemoteAssets = {
-  package: `${pkg.name}--assets`,
-  version: pkg.version,
-}
-
-export function createTerminalsDevframe(options: TerminalsOptions = {}): DevframeDefinition {
-  const distDir = options.distDir ?? remoteAssets
-
-  return defineDevframe({
-    id: PLUGIN_ID,
-    name: 'Terminals',
-    version: pkg.version,
-    packageName: pkg.name,
-    importMetaUrl: import.meta.url,
-    homepage: pkg.homepage,
-    description: pkg.description,
-    icon: 'ph:terminal-window-duotone',
-    /**
-     * Leave undefined so `resolveBasePath` picks `/` standalone and
-     * `/__<id>/` when hosted. Authors override via `options.basePath`.
-     */
-    basePath: options.basePath,
-    cli: {
-      command: options.command ?? 'devframe-terminals',
-      port: options.port ?? DEFAULT_PORT,
-      distDir,
-      /**
-       * Gate the standalone server by default, since shell access is sensitive.
-       * `maybeOpenBrowser` folds the current OTP into the `--open` URL so
-       * the tab lands already trusted.
-       */
-      auth: options.auth ?? true,
-    },
-    dock: {
-      category: '~builtin',
-    },
-    async setup(ctx) {
-      const { setupTerminals } = await import('./node/index')
-      await setupTerminals(ctx, options)
-    },
-  })
-}
-
-export default createTerminalsDevframe
diff --git a/plugins/terminals/src/node/backend.ts b/plugins/terminals/src/node/backend.ts
index ee0a1c8e8..2ad6d8052 100644
--- a/plugins/terminals/src/node/backend.ts
+++ b/plugins/terminals/src/node/backend.ts
@@ -1,6 +1,6 @@
 import type { Buffer } from 'node:buffer'
 import type { IPty } from 'zigpty'
-import type { TerminalBackend } from '../types'
+import type { TerminalBackend } from './types'
 import { spawn as spawnChild } from 'node:child_process'
 import { diagnostics } from './diagnostics'
 
diff --git a/plugins/terminals/src/cli.ts b/plugins/terminals/src/node/cli.ts
similarity index 100%
rename from plugins/terminals/src/cli.ts
rename to plugins/terminals/src/node/cli.ts
diff --git a/plugins/terminals/src/constants.ts b/plugins/terminals/src/node/constants.ts
similarity index 100%
rename from plugins/terminals/src/constants.ts
rename to plugins/terminals/src/node/constants.ts
diff --git a/plugins/terminals/src/node/index.ts b/plugins/terminals/src/node/index.ts
index 49eb3e2ca..84cd41cec 100644
--- a/plugins/terminals/src/node/index.ts
+++ b/plugins/terminals/src/node/index.ts
@@ -1,33 +1,88 @@
-import type { DevframeNodeContext } from 'devframe'
-import type { TerminalsOptions } from '../types'
-import { serverFunctions } from '../rpc/index'
-import { setTerminalManager } from './context'
-import { TerminalManager } from './manager'
+import type { DevframeDefinition, RemoteAssets } from 'devframe'
+import type { TerminalsOptions } from './types'
+import { defineDevframe } from 'devframe'
+import pkg from '../../package.json' with { type: 'json' }
+import {
+  DEFAULT_PORT,
+  PLUGIN_ID,
+  PRESETS_STATE_KEY,
+  SESSIONS_STATE_KEY,
+  TERMINAL_STREAM_CHANNEL,
+} from './constants'
 
-export { isPtyAvailable } from './backend'
-export * from './context'
-export { diagnostics } from './diagnostics'
-export { TerminalManager } from './manager'
+export type * from './types'
+export {
+  DEFAULT_PORT,
+  PLUGIN_ID,
+  PRESETS_STATE_KEY,
+  SESSIONS_STATE_KEY,
+  TERMINAL_STREAM_CHANNEL,
+}
 
 /**
- * Wire the terminals subsystem onto a devframe node context: create the
- * {@link TerminalManager}, publish presets + the session list into shared
- * state, and register the control RPC functions. Returns the manager so
- * callers can spawn sessions or dispose it on shutdown.
+ * Build a {@link DevframeDefinition} for the terminals panel. The same
+ * definition runs standalone (`createCac`), mounts into a Vite host
+ * (`/vite`), or docks inside a hub, since its `setup` only relies on the core
+ * devframe RPC surface.
+ *
+ * @experimental This plugin is experimental and may change without a major
+ * version bump until it stabilizes.
+ *
+ * @example
+ * ```ts
+ * import { createTerminalsDevframe } from '@devframes/plugin-terminals'
  *
- * Works in any devframe runtime (CLI, Vite, build), since it only depends on the
- * core `ctx.rpc` streaming + shared-state surface, not on the hub.
+ * export default createTerminalsDevframe({
+ *   presets: [{ id: 'dev', title: 'pnpm dev', command: 'pnpm', args: ['dev'] }],
+ * })
+ * ```
  */
-export async function setupTerminals(
-  ctx: DevframeNodeContext,
-  options: TerminalsOptions = {},
-): Promise<TerminalManager> {
-  const manager = new TerminalManager(ctx, options)
-  setTerminalManager(ctx, manager)
-  await manager.init()
+// The SPA ships in the lockstep `@devframes/plugin-terminals--assets` package,
+// served on demand through devframe's remote-assets back-proxy. The definition's
+// `importMetaUrl` (below) supplies the default `resolveFrom`, so a locally
+// installed copy (a workspace link here) is served with zero network. The panel
+// `clientScript` bundle (`dist/client`) stays in this node package.
+const remoteAssets: RemoteAssets = {
+  package: `${pkg.name}--assets`,
+  version: pkg.version,
+}
 
-  for (const fn of serverFunctions)
-    ctx.rpc.register(fn)
+export function createTerminalsDevframe(options: TerminalsOptions = {}): DevframeDefinition {
+  const distDir = options.distDir ?? remoteAssets
 
-  return manager
+  return defineDevframe({
+    id: PLUGIN_ID,
+    name: 'Terminals',
+    version: pkg.version,
+    packageName: pkg.name,
+    importMetaUrl: import.meta.url,
+    homepage: pkg.homepage,
+    description: pkg.description,
+    icon: 'ph:terminal-window-duotone',
+    /**
+     * Leave undefined so `resolveBasePath` picks `/` standalone and
+     * `/__<id>/` when hosted. Authors override via `options.basePath`.
+     */
+    basePath: options.basePath,
+    cli: {
+      command: options.command ?? 'devframe-terminals',
+      port: options.port ?? DEFAULT_PORT,
+      distDir,
+      /**
+       * Gate the standalone server by default, since shell access is sensitive.
+       * `maybeOpenBrowser` folds the current OTP into the `--open` URL so
+       * the tab lands already trusted.
+       */
+      auth: options.auth ?? true,
+    },
+    dock: {
+      category: '~builtin',
+    },
+    async setup(ctx) {
+      const { setupTerminals } = await import('./setup')
+      await setupTerminals(ctx, options)
+    },
+  })
 }
+
+export default createTerminalsDevframe
diff --git a/plugins/terminals/src/node/manager.ts b/plugins/terminals/src/node/manager.ts
index 27c857d5e..648f80cc6 100644
--- a/plugins/terminals/src/node/manager.ts
+++ b/plugins/terminals/src/node/manager.ts
@@ -1,6 +1,7 @@
 import type { DevframeNodeContext, RpcStreamingChannel } from 'devframe'
 import type { SharedState } from 'devframe/utils/shared-state'
 import type { StreamSink } from 'devframe/utils/streaming-channel'
+import type { TerminalProcess } from './backend'
 import type {
   SpawnRequest,
   TerminalMode,
@@ -9,11 +10,11 @@ import type {
   TerminalsOptions,
   TerminalsSharedState,
   TerminalStatus,
-} from '../types'
-import type { TerminalProcess } from './backend'
+} from './types'
 import process from 'node:process'
 import { nanoid } from 'devframe/utils/nanoid'
 import { OSCInspector } from 'zigpty/osc'
+import { isPtyAvailable, spawnBackend } from './backend'
 import {
   DEFAULT_COLS,
   DEFAULT_ROWS,
@@ -22,8 +23,7 @@ import {
   PRESETS_STATE_KEY,
   SESSIONS_STATE_KEY,
   TERMINAL_STREAM_CHANNEL,
-} from '../constants'
-import { isPtyAvailable, spawnBackend } from './backend'
+} from './constants'
 import { diagnostics } from './diagnostics'
 
 interface ResolvedSpawn {
diff --git a/plugins/terminals/src/rpc/functions/clear-exited.ts b/plugins/terminals/src/node/rpc/functions/clear-exited.ts
similarity index 90%
rename from plugins/terminals/src/rpc/functions/clear-exited.ts
rename to plugins/terminals/src/node/rpc/functions/clear-exited.ts
index 5753716b3..83d71eb83 100644
--- a/plugins/terminals/src/rpc/functions/clear-exited.ts
+++ b/plugins/terminals/src/node/rpc/functions/clear-exited.ts
@@ -1,6 +1,6 @@
 import { defineRpcFunction } from 'devframe'
 import { s } from 'devframe/utils/simple-schema'
-import { getTerminalManager } from '../../node/context'
+import { getTerminalManager } from '../../context'
 
 export const clearExited = defineRpcFunction({
   name: 'devframes:plugin:terminals:clear-exited',
diff --git a/plugins/terminals/src/rpc/functions/list.ts b/plugins/terminals/src/node/rpc/functions/list.ts
similarity index 90%
rename from plugins/terminals/src/rpc/functions/list.ts
rename to plugins/terminals/src/node/rpc/functions/list.ts
index 759bf3e94..73d13bc69 100644
--- a/plugins/terminals/src/rpc/functions/list.ts
+++ b/plugins/terminals/src/node/rpc/functions/list.ts
@@ -1,6 +1,6 @@
 import { defineRpcFunction } from 'devframe'
 import { s } from 'devframe/utils/simple-schema'
-import { getTerminalManager } from '../../node/context'
+import { getTerminalManager } from '../../context'
 import { sessionInfoSchema } from '../schemas'
 
 export const list = defineRpcFunction({
diff --git a/plugins/terminals/src/rpc/functions/presets.ts b/plugins/terminals/src/node/rpc/functions/presets.ts
similarity index 91%
rename from plugins/terminals/src/rpc/functions/presets.ts
rename to plugins/terminals/src/node/rpc/functions/presets.ts
index 518f05f55..f6c98cdea 100644
--- a/plugins/terminals/src/rpc/functions/presets.ts
+++ b/plugins/terminals/src/node/rpc/functions/presets.ts
@@ -1,6 +1,6 @@
 import { defineRpcFunction } from 'devframe'
 import { s } from 'devframe/utils/simple-schema'
-import { getTerminalManager } from '../../node/context'
+import { getTerminalManager } from '../../context'
 import { presetSchema } from '../schemas'
 
 export const presets = defineRpcFunction({
diff --git a/plugins/terminals/src/rpc/functions/remove.ts b/plugins/terminals/src/node/rpc/functions/remove.ts
similarity index 90%
rename from plugins/terminals/src/rpc/functions/remove.ts
rename to plugins/terminals/src/node/rpc/functions/remove.ts
index 4bf31a6e8..b159dacdb 100644
--- a/plugins/terminals/src/rpc/functions/remove.ts
+++ b/plugins/terminals/src/node/rpc/functions/remove.ts
@@ -1,6 +1,6 @@
 import { defineRpcFunction } from 'devframe'
 import { s } from 'devframe/utils/simple-schema'
-import { getTerminalManager } from '../../node/context'
+import { getTerminalManager } from '../../context'
 
 export const remove = defineRpcFunction({
   name: 'devframes:plugin:terminals:remove',
diff --git a/plugins/terminals/src/rpc/functions/rename.ts b/plugins/terminals/src/node/rpc/functions/rename.ts
similarity index 88%
rename from plugins/terminals/src/rpc/functions/rename.ts
rename to plugins/terminals/src/node/rpc/functions/rename.ts
index 4239a2b4b..6d96d9f75 100644
--- a/plugins/terminals/src/rpc/functions/rename.ts
+++ b/plugins/terminals/src/node/rpc/functions/rename.ts
@@ -1,6 +1,6 @@
 import { defineRpcFunction } from 'devframe'
 import { s } from 'devframe/utils/simple-schema'
-import { getTerminalManager } from '../../node/context'
+import { getTerminalManager } from '../../context'
 
 export const rename = defineRpcFunction({
   name: 'devframes:plugin:terminals:rename',
diff --git a/plugins/terminals/src/rpc/functions/resize.ts b/plugins/terminals/src/node/rpc/functions/resize.ts
similarity index 89%
rename from plugins/terminals/src/rpc/functions/resize.ts
rename to plugins/terminals/src/node/rpc/functions/resize.ts
index 7c29285de..4a0cb8fb1 100644
--- a/plugins/terminals/src/rpc/functions/resize.ts
+++ b/plugins/terminals/src/node/rpc/functions/resize.ts
@@ -1,6 +1,6 @@
 import { defineRpcFunction } from 'devframe'
 import { s } from 'devframe/utils/simple-schema'
-import { getTerminalManager } from '../../node/context'
+import { getTerminalManager } from '../../context'
 
 export const resize = defineRpcFunction({
   name: 'devframes:plugin:terminals:resize',
diff --git a/plugins/terminals/src/rpc/functions/restart.ts b/plugins/terminals/src/node/rpc/functions/restart.ts
similarity index 88%
rename from plugins/terminals/src/rpc/functions/restart.ts
rename to plugins/terminals/src/node/rpc/functions/restart.ts
index 5fe4d46e8..372034422 100644
--- a/plugins/terminals/src/rpc/functions/restart.ts
+++ b/plugins/terminals/src/node/rpc/functions/restart.ts
@@ -1,6 +1,6 @@
 import { defineRpcFunction } from 'devframe'
 import { s } from 'devframe/utils/simple-schema'
-import { getTerminalManager } from '../../node/context'
+import { getTerminalManager } from '../../context'
 import { sessionInfoSchema } from '../schemas'
 
 export const restart = defineRpcFunction({
diff --git a/plugins/terminals/src/rpc/functions/spawn.ts b/plugins/terminals/src/node/rpc/functions/spawn.ts
similarity index 91%
rename from plugins/terminals/src/rpc/functions/spawn.ts
rename to plugins/terminals/src/node/rpc/functions/spawn.ts
index 1c93262db..dbe7349b0 100644
--- a/plugins/terminals/src/rpc/functions/spawn.ts
+++ b/plugins/terminals/src/node/rpc/functions/spawn.ts
@@ -1,5 +1,5 @@
 import { defineRpcFunction } from 'devframe'
-import { getTerminalManager } from '../../node/context'
+import { getTerminalManager } from '../../context'
 import { sessionInfoSchema, spawnRequestSchema } from '../schemas'
 
 export const spawn = defineRpcFunction({
diff --git a/plugins/terminals/src/rpc/functions/terminate.ts b/plugins/terminals/src/node/rpc/functions/terminate.ts
similarity index 91%
rename from plugins/terminals/src/rpc/functions/terminate.ts
rename to plugins/terminals/src/node/rpc/functions/terminate.ts
index e58c8c333..427ad5aff 100644
--- a/plugins/terminals/src/rpc/functions/terminate.ts
+++ b/plugins/terminals/src/node/rpc/functions/terminate.ts
@@ -1,6 +1,6 @@
 import { defineRpcFunction } from 'devframe'
 import { s } from 'devframe/utils/simple-schema'
-import { getTerminalManager } from '../../node/context'
+import { getTerminalManager } from '../../context'
 
 export const terminate = defineRpcFunction({
   name: 'devframes:plugin:terminals:terminate',
diff --git a/plugins/terminals/src/rpc/functions/write.ts b/plugins/terminals/src/node/rpc/functions/write.ts
similarity index 88%
rename from plugins/terminals/src/rpc/functions/write.ts
rename to plugins/terminals/src/node/rpc/functions/write.ts
index c175e2a97..18c823577 100644
--- a/plugins/terminals/src/rpc/functions/write.ts
+++ b/plugins/terminals/src/node/rpc/functions/write.ts
@@ -1,6 +1,6 @@
 import { defineRpcFunction } from 'devframe'
 import { s } from 'devframe/utils/simple-schema'
-import { getTerminalManager } from '../../node/context'
+import { getTerminalManager } from '../../context'
 
 export const write = defineRpcFunction({
   name: 'devframes:plugin:terminals:write',
diff --git a/plugins/terminals/src/rpc/index.ts b/plugins/terminals/src/node/rpc/index.ts
similarity index 100%
rename from plugins/terminals/src/rpc/index.ts
rename to plugins/terminals/src/node/rpc/index.ts
diff --git a/plugins/terminals/src/rpc/schemas.ts b/plugins/terminals/src/node/rpc/schemas.ts
similarity index 100%
rename from plugins/terminals/src/rpc/schemas.ts
rename to plugins/terminals/src/node/rpc/schemas.ts
diff --git a/plugins/terminals/src/node/setup.ts b/plugins/terminals/src/node/setup.ts
new file mode 100644
index 000000000..6361d0b70
--- /dev/null
+++ b/plugins/terminals/src/node/setup.ts
@@ -0,0 +1,33 @@
+import type { DevframeNodeContext } from 'devframe'
+import type { TerminalsOptions } from './types'
+import { setTerminalManager } from './context'
+import { TerminalManager } from './manager'
+import { serverFunctions } from './rpc/index'
+
+export { isPtyAvailable } from './backend'
+export * from './context'
+export { diagnostics } from './diagnostics'
+export { TerminalManager } from './manager'
+
+/**
+ * Wire the terminals subsystem onto a devframe node context: create the
+ * {@link TerminalManager}, publish presets + the session list into shared
+ * state, and register the control RPC functions. Returns the manager so
+ * callers can spawn sessions or dispose it on shutdown.
+ *
+ * Works in any devframe runtime (CLI, Vite, build), since it only depends on the
+ * core `ctx.rpc` streaming + shared-state surface, not on the hub.
+ */
+export async function setupTerminals(
+  ctx: DevframeNodeContext,
+  options: TerminalsOptions = {},
+): Promise<TerminalManager> {
+  const manager = new TerminalManager(ctx, options)
+  setTerminalManager(ctx, manager)
+  await manager.init()
+
+  for (const fn of serverFunctions)
+    ctx.rpc.register(fn)
+
+  return manager
+}
diff --git a/plugins/terminals/src/types.ts b/plugins/terminals/src/node/types.ts
similarity index 100%
rename from plugins/terminals/src/types.ts
rename to plugins/terminals/src/node/types.ts
diff --git a/plugins/terminals/src/vite.ts b/plugins/terminals/src/node/vite.ts
similarity index 100%
rename from plugins/terminals/src/vite.ts
rename to plugins/terminals/src/node/vite.ts
diff --git a/plugins/terminals/src/spa/vite.config.ts b/plugins/terminals/src/spa/vite.config.ts
deleted file mode 100644
index f5a657395..000000000
--- a/plugins/terminals/src/spa/vite.config.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { fileURLToPath } from 'node:url'
-import { svelte } from '@sveltejs/vite-plugin-svelte'
-import UnoCSS from 'unocss/vite'
-import { defineConfig } from 'vite'
-import { alias } from '../../../../alias'
-
-export default defineConfig({
-  base: './',
-  root: fileURLToPath(new URL('.', import.meta.url)),
-  resolve: { alias },
-  plugins: [
-    svelte(),
-    UnoCSS(),
-  ],
-  build: {
-    outDir: fileURLToPath(new URL('../../assets-pkg/dist', import.meta.url)),
-    emptyOutDir: true,
-  },
-})
diff --git a/plugins/terminals/test/_utils.ts b/plugins/terminals/test/_utils.ts
index f3f2693aa..d72ca0296 100644
--- a/plugins/terminals/test/_utils.ts
+++ b/plugins/terminals/test/_utils.ts
@@ -1,6 +1,6 @@
 import type { DevframeNodeContext } from 'devframe'
 import type { StartedServer } from 'devframe/internal'
-import type { TerminalsOptions } from '../src/types'
+import type { TerminalsOptions } from '../src/node/types'
 import process from 'node:process'
 import { createRpcStreamingClientHost } from 'devframe/client'
 import { createH3DevframeHost } from 'devframe/internal'
@@ -11,8 +11,8 @@ import { createEventEmitter } from 'devframe/utils/events'
 import { getPort } from 'devframe/utils/get-port'
 import { H3 } from 'h3'
 import { serveTestContext } from '../../../tests/helpers/serve-test-context'
-import { createTerminalsDevframe } from '../src/index'
-import { getTerminalManager } from '../src/node/index'
+import { createTerminalsDevframe } from '../src/node/index'
+import { getTerminalManager } from '../src/node/setup'
 
 export type TerminalsServer = StartedServer & {
   ctx: DevframeNodeContext
diff --git a/plugins/terminals/test/terminals.test.ts b/plugins/terminals/test/terminals.test.ts
index 6527511ac..1cf1624cd 100644
--- a/plugins/terminals/test/terminals.test.ts
+++ b/plugins/terminals/test/terminals.test.ts
@@ -1,10 +1,10 @@
-import type { TerminalSessionInfo, TerminalsSharedState } from '../src/types'
+import type { TerminalSessionInfo, TerminalsSharedState } from '../src/node/types'
 import type { TerminalsServer, TestClient } from './_utils'
 import process from 'node:process'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { WebSocket } from 'ws'
-import { SESSIONS_STATE_KEY, TERMINAL_STREAM_CHANNEL } from '../src/constants'
-import { isPtyAvailable } from '../src/node/index'
+import { SESSIONS_STATE_KEY, TERMINAL_STREAM_CHANNEL } from '../src/node/constants'
+import { isPtyAvailable } from '../src/node/setup'
 import { bootClient, call, collectUntil, createFakeHubTerminals, startTerminalsServer } from './_utils'
 
 vi.stubGlobal('WebSocket', WebSocket)
diff --git a/plugins/terminals/tsconfig.json b/plugins/terminals/tsconfig.json
index f5c76a6ea..a73b6b482 100644
--- a/plugins/terminals/tsconfig.json
+++ b/plugins/terminals/tsconfig.json
@@ -3,6 +3,6 @@
   "compilerOptions": {
     "lib": ["esnext", "dom"]
   },
-  "include": ["src", "test", "tsdown.config.ts"],
+  "include": ["src", "app", "test", "playgrounds", "bin.mjs"],
   "exclude": ["dist", "node_modules"]
 }
diff --git a/plugins/terminals/tsdown.config.ts b/plugins/terminals/tsdown.config.ts
index 60006a58d..8ec2b44bb 100644
--- a/plugins/terminals/tsdown.config.ts
+++ b/plugins/terminals/tsdown.config.ts
@@ -11,28 +11,25 @@ const deps = {
   ],
 }
 
-// Browser-loaded modules: the xterm-powered renderer. Kept in its own
-// rolldown graph so node-only imports never leak into the client bundle.
-const clientEntries = {
-  'client/index': 'src/client/index.ts',
-}
-
-// Node + neutral modules: the devframe definition/factory, RPC functions,
-// the PTY/child-process manager, and the host adapters.
-const serverEntries = {
-  'index': 'src/index.ts',
+// Node + neutral modules: the devframe definition/factory (root), the setup
+// module, the CLI adapter, the host adapters, constants, types, and the RPC
+// registry. The Svelte component library (`app/client`) and the SPA host
+// (`app`) build separately with Vite.
+const nodeEntries = {
   'node/index': 'src/node/index.ts',
-  'rpc/index': 'src/rpc/index.ts',
-  'cli': 'src/cli.ts',
-  'vite': 'src/vite.ts',
-  'constants': 'src/constants.ts',
-  'types': 'src/types.ts',
+  'node/setup': 'src/node/setup.ts',
+  'node/cli': 'src/node/cli.ts',
+  'node/vite': 'src/node/vite.ts',
+  'node/constants': 'src/node/constants.ts',
+  'node/types': 'src/node/types.ts',
+  'node/rpc/index': 'src/node/rpc/index.ts',
 }
 
 /**
- * Three configs:
- * 1. node server build (clean: true, outputs dist/node, dist/rpc, etc.)
- * 2. combined dts so augmentations resolve
+ * Two configs keep the graphs isolated:
+ * 1. node runtime (`clean: true`): clears dist/, builds the node entries;
+ * 2. combined dts in one neutral graph so the `declare module 'devframe'` RPC
+ *    augmentation resolves once.
  */
 export default defineConfig([
   {
@@ -41,7 +38,7 @@ export default defineConfig([
     tsconfig,
     deps,
     dts: false,
-    entry: serverEntries,
+    entry: nodeEntries,
   },
   {
     clean: false,
@@ -50,6 +47,6 @@ export default defineConfig([
     deps,
     dts: { emitDtsOnly: true },
     outExtensions: () => ({ dts: '.d.mts' }),
-    entry: { ...clientEntries, ...serverEntries },
+    entry: nodeEntries,
   },
 ])
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3f0d7da48..8377ec897 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1784,6 +1784,9 @@ importers:
       '@devframes/plugin-a11y--assets':
         specifier: workspace:*
         version: link:assets-pkg
+      '@devframes/vite':
+        specifier: workspace:*
+        version: link:../../packages/vite
       axe-core:
         specifier: catalog:frontend
         version: 4.13.0
@@ -1955,6 +1958,12 @@ importers:
       devframe:
         specifier: workspace:*
         version: link:../../packages/devframe
+      h3:
+        specifier: catalog:deps
+        version: 2.0.1-rc.29(crossws@0.4.12(srvx@0.12.7))
+      pathe:
+        specifier: catalog:deps
+        version: 2.0.3
       storybook:
         specifier: catalog:storybook
         version: 10.5.10(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
@@ -2021,6 +2030,9 @@ importers:
       floating-vue:
         specifier: catalog:frontend
         version: 5.2.2(vue@3.5.42(typescript@6.0.3))
+      h3:
+        specifier: catalog:deps
+        version: 2.0.1-rc.29(crossws@0.4.12(srvx@0.12.7))
       jora:
         specifier: catalog:inlined
         version: 1.0.0-beta.16
@@ -12924,7 +12936,7 @@ snapshots:
     dependencies:
       '@babel/compat-data': 7.29.3
       '@babel/helper-validator-option': 7.27.1
-      browserslist: 4.28.6
+      browserslist: 4.28.8
       lru-cache: 5.1.1
       semver: 7.8.5
 
@@ -16999,7 +17011,7 @@ snapshots:
 
   '@typescript-eslint/utils@8.69.0(eslint@10.9.1(jiti@2.7.0)(supports-color@10.2.2))(supports-color@10.2.2)(typescript@6.0.3)':
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.1(eslint@10.9.1(jiti@2.7.0)(supports-color@10.2.2))
+      '@eslint-community/eslint-utils': 4.10.1(eslint@10.9.1(jiti@2.7.0)(supports-color@10.2.2))
       '@typescript-eslint/scope-manager': 8.69.0
       '@typescript-eslint/types': 8.69.0
       '@typescript-eslint/typescript-estree': 8.69.0(supports-color@10.2.2)(typescript@6.0.3)
@@ -20940,8 +20952,8 @@ snapshots:
     dependencies:
       '@next/env': 16.3.3
       '@swc/helpers': 0.5.23
-      baseline-browser-mapping: 2.10.43
-      caniuse-lite: 1.0.30001806
+      baseline-browser-mapping: 2.11.20
+      caniuse-lite: 1.0.30001810
       postcss: 8.5.23
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
diff --git a/scripts/verify-typecheck-coverage.ts b/scripts/verify-typecheck-coverage.ts
index eebf59e61..73e4b5bd9 100644
--- a/scripts/verify-typecheck-coverage.ts
+++ b/scripts/verify-typecheck-coverage.ts
@@ -32,7 +32,6 @@ const WORKSPACE_PATTERNS = ['packages/*', 'plugins/*', 'examples/*', 'starter',
  * already has one).
  */
 const EXCEPTIONS: Record<string, string> = {
-  'plugins/inspect': 'tsconfig.json is the only one with composite:true, which makes tsc reject valid cross-package imports (TS6307); also has a couple of unrelated spa/composables type bugs. See plans/README.md "Execution notes" for plan 001.',
   'examples/hub-next': 'packages/hub/src/node/host-terminals.ts types a child-process env as NodeJS.ProcessEnv, and Next.js\'s ambient types require a literal NODE_ENV on that interface once this app pulls hub into its program. See plans/README.md "Execution notes" for plan 001.',
   'examples/hub-next-minimal': 'Same Next.js + hub NODE_ENV ambient conflict as examples/hub-next; the minimal Next host pulls hub into its program too.',
   'docs': 'Nuxt app extending the comark-docs layer: tsconfig.json only holds project references into generated `.nuxt/tsconfig.*.json`, which exist only after `nuxt prepare` resolves the layer, so type-checking it would drag a full Nuxt prepare into the Turbo graph.',
diff --git a/tests/__snapshots__/tsnapi/@devframes/plugin-a11y/client-script.snapshot.d.ts b/tests/__snapshots__/tsnapi/@devframes/plugin-a11y/client-script.snapshot.d.ts
new file mode 100644
index 000000000..cd4863568
--- /dev/null
+++ b/tests/__snapshots__/tsnapi/@devframes/plugin-a11y/client-script.snapshot.d.ts
@@ -0,0 +1,13 @@
+/**
+ * Generated by tsnapi — public API snapshot of `@devframes/plugin-a11y/client-script`
+ */
+// #region Default Export
+declare function _default(_?: A11yPageScriptContext): void;
+export default _default
+// #endregion
+
+// #region Referenced (internal)
+interface A11yPageScriptContext {
+  messages?: HubMessagesClient;
+}
+// #endregion
\ No newline at end of file
diff --git a/tests/__snapshots__/tsnapi/@devframes/plugin-a11y/client-script.snapshot.js b/tests/__snapshots__/tsnapi/@devframes/plugin-a11y/client-script.snapshot.js
new file mode 100644
index 000000000..50833f8e2
--- /dev/null
+++ b/tests/__snapshots__/tsnapi/@devframes/plugin-a11y/client-script.snapshot.js
@@ -0,0 +1,7 @@
+/**
+ * Generated by tsnapi — public API snapshot of `@devframes/plugin-a11y/client-script`
+ */
+// #region Default Export
+function _default(_) {}
+export default _default
+// #endregion
\ No newline at end of file
diff --git a/tests/__snapshots__/tsnapi/@devframes/plugin-a11y/client.snapshot.d.ts b/tests/__snapshots__/tsnapi/@devframes/plugin-a11y/client.snapshot.d.ts
deleted file mode 100644
index a3d154120..000000000
--- a/tests/__snapshots__/tsnapi/@devframes/plugin-a11y/client.snapshot.d.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * Generated by tsnapi — public API snapshot of `@devframes/plugin-a11y/client`
- */
-// #region Functions
-export declare function connectA11y(_?: DevframeRpcClientOptions): Promise<DevframeRpcClient>;
-// #endregion
-
-// #region Other
-export { DevframeRpcClient }
-export { Impact }
-export { ScanReport }
-export { Violation }
-export { ViolationNode }
-// #endregion
\ No newline at end of file
diff --git a/tests/__snapshots__/tsnapi/@devframes/plugin-a11y/client.snapshot.js b/tests/__snapshots__/tsnapi/@devframes/plugin-a11y/client.snapshot.js
deleted file mode 100644
index bcacec4ae..000000000
--- a/tests/__snapshots__/tsnapi/@devframes/plugin-a11y/client.snapshot.js
+++ /dev/null
@@ -1,6 +0,0 @@
-/**
- * Generated by tsnapi — public API snapshot of `@devframes/plugin-a11y/client`
- */
-// #region Functions
-export function connectA11y(_) {}
-// #endregion
\ No newline at end of file
diff --git a/tests/__snapshots__/tsnapi/@devframes/plugin-a11y/index.snapshot.d.ts b/tests/__snapshots__/tsnapi/@devframes/plugin-a11y/index.snapshot.d.ts
index 6618aba2c..c19f6bb80 100644
--- a/tests/__snapshots__/tsnapi/@devframes/plugin-a11y/index.snapshot.d.ts
+++ b/tests/__snapshots__/tsnapi/@devframes/plugin-a11y/index.snapshot.d.ts
@@ -16,34 +16,6 @@ export interface A11yDevframeOptions {
     runOptions?: Record<string, unknown>;
   };
 }
-export interface ScanReport {
-  route: string;
-  url: string;
-  scannedAt: number;
-  engine: string;
-  violations: Violation[];
-  counts: Record<Impact, number>;
-}
-export interface Violation {
-  ruleId: string;
-  impact: Impact;
-  help: string;
-  description: string;
-  helpUrl: string;
-  tags?: string[];
-  bestPractice?: boolean;
-  nodes: ViolationNode[];
-}
-export interface ViolationNode {
-  id: string;
-  target: string[];
-  html: string;
-  failureSummary: string;
-}
-// #endregion
-
-// #region Types
-export type Impact = (typeof IMPACT_ORDER)[number];
 // #endregion
 
 // #region Functions
@@ -53,10 +25,19 @@ export declare function createA11yDevframe(_?: A11yDevframeOptions): DevframeDef
 // #region Variables
 /** @deprecated */
 export declare const a11yAgentBundlePath: string;
+export declare const a11yClientScriptBundlePath: string;
+/** @deprecated */
 export declare const a11yPageScriptBundlePath: string;
 // #endregion
 
 // #region Default Export
 declare function _default(_?: A11yDevframeOptions): DevframeDefinition;
 export default _default
+// #endregion
+
+// #region Other
+export { Impact }
+export { ScanReport }
+export { Violation }
+export { ViolationNode }
 // #endregion
\ No newline at end of file
diff --git a/tests/__snapshots__/tsnapi/@devframes/plugin-a11y/index.snapshot.js b/tests/__snapshots__/tsnapi/@devframes/plugin-a11y/index.snapshot.js
index 34b709640..0da1bcf27 100644
--- a/tests/__snapshots__/tsnapi/@devframes/plugin-a11y/index.snapshot.js
+++ b/tests/__snapshots__/tsnapi/@devframes/plugin-a11y/index.snapshot.js
@@ -1,16 +1,13 @@
 /**
  * Generated by tsnapi — public API snapshot of `@devframes/plugin-a11y`
  */
-// #region Functions
-export function createA11yDevframe(_) {}
-// #endregion
-
-// #region Variables
-export var a11yAgentBundlePath /* const */
-export var a11yPageScriptBundlePath /* const */
+// #region Default Export
+export default createA11yDevframe
 // #endregion
 
-// #region Default Export
-function _default(_) {}
-export default _default
+// #region Other
+export { a11yAgentBundlePath }
+export { a11yClientScriptBundlePath }
+export { a11yPageScriptBundlePath }
+export { createA11yDevframe }
 // #endregion
\ No newline at end of file
diff --git a/tests/__snapshots__/tsnapi/@devframes/plugin-assets/client.snapshot.d.ts b/tests/__snapshots__/tsnapi/@devframes/plugin-assets/client.snapshot.d.ts
deleted file mode 100644
index 68dc76139..000000000
--- a/tests/__snapshots__/tsnapi/@devframes/plugin-assets/client.snapshot.d.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * Generated by tsnapi — public API snapshot of `@devframes/plugin-assets/client`
- */
-// #region Functions
-export declare function connectAssets(_?: DevframeRpcClientOptions): Promise<import("devframe/client").DevframeRpcClient>;
-// #endregion
-
-// #region Other
-export { AssetImageMeta }
-export { AssetInfo }
-export { AssetType }
-export { CodeSnippet }
-// #endregion
\ No newline at end of file
diff --git a/tests/__snapshots__/tsnapi/@devframes/plugin-assets/client.snapshot.js b/tests/__snapshots__/tsnapi/@devframes/plugin-assets/client.snapshot.js
deleted file mode 100644
index 899a6c816..000000000
--- a/tests/__snapshots__/tsnapi/@devframes/plugin-assets/client.snapshot.js
+++ /dev/null
@@ -1,6 +0,0 @@
-/**
- * Generated by tsnapi — public API snapshot of `@devframes/plugin-assets/client`
- */
-// #region Functions
-export function connectAssets(_) {}
-// #endregion
\ No newline at end of file
diff --git a/tests/__snapshots__/tsnapi/@devframes/plugin-assets/index.snapshot.d.ts b/tests/__snapshots__/tsnapi/@devframes/plugin-assets/index.snapshot.d.ts
index 84c2fe26d..69ac7fc1c 100644
--- a/tests/__snapshots__/tsnapi/@devframes/plugin-assets/index.snapshot.d.ts
+++ b/tests/__snapshots__/tsnapi/@devframes/plugin-assets/index.snapshot.d.ts
@@ -2,19 +2,6 @@
  * Generated by tsnapi — public API snapshot of `@devframes/plugin-assets`
  */
 // #region Interfaces
-export interface AssetImageMeta {
-  width?: number;
-  height?: number;
-  orientation?: number;
-}
-export interface AssetInfo {
-  path: string;
-  type: AssetType;
-  publicPath: string;
-  size: number;
-  mtime: number;
-  fsPath?: string;
-}
 export interface AssetsDevframeOptions {
   id?: string;
   name?: string;
@@ -31,26 +18,21 @@ export interface AssetsDevframeOptions {
   auth?: boolean;
   build?: boolean;
 }
-export interface CodeSnippet {
-  lang: string;
-  code: string;
-  name: string;
-}
-// #endregion
-
-// #region Types
-export type AssetType = 'image' | 'font' | 'video' | 'audio' | 'text' | 'other';
 // #endregion
 
 // #region Functions
 export declare function createAssetsDevframe(_?: AssetsDevframeOptions): DevframeDefinition;
 // #endregion
 
-// #region Variables
-export declare const DEFAULT_ALLOWED_UPLOAD_EXTENSIONS: readonly string[];
-// #endregion
-
 // #region Default Export
 declare function _default(_?: AssetsDevframeOptions): DevframeDefinition;
 export default _default
+// #endregion
+
+// #region Other
+export { AssetImageMeta }
+export { AssetInfo }
+export { AssetType }
+export { CodeSnippet }
+export { DEFAULT_ALLOWED_UPLOAD_EXTENSIONS }
 // #endregion
\ No newline at end of file
diff --git a/tests/__snapshots__/tsnapi/@devframes/plugin-assets/index.snapshot.js b/tests/__snapshots__/tsnapi/@devframes/plugin-assets/index.snapshot.js
index ebd53cb7b..070be9127 100644
--- a/tests/__snapshots__/tsnapi/@devframes/plugin-assets/index.snapshot.js
+++ b/tests/__snapshots__/tsnapi/@devframes/plugin-assets/index.snapshot.js
@@ -1,15 +1,11 @@
 /**
  * Generated by tsnapi — public API snapshot of `@devframes/plugin-assets`
  */
-// #region Functions
-export function createAssetsDevframe(_) {}
-// #endregion
-
-// #region Variables
-export var DEFAULT_ALLOWED_UPLOAD_EXTENSIONS /* const */
+// #region Default Export
+export default createAssetsDevframe
 // #endregion
 
-// #region Default Export
-function _default(_) {}
-export default _default
+// #region Other
+export { createAssetsDevframe }
+export { DEFAULT_ALLOWED_UPLOAD_EXTENSIONS }
 // #endregion
\ No newline at end of file
diff --git a/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/client.snapshot.d.ts b/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/client.snapshot.d.ts
deleted file mode 100644
index d8c8c5383..000000000
--- a/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/client.snapshot.d.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Generated by tsnapi — public API snapshot of `@devframes/plugin-code-server/client`
- */
-// #region Functions
-export declare function connectCodeServer(_?: DevframeRpcClientOptions): Promise<DevframeRpcClient>;
-// #endregion
-
-// #region Other
-export { CodeServerBackend }
-export { CodeServerConnect }
-export { CodeServerDetection }
-export { CodeServerLogin }
-export { CodeServerMode }
-export { CodeServerServerInfo }
-export { CodeServerSharedState }
-export { CodeServerStartResult }
-export { CodeServerStatus }
-export { CodeServerStatusResult }
-export { ConnectionMeta }
-export { DevframeConnectionStatus }
-export { DevframeRpcClient }
-export { STATE_KEY }
-// #endregion
\ No newline at end of file
diff --git a/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/client.snapshot.js b/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/client.snapshot.js
deleted file mode 100644
index bf62b7725..000000000
--- a/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/client.snapshot.js
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * Generated by tsnapi — public API snapshot of `@devframes/plugin-code-server/client`
- */
-// #region Functions
-export function connectCodeServer(_) {}
-// #endregion
-
-// #region Variables
-export var STATE_KEY /* const */
-// #endregion
\ No newline at end of file
diff --git a/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/constants.snapshot.d.ts b/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/constants.snapshot.d.ts
index 774f22c42..812445c8f 100644
--- a/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/constants.snapshot.d.ts
+++ b/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/constants.snapshot.d.ts
@@ -1,17 +1,14 @@
 /**
  * Generated by tsnapi — public API snapshot of `@devframes/plugin-code-server/constants`
  */
-// #region Functions
-export declare function getCookieSessionName(_?: string): string;
-// #endregion
-
-// #region Variables
-export declare const DEFAULT_CODE_SERVER_PORT: number;
-export declare const DEFAULT_PORT: number;
-export declare const DEFAULT_START_TIMEOUT: number;
-export declare const PLUGIN_ID: string;
-export declare const SESSION_COOKIE_BASE: string;
-export declare const STATE_KEY: string;
-export declare const TERMINAL_SESSION_ICON: string;
-export declare const TERMINAL_SESSION_TITLE: string;
+// #region Other
+export { DEFAULT_CODE_SERVER_PORT }
+export { DEFAULT_PORT }
+export { DEFAULT_START_TIMEOUT }
+export { getCookieSessionName }
+export { PLUGIN_ID }
+export { SESSION_COOKIE_BASE }
+export { STATE_KEY }
+export { TERMINAL_SESSION_ICON }
+export { TERMINAL_SESSION_TITLE }
 // #endregion
\ No newline at end of file
diff --git a/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/index.snapshot.d.ts b/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/index.snapshot.d.ts
index 44783f062..0a11d6259 100644
--- a/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/index.snapshot.d.ts
+++ b/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/index.snapshot.d.ts
@@ -76,17 +76,17 @@ export type CodeServerStatus = 'stopped' | 'starting' | 'running' | 'error';
 
 // #region Functions
 export declare function createCodeServerDevframe(_?: CodeServerOptions): DevframeDefinition;
-export declare function getCookieSessionName(_?: string): string;
-// #endregion
-
-// #region Variables
-export declare const DEFAULT_CODE_SERVER_PORT: number;
-export declare const DEFAULT_PORT: number;
-export declare const PLUGIN_ID: string;
-export declare const STATE_KEY: string;
 // #endregion
 
 // #region Default Export
 declare function _default(_?: CodeServerOptions): DevframeDefinition;
 export default _default
+// #endregion
+
+// #region Other
+export { DEFAULT_CODE_SERVER_PORT }
+export { DEFAULT_PORT }
+export { getCookieSessionName }
+export { PLUGIN_ID }
+export { STATE_KEY }
 // #endregion
\ No newline at end of file
diff --git a/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/index.snapshot.js b/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/index.snapshot.js
index d12b4ae78..482de5939 100644
--- a/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/index.snapshot.js
+++ b/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/index.snapshot.js
@@ -2,7 +2,6 @@
  * Generated by tsnapi — public API snapshot of `@devframes/plugin-code-server`
  */
 // #region Functions
-export function createCodeServerDevframe(_) {}
 export function getCookieSessionName(_) {}
 // #endregion
 
@@ -14,6 +13,9 @@ export var STATE_KEY /* const */
 // #endregion
 
 // #region Default Export
-function _default(_) {}
-export default _default
+export default createCodeServerDevframe
+// #endregion
+
+// #region Other
+export { createCodeServerDevframe }
 // #endregion
\ No newline at end of file
diff --git a/tests/__snapshots__/tsnapi/@devframes/plugin-data-inspector/client.snapshot.d.ts b/tests/__snapshots__/tsnapi/@devframes/plugin-data-inspector/client.snapshot.d.ts
deleted file mode 100644
index dab0b30af..000000000
--- a/tests/__snapshots__/tsnapi/@devframes/plugin-data-inspector/client.snapshot.d.ts
+++ /dev/null
@@ -1,98 +0,0 @@
-/**
- * Generated by tsnapi — public API snapshot of `@devframes/plugin-data-inspector/client`
- */
-// #region Interfaces
-export interface DataSourceMeta {
-  id: string;
-  title: string;
-  description?: string;
-  icon?: string;
-  static: boolean;
-  writable: boolean;
-  queries?: Query[];
-}
-export interface FilterOptions {
-  excludeFunctions?: boolean;
-  excludeUnderscoreProps?: boolean;
-  excludeDollarProps?: boolean;
-}
-export interface Query extends FilterOptions {
-  query: string;
-  title?: string;
-  description?: string;
-}
-export interface QueryStats {
-  queryMs: number;
-  normalize: NormalizeStatsWire;
-  payloadBytes: number;
-}
-export interface SavedQuery extends Query {
-  id: string;
-  scope: SavedQueryScope;
-  updatedAt: number;
-}
-export interface SaveQueryInput extends Query {
-  id?: string;
-  scope: SavedQueryScope;
-}
-export interface SuggestItem {
-  type: string;
-  from: number;
-  to: number;
-  current: string;
-  value: string;
-}
-export interface SuggestOutcome {
-  ok: boolean;
-  suggestions: SuggestItem[];
-  statMs: number;
-  error?: string;
-}
-// #endregion
-
-// #region Types
-export type QueryOutcome = {
-  ok: true;
-  result: unknown;
-  stats: QueryStats;
-} | {
-  ok: false;
-  error: {
-    name: string;
-    message: string;
-  };
-};
-export type SavedQueryScope = 'workspace' | 'project';
-export type SkeletonOutcome = {
-  ok: true;
-  skeleton: unknown;
-  nodes: number;
-  ms: number;
-} | {
-  ok: false;
-  error: {
-    name: string;
-    message: string;
-  };
-};
-// #endregion
-
-// #region Functions
-export declare function connectDataInspector(_?: DevframeRpcClientOptions): Promise<DevframeRpcClient>;
-// #endregion
-
-// #region Referenced (internal)
-interface NormalizeStatsWire {
-  nodes: number;
-  refs: number;
-  truncatedDepth: number;
-  truncatedEntries: number;
-  truncatedProps: number;
-  ms: number;
-}
-// #endregion
-
-// #region Other
-export { DevframeConnectionStatus }
-export { DevframeRpcClient }
-// #endregion
\ No newline at end of file
diff --git a/tests/__snapshots__/tsnapi/@devframes/plugin-data-inspector/client.snapshot.js b/tests/__snapshots__/tsnapi/@devframes/plugin-data-inspector/client.snapshot.js
deleted file mode 100644
index d9d163eb3..000000000
--- a/tests/__snapshots__/tsnapi/@devframes/plugin-data-inspector/client.snapshot.js
+++ /dev/null
@@ -1,6 +0,0 @@
-/**
- * Generated by tsnapi — public API snapshot of `@devframes/plugin-data-inspector/client`
- */
-// #region Functions
-export function connectDataInspector(_) {}
-// #endregion
\ No newline at end of file
diff --git a/tests/__snapshots__/tsnapi/@devframes/plugin-data-inspector/engine.snapshot.js b/tests/__snapshots__/tsnapi/@devframes/plugin-data-inspector/engine.snapshot.js
index cba124dcf..854d64ec7 100644
--- a/tests/__snapshots__/tsnapi/@devframes/plugin-data-inspector/engine.snapshot.js
+++ b/tests/__snapshots__/tsnapi/@devframes/plugin-data-inspector/engine.snapshot.js
@@ -1,13 +1,13 @@
 /**
  * Generated by tsnapi — public API snapshot of `@devframes/plugin-data-inspector/engine`
  */
-// #region Functions
-export function applyWrite(_, _, _) {}
-export function isExcludedKey(_, _) {}
-export function navigate(_, _, _) {}
-export function normalize(_, _) {}
-export async function runQuery(_, _, _) {}
-export async function runQueryAtPath(_, _, _, _) {}
-export function skeletonOf(_, _) {}
-export async function suggest(_, _, _, _) {}
+// #region Other
+export { applyWrite }
+export { isExcludedKey }
+export { navigate }
+export { normalize }
+export { runQuery }
+export { runQueryAtPath }
+export { skeletonOf }
+export { suggest }
 // #endregion
\ No newline at end of file
diff --git a/tests/__snapshots__/tsnapi/@devframes/plugin-data-inspector/index.snapshot.js b/tests/__snapshots__/tsnapi/@devframes/plugin-data-inspector/index.snapshot.js
index 40f5a0291..d55929fc4 100644
--- a/tests/__snapshots__/tsnapi/@devframes/plugin-data-inspector/index.snapshot.js
+++ b/tests/__snapshots__/tsnapi/@devframes/plugin-data-inspector/index.snapshot.js
@@ -1,16 +1,12 @@
 /**
  * Generated by tsnapi — public API snapshot of `@devframes/plugin-data-inspector`
  */
-// #region Functions
-export function createDataInspectorDevframe(_) {}
-export function registerDataSource(_) {}
-// #endregion
-
-// #region Variables
-export var DATA_SOURCES_SERVICE_ID /* const */
+// #region Default Export
+export default createDataInspectorDevframe
 // #endregion
 
-// #region Default Export
-function _default(_) {}
-export default _default
+// #region Other
+export { createDataInspectorDevframe }
+export { DATA_SOURCES_SERVICE_ID }
+export { registerDataSource }
 // #endregion
\ No newline at end of file
diff --git a/tests/__snapshots__/tsnapi/@devframes/plugin-git/index.snapshot.js b/tests/__snapshots__/tsnapi/@devframes/plugin-git/index.snapshot.js
index 03c6c2da0..dd5013b51 100644
--- a/tests/__snapshots__/tsnapi/@devframes/plugin-git/index.snapshot.js
+++ b/tests/__snapshots__/tsnapi/@devframes/plugin-git/index.snapshot.js
@@ -1,11 +1,10 @@
 /**
  * Generated by tsnapi — public API snapshot of `@devframes/plugin-git`
  */
-// #region Functions
-export function createGitDevframe(_) {}
+// #region Default Export
+export default createGitDevframe
 // #endregion
 
-// #region Default Export
-function _default(_) {}
-export default _default
+// #region Other
+export { createGitDevframe }
 // #endregion
\ No newline at end of file
diff --git a/tests/__snapshots__/tsnapi/@devframes/plugin-inspect/client.snapshot.d.ts b/tests/__snapshots__/tsnapi/@devframes/plugin-inspect/client.snapshot.d.ts
deleted file mode 100644
index bd340ba05..000000000
--- a/tests/__snapshots__/tsnapi/@devframes/plugin-inspect/client.snapshot.d.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Generated by tsnapi — public API snapshot of `@devframes/plugin-inspect/client`
- */
-// #region Functions
-export declare function connectInspect(_?: DevframeRpcClientOptions): Promise<DevframeRpcClient>;
-// #endregion
-
-// #region Other
-export { AgentManifest }
-export { DevframeConnectionStatus }
-export { DevframeInspectCommandInfo }
-export { DevframeInspectInstanceInfo }
-export { DevframeRpcClient }
-export { InvokeResult }
-export { RpcFunctionAgentInfo }
-export { RpcFunctionInfo }
-// #endregion
\ No newline at end of file
diff --git a/tests/__snapshots__/tsnapi/@devframes/plugin-inspect/client.snapshot.js b/tests/__snapshots__/tsnapi/@devframes/plugin-inspect/client.snapshot.js
deleted file mode 100644
index 2bb2e4376..000000000
--- a/tests/__snapshots__/tsnapi/@devframes/plugin-inspect/client.snapshot.js
+++ /dev/null
@@ -1,6 +0,0 @@
-/**
- * Generated by tsnapi — public API snapshot of `@devframes/plugin-inspect/client`
- */
-// #region Functions
-export function connectInspect(_) {}
-// #endregion
\ No newline at end of file
diff --git a/tests/__snapshots__/tsnapi/@devframes/plugin-inspect/index.snapshot.d.ts b/tests/__snapshots__/tsnapi/@devframes/plugin-inspect/index.snapshot.d.ts
index e7b123ceb..c927fc371 100644
--- a/tests/__snapshots__/tsnapi/@devframes/plugin-inspect/index.snapshot.d.ts
+++ b/tests/__snapshots__/tsnapi/@devframes/plugin-inspect/index.snapshot.d.ts
@@ -1,48 +1,14 @@
 /**
  * Generated by tsnapi — public API snapshot of `@devframes/plugin-inspect`
  */
-// #region Interfaces
-export interface InspectDevframeOptions {
-  id?: string;
-  name?: string;
-  icon?: string;
-  basePath?: string;
-  port?: number;
-  auth?: boolean;
-}
-export interface InvokeResult {
-  ok: boolean;
-  result?: unknown;
-  error?: {
-    name: string;
-    message: string;
-    stack?: string;
-  };
-  durationMs: number;
-}
-export interface RpcFunctionInfo {
-  name: string;
-  type: 'query' | 'static' | 'action' | 'event';
-  jsonSerializable: boolean;
-  snapshot: boolean;
-  cacheable: boolean;
-  hasArgs: boolean;
-  hasReturns: boolean;
-  hasDump: boolean;
-  hasSetup: boolean;
-  hasHandler: boolean;
-  invokable: boolean;
-  agent?: RpcFunctionAgentInfo;
-  argsSchema?: unknown;
-  returnsSchema?: unknown;
-}
-// #endregion
-
-// #region Functions
-export declare function createInspectDevframe(_?: InspectDevframeOptions): DevframeDefinition;
+// #region Default Export
+export default createInspectDevframe
 // #endregion
 
-// #region Default Export
-declare function _default(_?: InspectDevframeOptions): DevframeDefinition;
-export default _default
+// #region Other
+export { createInspectDevframe }
+export { DevframeInspectCommandInfo }
+export { InspectDevframeOptions }
+export { InvokeResult }
+export { RpcFunctionInfo }
 // #endregion
\ No newline at end of file
diff --git a/tests/__snapshots__/tsnapi/@devframes/plugin-inspect/index.snapshot.js b/tests/__snapshots__/tsnapi/@devframes/plugin-inspect/index.snapshot.js
index 9870cdd99..6ccb0f10d 100644
--- a/tests/__snapshots__/tsnapi/@devframes/plugin-inspect/index.snapshot.js
+++ b/tests/__snapshots__/tsnapi/@devframes/plugin-inspect/index.snapshot.js
@@ -1,11 +1,10 @@
 /**
  * Generated by tsnapi — public API snapshot of `@devframes/plugin-inspect`
  */
-// #region Functions
-export function createInspectDevframe(_) {}
+// #region Default Export
+export default createInspectDevframe
 // #endregion
 
-// #region Default Export
-function _default(_) {}
-export default _default
+// #region Other
+export { createInspectDevframe }
 // #endregion
\ No newline at end of file
diff --git a/tests/__snapshots__/tsnapi/@devframes/plugin-messages/client.snapshot.d.ts b/tests/__snapshots__/tsnapi/@devframes/plugin-messages/client.snapshot.d.ts
index 66c63d10a..51cb537b0 100644
--- a/tests/__snapshots__/tsnapi/@devframes/plugin-messages/client.snapshot.d.ts
+++ b/tests/__snapshots__/tsnapi/@devframes/plugin-messages/client.snapshot.d.ts
@@ -1,31 +1,4 @@
 /**
  * Generated by tsnapi — public API snapshot of `@devframes/plugin-messages/client`
  */
-// #region Interfaces
-export interface MessagesHandle {
-  rpc: DevframeRpcClient;
-  dispose: () => void;
-}
-export interface MessagesState {
-  entries: DevframeMessageEntry$1[];
-}
-export interface MountMessagesOptions {
-  rpc?: DevframeRpcClient;
-}
-// #endregion
-
-// #region Functions
-export declare function connectMessages(_?: DevframeRpcClientOptions): Promise<DevframeRpcClient>;
-export declare function mountMessages(_: HTMLElement, _?: MountMessagesOptions): Promise<MessagesHandle>;
-export declare function useMessages(_: DevframeRpcClient$1): Reactive<MessagesState>;
-// #endregion
-
-// #region Other
-export { DevframeMessageEntry }
-export { DevframeMessageEntryFrom }
-export { DevframeMessageEntryInput }
-export { DevframeMessageLevel }
-export { DevframeMessagesListDelta }
-export { DevframeRpcClient }
-export { MESSAGES_UPDATED_EVENT }
-// #endregion
\ No newline at end of file
+/* no exports */
\ No newline at end of file
diff --git a/tests/__snapshots__/tsnapi/@devframes/plugin-messages/index.snapshot.js b/tests/__snapshots__/tsnapi/@devframes/plugin-messages/index.snapshot.js
index b79c78254..e13d0faf8 100644
--- a/tests/__snapshots__/tsnapi/@devframes/plugin-messages/index.snapshot.js
+++ b/tests/__snapshots__/tsnapi/@devframes/plugin-messages/index.snapshot.js
@@ -1,10 +1,6 @@
 /**
  * Generated by tsnapi — public API snapshot of `@devframes/plugin-messages`
  */
-// #region Functions
-export function createMessagesDevframe(_) {}
-// #endregion
-
 // #region Variables
 export var DEFAULT_PORT /* const */
 export var MESSAGES_UPDATED_EVENT /* const */
@@ -12,6 +8,9 @@ export var PLUGIN_ID /* const */
 // #endregion
 
 // #region Default Export
-function _default(_) {}
-export default _default
+export default createMessagesDevframe
+// #endregion
+
+// #region Other
+export { createMessagesDevframe }
 // #endregion
\ No newline at end of file
diff --git a/tests/__snapshots__/tsnapi/@devframes/plugin-og/client.snapshot.d.ts b/tests/__snapshots__/tsnapi/@devframes/plugin-og/client.snapshot.d.ts
deleted file mode 100644
index 88bb25887..000000000
--- a/tests/__snapshots__/tsnapi/@devframes/plugin-og/client.snapshot.d.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * Generated by tsnapi — public API snapshot of `@devframes/plugin-og/client`
- */
-// #region Functions
-export declare function connectOg(_?: DevframeRpcClientOptions): Promise<import("devframe/client").DevframeRpcClient>;
-// #endregion
-
-// #region Other
-export { DevframeConnectionStatus }
-export { DevframeRpcClient }
-export { OgHeadTag }
-export { OgHeadTagName }
-export { OgResolveInput }
-export { OgSnapshot }
-// #endregion
\ No newline at end of file
diff --git a/tests/__snapshots__/tsnapi/@devframes/plugin-og/client.snapshot.js b/tests/__snapshots__/tsnapi/@devframes/plugin-og/client.snapshot.js
deleted file mode 100644
index b3e97da4f..000000000
--- a/tests/__snapshots__/tsnapi/@devframes/plugin-og/client.snapshot.js
+++ /dev/null
@@ -1,6 +0,0 @@
-/**
- * Generated by tsnapi — public API snapshot of `@devframes/plugin-og/client`
- */
-// #region Functions
-export function connectOg(_) {}
-// #endregion
\ No newline at end of file
diff --git a/tests/__snapshots__/tsnapi/@devframes/plugin-og/index.snapshot.d.ts b/tests/__snapshots__/tsnapi/@devframes/plugin-og/index.snapshot.d.ts
index 93d8ff520..2c558795a 100644
--- a/tests/__snapshots__/tsnapi/@devframes/plugin-og/index.snapshot.d.ts
+++ b/tests/__snapshots__/tsnapi/@devframes/plugin-og/index.snapshot.d.ts
@@ -12,26 +12,6 @@ export interface OgDevframeOptions {
   defaultUrl?: string;
   fetch?: OgFetch;
 }
-export interface OgHeadTag {
-  tag: OgHeadTagName;
-  name: string;
-  value: string;
-}
-export interface OgResolveInput {
-  url?: string;
-}
-export interface OgSnapshot {
-  requestedUrl: string;
-  url: string;
-  status: number;
-  fetchedAt: number;
-  tags: OgHeadTag[];
-}
-// #endregion
-
-// #region Types
-export type OgFetch = (_: string, _: RequestInit) => Promise<Response>;
-export type OgHeadTagName = 'html' | 'link' | 'meta' | 'title';
 // #endregion
 
 // #region Functions
@@ -41,4 +21,12 @@ export declare function createOgDevframe(_?: OgDevframeOptions): DevframeDefinit
 // #region Default Export
 declare function _default(_?: OgDevframeOptions): DevframeDefinition;
 export default _default
+// #endregion
+
+// #region Other
+export { OgFetch }
+export { OgHeadTag }
+export { OgHeadTagName }
+export { OgResolveInput }
+export { OgSnapshot }
 // #endregion
\ No newline at end of file
diff --git a/tests/__snapshots__/tsnapi/@devframes/plugin-og/index.snapshot.js b/tests/__snapshots__/tsnapi/@devframes/plugin-og/index.snapshot.js
index fdaf75ed5..412dab203 100644
--- a/tests/__snapshots__/tsnapi/@devframes/plugin-og/index.snapshot.js
+++ b/tests/__snapshots__/tsnapi/@devframes/plugin-og/index.snapshot.js
@@ -1,11 +1,10 @@
 /**
  * Generated by tsnapi — public API snapshot of `@devframes/plugin-og`
  */
-// #region Functions
-export function createOgDevframe(_) {}
+// #region Default Export
+export default createOgDevframe
 // #endregion
 
-// #region Default Export
-function _default(_) {}
-export default _default
+// #region Other
+export { createOgDevframe }
 // #endregion
\ No newline at end of file
diff --git a/tests/__snapshots__/tsnapi/@devframes/plugin-terminals/client.snapshot.d.ts b/tests/__snapshots__/tsnapi/@devframes/plugin-terminals/client.snapshot.d.ts
index b3f140bb1..03aa49c07 100644
--- a/tests/__snapshots__/tsnapi/@devframes/plugin-terminals/client.snapshot.d.ts
+++ b/tests/__snapshots__/tsnapi/@devframes/plugin-terminals/client.snapshot.d.ts
@@ -1,23 +1,4 @@
 /**
  * Generated by tsnapi — public API snapshot of `@devframes/plugin-terminals/client`
  */
-// #region Interfaces
-export interface MountTerminalsOptions {
-  rpc?: DevframeRpcClient;
-  autostart?: boolean;
-}
-export interface TerminalsHandle {
-  rpc: DevframeRpcClient;
-  dispose: () => void;
-}
-// #endregion
-
-// #region Functions
-export declare function mountTerminals(_: HTMLElement, _?: MountTerminalsOptions): Promise<TerminalsHandle>;
-// #endregion
-
-// #region Other
-export { TERMINAL_STREAM_CHANNEL }
-export { TerminalPreset }
-export { TerminalSessionInfo }
-// #endregion
\ No newline at end of file
+/* no exports */
\ No newline at end of file
diff --git a/tests/__snapshots__/tsnapi/@devframes/plugin-terminals/index.snapshot.js b/tests/__snapshots__/tsnapi/@devframes/plugin-terminals/index.snapshot.js
index 4f15ebbd8..1cf92d121 100644
--- a/tests/__snapshots__/tsnapi/@devframes/plugin-terminals/index.snapshot.js
+++ b/tests/__snapshots__/tsnapi/@devframes/plugin-terminals/index.snapshot.js
@@ -1,10 +1,6 @@
 /**
  * Generated by tsnapi — public API snapshot of `@devframes/plugin-terminals`
  */
-// #region Functions
-export function createTerminalsDevframe(_) {}
-// #endregion
-
 // #region Variables
 export var DEFAULT_PORT /* const */
 export var PLUGIN_ID /* const */
@@ -14,6 +10,9 @@ export var TERMINAL_STREAM_CHANNEL /* const */
 // #endregion
 
 // #region Default Export
-function _default(_) {}
-export default _default
+export default createTerminalsDevframe
+// #endregion
+
+// #region Other
+export { createTerminalsDevframe }
 // #endregion
\ No newline at end of file
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 162245f5f..194a71a3d 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -217,53 +217,50 @@
       "json-render/dashboard": [
         "./examples/json-render/src/dashboard.ts"
       ],
-      "@devframes/plugin-code-server/client": [
-        "./plugins/code-server/src/client/index.ts"
-      ],
       "@devframes/plugin-code-server/node": [
-        "./plugins/code-server/src/node/index.ts"
+        "./plugins/code-server/src/node/setup.ts"
       ],
       "@devframes/plugin-code-server/constants": [
-        "./plugins/code-server/src/constants.ts"
+        "./plugins/code-server/src/node/constants.ts"
       ],
       "@devframes/plugin-code-server/types": [
-        "./plugins/code-server/src/types.ts"
+        "./plugins/code-server/src/node/types.ts"
       ],
       "@devframes/plugin-code-server/rpc": [
-        "./plugins/code-server/src/rpc/index.ts"
+        "./plugins/code-server/src/node/rpc/index.ts"
       ],
       "@devframes/plugin-code-server/cli": [
-        "./plugins/code-server/src/cli.ts"
+        "./plugins/code-server/src/node/cli.ts"
       ],
       "@devframes/plugin-code-server/vite": [
-        "./plugins/code-server/src/vite.ts"
+        "./plugins/code-server/src/node/vite.ts"
       ],
       "@devframes/plugin-code-server": [
-        "./plugins/code-server/src/index.ts"
+        "./plugins/code-server/src/node/index.ts"
       ],
       "@devframes/plugin-terminals/client": [
-        "./plugins/terminals/src/client/index.ts"
+        "./plugins/terminals/app/client/index.ts"
       ],
       "@devframes/plugin-terminals/node": [
-        "./plugins/terminals/src/node/index.ts"
+        "./plugins/terminals/src/node/setup.ts"
       ],
       "@devframes/plugin-terminals/constants": [
-        "./plugins/terminals/src/constants.ts"
+        "./plugins/terminals/src/node/constants.ts"
       ],
       "@devframes/plugin-terminals/types": [
-        "./plugins/terminals/src/types.ts"
+        "./plugins/terminals/src/node/types.ts"
       ],
       "@devframes/plugin-terminals/cli": [
-        "./plugins/terminals/src/cli.ts"
+        "./plugins/terminals/src/node/cli.ts"
       ],
       "@devframes/plugin-terminals/vite": [
-        "./plugins/terminals/src/vite.ts"
+        "./plugins/terminals/src/node/vite.ts"
       ],
       "@devframes/plugin-terminals": [
-        "./plugins/terminals/src/index.ts"
+        "./plugins/terminals/src/node/index.ts"
       ],
       "@devframes/plugin-git": [
-        "./plugins/git/src/index.ts"
+        "./plugins/git/src/node/index.ts"
       ],
       "devframe/recipes/interactive-auth": [
         "./packages/devframe/src/recipes/interactive-auth.ts"
@@ -277,116 +274,86 @@
       "devframe": [
         "./packages/devframe/src"
       ],
-      "@devframes/plugin-data-inspector/client": [
-        "./plugins/data-inspector/src/client/index.ts"
+      "@devframes/plugin-data-inspector/inject": [
+        "./plugins/data-inspector/src/inject/index.ts"
       ],
       "@devframes/plugin-data-inspector/node": [
-        "./plugins/data-inspector/src/node/index.ts"
+        "./plugins/data-inspector/src/node/setup.ts"
       ],
       "@devframes/plugin-data-inspector/registry": [
-        "./plugins/data-inspector/src/registry/index.ts"
+        "./plugins/data-inspector/src/node/registry/index.ts"
       ],
       "@devframes/plugin-data-inspector/engine": [
-        "./plugins/data-inspector/src/engine/index.ts"
-      ],
-      "@devframes/plugin-data-inspector/inject": [
-        "./plugins/data-inspector/src/inject/index.ts"
+        "./plugins/data-inspector/src/node/engine/index.ts"
       ],
       "@devframes/plugin-data-inspector/cli": [
-        "./plugins/data-inspector/src/cli.ts"
-      ],
-      "@devframes/plugin-data-inspector/vite": [
-        "./plugins/data-inspector/src/vite.ts"
+        "./plugins/data-inspector/src/node/cli.ts"
       ],
       "@devframes/plugin-data-inspector": [
-        "./plugins/data-inspector/src/index.ts"
-      ],
-      "@devframes/plugin-inspect/client": [
-        "./plugins/inspect/src/client/index.ts"
+        "./plugins/data-inspector/src/node/index.ts"
       ],
       "@devframes/plugin-inspect/node": [
-        "./plugins/inspect/src/node/index.ts"
+        "./plugins/inspect/src/node/setup.ts"
       ],
       "@devframes/plugin-inspect/cli": [
-        "./plugins/inspect/src/cli.ts"
-      ],
-      "@devframes/plugin-inspect/vite": [
-        "./plugins/inspect/src/vite.ts"
+        "./plugins/inspect/src/node/cli.ts"
       ],
       "@devframes/plugin-inspect": [
-        "./plugins/inspect/src/index.ts"
-      ],
-      "@devframes/plugin-og/client": [
-        "./plugins/og/src/client/index.ts"
+        "./plugins/inspect/src/node/index.ts"
       ],
       "@devframes/plugin-og/node": [
-        "./plugins/og/src/node/index.ts"
+        "./plugins/og/src/node/setup.ts"
       ],
       "@devframes/plugin-og/rpc": [
-        "./plugins/og/src/rpc/index.ts"
+        "./plugins/og/src/node/rpc/index.ts"
       ],
       "@devframes/plugin-og/cli": [
-        "./plugins/og/src/cli.ts"
-      ],
-      "@devframes/plugin-og/vite": [
-        "./plugins/og/src/vite.ts"
+        "./plugins/og/src/node/cli.ts"
       ],
       "@devframes/plugin-og": [
-        "./plugins/og/src/index.ts"
+        "./plugins/og/src/node/index.ts"
       ],
-      "@devframes/plugin-a11y/client": [
-        "./plugins/a11y/src/client/index.ts"
+      "@devframes/plugin-a11y/client-script": [
+        "./plugins/a11y/src/client-script/index.ts"
       ],
       "@devframes/plugin-a11y/node": [
-        "./plugins/a11y/src/node/index.ts"
+        "./plugins/a11y/src/node/setup.ts"
       ],
       "@devframes/plugin-a11y/cli": [
-        "./plugins/a11y/src/cli.ts"
-      ],
-      "@devframes/plugin-a11y/vite": [
-        "./plugins/a11y/src/vite.ts"
+        "./plugins/a11y/src/node/cli.ts"
       ],
       "@devframes/plugin-a11y": [
-        "./plugins/a11y/src/index.ts"
+        "./plugins/a11y/src/node/index.ts"
       ],
       "@devframes/plugin-messages/client": [
-        "./plugins/messages/src/client/index.ts"
+        "./plugins/messages/app/client/index.ts"
       ],
       "@devframes/plugin-messages/node": [
-        "./plugins/messages/src/node/index.ts"
+        "./plugins/messages/src/node/setup.ts"
       ],
       "@devframes/plugin-messages/constants": [
-        "./plugins/messages/src/constants.ts"
+        "./plugins/messages/src/node/constants.ts"
       ],
       "@devframes/plugin-messages/rpc": [
-        "./plugins/messages/src/rpc/index.ts"
+        "./plugins/messages/src/node/rpc/index.ts"
       ],
       "@devframes/plugin-messages/cli": [
-        "./plugins/messages/src/cli.ts"
-      ],
-      "@devframes/plugin-messages/vite": [
-        "./plugins/messages/src/vite.ts"
+        "./plugins/messages/src/node/cli.ts"
       ],
       "@devframes/plugin-messages": [
-        "./plugins/messages/src/index.ts"
-      ],
-      "@devframes/plugin-assets/client": [
-        "./plugins/assets/src/client/index.ts"
+        "./plugins/messages/src/node/index.ts"
       ],
       "@devframes/plugin-assets/node": [
-        "./plugins/assets/src/node/index.ts"
+        "./plugins/assets/src/node/setup.ts"
       ],
       "@devframes/plugin-assets/rpc": [
-        "./plugins/assets/src/rpc/index.ts"
+        "./plugins/assets/src/node/rpc/index.ts"
       ],
       "@devframes/plugin-assets/cli": [
-        "./plugins/assets/src/cli.ts"
-      ],
-      "@devframes/plugin-assets/vite": [
-        "./plugins/assets/src/vite.ts"
+        "./plugins/assets/src/node/cli.ts"
       ],
       "@devframes/plugin-assets": [
-        "./plugins/assets/src/index.ts"
+        "./plugins/assets/src/node/index.ts"
       ],
       "@devframes/service-git": [
         "./services/git/src/index.ts"