From d2a07127bfd4933d67b5a822d3d1e99ccd2df0d5 Mon Sep 17 00:00:00 2001
From: "Anthony Fu (via agent)" <reg-github-bot@antfu.me>
Date: Fri, 19 Jun 2026 03:30:37 +0000
Subject: [PATCH 1/5] feat(plugins): add @devframes/plugin-code-server

Embed code-server (VS Code in the browser) as a devframe panel: detect a
local install (with install guidance when missing), launch it on demand,
and render the editor in an auto-authenticated iframe.

code-server runs with password auth; the plugin hands the matching session
cookie to the already-authorized devframe client so the editor loads signed
in. Ships standalone (CLI), Vite, and embedded host integrations.
---
 alias.ts                                      |   9 +
 plugins/code-server/.gitignore                |   3 +
 plugins/code-server/README.md                 |  66 +++
 plugins/code-server/bin.mjs                   |  13 +
 plugins/code-server/package.json              |  71 +++
 plugins/code-server/src/cli.ts                |  16 +
 plugins/code-server/src/client/index.ts       | 419 ++++++++++++++++++
 plugins/code-server/src/constants.ts          |  33 ++
 plugins/code-server/src/index.ts              |  63 +++
 plugins/code-server/src/node/context.ts       |  16 +
 plugins/code-server/src/node/detect.ts        |  64 +++
 plugins/code-server/src/node/diagnostics.ts   |  48 ++
 plugins/code-server/src/node/index.ts         |  33 ++
 plugins/code-server/src/node/supervisor.ts    | 321 ++++++++++++++
 .../code-server/src/rpc/functions/detect.ts   |  16 +
 .../code-server/src/rpc/functions/start.ts    |  17 +
 .../code-server/src/rpc/functions/status.ts   |  12 +
 plugins/code-server/src/rpc/functions/stop.ts |  16 +
 plugins/code-server/src/rpc/index.ts          |  21 +
 plugins/code-server/src/spa/index.html        |  19 +
 plugins/code-server/src/spa/main.ts           |   9 +
 plugins/code-server/src/spa/vite.config.ts    |  26 ++
 plugins/code-server/src/types.ts              | 100 +++++
 plugins/code-server/src/vite.ts               |  25 ++
 plugins/code-server/test/_utils.ts            |  63 +++
 plugins/code-server/test/code-server.test.ts  |  91 ++++
 plugins/code-server/tsconfig.json             |   7 +
 plugins/code-server/tsdown.config.ts          |  65 +++
 pnpm-lock.yaml                                |  47 +-
 .../plugin-code-server/cli.snapshot.d.ts      |   6 +
 .../plugin-code-server/cli.snapshot.js        |   6 +
 .../plugin-code-server/client.snapshot.d.ts   |  23 +
 .../plugin-code-server/client.snapshot.js     |  10 +
 .../constants.snapshot.d.ts                   |  12 +
 .../plugin-code-server/constants.snapshot.js  |  15 +
 .../plugin-code-server/index.snapshot.d.ts    |  28 ++
 .../plugin-code-server/index.snapshot.js      |  19 +
 .../plugin-code-server/node.snapshot.d.ts     |  75 ++++
 .../plugin-code-server/node.snapshot.js       |  49 ++
 .../plugin-code-server/rpc.snapshot.d.ts      |  62 +++
 .../plugin-code-server/rpc.snapshot.js        |   6 +
 .../plugin-code-server/types.snapshot.d.ts    |  51 +++
 .../plugin-code-server/types.snapshot.js      |   4 +
 .../plugin-code-server/vite.snapshot.d.ts     |  12 +
 .../plugin-code-server/vite.snapshot.js       |   6 +
 tsconfig.base.json                            |  24 +
 turbo.json                                    |   5 +
 vitest.config.ts                              |   1 +
 48 files changed, 2108 insertions(+), 15 deletions(-)
 create mode 100644 plugins/code-server/.gitignore
 create mode 100644 plugins/code-server/README.md
 create mode 100755 plugins/code-server/bin.mjs
 create mode 100644 plugins/code-server/package.json
 create mode 100644 plugins/code-server/src/cli.ts
 create mode 100644 plugins/code-server/src/client/index.ts
 create mode 100644 plugins/code-server/src/constants.ts
 create mode 100644 plugins/code-server/src/index.ts
 create mode 100644 plugins/code-server/src/node/context.ts
 create mode 100644 plugins/code-server/src/node/detect.ts
 create mode 100644 plugins/code-server/src/node/diagnostics.ts
 create mode 100644 plugins/code-server/src/node/index.ts
 create mode 100644 plugins/code-server/src/node/supervisor.ts
 create mode 100644 plugins/code-server/src/rpc/functions/detect.ts
 create mode 100644 plugins/code-server/src/rpc/functions/start.ts
 create mode 100644 plugins/code-server/src/rpc/functions/status.ts
 create mode 100644 plugins/code-server/src/rpc/functions/stop.ts
 create mode 100644 plugins/code-server/src/rpc/index.ts
 create mode 100644 plugins/code-server/src/spa/index.html
 create mode 100644 plugins/code-server/src/spa/main.ts
 create mode 100644 plugins/code-server/src/spa/vite.config.ts
 create mode 100644 plugins/code-server/src/types.ts
 create mode 100644 plugins/code-server/src/vite.ts
 create mode 100644 plugins/code-server/test/_utils.ts
 create mode 100644 plugins/code-server/test/code-server.test.ts
 create mode 100644 plugins/code-server/tsconfig.json
 create mode 100644 plugins/code-server/tsdown.config.ts
 create mode 100644 tests/__snapshots__/tsnapi/@devframes/plugin-code-server/cli.snapshot.d.ts
 create mode 100644 tests/__snapshots__/tsnapi/@devframes/plugin-code-server/cli.snapshot.js
 create mode 100644 tests/__snapshots__/tsnapi/@devframes/plugin-code-server/client.snapshot.d.ts
 create mode 100644 tests/__snapshots__/tsnapi/@devframes/plugin-code-server/client.snapshot.js
 create mode 100644 tests/__snapshots__/tsnapi/@devframes/plugin-code-server/constants.snapshot.d.ts
 create mode 100644 tests/__snapshots__/tsnapi/@devframes/plugin-code-server/constants.snapshot.js
 create mode 100644 tests/__snapshots__/tsnapi/@devframes/plugin-code-server/index.snapshot.d.ts
 create mode 100644 tests/__snapshots__/tsnapi/@devframes/plugin-code-server/index.snapshot.js
 create mode 100644 tests/__snapshots__/tsnapi/@devframes/plugin-code-server/node.snapshot.d.ts
 create mode 100644 tests/__snapshots__/tsnapi/@devframes/plugin-code-server/node.snapshot.js
 create mode 100644 tests/__snapshots__/tsnapi/@devframes/plugin-code-server/rpc.snapshot.d.ts
 create mode 100644 tests/__snapshots__/tsnapi/@devframes/plugin-code-server/rpc.snapshot.js
 create mode 100644 tests/__snapshots__/tsnapi/@devframes/plugin-code-server/types.snapshot.d.ts
 create mode 100644 tests/__snapshots__/tsnapi/@devframes/plugin-code-server/types.snapshot.js
 create mode 100644 tests/__snapshots__/tsnapi/@devframes/plugin-code-server/vite.snapshot.d.ts
 create mode 100644 tests/__snapshots__/tsnapi/@devframes/plugin-code-server/vite.snapshot.js

diff --git a/alias.ts b/alias.ts
index a47ae93..a0e951a 100644
--- a/alias.ts
+++ b/alias.ts
@@ -4,6 +4,7 @@ import { join, relative } from 'pathe'
 
 const root = fileURLToPath(new URL('.', import.meta.url))
 const r = (path: string) => fileURLToPath(new URL(`./packages/${path}`, import.meta.url))
+const p = (path: string) => fileURLToPath(new URL(`./plugins/${path}`, import.meta.url))
 
 export const alias = {
   'devframe/rpc/transports/ws-server': r('devframe/src/rpc/transports/ws-server.ts'),
@@ -44,6 +45,14 @@ export const alias = {
   '@devframes/hub': r('hub/src/index.ts'),
   '@devframes/nuxt/runtime/plugin.client': r('nuxt/src/runtime/plugin.client.ts'),
   '@devframes/nuxt': r('nuxt/src/index.ts'),
+  '@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'),
   'devframe/recipes/open-helpers': r('devframe/src/recipes/open-helpers.ts'),
   'devframe/client': r('devframe/src/client/index.ts'),
   'devframe': r('devframe/src'),
diff --git a/plugins/code-server/.gitignore b/plugins/code-server/.gitignore
new file mode 100644
index 0000000..415e0c0
--- /dev/null
+++ b/plugins/code-server/.gitignore
@@ -0,0 +1,3 @@
+dist
+.turbo
+*.tsbuildinfo
diff --git a/plugins/code-server/README.md b/plugins/code-server/README.md
new file mode 100644
index 0000000..76904d8
--- /dev/null
+++ b/plugins/code-server/README.md
@@ -0,0 +1,66 @@
+# @devframes/plugin-code-server
+
+Run [code-server](https://github.com/coder/code-server) (VS Code in the
+browser) as a devframe panel. The plugin detects a local `code-server`
+install, launches it on demand, and embeds the editor in an
+auto-authenticated `<iframe>`.
+
+## How it works
+
+- **Detection** — on startup it runs `code-server --version`. When the binary
+  is missing, the launcher renders install instructions and links instead of a
+  launch button.
+- **Launch** — the launcher's button starts code-server as a managed child
+  process bound to a free port, scoped to the workspace. Readiness is probed
+  via code-server's `/healthz` endpoint.
+- **Auto-auth** — code-server runs with password auth. The plugin generates a
+  random token, sets `HASHED_PASSWORD` to its SHA-256, and hands the matching
+  session cookie back to the already-authorized devframe client. The launcher
+  applies that cookie for the current host before loading the iframe, so the
+  editor opens already signed in — no code-server login page.
+
+The editor iframe points at code-server's own origin
+(`<protocol>//<host>:<port>/`), so WebSocket traffic flows directly without a
+reverse proxy.
+
+## Usage
+
+### Standalone CLI
+
+```sh
+npx @devframes/plugin-code-server        # dev server + launcher
+```
+
+### Programmatic
+
+```ts
+import { createCodeServerDevframe } from '@devframes/plugin-code-server'
+
+export default createCodeServerDevframe({
+  // bin: 'code-server',     // binary to detect/launch (default: PATH)
+  // serverPort: 8080,       // force a port (default: free port near 8080)
+  // args: ['--disable-getting-started-override'],
+})
+```
+
+### Vite host
+
+```ts
+import { codeServerVite } from '@devframes/plugin-code-server/vite'
+
+export default {
+  plugins: [codeServerVite()],
+}
+```
+
+## RPC
+
+| Function | Type | Purpose |
+|----------|------|---------|
+| `devframes-plugin-code-server:detect` | query | Re-probe for the binary; returns `{ installed, version, bin }`. |
+| `devframes-plugin-code-server:status` | query | Current status + auth cookie when running. |
+| `devframes-plugin-code-server:start` | action | Launch and wait for readiness. |
+| `devframes-plugin-code-server:stop` | action | Stop the process. |
+
+Status (minus the auth cookie) is mirrored into the
+`devframes-plugin-code-server:state` shared state for reactive UIs.
diff --git a/plugins/code-server/bin.mjs b/plugins/code-server/bin.mjs
new file mode 100755
index 0000000..d692b01
--- /dev/null
+++ b/plugins/code-server/bin.mjs
@@ -0,0 +1,13 @@
+#!/usr/bin/env node
+import process from 'node:process'
+import { createCodeServerCli } from './dist/cli.mjs'
+
+async function main() {
+  const cli = createCodeServerCli()
+  await cli.parse()
+}
+
+main().catch((error) => {
+  console.error(error)
+  process.exit(1)
+})
diff --git a/plugins/code-server/package.json b/plugins/code-server/package.json
new file mode 100644
index 0000000..7b18706
--- /dev/null
+++ b/plugins/code-server/package.json
@@ -0,0 +1,71 @@
+{
+  "name": "@devframes/plugin-code-server",
+  "type": "module",
+  "version": "0.5.2",
+  "description": "Run code-server (VS Code in the browser) as a devframe panel — detect a local install, launch it on demand, and embed the editor in an auto-authenticated iframe.",
+  "author": "Anthony Fu <anthonyfu117@hotmail.com>",
+  "license": "MIT",
+  "homepage": "https://github.com/devframes/devframe#readme",
+  "repository": {
+    "directory": "plugins/code-server",
+    "type": "git",
+    "url": "git+https://github.com/devframes/devframe.git"
+  },
+  "bugs": "https://github.com/devframes/devframe/issues",
+  "keywords": [
+    "devframe",
+    "devframe-plugin",
+    "devtools",
+    "code-server",
+    "vscode"
+  ],
+  "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",
+    "./package.json": "./package.json"
+  },
+  "types": "./dist/index.d.mts",
+  "bin": {
+    "devframe-code-server": "./bin.mjs"
+  },
+  "files": [
+    "bin.mjs",
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsdown && vite build --config src/spa/vite.config.ts",
+    "watch": "tsdown --watch",
+    "dev": "vite --config src/spa/vite.config.ts --host 0.0.0.0",
+    "test": "vitest run",
+    "prepack": "pnpm run build"
+  },
+  "peerDependencies": {
+    "devframe": "workspace:*",
+    "vite": "^8.0.0"
+  },
+  "peerDependenciesMeta": {
+    "vite": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "get-port-please": "catalog:deps",
+    "nostics": "catalog:deps"
+  },
+  "devDependencies": {
+    "@types/node": "catalog:types",
+    "devframe": "workspace:*",
+    "h3": "catalog:deps",
+    "tsdown": "catalog:build",
+    "vite": "catalog:build",
+    "vitest": "catalog:testing",
+    "ws": "catalog:deps"
+  }
+}
diff --git a/plugins/code-server/src/cli.ts b/plugins/code-server/src/cli.ts
new file mode 100644
index 0000000..aef8a58
--- /dev/null
+++ b/plugins/code-server/src/cli.ts
@@ -0,0 +1,16 @@
+import type { CliHandle, CreateCliOptions } from 'devframe/adapters/cli'
+import type { CodeServerOptions } from './types'
+import { createCli } from 'devframe/adapters/cli'
+import { createCodeServerDevframe } from './index'
+
+/**
+ * Build a standalone CLI for the code-server panel — `dev` / `build` / `mcp`
+ * subcommands, backed by {@link createCodeServerDevframe}. Used by the package
+ * `bin` (`devframe-code-server`).
+ */
+export function createCodeServerCli(
+  options: CodeServerOptions = {},
+  cliOptions: CreateCliOptions = {},
+): CliHandle {
+  return createCli(createCodeServerDevframe(options), cliOptions)
+}
diff --git a/plugins/code-server/src/client/index.ts b/plugins/code-server/src/client/index.ts
new file mode 100644
index 0000000..03bb526
--- /dev/null
+++ b/plugins/code-server/src/client/index.ts
@@ -0,0 +1,419 @@
+import type { DevframeRpcClient } from 'devframe/client'
+import type {
+  CodeServerAuth,
+  CodeServerDetection,
+  CodeServerServerInfo,
+  CodeServerSharedState,
+  CodeServerStatusResult,
+} from '../types'
+import { connectDevframe } from 'devframe/client'
+import { STATE_KEY } from '../constants'
+
+export interface MountCodeServerOptions {
+  /** Pre-connected client. When omitted, `connectDevframe()` is awaited. */
+  rpc?: DevframeRpcClient
+}
+
+export interface CodeServerHandle {
+  rpc: DevframeRpcClient
+  dispose: () => void
+}
+
+const DOCS_URL = 'https://coder.com/docs/code-server/latest/install'
+const REPO_URL = 'https://github.com/coder/code-server'
+
+const INSTALL_COMMANDS: { label: string, command: string }[] = [
+  { label: 'Install script (Linux / macOS)', command: 'curl -fsSL https://code-server.dev/install.sh | sh' },
+  { label: 'npm', command: 'npm install -g code-server' },
+  { label: 'Homebrew', command: 'brew install code-server' },
+]
+
+const UI_CSS = `
+.dcs-root { position: absolute; inset: 0; display: flex; flex-direction: column;
+  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
+  background: var(--dcs-bg); color: var(--dcs-fg); overflow: hidden;
+  --dcs-bg: #ffffff; --dcs-fg: #1f2328; --dcs-muted: #59636e; --dcs-border: #d0d7de;
+  --dcs-surface: #f6f8fa; --dcs-surface-hover: #eaeef2; --dcs-accent: #0969da;
+  --dcs-accent-fg: #ffffff; --dcs-ok: #1a7f37; --dcs-err: #cf222e; --dcs-code-bg: #f6f8fa; }
+@media (prefers-color-scheme: dark) {
+  .dcs-root { --dcs-bg: #0d1117; --dcs-fg: #e6edf3; --dcs-muted: #8b949e; --dcs-border: #30363d;
+    --dcs-surface: #161b22; --dcs-surface-hover: #21262d; --dcs-accent: #2f81f7;
+    --dcs-accent-fg: #ffffff; --dcs-ok: #3fb950; --dcs-err: #f85149; --dcs-code-bg: #161b22; } }
+.dcs-center { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; }
+.dcs-card { width: 100%; max-width: 560px; }
+.dcs-eyebrow { display: flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .04em;
+  text-transform: uppercase; color: var(--dcs-muted); margin: 0 0 10px; }
+.dcs-title { font-size: 22px; font-weight: 650; margin: 0 0 8px; }
+.dcs-lead { font-size: 14px; line-height: 1.55; color: var(--dcs-muted); margin: 0 0 20px; }
+.dcs-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px;
+  color: var(--dcs-muted); margin: 0 0 20px; }
+.dcs-meta code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--dcs-fg); }
+.dcs-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
+.dcs-btn { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13px;
+  font-weight: 550; padding: 8px 16px; border-radius: 7px; border: 1px solid var(--dcs-border);
+  background: var(--dcs-surface); color: var(--dcs-fg); cursor: pointer; transition: background .12s; }
+.dcs-btn:hover { background: var(--dcs-surface-hover); }
+.dcs-btn:disabled { opacity: .55; cursor: default; }
+.dcs-btn.primary { background: var(--dcs-accent); color: var(--dcs-accent-fg); border-color: transparent; }
+.dcs-btn.primary:hover { filter: brightness(1.07); background: var(--dcs-accent); }
+.dcs-link { color: var(--dcs-accent); text-decoration: none; font-size: 13px; }
+.dcs-link:hover { text-decoration: underline; }
+.dcs-install { display: flex; flex-direction: column; gap: 12px; margin: 0 0 20px; }
+.dcs-install-row label { display: block; font-size: 12px; color: var(--dcs-muted); margin: 0 0 4px; }
+.dcs-cmd { display: flex; align-items: center; gap: 8px; background: var(--dcs-code-bg);
+  border: 1px solid var(--dcs-border); border-radius: 7px; padding: 8px 10px; }
+.dcs-cmd code { flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
+  white-space: nowrap; overflow-x: auto; color: var(--dcs-fg); }
+.dcs-copy { font: inherit; font-size: 11px; padding: 3px 9px; border-radius: 5px; cursor: pointer;
+  border: 1px solid var(--dcs-border); background: var(--dcs-surface); color: var(--dcs-muted); flex: none; }
+.dcs-copy:hover { color: var(--dcs-fg); }
+.dcs-foot { font-size: 12.5px; color: var(--dcs-muted); margin: 18px 0 0; }
+.dcs-error { font-size: 13px; color: var(--dcs-err); background: color-mix(in srgb, var(--dcs-err) 9%, transparent);
+  border: 1px solid color-mix(in srgb, var(--dcs-err) 35%, transparent); border-radius: 7px;
+  padding: 10px 12px; margin: 0 0 18px; white-space: pre-wrap; word-break: break-word; }
+.dcs-spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--dcs-border);
+  border-top-color: var(--dcs-accent); animation: dcs-spin .7s linear infinite; }
+@keyframes dcs-spin { to { transform: rotate(360deg); } }
+.dcs-bar { display: flex; align-items: center; gap: 10px; padding: 6px 10px;
+  border-bottom: 1px solid var(--dcs-border); background: var(--dcs-bg); font-size: 12.5px; flex: none; }
+.dcs-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dcs-ok); flex: none; }
+.dcs-bar-label { font-weight: 600; }
+.dcs-bar-meta { color: var(--dcs-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
+.dcs-bar-spacer { flex: 1; }
+.dcs-bar .dcs-btn { padding: 4px 10px; font-size: 12px; }
+.dcs-frame-wrap { position: relative; flex: 1; min-height: 0; }
+.dcs-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--dcs-bg); }
+`
+
+let stylesInjected = false
+function injectStyles(): void {
+  if (stylesInjected || typeof document === 'undefined')
+    return
+  stylesInjected = true
+  const style = document.createElement('style')
+  style.textContent = UI_CSS
+  document.head.appendChild(style)
+}
+
+function el<K extends keyof HTMLElementTagNameMap>(tag: K, className?: string, text?: string): HTMLElementTagNameMap[K] {
+  const node = document.createElement(tag)
+  if (className)
+    node.className = className
+  if (text != null)
+    node.textContent = text
+  return node
+}
+
+/**
+ * Mount the code-server launcher into `container`. Renders one of:
+ *  - install instructions when the binary is missing;
+ *  - a launch screen when it is installed but stopped;
+ *  - a progress state while starting;
+ *  - the editor in an auto-authenticated `<iframe>` once running.
+ *
+ * The connection is assumed already authorized with devframe's auth, so the
+ * server-issued session cookie is applied transparently before the iframe
+ * loads — the user never sees code-server's login page.
+ */
+export async function mountCodeServer(
+  container: HTMLElement,
+  options: MountCodeServerOptions = {},
+): Promise<CodeServerHandle> {
+  injectStyles()
+
+  const rpc = options.rpc ?? (await connectDevframe())
+  if (rpc.connectionMeta.backend === 'websocket')
+    await rpc.ensureTrusted(5000).catch(() => {})
+
+  const root = el('div', 'dcs-root')
+  container.append(root)
+
+  let detection: CodeServerDetection = { checked: false, installed: false, bin: 'code-server' }
+  let server: CodeServerServerInfo = { status: 'stopped' }
+  let auth: CodeServerAuth | undefined
+  let busy = false
+  let frameSrc: string | null = null
+  let disposed = false
+
+  function applyResult(result: CodeServerStatusResult): void {
+    detection = result.detection
+    server = result.server
+    if (result.auth)
+      auth = result.auth
+  }
+
+  function codeServerUrl(port: number): string {
+    return `${location.protocol}//${location.hostname}:${port}/`
+  }
+
+  /** Sign the iframe in by setting code-server's session cookie for this host. */
+  function applyAuthCookie(): void {
+    if (!auth)
+      return
+    document.cookie = `${auth.cookieName}=${auth.cookieValue}; path=/; SameSite=Lax`
+  }
+
+  async function call<T>(method: string, ...args: any[]): Promise<T | undefined> {
+    try {
+      return await rpc.call(method as any, ...args) as T
+    }
+    catch (error) {
+      server = { status: 'error', error: error instanceof Error ? error.message : String(error) }
+      return undefined
+    }
+  }
+
+  async function launch(): Promise<void> {
+    if (busy)
+      return
+    busy = true
+    render()
+    const result = await call<CodeServerStatusResult>('devframes-plugin-code-server:start', {})
+    if (result)
+      applyResult(result)
+    busy = false
+    render()
+  }
+
+  async function stop(): Promise<void> {
+    if (busy)
+      return
+    busy = true
+    render()
+    const result = await call<CodeServerStatusResult>('devframes-plugin-code-server:stop')
+    if (result)
+      applyResult(result)
+    auth = undefined
+    frameSrc = null
+    busy = false
+    render()
+  }
+
+  async function recheck(): Promise<void> {
+    if (busy)
+      return
+    busy = true
+    render()
+    await call('devframes-plugin-code-server:detect')
+    busy = false
+    render()
+  }
+
+  // ---- renderers -----------------------------------------------------------
+
+  function shell(...children: Node[]): void {
+    const center = el('div', 'dcs-center')
+    const card = el('div', 'dcs-card')
+    card.append(...children)
+    center.append(card)
+    root.replaceChildren(center)
+  }
+
+  function renderConnecting(): void {
+    const wrap = el('div', 'dcs-actions')
+    wrap.append(el('div', 'dcs-spinner'), el('span', 'dcs-lead', 'Connecting to devframe…'))
+    shell(wrap)
+  }
+
+  function renderNotInstalled(): void {
+    const nodes: Node[] = []
+    nodes.push(el('p', 'dcs-eyebrow', 'code-server'))
+    nodes.push(el('h1', 'dcs-title', 'code-server is not installed'))
+    nodes.push(el('p', 'dcs-lead', 'Install code-server (VS Code in the browser) to open the editor here. Pick whichever fits your setup, then re-check.'))
+
+    const install = el('div', 'dcs-install')
+    for (const { label, command } of INSTALL_COMMANDS) {
+      const row = el('div', 'dcs-install-row')
+      row.append(el('label', undefined, label))
+      const cmd = el('div', 'dcs-cmd')
+      cmd.append(el('code', undefined, command))
+      const copy = el('button', 'dcs-copy', 'Copy')
+      copy.onclick = () => {
+        navigator.clipboard?.writeText(command).then(() => {
+          copy.textContent = 'Copied'
+          setTimeout(() => {
+            copy.textContent = 'Copy'
+          }, 1200)
+        }).catch(() => {})
+      }
+      cmd.append(copy)
+      row.append(cmd)
+      install.append(row)
+    }
+    nodes.push(install)
+
+    const actions = el('div', 'dcs-actions')
+    const recheckBtn = el('button', 'dcs-btn primary', busy ? 'Checking…' : 'Re-check')
+    recheckBtn.disabled = busy
+    recheckBtn.onclick = recheck
+    actions.append(recheckBtn)
+    const docs = el('a', 'dcs-link', 'Installation docs ↗') as HTMLAnchorElement
+    docs.href = DOCS_URL
+    docs.target = '_blank'
+    docs.rel = 'noreferrer'
+    actions.append(docs)
+    const repo = el('a', 'dcs-link', 'GitHub ↗') as HTMLAnchorElement
+    repo.href = REPO_URL
+    repo.target = '_blank'
+    repo.rel = 'noreferrer'
+    actions.append(repo)
+    nodes.push(actions)
+    shell(...nodes)
+  }
+
+  function renderLaunch(): void {
+    const nodes: Node[] = []
+    nodes.push(el('p', 'dcs-eyebrow', 'code-server'))
+    nodes.push(el('h1', 'dcs-title', 'Launch the editor'))
+    nodes.push(el('p', 'dcs-lead', 'Start a code-server instance scoped to this workspace and open VS Code right here. The server runs with a generated password and the editor is signed in automatically.'))
+
+    if (server.status === 'error' && server.error)
+      nodes.push(el('div', 'dcs-error', server.error))
+
+    const meta = el('div', 'dcs-meta')
+    if (detection.version) {
+      const v = el('span')
+      v.append(document.createTextNode('version '), el('code', undefined, detection.version))
+      meta.append(v)
+    }
+    const b = el('span')
+    b.append(document.createTextNode('binary '), el('code', undefined, detection.bin))
+    meta.append(b)
+    nodes.push(meta)
+
+    const actions = el('div', 'dcs-actions')
+    const launchBtn = el('button', 'dcs-btn primary')
+    if (busy)
+      launchBtn.append(el('span', 'dcs-spinner'), document.createTextNode('Starting…'))
+    else
+      launchBtn.textContent = 'Launch code-server'
+    launchBtn.disabled = busy
+    launchBtn.onclick = launch
+    actions.append(launchBtn)
+    nodes.push(actions)
+    shell(...nodes)
+  }
+
+  function renderStarting(): void {
+    const wrap = el('div', 'dcs-actions')
+    wrap.append(el('div', 'dcs-spinner'), el('span', 'dcs-lead', 'Starting code-server…'))
+    shell(wrap)
+  }
+
+  function renderRunning(): void {
+    const port = server.port
+    if (port == null) {
+      renderLaunch()
+      return
+    }
+    const url = codeServerUrl(port)
+    applyAuthCookie()
+
+    const bar = el('div', 'dcs-bar')
+    bar.append(el('span', 'dcs-dot'))
+    bar.append(el('span', 'dcs-bar-label', 'code-server'))
+    bar.append(el('span', 'dcs-bar-meta', new URL(url).host))
+    bar.append(el('div', 'dcs-bar-spacer'))
+
+    const openBtn = el('button', 'dcs-btn', 'Open in new tab')
+    openBtn.onclick = () => window.open(url, '_blank', 'noreferrer')
+    bar.append(openBtn)
+
+    const reloadBtn = el('button', 'dcs-btn', 'Reload')
+    bar.append(reloadBtn)
+
+    const stopBtn = el('button', 'dcs-btn', busy ? 'Stopping…' : 'Stop')
+    stopBtn.disabled = busy
+    stopBtn.onclick = stop
+    bar.append(stopBtn)
+
+    const frameWrap = el('div', 'dcs-frame-wrap')
+    const frame = el('iframe', 'dcs-frame') as HTMLIFrameElement
+    frame.setAttribute('allow', 'clipboard-read; clipboard-write; cross-origin-isolated')
+    frame.src = url
+    frameSrc = url
+    reloadBtn.onclick = () => {
+      applyAuthCookie()
+      frame.src = url
+    }
+    frameWrap.append(frame)
+
+    root.replaceChildren(bar, frameWrap)
+  }
+
+  function render(): void {
+    if (disposed)
+      return
+    if (server.status === 'running' && server.port != null) {
+      // Never load the iframe before the auth handoff arrives, otherwise
+      // code-server would render its login page inside the frame.
+      if (!auth) {
+        renderStarting()
+        return
+      }
+      // Avoid tearing down a live editor iframe on unrelated state updates.
+      if (frameSrc === codeServerUrl(server.port) && root.querySelector('.dcs-frame'))
+        return
+      renderRunning()
+      return
+    }
+    frameSrc = null
+    if (server.status === 'starting' || (busy && server.status !== 'error')) {
+      renderStarting()
+      return
+    }
+    if (!detection.checked) {
+      renderConnecting()
+      return
+    }
+    if (!detection.installed) {
+      renderNotInstalled()
+      return
+    }
+    renderLaunch()
+  }
+
+  // ---- bootstrap -----------------------------------------------------------
+
+  renderConnecting()
+
+  const initial = await call<CodeServerStatusResult>('devframes-plugin-code-server:status')
+  if (initial)
+    applyResult(initial)
+  render()
+
+  const state = await rpc.sharedState.get(STATE_KEY, {
+    initialValue: { detection, server } as CodeServerSharedState,
+  })
+  const current = state.value() as CodeServerSharedState
+  detection = current.detection ?? detection
+  server = current.server ?? server
+
+  const off = state.on('updated', (full: CodeServerSharedState) => {
+    detection = full.detection ?? detection
+    server = full.server ?? server
+    // Shared state never carries the cookie; fetch it when the server comes up.
+    if (server.status === 'running' && !auth) {
+      void call<CodeServerStatusResult>('devframes-plugin-code-server:status').then((result) => {
+        if (result?.auth)
+          auth = result.auth
+        render()
+      })
+      return
+    }
+    render()
+  })
+  render()
+
+  return {
+    rpc,
+    dispose() {
+      disposed = true
+      off?.()
+      root.remove()
+    },
+  }
+}
+
+export { STATE_KEY } from '../constants'
+export type { CodeServerServerInfo, CodeServerSharedState, CodeServerStatus } from '../types'
diff --git a/plugins/code-server/src/constants.ts b/plugins/code-server/src/constants.ts
new file mode 100644
index 0000000..265ab9b
--- /dev/null
+++ b/plugins/code-server/src/constants.ts
@@ -0,0 +1,33 @@
+/** Stable devframe id for the code-server plugin. */
+export const PLUGIN_ID = 'devframes-plugin-code-server'
+
+/**
+ * Shared-state key holding the serializable, secret-free server status and
+ * detection result. The authentication cookie is never published here — it
+ * is returned only from the `start` / `status` RPCs to the already-authorized
+ * client (see {@link CodeServerAuth}).
+ */
+export const STATE_KEY = 'devframes-plugin-code-server:state'
+
+/** Default dev-server port for the plugin's own launcher SPA (standalone CLI). */
+export const DEFAULT_PORT = 9013
+
+/** Preferred port for the spawned code-server process (falls back if taken). */
+export const DEFAULT_CODE_SERVER_PORT = 8080
+
+/** How long to wait for code-server to answer its `/healthz` probe. */
+export const DEFAULT_START_TIMEOUT = 30_000
+
+/** code-server's session cookie base name (see `getCookieSessionName`). */
+export const SESSION_COOKIE_BASE = 'code-server-session'
+
+/**
+ * Compute code-server's session cookie name for an optional `--cookie-suffix`.
+ * Mirrors code-server's own `getCookieSessionName` so the client sets the
+ * exact cookie the server reads.
+ */
+export function getCookieSessionName(suffix?: string): string {
+  return suffix
+    ? `${SESSION_COOKIE_BASE}-${suffix.replace(/[^a-z0-9-]/gi, '-')}`
+    : SESSION_COOKIE_BASE
+}
diff --git a/plugins/code-server/src/index.ts b/plugins/code-server/src/index.ts
new file mode 100644
index 0000000..7a5cfa0
--- /dev/null
+++ b/plugins/code-server/src/index.ts
@@ -0,0 +1,63 @@
+import type { DevframeDefinition } from 'devframe/types'
+import type { CodeServerOptions } from './types'
+import { existsSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+import { defineDevframe } from 'devframe/types'
+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 launcher SPA is built (by Vite) into `dist/spa`. From both the source
+// entry (`src/index.ts`, via the workspace alias) and the published entry
+// (`dist/index.mjs`), `../dist/spa` resolves to `<pkg>/dist/spa`.
+const distDir = fileURLToPath(new URL('../dist/spa', import.meta.url))
+
+/**
+ * Build a {@link DevframeDefinition} for the code-server panel. The same
+ * definition runs standalone (`createCli`), mounts into a Vite host
+ * (`/vite`), or docks inside a hub — its `setup` only relies on the core
+ * devframe RPC + shared-state surface.
+ *
+ * @example
+ * ```ts
+ * import { createCodeServerDevframe } from '@devframes/plugin-code-server'
+ *
+ * export default createCodeServerDevframe({ serverPort: 8080 })
+ * ```
+ */
+export function createCodeServerDevframe(options: CodeServerOptions = {}): DevframeDefinition {
+  const resolvedDist = options.distDir ?? distDir
+  return defineDevframe({
+    id: PLUGIN_ID,
+    name: 'Code Server',
+    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,
+      distDir: existsSync(resolvedDist) ? resolvedDist : undefined,
+      // Single-user localhost tool: auto-trust the connection so the launcher's
+      // shared-state subscription and the auth handoff work without a manual
+      // round-trip. Hosted adapters supply their own auth layer.
+      auth: false,
+    },
+    spa: { loader: 'none' },
+    async setup(ctx) {
+      const { setupCodeServer } = await import('./node/index')
+      await setupCodeServer(ctx, options)
+    },
+  })
+}
+
+/** Default-configured code-server devframe. */
+const codeServer: DevframeDefinition = createCodeServerDevframe()
+export default codeServer
diff --git a/plugins/code-server/src/node/context.ts b/plugins/code-server/src/node/context.ts
new file mode 100644
index 0000000..8bc799c
--- /dev/null
+++ b/plugins/code-server/src/node/context.ts
@@ -0,0 +1,16 @@
+import type { DevframeNodeContext } from 'devframe/types'
+import type { CodeServerSupervisor } from './supervisor'
+import { diagnostics } from './diagnostics'
+
+const supervisors = new WeakMap<DevframeNodeContext, CodeServerSupervisor>()
+
+export function setCodeServerSupervisor(ctx: DevframeNodeContext, supervisor: CodeServerSupervisor): void {
+  supervisors.set(ctx, supervisor)
+}
+
+export function getCodeServerSupervisor(ctx: DevframeNodeContext): CodeServerSupervisor {
+  const supervisor = supervisors.get(ctx)
+  if (!supervisor)
+    throw diagnostics.DP_CODE_SERVER_0004({})
+  return supervisor
+}
diff --git a/plugins/code-server/src/node/detect.ts b/plugins/code-server/src/node/detect.ts
new file mode 100644
index 0000000..966a563
--- /dev/null
+++ b/plugins/code-server/src/node/detect.ts
@@ -0,0 +1,64 @@
+import type { Buffer } from 'node:buffer'
+import { spawn } from 'node:child_process'
+
+export interface DetectCodeServerResult {
+  installed: boolean
+  version?: string
+  bin: string
+}
+
+/**
+ * Probe the host for a usable code-server binary by running
+ * `<bin> --version`. Resolves to `installed: false` when the binary is
+ * missing (ENOENT), errors, or exits non-zero — never throws — so the
+ * launcher can fall back to install instructions.
+ *
+ * `code-server --version` prints e.g. `4.96.4 abc123 with Code 1.96.4`; the
+ * leading token is taken as the version.
+ */
+export function detectCodeServer(bin = 'code-server', timeoutMs = 5000): Promise<DetectCodeServerResult> {
+  return new Promise((resolve) => {
+    let settled = false
+    let stdout = ''
+
+    const finish = (result: DetectCodeServerResult): void => {
+      if (settled)
+        return
+      settled = true
+      resolve(result)
+    }
+
+    let child
+    try {
+      child = spawn(bin, ['--version'], { windowsHide: true, stdio: ['ignore', 'pipe', 'ignore'] })
+    }
+    catch {
+      finish({ installed: false, bin })
+      return
+    }
+
+    const timer = setTimeout(() => {
+      child.kill()
+      finish({ installed: false, bin })
+    }, timeoutMs)
+    timer.unref?.()
+
+    child.stdout?.on('data', (chunk: Buffer) => {
+      stdout += chunk.toString('utf8')
+    })
+    child.on('error', () => {
+      clearTimeout(timer)
+      finish({ installed: false, bin })
+    })
+    child.on('exit', (code) => {
+      clearTimeout(timer)
+      if (code === 0) {
+        const version = stdout.trim().split(/\s+/)[0] || undefined
+        finish({ installed: true, version, bin })
+      }
+      else {
+        finish({ installed: false, bin })
+      }
+    })
+  })
+}
diff --git a/plugins/code-server/src/node/diagnostics.ts b/plugins/code-server/src/node/diagnostics.ts
new file mode 100644
index 0000000..cbde91b
--- /dev/null
+++ b/plugins/code-server/src/node/diagnostics.ts
@@ -0,0 +1,48 @@
+import type { Diagnostic } from 'nostics'
+import { colors as c } from 'devframe/utils/colors'
+import { defineDiagnostics } from 'nostics'
+import { ansiFormatter } from 'nostics/formatters/ansi'
+
+const formatAnsi = ansiFormatter(c)
+
+interface ReporterOptions { method?: 'log' | 'warn' | 'error' }
+
+function reporter(d: Diagnostic, { method = 'warn' }: ReporterOptions = {}): void {
+  // eslint-disable-next-line no-console
+  console[method](formatAnsi(d))
+}
+
+/**
+ * Structured diagnostics for the code-server plugin. Uses the plugin's own
+ * `DP_CODE_SERVER_` prefix per the built-in plugin convention, keeping it
+ * collision-free with devframe core (`DF`) and the hub (`DF8xxx`).
+ */
+export const diagnostics = defineDiagnostics({
+  docsBase: 'https://devfra.me/errors',
+  reporters: [reporter],
+  codes: {
+    DP_CODE_SERVER_0001: {
+      why: (p: { bin: string }) =>
+        `code-server is not installed (could not run "${p.bin} --version")`,
+      fix: 'Install code-server — e.g. `curl -fsSL https://code-server.dev/install.sh | sh` — or set the `bin` option to its path. See https://coder.com/docs/code-server/latest/install',
+    },
+    DP_CODE_SERVER_0002: {
+      why: (p: { port: number, timeout: number }) =>
+        `code-server did not become ready on port ${p.port} within ${p.timeout}ms`,
+      fix: 'Check the code-server logs for startup errors, raise `startTimeout`, or free the port.',
+    },
+    DP_CODE_SERVER_0003: {
+      why: (p: { bin: string, reason: string }) =>
+        `Failed to spawn code-server ("${p.bin}"): ${p.reason}`,
+    },
+    DP_CODE_SERVER_0004: {
+      why: 'code-server supervisor is not initialised on this context',
+      fix: 'Call setupCodeServer(ctx) (or use createCodeServerDevframe) before invoking the code-server RPCs.',
+    },
+    DP_CODE_SERVER_0005: {
+      why: (p: { code: number }) =>
+        `code-server exited unexpectedly with code ${p.code}`,
+      fix: 'Inspect the captured output in the launcher and re-launch.',
+    },
+  },
+})
diff --git a/plugins/code-server/src/node/index.ts b/plugins/code-server/src/node/index.ts
new file mode 100644
index 0000000..c47a60b
--- /dev/null
+++ b/plugins/code-server/src/node/index.ts
@@ -0,0 +1,33 @@
+import type { DevframeNodeContext } from 'devframe/types'
+import type { CodeServerOptions } from '../types'
+import { serverFunctions } from '../rpc/index'
+import { setCodeServerSupervisor } from './context'
+import { CodeServerSupervisor } from './supervisor'
+
+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) — 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)
+
+  return supervisor
+}
diff --git a/plugins/code-server/src/node/supervisor.ts b/plugins/code-server/src/node/supervisor.ts
new file mode 100644
index 0000000..6ef0bec
--- /dev/null
+++ b/plugins/code-server/src/node/supervisor.ts
@@ -0,0 +1,321 @@
+import type { DevframeNodeContext } from 'devframe/types'
+import type { SharedState } from 'devframe/utils/shared-state'
+import type { Buffer } from 'node:buffer'
+import type { ChildProcess } from 'node:child_process'
+import type {
+  CodeServerAuth,
+  CodeServerDetection,
+  CodeServerOptions,
+  CodeServerServerInfo,
+  CodeServerSharedState,
+  CodeServerStartRequest,
+  CodeServerStartResult,
+  CodeServerStatusResult,
+} from '../types'
+import { spawn } from 'node:child_process'
+import { createHash, randomBytes } from 'node:crypto'
+import { request as httpRequest } from 'node:http'
+import process from 'node:process'
+import { getPort } from 'get-port-please'
+import {
+  DEFAULT_CODE_SERVER_PORT,
+  DEFAULT_START_TIMEOUT,
+  getCookieSessionName,
+  STATE_KEY,
+} from '../constants'
+import { detectCodeServer } from './detect'
+import { diagnostics } from './diagnostics'
+
+/** Recent output lines retained for surfacing startup failures. */
+const LOG_BUFFER_LINES = 200
+/** Interval between readiness probes. */
+const PROBE_INTERVAL = 250
+
+/**
+ * Owns the lifecycle of a single code-server child process: detects the
+ * binary, launches it with a freshly generated password-auth token, probes
+ * `/healthz` for readiness, and mirrors a secret-free status into shared
+ * state. The auth cookie is handed back only through `start()` / `status()`
+ * so the already-authorized client can sign the iframe in automatically.
+ *
+ * Depends only on the core devframe context (shared state), not on the hub.
+ */
+export class CodeServerSupervisor {
+  private readonly bin: string
+  private readonly workspace: string
+  private readonly host: string
+  private readonly forcedPort?: number
+  private readonly extraArgs: string[]
+  private readonly extraEnv: Record<string, string>
+  private readonly cookieName: string
+  private readonly cookieSuffix?: string
+  private readonly startTimeout: number
+
+  private state?: SharedState<CodeServerSharedState>
+  private detection: CodeServerDetection
+  private server: CodeServerServerInfo = { status: 'stopped' }
+
+  private proc?: ChildProcess
+  private cookieValue?: string
+  private logBuffer: string[] = []
+  private cleanupRegistered = false
+
+  constructor(
+    private readonly ctx: DevframeNodeContext,
+    options: CodeServerOptions = {},
+  ) {
+    this.bin = options.bin ?? 'code-server'
+    this.workspace = options.cwd ?? ctx.cwd
+    this.host = options.host ?? '0.0.0.0'
+    this.forcedPort = options.serverPort
+    this.extraArgs = options.args ?? []
+    this.extraEnv = options.env ?? {}
+    this.cookieSuffix = options.cookieSuffix
+    this.cookieName = getCookieSessionName(options.cookieSuffix)
+    this.startTimeout = options.startTimeout ?? DEFAULT_START_TIMEOUT
+    this.detection = { checked: false, installed: false, bin: this.bin }
+  }
+
+  /** Resolve shared state, register process-exit cleanup, run first detection. */
+  async init(): Promise<void> {
+    if (this.state)
+      return
+    this.state = await this.ctx.rpc.sharedState.get(STATE_KEY, {
+      initialValue: { detection: this.detection, server: this.server } as CodeServerSharedState,
+    })
+    this.registerCleanup()
+    await this.detect()
+  }
+
+  /** Re-probe for the code-server binary and publish the result. */
+  async detect(): Promise<CodeServerDetection> {
+    const result = await detectCodeServer(this.bin)
+    this.detection = { checked: true, ...result }
+    this.publish()
+    return this.detection
+  }
+
+  /** Current status (+ auth when running) for the launcher UI. */
+  status(): CodeServerStatusResult {
+    return {
+      detection: { ...this.detection },
+      server: { ...this.server },
+      auth: this.authInfo(),
+    }
+  }
+
+  /**
+   * Launch code-server (if not already up) and resolve once it answers its
+   * readiness probe. Idempotent while starting/running — returns the live
+   * status instead of spawning a second process.
+   */
+  async start(req: CodeServerStartRequest = {}): Promise<CodeServerStartResult> {
+    if (this.server.status === 'running' || this.server.status === 'starting')
+      return this.status()
+
+    if (!this.detection.checked)
+      await this.detect()
+    if (!this.detection.installed)
+      throw diagnostics.DP_CODE_SERVER_0001({ bin: this.bin })
+
+    const port = this.forcedPort ?? (await getPort({ host: '127.0.0.1', port: DEFAULT_CODE_SERVER_PORT }))
+    const token = randomBytes(32).toString('hex')
+    this.cookieValue = createHash('sha256').update(token).digest('hex')
+
+    const folder = req.folder ?? this.workspace
+    const args = [
+      '--auth',
+      'password',
+      '--bind-addr',
+      `${this.host}:${port}`,
+      '--disable-telemetry',
+      '--disable-update-check',
+      ...(this.cookieSuffix ? ['--cookie-suffix', this.cookieSuffix] : []),
+      ...this.extraArgs,
+      folder,
+    ]
+
+    const env: Record<string, string> = {}
+    for (const [k, v] of Object.entries(process.env)) {
+      if (v !== undefined)
+        env[k] = v
+    }
+    delete env.PASSWORD
+    env.HASHED_PASSWORD = this.cookieValue
+    Object.assign(env, this.extraEnv)
+
+    this.logBuffer = []
+
+    let child: ChildProcess
+    try {
+      child = spawn(this.bin, args, {
+        cwd: folder,
+        env,
+        windowsHide: true,
+        stdio: ['ignore', 'pipe', 'pipe'],
+      })
+    }
+    catch (error) {
+      const reason = error instanceof Error ? error.message : String(error)
+      this.server = { status: 'error', error: reason }
+      this.publish()
+      throw diagnostics.DP_CODE_SERVER_0003({ bin: this.bin, reason })
+    }
+
+    this.proc = child
+    this.server = { status: 'starting', port, pid: child.pid, startedAt: Date.now() }
+    this.publish()
+
+    const capture = (chunk: Buffer): void => this.appendLog(chunk.toString('utf8'))
+    child.stdout?.on('data', capture)
+    child.stderr?.on('data', capture)
+
+    child.on('error', (error) => {
+      if (this.proc !== child)
+        return
+      this.server = { status: 'error', error: error.message }
+      this.proc = undefined
+      this.cookieValue = undefined
+      this.publish()
+    })
+    child.on('exit', (code) => {
+      if (this.proc !== child)
+        return
+      const exitCode = code ?? 0
+      const unexpected = this.server.status !== 'stopped'
+      this.proc = undefined
+      this.cookieValue = undefined
+      this.server = unexpected && exitCode !== 0
+        ? { status: 'error', error: this.lastLog() || `code-server exited with code ${exitCode}` }
+        : { status: 'stopped' }
+      if (unexpected && exitCode !== 0)
+        diagnostics.DP_CODE_SERVER_0005({ code: exitCode }, { method: 'warn' })
+      this.publish()
+    })
+
+    const ready = await this.waitForReady(port)
+    if (!ready) {
+      this.terminate(child)
+      this.server = { status: 'error', error: this.lastLog() || 'startup timed out' }
+      this.proc = undefined
+      this.cookieValue = undefined
+      this.publish()
+      throw diagnostics.DP_CODE_SERVER_0002({ port, timeout: this.startTimeout })
+    }
+
+    // The exit handler may have fired during the probe window.
+    if (this.proc !== child)
+      return this.status()
+
+    this.server = { status: 'running', port, pid: child.pid, startedAt: this.server.startedAt }
+    this.publish()
+    return this.status()
+  }
+
+  /** Stop the code-server process and reset to `stopped`. */
+  stop(): CodeServerStatusResult {
+    const child = this.proc
+    this.proc = undefined
+    this.cookieValue = undefined
+    this.server = { status: 'stopped' }
+    if (child)
+      this.terminate(child)
+    this.publish()
+    return this.status()
+  }
+
+  /** Kill the process on host shutdown / test teardown. */
+  dispose(): void {
+    if (this.proc)
+      this.terminate(this.proc)
+    this.proc = undefined
+    this.cookieValue = undefined
+  }
+
+  private authInfo(): CodeServerAuth | undefined {
+    if (this.server.status !== 'running' || !this.cookieValue)
+      return undefined
+    return { cookieName: this.cookieName, cookieValue: this.cookieValue }
+  }
+
+  private terminate(child: ChildProcess): void {
+    try {
+      child.kill('SIGTERM')
+    }
+    catch {
+      // Already gone.
+    }
+  }
+
+  private appendLog(text: string): void {
+    for (const line of text.split('\n')) {
+      if (line.length === 0)
+        continue
+      this.logBuffer.push(line)
+    }
+    if (this.logBuffer.length > LOG_BUFFER_LINES)
+      this.logBuffer.splice(0, this.logBuffer.length - LOG_BUFFER_LINES)
+  }
+
+  private lastLog(): string | undefined {
+    return this.logBuffer.length ? this.logBuffer[this.logBuffer.length - 1] : undefined
+  }
+
+  private publish(): void {
+    this.state?.mutate((draft) => {
+      draft.detection = { ...this.detection }
+      draft.server = { ...this.server }
+    })
+  }
+
+  /**
+   * Poll code-server's unauthenticated `/healthz` endpoint until it responds
+   * or the timeout elapses. Returns false if the process exits first.
+   */
+  private async waitForReady(port: number): Promise<boolean> {
+    const deadline = Date.now() + this.startTimeout
+    while (Date.now() < deadline) {
+      if (!this.proc)
+        return false
+      if (await probeHealthz(port))
+        return true
+      await delay(PROBE_INTERVAL)
+    }
+    return false
+  }
+
+  private registerCleanup(): void {
+    if (this.cleanupRegistered)
+      return
+    this.cleanupRegistered = true
+    // Synchronously reap the child when the host process exits. Signals
+    // (SIGINT/SIGTERM) are left to the host's own shutdown — the child shares
+    // our process group, so a terminal interrupt reaches it directly.
+    process.once('exit', () => this.dispose())
+  }
+}
+
+function delay(ms: number): Promise<void> {
+  return new Promise((resolve) => {
+    const timer = setTimeout(resolve, ms)
+    timer.unref?.()
+  })
+}
+
+function probeHealthz(port: number): Promise<boolean> {
+  return new Promise((resolve) => {
+    const req = httpRequest(
+      { host: '127.0.0.1', port, path: '/healthz', method: 'GET', timeout: 1500 },
+      (res) => {
+        res.resume()
+        resolve((res.statusCode ?? 0) >= 200 && (res.statusCode ?? 0) < 500)
+      },
+    )
+    req.on('error', () => resolve(false))
+    req.on('timeout', () => {
+      req.destroy()
+      resolve(false)
+    })
+    req.end()
+  })
+}
diff --git a/plugins/code-server/src/rpc/functions/detect.ts b/plugins/code-server/src/rpc/functions/detect.ts
new file mode 100644
index 0000000..c7c6043
--- /dev/null
+++ b/plugins/code-server/src/rpc/functions/detect.ts
@@ -0,0 +1,16 @@
+import type { CodeServerDetection } from '../../types'
+import { defineRpcFunction } from 'devframe'
+import { getCodeServerSupervisor } from '../../node/context'
+
+export const detect = defineRpcFunction({
+  name: 'devframes-plugin-code-server:detect',
+  type: 'query',
+  jsonSerializable: true,
+  agent: {
+    description: 'Check whether the code-server binary is installed locally, returning its version when found.',
+    safety: 'read',
+  },
+  setup: ctx => ({
+    handler: (): Promise<CodeServerDetection> => getCodeServerSupervisor(ctx).detect(),
+  }),
+})
diff --git a/plugins/code-server/src/rpc/functions/start.ts b/plugins/code-server/src/rpc/functions/start.ts
new file mode 100644
index 0000000..a4b4d26
--- /dev/null
+++ b/plugins/code-server/src/rpc/functions/start.ts
@@ -0,0 +1,17 @@
+import type { CodeServerStartRequest, CodeServerStartResult } from '../../types'
+import { defineRpcFunction } from 'devframe'
+import { getCodeServerSupervisor } from '../../node/context'
+
+export const start = defineRpcFunction({
+  name: 'devframes-plugin-code-server:start',
+  type: 'action',
+  jsonSerializable: true,
+  agent: {
+    description: 'Launch the code-server editor (if not already running) and wait until it is ready. Optionally open a specific workspace folder.',
+    safety: 'action',
+  },
+  setup: ctx => ({
+    handler: (req: CodeServerStartRequest = {}): Promise<CodeServerStartResult> =>
+      getCodeServerSupervisor(ctx).start(req),
+  }),
+})
diff --git a/plugins/code-server/src/rpc/functions/status.ts b/plugins/code-server/src/rpc/functions/status.ts
new file mode 100644
index 0000000..cafdc83
--- /dev/null
+++ b/plugins/code-server/src/rpc/functions/status.ts
@@ -0,0 +1,12 @@
+import type { CodeServerStatusResult } from '../../types'
+import { defineRpcFunction } from 'devframe'
+import { getCodeServerSupervisor } from '../../node/context'
+
+export const status = defineRpcFunction({
+  name: 'devframes-plugin-code-server:status',
+  type: 'query',
+  jsonSerializable: true,
+  setup: ctx => ({
+    handler: (): CodeServerStatusResult => getCodeServerSupervisor(ctx).status(),
+  }),
+})
diff --git a/plugins/code-server/src/rpc/functions/stop.ts b/plugins/code-server/src/rpc/functions/stop.ts
new file mode 100644
index 0000000..35fcfee
--- /dev/null
+++ b/plugins/code-server/src/rpc/functions/stop.ts
@@ -0,0 +1,16 @@
+import type { CodeServerStatusResult } from '../../types'
+import { defineRpcFunction } from 'devframe'
+import { getCodeServerSupervisor } from '../../node/context'
+
+export const stop = defineRpcFunction({
+  name: 'devframes-plugin-code-server:stop',
+  type: 'action',
+  jsonSerializable: true,
+  agent: {
+    description: 'Stop the running code-server editor process.',
+    safety: 'action',
+  },
+  setup: ctx => ({
+    handler: (): CodeServerStatusResult => getCodeServerSupervisor(ctx).stop(),
+  }),
+})
diff --git a/plugins/code-server/src/rpc/index.ts b/plugins/code-server/src/rpc/index.ts
new file mode 100644
index 0000000..0a1eb2e
--- /dev/null
+++ b/plugins/code-server/src/rpc/index.ts
@@ -0,0 +1,21 @@
+import type { RpcDefinitionsToFunctions } from 'devframe/rpc'
+import type { CodeServerSharedState } from '../types'
+import { detect } from './functions/detect'
+import { start } from './functions/start'
+import { status } from './functions/status'
+import { stop } from './functions/stop'
+
+export const serverFunctions = [
+  detect,
+  status,
+  start,
+  stop,
+] as const
+
+declare module 'devframe' {
+  interface DevframeRpcServerFunctions extends RpcDefinitionsToFunctions<typeof serverFunctions> {}
+
+  interface DevframeRpcSharedStates {
+    'devframes-plugin-code-server:state': CodeServerSharedState
+  }
+}
diff --git a/plugins/code-server/src/spa/index.html b/plugins/code-server/src/spa/index.html
new file mode 100644
index 0000000..07c7c48
--- /dev/null
+++ b/plugins/code-server/src/spa/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <base href="./" />
+    <title>Code Server</title>
+    <style>
+      html, body, #app { height: 100%; margin: 0; }
+      #app { position: relative; }
+      body { background: #ffffff; }
+      @media (prefers-color-scheme: dark) { body { background: #0d1117; } }
+    </style>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./main.ts"></script>
+  </body>
+</html>
diff --git a/plugins/code-server/src/spa/main.ts b/plugins/code-server/src/spa/main.ts
new file mode 100644
index 0000000..b8192d9
--- /dev/null
+++ b/plugins/code-server/src/spa/main.ts
@@ -0,0 +1,9 @@
+import { mountCodeServer } from '../client/index'
+
+const app = document.getElementById('app')
+if (!app)
+  throw new Error('#app mount node missing from index.html')
+
+mountCodeServer(app).catch((error) => {
+  app.textContent = `Failed to connect: ${error instanceof Error ? error.message : String(error)}`
+})
diff --git a/plugins/code-server/src/spa/vite.config.ts b/plugins/code-server/src/spa/vite.config.ts
new file mode 100644
index 0000000..79fe3dd
--- /dev/null
+++ b/plugins/code-server/src/spa/vite.config.ts
@@ -0,0 +1,26 @@
+import { fileURLToPath } from 'node:url'
+import { viteDevBridge } from 'devframe/helpers/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 — it discovers its runtime base from
+// `document.baseURI` and connects via `connectDevframe()`. The build is copied
+// verbatim by `createBuild`; no HTML rewriting.
+//
+// `viteDevBridge({ devMiddleware: true })` runs a side-car devframe RPC + WS
+// server during `vite dev` so the launcher can detect/start/stop code-server
+// while Vite serves the UI source with HMR.
+export default defineConfig({
+  base: './',
+  root: fileURLToPath(new URL('.', import.meta.url)),
+  resolve: { alias },
+  plugins: [
+    viteDevBridge(createCodeServerDevframe(), { devMiddleware: true, base: '/' }),
+  ],
+  build: {
+    outDir: fileURLToPath(new URL('../../dist/spa', import.meta.url)),
+    emptyOutDir: true,
+  },
+})
diff --git a/plugins/code-server/src/types.ts b/plugins/code-server/src/types.ts
new file mode 100644
index 0000000..bc4ed14
--- /dev/null
+++ b/plugins/code-server/src/types.ts
@@ -0,0 +1,100 @@
+/** Lifecycle state of the managed code-server process. */
+export type CodeServerStatus = 'stopped' | 'starting' | 'running' | 'error'
+
+/**
+ * Result of probing the host for a usable `code-server` binary. Drives the
+ * launcher UI: when `installed` is false the SPA renders install instructions
+ * instead of a launch button.
+ */
+export interface CodeServerDetection {
+  /** Whether detection has run at least once on this context. */
+  checked: boolean
+  /** Whether the `code-server` binary resolved and reported a version. */
+  installed: boolean
+  /** Version string reported by `code-server --version`, when installed. */
+  version?: string
+  /** The binary name / path probed (configurable via options). */
+  bin: string
+}
+
+/** Serializable, secret-free description of the code-server process. */
+export interface CodeServerServerInfo {
+  status: CodeServerStatus
+  /** Port code-server is bound to, when starting/running. */
+  port?: number
+  /** Epoch ms the current process was started. */
+  startedAt?: number
+  /** OS process id, when running. */
+  pid?: number
+  /** Last error message, when `status === 'error'`. */
+  error?: string
+}
+
+/**
+ * The full shared-state payload broadcast to subscribed clients. Deliberately
+ * carries no authentication material — see {@link CodeServerAuth}.
+ */
+export interface CodeServerSharedState {
+  detection: CodeServerDetection
+  server: CodeServerServerInfo
+}
+
+/**
+ * Auto-authentication handoff for the iframe. code-server runs with password
+ * auth (`HASHED_PASSWORD`); the valid session is the SHA-256 of a server-side
+ * token. The client sets `cookieName=cookieValue` for the current host before
+ * loading the iframe, so the editor loads already signed in — no login page.
+ *
+ * Returned only from the `start` / `status` RPCs (the connection is already
+ * authorized with devframe's auth), never published to shared state.
+ */
+export interface CodeServerAuth {
+  cookieName: string
+  cookieValue: string
+}
+
+/** Result of the `status` query — shared state plus auth when running. */
+export interface CodeServerStatusResult extends CodeServerSharedState {
+  auth?: CodeServerAuth
+}
+
+/** Result of the `start` action — identical shape to {@link CodeServerStatusResult}. */
+export type CodeServerStartResult = CodeServerStatusResult
+
+/** Wire payload for the `start` RPC. */
+export interface CodeServerStartRequest {
+  /** Workspace folder to open. Defaults to the configured / context cwd. */
+  folder?: string
+}
+
+/** Options accepted by {@link createCodeServerDevframe}. */
+export interface CodeServerOptions {
+  /** code-server binary to detect and launch. Defaults to `code-server` (PATH). */
+  bin?: string
+  /** Workspace folder code-server opens. Defaults to `ctx.cwd`. */
+  cwd?: string
+  /** Force a specific code-server port. Defaults to a free port near 8080. */
+  serverPort?: number
+  /** Host code-server binds to. Defaults to `0.0.0.0` so the preview is reachable. */
+  host?: string
+  /** Extra CLI arguments forwarded verbatim to code-server. */
+  args?: string[]
+  /** Environment variables merged into the code-server process. */
+  env?: Record<string, string>
+  /**
+   * `--cookie-suffix` passed to code-server, isolating its session cookie from
+   * other local code-server instances. Supported on recent code-server only;
+   * left unset by default for compatibility.
+   */
+  cookieSuffix?: string
+  /** Milliseconds to wait for code-server readiness before failing. */
+  startTimeout?: number
+  /** Mount path override for the launcher SPA. */
+  basePath?: string
+  /** Launcher SPA dist dir override. Defaults to the bundled SPA. */
+  distDir?: string
+  /** CLI binary name. */
+  command?: string
+  /** Preferred dev-server port for the launcher SPA. */
+  port?: number
+}
diff --git a/plugins/code-server/src/vite.ts b/plugins/code-server/src/vite.ts
new file mode 100644
index 0000000..0d85b30
--- /dev/null
+++ b/plugins/code-server/src/vite.ts
@@ -0,0 +1,25 @@
+import type { DevframeVitePlugin, ViteDevBridgeOptions } from 'devframe/helpers/vite'
+import type { CodeServerOptions } from './types'
+import { viteDevBridge } from 'devframe/helpers/vite'
+import { createCodeServerDevframe } from './index'
+
+export interface CodeServerViteOptions extends CodeServerOptions {
+  /** Forwarded to the underlying `viteDevBridge` (mount base, etc.). */
+  vite?: ViteDevBridgeOptions
+}
+
+/**
+ * Mount the code-server launcher into an existing Vite dev server. Returns two
+ * plugins: a bridge that starts the devframe RPC + WebSocket server (so the
+ * launcher can detect/start/stop code-server), and a static mount that serves
+ * the bundled SPA at the mount base. The bridge is listed first so its
+ * `__connection.json` route is matched ahead of the SPA fallback.
+ */
+export function codeServerVite(options: CodeServerViteOptions = {}): DevframeVitePlugin[] {
+  const { vite, ...codeServerOptions } = options
+  const definition = createCodeServerDevframe(codeServerOptions)
+  return [
+    viteDevBridge(definition, { ...vite, devMiddleware: true }),
+    viteDevBridge(definition, vite),
+  ]
+}
diff --git a/plugins/code-server/test/_utils.ts b/plugins/code-server/test/_utils.ts
new file mode 100644
index 0000000..357b1ca
--- /dev/null
+++ b/plugins/code-server/test/_utils.ts
@@ -0,0 +1,63 @@
+import type { DevframeHost, DevframeNodeContext } from 'devframe/types'
+import { chmodSync, mkdtempSync, writeFileSync } from 'node:fs'
+import { tmpdir } from 'node:os'
+import { join } from 'node:path'
+import process from 'node:process'
+import { createHostContext } from 'devframe/node'
+
+/** Minimal in-memory host — enough to drive RPC + shared state in tests. */
+export function createTestHost(): DevframeHost {
+  return {
+    mountStatic: () => {},
+    resolveOrigin: () => 'http://127.0.0.1',
+    getStorageDir: () => mkdtempSync(join(tmpdir(), 'dcs-store-')),
+  }
+}
+
+export async function createTestContext(): Promise<DevframeNodeContext> {
+  return createHostContext({ cwd: process.cwd(), mode: 'dev', host: createTestHost() })
+}
+
+export interface FakeCodeServerOptions {
+  /** Version string `--version` prints; omit to make `--version` exit non-zero. */
+  version?: string
+  /** File the fake writes its `HASHED_PASSWORD` env to on server startup. */
+  dumpEnvTo?: string
+}
+
+/**
+ * Write an executable that stands in for the real `code-server`:
+ *  - `--version` prints the configured version (or exits 1 when omitted);
+ *  - otherwise it parses `--bind-addr host:port` and serves `/healthz` (200)
+ *    until terminated, optionally dumping `HASHED_PASSWORD` to a file so tests
+ *    can assert the auth wiring end to end.
+ *
+ * Returns the absolute path to the executable.
+ */
+export function writeFakeCodeServer(options: FakeCodeServerOptions = {}): string {
+  const dir = mkdtempSync(join(tmpdir(), 'dcs-bin-'))
+  const binPath = join(dir, 'code-server')
+  const version = options.version
+  const script = `#!/usr/bin/env node
+const args = process.argv.slice(2)
+if (args.includes('--version')) {
+  ${version ? `process.stdout.write(${JSON.stringify(`${version}\n`)}); process.exit(0)` : `process.exit(1)`}
+}
+const i = args.indexOf('--bind-addr')
+const addr = i >= 0 ? args[i + 1] : '0.0.0.0:8080'
+const port = Number(addr.split(':').pop())
+const dump = ${options.dumpEnvTo ? JSON.stringify(options.dumpEnvTo) : 'null'}
+if (dump) require('fs').writeFileSync(dump, process.env.HASHED_PASSWORD || '')
+const http = require('http')
+const server = http.createServer((req, res) => {
+  res.statusCode = 200
+  res.end(req.url && req.url.startsWith('/healthz') ? '{"status":"alive"}' : 'ok')
+})
+server.listen(port, '0.0.0.0')
+process.on('SIGTERM', () => process.exit(0))
+process.on('SIGINT', () => process.exit(0))
+`
+  writeFileSync(binPath, script)
+  chmodSync(binPath, 0o755)
+  return binPath
+}
diff --git a/plugins/code-server/test/code-server.test.ts b/plugins/code-server/test/code-server.test.ts
new file mode 100644
index 0000000..02e34ae
--- /dev/null
+++ b/plugins/code-server/test/code-server.test.ts
@@ -0,0 +1,91 @@
+import type { CodeServerSharedState } from '../src/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 { STATE_KEY } from '../src/constants'
+import { setupCodeServer } from '../src/node/index'
+import { createTestContext, writeFakeCodeServer } from './_utils'
+
+async function sharedState(ctx: Awaited<ReturnType<typeof createTestContext>>): Promise<CodeServerSharedState> {
+  const state = await ctx.rpc.sharedState.get(STATE_KEY)
+  return state.value() as CodeServerSharedState
+}
+
+describe('@devframes/plugin-code-server', () => {
+  const supervisors: { dispose: () => void }[] = []
+
+  afterEach(() => {
+    for (const s of supervisors.splice(0))
+      s.dispose()
+  })
+
+  it('detects a missing binary and refuses to start', async () => {
+    const ctx = await createTestContext()
+    const supervisor = await setupCodeServer(ctx, { bin: '/no/such/code-server-xyz' })
+    supervisors.push(supervisor)
+
+    expect(supervisor.status().detection).toMatchObject({ checked: true, installed: false })
+    expect((await sharedState(ctx)).detection.installed).toBe(false)
+
+    await expect(supervisor.start()).rejects.toThrow(/not installed/i)
+  })
+
+  it('detects an installed binary and reports its version', async () => {
+    const bin = writeFakeCodeServer({ version: '4.99.0 fakehash with Code 1.99.0' })
+    const ctx = await createTestContext()
+    const supervisor = await setupCodeServer(ctx, { bin })
+    supervisors.push(supervisor)
+
+    const detection = supervisor.status().detection
+    expect(detection.installed).toBe(true)
+    expect(detection.version).toBe('4.99.0')
+  })
+
+  it('launches code-server, becomes ready, and hands off a valid auth cookie', async () => {
+    const dumpEnvTo = join(mkdtempSync(join(tmpdir(), 'dcs-dump-')), 'hashed')
+    const bin = writeFakeCodeServer({ version: '4.99.0', dumpEnvTo })
+    const ctx = await createTestContext()
+    const supervisor = await setupCodeServer(ctx, { bin })
+    supervisors.push(supervisor)
+
+    const result = await supervisor.start()
+    expect(result.server.status).toBe('running')
+    expect(result.server.port).toBeGreaterThan(0)
+    expect(result.auth?.cookieName).toBe('code-server-session')
+    expect(result.auth?.cookieValue).toMatch(/^[a-f0-9]{64}$/)
+
+    // The cookie value handed to the client must equal HASHED_PASSWORD the
+    // server was launched with — that is what makes the iframe auto-auth.
+    const hashed = readFileSync(dumpEnvTo, 'utf8')
+    expect(hashed).toBe(result.auth?.cookieValue)
+
+    expect((await sharedState(ctx)).server.status).toBe('running')
+    // Shared state must never leak the auth material.
+    expect((await sharedState(ctx)) as any).not.toHaveProperty('auth')
+  })
+
+  it('stops a running server and resets to stopped', async () => {
+    const bin = writeFakeCodeServer({ version: '4.99.0' })
+    const ctx = await createTestContext()
+    const supervisor = await setupCodeServer(ctx, { bin })
+    supervisors.push(supervisor)
+
+    await supervisor.start()
+    const stopped = supervisor.stop()
+    expect(stopped.server.status).toBe('stopped')
+    expect(stopped.auth).toBeUndefined()
+    expect((await sharedState(ctx)).server.status).toBe('stopped')
+  })
+
+  it('is idempotent while running', async () => {
+    const bin = writeFakeCodeServer({ version: '4.99.0' })
+    const ctx = await createTestContext()
+    const supervisor = await setupCodeServer(ctx, { bin })
+    supervisors.push(supervisor)
+
+    const first = await supervisor.start()
+    const second = await supervisor.start()
+    expect(second.server.port).toBe(first.server.port)
+  })
+})
diff --git a/plugins/code-server/tsconfig.json b/plugins/code-server/tsconfig.json
new file mode 100644
index 0000000..8a6d5a7
--- /dev/null
+++ b/plugins/code-server/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "composite": true,
+    "lib": ["esnext", "dom"]
+  }
+}
diff --git a/plugins/code-server/tsdown.config.ts b/plugins/code-server/tsdown.config.ts
new file mode 100644
index 0000000..2e6c0f3
--- /dev/null
+++ b/plugins/code-server/tsdown.config.ts
@@ -0,0 +1,65 @@
+import { defineConfig } from 'tsdown'
+
+const tsconfig = '../../tsconfig.base.json'
+
+const deps = {
+  neverBundle: [
+    'vite',
+    'esbuild',
+    'postcss',
+    'rolldown',
+  ],
+}
+
+// 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/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',
+}
+
+// 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.
+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,
+  },
+  {
+    clean: false,
+    platform: 'neutral',
+    tsconfig,
+    deps,
+    dts: { emitDtsOnly: true },
+    outExtensions: () => ({ dts: '.d.mts' }),
+    entry: { ...clientEntries, ...serverEntries },
+  },
+])
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 30a5275..0801c8f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -528,6 +528,37 @@ importers:
         specifier: catalog:build
         version: 0.22.0(tsx@4.22.3)(typescript@6.0.3)
 
+  plugins/code-server:
+    dependencies:
+      get-port-please:
+        specifier: catalog:deps
+        version: 3.2.0
+      nostics:
+        specifier: catalog:deps
+        version: 0.2.0
+    devDependencies:
+      '@types/node':
+        specifier: catalog:types
+        version: 25.9.1
+      devframe:
+        specifier: workspace:*
+        version: link:../../packages/devframe
+      h3:
+        specifier: catalog:deps
+        version: 2.0.1-rc.22(crossws@0.4.5(srvx@0.11.15))
+      tsdown:
+        specifier: catalog:build
+        version: 0.22.0(tsx@4.22.3)(typescript@6.0.3)
+      vite:
+        specifier: catalog:build
+        version: 8.0.14(@types/node@25.9.1)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.22.3)(yaml@2.8.4)
+      vitest:
+        specifier: catalog:testing
+        version: 4.1.7(@types/node@25.9.1)(vite@8.0.14(@types/node@25.9.1)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.22.3)(yaml@2.8.4))
+      ws:
+        specifier: catalog:deps
+        version: 8.21.0
+
 packages:
 
   '@antfu/eslint-config@9.0.0':
@@ -6964,18 +6995,6 @@ packages:
   wrappy@1.0.2:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
 
-  ws@8.20.0:
-    resolution: {integrity: sha512-sAt8BhgNbzCtgGbt2OxmpuryO63ZoDk/sqaB/znQm94T4fCEsy/yV+7CdC1kJhOU9lboAEU7R3kquuycDoibVA==}
-    engines: {node: '>=10.0.0'}
-    peerDependencies:
-      bufferutil: ^4.0.1
-      utf-8-validate: '>=5.0.2'
-    peerDependenciesMeta:
-      bufferutil:
-        optional: true
-      utf-8-validate:
-        optional: true
-
   ws@8.21.0:
     resolution: {integrity: sha512-Vsp28b7DRcimFQvrqu2Wek3z1iYxDCWqHYB8Qsnk/S4RfaCQzPGPyBNuVjJV3cd6UiKtUtp6sNM77gWvzcCH+g==}
     engines: {node: '>=10.0.0'}
@@ -8015,7 +8034,7 @@ snapshots:
       vite-plugin-inspect: 11.3.3(@nuxt/kit@4.4.5(magicast@0.5.2))(vite@8.0.14(@types/node@25.9.1)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.22.3)(yaml@2.8.4))
       vite-plugin-vue-tracer: 1.3.0(vite@8.0.14(@types/node@25.9.1)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.22.3)(yaml@2.8.4))(vue@3.5.34(typescript@6.0.3))
       which: 6.0.1
-      ws: 8.20.0
+      ws: 8.21.0
     transitivePeerDependencies:
       - bufferutil
       - supports-color
@@ -13786,8 +13805,6 @@ snapshots:
 
   wrappy@1.0.2: {}
 
-  ws@8.20.0: {}
-
   ws@8.21.0: {}
 
   wsl-utils@0.1.0:
diff --git a/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/cli.snapshot.d.ts b/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/cli.snapshot.d.ts
new file mode 100644
index 0000000..bc2dbb6
--- /dev/null
+++ b/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/cli.snapshot.d.ts
@@ -0,0 +1,6 @@
+/**
+ * Generated by tsnapi — public API snapshot of `@devframes/plugin-code-server/cli`
+ */
+// #region Functions
+export declare function createCodeServerCli(_?: CodeServerOptions, _?: CreateCliOptions): CliHandle;
+// #endregion
\ No newline at end of file
diff --git a/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/cli.snapshot.js b/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/cli.snapshot.js
new file mode 100644
index 0000000..4d86b8d
--- /dev/null
+++ b/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/cli.snapshot.js
@@ -0,0 +1,6 @@
+/**
+ * Generated by tsnapi — public API snapshot of `@devframes/plugin-code-server/cli`
+ */
+// #region Functions
+export function createCodeServerCli(_, _) {}
+// #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
new file mode 100644
index 0000000..a60fdbd
--- /dev/null
+++ b/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/client.snapshot.d.ts
@@ -0,0 +1,23 @@
+/**
+ * Generated by tsnapi — public API snapshot of `@devframes/plugin-code-server/client`
+ */
+// #region Interfaces
+export interface CodeServerHandle {
+  rpc: DevframeRpcClient;
+  dispose: () => void;
+}
+export interface MountCodeServerOptions {
+  rpc?: DevframeRpcClient;
+}
+// #endregion
+
+// #region Functions
+export declare function mountCodeServer(_: HTMLElement, _?: MountCodeServerOptions): Promise<CodeServerHandle>;
+// #endregion
+
+// #region Other
+export { CodeServerServerInfo }
+export { CodeServerSharedState }
+export { CodeServerStatus }
+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
new file mode 100644
index 0000000..9c8ce5d
--- /dev/null
+++ b/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/client.snapshot.js
@@ -0,0 +1,10 @@
+/**
+ * Generated by tsnapi — public API snapshot of `@devframes/plugin-code-server/client`
+ */
+// #region Functions
+export async function mountCodeServer(_, _) {}
+// #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
new file mode 100644
index 0000000..9f380d2
--- /dev/null
+++ b/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/constants.snapshot.d.ts
@@ -0,0 +1,12 @@
+/**
+ * Generated by tsnapi — public API snapshot of `@devframes/plugin-code-server/constants`
+ */
+// #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 }
+// #endregion
\ No newline at end of file
diff --git a/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/constants.snapshot.js b/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/constants.snapshot.js
new file mode 100644
index 0000000..1a41016
--- /dev/null
+++ b/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/constants.snapshot.js
@@ -0,0 +1,15 @@
+/**
+ * Generated by tsnapi — public API snapshot of `@devframes/plugin-code-server/constants`
+ */
+// #region Functions
+export function getCookieSessionName(_) {}
+// #endregion
+
+// #region Variables
+export var DEFAULT_CODE_SERVER_PORT /* const */
+export var DEFAULT_PORT /* const */
+export var DEFAULT_START_TIMEOUT /* const */
+export var PLUGIN_ID /* const */
+export var SESSION_COOKIE_BASE /* const */
+export var STATE_KEY /* const */
+// #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
new file mode 100644
index 0000000..eaac0f7
--- /dev/null
+++ b/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/index.snapshot.d.ts
@@ -0,0 +1,28 @@
+/**
+ * Generated by tsnapi — public API snapshot of `@devframes/plugin-code-server`
+ */
+// #region Functions
+export declare function createCodeServerDevframe(_?: CodeServerOptions): DevframeDefinition;
+// #endregion
+
+// #region Default Export
+declare const _default: DevframeDefinition;
+export default _default
+// #endregion
+
+// #region Other
+export { CodeServerAuth }
+export { CodeServerDetection }
+export { CodeServerOptions }
+export { CodeServerServerInfo }
+export { CodeServerSharedState }
+export { CodeServerStartRequest }
+export { CodeServerStartResult }
+export { CodeServerStatus }
+export { CodeServerStatusResult }
+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
new file mode 100644
index 0000000..40d671f
--- /dev/null
+++ b/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/index.snapshot.js
@@ -0,0 +1,19 @@
+/**
+ * Generated by tsnapi — public API snapshot of `@devframes/plugin-code-server`
+ */
+// #region Functions
+export function createCodeServerDevframe(_) {}
+// #endregion
+
+// #region Default Export
+var _default /* const */
+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/node.snapshot.d.ts b/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/node.snapshot.d.ts
new file mode 100644
index 0000000..3de125f
--- /dev/null
+++ b/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/node.snapshot.d.ts
@@ -0,0 +1,75 @@
+/**
+ * Generated by tsnapi — public API snapshot of `@devframes/plugin-code-server/node`
+ */
+// #region Classes
+export declare class CodeServerSupervisor {
+  private readonly ctx;
+  private readonly bin;
+  private readonly workspace;
+  private readonly host;
+  private readonly forcedPort?;
+  private readonly extraArgs;
+  private readonly extraEnv;
+  private readonly cookieName;
+  private readonly cookieSuffix?;
+  private readonly startTimeout;
+  private state?;
+  private detection;
+  private server;
+  private proc?;
+  private cookieValue?;
+  private logBuffer;
+  private cleanupRegistered;
+  constructor(_: DevframeNodeContext, _?: CodeServerOptions);
+  init(): Promise<void>;
+  detect(): Promise<CodeServerDetection>;
+  status(): CodeServerStatusResult;
+  start(_?: CodeServerStartRequest): Promise<CodeServerStartResult>;
+  stop(): CodeServerStatusResult;
+  dispose(): void;
+  private authInfo;
+  private terminate;
+  private appendLog;
+  private lastLog;
+  private publish;
+  private waitForReady;
+  private registerCleanup;
+}
+// #endregion
+
+// #region Functions
+export declare function detectCodeServer(_?: string, _?: number): Promise<DetectCodeServerResult>;
+export declare function getCodeServerSupervisor(_: DevframeNodeContext): CodeServerSupervisor;
+export declare function setCodeServerSupervisor(_: DevframeNodeContext, _: CodeServerSupervisor): void;
+export declare function setupCodeServer(_: DevframeNodeContext, _?: CodeServerOptions): Promise<CodeServerSupervisor>;
+// #endregion
+
+// #region Variables
+export declare const diagnostics: {
+  readonly DP_CODE_SERVER_0001: _$nostics.DiagnosticHandle<{
+    bin: string;
+  }, {
+    method?: "log" | "warn" | "error" | undefined;
+  }>;
+  readonly DP_CODE_SERVER_0002: _$nostics.DiagnosticHandle<{
+    port: number;
+    timeout: number;
+  }, {
+    method?: "log" | "warn" | "error" | undefined;
+  }>;
+  readonly DP_CODE_SERVER_0003: _$nostics.DiagnosticHandle<{
+    bin: string;
+    reason: string;
+  }, {
+    method?: "log" | "warn" | "error" | undefined;
+  }>;
+  readonly DP_CODE_SERVER_0004: _$nostics.DiagnosticHandle<{}, {
+    method?: "log" | "warn" | "error" | undefined;
+  }>;
+  readonly DP_CODE_SERVER_0005: _$nostics.DiagnosticHandle<{
+    code: number;
+  }, {
+    method?: "log" | "warn" | "error" | undefined;
+  }>;
+};
+// #endregion
\ No newline at end of file
diff --git a/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/node.snapshot.js b/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/node.snapshot.js
new file mode 100644
index 0000000..b03bc43
--- /dev/null
+++ b/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/node.snapshot.js
@@ -0,0 +1,49 @@
+/**
+ * Generated by tsnapi — public API snapshot of `@devframes/plugin-code-server/node`
+ */
+// #region Classes
+export class CodeServerSupervisor {
+  ctx
+  bin
+  workspace
+  host
+  forcedPort
+  extraArgs
+  extraEnv
+  cookieName
+  cookieSuffix
+  startTimeout
+  state
+  detection
+  server
+  proc
+  cookieValue
+  logBuffer
+  cleanupRegistered
+  constructor(_, _) {}
+  async init() {}
+  async detect() {}
+  status() {}
+  async start(_) {}
+  stop() {}
+  dispose() {}
+  authInfo() {}
+  terminate(_) {}
+  appendLog(_) {}
+  lastLog() {}
+  publish() {}
+  async waitForReady(_) {}
+  registerCleanup() {}
+}
+// #endregion
+
+// #region Functions
+export function detectCodeServer(_, _) {}
+export async function setupCodeServer(_, _) {}
+// #endregion
+
+// #region Other
+export { diagnostics }
+export { getCodeServerSupervisor }
+export { setCodeServerSupervisor }
+// #endregion
\ No newline at end of file
diff --git a/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/rpc.snapshot.d.ts b/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/rpc.snapshot.d.ts
new file mode 100644
index 0000000..eb17eee
--- /dev/null
+++ b/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/rpc.snapshot.d.ts
@@ -0,0 +1,62 @@
+/**
+ * Generated by tsnapi — public API snapshot of `@devframes/plugin-code-server/rpc`
+ */
+// #region Variables
+export declare const serverFunctions: readonly [{
+  name: "devframes-plugin-code-server:detect";
+  type?: "query" | undefined;
+  cacheable?: boolean;
+  args?: undefined;
+  returns?: undefined;
+  jsonSerializable?: boolean;
+  agent?: _$devframe.RpcFunctionAgentOptions;
+  setup?: ((context: _$devframe.DevframeNodeContext) => _$devframe_rpc0.Thenable<_$devframe_rpc0.RpcFunctionSetupResult<[], Promise<CodeServerDetection>>>) | undefined;
+  handler?: (() => Promise<CodeServerDetection>) | undefined;
+  dump?: _$devframe_rpc0.RpcDump<[], Promise<CodeServerDetection>, _$devframe.DevframeNodeContext> | undefined;
+  snapshot?: boolean;
+  __cache?: WeakMap<object, _$devframe_rpc0.Thenable<_$devframe_rpc0.RpcFunctionSetupResult<[], Promise<CodeServerDetection>>>> | undefined;
+  __promise?: _$devframe_rpc0.Thenable<_$devframe_rpc0.RpcFunctionSetupResult<[], Promise<CodeServerDetection>>> | undefined;
+}, {
+  name: "devframes-plugin-code-server:status";
+  type?: "query" | undefined;
+  cacheable?: boolean;
+  args?: undefined;
+  returns?: undefined;
+  jsonSerializable?: boolean;
+  agent?: _$devframe.RpcFunctionAgentOptions;
+  setup?: ((context: _$devframe.DevframeNodeContext) => _$devframe_rpc0.Thenable<_$devframe_rpc0.RpcFunctionSetupResult<[], CodeServerStatusResult>>) | undefined;
+  handler?: (() => CodeServerStatusResult) | undefined;
+  dump?: _$devframe_rpc0.RpcDump<[], CodeServerStatusResult, _$devframe.DevframeNodeContext> | undefined;
+  snapshot?: boolean;
+  __cache?: WeakMap<object, _$devframe_rpc0.Thenable<_$devframe_rpc0.RpcFunctionSetupResult<[], CodeServerStatusResult>>> | undefined;
+  __promise?: _$devframe_rpc0.Thenable<_$devframe_rpc0.RpcFunctionSetupResult<[], CodeServerStatusResult>> | undefined;
+}, {
+  name: "devframes-plugin-code-server:start";
+  type?: "action" | undefined;
+  cacheable?: boolean;
+  args?: undefined;
+  returns?: undefined;
+  jsonSerializable?: boolean;
+  agent?: _$devframe.RpcFunctionAgentOptions;
+  setup?: ((context: _$devframe.DevframeNodeContext) => _$devframe_rpc0.Thenable<_$devframe_rpc0.RpcFunctionSetupResult<[req?: CodeServerStartRequest | undefined], Promise<CodeServerStatusResult>>>) | undefined;
+  handler?: ((req?: CodeServerStartRequest | undefined) => Promise<CodeServerStatusResult>) | undefined;
+  dump?: _$devframe_rpc0.RpcDump<[req?: CodeServerStartRequest | undefined], Promise<CodeServerStatusResult>, _$devframe.DevframeNodeContext> | undefined;
+  snapshot?: boolean;
+  __cache?: WeakMap<object, _$devframe_rpc0.Thenable<_$devframe_rpc0.RpcFunctionSetupResult<[req?: CodeServerStartRequest | undefined], Promise<CodeServerStatusResult>>>> | undefined;
+  __promise?: _$devframe_rpc0.Thenable<_$devframe_rpc0.RpcFunctionSetupResult<[req?: CodeServerStartRequest | undefined], Promise<CodeServerStatusResult>>> | undefined;
+}, {
+  name: "devframes-plugin-code-server:stop";
+  type?: "action" | undefined;
+  cacheable?: boolean;
+  args?: undefined;
+  returns?: undefined;
+  jsonSerializable?: boolean;
+  agent?: _$devframe.RpcFunctionAgentOptions;
+  setup?: ((context: _$devframe.DevframeNodeContext) => _$devframe_rpc0.Thenable<_$devframe_rpc0.RpcFunctionSetupResult<[], CodeServerStatusResult>>) | undefined;
+  handler?: (() => CodeServerStatusResult) | undefined;
+  dump?: _$devframe_rpc0.RpcDump<[], CodeServerStatusResult, _$devframe.DevframeNodeContext> | undefined;
+  snapshot?: boolean;
+  __cache?: WeakMap<object, _$devframe_rpc0.Thenable<_$devframe_rpc0.RpcFunctionSetupResult<[], CodeServerStatusResult>>> | undefined;
+  __promise?: _$devframe_rpc0.Thenable<_$devframe_rpc0.RpcFunctionSetupResult<[], CodeServerStatusResult>> | undefined;
+}];
+// #endregion
\ No newline at end of file
diff --git a/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/rpc.snapshot.js b/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/rpc.snapshot.js
new file mode 100644
index 0000000..ba58d80
--- /dev/null
+++ b/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/rpc.snapshot.js
@@ -0,0 +1,6 @@
+/**
+ * Generated by tsnapi — public API snapshot of `@devframes/plugin-code-server/rpc`
+ */
+// #region Other
+export { serverFunctions }
+// #endregion
\ No newline at end of file
diff --git a/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/types.snapshot.d.ts b/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/types.snapshot.d.ts
new file mode 100644
index 0000000..d8e456b
--- /dev/null
+++ b/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/types.snapshot.d.ts
@@ -0,0 +1,51 @@
+/**
+ * Generated by tsnapi — public API snapshot of `@devframes/plugin-code-server/types`
+ */
+// #region Interfaces
+export interface CodeServerAuth {
+  cookieName: string;
+  cookieValue: string;
+}
+export interface CodeServerDetection {
+  checked: boolean;
+  installed: boolean;
+  version?: string;
+  bin: string;
+}
+export interface CodeServerOptions {
+  bin?: string;
+  cwd?: string;
+  serverPort?: number;
+  host?: string;
+  args?: string[];
+  env?: Record<string, string>;
+  cookieSuffix?: string;
+  startTimeout?: number;
+  basePath?: string;
+  distDir?: string;
+  command?: string;
+  port?: number;
+}
+export interface CodeServerServerInfo {
+  status: CodeServerStatus;
+  port?: number;
+  startedAt?: number;
+  pid?: number;
+  error?: string;
+}
+export interface CodeServerSharedState {
+  detection: CodeServerDetection;
+  server: CodeServerServerInfo;
+}
+export interface CodeServerStartRequest {
+  folder?: string;
+}
+export interface CodeServerStatusResult extends CodeServerSharedState {
+  auth?: CodeServerAuth;
+}
+// #endregion
+
+// #region Types
+export type CodeServerStartResult = CodeServerStatusResult;
+export type CodeServerStatus = 'stopped' | 'starting' | 'running' | 'error';
+// #endregion
\ No newline at end of file
diff --git a/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/types.snapshot.js b/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/types.snapshot.js
new file mode 100644
index 0000000..d901cfa
--- /dev/null
+++ b/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/types.snapshot.js
@@ -0,0 +1,4 @@
+/**
+ * Generated by tsnapi — public API snapshot of `@devframes/plugin-code-server/types`
+ */
+/* no exports */
\ No newline at end of file
diff --git a/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/vite.snapshot.d.ts b/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/vite.snapshot.d.ts
new file mode 100644
index 0000000..307aa8e
--- /dev/null
+++ b/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/vite.snapshot.d.ts
@@ -0,0 +1,12 @@
+/**
+ * Generated by tsnapi — public API snapshot of `@devframes/plugin-code-server/vite`
+ */
+// #region Interfaces
+export interface CodeServerViteOptions extends CodeServerOptions {
+  vite?: ViteDevBridgeOptions;
+}
+// #endregion
+
+// #region Functions
+export declare function codeServerVite(_?: CodeServerViteOptions): DevframeVitePlugin[];
+// #endregion
\ No newline at end of file
diff --git a/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/vite.snapshot.js b/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/vite.snapshot.js
new file mode 100644
index 0000000..c97b3fe
--- /dev/null
+++ b/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/vite.snapshot.js
@@ -0,0 +1,6 @@
+/**
+ * Generated by tsnapi — public API snapshot of `@devframes/plugin-code-server/vite`
+ */
+// #region Functions
+export function codeServerVite(_) {}
+// #endregion
\ No newline at end of file
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 0734e82..88949ad 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -121,6 +121,30 @@
       "@devframes/nuxt": [
         "./packages/nuxt/src/index.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"
+      ],
+      "@devframes/plugin-code-server/constants": [
+        "./plugins/code-server/src/constants.ts"
+      ],
+      "@devframes/plugin-code-server/types": [
+        "./plugins/code-server/src/types.ts"
+      ],
+      "@devframes/plugin-code-server/rpc": [
+        "./plugins/code-server/src/rpc/index.ts"
+      ],
+      "@devframes/plugin-code-server/cli": [
+        "./plugins/code-server/src/cli.ts"
+      ],
+      "@devframes/plugin-code-server/vite": [
+        "./plugins/code-server/src/vite.ts"
+      ],
+      "@devframes/plugin-code-server": [
+        "./plugins/code-server/src/index.ts"
+      ],
       "devframe/recipes/open-helpers": [
         "./packages/devframe/src/recipes/open-helpers.ts"
       ],
diff --git a/turbo.json b/turbo.json
index a883327..c456d30 100644
--- a/turbo.json
+++ b/turbo.json
@@ -18,6 +18,11 @@
       "outputLogs": "new-only",
       "outputs": ["dist/**"]
     },
+    "@devframes/plugin-code-server#build": {
+      "outputLogs": "new-only",
+      "dependsOn": ["devframe#build"],
+      "outputs": ["dist/**"]
+    },
     "minimal-vite-devframe-hub#build": {
       "outputLogs": "new-only",
       "dependsOn": ["@devframes/hub#build", "devframe#build"],
diff --git a/vitest.config.ts b/vitest.config.ts
index 79b7cdc..97c753b 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -9,6 +9,7 @@ export default defineConfig({
     projects: [
       'packages/devframe',
       'packages/hub',
+      'plugins/code-server',
       'examples/files-inspector',
       'examples/streaming-chat',
       'examples/next-runtime-snapshot',

From 80917dbf2a9d849c7814a365f5f3078ae28d7710 Mon Sep 17 00:00:00 2001
From: "Anthony Fu (via agent)" <reg-github-bot@antfu.me>
Date: Fri, 19 Jun 2026 04:42:51 +0000
Subject: [PATCH 2/5] refactor(plugin-code-server): state-driven view,
 full-bleed editor, Storybook
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Extract the launcher UI into a pure, state-driven view decoupled from RPC,
  with styles in a real CSS file instead of an injected string.
- Drop the toolbar over the running editor — the iframe is now full-bleed.
- Add Storybook (html-vite) with a story per UI state (connecting,
  not-installed, launch, launch-error, starting, running).
---
 eslint.config.js                              |   1 +
 plugins/code-server/.gitignore                |   1 +
 plugins/code-server/.storybook/main.ts        |  11 +
 plugins/code-server/.storybook/preview.ts     |  11 +
 plugins/code-server/README.md                 |  14 +
 plugins/code-server/package.json              |   4 +
 .../src/client/code-server.stories.ts         |  97 ++
 plugins/code-server/src/client/index.ts       | 334 +------
 plugins/code-server/src/client/style.css      | 240 +++++
 plugins/code-server/src/client/view.ts        | 251 +++++
 plugins/code-server/src/shims.d.ts            |   2 +
 plugins/code-server/src/spa/index.html        |   6 -
 plugins/code-server/src/spa/main.ts           |   1 +
 pnpm-lock.yaml                                | 895 +++++++++++++++++-
 pnpm-workspace.yaml                           |   3 +
 .../plugin-code-server/client.snapshot.d.ts   |  26 +
 .../plugin-code-server/client.snapshot.js     |   2 +
 17 files changed, 1588 insertions(+), 311 deletions(-)
 create mode 100644 plugins/code-server/.storybook/main.ts
 create mode 100644 plugins/code-server/.storybook/preview.ts
 create mode 100644 plugins/code-server/src/client/code-server.stories.ts
 create mode 100644 plugins/code-server/src/client/style.css
 create mode 100644 plugins/code-server/src/client/view.ts
 create mode 100644 plugins/code-server/src/shims.d.ts

diff --git a/eslint.config.js b/eslint.config.js
index b01f4f8..3098aae 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -6,6 +6,7 @@ export default antfu({
   ignores: [
     'skills',
     '**/dist',
+    '**/storybook-static',
     '**/.next',
     '**/out',
     '**/next-env.d.ts',
diff --git a/plugins/code-server/.gitignore b/plugins/code-server/.gitignore
index 415e0c0..418cf91 100644
--- a/plugins/code-server/.gitignore
+++ b/plugins/code-server/.gitignore
@@ -1,3 +1,4 @@
 dist
+storybook-static
 .turbo
 *.tsbuildinfo
diff --git a/plugins/code-server/.storybook/main.ts b/plugins/code-server/.storybook/main.ts
new file mode 100644
index 0000000..769ec5c
--- /dev/null
+++ b/plugins/code-server/.storybook/main.ts
@@ -0,0 +1,11 @@
+import type { StorybookConfig } from '@storybook/html-vite'
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.@(ts|tsx)'],
+  framework: {
+    name: '@storybook/html-vite',
+    options: {},
+  },
+}
+
+export default config
diff --git a/plugins/code-server/.storybook/preview.ts b/plugins/code-server/.storybook/preview.ts
new file mode 100644
index 0000000..20b90ba
--- /dev/null
+++ b/plugins/code-server/.storybook/preview.ts
@@ -0,0 +1,11 @@
+import type { Preview } from '@storybook/html-vite'
+import '../src/client/style.css'
+
+const preview: Preview = {
+  parameters: {
+    layout: 'fullscreen',
+    controls: { expanded: true },
+  },
+}
+
+export default preview
diff --git a/plugins/code-server/README.md b/plugins/code-server/README.md
index 76904d8..730e19e 100644
--- a/plugins/code-server/README.md
+++ b/plugins/code-server/README.md
@@ -64,3 +64,17 @@ export default {
 
 Status (minus the auth cookie) is mirrored into the
 `devframes-plugin-code-server:state` shared state for reactive UIs.
+
+## UI
+
+The launcher UI is a pure, state-driven view (`src/client/view.ts`) decoupled
+from RPC, so every state renders in isolation. `mountCodeServer` wires the live
+connection to it. Each UI state has a Storybook story:
+
+```sh
+pnpm storybook         # dev
+pnpm build-storybook   # static build
+```
+
+Stories: connecting, not-installed, launch, launch-error, starting, running
+(the running story mounts a mock editor instead of a live server).
diff --git a/plugins/code-server/package.json b/plugins/code-server/package.json
index 7b18706..3fabbf6 100644
--- a/plugins/code-server/package.json
+++ b/plugins/code-server/package.json
@@ -43,6 +43,8 @@
     "build": "tsdown && vite build --config src/spa/vite.config.ts",
     "watch": "tsdown --watch",
     "dev": "vite --config src/spa/vite.config.ts --host 0.0.0.0",
+    "storybook": "storybook dev -p 6006 --host 0.0.0.0",
+    "build-storybook": "storybook build",
     "test": "vitest run",
     "prepack": "pnpm run build"
   },
@@ -60,9 +62,11 @@
     "nostics": "catalog:deps"
   },
   "devDependencies": {
+    "@storybook/html-vite": "catalog:storybook",
     "@types/node": "catalog:types",
     "devframe": "workspace:*",
     "h3": "catalog:deps",
+    "storybook": "catalog:storybook",
     "tsdown": "catalog:build",
     "vite": "catalog:build",
     "vitest": "catalog:testing",
diff --git a/plugins/code-server/src/client/code-server.stories.ts b/plugins/code-server/src/client/code-server.stories.ts
new file mode 100644
index 0000000..7c42b14
--- /dev/null
+++ b/plugins/code-server/src/client/code-server.stories.ts
@@ -0,0 +1,97 @@
+import type { Meta, StoryObj } from '@storybook/html-vite'
+import type { CodeServerViewState } from './view'
+import { createCodeServerView } from './view'
+import './style.css'
+
+// A stand-in for the real code-server iframe so the "running" story renders
+// without a live server.
+const MOCK_EDITOR = `data:text/html;charset=utf-8,${encodeURIComponent(`
+<!doctype html><html><head><meta name="color-scheme" content="dark light" /><style>
+  html,body{height:100%;margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#1e1e1e;color:#d4d4d4}
+  .bar{height:35px;background:#333;display:flex;align-items:center;padding:0 12px;font-size:12px;color:#ccc}
+  .body{display:flex;height:calc(100% - 35px)}
+  .side{width:48px;background:#333}
+  .main{flex:1;padding:16px;font-size:13px;line-height:1.6}
+  .c{color:#569cd6}.s{color:#ce9178}.f{color:#dcdcaa}
+</style></head><body>
+  <div class="bar">code-server — mock editor (Storybook)</div>
+  <div class="body"><div class="side"></div><div class="main">
+    <div><span class="c">export function</span> <span class="f">createCodeServerDevframe</span>(<span class="c">options</span>) {</div>
+    <div>&nbsp;&nbsp;<span class="c">return</span> <span class="f">defineDevframe</span>({ <span class="s">id</span>, <span class="s">name</span> })</div>
+    <div>}</div>
+  </div></div>
+</body></html>`)}`
+
+function renderState(state: CodeServerViewState): HTMLElement {
+  const container = document.createElement('div')
+  container.style.cssText = 'position:relative;width:100%;height:100vh'
+  const view = createCodeServerView(container, {
+    actions: {
+      launch: () => console.warn('[story] launch'),
+      recheck: () => console.warn('[story] recheck'),
+    },
+    // Keep stories hermetic: never touch real cookies or hosts.
+    resolveEditorUrl: () => MOCK_EDITOR,
+    applyAuth: () => {},
+  })
+  view.update(state)
+  return container
+}
+
+const meta: Meta = {
+  title: 'Code Server/Launcher',
+  parameters: { layout: 'fullscreen' },
+}
+
+export default meta
+type Story = StoryObj
+
+/** Awaiting the devframe connection / first status. */
+export const Connecting: Story = {
+  render: () => renderState({
+    detection: { checked: false, installed: false, bin: 'code-server' },
+    server: { status: 'stopped' },
+  }),
+}
+
+/** Binary missing — install instructions and links. */
+export const NotInstalled: Story = {
+  render: () => renderState({
+    detection: { checked: true, installed: false, bin: 'code-server' },
+    server: { status: 'stopped' },
+  }),
+}
+
+/** Installed and idle — the launch screen. */
+export const Launch: Story = {
+  render: () => renderState({
+    detection: { checked: true, installed: true, version: '4.99.0', bin: 'code-server' },
+    server: { status: 'stopped' },
+  }),
+}
+
+/** A previous launch failed — the error surfaces above the launch button. */
+export const LaunchError: Story = {
+  render: () => renderState({
+    detection: { checked: true, installed: true, version: '4.99.0', bin: 'code-server' },
+    server: { status: 'error', error: 'Failed to spawn code-server: EADDRINUSE 127.0.0.1:8080' },
+  }),
+}
+
+/** Spawned, waiting on the readiness probe (and the auth handoff). */
+export const Starting: Story = {
+  render: () => renderState({
+    detection: { checked: true, installed: true, version: '4.99.0', bin: 'code-server' },
+    server: { status: 'starting', port: 8080 },
+    busy: true,
+  }),
+}
+
+/** Ready — the editor fills the panel, signed in, with no chrome over it. */
+export const Running: Story = {
+  render: () => renderState({
+    detection: { checked: true, installed: true, version: '4.99.0', bin: 'code-server' },
+    server: { status: 'running', port: 8080, pid: 4242 },
+    auth: { cookieName: 'code-server-session', cookieValue: 'a'.repeat(64) },
+  }),
+}
diff --git a/plugins/code-server/src/client/index.ts b/plugins/code-server/src/client/index.ts
index 03bb526..b9746d3 100644
--- a/plugins/code-server/src/client/index.ts
+++ b/plugins/code-server/src/client/index.ts
@@ -6,8 +6,10 @@ import type {
   CodeServerSharedState,
   CodeServerStatusResult,
 } from '../types'
+import type { CodeServerViewState } from './view'
 import { connectDevframe } from 'devframe/client'
 import { STATE_KEY } from '../constants'
+import { createCodeServerView } from './view'
 
 export interface MountCodeServerOptions {
   /** Pre-connected client. When omitted, `connectDevframe()` is awaited. */
@@ -16,100 +18,17 @@ export interface MountCodeServerOptions {
 
 export interface CodeServerHandle {
   rpc: DevframeRpcClient
+  /** Stop the code-server process (no UI control is rendered over the editor). */
+  stop: () => Promise<void>
   dispose: () => void
 }
 
-const DOCS_URL = 'https://coder.com/docs/code-server/latest/install'
-const REPO_URL = 'https://github.com/coder/code-server'
-
-const INSTALL_COMMANDS: { label: string, command: string }[] = [
-  { label: 'Install script (Linux / macOS)', command: 'curl -fsSL https://code-server.dev/install.sh | sh' },
-  { label: 'npm', command: 'npm install -g code-server' },
-  { label: 'Homebrew', command: 'brew install code-server' },
-]
-
-const UI_CSS = `
-.dcs-root { position: absolute; inset: 0; display: flex; flex-direction: column;
-  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
-  background: var(--dcs-bg); color: var(--dcs-fg); overflow: hidden;
-  --dcs-bg: #ffffff; --dcs-fg: #1f2328; --dcs-muted: #59636e; --dcs-border: #d0d7de;
-  --dcs-surface: #f6f8fa; --dcs-surface-hover: #eaeef2; --dcs-accent: #0969da;
-  --dcs-accent-fg: #ffffff; --dcs-ok: #1a7f37; --dcs-err: #cf222e; --dcs-code-bg: #f6f8fa; }
-@media (prefers-color-scheme: dark) {
-  .dcs-root { --dcs-bg: #0d1117; --dcs-fg: #e6edf3; --dcs-muted: #8b949e; --dcs-border: #30363d;
-    --dcs-surface: #161b22; --dcs-surface-hover: #21262d; --dcs-accent: #2f81f7;
-    --dcs-accent-fg: #ffffff; --dcs-ok: #3fb950; --dcs-err: #f85149; --dcs-code-bg: #161b22; } }
-.dcs-center { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; }
-.dcs-card { width: 100%; max-width: 560px; }
-.dcs-eyebrow { display: flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .04em;
-  text-transform: uppercase; color: var(--dcs-muted); margin: 0 0 10px; }
-.dcs-title { font-size: 22px; font-weight: 650; margin: 0 0 8px; }
-.dcs-lead { font-size: 14px; line-height: 1.55; color: var(--dcs-muted); margin: 0 0 20px; }
-.dcs-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px;
-  color: var(--dcs-muted); margin: 0 0 20px; }
-.dcs-meta code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--dcs-fg); }
-.dcs-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
-.dcs-btn { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13px;
-  font-weight: 550; padding: 8px 16px; border-radius: 7px; border: 1px solid var(--dcs-border);
-  background: var(--dcs-surface); color: var(--dcs-fg); cursor: pointer; transition: background .12s; }
-.dcs-btn:hover { background: var(--dcs-surface-hover); }
-.dcs-btn:disabled { opacity: .55; cursor: default; }
-.dcs-btn.primary { background: var(--dcs-accent); color: var(--dcs-accent-fg); border-color: transparent; }
-.dcs-btn.primary:hover { filter: brightness(1.07); background: var(--dcs-accent); }
-.dcs-link { color: var(--dcs-accent); text-decoration: none; font-size: 13px; }
-.dcs-link:hover { text-decoration: underline; }
-.dcs-install { display: flex; flex-direction: column; gap: 12px; margin: 0 0 20px; }
-.dcs-install-row label { display: block; font-size: 12px; color: var(--dcs-muted); margin: 0 0 4px; }
-.dcs-cmd { display: flex; align-items: center; gap: 8px; background: var(--dcs-code-bg);
-  border: 1px solid var(--dcs-border); border-radius: 7px; padding: 8px 10px; }
-.dcs-cmd code { flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
-  white-space: nowrap; overflow-x: auto; color: var(--dcs-fg); }
-.dcs-copy { font: inherit; font-size: 11px; padding: 3px 9px; border-radius: 5px; cursor: pointer;
-  border: 1px solid var(--dcs-border); background: var(--dcs-surface); color: var(--dcs-muted); flex: none; }
-.dcs-copy:hover { color: var(--dcs-fg); }
-.dcs-foot { font-size: 12.5px; color: var(--dcs-muted); margin: 18px 0 0; }
-.dcs-error { font-size: 13px; color: var(--dcs-err); background: color-mix(in srgb, var(--dcs-err) 9%, transparent);
-  border: 1px solid color-mix(in srgb, var(--dcs-err) 35%, transparent); border-radius: 7px;
-  padding: 10px 12px; margin: 0 0 18px; white-space: pre-wrap; word-break: break-word; }
-.dcs-spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--dcs-border);
-  border-top-color: var(--dcs-accent); animation: dcs-spin .7s linear infinite; }
-@keyframes dcs-spin { to { transform: rotate(360deg); } }
-.dcs-bar { display: flex; align-items: center; gap: 10px; padding: 6px 10px;
-  border-bottom: 1px solid var(--dcs-border); background: var(--dcs-bg); font-size: 12.5px; flex: none; }
-.dcs-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dcs-ok); flex: none; }
-.dcs-bar-label { font-weight: 600; }
-.dcs-bar-meta { color: var(--dcs-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
-.dcs-bar-spacer { flex: 1; }
-.dcs-bar .dcs-btn { padding: 4px 10px; font-size: 12px; }
-.dcs-frame-wrap { position: relative; flex: 1; min-height: 0; }
-.dcs-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--dcs-bg); }
-`
-
-let stylesInjected = false
-function injectStyles(): void {
-  if (stylesInjected || typeof document === 'undefined')
-    return
-  stylesInjected = true
-  const style = document.createElement('style')
-  style.textContent = UI_CSS
-  document.head.appendChild(style)
-}
-
-function el<K extends keyof HTMLElementTagNameMap>(tag: K, className?: string, text?: string): HTMLElementTagNameMap[K] {
-  const node = document.createElement(tag)
-  if (className)
-    node.className = className
-  if (text != null)
-    node.textContent = text
-  return node
-}
-
 /**
- * Mount the code-server launcher into `container`. Renders one of:
- *  - install instructions when the binary is missing;
- *  - a launch screen when it is installed but stopped;
- *  - a progress state while starting;
- *  - the editor in an auto-authenticated `<iframe>` once running.
+ * Mount the code-server launcher into `container`. Connects to the devframe
+ * backend, then drives a {@link createCodeServerView} from the live
+ * detection/server state: install instructions when the binary is missing, a
+ * launch screen when stopped, a progress state while starting, and the editor
+ * in a full-bleed, auto-authenticated iframe once running.
  *
  * The connection is assumed already authorized with devframe's auth, so the
  * server-issued session cookie is applied transparently before the iframe
@@ -119,22 +38,26 @@ export async function mountCodeServer(
   container: HTMLElement,
   options: MountCodeServerOptions = {},
 ): Promise<CodeServerHandle> {
-  injectStyles()
-
   const rpc = options.rpc ?? (await connectDevframe())
   if (rpc.connectionMeta.backend === 'websocket')
     await rpc.ensureTrusted(5000).catch(() => {})
 
-  const root = el('div', 'dcs-root')
-  container.append(root)
-
   let detection: CodeServerDetection = { checked: false, installed: false, bin: 'code-server' }
   let server: CodeServerServerInfo = { status: 'stopped' }
   let auth: CodeServerAuth | undefined
   let busy = false
-  let frameSrc: string | null = null
   let disposed = false
 
+  const view = createCodeServerView(container, {
+    actions: { launch, recheck },
+  })
+
+  function sync(): void {
+    if (disposed)
+      return
+    view.update({ detection, server, auth, busy } satisfies CodeServerViewState)
+  }
+
   function applyResult(result: CodeServerStatusResult): void {
     detection = result.detection
     server = result.server
@@ -142,17 +65,6 @@ export async function mountCodeServer(
       auth = result.auth
   }
 
-  function codeServerUrl(port: number): string {
-    return `${location.protocol}//${location.hostname}:${port}/`
-  }
-
-  /** Sign the iframe in by setting code-server's session cookie for this host. */
-  function applyAuthCookie(): void {
-    if (!auth)
-      return
-    document.cookie = `${auth.cookieName}=${auth.cookieValue}; path=/; SameSite=Lax`
-  }
-
   async function call<T>(method: string, ...args: any[]): Promise<T | undefined> {
     try {
       return await rpc.call(method as any, ...args) as T
@@ -167,220 +79,45 @@ export async function mountCodeServer(
     if (busy)
       return
     busy = true
-    render()
+    sync()
     const result = await call<CodeServerStatusResult>('devframes-plugin-code-server:start', {})
     if (result)
       applyResult(result)
     busy = false
-    render()
+    sync()
   }
 
   async function stop(): Promise<void> {
     if (busy)
       return
     busy = true
-    render()
+    sync()
     const result = await call<CodeServerStatusResult>('devframes-plugin-code-server:stop')
     if (result)
       applyResult(result)
     auth = undefined
-    frameSrc = null
     busy = false
-    render()
+    sync()
   }
 
   async function recheck(): Promise<void> {
     if (busy)
       return
     busy = true
-    render()
+    sync()
     await call('devframes-plugin-code-server:detect')
     busy = false
-    render()
-  }
-
-  // ---- renderers -----------------------------------------------------------
-
-  function shell(...children: Node[]): void {
-    const center = el('div', 'dcs-center')
-    const card = el('div', 'dcs-card')
-    card.append(...children)
-    center.append(card)
-    root.replaceChildren(center)
-  }
-
-  function renderConnecting(): void {
-    const wrap = el('div', 'dcs-actions')
-    wrap.append(el('div', 'dcs-spinner'), el('span', 'dcs-lead', 'Connecting to devframe…'))
-    shell(wrap)
-  }
-
-  function renderNotInstalled(): void {
-    const nodes: Node[] = []
-    nodes.push(el('p', 'dcs-eyebrow', 'code-server'))
-    nodes.push(el('h1', 'dcs-title', 'code-server is not installed'))
-    nodes.push(el('p', 'dcs-lead', 'Install code-server (VS Code in the browser) to open the editor here. Pick whichever fits your setup, then re-check.'))
-
-    const install = el('div', 'dcs-install')
-    for (const { label, command } of INSTALL_COMMANDS) {
-      const row = el('div', 'dcs-install-row')
-      row.append(el('label', undefined, label))
-      const cmd = el('div', 'dcs-cmd')
-      cmd.append(el('code', undefined, command))
-      const copy = el('button', 'dcs-copy', 'Copy')
-      copy.onclick = () => {
-        navigator.clipboard?.writeText(command).then(() => {
-          copy.textContent = 'Copied'
-          setTimeout(() => {
-            copy.textContent = 'Copy'
-          }, 1200)
-        }).catch(() => {})
-      }
-      cmd.append(copy)
-      row.append(cmd)
-      install.append(row)
-    }
-    nodes.push(install)
-
-    const actions = el('div', 'dcs-actions')
-    const recheckBtn = el('button', 'dcs-btn primary', busy ? 'Checking…' : 'Re-check')
-    recheckBtn.disabled = busy
-    recheckBtn.onclick = recheck
-    actions.append(recheckBtn)
-    const docs = el('a', 'dcs-link', 'Installation docs ↗') as HTMLAnchorElement
-    docs.href = DOCS_URL
-    docs.target = '_blank'
-    docs.rel = 'noreferrer'
-    actions.append(docs)
-    const repo = el('a', 'dcs-link', 'GitHub ↗') as HTMLAnchorElement
-    repo.href = REPO_URL
-    repo.target = '_blank'
-    repo.rel = 'noreferrer'
-    actions.append(repo)
-    nodes.push(actions)
-    shell(...nodes)
-  }
-
-  function renderLaunch(): void {
-    const nodes: Node[] = []
-    nodes.push(el('p', 'dcs-eyebrow', 'code-server'))
-    nodes.push(el('h1', 'dcs-title', 'Launch the editor'))
-    nodes.push(el('p', 'dcs-lead', 'Start a code-server instance scoped to this workspace and open VS Code right here. The server runs with a generated password and the editor is signed in automatically.'))
-
-    if (server.status === 'error' && server.error)
-      nodes.push(el('div', 'dcs-error', server.error))
-
-    const meta = el('div', 'dcs-meta')
-    if (detection.version) {
-      const v = el('span')
-      v.append(document.createTextNode('version '), el('code', undefined, detection.version))
-      meta.append(v)
-    }
-    const b = el('span')
-    b.append(document.createTextNode('binary '), el('code', undefined, detection.bin))
-    meta.append(b)
-    nodes.push(meta)
-
-    const actions = el('div', 'dcs-actions')
-    const launchBtn = el('button', 'dcs-btn primary')
-    if (busy)
-      launchBtn.append(el('span', 'dcs-spinner'), document.createTextNode('Starting…'))
-    else
-      launchBtn.textContent = 'Launch code-server'
-    launchBtn.disabled = busy
-    launchBtn.onclick = launch
-    actions.append(launchBtn)
-    nodes.push(actions)
-    shell(...nodes)
-  }
-
-  function renderStarting(): void {
-    const wrap = el('div', 'dcs-actions')
-    wrap.append(el('div', 'dcs-spinner'), el('span', 'dcs-lead', 'Starting code-server…'))
-    shell(wrap)
-  }
-
-  function renderRunning(): void {
-    const port = server.port
-    if (port == null) {
-      renderLaunch()
-      return
-    }
-    const url = codeServerUrl(port)
-    applyAuthCookie()
-
-    const bar = el('div', 'dcs-bar')
-    bar.append(el('span', 'dcs-dot'))
-    bar.append(el('span', 'dcs-bar-label', 'code-server'))
-    bar.append(el('span', 'dcs-bar-meta', new URL(url).host))
-    bar.append(el('div', 'dcs-bar-spacer'))
-
-    const openBtn = el('button', 'dcs-btn', 'Open in new tab')
-    openBtn.onclick = () => window.open(url, '_blank', 'noreferrer')
-    bar.append(openBtn)
-
-    const reloadBtn = el('button', 'dcs-btn', 'Reload')
-    bar.append(reloadBtn)
-
-    const stopBtn = el('button', 'dcs-btn', busy ? 'Stopping…' : 'Stop')
-    stopBtn.disabled = busy
-    stopBtn.onclick = stop
-    bar.append(stopBtn)
-
-    const frameWrap = el('div', 'dcs-frame-wrap')
-    const frame = el('iframe', 'dcs-frame') as HTMLIFrameElement
-    frame.setAttribute('allow', 'clipboard-read; clipboard-write; cross-origin-isolated')
-    frame.src = url
-    frameSrc = url
-    reloadBtn.onclick = () => {
-      applyAuthCookie()
-      frame.src = url
-    }
-    frameWrap.append(frame)
-
-    root.replaceChildren(bar, frameWrap)
-  }
-
-  function render(): void {
-    if (disposed)
-      return
-    if (server.status === 'running' && server.port != null) {
-      // Never load the iframe before the auth handoff arrives, otherwise
-      // code-server would render its login page inside the frame.
-      if (!auth) {
-        renderStarting()
-        return
-      }
-      // Avoid tearing down a live editor iframe on unrelated state updates.
-      if (frameSrc === codeServerUrl(server.port) && root.querySelector('.dcs-frame'))
-        return
-      renderRunning()
-      return
-    }
-    frameSrc = null
-    if (server.status === 'starting' || (busy && server.status !== 'error')) {
-      renderStarting()
-      return
-    }
-    if (!detection.checked) {
-      renderConnecting()
-      return
-    }
-    if (!detection.installed) {
-      renderNotInstalled()
-      return
-    }
-    renderLaunch()
+    sync()
   }
 
   // ---- bootstrap -----------------------------------------------------------
 
-  renderConnecting()
+  sync()
 
   const initial = await call<CodeServerStatusResult>('devframes-plugin-code-server:status')
   if (initial)
     applyResult(initial)
-  render()
+  sync()
 
   const state = await rpc.sharedState.get(STATE_KEY, {
     initialValue: { detection, server } as CodeServerSharedState,
@@ -397,23 +134,32 @@ export async function mountCodeServer(
       void call<CodeServerStatusResult>('devframes-plugin-code-server:status').then((result) => {
         if (result?.auth)
           auth = result.auth
-        render()
+        sync()
       })
       return
     }
-    render()
+    sync()
   })
-  render()
+  sync()
 
   return {
     rpc,
+    stop,
     dispose() {
       disposed = true
       off?.()
-      root.remove()
+      view.dispose()
     },
   }
 }
 
 export { STATE_KEY } from '../constants'
 export type { CodeServerServerInfo, CodeServerSharedState, CodeServerStatus } from '../types'
+export { createCodeServerView, resolvePhase } from './view'
+export type {
+  CodeServerPhase,
+  CodeServerViewActions,
+  CodeServerViewHandle,
+  CodeServerViewOptions,
+  CodeServerViewState,
+} from './view'
diff --git a/plugins/code-server/src/client/style.css b/plugins/code-server/src/client/style.css
new file mode 100644
index 0000000..c2fbc0c
--- /dev/null
+++ b/plugins/code-server/src/client/style.css
@@ -0,0 +1,240 @@
+/* code-server launcher UI. Loaded by the SPA entry and by Storybook; the
+   library `mountCodeServer` assumes this stylesheet is present on the page. */
+
+html,
+body {
+  height: 100%;
+  margin: 0;
+}
+
+#app {
+  position: relative;
+  height: 100%;
+}
+
+.dcs-root {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
+  background: var(--dcs-bg);
+  color: var(--dcs-fg);
+
+  --dcs-bg: #ffffff;
+  --dcs-fg: #1f2328;
+  --dcs-muted: #59636e;
+  --dcs-border: #d0d7de;
+  --dcs-surface: #f6f8fa;
+  --dcs-surface-hover: #eaeef2;
+  --dcs-accent: #0969da;
+  --dcs-accent-fg: #ffffff;
+  --dcs-ok: #1a7f37;
+  --dcs-err: #cf222e;
+  --dcs-code-bg: #f6f8fa;
+}
+
+@media (prefers-color-scheme: dark) {
+  .dcs-root {
+    --dcs-bg: #0d1117;
+    --dcs-fg: #e6edf3;
+    --dcs-muted: #8b949e;
+    --dcs-border: #30363d;
+    --dcs-surface: #161b22;
+    --dcs-surface-hover: #21262d;
+    --dcs-accent: #2f81f7;
+    --dcs-accent-fg: #ffffff;
+    --dcs-ok: #3fb950;
+    --dcs-err: #f85149;
+    --dcs-code-bg: #161b22;
+  }
+}
+
+.dcs-center {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+}
+
+.dcs-card {
+  width: 100%;
+  max-width: 560px;
+}
+
+.dcs-eyebrow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0 0 10px;
+  font-size: 12px;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--dcs-muted);
+}
+
+.dcs-title {
+  margin: 0 0 8px;
+  font-size: 22px;
+  font-weight: 650;
+}
+
+.dcs-lead {
+  margin: 0 0 20px;
+  font-size: 14px;
+  line-height: 1.55;
+  color: var(--dcs-muted);
+}
+
+.dcs-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 16px;
+  margin: 0 0 20px;
+  font-size: 12.5px;
+  color: var(--dcs-muted);
+}
+
+.dcs-meta code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  color: var(--dcs-fg);
+}
+
+.dcs-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+}
+
+.dcs-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+  border: 1px solid var(--dcs-border);
+  border-radius: 7px;
+  background: var(--dcs-surface);
+  color: var(--dcs-fg);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 550;
+  cursor: pointer;
+  transition: background 0.12s;
+}
+
+.dcs-btn:hover {
+  background: var(--dcs-surface-hover);
+}
+
+.dcs-btn:disabled {
+  opacity: 0.55;
+  cursor: default;
+}
+
+.dcs-btn.primary {
+  border-color: transparent;
+  background: var(--dcs-accent);
+  color: var(--dcs-accent-fg);
+}
+
+.dcs-btn.primary:hover {
+  background: var(--dcs-accent);
+  filter: brightness(1.07);
+}
+
+.dcs-link {
+  color: var(--dcs-accent);
+  font-size: 13px;
+  text-decoration: none;
+}
+
+.dcs-link:hover {
+  text-decoration: underline;
+}
+
+.dcs-install {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin: 0 0 20px;
+}
+
+.dcs-install-row label {
+  display: block;
+  margin: 0 0 4px;
+  font-size: 12px;
+  color: var(--dcs-muted);
+}
+
+.dcs-cmd {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  border: 1px solid var(--dcs-border);
+  border-radius: 7px;
+  background: var(--dcs-code-bg);
+}
+
+.dcs-cmd code {
+  flex: 1;
+  overflow-x: auto;
+  white-space: nowrap;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12.5px;
+  color: var(--dcs-fg);
+}
+
+.dcs-copy {
+  flex: none;
+  padding: 3px 9px;
+  border: 1px solid var(--dcs-border);
+  border-radius: 5px;
+  background: var(--dcs-surface);
+  color: var(--dcs-muted);
+  font: inherit;
+  font-size: 11px;
+  cursor: pointer;
+}
+
+.dcs-copy:hover {
+  color: var(--dcs-fg);
+}
+
+.dcs-error {
+  margin: 0 0 18px;
+  padding: 10px 12px;
+  border: 1px solid color-mix(in srgb, var(--dcs-err) 35%, transparent);
+  border-radius: 7px;
+  background: color-mix(in srgb, var(--dcs-err) 9%, transparent);
+  color: var(--dcs-err);
+  font-size: 13px;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.dcs-spinner {
+  width: 18px;
+  height: 18px;
+  border: 2px solid var(--dcs-border);
+  border-top-color: var(--dcs-accent);
+  border-radius: 50%;
+  animation: dcs-spin 0.7s linear infinite;
+}
+
+@keyframes dcs-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Running: the editor fills the whole surface — no chrome over the iframe. */
+.dcs-frame {
+  flex: 1;
+  width: 100%;
+  border: 0;
+  background: var(--dcs-bg);
+}
diff --git a/plugins/code-server/src/client/view.ts b/plugins/code-server/src/client/view.ts
new file mode 100644
index 0000000..b0ca4a4
--- /dev/null
+++ b/plugins/code-server/src/client/view.ts
@@ -0,0 +1,251 @@
+import type {
+  CodeServerAuth,
+  CodeServerDetection,
+  CodeServerServerInfo,
+} from '../types'
+
+/** The data the view renders from. Pure — no RPC, no process knowledge. */
+export interface CodeServerViewState {
+  detection: CodeServerDetection
+  server: CodeServerServerInfo
+  /** Auth handoff; present only once the editor is reachable. */
+  auth?: CodeServerAuth
+  /** A request (launch / re-check) is in flight. */
+  busy?: boolean
+}
+
+/** User intents the view surfaces. */
+export interface CodeServerViewActions {
+  launch: () => void
+  recheck: () => void
+}
+
+export interface CodeServerViewOptions {
+  actions?: Partial<CodeServerViewActions>
+  /**
+   * Build the editor iframe URL from the running port. Defaults to the
+   * current page host so the cookie set on this origin reaches the iframe.
+   */
+  resolveEditorUrl?: (port: number) => string
+  /**
+   * Apply code-server's session cookie before the iframe loads. Defaults to
+   * `document.cookie`. Storybook overrides this to a no-op.
+   */
+  applyAuth?: (auth: CodeServerAuth) => void
+}
+
+/** Discrete UI states, one per Storybook story. */
+export type CodeServerPhase = 'connecting' | 'not-installed' | 'launch' | 'starting' | 'running'
+
+export interface CodeServerViewHandle {
+  /** Re-render from a new state (cheap; reuses the live iframe when unchanged). */
+  update: (state: CodeServerViewState) => void
+  dispose: () => void
+}
+
+const DOCS_URL = 'https://coder.com/docs/code-server/latest/install'
+const REPO_URL = 'https://github.com/coder/code-server'
+
+const INSTALL_COMMANDS: { label: string, command: string }[] = [
+  { label: 'Install script (Linux / macOS)', command: 'curl -fsSL https://code-server.dev/install.sh | sh' },
+  { label: 'npm', command: 'npm install -g code-server' },
+  { label: 'Homebrew', command: 'brew install code-server' },
+]
+
+/** Map a state to its discrete UI phase. */
+export function resolvePhase(state: CodeServerViewState): CodeServerPhase {
+  const { detection, server, auth, busy } = state
+  if (server.status === 'running' && server.port != null)
+    // The iframe must not load before the auth handoff, or code-server shows
+    // its login page — hold on the progress state until the cookie arrives.
+    return auth ? 'running' : 'starting'
+  if (server.status === 'starting' || (busy && server.status !== 'error'))
+    return 'starting'
+  if (!detection.checked)
+    return 'connecting'
+  if (!detection.installed)
+    return 'not-installed'
+  return 'launch'
+}
+
+function el<K extends keyof HTMLElementTagNameMap>(tag: K, className?: string, text?: string): HTMLElementTagNameMap[K] {
+  const node = document.createElement(tag)
+  if (className)
+    node.className = className
+  if (text != null)
+    node.textContent = text
+  return node
+}
+
+function defaultEditorUrl(port: number): string {
+  return `${location.protocol}//${location.hostname}:${port}/`
+}
+
+function defaultApplyAuth(auth: CodeServerAuth): void {
+  document.cookie = `${auth.cookieName}=${auth.cookieValue}; path=/; SameSite=Lax`
+}
+
+/**
+ * Create the code-server launcher view inside `container`. The view is a pure
+ * function of {@link CodeServerViewState}: callers (the SPA via
+ * `mountCodeServer`, or Storybook) push state with `update()` and wire intent
+ * through `options.actions`. It performs no RPC and owns no process state, so
+ * every UI phase can be rendered in isolation.
+ */
+export function createCodeServerView(
+  container: HTMLElement,
+  options: CodeServerViewOptions = {},
+): CodeServerViewHandle {
+  const resolveEditorUrl = options.resolveEditorUrl ?? defaultEditorUrl
+  const applyAuth = options.applyAuth ?? defaultApplyAuth
+  const launch = (): void => options.actions?.launch?.()
+  const recheck = (): void => options.actions?.recheck?.()
+
+  const root = el('div', 'dcs-root')
+  container.append(root)
+
+  let frameSrc: string | null = null
+
+  function shell(...children: Node[]): void {
+    frameSrc = null
+    const center = el('div', 'dcs-center')
+    const card = el('div', 'dcs-card')
+    card.append(...children)
+    center.append(card)
+    root.replaceChildren(center)
+  }
+
+  function renderConnecting(): void {
+    const wrap = el('div', 'dcs-actions')
+    wrap.append(el('div', 'dcs-spinner'), el('span', 'dcs-lead', 'Connecting to devframe…'))
+    shell(wrap)
+  }
+
+  function renderNotInstalled(busy: boolean): void {
+    const nodes: Node[] = []
+    nodes.push(el('p', 'dcs-eyebrow', 'code-server'))
+    nodes.push(el('h1', 'dcs-title', 'code-server is not installed'))
+    nodes.push(el('p', 'dcs-lead', 'Install code-server (VS Code in the browser) to open the editor here. Pick whichever fits your setup, then re-check.'))
+
+    const install = el('div', 'dcs-install')
+    for (const { label, command } of INSTALL_COMMANDS) {
+      const row = el('div', 'dcs-install-row')
+      row.append(el('label', undefined, label))
+      const cmd = el('div', 'dcs-cmd')
+      cmd.append(el('code', undefined, command))
+      const copy = el('button', 'dcs-copy', 'Copy')
+      copy.onclick = () => {
+        navigator.clipboard?.writeText(command).then(() => {
+          copy.textContent = 'Copied'
+          setTimeout(() => {
+            copy.textContent = 'Copy'
+          }, 1200)
+        }).catch(() => {})
+      }
+      cmd.append(copy)
+      row.append(cmd)
+      install.append(row)
+    }
+    nodes.push(install)
+
+    const actions = el('div', 'dcs-actions')
+    const recheckBtn = el('button', 'dcs-btn primary', busy ? 'Checking…' : 'Re-check')
+    recheckBtn.disabled = busy
+    recheckBtn.onclick = recheck
+    actions.append(recheckBtn)
+    actions.append(link('Installation docs ↗', DOCS_URL))
+    actions.append(link('GitHub ↗', REPO_URL))
+    nodes.push(actions)
+    shell(...nodes)
+  }
+
+  function renderLaunch(state: CodeServerViewState): void {
+    const { detection, server, busy } = state
+    const nodes: Node[] = []
+    nodes.push(el('p', 'dcs-eyebrow', 'code-server'))
+    nodes.push(el('h1', 'dcs-title', 'Launch the editor'))
+    nodes.push(el('p', 'dcs-lead', 'Start a code-server instance scoped to this workspace and open VS Code right here. The server runs with a generated password and the editor is signed in automatically.'))
+
+    if (server.status === 'error' && server.error)
+      nodes.push(el('div', 'dcs-error', server.error))
+
+    const meta = el('div', 'dcs-meta')
+    if (detection.version) {
+      const v = el('span')
+      v.append(document.createTextNode('version '), el('code', undefined, detection.version))
+      meta.append(v)
+    }
+    const b = el('span')
+    b.append(document.createTextNode('binary '), el('code', undefined, detection.bin))
+    meta.append(b)
+    nodes.push(meta)
+
+    const actions = el('div', 'dcs-actions')
+    const launchBtn = el('button', 'dcs-btn primary')
+    if (busy)
+      launchBtn.append(el('span', 'dcs-spinner'), document.createTextNode('Starting…'))
+    else
+      launchBtn.textContent = 'Launch code-server'
+    launchBtn.disabled = busy ?? false
+    launchBtn.onclick = launch
+    actions.append(launchBtn)
+    nodes.push(actions)
+    shell(...nodes)
+  }
+
+  function renderStarting(): void {
+    const wrap = el('div', 'dcs-actions')
+    wrap.append(el('div', 'dcs-spinner'), el('span', 'dcs-lead', 'Starting code-server…'))
+    shell(wrap)
+  }
+
+  function renderRunning(state: CodeServerViewState): void {
+    const port = state.server.port!
+    const url = resolveEditorUrl(port)
+    // Reuse the live editor iframe across unrelated state updates.
+    if (frameSrc === url && root.querySelector('.dcs-frame'))
+      return
+    if (state.auth)
+      applyAuth(state.auth)
+    const frame = el('iframe', 'dcs-frame') as HTMLIFrameElement
+    frame.setAttribute('allow', 'clipboard-read; clipboard-write; cross-origin-isolated')
+    frame.src = url
+    frameSrc = url
+    root.replaceChildren(frame)
+  }
+
+  function link(text: string, href: string): HTMLAnchorElement {
+    const a = el('a', 'dcs-link', text) as HTMLAnchorElement
+    a.href = href
+    a.target = '_blank'
+    a.rel = 'noreferrer'
+    return a
+  }
+
+  function update(state: CodeServerViewState): void {
+    switch (resolvePhase(state)) {
+      case 'running':
+        renderRunning(state)
+        break
+      case 'starting':
+        renderStarting()
+        break
+      case 'connecting':
+        renderConnecting()
+        break
+      case 'not-installed':
+        renderNotInstalled(state.busy ?? false)
+        break
+      case 'launch':
+        renderLaunch(state)
+        break
+    }
+  }
+
+  return {
+    update,
+    dispose() {
+      root.remove()
+    },
+  }
+}
diff --git a/plugins/code-server/src/shims.d.ts b/plugins/code-server/src/shims.d.ts
new file mode 100644
index 0000000..e7941dc
--- /dev/null
+++ b/plugins/code-server/src/shims.d.ts
@@ -0,0 +1,2 @@
+// Allow side-effect CSS imports from the SPA entry and Storybook stories.
+declare module '*.css' {}
diff --git a/plugins/code-server/src/spa/index.html b/plugins/code-server/src/spa/index.html
index 07c7c48..d112f41 100644
--- a/plugins/code-server/src/spa/index.html
+++ b/plugins/code-server/src/spa/index.html
@@ -5,12 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <base href="./" />
     <title>Code Server</title>
-    <style>
-      html, body, #app { height: 100%; margin: 0; }
-      #app { position: relative; }
-      body { background: #ffffff; }
-      @media (prefers-color-scheme: dark) { body { background: #0d1117; } }
-    </style>
   </head>
   <body>
     <div id="app"></div>
diff --git a/plugins/code-server/src/spa/main.ts b/plugins/code-server/src/spa/main.ts
index b8192d9..5e090dc 100644
--- a/plugins/code-server/src/spa/main.ts
+++ b/plugins/code-server/src/spa/main.ts
@@ -1,4 +1,5 @@
 import { mountCodeServer } from '../client/index'
+import '../client/style.css'
 
 const app = document.getElementById('app')
 if (!app)
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0801c8f..65e4d1e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -130,6 +130,13 @@ catalogs:
     ua-parser-modern:
       specifier: ^0.1.1
       version: 0.1.1
+  storybook:
+    '@storybook/html-vite':
+      specifier: ^10.4.6
+      version: 10.4.6
+    storybook:
+      specifier: ^10.4.6
+      version: 10.4.6
   testing:
     '@playwright/test':
       specifier: ^1.60.0
@@ -219,7 +226,7 @@ importers:
         version: 1.1.1
       tsdown:
         specifier: catalog:build
-        version: 0.22.0(tsx@4.22.3)(typescript@6.0.3)
+        version: 0.22.0(oxc-resolver@11.21.3)(tsx@4.22.3)(typescript@6.0.3)
       tsnapi:
         specifier: catalog:testing
         version: 0.3.3(vitest@4.1.7(@types/node@25.9.1)(vite@8.0.14(@types/node@25.9.1)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.22.3)(yaml@2.8.4)))
@@ -474,7 +481,7 @@ importers:
         version: 0.2.16
       tsdown:
         specifier: catalog:build
-        version: 0.22.0(tsx@4.22.3)(typescript@6.0.3)
+        version: 0.22.0(oxc-resolver@11.21.3)(tsx@4.22.3)(typescript@6.0.3)
       ua-parser-modern:
         specifier: catalog:inlined
         version: 0.1.1
@@ -508,7 +515,7 @@ importers:
         version: 1.8.2
       tsdown:
         specifier: catalog:build
-        version: 0.22.0(tsx@4.22.3)(typescript@6.0.3)
+        version: 0.22.0(oxc-resolver@11.21.3)(tsx@4.22.3)(typescript@6.0.3)
 
   packages/nuxt:
     devDependencies:
@@ -526,7 +533,7 @@ importers:
         version: 4.4.6(@babel/plugin-syntax-jsx@7.28.6(@babel/core@7.29.0))(@babel/plugin-syntax-typescript@7.28.6(@babel/core@7.29.0))(@parcel/watcher@2.5.6)(@types/node@25.9.1)(@vue/compiler-sfc@3.5.34)(cac@6.7.14)(db0@0.3.4)(eslint@10.4.0(jiti@2.7.0))(ioredis@5.10.1)(lightningcss@1.32.0)(magicast@0.5.2)(optionator@0.9.4)(rolldown@1.0.2)(rollup-plugin-visualizer@7.0.1(rolldown@1.0.2)(rollup@4.60.3))(rollup@4.60.3)(srvx@0.11.15)(terser@5.47.1)(tsx@4.22.3)(typescript@6.0.3)(vite@8.0.14(@types/node@25.9.1)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.22.3)(yaml@2.8.4))(yaml@2.8.4)
       tsdown:
         specifier: catalog:build
-        version: 0.22.0(tsx@4.22.3)(typescript@6.0.3)
+        version: 0.22.0(oxc-resolver@11.21.3)(tsx@4.22.3)(typescript@6.0.3)
 
   plugins/code-server:
     dependencies:
@@ -535,8 +542,11 @@ importers:
         version: 3.2.0
       nostics:
         specifier: catalog:deps
-        version: 0.2.0
+        version: 1.1.4
     devDependencies:
+      '@storybook/html-vite':
+        specifier: catalog:storybook
+        version: 10.4.6(esbuild@0.28.0)(rollup@4.60.3)(storybook@10.4.6(@testing-library/dom@10.4.1)(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(vite@8.0.14(@types/node@25.9.1)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.22.3)(yaml@2.8.4))
       '@types/node':
         specifier: catalog:types
         version: 25.9.1
@@ -546,9 +556,12 @@ importers:
       h3:
         specifier: catalog:deps
         version: 2.0.1-rc.22(crossws@0.4.5(srvx@0.11.15))
+      storybook:
+        specifier: catalog:storybook
+        version: 10.4.6(@testing-library/dom@10.4.1)(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       tsdown:
         specifier: catalog:build
-        version: 0.22.0(tsx@4.22.3)(typescript@6.0.3)
+        version: 0.22.0(oxc-resolver@11.21.3)(tsx@4.22.3)(typescript@6.0.3)
       vite:
         specifier: catalog:build
         version: 8.0.14(@types/node@25.9.1)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.22.3)(yaml@2.8.4)
@@ -561,6 +574,9 @@ importers:
 
 packages:
 
+  '@adobe/css-tools@4.5.0':
+    resolution: {integrity: sha512-6OzddxPio9UiWTCemp4N8cYLV2ZN1ncRnV1cVGtve7dhPOtRkleRyx32GQCYSwDYgaHU3USMm84tNsvKzRCa1Q==}
+
   '@antfu/eslint-config@9.0.0':
     resolution: {integrity: sha512-8aQW0UWHoNMdVxTfzs1+w10t26plsc9oFs8YhCyCtST5nnANJe/VAjqvR3hYI1l3PHBeo4tjVMg8wuu6g3OLlA==}
     hasBin: true
@@ -767,6 +783,10 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
+  '@babel/runtime@7.29.7':
+    resolution: {integrity: sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/template@7.28.6':
     resolution: {integrity: sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==}
     engines: {node: '>=6.9.0'}
@@ -856,12 +876,27 @@ packages:
   '@emnapi/core@1.10.0':
     resolution: {integrity: sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==}
 
+  '@emnapi/core@1.11.0':
+    resolution: {integrity: sha512-l9Oo58x0HOP5znGzVhYW9U3e5wVuA4LAZU2AGezTmkhO1CgQRFDhDg4nneHsu/t3WniXg9QrG2nIXL/ZS8ln8Q==}
+
+  '@emnapi/core@1.9.2':
+    resolution: {integrity: sha512-UC+ZhH3XtczQYfOlu3lNEkdW/p4dsJ1r/bP7H8+rhao3TTTMO1ATq/4DdIi23XuGoFY+Cz0JmCbdVl0hz9jZcA==}
+
   '@emnapi/runtime@1.10.0':
     resolution: {integrity: sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==}
 
+  '@emnapi/runtime@1.11.0':
+    resolution: {integrity: sha512-55coeOFKHv1ywEcUXJtWU5f+Jr/W5tZDvZig8DLKSwUN1JpROQ4rk/SNOQiFWmaR/VKF4zuFyW1B8JduOSv6Pg==}
+
+  '@emnapi/runtime@1.9.2':
+    resolution: {integrity: sha512-3U4+MIWHImeyu1wnmVygh5WlgfYDtyf0k8AbLhMFxOipihf6nrWC4syIm/SwEeec0mNSafiiNnMJwbza/Is6Lw==}
+
   '@emnapi/wasi-threads@1.2.1':
     resolution: {integrity: sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==}
 
+  '@emnapi/wasi-threads@1.2.2':
+    resolution: {integrity: sha512-c95qOXkHdydNKhscBTebqEC1CVAZpyqOfVfBzQ1qgzyl3gfeldUjIggDbIZgDKsHLgnsM+igH7TJ/eAasaVuMA==}
+
   '@es-joy/jsdoccomment@0.84.0':
     resolution: {integrity: sha512-0xew1CxOam0gV5OMjh2KjFQZsKL2bByX1+q4j3E73MpYIdyUxcZb/xQct9ccUb+ve5KGUYbCUxyPnYB7RbuP+w==}
     engines: {node: ^20.19.0 || ^22.13.0 || >=24}
@@ -1494,6 +1529,12 @@ packages:
       '@emnapi/core': ^1.7.1
       '@emnapi/runtime': ^1.7.1
 
+  '@napi-rs/wasm-runtime@1.1.5':
+    resolution: {integrity: sha512-AWPoBRJ9tsnVhor4sjO7rkni+7p+2IAEFj6cx06UgP10jkQHqay/36uRV/bFkgrh18D9vb4cr8Q0Pthskgzy+Q==}
+    peerDependencies:
+      '@emnapi/core': ^1.7.1
+      '@emnapi/runtime': ^1.7.1
+
   '@next/env@16.2.6':
     resolution: {integrity: sha512-gd8HoHN4ufj73WmR3JmVolrpJR47ILK6LouP5xElPglaVxir6e1a7VzvTvDWkOoPXT9rkkTzyCxBu4yeZfZwcw==}
 
@@ -1779,6 +1820,12 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@oxc-parser/binding-android-arm-eabi@0.127.0':
+    resolution: {integrity: sha512-0LC7ye4hvqbIKxAzThzvswgHLFu2AURKzYLeSVvLdu2TBOYWQDmHnTqPLeA597BcUCxiLqLsS4CJ5uoI5WYWCQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [android]
+
   '@oxc-parser/binding-android-arm-eabi@0.129.0':
     resolution: {integrity: sha512-sG37CfXLlYXdDrggAFO/mKcO4w36piwf862xAZXIuf3nzKhWK1FvW4dqie+06++z+mDto2QeOQSvhyzBeK5jsQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -1791,6 +1838,12 @@ packages:
     cpu: [arm]
     os: [android]
 
+  '@oxc-parser/binding-android-arm64@0.127.0':
+    resolution: {integrity: sha512-b5jtVTH6AU5CJXHNdj7Jj9IEiR9yVjjnwHzPJhGyHGPdcsZSzBCkS9GBbV33niRMvKthDwQRFRJfI4a+k4PvYg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
+
   '@oxc-parser/binding-android-arm64@0.129.0':
     resolution: {integrity: sha512-DVyLFN2+S0VOhT6lm5++tFqlu3x2Njiby6y5DhTzjV5uRsZWpifsBn6+yjtwAxl105peEjs5BHE3ToBJuQjLTg==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -1803,6 +1856,12 @@ packages:
     cpu: [arm64]
     os: [android]
 
+  '@oxc-parser/binding-darwin-arm64@0.127.0':
+    resolution: {integrity: sha512-obCE8B7ISKkJidjlhv9xRGJPOSDG2Yu6PRga9Ruaz35uintHxbp1Ki/Yc71wx4rj3Edrm0a1kzG1TAwit0wFpg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
+
   '@oxc-parser/binding-darwin-arm64@0.129.0':
     resolution: {integrity: sha512-QeqThtB8qax4IL+NFBWgshudyKkj5c076L8vyd8PCEx7U1wHyIbH49MEQ5J5iURFhUW5jiFmdnLKEwyOo0GAJA==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -1815,6 +1874,12 @@ packages:
     cpu: [arm64]
     os: [darwin]
 
+  '@oxc-parser/binding-darwin-x64@0.127.0':
+    resolution: {integrity: sha512-JL6Xb5IwPQT8rUzlpsX7E+AgfcdNklXNPFp8pjCQQ5MQOQo5rtEB2ui+3Hgg9Sn7Y9Egj6YOLLiHhLpdAe12Aw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [darwin]
+
   '@oxc-parser/binding-darwin-x64@0.129.0':
     resolution: {integrity: sha512-zn5+7nv4DlK4uFgblmhKm6xRV0QUHXOHyIDkjmhxJ53xSA9ahkb3pHNiHesNPXn/nK/VWU+C+Z6JYHdatZBh7g==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -1827,6 +1892,12 @@ packages:
     cpu: [x64]
     os: [darwin]
 
+  '@oxc-parser/binding-freebsd-x64@0.127.0':
+    resolution: {integrity: sha512-SDQ/3MQFw58fqQz3Z1PhSKFF3JoCF4gmlNjziDm8X02tTahCw0qJbd7FGPDKw1i4VTBZene9JPyC3mHtSvi+wA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [freebsd]
+
   '@oxc-parser/binding-freebsd-x64@0.129.0':
     resolution: {integrity: sha512-SPTcDBiHWlgRpWFC1jnoi0sBWqCw4DFR+4b8+dV+NAhUu2ONERWyIVIOCfcE9a8BlvZsDCuXf3l/x7wQUs1Rsw==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -1839,6 +1910,12 @@ packages:
     cpu: [x64]
     os: [freebsd]
 
+  '@oxc-parser/binding-linux-arm-gnueabihf@0.127.0':
+    resolution: {integrity: sha512-Av+D1MIqzV0YMGPT9we2SIZaMKD7Cxs4CvXSx/yxaWHewZjYEjScpOf5igc8IILASViw4WTnjlwUdI1KzVtDHQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
   '@oxc-parser/binding-linux-arm-gnueabihf@0.129.0':
     resolution: {integrity: sha512-Rgc9+WNKLbc+chyDTXyyJ7gbgLo+ve27CrRnmIwGgucGflrBZbutge5jdPPegcgf46RrR4dkBbMCp0/x16mdig==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -1851,6 +1928,12 @@ packages:
     cpu: [arm]
     os: [linux]
 
+  '@oxc-parser/binding-linux-arm-musleabihf@0.127.0':
+    resolution: {integrity: sha512-Cs2fdJ8cPpFdeebj6p4dag8A4+56hPvZ0AhQQzlaLswGz1tz7bXt1nETLeorrM9+AMcWFFkqxcXwDGfTVidY8g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
   '@oxc-parser/binding-linux-arm-musleabihf@0.129.0':
     resolution: {integrity: sha512-YtSsJ51VysXqlO8Cs2mWTyXvxBRemTHj4WDQjXwKl0SAxh+CVrEdXrdH+RnjxLj3JCUMFeYuHs5c+/DImfbKkg==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -1863,6 +1946,13 @@ packages:
     cpu: [arm]
     os: [linux]
 
+  '@oxc-parser/binding-linux-arm64-gnu@0.127.0':
+    resolution: {integrity: sha512-qdOfTcT6SY8gsJrrV92uyEUyjqMGPpIB5JZUG6QN5dukYd+7/j0kX6MwK1DgQj39jtUYixxPiaRUiEN1+0CXgQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
   '@oxc-parser/binding-linux-arm64-gnu@0.129.0':
     resolution: {integrity: sha512-9oK8iQr9KtgI5JhaJ+5IwiQsXEo6NuasFgovtJGrdK/RxbA0bO4YKRvVY7M+8lozUCVz1U7XrFFODv3emIOPRA==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -1877,6 +1967,13 @@ packages:
     os: [linux]
     libc: [glibc]
 
+  '@oxc-parser/binding-linux-arm64-musl@0.127.0':
+    resolution: {integrity: sha512-EoTCZneNFU/P2qrpEM+RHmQwt+CvDkyGESG6qhr7KaegXLZwePfbrkCDfAk8/rhxbDUVGsZILX+2tqPzFtoFWA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
   '@oxc-parser/binding-linux-arm64-musl@0.129.0':
     resolution: {integrity: sha512-GghE/bf9ZqgqZFxLacgP0ImVD6UiLKQOpvpgUoIsqjopu2ms/+p1L0d0Dv2Sck+8p0FbKS2WE3IjqmIlLbxJgA==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -1891,6 +1988,13 @@ packages:
     os: [linux]
     libc: [musl]
 
+  '@oxc-parser/binding-linux-ppc64-gnu@0.127.0':
+    resolution: {integrity: sha512-zALjmZYgxFLHjXeudcDF0xFGNydTAtkAeXAr2EuC17ywCyFxcmQra4w0BMde0Yi/re4Bi4iwEoEXtYN7l6eBLQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
   '@oxc-parser/binding-linux-ppc64-gnu@0.129.0':
     resolution: {integrity: sha512-A2PW0UbERzKGV6fKX1zoe2Tkc1zVcEJSSPW9IUSKbZAPuPe+M5/5hTA+6fQbWmevabe2B3IDky66a1lFGjpBKA==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -1905,6 +2009,13 @@ packages:
     os: [linux]
     libc: [glibc]
 
+  '@oxc-parser/binding-linux-riscv64-gnu@0.127.0':
+    resolution: {integrity: sha512-fPP8M6zQLS7Jz7o9d5ArUSuAuSK3e+WCYVrCpdzeCOejidtZExJ9tjhDrAd3HEPqARBCPmdpqxESPFqy44vkBQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
   '@oxc-parser/binding-linux-riscv64-gnu@0.129.0':
     resolution: {integrity: sha512-omwxd9H+jrl1T72RI666k4ho7Eli2iHdELzf+dL0D+uXThNZXYJCbKjm5rK2hrHmDy4O+NWv7+khBrEkorLsgw==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -1919,6 +2030,13 @@ packages:
     os: [linux]
     libc: [glibc]
 
+  '@oxc-parser/binding-linux-riscv64-musl@0.127.0':
+    resolution: {integrity: sha512-7IcC4Ao02oGpfnjt+X/oF4U2mllo2qoSkw5xxiXNKL9MCTsTiAC6616beOuehdxGcnz1bRoPC1RQ2f1GQDdN+g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [musl]
+
   '@oxc-parser/binding-linux-riscv64-musl@0.129.0':
     resolution: {integrity: sha512-v2hi8id+M8C0uY8uuG2t2a5vr8H9XyHXiHL12yMdMNtgn04nnM/8hlOGuoJuxVc07PhClNiaoSaY2eXehSRa7w==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -1933,6 +2051,13 @@ packages:
     os: [linux]
     libc: [musl]
 
+  '@oxc-parser/binding-linux-s390x-gnu@0.127.0':
+    resolution: {integrity: sha512-pbXIhiNFHoqWeqDNLiJ9JkpHz1IM9k4DXa66x+1GTWMG7iLxtkXgE53iiuKSXwmk3zIYmaPVfBvgcAhS583K4Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
   '@oxc-parser/binding-linux-s390x-gnu@0.129.0':
     resolution: {integrity: sha512-UXrdDyLh1Obgj5X+IVVXWoo5/FJbFsU8/uLQ/M9lkVUwBUKpRFxNEhzwBNv21qqdKgAh+pr2CCVD8J1JfRPsIQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -1947,6 +2072,13 @@ packages:
     os: [linux]
     libc: [glibc]
 
+  '@oxc-parser/binding-linux-x64-gnu@0.127.0':
+    resolution: {integrity: sha512-MYCguB9RvBvlSd6gbuNI7QwiLoCCAlGnlRJFPrzLI6U1/9wkC/WK6LtBAUln55H1Ctqw45PWmqrobKoMhsYQzQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
   '@oxc-parser/binding-linux-x64-gnu@0.129.0':
     resolution: {integrity: sha512-hsL/3/kdX9FGLqOj8DR3Eki4Y6zO1i3+ZHhiPwX0hDt4n+18abkfUzePCv3h8SShprwCmwdxPnlrebZ5+MZ+cw==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -1961,6 +2093,13 @@ packages:
     os: [linux]
     libc: [glibc]
 
+  '@oxc-parser/binding-linux-x64-musl@0.127.0':
+    resolution: {integrity: sha512-5eY0B/bxf1xIUxb4NOTvOI3KWtBQfPWYyKAzgcrCt0mDibSZygVpO1Pz8bkeiSZ5Jj9+M09dkggG3H8I5d0Uyg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
   '@oxc-parser/binding-linux-x64-musl@0.129.0':
     resolution: {integrity: sha512-kdXvJ4crOeRld3vWl0J0VU4nmnT4pZ3lKGA5tZ1y0UPWsBtElDYd+jsz4lE36tpAbCiWm0M0PG0laUNBSE+Wlw==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -1975,6 +2114,12 @@ packages:
     os: [linux]
     libc: [musl]
 
+  '@oxc-parser/binding-openharmony-arm64@0.127.0':
+    resolution: {integrity: sha512-Gld0ajrFTUXNtdw20fVBuTQx66FA75nIVg+//pPfR3sXkuABB4mTBhl3r9JNzrJpgW//qiwxf0nWXUWGJSL3UQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [openharmony]
+
   '@oxc-parser/binding-openharmony-arm64@0.129.0':
     resolution: {integrity: sha512-DusJfcK7EGwf9TEakB+z6SXCLdHGvDZ8U8882bzWb4oVrORHpbkFl9npS7cN3YC2axcVKoktbxZevS1nxVCKFw==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -1987,6 +2132,11 @@ packages:
     cpu: [arm64]
     os: [openharmony]
 
+  '@oxc-parser/binding-wasm32-wasi@0.127.0':
+    resolution: {integrity: sha512-T6KVD7rhLzFlwGRXMnxUFfkCZD8FHnb968wVXW1mXzgRFc5RNXOBY2mPPDZ77x5Ln76ltLMgtPg0cOkU1NSrEQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [wasm32]
+
   '@oxc-parser/binding-wasm32-wasi@0.129.0':
     resolution: {integrity: sha512-Iie9CcII+ELSinKFnxTR15xhI9qriVivEhbFh3driRNbzms/5ioDAU0fwe8Mf1FEaz3n2FtiUVX0h0nwKLYk0A==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -1997,6 +2147,12 @@ packages:
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [wasm32]
 
+  '@oxc-parser/binding-win32-arm64-msvc@0.127.0':
+    resolution: {integrity: sha512-Ujvw4X+LD1CCGULcsQcvb4YNVoBGqt+JHgNNzGGaCImELiZLk477ifUH53gIbE7EKd933NdTi25JWEr9K2HwXw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
+
   '@oxc-parser/binding-win32-arm64-msvc@0.129.0':
     resolution: {integrity: sha512-99kH1udLyrts+wGm+u0VhPbogkb2wxc/6J1XMKOpS6Kx5DjBWGRZZfBjfCGI3xKSInpYbZn4TLWLX1Q1GURYwg==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -2009,6 +2165,12 @@ packages:
     cpu: [arm64]
     os: [win32]
 
+  '@oxc-parser/binding-win32-ia32-msvc@0.127.0':
+    resolution: {integrity: sha512-0cwxKO7KHQQQfo4Uf4B2SQrhgm+cJaP9OvFFhx52Tkg4bezsacu83GB2/In5bC415Ueeym+kXdnge/57rbSfTw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ia32]
+    os: [win32]
+
   '@oxc-parser/binding-win32-ia32-msvc@0.129.0':
     resolution: {integrity: sha512-tmSBR1A4yH697qV291xKyDe4OAWFchJ+cXf2wuipx/vK3n5d5Ej9MVLRtXlIcZ38n8qAjsF0/AnskaYgxM151A==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -2021,6 +2183,12 @@ packages:
     cpu: [ia32]
     os: [win32]
 
+  '@oxc-parser/binding-win32-x64-msvc@0.127.0':
+    resolution: {integrity: sha512-rOrnSQSCbhI2kowr9XxE7m9a8oQXnBHjnS6j95LxxAnEZ0+Fz20WlRXG4ondQb+ejjt2KOsa65sE6++L6kUd+w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
+
   '@oxc-parser/binding-win32-x64-msvc@0.129.0':
     resolution: {integrity: sha512-Z1PbJvkPeLASIUxa3AnrQ5H+vv1K9zC0IGnQqoKfM0ZvsvCSe0d3u5m7d9iuy+HB7GrcElHuwKb0d0qFdtG0iA==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -2033,6 +2201,9 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@oxc-project/types@0.127.0':
+    resolution: {integrity: sha512-aIYXQBo4lCbO4z0R3FHeucQHpF46l2LbMdxRvqvuRuW2OxdnSkcng5B8+K12spgLDj93rtN3+J2Vac/TIO+ciQ==}
+
   '@oxc-project/types@0.129.0':
     resolution: {integrity: sha512-3oz8m3FGdr2nDXVqmFUw7jolKliC4MoyXYIG2c7gpjBnzUWQpUGIYcXYKxTdTi+N2jusvt610ckTMkxdwHkYEg==}
 
@@ -2042,6 +2213,109 @@ packages:
   '@oxc-project/types@0.132.0':
     resolution: {integrity: sha512-FESMOxil5Se014ui/Eq8fT5uHJo6nIRwH0PfJrZJXs6Gek3ZVFOrpUv3YIZT20m+extU98Hg1Ym72U58rlsxUQ==}
 
+  '@oxc-resolver/binding-android-arm-eabi@11.21.3':
+    resolution: {integrity: sha512-eNU11A2WNizh04v3uyaJCootrHIaS0B9aHYXvAvVnPNk4xYSjMUjHnhQ6dewPN2MRYDskV85d1N0Aw0WNWhcyg==}
+    cpu: [arm]
+    os: [android]
+
+  '@oxc-resolver/binding-android-arm64@11.21.3':
+    resolution: {integrity: sha512-8Q+ZjTLvn2dIcWsrmhdrEihm7q+ag/k+mkry7Z+t0QbbHaVxXQfvH9AewyVMh/WrpEKhQ3DDgx9fYbqeCpeOEw==}
+    cpu: [arm64]
+    os: [android]
+
+  '@oxc-resolver/binding-darwin-arm64@11.21.3':
+    resolution: {integrity: sha512-wkh0qKZGHXVUDxFw3oA1TXnU2BDYY/r775oJflGeIr8uDPPoN2pk8gijQIzYRT6hoql/lg3+Tx/SaTn9e2/aGg==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@oxc-resolver/binding-darwin-x64@11.21.3':
+    resolution: {integrity: sha512-HbNc23FAQYbuyDV2vBWMez4u4mrsm5RAkniGZAWqr6lYZ3N4beeqIb776jzwRl8qL2zRhHVXpUj97X0QgogVzg==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@oxc-resolver/binding-freebsd-x64@11.21.3':
+    resolution: {integrity: sha512-K6xNsTUPEUdfrn0+kbMq5nOUB5w1C5pavPQngt4TM2FpN91lP0PBe2srSpamb4d69O7h86oAi/qWX/kZNRSjkw==}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@oxc-resolver/binding-linux-arm-gnueabihf@11.21.3':
+    resolution: {integrity: sha512-VcFmOpcpWX1zoEy8M58tR2M9YxM+Z9RuQhqAx5q0CTmrruaP7Gveejg75hzd/5sg5nk9G3aLALEa3hE2FsmmTQ==}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxc-resolver/binding-linux-arm-musleabihf@11.21.3':
+    resolution: {integrity: sha512-quVoxFLBy43hWaQbbDtQNRwAX5vX76mv7n64icAtQcJ3eNgVeblqmkupF/hAneNthdqSlnd1sTjb3aQSaDPaCQ==}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxc-resolver/binding-linux-arm64-gnu@11.21.3':
+    resolution: {integrity: sha512-X0AqNZgcD07Q4V3RDK18/vYOj/HQT/FnmEFGYS2jTWqY7JO13ryE3TEs3eAIgUJhBnNkpEaiXqz3VK8M7qQhWQ==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-resolver/binding-linux-arm64-musl@11.21.3':
+    resolution: {integrity: sha512-YkaQnaKYdbuaXvRt5Qd0GpbihzVnyfR6z1SpYfIUC6RTu4NF7lDKPjVkYb+jRI2gedVO2rVpN35Y6akG6ud4Lw==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxc-resolver/binding-linux-ppc64-gnu@11.21.3':
+    resolution: {integrity: sha512-gB9HwhrPiFqUzDeEq+y/CgAijz1YdI6BnXz5GaH2Pa9cWdutchlkGFAiAuGb/PjVQpiK6NFKzFuztxrweoit7A==}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-resolver/binding-linux-riscv64-gnu@11.21.3':
+    resolution: {integrity: sha512-zjDWBlYk8QGv0H8dsPUWqkfjYIIjG2TvspGkzXL0eImbgxtZorA/klKeHyolevoT3Kvbi+1iMr9Lhrh7jf54Og==}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-resolver/binding-linux-riscv64-musl@11.21.3':
+    resolution: {integrity: sha512-4UfsQvacV388y1zpXL7C1x1FNYaV52JtuNRiuzrfQA2z1z6ElVrsidkGsrvQ5EgeSq1Pj7kaKqrgGkvFuxJ/tw==}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxc-resolver/binding-linux-s390x-gnu@11.21.3':
+    resolution: {integrity: sha512-b5uH+HKH0MP5mNBYaK75SKsJbw52URqrx2LavYdq6wb0l3ExAG5niYRP9DWUNHdKilpaBVM2bXk9HNWrH3ew7Q==}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-resolver/binding-linux-x64-gnu@11.21.3':
+    resolution: {integrity: sha512-PjYlmilBpNRh2ntXNYAK3Am5w/nPfEpnU/96iNx7CI8EzAn12J4JRiec63wHJTH31nLoCNxBg/829pN+3CfG3Q==}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-resolver/binding-linux-x64-musl@11.21.3':
+    resolution: {integrity: sha512-QTBAb7JuHlZ7JUEyM8UiQi2f7m/L4swBhP2TNpYIDc9Wp/wRw1G/8sl6i13aIzQAXH7LKIm294LeOHd0lQR8zA==}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxc-resolver/binding-openharmony-arm64@11.21.3':
+    resolution: {integrity: sha512-4j1DFwjwv36ec9kds0jU/ucQ5Ha4ERO/H95BxR5JFf0kqUUAJ1kwII7XhTc1vZrkdJkvLGC9Q2MbpObpum8RBg==}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@oxc-resolver/binding-wasm32-wasi@11.21.3':
+    resolution: {integrity: sha512-i8oluoel5kru/j1WNrjmQSiA3GQ7wvIYVR1IwIoZtKogAhya2iub+ZKIeSIkcJOrnzQ18Tzl/F+kL3fYOxZLvA==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+
+  '@oxc-resolver/binding-win32-arm64-msvc@11.21.3':
+    resolution: {integrity: sha512-M/8dw8dD6aOs+NlPJax401CZB9I7Aut84isQLgALGGwke4Afvw+/7yYhZb94yXf6t2sPLhQLmSmtSV+2FhsOWg==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@oxc-resolver/binding-win32-x64-msvc@11.21.3':
+    resolution: {integrity: sha512-H7BCt/VnS9hnmMp42eGhZ99izSCRvlnWwy/N71K1/J8QoExwY4262Z8QiEkMDtduRJrztayDxETTckmUuAVL9Q==}
+    cpu: [x64]
+    os: [win32]
+
   '@oxc-transform/binding-android-arm-eabi@0.131.0':
     resolution: {integrity: sha512-rcNvLlbNnxTfYVlZVF+Rev2AyCpJDpwVPphG4HOJxauaT1+w5VxL+kRdxCReof4A8ZsszbvIYlvkqvaJKO4Mog==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -2775,6 +3049,50 @@ packages:
   '@standard-schema/spec@1.1.0':
     resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==}
 
+  '@storybook/builder-vite@10.4.6':
+    resolution: {integrity: sha512-BHBtD81HiXUiDQz/CaFynLtWmm7AFUQn8VnXuHipZ8KlnUANopa4yqdVuy/Gwz8ub254uFI5NMZsW/KlgWNgNg==}
+    peerDependencies:
+      storybook: ^10.4.6
+      vite: ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
+
+  '@storybook/csf-plugin@10.4.6':
+    resolution: {integrity: sha512-NILLxDqpA/JR/AazGWpsz+4fadJwRU4uhHephGtYpVOWnQA/DkJfKT6zpcJVq8+QA8A2zKMLX3GVKsXIrxjuDA==}
+    peerDependencies:
+      esbuild: '*'
+      rollup: '*'
+      storybook: ^10.4.6
+      vite: '*'
+      webpack: '*'
+    peerDependenciesMeta:
+      esbuild:
+        optional: true
+      rollup:
+        optional: true
+      vite:
+        optional: true
+      webpack:
+        optional: true
+
+  '@storybook/global@5.0.0':
+    resolution: {integrity: sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ==}
+
+  '@storybook/html-vite@10.4.6':
+    resolution: {integrity: sha512-X5CwPgtEQh5HoH0jSEGHnP8wiUX74xr69M2WOjgX6ll/QW/+mOZw4m0X+CjS+Aq1oDUSMacw+kKg6L230yjOEg==}
+    peerDependencies:
+      storybook: ^10.4.6
+      vite: ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
+
+  '@storybook/html@10.4.6':
+    resolution: {integrity: sha512-vUITtWVSP70csV10fRJVk5aQeXl9xDYr20IKDRyLtuJDoF+kETrc4nQ8f1/xnFwTg6tHSJuzYxaU8KXpHY3sLg==}
+    peerDependencies:
+      storybook: ^10.4.6
+
+  '@storybook/icons@2.0.2':
+    resolution: {integrity: sha512-KZBCpXsshAIjczYNXR/rlxEtCUX/eAbpFNwKi8bcOomrLA4t/SyPz5RF+lVPO2oZBUE4sAkt43mfJUevQDSEEw==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   '@stylistic/eslint-plugin@5.10.0':
     resolution: {integrity: sha512-nPK52ZHvot8Ju/0A4ucSX1dcPV2/1clx0kLcH5wDmrE4naKso7TUC/voUyU1O9OTKTrR6MYip6LP0ogEMQ9jPQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -2784,6 +3102,20 @@ packages:
   '@swc/helpers@0.5.15':
     resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
 
+  '@testing-library/dom@10.4.1':
+    resolution: {integrity: sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==}
+    engines: {node: '>=18'}
+
+  '@testing-library/jest-dom@6.9.1':
+    resolution: {integrity: sha512-zIcONa+hVtVSSep9UT3jZ5rizo2BsxgyDYU7WFD5eICBE7no3881HGeb/QkGfsJs6JTkY1aQhT7rIPC7e+0nnA==}
+    engines: {node: '>=14', npm: '>=6', yarn: '>=1'}
+
+  '@testing-library/user-event@14.6.1':
+    resolution: {integrity: sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw==}
+    engines: {node: '>=12', npm: '>=6'}
+    peerDependencies:
+      '@testing-library/dom': '>=7.21.4'
+
   '@turbo/darwin-64@2.9.15':
     resolution: {integrity: sha512-nnDo9R1Df+s2x6jxlERtbg7xRpuicf8p4J2krcnjeaMBt3q9V41pGXa4t9YM2Y4ozozsVJ+CH405CJUrWIQK4Q==}
     cpu: [x64]
@@ -2817,6 +3149,9 @@ packages:
   '@tybys/wasm-util@0.10.2':
     resolution: {integrity: sha512-RoBvJ2X0wuKlWFIjrwffGw1IqZHKQqzIchKaadZZfnNpsAYp2mM0h36JtPCjNDAHGgYez/15uMBpfGwchhiMgg==}
 
+  '@types/aria-query@5.0.4':
+    resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==}
+
   '@types/chai@5.2.3':
     resolution: {integrity: sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==}
 
@@ -3111,6 +3446,9 @@ packages:
       vitest:
         optional: true
 
+  '@vitest/expect@3.2.4':
+    resolution: {integrity: sha512-Io0yyORnB6sikFlt8QW5K7slY4OjqNX9jmJQ02QDda8lyM6B5oNgVWoSoKPac8/kgnCUzuHQKrSLtu/uOqqrig==}
+
   '@vitest/expect@4.1.7':
     resolution: {integrity: sha512-1R+tw0ortHEbZDGMymm+pN7/AFQ/RkFFdtd7EN+VBpynKmLbP8A3rpEXdshBJ7+8hQ9zBJh/i1s0yKNtxAnU7w==}
 
@@ -3125,6 +3463,9 @@ packages:
       vite:
         optional: true
 
+  '@vitest/pretty-format@3.2.4':
+    resolution: {integrity: sha512-IVNZik8IVRJRTr9fxlitMKeJeXFFFN0JaB9PHPGQ8NKQbGpfjlTx9zO4RefN8gp7eqjNy8nyK3NZmBzOPeIxtA==}
+
   '@vitest/pretty-format@4.1.5':
     resolution: {integrity: sha512-7I3q6l5qr03dVfMX2wCo9FxwSJbPdwKjy2uu/YPpU3wfHvIL4QHwVRp57OfGrDFeUJ8/8QdfBKIV12FTtLn00g==}
 
@@ -3137,9 +3478,15 @@ packages:
   '@vitest/snapshot@4.1.7':
     resolution: {integrity: sha512-ZacLzja+TmJeZ1h14xW2FB/WpeimUD3haBXQPyJqxvo8jQTmfeA8zv58mtjN2C7EHXZDYVcVYdYmAxjkWVvKCw==}
 
+  '@vitest/spy@3.2.4':
+    resolution: {integrity: sha512-vAfasCOe6AIK70iP5UD11Ac4siNUNJ9i/9PZ3NKx07sG6sUxeag1LWdNrMWeKKYBLlzuK+Gn65Yd5nyL6ds+nw==}
+
   '@vitest/spy@4.1.7':
     resolution: {integrity: sha512-kbkI5LMWakyuTIvs6fUJ5qdIVb1XVKsYJAT4OJ938cHMROYMSfmoQdZy0aaAnjbbc8F61vkoTqz/Az+/HiIu5Q==}
 
+  '@vitest/utils@3.2.4':
+    resolution: {integrity: sha512-fB2V0JFrQSMsCo9HiSq3Ezpdv4iYaXRG1Sx8edX3MwxfyNn83mKiGzOcH+Fkxt4MHxr3y42fQi1oeAInqgX2QA==}
+
   '@vitest/utils@4.1.5':
     resolution: {integrity: sha512-76wdkrmfXfqGjueGgnb45ITPyUi1ycZ4IHgC2bhPDUfWHklY/q3MdLOAB+TF1e6xfl8NxNY0ZYaPCFNWSsw3Ug==}
 
@@ -3269,6 +3616,9 @@ packages:
     peerDependencies:
       vue: ^3.5.0
 
+  '@webcontainer/env@1.1.1':
+    resolution: {integrity: sha512-6aN99yL695Hi9SuIk1oC88l9o0gmxL1nGWWQ/kNy81HigJ0FoaoTXpytCj6ItzgyCEwA9kF1wixsTuv5cjsgng==}
+
   abbrev@3.0.1:
     resolution: {integrity: sha512-AO2ac6pjRB3SJmGJo+v5/aK6Omggp6fsLrs6wN9bd35ulu4cCwaAU9+7ZhXjeqHVkaHThLuzH0nZr0YpCDhygg==}
     engines: {node: ^18.17.0 || >=20.5.0}
@@ -3326,6 +3676,10 @@ packages:
     resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
     engines: {node: '>=8'}
 
+  ansi-styles@5.2.0:
+    resolution: {integrity: sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==}
+    engines: {node: '>=10'}
+
   ansi-styles@6.2.3:
     resolution: {integrity: sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==}
     engines: {node: '>=12'}
@@ -3360,6 +3714,13 @@ packages:
   args-tokenizer@0.3.0:
     resolution: {integrity: sha512-xXAd7G2Mll5W8uo37GETpQ2VrE84M181Z7ugHFGQnJZ50M2mbOv0osSZ9VsSgPfJQ+LVG0prSi0th+ELMsno7Q==}
 
+  aria-query@5.3.0:
+    resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
+
+  aria-query@5.3.2:
+    resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==}
+    engines: {node: '>= 0.4'}
+
   assertion-error@2.0.1:
     resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
     engines: {node: '>=12'}
@@ -3372,6 +3733,10 @@ packages:
     resolution: {integrity: sha512-trmleAnZ2PxN/loHWVhhx1qeOHSRXq4TDsBBxq3GqeJitfk3+jTQ+v/C1km/KYq9M7wKqCewMh+/NAvVH7m+bw==}
     engines: {node: '>=20.19.0'}
 
+  ast-types@0.16.1:
+    resolution: {integrity: sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==}
+    engines: {node: '>=4'}
+
   ast-walker-scope@0.8.3:
     resolution: {integrity: sha512-cbdCP0PGOBq0ASG+sjnKIoYkWMKhhz+F/h9pRexUdX2Hd38+WOlBkRKlqkGOSm0YQpcFMQBJeK4WspUAkwsEdg==}
     engines: {node: '>=20.19.0'}
@@ -3550,6 +3915,10 @@ packages:
   ccount@2.0.1:
     resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
 
+  chai@5.3.3:
+    resolution: {integrity: sha512-4zNhdJD/iOjSH0A05ea+Ke6MU5mmpQcbQsSOkgdaUMJ9zTlDTD/GYlwohmIE2u0gaxHYiVHEn1Fw9mZ/ktJWgw==}
+    engines: {node: '>=18'}
+
   chai@6.2.2:
     resolution: {integrity: sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==}
     engines: {node: '>=18'}
@@ -3566,6 +3935,10 @@ packages:
   character-entities@2.0.2:
     resolution: {integrity: sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==}
 
+  check-error@2.1.3:
+    resolution: {integrity: sha512-PAJdDJusoxnwm1VwW07VWwUN1sl7smmC3OKggvndJFadxxDRyFJBX/ggnu/KE4kQAB7a3Dp8f/YXC1FlUprWmA==}
+    engines: {node: '>= 16'}
+
   chokidar@5.0.0:
     resolution: {integrity: sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==}
     engines: {node: '>= 20.19.0'}
@@ -3739,6 +4112,9 @@ packages:
     resolution: {integrity: sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==}
     engines: {node: '>= 6'}
 
+  css.escape@1.5.1:
+    resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}
+
   cssesc@3.0.0:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
     engines: {node: '>=4'}
@@ -3963,6 +4339,10 @@ packages:
   decode-named-character-reference@1.3.0:
     resolution: {integrity: sha512-GtpQYB283KrPp6nRw50q3U9/VfOutZOe103qlN7BPP6Ad27xYnOIWv4lPzo8HCAL+mMZofJ9KEy30fq6MfaK6Q==}
 
+  deep-eql@5.0.2:
+    resolution: {integrity: sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==}
+    engines: {node: '>=6'}
+
   deep-is@0.1.4:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
 
@@ -4021,6 +4401,12 @@ packages:
     resolution: {integrity: sha512-DPi0FmjiSU5EvQV0++GFDOJ9ASQUVFh5kD+OzOnYdi7n3Wpm9hWWGfB/O2blfHcMVTL5WkQXSnRiK9makhrcnw==}
     engines: {node: '>=0.3.1'}
 
+  dom-accessibility-api@0.5.16:
+    resolution: {integrity: sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==}
+
+  dom-accessibility-api@0.6.3:
+    resolution: {integrity: sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==}
+
   dom-serializer@2.0.0:
     resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
 
@@ -4728,6 +5114,10 @@ packages:
     resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
     engines: {node: '>=0.8.19'}
 
+  indent-string@4.0.0:
+    resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
+    engines: {node: '>=8'}
+
   indent-string@5.0.0:
     resolution: {integrity: sha512-m6FAo/spmsW2Ab2fU35JTYwtOKa2yAwXSwgjSv1TJzh4Mh7mC3lzAOVLBprb72XsTrgkEIsl7YrFNAiDiRhIGg==}
     engines: {node: '>=12'}
@@ -5061,6 +5451,9 @@ packages:
   longest-streak@3.1.0:
     resolution: {integrity: sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==}
 
+  loupe@3.2.1:
+    resolution: {integrity: sha512-CdzqowRJCeLU72bHvWqwRBBlLcMEtIvGrlvef74kMnV2AolS9Y8xUv1I0U/MNAWMhBlKIoyuEgoJ0t/bbwHbLQ==}
+
   lru-cache@10.4.3:
     resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
 
@@ -5071,6 +5464,10 @@ packages:
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
+  lz-string@1.5.0:
+    resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
+    hasBin: true
+
   magic-regexp@0.11.0:
     resolution: {integrity: sha512-LG77Z/gVnwz7oaDpD4heX6ryl+lcr4l1B2gnP4MMvt2pGhGC1Dfj7dl1pXpP4ih+VQFLuAadeKVa+lARAzfW+Q==}
 
@@ -5276,6 +5673,10 @@ packages:
     resolution: {integrity: sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==}
     engines: {node: '>=12'}
 
+  min-indent@1.0.1:
+    resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
+    engines: {node: '>=4'}
+
   minimatch@10.2.5:
     resolution: {integrity: sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg==}
     engines: {node: 18 || 20 || >=22}
@@ -5509,6 +5910,10 @@ packages:
     resolution: {integrity: sha512-Ch0sBbrqZpeNZUMhVDbU2yrTWTVrUT/MkXb9E2DAc+hbhxbbO8D/XklUtfPP86/iqrkvl178+YQvh5u8Of1mUg==}
     engines: {node: ^20.19.0 || >=22.12.0}
 
+  oxc-parser@0.127.0:
+    resolution: {integrity: sha512-bkgD4qHlN7WxLdX8bLXdaU54TtQtAIg/ZBAfm0aje/mo3MRDo3P0hZSgr4U7O3xfX+fQmR5AP04JS/TGcZLcFA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+
   oxc-parser@0.129.0:
     resolution: {integrity: sha512-S6eFI+VLkpyA+/Lf8z6qURjDV6Mgo74SLNznNopHTlQW3hedv2MB/z31kBRuBCCTqZN9HHdva0ojljEhPnBKFA==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -5517,6 +5922,9 @@ packages:
     resolution: {integrity: sha512-SJ3/7ZPbgie8dr5Z9BI/M51zZbpXba+hRSG0MDzVwMW5CRQg2fjYE0jHGlLX4eeiibGgC/mzoDFKSDHwVZEHRQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
 
+  oxc-resolver@11.21.3:
+    resolution: {integrity: sha512-2Mx3fKQz7+xgrBONjsxOgCGtMHOn38/HxMzW1I5efwXB5a4lRN0Vp40gYUJFBWJslcrvwoofTrqoTnLbwTd3pA==}
+
   oxc-transform@0.131.0:
     resolution: {integrity: sha512-ml0/elXPNnDnuHo3VHmEMN2fnybmKx7YL+0E+gMQ0fuHRZHXYJzF6YJ01KsCWg6FXY6pbZcjm7DC3xwGHnB/BA==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -5599,6 +6007,10 @@ packages:
   pathe@2.0.3:
     resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
 
+  pathval@2.0.1:
+    resolution: {integrity: sha512-//nshmD55c46FuFw26xV/xFAaB5HF9Xdap7HJBBnrKdAd6/GxDBaNA1870O79+9ueg61cZLSVc+OaFlfmObYVQ==}
+    engines: {node: '>= 14.16'}
+
   perfect-debounce@2.1.0:
     resolution: {integrity: sha512-LjgdTytVFXeUgtHZr9WYViYSM/g8MkcTPYDlPa3cDqMirHjKiSZPYd6DoL7pK8AJQr+uWkQvCjHNdiMqsrJs+g==}
 
@@ -5842,6 +6254,10 @@ packages:
     resolution: {integrity: sha512-nODzvTiYVRGRqAOvE84Vk5JDPyyxsVk0/fbA/bq7RqlnhksGpset09XTxbpvLTIjoaF7K8Z8DG8yHtKGTPSYRw==}
     engines: {node: '>=20'}
 
+  pretty-format@27.5.1:
+    resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+
   process-nextick-args@2.0.1:
     resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
 
@@ -5895,6 +6311,9 @@ packages:
     peerDependencies:
       react: ^19.2.6
 
+  react-is@17.0.2:
+    resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
+
   react@19.2.6:
     resolution: {integrity: sha512-sfWGGfavi0xr8Pg0sVsyHMAOziVYKgPLNrS7ig+ivMNb3wbCBw3KxtflsGBAwD3gYQlE/AEZsTLgToRrSCjb0Q==}
     engines: {node: '>=0.10.0'}
@@ -5913,6 +6332,14 @@ packages:
     resolution: {integrity: sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==}
     engines: {node: '>= 20.19.0'}
 
+  recast@0.23.11:
+    resolution: {integrity: sha512-YTUo+Flmw4ZXiWfQKGcwwc11KnoRAYgzAE2E7mXKCjSviTKShtxBsN6YUUBB2gtaBzKzeKunxhUwNHQuRryhWA==}
+    engines: {node: '>= 4'}
+
+  redent@3.0.0:
+    resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==}
+    engines: {node: '>=8'}
+
   redis-errors@1.2.0:
     resolution: {integrity: sha512-1qny3OExCf0UvUV/5wpYKf2YwPcOqXzkwKKSmKHiE6ZMQs5heeE/c8eXK+PNllPvmjgAbfnsbpkGZWy8cBpn9w==}
     engines: {node: '>=4'}
@@ -6224,6 +6651,21 @@ packages:
   std-env@4.1.0:
     resolution: {integrity: sha512-Rq7ybcX2RuC55r9oaPVEW7/xu3tj8u4GeBYHBWCychFtzMIr86A7e3PPEBPT37sHStKX3+TiX/Fr/ACmJLVlLQ==}
 
+  storybook@10.4.6:
+    resolution: {integrity: sha512-6wkA6LxfDSSilloITsrFOJfsnw0mDUP2h8Ls+lRt8oRsudtz2RWFhLv+Toiwg6NW7hUpdTDc2hzR7DztJid6+A==}
+    hasBin: true
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      prettier: ^2 || ^3
+      vite-plus: ^0.1.15
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      prettier:
+        optional: true
+      vite-plus:
+        optional: true
+
   streamx@2.25.0:
     resolution: {integrity: sha512-0nQuG6jf1w+wddNEEXCF4nTg3LtufWINB5eFEN+5TNZW7KWJp6x87+JFL43vaAUPyCfH1wID+mNVyW6OHtFamg==}
 
@@ -6264,6 +6706,10 @@ packages:
     resolution: {integrity: sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==}
     engines: {node: '>=12'}
 
+  strip-indent@3.0.0:
+    resolution: {integrity: sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==}
+    engines: {node: '>=8'}
+
   strip-indent@4.1.1:
     resolution: {integrity: sha512-SlyRoSkdh1dYP0PzclLE7r0M9sgbFKKMFXpFRUMNuKhQSbC6VQIGzq3E0qsfvGJaUFJPGv6Ws1NZ/haTAjfbMA==}
     engines: {node: '>=12'}
@@ -6364,10 +6810,18 @@ packages:
     resolution: {integrity: sha512-pn99VhoACYR8nFHhxqix+uvsbXineAasWm5ojXoN8xEwK5Kd3/TrhNn1wByuD52UxWRLy8pu+kRMniEi6Eq9Zg==}
     engines: {node: '>=12.0.0'}
 
+  tinyrainbow@2.0.0:
+    resolution: {integrity: sha512-op4nsTR47R6p0vMUUoYl/a+ljLFVtlfaXkLQmqfLR1qHma1h/ysYk4hEXZ880bf2CYgTskvTa/e196Vd5dDQXw==}
+    engines: {node: '>=14.0.0'}
+
   tinyrainbow@3.1.0:
     resolution: {integrity: sha512-Bf+ILmBgretUrdJxzXM0SgXLZ3XfiaUuOj/IKQHuTXip+05Xn+uyEYdVg0kYDipTBcLrCVyUzAPz7QmArb0mmw==}
     engines: {node: '>=14.0.0'}
 
+  tinyspy@4.0.4:
+    resolution: {integrity: sha512-azl+t0z7pw/z958Gy9svOTuzqIk6xq+NSheJzn5MMWtWTFywIacg2wUlzKFGtt3cthx0r2SxMK0yzJOR0IES7Q==}
+    engines: {node: '>=14.0.0'}
+
   to-regex-range@5.0.1:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}
@@ -6668,6 +7122,11 @@ packages:
   uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
 
+  use-sync-external-store@1.6.0:
+    resolution: {integrity: sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
@@ -7085,6 +7544,8 @@ packages:
 
 snapshots:
 
+  '@adobe/css-tools@4.5.0': {}
+
   '@antfu/eslint-config@9.0.0(@typescript-eslint/rule-tester@8.59.2(eslint@10.4.0(jiti@2.7.0))(typescript@6.0.3))(@typescript-eslint/typescript-estree@8.59.2(typescript@6.0.3))(@typescript-eslint/utils@8.59.2(eslint@10.4.0(jiti@2.7.0))(typescript@6.0.3))(@vue/compiler-sfc@3.5.34)(eslint@10.4.0(jiti@2.7.0))(typescript@6.0.3)(vitest@4.1.7(@types/node@25.9.1)(vite@8.0.14(@types/node@25.9.1)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.22.3)(yaml@2.8.4)))':
     dependencies:
       '@antfu/install-pkg': 1.1.0
@@ -7329,6 +7790,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/runtime@7.29.7': {}
+
   '@babel/template@7.28.6':
     dependencies:
       '@babel/code-frame': 7.29.0
@@ -7419,16 +7882,43 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
+  '@emnapi/core@1.11.0':
+    dependencies:
+      '@emnapi/wasi-threads': 1.2.2
+      tslib: 2.8.1
+    optional: true
+
+  '@emnapi/core@1.9.2':
+    dependencies:
+      '@emnapi/wasi-threads': 1.2.1
+      tslib: 2.8.1
+    optional: true
+
   '@emnapi/runtime@1.10.0':
     dependencies:
       tslib: 2.8.1
     optional: true
 
+  '@emnapi/runtime@1.11.0':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@emnapi/runtime@1.9.2':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
   '@emnapi/wasi-threads@1.2.1':
     dependencies:
       tslib: 2.8.1
     optional: true
 
+  '@emnapi/wasi-threads@1.2.2':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
   '@es-joy/jsdoccomment@0.84.0':
     dependencies:
       '@types/estree': 1.0.9
@@ -7903,6 +8393,20 @@ snapshots:
       '@tybys/wasm-util': 0.10.2
     optional: true
 
+  '@napi-rs/wasm-runtime@1.1.4(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)':
+    dependencies:
+      '@emnapi/core': 1.9.2
+      '@emnapi/runtime': 1.9.2
+      '@tybys/wasm-util': 0.10.2
+    optional: true
+
+  '@napi-rs/wasm-runtime@1.1.5(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)':
+    dependencies:
+      '@emnapi/core': 1.11.0
+      '@emnapi/runtime': 1.11.0
+      '@tybys/wasm-util': 0.10.2
+    optional: true
+
   '@next/env@16.2.6': {}
 
   '@next/swc-darwin-arm64@16.2.6':
@@ -8305,102 +8809,157 @@ snapshots:
   '@oxc-minify/binding-win32-x64-msvc@0.131.0':
     optional: true
 
+  '@oxc-parser/binding-android-arm-eabi@0.127.0':
+    optional: true
+
   '@oxc-parser/binding-android-arm-eabi@0.129.0':
     optional: true
 
   '@oxc-parser/binding-android-arm-eabi@0.131.0':
     optional: true
 
+  '@oxc-parser/binding-android-arm64@0.127.0':
+    optional: true
+
   '@oxc-parser/binding-android-arm64@0.129.0':
     optional: true
 
   '@oxc-parser/binding-android-arm64@0.131.0':
     optional: true
 
+  '@oxc-parser/binding-darwin-arm64@0.127.0':
+    optional: true
+
   '@oxc-parser/binding-darwin-arm64@0.129.0':
     optional: true
 
   '@oxc-parser/binding-darwin-arm64@0.131.0':
     optional: true
 
+  '@oxc-parser/binding-darwin-x64@0.127.0':
+    optional: true
+
   '@oxc-parser/binding-darwin-x64@0.129.0':
     optional: true
 
   '@oxc-parser/binding-darwin-x64@0.131.0':
     optional: true
 
+  '@oxc-parser/binding-freebsd-x64@0.127.0':
+    optional: true
+
   '@oxc-parser/binding-freebsd-x64@0.129.0':
     optional: true
 
   '@oxc-parser/binding-freebsd-x64@0.131.0':
     optional: true
 
+  '@oxc-parser/binding-linux-arm-gnueabihf@0.127.0':
+    optional: true
+
   '@oxc-parser/binding-linux-arm-gnueabihf@0.129.0':
     optional: true
 
   '@oxc-parser/binding-linux-arm-gnueabihf@0.131.0':
     optional: true
 
+  '@oxc-parser/binding-linux-arm-musleabihf@0.127.0':
+    optional: true
+
   '@oxc-parser/binding-linux-arm-musleabihf@0.129.0':
     optional: true
 
   '@oxc-parser/binding-linux-arm-musleabihf@0.131.0':
     optional: true
 
+  '@oxc-parser/binding-linux-arm64-gnu@0.127.0':
+    optional: true
+
   '@oxc-parser/binding-linux-arm64-gnu@0.129.0':
     optional: true
 
   '@oxc-parser/binding-linux-arm64-gnu@0.131.0':
     optional: true
 
+  '@oxc-parser/binding-linux-arm64-musl@0.127.0':
+    optional: true
+
   '@oxc-parser/binding-linux-arm64-musl@0.129.0':
     optional: true
 
   '@oxc-parser/binding-linux-arm64-musl@0.131.0':
     optional: true
 
+  '@oxc-parser/binding-linux-ppc64-gnu@0.127.0':
+    optional: true
+
   '@oxc-parser/binding-linux-ppc64-gnu@0.129.0':
     optional: true
 
   '@oxc-parser/binding-linux-ppc64-gnu@0.131.0':
     optional: true
 
+  '@oxc-parser/binding-linux-riscv64-gnu@0.127.0':
+    optional: true
+
   '@oxc-parser/binding-linux-riscv64-gnu@0.129.0':
     optional: true
 
   '@oxc-parser/binding-linux-riscv64-gnu@0.131.0':
     optional: true
 
+  '@oxc-parser/binding-linux-riscv64-musl@0.127.0':
+    optional: true
+
   '@oxc-parser/binding-linux-riscv64-musl@0.129.0':
     optional: true
 
   '@oxc-parser/binding-linux-riscv64-musl@0.131.0':
     optional: true
 
+  '@oxc-parser/binding-linux-s390x-gnu@0.127.0':
+    optional: true
+
   '@oxc-parser/binding-linux-s390x-gnu@0.129.0':
     optional: true
 
   '@oxc-parser/binding-linux-s390x-gnu@0.131.0':
     optional: true
 
+  '@oxc-parser/binding-linux-x64-gnu@0.127.0':
+    optional: true
+
   '@oxc-parser/binding-linux-x64-gnu@0.129.0':
     optional: true
 
   '@oxc-parser/binding-linux-x64-gnu@0.131.0':
     optional: true
 
+  '@oxc-parser/binding-linux-x64-musl@0.127.0':
+    optional: true
+
   '@oxc-parser/binding-linux-x64-musl@0.129.0':
     optional: true
 
   '@oxc-parser/binding-linux-x64-musl@0.131.0':
     optional: true
 
+  '@oxc-parser/binding-openharmony-arm64@0.127.0':
+    optional: true
+
   '@oxc-parser/binding-openharmony-arm64@0.129.0':
     optional: true
 
   '@oxc-parser/binding-openharmony-arm64@0.131.0':
     optional: true
 
+  '@oxc-parser/binding-wasm32-wasi@0.127.0':
+    dependencies:
+      '@emnapi/core': 1.9.2
+      '@emnapi/runtime': 1.9.2
+      '@napi-rs/wasm-runtime': 1.1.4(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)
+    optional: true
+
   '@oxc-parser/binding-wasm32-wasi@0.129.0':
     dependencies:
       '@emnapi/core': 1.10.0
@@ -8415,30 +8974,102 @@ snapshots:
       '@napi-rs/wasm-runtime': 1.1.4(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
     optional: true
 
+  '@oxc-parser/binding-win32-arm64-msvc@0.127.0':
+    optional: true
+
   '@oxc-parser/binding-win32-arm64-msvc@0.129.0':
     optional: true
 
   '@oxc-parser/binding-win32-arm64-msvc@0.131.0':
     optional: true
 
+  '@oxc-parser/binding-win32-ia32-msvc@0.127.0':
+    optional: true
+
   '@oxc-parser/binding-win32-ia32-msvc@0.129.0':
     optional: true
 
   '@oxc-parser/binding-win32-ia32-msvc@0.131.0':
     optional: true
 
+  '@oxc-parser/binding-win32-x64-msvc@0.127.0':
+    optional: true
+
   '@oxc-parser/binding-win32-x64-msvc@0.129.0':
     optional: true
 
   '@oxc-parser/binding-win32-x64-msvc@0.131.0':
     optional: true
 
+  '@oxc-project/types@0.127.0': {}
+
   '@oxc-project/types@0.129.0': {}
 
   '@oxc-project/types@0.131.0': {}
 
   '@oxc-project/types@0.132.0': {}
 
+  '@oxc-resolver/binding-android-arm-eabi@11.21.3':
+    optional: true
+
+  '@oxc-resolver/binding-android-arm64@11.21.3':
+    optional: true
+
+  '@oxc-resolver/binding-darwin-arm64@11.21.3':
+    optional: true
+
+  '@oxc-resolver/binding-darwin-x64@11.21.3':
+    optional: true
+
+  '@oxc-resolver/binding-freebsd-x64@11.21.3':
+    optional: true
+
+  '@oxc-resolver/binding-linux-arm-gnueabihf@11.21.3':
+    optional: true
+
+  '@oxc-resolver/binding-linux-arm-musleabihf@11.21.3':
+    optional: true
+
+  '@oxc-resolver/binding-linux-arm64-gnu@11.21.3':
+    optional: true
+
+  '@oxc-resolver/binding-linux-arm64-musl@11.21.3':
+    optional: true
+
+  '@oxc-resolver/binding-linux-ppc64-gnu@11.21.3':
+    optional: true
+
+  '@oxc-resolver/binding-linux-riscv64-gnu@11.21.3':
+    optional: true
+
+  '@oxc-resolver/binding-linux-riscv64-musl@11.21.3':
+    optional: true
+
+  '@oxc-resolver/binding-linux-s390x-gnu@11.21.3':
+    optional: true
+
+  '@oxc-resolver/binding-linux-x64-gnu@11.21.3':
+    optional: true
+
+  '@oxc-resolver/binding-linux-x64-musl@11.21.3':
+    optional: true
+
+  '@oxc-resolver/binding-openharmony-arm64@11.21.3':
+    optional: true
+
+  '@oxc-resolver/binding-wasm32-wasi@11.21.3':
+    dependencies:
+      '@emnapi/core': 1.11.0
+      '@emnapi/runtime': 1.11.0
+      '@napi-rs/wasm-runtime': 1.1.5(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)
+    optional: true
+
+  '@oxc-resolver/binding-win32-arm64-msvc@11.21.3':
+    optional: true
+
+  '@oxc-resolver/binding-win32-x64-msvc@11.21.3':
+    optional: true
+
   '@oxc-transform/binding-android-arm-eabi@0.131.0':
     optional: true
 
@@ -8935,6 +9566,50 @@ snapshots:
 
   '@standard-schema/spec@1.1.0': {}
 
+  '@storybook/builder-vite@10.4.6(esbuild@0.28.0)(rollup@4.60.3)(storybook@10.4.6(@testing-library/dom@10.4.1)(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(vite@8.0.14(@types/node@25.9.1)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.22.3)(yaml@2.8.4))':
+    dependencies:
+      '@storybook/csf-plugin': 10.4.6(esbuild@0.28.0)(rollup@4.60.3)(storybook@10.4.6(@testing-library/dom@10.4.1)(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(vite@8.0.14(@types/node@25.9.1)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.22.3)(yaml@2.8.4))
+      storybook: 10.4.6(@testing-library/dom@10.4.1)(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      ts-dedent: 2.2.0
+      vite: 8.0.14(@types/node@25.9.1)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.22.3)(yaml@2.8.4)
+    transitivePeerDependencies:
+      - esbuild
+      - rollup
+      - webpack
+
+  '@storybook/csf-plugin@10.4.6(esbuild@0.28.0)(rollup@4.60.3)(storybook@10.4.6(@testing-library/dom@10.4.1)(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(vite@8.0.14(@types/node@25.9.1)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.22.3)(yaml@2.8.4))':
+    dependencies:
+      storybook: 10.4.6(@testing-library/dom@10.4.1)(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      unplugin: 2.3.11
+    optionalDependencies:
+      esbuild: 0.28.0
+      rollup: 4.60.3
+      vite: 8.0.14(@types/node@25.9.1)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.22.3)(yaml@2.8.4)
+
+  '@storybook/global@5.0.0': {}
+
+  '@storybook/html-vite@10.4.6(esbuild@0.28.0)(rollup@4.60.3)(storybook@10.4.6(@testing-library/dom@10.4.1)(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(vite@8.0.14(@types/node@25.9.1)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.22.3)(yaml@2.8.4))':
+    dependencies:
+      '@storybook/builder-vite': 10.4.6(esbuild@0.28.0)(rollup@4.60.3)(storybook@10.4.6(@testing-library/dom@10.4.1)(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(vite@8.0.14(@types/node@25.9.1)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.22.3)(yaml@2.8.4))
+      '@storybook/html': 10.4.6(storybook@10.4.6(@testing-library/dom@10.4.1)(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))
+      storybook: 10.4.6(@testing-library/dom@10.4.1)(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      vite: 8.0.14(@types/node@25.9.1)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.22.3)(yaml@2.8.4)
+    transitivePeerDependencies:
+      - esbuild
+      - rollup
+      - webpack
+
+  '@storybook/html@10.4.6(storybook@10.4.6(@testing-library/dom@10.4.1)(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))':
+    dependencies:
+      '@storybook/global': 5.0.0
+      storybook: 10.4.6(@testing-library/dom@10.4.1)(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      ts-dedent: 2.2.0
+
+  '@storybook/icons@2.0.2(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+    dependencies:
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+
   '@stylistic/eslint-plugin@5.10.0(eslint@10.4.0(jiti@2.7.0))':
     dependencies:
       '@eslint-community/eslint-utils': 4.9.1(eslint@10.4.0(jiti@2.7.0))
@@ -8949,6 +9624,30 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
+  '@testing-library/dom@10.4.1':
+    dependencies:
+      '@babel/code-frame': 7.29.0
+      '@babel/runtime': 7.29.7
+      '@types/aria-query': 5.0.4
+      aria-query: 5.3.0
+      dom-accessibility-api: 0.5.16
+      lz-string: 1.5.0
+      picocolors: 1.1.1
+      pretty-format: 27.5.1
+
+  '@testing-library/jest-dom@6.9.1':
+    dependencies:
+      '@adobe/css-tools': 4.5.0
+      aria-query: 5.3.2
+      css.escape: 1.5.1
+      dom-accessibility-api: 0.6.3
+      picocolors: 1.1.1
+      redent: 3.0.0
+
+  '@testing-library/user-event@14.6.1(@testing-library/dom@10.4.1)':
+    dependencies:
+      '@testing-library/dom': 10.4.1
+
   '@turbo/darwin-64@2.9.15':
     optional: true
 
@@ -8972,6 +9671,8 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
+  '@types/aria-query@5.0.4': {}
+
   '@types/chai@5.2.3':
     dependencies:
       '@types/deep-eql': 4.0.2
@@ -9339,6 +10040,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@vitest/expect@3.2.4':
+    dependencies:
+      '@types/chai': 5.2.3
+      '@vitest/spy': 3.2.4
+      '@vitest/utils': 3.2.4
+      chai: 5.3.3
+      tinyrainbow: 2.0.0
+
   '@vitest/expect@4.1.7':
     dependencies:
       '@standard-schema/spec': 1.1.0
@@ -9356,6 +10065,10 @@ snapshots:
     optionalDependencies:
       vite: 8.0.14(@types/node@25.9.1)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.22.3)(yaml@2.8.4)
 
+  '@vitest/pretty-format@3.2.4':
+    dependencies:
+      tinyrainbow: 2.0.0
+
   '@vitest/pretty-format@4.1.5':
     dependencies:
       tinyrainbow: 3.1.0
@@ -9376,8 +10089,18 @@ snapshots:
       magic-string: 0.30.21
       pathe: 2.0.3
 
+  '@vitest/spy@3.2.4':
+    dependencies:
+      tinyspy: 4.0.4
+
   '@vitest/spy@4.1.7': {}
 
+  '@vitest/utils@3.2.4':
+    dependencies:
+      '@vitest/pretty-format': 3.2.4
+      loupe: 3.2.1
+      tinyrainbow: 2.0.0
+
   '@vitest/utils@4.1.5':
     dependencies:
       '@vitest/pretty-format': 4.1.5
@@ -9525,6 +10248,8 @@ snapshots:
     dependencies:
       vue: 3.5.34(typescript@6.0.3)
 
+  '@webcontainer/env@1.1.1': {}
+
   abbrev@3.0.1: {}
 
   abort-controller@3.0.0:
@@ -9574,6 +10299,8 @@ snapshots:
     dependencies:
       color-convert: 2.0.1
 
+  ansi-styles@5.2.0: {}
+
   ansi-styles@6.2.3: {}
 
   ansis@4.2.0: {}
@@ -9617,6 +10344,12 @@ snapshots:
 
   args-tokenizer@0.3.0: {}
 
+  aria-query@5.3.0:
+    dependencies:
+      dequal: 2.0.3
+
+  aria-query@5.3.2: {}
+
   assertion-error@2.0.1: {}
 
   ast-kit@2.2.0:
@@ -9630,6 +10363,10 @@ snapshots:
       estree-walker: 3.0.3
       pathe: 2.0.3
 
+  ast-types@0.16.1:
+    dependencies:
+      tslib: 2.8.1
+
   ast-walker-scope@0.8.3:
     dependencies:
       '@babel/parser': 7.29.3
@@ -9809,6 +10546,14 @@ snapshots:
 
   ccount@2.0.1: {}
 
+  chai@5.3.3:
+    dependencies:
+      assertion-error: 2.0.1
+      check-error: 2.1.3
+      deep-eql: 5.0.2
+      loupe: 3.2.1
+      pathval: 2.0.1
+
   chai@6.2.2: {}
 
   change-case@5.4.4: {}
@@ -9819,6 +10564,8 @@ snapshots:
 
   character-entities@2.0.2: {}
 
+  check-error@2.1.3: {}
+
   chokidar@5.0.0:
     dependencies:
       readdirp: 5.0.0
@@ -9963,6 +10710,8 @@ snapshots:
 
   css-what@6.2.2: {}
 
+  css.escape@1.5.1: {}
+
   cssesc@3.0.0: {}
 
   cssnano-preset-default@8.0.1(postcss@8.5.14):
@@ -10210,6 +10959,8 @@ snapshots:
     dependencies:
       character-entities: 2.0.2
 
+  deep-eql@5.0.2: {}
+
   deep-is@0.1.4: {}
 
   deepmerge@4.3.1: {}
@@ -10249,6 +11000,10 @@ snapshots:
 
   diff@8.0.4: {}
 
+  dom-accessibility-api@0.5.16: {}
+
+  dom-accessibility-api@0.6.3: {}
+
   dom-serializer@2.0.0:
     dependencies:
       domelementtype: 2.3.0
@@ -10277,7 +11032,9 @@ snapshots:
 
   dotenv@17.4.2: {}
 
-  dts-resolver@3.0.0: {}
+  dts-resolver@3.0.0(oxc-resolver@11.21.3):
+    optionalDependencies:
+      oxc-resolver: 11.21.3
 
   dunder-proto@1.0.1:
     dependencies:
@@ -11064,6 +11821,8 @@ snapshots:
 
   imurmurhash@0.1.4: {}
 
+  indent-string@4.0.0: {}
+
   indent-string@5.0.0: {}
 
   inherits@2.0.4: {}
@@ -11334,6 +12093,8 @@ snapshots:
 
   longest-streak@3.1.0: {}
 
+  loupe@3.2.1: {}
+
   lru-cache@10.4.3: {}
 
   lru-cache@11.3.6: {}
@@ -11342,6 +12103,8 @@ snapshots:
     dependencies:
       yallist: 3.1.1
 
+  lz-string@1.5.0: {}
+
   magic-regexp@0.11.0:
     dependencies:
       magic-string: 0.30.21
@@ -11767,6 +12530,8 @@ snapshots:
 
   mimic-fn@4.0.0: {}
 
+  min-indent@1.0.1: {}
+
   minimatch@10.2.5:
     dependencies:
       brace-expansion: 5.0.6
@@ -12215,6 +12980,31 @@ snapshots:
       '@oxc-minify/binding-win32-ia32-msvc': 0.131.0
       '@oxc-minify/binding-win32-x64-msvc': 0.131.0
 
+  oxc-parser@0.127.0:
+    dependencies:
+      '@oxc-project/types': 0.127.0
+    optionalDependencies:
+      '@oxc-parser/binding-android-arm-eabi': 0.127.0
+      '@oxc-parser/binding-android-arm64': 0.127.0
+      '@oxc-parser/binding-darwin-arm64': 0.127.0
+      '@oxc-parser/binding-darwin-x64': 0.127.0
+      '@oxc-parser/binding-freebsd-x64': 0.127.0
+      '@oxc-parser/binding-linux-arm-gnueabihf': 0.127.0
+      '@oxc-parser/binding-linux-arm-musleabihf': 0.127.0
+      '@oxc-parser/binding-linux-arm64-gnu': 0.127.0
+      '@oxc-parser/binding-linux-arm64-musl': 0.127.0
+      '@oxc-parser/binding-linux-ppc64-gnu': 0.127.0
+      '@oxc-parser/binding-linux-riscv64-gnu': 0.127.0
+      '@oxc-parser/binding-linux-riscv64-musl': 0.127.0
+      '@oxc-parser/binding-linux-s390x-gnu': 0.127.0
+      '@oxc-parser/binding-linux-x64-gnu': 0.127.0
+      '@oxc-parser/binding-linux-x64-musl': 0.127.0
+      '@oxc-parser/binding-openharmony-arm64': 0.127.0
+      '@oxc-parser/binding-wasm32-wasi': 0.127.0
+      '@oxc-parser/binding-win32-arm64-msvc': 0.127.0
+      '@oxc-parser/binding-win32-ia32-msvc': 0.127.0
+      '@oxc-parser/binding-win32-x64-msvc': 0.127.0
+
   oxc-parser@0.129.0:
     dependencies:
       '@oxc-project/types': 0.129.0
@@ -12265,6 +13055,28 @@ snapshots:
       '@oxc-parser/binding-win32-ia32-msvc': 0.131.0
       '@oxc-parser/binding-win32-x64-msvc': 0.131.0
 
+  oxc-resolver@11.21.3:
+    optionalDependencies:
+      '@oxc-resolver/binding-android-arm-eabi': 11.21.3
+      '@oxc-resolver/binding-android-arm64': 11.21.3
+      '@oxc-resolver/binding-darwin-arm64': 11.21.3
+      '@oxc-resolver/binding-darwin-x64': 11.21.3
+      '@oxc-resolver/binding-freebsd-x64': 11.21.3
+      '@oxc-resolver/binding-linux-arm-gnueabihf': 11.21.3
+      '@oxc-resolver/binding-linux-arm-musleabihf': 11.21.3
+      '@oxc-resolver/binding-linux-arm64-gnu': 11.21.3
+      '@oxc-resolver/binding-linux-arm64-musl': 11.21.3
+      '@oxc-resolver/binding-linux-ppc64-gnu': 11.21.3
+      '@oxc-resolver/binding-linux-riscv64-gnu': 11.21.3
+      '@oxc-resolver/binding-linux-riscv64-musl': 11.21.3
+      '@oxc-resolver/binding-linux-s390x-gnu': 11.21.3
+      '@oxc-resolver/binding-linux-x64-gnu': 11.21.3
+      '@oxc-resolver/binding-linux-x64-musl': 11.21.3
+      '@oxc-resolver/binding-openharmony-arm64': 11.21.3
+      '@oxc-resolver/binding-wasm32-wasi': 11.21.3
+      '@oxc-resolver/binding-win32-arm64-msvc': 11.21.3
+      '@oxc-resolver/binding-win32-x64-msvc': 11.21.3
+
   oxc-transform@0.131.0:
     optionalDependencies:
       '@oxc-transform/binding-android-arm-eabi': 0.131.0
@@ -12347,6 +13159,8 @@ snapshots:
 
   pathe@2.0.3: {}
 
+  pathval@2.0.1: {}
+
   perfect-debounce@2.1.0: {}
 
   picocolors@1.1.1: {}
@@ -12574,6 +13388,12 @@ snapshots:
 
   pretty-bytes@7.1.0: {}
 
+  pretty-format@27.5.1:
+    dependencies:
+      ansi-regex: 5.0.1
+      ansi-styles: 5.2.0
+      react-is: 17.0.2
+
   process-nextick-args@2.0.1: {}
 
   process@0.11.10: {}
@@ -12624,6 +13444,8 @@ snapshots:
       react: 19.2.6
       scheduler: 0.27.0
 
+  react-is@17.0.2: {}
+
   react@19.2.6: {}
 
   readable-stream@2.3.8:
@@ -12650,6 +13472,19 @@ snapshots:
 
   readdirp@5.0.0: {}
 
+  recast@0.23.11:
+    dependencies:
+      ast-types: 0.16.1
+      esprima: 4.0.1
+      source-map: 0.6.1
+      tiny-invariant: 1.3.3
+      tslib: 2.8.1
+
+  redent@3.0.0:
+    dependencies:
+      indent-string: 4.0.0
+      strip-indent: 3.0.0
+
   redis-errors@1.2.0: {}
 
   redis-parser@3.0.0:
@@ -12702,14 +13537,14 @@ snapshots:
 
   robust-predicates@3.0.3: {}
 
-  rolldown-plugin-dts@0.25.0(rolldown@1.0.0)(typescript@6.0.3):
+  rolldown-plugin-dts@0.25.0(oxc-resolver@11.21.3)(rolldown@1.0.0)(typescript@6.0.3):
     dependencies:
       '@babel/generator': 8.0.0-rc.4
       '@babel/helper-validator-identifier': 8.0.0-rc.4
       '@babel/parser': 8.0.0-rc.4
       ast-kit: 3.0.0-beta.1
       birpc: 4.0.0
-      dts-resolver: 3.0.0
+      dts-resolver: 3.0.0(oxc-resolver@11.21.3)
       get-tsconfig: 5.0.0-beta.5
       obug: 2.1.1
       rolldown: 1.0.0
@@ -13048,6 +13883,32 @@ snapshots:
 
   std-env@4.1.0: {}
 
+  storybook@10.4.6(@testing-library/dom@10.4.1)(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6):
+    dependencies:
+      '@storybook/global': 5.0.0
+      '@storybook/icons': 2.0.2(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@testing-library/jest-dom': 6.9.1
+      '@testing-library/user-event': 14.6.1(@testing-library/dom@10.4.1)
+      '@vitest/expect': 3.2.4
+      '@vitest/spy': 3.2.4
+      '@webcontainer/env': 1.1.1
+      esbuild: 0.28.0
+      open: 10.2.0
+      oxc-parser: 0.127.0
+      oxc-resolver: 11.21.3
+      recast: 0.23.11
+      semver: 7.8.1
+      use-sync-external-store: 1.6.0(react@19.2.6)
+      ws: 8.21.0
+    optionalDependencies:
+      '@types/react': 19.2.15
+    transitivePeerDependencies:
+      - '@testing-library/dom'
+      - bufferutil
+      - react
+      - react-dom
+      - utf-8-validate
+
   streamx@2.25.0:
     dependencies:
       events-universal: 1.0.1
@@ -13100,6 +13961,10 @@ snapshots:
 
   strip-final-newline@3.0.0: {}
 
+  strip-indent@3.0.0:
+    dependencies:
+      min-indent: 1.0.1
+
   strip-indent@4.1.1: {}
 
   strip-literal@3.1.0:
@@ -13199,8 +14064,12 @@ snapshots:
       fdir: 6.5.0(picomatch@4.0.4)
       picomatch: 4.0.4
 
+  tinyrainbow@2.0.0: {}
+
   tinyrainbow@3.1.0: {}
 
+  tinyspy@4.0.4: {}
+
   to-regex-range@5.0.1:
     dependencies:
       is-number: 7.0.0
@@ -13230,7 +14099,7 @@ snapshots:
 
   ts-dedent@2.2.0: {}
 
-  tsdown@0.22.0(tsx@4.22.3)(typescript@6.0.3):
+  tsdown@0.22.0(oxc-resolver@11.21.3)(tsx@4.22.3)(typescript@6.0.3):
     dependencies:
       ansis: 4.2.0
       cac: 7.0.0
@@ -13241,7 +14110,7 @@ snapshots:
       obug: 2.1.1
       picomatch: 4.0.4
       rolldown: 1.0.0
-      rolldown-plugin-dts: 0.25.0(rolldown@1.0.0)(typescript@6.0.3)
+      rolldown-plugin-dts: 0.25.0(oxc-resolver@11.21.3)(rolldown@1.0.0)(typescript@6.0.3)
       semver: 7.8.1
       tinyexec: 1.1.2
       tinyglobby: 0.2.16
@@ -13486,6 +14355,10 @@ snapshots:
     dependencies:
       punycode: 2.3.1
 
+  use-sync-external-store@1.6.0(react@19.2.6):
+    dependencies:
+      react: 19.2.6
+
   util-deprecate@1.0.2: {}
 
   uuid@11.1.1: {}
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 8f2a9a3..ceb1423 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -69,6 +69,9 @@ catalogs:
   inlined:
     '@antfu/utils': ^9.3.0
     ua-parser-modern: ^0.1.1
+  storybook:
+    '@storybook/html-vite': ^10.4.6
+    storybook: ^10.4.6
   testing:
     '@playwright/test': ^1.60.0
     tsnapi: ^0.3.3
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
index a60fdbd..5cd23c5 100644
--- a/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/client.snapshot.d.ts
+++ b/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/client.snapshot.d.ts
@@ -4,15 +4,41 @@
 // #region Interfaces
 export interface CodeServerHandle {
   rpc: DevframeRpcClient;
+  stop: () => Promise<void>;
   dispose: () => void;
 }
+export interface CodeServerViewActions {
+  launch: () => void;
+  recheck: () => void;
+}
+export interface CodeServerViewHandle {
+  update: (_: CodeServerViewState) => void;
+  dispose: () => void;
+}
+export interface CodeServerViewOptions {
+  actions?: Partial<CodeServerViewActions>;
+  resolveEditorUrl?: (_: number) => string;
+  applyAuth?: (_: CodeServerAuth) => void;
+}
+export interface CodeServerViewState {
+  detection: CodeServerDetection;
+  server: CodeServerServerInfo;
+  auth?: CodeServerAuth;
+  busy?: boolean;
+}
 export interface MountCodeServerOptions {
   rpc?: DevframeRpcClient;
 }
 // #endregion
 
+// #region Types
+export type CodeServerPhase = 'connecting' | 'not-installed' | 'launch' | 'starting' | 'running';
+// #endregion
+
 // #region Functions
+export declare function createCodeServerView(_: HTMLElement, _?: CodeServerViewOptions): CodeServerViewHandle;
 export declare function mountCodeServer(_: HTMLElement, _?: MountCodeServerOptions): Promise<CodeServerHandle>;
+export declare function resolvePhase(_: CodeServerViewState): CodeServerPhase;
 // #endregion
 
 // #region Other
diff --git a/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/client.snapshot.js b/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/client.snapshot.js
index 9c8ce5d..053b58f 100644
--- a/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/client.snapshot.js
+++ b/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/client.snapshot.js
@@ -2,7 +2,9 @@
  * Generated by tsnapi — public API snapshot of `@devframes/plugin-code-server/client`
  */
 // #region Functions
+export function createCodeServerView(_, _) {}
 export async function mountCodeServer(_, _) {}
+export function resolvePhase(_) {}
 // #endregion
 
 // #region Variables

From 8df43487ff66f385f688c3933017881482ff3d65 Mon Sep 17 00:00:00 2001
From: "Anthony Fu (via agent)" <reg-github-bot@antfu.me>
Date: Fri, 19 Jun 2026 05:50:18 +0000
Subject: [PATCH 3/5] chore: update tsnapi node snapshot for
 @devframes/plugin-code-server

---
 .../plugin-code-server/node.snapshot.d.ts     | 58 ++++++++++---------
 1 file changed, 31 insertions(+), 27 deletions(-)

diff --git a/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/node.snapshot.d.ts b/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/node.snapshot.d.ts
index 3de125f..c7632f6 100644
--- a/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/node.snapshot.d.ts
+++ b/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/node.snapshot.d.ts
@@ -45,31 +45,35 @@ export declare function setupCodeServer(_: DevframeNodeContext, _?: CodeServerOp
 // #endregion
 
 // #region Variables
-export declare const diagnostics: {
-  readonly DP_CODE_SERVER_0001: _$nostics.DiagnosticHandle<{
-    bin: string;
-  }, {
-    method?: "log" | "warn" | "error" | undefined;
-  }>;
-  readonly DP_CODE_SERVER_0002: _$nostics.DiagnosticHandle<{
-    port: number;
-    timeout: number;
-  }, {
-    method?: "log" | "warn" | "error" | undefined;
-  }>;
-  readonly DP_CODE_SERVER_0003: _$nostics.DiagnosticHandle<{
-    bin: string;
-    reason: string;
-  }, {
-    method?: "log" | "warn" | "error" | undefined;
-  }>;
-  readonly DP_CODE_SERVER_0004: _$nostics.DiagnosticHandle<{}, {
-    method?: "log" | "warn" | "error" | undefined;
-  }>;
-  readonly DP_CODE_SERVER_0005: _$nostics.DiagnosticHandle<{
-    code: number;
-  }, {
-    method?: "log" | "warn" | "error" | undefined;
-  }>;
-};
+export declare const diagnostics: _$nostics.Diagnostics<{
+  readonly DP_CODE_SERVER_0001: {
+    readonly why: (p: {
+      bin: string;
+    }) => string;
+    readonly fix: "Install code-server — e.g. `curl -fsSL https://code-server.dev/install.sh | sh` — or set the `bin` option to its path. See https://coder.com/docs/code-server/latest/install";
+  };
+  readonly DP_CODE_SERVER_0002: {
+    readonly why: (p: {
+      port: number;
+      timeout: number;
+    }) => string;
+    readonly fix: "Check the code-server logs for startup errors, raise `startTimeout`, or free the port.";
+  };
+  readonly DP_CODE_SERVER_0003: {
+    readonly why: (p: {
+      bin: string;
+      reason: string;
+    }) => string;
+  };
+  readonly DP_CODE_SERVER_0004: {
+    readonly why: "code-server supervisor is not initialised on this context";
+    readonly fix: "Call setupCodeServer(ctx) (or use createCodeServerDevframe) before invoking the code-server RPCs.";
+  };
+  readonly DP_CODE_SERVER_0005: {
+    readonly why: (p: {
+      code: number;
+    }) => string;
+    readonly fix: "Inspect the captured output in the launcher and re-launch.";
+  };
+}, readonly [typeof reporter]>;
 // #endregion
\ No newline at end of file

From e3ad671a46ca671003f42bf6a986d5880c9bdba8 Mon Sep 17 00:00:00 2001
From: "Anthony Fu (via agent)" <reg-github-bot@antfu.me>
Date: Fri, 19 Jun 2026 06:04:43 +0000
Subject: [PATCH 4/5] test(plugin-code-server): fix windows child_process
 spawning and cleanup

---
 plugins/code-server/src/node/detect.ts     |  7 ++++++-
 plugins/code-server/src/node/supervisor.ts | 10 ++++++++--
 plugins/code-server/test/_utils.ts         |  7 +++++++
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/plugins/code-server/src/node/detect.ts b/plugins/code-server/src/node/detect.ts
index 966a563..ebe1366 100644
--- a/plugins/code-server/src/node/detect.ts
+++ b/plugins/code-server/src/node/detect.ts
@@ -1,5 +1,6 @@
 import type { Buffer } from 'node:buffer'
 import { spawn } from 'node:child_process'
+import process from 'node:process'
 
 export interface DetectCodeServerResult {
   installed: boolean
@@ -30,7 +31,11 @@ export function detectCodeServer(bin = 'code-server', timeoutMs = 5000): Promise
 
     let child
     try {
-      child = spawn(bin, ['--version'], { windowsHide: true, stdio: ['ignore', 'pipe', 'ignore'] })
+      child = spawn(bin, ['--version'], {
+        windowsHide: true,
+        stdio: ['ignore', 'pipe', 'ignore'],
+        shell: process.platform === 'win32' && bin.endsWith('.cmd'),
+      })
     }
     catch {
       finish({ installed: false, bin })
diff --git a/plugins/code-server/src/node/supervisor.ts b/plugins/code-server/src/node/supervisor.ts
index 6ef0bec..e0ea148 100644
--- a/plugins/code-server/src/node/supervisor.ts
+++ b/plugins/code-server/src/node/supervisor.ts
@@ -12,7 +12,7 @@ import type {
   CodeServerStartResult,
   CodeServerStatusResult,
 } from '../types'
-import { spawn } from 'node:child_process'
+import { execSync, spawn } from 'node:child_process'
 import { createHash, randomBytes } from 'node:crypto'
 import { request as httpRequest } from 'node:http'
 import process from 'node:process'
@@ -153,6 +153,7 @@ export class CodeServerSupervisor {
         env,
         windowsHide: true,
         stdio: ['ignore', 'pipe', 'pipe'],
+        shell: process.platform === 'win32' && this.bin.endsWith('.cmd'),
       })
     }
     catch (error) {
@@ -240,7 +241,12 @@ export class CodeServerSupervisor {
 
   private terminate(child: ChildProcess): void {
     try {
-      child.kill('SIGTERM')
+      if (process.platform === 'win32' && this.bin.endsWith('.cmd') && child.pid) {
+        execSync(`taskkill /pid ${child.pid} /t /f`, { stdio: 'ignore' })
+      }
+      else {
+        child.kill('SIGTERM')
+      }
     }
     catch {
       // Already gone.
diff --git a/plugins/code-server/test/_utils.ts b/plugins/code-server/test/_utils.ts
index 357b1ca..8fab13a 100644
--- a/plugins/code-server/test/_utils.ts
+++ b/plugins/code-server/test/_utils.ts
@@ -59,5 +59,12 @@ process.on('SIGINT', () => process.exit(0))
 `
   writeFileSync(binPath, script)
   chmodSync(binPath, 0o755)
+
+  if (process.platform === 'win32') {
+    const cmdPath = `${binPath}.cmd`
+    writeFileSync(cmdPath, `@node "${binPath}" %*`)
+    return cmdPath
+  }
+
   return binPath
 }

From 5aa0264655b3e3b61c3625a6d576402426cc78d1 Mon Sep 17 00:00:00 2001
From: "Anthony Fu (via agent)" <reg-github-bot@antfu.me>
Date: Fri, 19 Jun 2026 07:24:23 +0000
Subject: [PATCH 5/5] feat(plugin-code-server): allow dynamic port allocation
 for code-server and launcher

---
 plugins/code-server/src/index.ts              |  6 ++
 plugins/code-server/src/node/supervisor.ts    | 80 ++++++++++++++-----
 plugins/code-server/src/types.ts              |  4 +
 plugins/code-server/test/_utils.ts            |  4 +-
 plugins/code-server/test/code-server.test.ts  | 12 +++
 .../plugin-code-server/types.snapshot.d.ts    |  2 +
 6 files changed, 88 insertions(+), 20 deletions(-)

diff --git a/plugins/code-server/src/index.ts b/plugins/code-server/src/index.ts
index 7a5cfa0..6f4c182 100644
--- a/plugins/code-server/src/index.ts
+++ b/plugins/code-server/src/index.ts
@@ -37,6 +37,10 @@ export function createCodeServerDevframe(options: CodeServerOptions = {}): Devfr
   return defineDevframe({
     id: PLUGIN_ID,
     name: 'Code Server',
+    version: '0.5.2',
+    packageName: '@devframes/plugin-code-server',
+    homepage: 'https://github.com/devframes/devframe/tree/main/plugins/code-server#readme',
+    description: 'Run code-server (VS Code in the browser) as a devframe panel',
     icon: 'ph:code-duotone',
     // Leave undefined so `resolveBasePath` picks `/` standalone and
     // `/__<id>/` when hosted. Authors override via `options.basePath`.
@@ -44,6 +48,8 @@ export function createCodeServerDevframe(options: CodeServerOptions = {}): Devfr
     cli: {
       command: options.command ?? 'devframe-code-server',
       port: options.port ?? DEFAULT_PORT,
+      portRange: options.portRange,
+      random: options.random,
       distDir: existsSync(resolvedDist) ? resolvedDist : undefined,
       // Single-user localhost tool: auto-trust the connection so the launcher's
       // shared-state subscription and the auth handoff work without a manual
diff --git a/plugins/code-server/src/node/supervisor.ts b/plugins/code-server/src/node/supervisor.ts
index e0ea148..3e4f473 100644
--- a/plugins/code-server/src/node/supervisor.ts
+++ b/plugins/code-server/src/node/supervisor.ts
@@ -118,7 +118,9 @@ export class CodeServerSupervisor {
     if (!this.detection.installed)
       throw diagnostics.DP_CODE_SERVER_0001({ bin: this.bin })
 
-    const port = this.forcedPort ?? (await getPort({ host: '127.0.0.1', port: DEFAULT_CODE_SERVER_PORT }))
+    const initialPort = this.forcedPort !== undefined && this.forcedPort !== 0
+      ? this.forcedPort
+      : (this.forcedPort === 0 ? 0 : await getPort({ host: '127.0.0.1', port: DEFAULT_CODE_SERVER_PORT }))
     const token = randomBytes(32).toString('hex')
     this.cookieValue = createHash('sha256').update(token).digest('hex')
 
@@ -127,7 +129,7 @@ export class CodeServerSupervisor {
       '--auth',
       'password',
       '--bind-addr',
-      `${this.host}:${port}`,
+      `${this.host}:${initialPort}`,
       '--disable-telemetry',
       '--disable-update-check',
       ...(this.cookieSuffix ? ['--cookie-suffix', this.cookieSuffix] : []),
@@ -146,6 +148,16 @@ export class CodeServerSupervisor {
 
     this.logBuffer = []
 
+    let actualPort = initialPort
+    let portResolver: ((port: number) => void) | undefined
+    let portRejecter: ((err: Error) => void) | undefined
+    const portPromise = initialPort === 0
+      ? new Promise<number>((resolve, reject) => {
+          portResolver = resolve
+          portRejecter = reject
+        })
+      : Promise.resolve(initialPort)
+
     let child: ChildProcess
     try {
       child = spawn(this.bin, args, {
@@ -164,10 +176,25 @@ export class CodeServerSupervisor {
     }
 
     this.proc = child
-    this.server = { status: 'starting', port, pid: child.pid, startedAt: Date.now() }
+    this.server = { status: 'starting', port: actualPort || undefined, pid: child.pid, startedAt: Date.now() }
     this.publish()
 
-    const capture = (chunk: Buffer): void => this.appendLog(chunk.toString('utf8'))
+    const capture = (chunk: Buffer): void => {
+      const text = chunk.toString('utf8')
+      this.appendLog(text)
+      if (actualPort === 0 && portResolver) {
+        for (const line of text.split('\n')) {
+          const match = line.match(/HTTP server listening on https?:\/\/(?:[^:]+|\[[^\]]+\]):(\d+)/)
+          if (match) {
+            actualPort = Number.parseInt(match[1], 10)
+            this.server.port = actualPort
+            this.publish()
+            portResolver?.(actualPort)
+            portResolver = undefined
+          }
+        }
+      }
+    }
     child.stdout?.on('data', capture)
     child.stderr?.on('data', capture)
 
@@ -177,6 +204,8 @@ export class CodeServerSupervisor {
       this.server = { status: 'error', error: error.message }
       this.proc = undefined
       this.cookieValue = undefined
+      if (portRejecter)
+        portRejecter?.(error)
       this.publish()
     })
     child.on('exit', (code) => {
@@ -191,26 +220,39 @@ export class CodeServerSupervisor {
         : { status: 'stopped' }
       if (unexpected && exitCode !== 0)
         diagnostics.DP_CODE_SERVER_0005({ code: exitCode }, { method: 'warn' })
+      if (portRejecter)
+        portRejecter?.(new Error(`code-server exited before binding (code ${exitCode})`))
       this.publish()
     })
 
-    const ready = await this.waitForReady(port)
-    if (!ready) {
-      this.terminate(child)
-      this.server = { status: 'error', error: this.lastLog() || 'startup timed out' }
-      this.proc = undefined
-      this.cookieValue = undefined
-      this.publish()
-      throw diagnostics.DP_CODE_SERVER_0002({ port, timeout: this.startTimeout })
-    }
+    try {
+      const port = await Promise.race([
+        portPromise,
+        new Promise<number>((_, reject) => setTimeout(() => reject(new Error('timeout waiting for dynamic port allocation')), this.startTimeout)),
+      ])
+
+      const ready = await this.waitForReady(port)
+      if (!ready) {
+        throw new Error(this.lastLog() || 'startup timed out')
+      }
 
-    // The exit handler may have fired during the probe window.
-    if (this.proc !== child)
-      return this.status()
+      if (this.proc !== child)
+        return this.status()
 
-    this.server = { status: 'running', port, pid: child.pid, startedAt: this.server.startedAt }
-    this.publish()
-    return this.status()
+      this.server = { status: 'running', port, pid: child.pid, startedAt: this.server.startedAt }
+      this.publish()
+      return this.status()
+    }
+    catch (error) {
+      if (this.proc === child) {
+        this.terminate(child)
+        this.server = { status: 'error', error: error instanceof Error ? error.message : String(error) }
+        this.proc = undefined
+        this.cookieValue = undefined
+        this.publish()
+      }
+      throw diagnostics.DP_CODE_SERVER_0002({ port: actualPort, timeout: this.startTimeout })
+    }
   }
 
   /** Stop the code-server process and reset to `stopped`. */
diff --git a/plugins/code-server/src/types.ts b/plugins/code-server/src/types.ts
index bc4ed14..48e832e 100644
--- a/plugins/code-server/src/types.ts
+++ b/plugins/code-server/src/types.ts
@@ -97,4 +97,8 @@ export interface CodeServerOptions {
   command?: string
   /** Preferred dev-server port for the launcher SPA. */
   port?: number
+  /** Port range for the launcher SPA dev server (e.g. `[9000, 9100]`). */
+  portRange?: [number, number]
+  /** Prefer a random port for the launcher SPA. */
+  random?: boolean
 }
diff --git a/plugins/code-server/test/_utils.ts b/plugins/code-server/test/_utils.ts
index 8fab13a..2311d79 100644
--- a/plugins/code-server/test/_utils.ts
+++ b/plugins/code-server/test/_utils.ts
@@ -53,7 +53,9 @@ const server = http.createServer((req, res) => {
   res.statusCode = 200
   res.end(req.url && req.url.startsWith('/healthz') ? '{"status":"alive"}' : 'ok')
 })
-server.listen(port, '0.0.0.0')
+server.listen(port, '0.0.0.0', () => {
+  console.log(\`[info] HTTP server listening on http://0.0.0.0:\${server.address().port}/\`)
+})
 process.on('SIGTERM', () => process.exit(0))
 process.on('SIGINT', () => process.exit(0))
 `
diff --git a/plugins/code-server/test/code-server.test.ts b/plugins/code-server/test/code-server.test.ts
index 02e34ae..30ab285 100644
--- a/plugins/code-server/test/code-server.test.ts
+++ b/plugins/code-server/test/code-server.test.ts
@@ -88,4 +88,16 @@ describe('@devframes/plugin-code-server', () => {
     const second = await supervisor.start()
     expect(second.server.port).toBe(first.server.port)
   })
+
+  it('allocates a dynamic port when serverPort is 0', async () => {
+    const bin = writeFakeCodeServer({ version: '4.99.0' })
+    const ctx = await createTestContext()
+    const supervisor = await setupCodeServer(ctx, { bin, serverPort: 0 })
+    supervisors.push(supervisor)
+
+    const result = await supervisor.start()
+    expect(result.server.status).toBe('running')
+    expect(result.server.port).toBeGreaterThan(0)
+    expect(result.server.port).not.toBe(8080)
+  })
 })
diff --git a/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/types.snapshot.d.ts b/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/types.snapshot.d.ts
index d8e456b..f990e5c 100644
--- a/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/types.snapshot.d.ts
+++ b/tests/__snapshots__/tsnapi/@devframes/plugin-code-server/types.snapshot.d.ts
@@ -25,6 +25,8 @@ export interface CodeServerOptions {
   distDir?: string;
   command?: string;
   port?: number;
+  portRange?: [number, number];
+  random?: boolean;
 }
 export interface CodeServerServerInfo {
   status: CodeServerStatus;