diff --git a/AGENTS.md b/AGENTS.md
index 9447baf..03a9f48 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -37,7 +37,10 @@ consciously, not as a side effect):
   postMessage bridge (resize, sendPrompt, openLink).
 - `server/mcpHttp.ts` — stateless MCP at `/mcp`. `mcp/server.ts` — stdio MCP,
   a thin client over the HTTP API (passes response fields through untouched).
-- `viewer/index.html` — the entire viewer: one file, vanilla JS, no build.
+- `viewer/` — the viewer: Solid + TypeScript in `viewer/src/`, built by Vite
+  (`vite.config.ts`) into a single self-contained `viewer/dist/index.html`
+  (vite-plugin-singlefile) that the server still serves as one in-memory
+  document — there are no static-asset routes.
 - `bin/sideshow.js` — CLI, Node built-ins only; `bin/demoData.js` — seed
   content for `sideshow demo`.
 - `workers/index.ts` — Cloudflare entry; one Durable Object runs the whole app.
@@ -49,9 +52,11 @@ consciously, not as a side effect):
 - `server/{app,events,mcpHttp,snippetPage,types}.ts` stay runtime-agnostic
   (no `node:` imports); `tsconfig.workers.json` typechecks them against
   workers types. Node wiring belongs in `server/index.ts` / `server/storage.ts`.
-- TypeScript runs directly on Node ≥22.18 via type stripping: erasable syntax
-  only (no enums, no parameter properties), `.ts` extensions in relative
-  imports, no build step (`npm pack` compiles `dist/` for the published CLI).
+- Server/CLI TypeScript runs directly on Node ≥22.18 via type stripping:
+  erasable syntax only (no enums, no parameter properties), `.ts` extensions
+  in relative imports, no build step (`npm pack` compiles `dist/` for the
+  published CLI). The viewer is the one exception: Solid JSX needs real
+  compilation, so `viewer/src/` is Vite-built (`npm run build:viewer`).
 - Snippet iframes are sandboxed without `allow-same-origin`. Never weaken
   this. WebKit quirk: in sandboxed iframes ResizeObserver's initial callback
   may not fire and `documentElement.scrollHeight` ratchets to viewport height
@@ -64,17 +69,20 @@ consciously, not as a side effect):
 - `SqlStore` schema changes need in-place migration — deployed Durable
   Objects can't be reset. Follow the `pragma_table_info` probe pattern in its
   constructor.
-- The server reads `viewer/` and `guide/` files at boot — restart it to see
-  viewer changes.
+- The server reads `viewer/dist/index.html` and `guide/` files at boot —
+  rebuild (`npm run build:viewer`) and restart to see viewer changes.
+  `npm run dev` runs a Vite watch build alongside the server; the e2e suite
+  builds the viewer itself (Playwright global setup).
 
 ## Validation
 
 ```sh
 npm test             # unit/API + store contract (node --test)
-npm run typecheck    # two tsc programs: node + workers
+npm run typecheck    # three tsc programs: node + workers + viewer
 npm run lint         # oxlint, warnings are errors
 npm run format:check # oxfmt
-npm run test:e2e     # Playwright, chromium + webkit (separate CI job)
+npm run test:e2e     # Playwright, chromium + webkit (separate CI job);
+                     # builds the viewer first via e2e/globalSetup.ts
 ```
 
 The first four must pass before committing; pre-commit formats staged files
diff --git a/README.md b/README.md
index d487473..3670db6 100644
--- a/README.md
+++ b/README.md
@@ -138,15 +138,17 @@ authoritative, so SSE and long-polling behave the same as the local server.
 ## Development
 
 ```sh
-npm run dev          # server with watch
+npm run dev          # server with watch + viewer watch build
 npm test             # node --test
 npm run typecheck    # tsc --noEmit
 npm run lint         # oxlint
 npm run format       # oxfmt
 ```
 
-There is no build step. TypeScript runs directly on Node via native
-type-stripping; the npm package ships compiled JS built on prepack. See
+The server and CLI have no build step — TypeScript runs directly on Node via
+native type-stripping, and the npm package ships compiled JS built on prepack.
+The viewer (`viewer/src/`, Solid) is the exception: Vite builds it into a
+single self-contained `viewer/dist/index.html` (`npm run build:viewer`). See
 [AGENTS.md](AGENTS.md) for architecture rules.
 
 ## License
diff --git a/e2e/globalSetup.ts b/e2e/globalSetup.ts
new file mode 100644
index 0000000..6f274fa
--- /dev/null
+++ b/e2e/globalSetup.ts
@@ -0,0 +1,11 @@
+import { execSync } from "node:child_process";
+import { fileURLToPath } from "node:url";
+
+// Each test boots `node server/index.ts`, which serves viewer/dist/index.html
+// read at startup — build the viewer once before the suite runs.
+export default function globalSetup() {
+  execSync("npx vite build", {
+    cwd: fileURLToPath(new URL("..", import.meta.url)),
+    stdio: "inherit",
+  });
+}
diff --git a/package-lock.json b/package-lock.json
index 8e0399f..cdd0a58 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,13 +25,314 @@
         "oxfmt": "^0.54.0",
         "oxlint": "^1.69.0",
         "simple-git-hooks": "^2.13.1",
+        "solid-js": "^1.9.13",
         "typescript": "^6.0.3",
+        "vite": "^8.0.16",
+        "vite-plugin-singlefile": "^2.3.3",
+        "vite-plugin-solid": "^2.11.12",
         "wrangler": "^4.99.0"
       },
       "engines": {
         "node": ">=22.18"
       }
     },
+    "node_modules/@babel/code-frame": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.7.tgz",
+      "integrity": "sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.29.7",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/compat-data": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.29.7.tgz",
+      "integrity": "sha512-locTkQyKvwIEgBzVrn8693ebc97F2U8ZHjbXwDXJ5Fn2TCpNwTlKcaKLkdHop5c/icOFE7qt7Q9JC5hnKNa6Gg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/core": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.7.tgz",
+      "integrity": "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.29.7",
+        "@babel/generator": "^7.29.7",
+        "@babel/helper-compilation-targets": "^7.29.7",
+        "@babel/helper-module-transforms": "^7.29.7",
+        "@babel/helpers": "^7.29.7",
+        "@babel/parser": "^7.29.7",
+        "@babel/template": "^7.29.7",
+        "@babel/traverse": "^7.29.7",
+        "@babel/types": "^7.29.7",
+        "@jridgewell/remapping": "^2.3.5",
+        "convert-source-map": "^2.0.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.3",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/@babel/core/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.7.tgz",
+      "integrity": "sha512-DkXD5OJQaAQIdZ1bt3UZdEnHAn9Imd3IVBdX03UFe+ony9Ojw5pzr9YVKGDY1jt+Gcn/FnGkNf8r+Vj5NOJWtQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.29.7",
+        "@babel/types": "^7.29.7",
+        "@jridgewell/gen-mapping": "^0.3.12",
+        "@jridgewell/trace-mapping": "^0.3.28",
+        "jsesc": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/generator/node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.29.7.tgz",
+      "integrity": "sha512-wem6WaBj4NaVYVdNhLPPVacES6ZJ+KBBfSkTMD3YZxbP3rm3Di85tJU5ljaUNhaOynt+Aj0xruhYuzQBt8n71g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/compat-data": "^7.29.7",
+        "@babel/helper-validator-option": "^7.29.7",
+        "browserslist": "^4.24.0",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/helper-globals": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.29.7.tgz",
+      "integrity": "sha512-3nQVUAtvkKH9zahfWgw96Jc/uFOmjACE1kQz82E2lqWmHBgjzbNlsC22nuQTfahmWeQtTq5nQ/4Nnd2A1wj4zA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.29.7.tgz",
+      "integrity": "sha512-ejHwrQQYcm9xnTivShn2IDOlIzInN34AXskvq9QicvCtEzq1Vzclu/tKF8Jq1Cg8JG2GL6/EmjgsCT7lXepE3g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.29.7",
+        "@babel/types": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.29.7.tgz",
+      "integrity": "sha512-UPUVSyXbOh627KiCIGQSgwWzGeBKLkaJ9PJEdrngIwMSzxLR4jS4+f1f1jb7VzBbg8nFLaYotvVPFCTqdrmTAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.29.7",
+        "@babel/helper-validator-identifier": "^7.29.7",
+        "@babel/traverse": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-plugin-utils": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.29.7.tgz",
+      "integrity": "sha512-G7sHYigPY17oO5SYWnfD/0MTBwVR781S/JI643e/JhUYgVgWE/61SoW3NH9KWUKyKq5LVh3npif99Wkt6j86Jw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.29.7.tgz",
+      "integrity": "sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.29.7.tgz",
+      "integrity": "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.29.7.tgz",
+      "integrity": "sha512-N9ZErrD+yW5geCDtBqnOoxmR8+tNKiGuxKlDpuJxfsqpa2dFcexaziGAE/qoHLiDDreVNMupxGmSoNlyvsA3gw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helpers": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.29.7.tgz",
+      "integrity": "sha512-1k2lAGRMfHTcwuNYcCNUmaUffmQv8KWMfh2iJUUeRlwlwH4FdNG7mfPI10NPfLHJFThE4Tyr4mv7kTNZOiPuBg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/template": "^7.29.7",
+        "@babel/types": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.7.tgz",
+      "integrity": "sha512-hnORnjP/1P/zFEndoeX+n+t1RwWRJiJpM/jO7FW32Kn9r5+sJB2JWOdYo4L6k78j15eCwY3Gm/7364B1EMwtNg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.29.7"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-jsx": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.29.7.tgz",
+      "integrity": "sha512-TSu8+mHCoEaaCDEZ0I3+6mvTBYR4PCxQwf2z9/r5Tbztv6NaLR3B9thGTTxX2WGuGHJqRiAbKPeGTJ5XWXVg6A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.29.7.tgz",
+      "integrity": "sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.29.7",
+        "@babel/parser": "^7.29.7",
+        "@babel/types": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.7.tgz",
+      "integrity": "sha512-EhlfNQtZ+NK22w5BM61ciuiq1m58ed33Wr1Xan//ZRTy6hgjnwyCffRYwzsGXdASJSUJ1guZILsErh1eQcl+zw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.29.7",
+        "@babel/generator": "^7.29.7",
+        "@babel/helper-globals": "^7.29.7",
+        "@babel/parser": "^7.29.7",
+        "@babel/template": "^7.29.7",
+        "@babel/types": "^7.29.7",
+        "debug": "^4.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.7.tgz",
+      "integrity": "sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.29.7",
+        "@babel/helper-validator-identifier": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@cloudflare/kv-asset-handler": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/@cloudflare/kv-asset-handler/-/kv-asset-handler-0.5.0.tgz",
@@ -163,6 +464,18 @@
         "node": ">=12"
       }
     },
+    "node_modules/@emnapi/core": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.10.0.tgz",
+      "integrity": "sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.2.1",
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@emnapi/runtime": {
       "version": "1.11.0",
       "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.11.0.tgz",
@@ -174,6 +487,17 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@emnapi/wasi-threads": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.1.tgz",
+      "integrity": "sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.27.3",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.3.tgz",
@@ -726,9 +1050,6 @@
         "arm"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -746,9 +1067,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -766,9 +1084,6 @@
         "ppc64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -786,9 +1101,6 @@
         "riscv64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -806,9 +1118,6 @@
         "s390x"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -826,9 +1135,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -846,9 +1152,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -866,9 +1169,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -886,9 +1186,6 @@
         "arm"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -912,9 +1209,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -938,9 +1232,6 @@
         "ppc64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -964,9 +1255,6 @@
         "riscv64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -990,9 +1278,6 @@
         "s390x"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -1016,9 +1301,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -1042,9 +1324,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -1068,9 +1347,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -1166,6 +1442,50 @@
         "url": "https://opencollective.com/libvips"
       }
     },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping/node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/remapping/node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
     "node_modules/@jridgewell/resolve-uri": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
@@ -1234,6 +1554,35 @@
         }
       }
     },
+    "node_modules/@napi-rs/wasm-runtime": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.5.tgz",
+      "integrity": "sha512-AWPoBRJ9tsnVhor4sjO7rkni+7p+2IAEFj6cx06UgP10jkQHqay/36uRV/bFkgrh18D9vb4cr8Q0Pthskgzy+Q==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@tybys/wasm-util": "^0.10.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      },
+      "peerDependencies": {
+        "@emnapi/core": "^1.7.1",
+        "@emnapi/runtime": "^1.7.1"
+      }
+    },
+    "node_modules/@oxc-project/types": {
+      "version": "0.133.0",
+      "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.133.0.tgz",
+      "integrity": "sha512-KzkdCd6Uxqnf6l3HOw1xfatAlUURA0g14cvBYFyJ5SaNOQbOUvBr9PKArcPcrNIeRsBdgcUzOGrhKveVpvOIGA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/Boshen"
+      }
+    },
     "node_modules/@oxfmt/binding-android-arm-eabi": {
       "version": "0.54.0",
       "resolved": "https://registry.npmjs.org/@oxfmt/binding-android-arm-eabi/-/binding-android-arm-eabi-0.54.0.tgz",
@@ -1361,9 +1710,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1381,9 +1727,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1401,9 +1744,6 @@
         "ppc64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1421,9 +1761,6 @@
         "riscv64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1441,9 +1778,6 @@
         "riscv64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1461,9 +1795,6 @@
         "s390x"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1481,9 +1812,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1501,9 +1829,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1708,9 +2033,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1728,9 +2050,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1748,9 +2067,6 @@
         "ppc64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1768,9 +2084,6 @@
         "riscv64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1788,9 +2101,6 @@
         "riscv64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1808,9 +2118,6 @@
         "s390x"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1828,9 +2135,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1848,9 +2152,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1973,33 +2274,364 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@sindresorhus/is": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-7.2.0.tgz",
-      "integrity": "sha512-P1Cz1dWaFfR4IR+U13mqqiGsLFf1KbayybWwdd2vfctdV6hDpUkgCY0nKOLLTMSoRd/jJNjtbqzf13K8DCCXQw==",
+    "node_modules/@rolldown/binding-android-arm64": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.0.3.tgz",
+      "integrity": "sha512-454rs7jHngixp/NMxd5srYD57OnzSlZ/eFTETjORQHLwJG1lRtmNOJcBerZlfu4GjKqeq8aCCIQrMdHyhI51Hw==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
       "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
       "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sindresorhus/is?sponsor=1"
+        "node": "^20.19.0 || >=22.12.0"
       }
     },
-    "node_modules/@speed-highlight/core": {
-      "version": "1.2.16",
-      "resolved": "https://registry.npmjs.org/@speed-highlight/core/-/core-1.2.16.tgz",
-      "integrity": "sha512-yNm/fYEcnpRjYduLMaddTK9XKYil6xB88+qFg79ZdZhHu1PadfoQmFW7pVTx7FZqMBNcUuThiAhxhENgtAO2/w==",
-      "dev": true,
-      "license": "CC0-1.0"
-    },
-    "node_modules/@types/node": {
-      "version": "25.9.3",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-25.9.3.tgz",
-      "integrity": "sha512-603BddQMv3pUcr4U2dhujk83N2tTDVr/34wII2B6bJy6g+8WD6yUb11jszNs0gdi4PesVWl7ABt8nYMVpnLUcg==",
+    "node_modules/@rolldown/binding-darwin-arm64": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.0.3.tgz",
+      "integrity": "sha512-PcAhP+ynjURNyy8SKGl5DQP94aGuB/7JrXJb/t7P+hanXvQVMWzUvRRhBAcg/lNRadBhoUPqSoP4xw5tR/KBEA==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
       "license": "MIT",
-      "dependencies": {
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-darwin-x64": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.0.3.tgz",
+      "integrity": "sha512-9YpfeUvSE2RS7wysJ81uOZkXJz7f7Q55H2Gvp3VEw/EsahqDtrphrZ0EwDLK5vvKOzaCrBsjF8JmnMLcUt78Gg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-freebsd-x64": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.0.3.tgz",
+      "integrity": "sha512-yB1IlAsSNHncV6SCTL27/MVGR5htvQsoGxIv5KMGXALp+Ll1wYsn+x98M9MW7qa+NdSbvrrY7ANI4wLJ0n1e6g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm-gnueabihf": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.0.3.tgz",
+      "integrity": "sha512-Yi30IVAAfLUCy2MseFjbB1jAMDl1VMCAas5StnYp8da9+CKvMd2H2cbEjWcw5NPaPqzvYkVIaF1nNUG+b7u/sw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-gnu": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.0.3.tgz",
+      "integrity": "sha512-jsO7R8To+AdlYgUmN5sHSCZbfhtMBkO0WUx8iORQnPcMMdgr7qM2DQmMwgabs3GhNztdmoKkMKQFHD6DTMCIQw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-musl": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.0.3.tgz",
+      "integrity": "sha512-VWkUHwWriDciit80wleYwKILoR/KMvxh/IdwS/paX+ZgpuRpCrKLUdadJbc0NpBEiyhpYawsJ73j9aCvOH+f7Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-ppc64-gnu": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.0.3.tgz",
+      "integrity": "sha512-5f1laC0SlIR0yDbFCd8acUhvJIag6N3zC5P7oUPN6wX0aOma+uKJ0wBDH5aq7I1PVI2ttTlhJwzwRIBnLiSGEg==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-s390x-gnu": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.0.3.tgz",
+      "integrity": "sha512-Iq4ko0r4XsgbrF/LunNgHtAGLRRVE2kXonAXQ/MV0mC6jQpMOhW1SvtZja2EhC/kd05++bP78dsqBeIQyYJ6Yg==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-gnu": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.0.3.tgz",
+      "integrity": "sha512-B8m6tD5+/N5FeNQFbKlLA/2yVq9ycQP1SeedyEYYKWBNR3ZQbkvIUcNnDNM03lO1l5F2roiiFJGgvoLLyZXtSg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-musl": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.0.3.tgz",
+      "integrity": "sha512-pSdpdUJHkuCxun9LE7jvgUB9qsRgaiyNNCX7m/AvHTcq67AiT/Yhoxvw5zPfhrM8k/BfP8ce/hMOpthKDpEUow==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-openharmony-arm64": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.0.3.tgz",
+      "integrity": "sha512-OXXS3RKJgX2uLwM+gYyuH5omcH8fL1LJs96pZGgtetVCahON57+d4SJHzTgZiOjxgGkSnpXpOsWuPDGAKAigEg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-wasm32-wasi": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-wasm32-wasi/-/binding-wasm32-wasi-1.0.3.tgz",
+      "integrity": "sha512-JTtb8BWFynicNSoPrehsCzBtOKjZ6jhMiPFEmOiuXg1Fl8dn2KHQob+GuPSGR0dryQa1PQJbzjF3dqO/whhjLg==",
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "1.10.0",
+        "@emnapi/runtime": "1.10.0",
+        "@napi-rs/wasm-runtime": "^1.1.4"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-wasm32-wasi/node_modules/@emnapi/runtime": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.10.0.tgz",
+      "integrity": "sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-arm64-msvc": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.0.3.tgz",
+      "integrity": "sha512-gEdFFEN70A/jxb2svrWsN3aDL7OUtmvlOy+6fa2jxG8K0wQ1ZbdeLGnidov6Yu5/733dI5ySfzFlQ/cb0bSz1g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-x64-msvc": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.0.3.tgz",
+      "integrity": "sha512-eXB7CHuaQdqmJcc3koCNtNPmT/bj2gc999kUFgBxG8Ac0NdgXc4rkCHhqrgrhN3zddvvvrgzj1e90SuSfmyIXA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.1.tgz",
+      "integrity": "sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@sindresorhus/is": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-7.2.0.tgz",
+      "integrity": "sha512-P1Cz1dWaFfR4IR+U13mqqiGsLFf1KbayybWwdd2vfctdV6hDpUkgCY0nKOLLTMSoRd/jJNjtbqzf13K8DCCXQw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/is?sponsor=1"
+      }
+    },
+    "node_modules/@speed-highlight/core": {
+      "version": "1.2.16",
+      "resolved": "https://registry.npmjs.org/@speed-highlight/core/-/core-1.2.16.tgz",
+      "integrity": "sha512-yNm/fYEcnpRjYduLMaddTK9XKYil6xB88+qFg79ZdZhHu1PadfoQmFW7pVTx7FZqMBNcUuThiAhxhENgtAO2/w==",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
+    "node_modules/@tybys/wasm-util": {
+      "version": "0.10.2",
+      "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.2.tgz",
+      "integrity": "sha512-RoBvJ2X0wuKlWFIjrwffGw1IqZHKQqzIchKaadZZfnNpsAYp2mM0h36JtPCjNDAHGgYez/15uMBpfGwchhiMgg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@types/babel__core": {
+      "version": "7.20.5",
+      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
+      "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.20.7",
+        "@babel/types": "^7.20.7",
+        "@types/babel__generator": "*",
+        "@types/babel__template": "*",
+        "@types/babel__traverse": "*"
+      }
+    },
+    "node_modules/@types/babel__generator": {
+      "version": "7.27.0",
+      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.27.0.tgz",
+      "integrity": "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__template": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
+      "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.1.0",
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__traverse": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.28.0.tgz",
+      "integrity": "sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.28.2"
+      }
+    },
+    "node_modules/@types/node": {
+      "version": "25.9.3",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-25.9.3.tgz",
+      "integrity": "sha512-603BddQMv3pUcr4U2dhujk83N2tTDVr/34wII2B6bJy6g+8WD6yUb11jszNs0gdi4PesVWl7ABt8nYMVpnLUcg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
         "undici-types": ">=7.24.0 <7.24.7"
       }
     },
@@ -2091,6 +2723,68 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/babel-plugin-jsx-dom-expressions": {
+      "version": "0.40.7",
+      "resolved": "https://registry.npmjs.org/babel-plugin-jsx-dom-expressions/-/babel-plugin-jsx-dom-expressions-0.40.7.tgz",
+      "integrity": "sha512-/O6JWUmjv03OI9lL2ry9bUjpD5S3PclM55RRJEyCdcFZ5W2SEA/59d+l2hNsk3gI6kiWRdRPdOtqZmsQzFN1pQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "7.18.6",
+        "@babel/plugin-syntax-jsx": "^7.18.6",
+        "@babel/types": "^7.20.7",
+        "html-entities": "2.3.3",
+        "parse5": "^7.1.2"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.20.12"
+      }
+    },
+    "node_modules/babel-plugin-jsx-dom-expressions/node_modules/@babel/helper-module-imports": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz",
+      "integrity": "sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/babel-preset-solid": {
+      "version": "1.9.12",
+      "resolved": "https://registry.npmjs.org/babel-preset-solid/-/babel-preset-solid-1.9.12.tgz",
+      "integrity": "sha512-LLqnuKVDlKpyBlMPcH6qEvs/wmS9a+NczppxJ3ryS/c0O5IiSFOIBQi9GzyiGDSbcJpx4Gr87jyFTos1MyEuWg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "babel-plugin-jsx-dom-expressions": "^0.40.6"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0",
+        "solid-js": "^1.9.12"
+      },
+      "peerDependenciesMeta": {
+        "solid-js": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.10.36",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.36.tgz",
+      "integrity": "sha512-lVq/Df7LXlO79MVaaUHztSwWiG9oXoWHlgvNS51v8Dpd4+G4/VIy6qYePTw31nAVls33nUtnfezYeLkYAak9dg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.cjs"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/blake3-wasm": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/blake3-wasm/-/blake3-wasm-2.1.5.tgz",
@@ -2114,12 +2808,59 @@
         "raw-body": "^3.0.1",
         "type-is": "^2.0.1"
       },
-      "engines": {
-        "node": ">=18"
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.28.2",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.2.tgz",
+      "integrity": "sha512-48xSriZYYg+8qXna9kwqjIVzuQxi+KYWp2+5nCYnYKPTr0LvD89Jqk2Or5ogxz0NUMfIjhh2lIUX/LyX9B4oIg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "baseline-browser-mapping": "^2.10.12",
+        "caniuse-lite": "^1.0.30001782",
+        "electron-to-chromium": "^1.5.328",
+        "node-releases": "^2.0.36",
+        "update-browserslist-db": "^1.2.3"
+      },
+      "bin": {
+        "browserslist": "cli.js"
       },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
     "node_modules/bytes": {
@@ -2160,6 +2901,27 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001799",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001799.tgz",
+      "integrity": "sha512-hG1bReV+OUU+MOqK4t/ZWI0tZOyz3rqS9XuhOUz1cIcbwBKjOyJEJuw9ER5JuNyqxNk8u/JUVbGibBOL1yrjFw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
     "node_modules/cli-cursor": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-5.0.0.tgz",
@@ -2215,6 +2977,13 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/cookie": {
       "version": "0.7.2",
       "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
@@ -2264,6 +3033,13 @@
         "node": ">= 8"
       }
     },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/debug": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@@ -2320,6 +3096,13 @@
       "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
       "license": "MIT"
     },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.372",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.372.tgz",
+      "integrity": "sha512-M3yhbAlilnwqC8D21t28UCDGHyitShTmmLRU/H+b74P6Ski16Nb9HONYEaVpMj/pwC7BEo5B95FpjODLCWbtfA==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/emoji-regex": {
       "version": "10.6.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.6.0.tgz",
@@ -2336,6 +3119,19 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/entities": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
+      "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/environment": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/environment/-/environment-1.1.0.tgz",
@@ -2431,6 +3227,16 @@
         "@esbuild/win32-x64": "0.27.3"
       }
     },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/escape-html": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
@@ -2557,6 +3363,37 @@
       ],
       "license": "BSD-3-Clause"
     },
+    "node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/finalhandler": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-2.1.1.tgz",
@@ -2620,6 +3457,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/get-east-asian-width": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/get-east-asian-width/-/get-east-asian-width-1.6.0.tgz",
@@ -2715,6 +3562,13 @@
         "node": ">=16.9.0"
       }
     },
+    "node_modules/html-entities": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.3.3.tgz",
+      "integrity": "sha512-DV5Ln36z34NNTDgnz0EWGBLZENelNAtkiFA4kyNOG2tDI6Mz1uSWiq1wAKdyjnJwyDiDO7Fa2SO1CTxPXL8VxA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/http-errors": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz",
@@ -2791,12 +3645,35 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
     "node_modules/is-promise": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-4.0.0.tgz",
       "integrity": "sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==",
       "license": "MIT"
     },
+    "node_modules/is-what": {
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/is-what/-/is-what-4.1.16.tgz",
+      "integrity": "sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.13"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -2812,6 +3689,26 @@
         "url": "https://github.com/sponsors/panva"
       }
     },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/jsesc": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
+      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/json-schema-traverse": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
@@ -2824,14 +3721,288 @@
       "integrity": "sha512-fQhoXdcvc3V28x7C7BMs4P5+kNlgUURe2jmUT1T//oBRMDrqy1QPelJimwZGo7Hg9VPV3EQV5Bnq4hbFy2vetA==",
       "license": "BSD-2-Clause"
     },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/kleur": {
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
       "integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==",
       "dev": true,
-      "license": "MIT",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/lightningcss": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",
+      "integrity": "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-android-arm64": "1.32.0",
+        "lightningcss-darwin-arm64": "1.32.0",
+        "lightningcss-darwin-x64": "1.32.0",
+        "lightningcss-freebsd-x64": "1.32.0",
+        "lightningcss-linux-arm-gnueabihf": "1.32.0",
+        "lightningcss-linux-arm64-gnu": "1.32.0",
+        "lightningcss-linux-arm64-musl": "1.32.0",
+        "lightningcss-linux-x64-gnu": "1.32.0",
+        "lightningcss-linux-x64-musl": "1.32.0",
+        "lightningcss-win32-arm64-msvc": "1.32.0",
+        "lightningcss-win32-x64-msvc": "1.32.0"
+      }
+    },
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.32.0.tgz",
+      "integrity": "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.32.0.tgz",
+      "integrity": "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.32.0.tgz",
+      "integrity": "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.32.0.tgz",
+      "integrity": "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.32.0.tgz",
+      "integrity": "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.32.0.tgz",
+      "integrity": "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.32.0.tgz",
+      "integrity": "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.32.0.tgz",
+      "integrity": "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.32.0.tgz",
+      "integrity": "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.32.0.tgz",
+      "integrity": "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.32.0.tgz",
+      "integrity": "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
       "engines": {
-        "node": ">=6"
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
     "node_modules/lint-staged": {
@@ -2949,6 +4120,16 @@
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
+    "node_modules/lru-cache": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^3.0.2"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -2967,6 +4148,22 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/merge-anything": {
+      "version": "5.1.7",
+      "resolved": "https://registry.npmjs.org/merge-anything/-/merge-anything-5.1.7.tgz",
+      "integrity": "sha512-eRtbOb1N5iyH0tkQDAoQ4Ipsp/5qSR79Dzrz8hEPxRX10RWWR/iQXdoKmBSRCThY1Fh5EhISDtpSc93fpxUniQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-what": "^4.1.8"
+      },
+      "engines": {
+        "node": ">=12.13"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
     "node_modules/merge-descriptors": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-2.0.0.tgz",
@@ -2979,6 +4176,33 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/micromatch/node_modules/picomatch": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
+      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/mime-db": {
       "version": "1.54.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.54.0.tgz",
@@ -3044,6 +4268,25 @@
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
       "license": "MIT"
     },
+    "node_modules/nanoid": {
+      "version": "3.3.12",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.12.tgz",
+      "integrity": "sha512-ZB9RH/39qpq5Vu6Y+NmUaFhQR6pp+M2Xt76XBnEwDaGcVAqhlvxrl3B2bKS5D3NH3QR76v3aSrKaF/Kiy7lEtQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
     "node_modules/negotiator": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-1.0.0.tgz",
@@ -3053,6 +4296,16 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/node-releases": {
+      "version": "2.0.47",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.47.tgz",
+      "integrity": "sha512-Uzmd6LXpouKo8EUK68IjH4+E01w/hXyV3R3g/geCJo+rXLNfh1xucB+LOzYEOQPSiUK3h/xZf0cQGcSsmyL2Og==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -3212,6 +4465,19 @@
         }
       }
     },
+    "node_modules/parse5": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz",
+      "integrity": "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "entities": "^6.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
     "node_modules/parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -3247,6 +4513,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/picomatch": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
@@ -3316,6 +4589,35 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/postcss": {
+      "version": "8.5.15",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.15.tgz",
+      "integrity": "sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.12",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
     "node_modules/proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -3401,6 +4703,40 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/rolldown": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.0.3.tgz",
+      "integrity": "sha512-i00lAJ2ks1BYr7rjNjKC7BcqAS7nVfiT3QX1SI5aY+AFHblCmaUf9OE9dbdzDvW6dJxbi2ZCZiy9v3CcwOiX3g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@oxc-project/types": "=0.133.0",
+        "@rolldown/pluginutils": "^1.0.0"
+      },
+      "bin": {
+        "rolldown": "bin/cli.mjs"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "optionalDependencies": {
+        "@rolldown/binding-android-arm64": "1.0.3",
+        "@rolldown/binding-darwin-arm64": "1.0.3",
+        "@rolldown/binding-darwin-x64": "1.0.3",
+        "@rolldown/binding-freebsd-x64": "1.0.3",
+        "@rolldown/binding-linux-arm-gnueabihf": "1.0.3",
+        "@rolldown/binding-linux-arm64-gnu": "1.0.3",
+        "@rolldown/binding-linux-arm64-musl": "1.0.3",
+        "@rolldown/binding-linux-ppc64-gnu": "1.0.3",
+        "@rolldown/binding-linux-s390x-gnu": "1.0.3",
+        "@rolldown/binding-linux-x64-gnu": "1.0.3",
+        "@rolldown/binding-linux-x64-musl": "1.0.3",
+        "@rolldown/binding-openharmony-arm64": "1.0.3",
+        "@rolldown/binding-wasm32-wasi": "1.0.3",
+        "@rolldown/binding-win32-arm64-msvc": "1.0.3",
+        "@rolldown/binding-win32-x64-msvc": "1.0.3"
+      }
+    },
     "node_modules/router": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/router/-/router-2.2.0.tgz",
@@ -3462,6 +4798,29 @@
         "url": "https://opencollective.com/express"
       }
     },
+    "node_modules/seroval": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/seroval/-/seroval-1.5.4.tgz",
+      "integrity": "sha512-46uFvgrXTVxZcUorgSSRZ4y+ieqLLQRMlG4bnCZKW3qI6BZm7Rg4ntMW4p1mILEEBZWrFlcpp0AyIIlM6jD9iw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/seroval-plugins": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/seroval-plugins/-/seroval-plugins-1.5.4.tgz",
+      "integrity": "sha512-S0xQPhUTefAhNvNWFg0c1J8qJArHt5KdtJ/cFAofo06KD1MVSeFWyl4iiu+ApDIuw0WhjpOfCdgConOfAnLgkw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "seroval": "^1.0"
+      }
+    },
     "node_modules/serve-static": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-2.2.1.tgz",
@@ -3666,6 +5025,43 @@
         "url": "https://github.com/chalk/slice-ansi?sponsor=1"
       }
     },
+    "node_modules/solid-js": {
+      "version": "1.9.13",
+      "resolved": "https://registry.npmjs.org/solid-js/-/solid-js-1.9.13.tgz",
+      "integrity": "sha512-6hJeJMOcEX8ktqjpDoJZEmld3ijvcvWBDtiXBm7f4332SiFN66QeAQI1REQshvyUoISsSeJ4PHDauKYbwao9JQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "csstype": "^3.1.0",
+        "seroval": "~1.5.0",
+        "seroval-plugins": "~1.5.0"
+      }
+    },
+    "node_modules/solid-refresh": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/solid-refresh/-/solid-refresh-0.6.3.tgz",
+      "integrity": "sha512-F3aPsX6hVw9ttm5LYlth8Q15x6MlI/J3Dn+o3EQyRTtTxidepSTwAYdozt01/YA+7ObcciagGEyXIopGZzQtbA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/generator": "^7.23.6",
+        "@babel/helper-module-imports": "^7.22.15",
+        "@babel/types": "^7.23.6"
+      },
+      "peerDependencies": {
+        "solid-js": "^1.3"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/statuses": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",
@@ -3741,6 +5137,23 @@
         "node": ">=18"
       }
     },
+    "node_modules/tinyglobby": {
+      "version": "0.2.17",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
+      "integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
     "node_modules/tinypool": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-2.1.0.tgz",
@@ -3751,6 +5164,19 @@
         "node": "^20.0.0 || >=22.0.0"
       }
     },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
     "node_modules/toidentifier": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
@@ -3849,6 +5275,37 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/update-browserslist-db": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
+      "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
     "node_modules/vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -3858,6 +5315,151 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/vite": {
+      "version": "8.0.16",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-8.0.16.tgz",
+      "integrity": "sha512-h9bXPmJichP5fLmVQo3PyaGSDE2n3aPuomeAlVRm0JLmt4rY6zmPKd59HYI4LNW8oTK7tlTsuC7l/m7awx9Jcw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "lightningcss": "^1.32.0",
+        "picomatch": "^4.0.4",
+        "postcss": "^8.5.15",
+        "rolldown": "1.0.3",
+        "tinyglobby": "^0.2.17"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^20.19.0 || >=22.12.0",
+        "@vitejs/devtools": "^0.1.18",
+        "esbuild": "^0.27.0 || ^0.28.0",
+        "jiti": ">=1.21.0",
+        "less": "^4.0.0",
+        "sass": "^1.70.0",
+        "sass-embedded": "^1.70.0",
+        "stylus": ">=0.54.8",
+        "sugarss": "^5.0.0",
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "@vitejs/devtools": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        },
+        "jiti": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite-plugin-singlefile": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/vite-plugin-singlefile/-/vite-plugin-singlefile-2.3.3.tgz",
+      "integrity": "sha512-XVnGH0QzbOa8fxRSsHdCarVN1BSBXNi7uLMQYlrGRN5apdHkk62XQWRJhVever0lnfuyBkwn+kvVChdm/OoOUg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "micromatch": "^4.0.8"
+      },
+      "engines": {
+        "node": ">18.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^4.59.0",
+        "vite": "^5.4.21 || ^6.0.0 || ^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite-plugin-solid": {
+      "version": "2.11.12",
+      "resolved": "https://registry.npmjs.org/vite-plugin-solid/-/vite-plugin-solid-2.11.12.tgz",
+      "integrity": "sha512-FgjPcx2OwX9h6f28jli7A4bG7PP3te8uyakE5iqsmpq3Jqi1TWLgSroC9N6cMfGRU2zXsl4Q6ISvTr2VL0QHpA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.23.3",
+        "@types/babel__core": "^7.20.4",
+        "babel-preset-solid": "^1.8.4",
+        "merge-anything": "^5.1.7",
+        "solid-refresh": "^0.6.3",
+        "vitefu": "^1.0.4"
+      },
+      "peerDependencies": {
+        "@testing-library/jest-dom": "^5.16.6 || ^5.17.0 || ^6.*",
+        "solid-js": "^1.7.2",
+        "vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@testing-library/jest-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vitefu": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/vitefu/-/vitefu-1.1.3.tgz",
+      "integrity": "sha512-ub4okH7Z5KLjb6hDyjqrGXqWtWvoYdU3IGm/NorpgHncKoLTCfRIbvlhBm7r0YstIaQRYlp4yEbFqDcKSzXSSg==",
+      "dev": true,
+      "license": "MIT",
+      "workspaces": [
+        "tests/deps/*",
+        "tests/projects/*",
+        "tests/projects/workspace/packages/*"
+      ],
+      "peerDependencies": {
+        "vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "vite": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -3982,6 +5584,13 @@
         }
       }
     },
+    "node_modules/yallist": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/yaml": {
       "version": "2.9.0",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.9.0.tgz",
diff --git a/package.json b/package.json
index f6c598b..48c5bd9 100644
--- a/package.json
+++ b/package.json
@@ -27,14 +27,15 @@
   "files": [
     "bin/",
     "dist/",
-    "viewer/",
+    "viewer/dist/",
     "guide/",
     "skills/"
   ],
   "type": "module",
   "scripts": {
-    "dev": "node --watch server/index.ts",
-    "start": "node server/index.ts",
+    "dev": "vite build && (vite build --watch & node --watch server/index.ts)",
+    "start": "vite build && node server/index.ts",
+    "build:viewer": "vite build",
     "mcp": "node mcp/server.ts",
     "test": "node --test 'test/**/*.test.ts'",
     "test:e2e": "playwright test",
@@ -42,10 +43,10 @@
     "format:check": "oxfmt --check .",
     "lint": "oxlint . --deny-warnings",
     "lint:fix": "oxlint . --fix",
-    "typecheck": "tsc --noEmit && tsc -p tsconfig.workers.json --noEmit",
-    "build": "tsc -p tsconfig.build.json",
-    "deploy": "wrangler deploy",
-    "dev:cloud": "wrangler dev",
+    "typecheck": "tsc --noEmit && tsc -p tsconfig.workers.json --noEmit && tsc -p tsconfig.viewer.json --noEmit",
+    "build": "tsc -p tsconfig.build.json && vite build",
+    "deploy": "npm run build:viewer && wrangler deploy",
+    "dev:cloud": "npm run build:viewer && wrangler dev",
     "prepack": "npm run build",
     "prepare": "simple-git-hooks"
   },
@@ -63,14 +64,18 @@
     "oxfmt": "^0.54.0",
     "oxlint": "^1.69.0",
     "simple-git-hooks": "^2.13.1",
+    "solid-js": "^1.9.13",
     "typescript": "^6.0.3",
+    "vite": "^8.0.16",
+    "vite-plugin-singlefile": "^2.3.3",
+    "vite-plugin-solid": "^2.11.12",
     "wrangler": "^4.99.0"
   },
   "simple-git-hooks": {
     "pre-commit": "npx lint-staged"
   },
   "lint-staged": {
-    "*.{ts,js,mjs,cjs}": [
+    "*.{ts,tsx,js,mjs,cjs}": [
       "oxfmt --write",
       "oxlint --deny-warnings"
     ],
diff --git a/playwright.config.ts b/playwright.config.ts
index 23ec248..f19e693 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -5,6 +5,7 @@ import { defineConfig, devices } from "@playwright/test";
 // (see CLAUDE.md), so both engines must pass.
 export default defineConfig({
   testDir: "./e2e",
+  globalSetup: "./e2e/globalSetup.ts",
   timeout: 30_000,
   forbidOnly: !!process.env.CI,
   retries: process.env.CI ? 2 : 0,
diff --git a/scripts/record-demo.mjs b/scripts/record-demo.mjs
index 900c356..d2bf78a 100644
--- a/scripts/record-demo.mjs
+++ b/scripts/record-demo.mjs
@@ -9,7 +9,7 @@
 //     dither=bayer:bayer_scale=5:diff_mode=rectangle" docs/sideshow-demo.gif
 
 import { chromium } from "@playwright/test";
-import { spawn } from "node:child_process";
+import { execSync, spawn } from "node:child_process";
 import { mkdtempSync } from "node:fs";
 import { tmpdir } from "node:os";
 import { dirname, join } from "node:path";
@@ -19,6 +19,7 @@ import { DEMO_SESSIONS } from "../bin/demoData.js";
 const ROOT = join(dirname(fileURLToPath(import.meta.url)), "..");
 const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
 
+execSync("npx vite build", { cwd: ROOT, stdio: "inherit" });
 const dataDir = mkdtempSync(join(tmpdir(), "sideshow-rec-"));
 const proc = spawn(process.execPath, [join(ROOT, "server", "index.ts")], {
   env: { ...process.env, PORT: "0", SIDESHOW_DATA: join(dataDir, "data.json") },
diff --git a/server/index.ts b/server/index.ts
index 788f097..4d0d288 100644
--- a/server/index.ts
+++ b/server/index.ts
@@ -12,7 +12,10 @@ let root = join(dirname(fileURLToPath(import.meta.url)), "..");
 if (basename(root) === "dist") root = join(root, "..");
 
 const [viewerHtml, guideMarkdown, setupText] = await Promise.all([
-  readFile(join(root, "viewer", "index.html"), "utf8"),
+  readFile(join(root, "viewer", "dist", "index.html"), "utf8").catch(() => {
+    console.error("viewer build missing — run `npm run build:viewer` first");
+    return process.exit(1);
+  }),
   readFile(join(root, "guide", "DESIGN_GUIDE.md"), "utf8"),
   readFile(join(root, "guide", "AGENT_SETUP.md"), "utf8"),
 ]);
diff --git a/tsconfig.viewer.json b/tsconfig.viewer.json
new file mode 100644
index 0000000..82b08fe
--- /dev/null
+++ b/tsconfig.viewer.json
@@ -0,0 +1,20 @@
+{
+  // Third tsc program: the Vite-built Solid viewer (DOM lib, solid JSX) —
+  // unlike server/, this code is compiled, so it is not erasable-syntax-only.
+  "compilerOptions": {
+    "target": "es2023",
+    "lib": ["es2023", "dom", "dom.iterable"],
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "types": ["vite/client"],
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+    "strict": true,
+    "noEmit": true,
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": ["viewer/src", "vite.config.ts"]
+}
diff --git a/viewer/index.html b/viewer/index.html
index 50bc45a..e3eaf9f 100644
--- a/viewer/index.html
+++ b/viewer/index.html
@@ -4,1111 +4,8 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>sideshow</title>
-    <style>
-      :root {
-        --bg: #faf9f5;
-        --panel: #f3f2ec;
-        --surface: #ffffff;
-        --text: #1a1915;
-        --muted: #5f5e56;
-        --faint: #8e8d83;
-        --border: rgba(20, 20, 10, 0.12);
-        --border-2: rgba(20, 20, 10, 0.25);
-        --accent: #185fa5;
-        --accent-bg: #e6f1fb;
-        --hover: rgba(20, 20, 10, 0.05);
-      }
-      @media (prefers-color-scheme: dark) {
-        :root {
-          --bg: #1f1e1b;
-          --panel: #1a1917;
-          --surface: #2a2925;
-          --text: #eceadf;
-          --muted: #b3b1a4;
-          --faint: #8a887c;
-          --border: rgba(255, 255, 250, 0.12);
-          --border-2: rgba(255, 255, 250, 0.25);
-          --accent: #85b7eb;
-          --accent-bg: rgba(55, 138, 221, 0.16);
-          --hover: rgba(255, 255, 250, 0.06);
-        }
-      }
-      * {
-        box-sizing: border-box;
-      }
-      html,
-      body {
-        height: 100%;
-      }
-      body {
-        margin: 0;
-        background: var(--bg);
-        color: var(--text);
-        font:
-          14px/1.5 -apple-system,
-          BlinkMacSystemFont,
-          "Segoe UI",
-          Roboto,
-          sans-serif;
-      }
-      #app {
-        display: flex;
-        height: 100%;
-      }
-
-      aside {
-        width: 248px;
-        flex: none;
-        background: var(--panel);
-        border-right: 0.5px solid var(--border);
-        display: flex;
-        flex-direction: column;
-      }
-      .brand {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        padding: 16px 16px 12px;
-        font-size: 15px;
-        font-weight: 500;
-        letter-spacing: 0.01em;
-      }
-      .livedot {
-        width: 7px;
-        height: 7px;
-        border-radius: 50%;
-        background: var(--faint);
-        transition: background 0.3s;
-      }
-      .livedot.on {
-        background: #4caf78;
-      }
-      #sessionList {
-        flex: 1;
-        overflow-y: auto;
-        padding: 4px 8px;
-      }
-      .sess {
-        position: relative;
-        padding: 9px 10px;
-        border-radius: 8px;
-        cursor: pointer;
-        margin-bottom: 2px;
-      }
-      .sess:hover {
-        background: var(--hover);
-      }
-      .sess:focus-visible {
-        outline: 2px solid var(--accent);
-        outline-offset: -2px;
-      }
-      .sess.sel {
-        background: var(--surface);
-        box-shadow: 0 0 0 0.5px var(--border);
-      }
-      .sess-title {
-        font-weight: 500;
-        font-size: 13px;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        padding-right: 18px;
-      }
-      .sess-meta {
-        font-size: 12px;
-        color: var(--faint);
-        margin-top: 1px;
-      }
-      .sess .dot {
-        position: absolute;
-        top: 12px;
-        right: 10px;
-        width: 7px;
-        height: 7px;
-        border-radius: 50%;
-        background: var(--accent);
-        display: none;
-      }
-      .sess.unread .dot {
-        display: block;
-      }
-      .sess .x {
-        position: absolute;
-        top: 8px;
-        right: 6px;
-        opacity: 0;
-        border: none;
-        background: none;
-        color: var(--faint);
-        cursor: pointer;
-        font-size: 13px;
-        padding: 2px 4px;
-        border-radius: 5px;
-        font-family: inherit;
-      }
-      .sess:hover .x,
-      .sess:focus-within .x {
-        opacity: 1;
-      }
-      .sess:hover .dot,
-      .sess:focus-within .dot {
-        display: none;
-      }
-      .sess .x:hover {
-        color: var(--text);
-        background: var(--hover);
-      }
-      .aside-foot {
-        padding: 12px 16px;
-        border-top: 0.5px solid var(--border);
-        font-size: 12px;
-        color: var(--faint);
-      }
-      .aside-foot a {
-        color: var(--muted);
-        text-decoration: none;
-      }
-      .aside-foot a:hover {
-        color: var(--text);
-      }
-
-      main {
-        flex: 1;
-        overflow-y: auto;
-        min-width: 0;
-      }
-      .session-head {
-        position: sticky;
-        top: 0;
-        z-index: 5;
-        background: var(--bg);
-        padding: 14px 28px 10px;
-        border-bottom: 0.5px solid var(--border);
-        display: flex;
-        align-items: baseline;
-        gap: 10px;
-      }
-      #sessTitle {
-        font-size: 16px;
-        font-weight: 500;
-        outline: none;
-        border-radius: 6px;
-        padding: 0 4px;
-        min-width: 40px;
-      }
-      #sessTitle:hover {
-        background: var(--hover);
-      }
-      #sessTitle:focus {
-        background: var(--surface);
-        box-shadow: 0 0 0 0.5px var(--border-2);
-      }
-      .session-head .meta {
-        font-size: 12.5px;
-        color: var(--faint);
-      }
-      #stream {
-        max-width: 860px;
-        margin: 0 auto;
-        padding: 22px 28px 120px;
-      }
-
-      .card {
-        background: var(--surface);
-        border: 0.5px solid var(--border);
-        border-radius: 12px;
-        margin-bottom: 22px;
-        overflow: hidden;
-      }
-      .card-head {
-        display: flex;
-        align-items: center;
-        gap: 10px;
-        padding: 10px 14px;
-      }
-      .card-title {
-        font-weight: 500;
-        font-size: 14px;
-      }
-      .vbadge {
-        font-size: 11px;
-        color: var(--muted);
-        border: 0.5px solid var(--border);
-        border-radius: 999px;
-        padding: 0 7px;
-        line-height: 17px;
-        background: none;
-        cursor: default;
-        font-family: inherit;
-      }
-      select.vbadge {
-        cursor: pointer;
-        appearance: none;
-      }
-      .card-meta {
-        font-size: 12px;
-        color: var(--faint);
-      }
-      .card-head .sp {
-        flex: 1;
-      }
-      .card-head .act {
-        font-size: 12px;
-        color: var(--faint);
-        background: none;
-        border: none;
-        cursor: pointer;
-        text-decoration: none;
-        padding: 3px 7px;
-        border-radius: 6px;
-        font-family: inherit;
-        opacity: 0;
-        transition: opacity 0.15s;
-      }
-      .card:hover .act,
-      .card:focus-within .act {
-        opacity: 1;
-      }
-      .card-head .act:hover {
-        color: var(--text);
-        background: var(--hover);
-      }
-      iframe {
-        display: block;
-        width: 100%;
-        height: 120px;
-        border: none;
-        border-top: 0.5px solid var(--border);
-        background: transparent;
-      }
-      .thread {
-        border-top: 0.5px solid var(--border);
-        padding: 6px 14px 10px;
-      }
-      .cmt {
-        display: flex;
-        gap: 8px;
-        padding: 5px 0;
-        font-size: 13px;
-      }
-      .cmt .who {
-        flex: none;
-        font-weight: 500;
-        color: var(--muted);
-      }
-      .cmt.user .who {
-        color: var(--accent);
-      }
-      .cmt .txt {
-        color: var(--text);
-        white-space: pre-wrap;
-        word-break: break-word;
-      }
-      .cmt .when {
-        flex: none;
-        margin-left: auto;
-        font-size: 11.5px;
-        color: var(--faint);
-        align-self: center;
-      }
-      .composer {
-        display: flex;
-        gap: 8px;
-        margin-top: 4px;
-      }
-      .composer input {
-        flex: 1;
-        font: 13px/1.4 inherit;
-        color: var(--text);
-        background: var(--bg);
-        border: 0.5px solid var(--border);
-        border-radius: 8px;
-        padding: 7px 10px;
-        outline: none;
-      }
-      .composer input:focus {
-        border-color: var(--border-2);
-      }
-      .composer input::placeholder {
-        color: var(--faint);
-      }
-      .composer button {
-        font: 12.5px inherit;
-        color: var(--muted);
-        background: none;
-        border: 0.5px solid var(--border-2);
-        border-radius: 8px;
-        padding: 0 12px;
-        cursor: pointer;
-      }
-      .composer button:hover {
-        color: var(--text);
-        background: var(--hover);
-      }
-      .cmt.pending {
-        opacity: 0.55;
-      }
-      #newPill {
-        position: fixed;
-        left: 50%;
-        bottom: 64px;
-        transform: translateX(-50%);
-        font-family: inherit;
-        font-size: 12.5px;
-        color: var(--accent);
-        background: var(--accent-bg);
-        border: 0.5px solid var(--accent);
-        border-radius: 999px;
-        padding: 6px 14px;
-        cursor: pointer;
-        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
-        z-index: 40;
-      }
-
-      .empty {
-        text-align: center;
-        color: var(--faint);
-        padding: 90px 24px;
-      }
-      #onboard {
-        max-width: 660px;
-        margin: 0 auto;
-        padding: 72px 28px;
-      }
-      #onboard h1 {
-        font-size: 21px;
-        font-weight: 500;
-        margin: 0 0 6px;
-      }
-      #onboard .sub {
-        color: var(--muted);
-        font-size: 14.5px;
-        margin: 0 0 32px;
-      }
-      #onboard h2 {
-        font-size: 13px;
-        font-weight: 500;
-        color: var(--muted);
-        margin: 26px 0 8px;
-        text-transform: lowercase;
-        letter-spacing: 0.02em;
-      }
-      .snip {
-        position: relative;
-        background: var(--surface);
-        border: 0.5px solid var(--border);
-        border-radius: 10px;
-        padding: 12px 44px 12px 14px;
-        font:
-          12.5px/1.6 ui-monospace,
-          SFMono-Regular,
-          Menlo,
-          monospace;
-        color: var(--text);
-        white-space: pre-wrap;
-        word-break: break-all;
-      }
-      .snip .copy {
-        position: absolute;
-        top: 8px;
-        right: 8px;
-        font:
-          11.5px -apple-system,
-          sans-serif;
-        color: var(--faint);
-        background: var(--bg);
-        border: 0.5px solid var(--border);
-        border-radius: 6px;
-        padding: 3px 8px;
-        cursor: pointer;
-      }
-      .snip .copy:hover {
-        color: var(--text);
-      }
-
-      /* phone widths: the sidebar becomes an off-canvas drawer behind a slim
-         top bar; the stream keeps the full width */
-      .topbar {
-        display: none;
-      }
-      #scrim {
-        display: none;
-      }
-      @media (max-width: 700px) {
-        #app {
-          flex-direction: column;
-        }
-        .topbar {
-          display: flex;
-          align-items: center;
-          gap: 4px;
-          flex: none;
-          padding: 8px 10px;
-          background: var(--panel);
-          border-bottom: 0.5px solid var(--border);
-        }
-        .topbar .brand {
-          padding: 0;
-        }
-        .topbar .menu {
-          position: relative;
-          font-size: 17px;
-          line-height: 1;
-          color: var(--muted);
-          background: none;
-          border: none;
-          border-radius: 8px;
-          padding: 6px 9px;
-          cursor: pointer;
-          font-family: inherit;
-        }
-        .topbar .menu:hover {
-          color: var(--text);
-          background: var(--hover);
-        }
-        .topbar .menu .dot {
-          position: absolute;
-          top: 3px;
-          right: 4px;
-          width: 7px;
-          height: 7px;
-          border-radius: 50%;
-          background: var(--accent);
-          display: none;
-        }
-        .topbar .menu .dot.show {
-          display: block;
-        }
-        aside {
-          position: fixed;
-          top: 0;
-          bottom: 0;
-          left: 0;
-          z-index: 30;
-          width: min(280px, 84vw);
-          transform: translateX(-105%);
-          transition: transform 0.2s ease;
-        }
-        body.nav-open aside {
-          transform: none;
-          box-shadow: 0 0 32px rgba(0, 0, 0, 0.25);
-        }
-        #scrim {
-          display: block;
-          position: fixed;
-          inset: 0;
-          z-index: 25;
-          background: rgba(0, 0, 0, 0.35);
-          opacity: 0;
-          pointer-events: none;
-          transition: opacity 0.2s;
-        }
-        body.nav-open #scrim {
-          opacity: 1;
-          pointer-events: auto;
-        }
-        main {
-          min-height: 0;
-        }
-        .session-head {
-          padding: 12px 16px 10px;
-        }
-        #stream {
-          padding: 16px 14px 120px;
-        }
-        #onboard {
-          padding: 40px 18px;
-        }
-        .card-title {
-          min-width: 0;
-          flex: 0 1 auto;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-      }
-      /* narrow or touch: hover-revealed actions must stay reachable */
-      @media (max-width: 700px), (hover: none) {
-        .card-head .act {
-          opacity: 1;
-        }
-        .sess .x {
-          opacity: 1;
-        }
-        .sess-title {
-          padding-right: 44px;
-        }
-        .sess .dot {
-          right: 32px;
-        }
-      }
-
-      #toast {
-        position: fixed;
-        left: 50%;
-        bottom: 26px;
-        transform: translateX(-50%) translateY(8px);
-        background: var(--surface);
-        border: 0.5px solid var(--border-2);
-        border-radius: 10px;
-        padding: 9px 14px;
-        font-size: 13px;
-        max-width: 600px;
-        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
-        opacity: 0;
-        pointer-events: none;
-        transition:
-          opacity 0.2s,
-          transform 0.2s;
-        z-index: 50;
-      }
-      #toast.show {
-        opacity: 1;
-        transform: translateX(-50%) translateY(0);
-        pointer-events: auto;
-      }
-    </style>
   </head>
   <body>
-    <div id="app">
-      <header class="topbar">
-        <button class="menu" id="menuBtn" aria-label="Show sessions">
-          ☰<span class="dot" id="menuDot"></span>
-        </button>
-        <div class="brand"><span class="livedot"></span>sideshow</div>
-      </header>
-      <aside>
-        <div class="brand"><span class="livedot"></span>sideshow</div>
-        <div id="sessionList"></div>
-        <div class="aside-foot">
-          <a href="/guide" target="_blank">design guide</a> &nbsp;·&nbsp;
-          <a href="/setup" target="_blank">agent setup</a>
-        </div>
-      </aside>
-      <main>
-        <div id="onboard" hidden>
-          <h1>The show hasn&rsquo;t started yet</h1>
-          <p class="sub">
-            sideshow is a live surface where coding agents draw HTML snippets — diagrams, sketches,
-            explainers — while they work in your terminal.
-          </p>
-          <h2>teach your agent about it</h2>
-          <div class="snip" data-copy>
-            curl -s http://localhost:4242/setup &gt;&gt; AGENTS.md<button class="copy">copy</button>
-          </div>
-          <h2>or try it yourself</h2>
-          <div class="snip" data-copy>
-            curl -s -X POST http://localhost:4242/api/snippets -H 'content-type: application/json'
-            -d '{"agent": "me", "title": "Hello", "html": "&lt;h2&gt;It works&lt;/h2&gt;"}'<button
-              class="copy"
-            >
-              copy
-            </button>
-          </div>
-        </div>
-        <div id="sessionView" hidden>
-          <div class="session-head">
-            <span
-              id="sessTitle"
-              contenteditable="true"
-              spellcheck="false"
-              role="textbox"
-              aria-label="Session title"
-            ></span>
-            <span class="meta" id="sessMeta"></span>
-          </div>
-          <div id="stream"></div>
-        </div>
-      </main>
-    </div>
-    <div id="scrim"></div>
-    <div id="toast" role="status" aria-live="polite"></div>
-    <button id="newPill" hidden>new snippet ↓</button>
-    <script>
-      const $ = (id) => document.getElementById(id);
-      const state = {
-        sessions: [],
-        selected: null,
-        unread: new Set(),
-        cards: new Map(),
-      };
-
-      // --- utilities ---
-
-      function relTime(iso) {
-        const s = (Date.now() - new Date(iso)) / 1000;
-        if (s < 60) return "just now";
-        if (s < 3600) return Math.floor(s / 60) + "m ago";
-        if (s < 86400) return Math.floor(s / 3600) + "h ago";
-        return new Date(iso).toLocaleDateString(undefined, { month: "short", day: "numeric" });
-      }
-
-      function toast(text) {
-        const t = $("toast");
-        t.textContent = text;
-        t.classList.add("show");
-        clearTimeout(t._t);
-        t._t = setTimeout(() => t.classList.remove("show"), 4000);
-      }
-
-      async function api(path, init) {
-        const res = await fetch(
-          path,
-          init ? { headers: { "content-type": "application/json" }, ...init } : undefined,
-        );
-        if (!res.ok) throw new Error((await res.json().catch(() => ({}))).error || res.status);
-        return res.json();
-      }
-
-      function sessionLabel(s) {
-        return s.title || s.agent + " session";
-      }
-
-      function setLive(on) {
-        for (const el of document.querySelectorAll(".livedot")) el.classList.toggle("on", on);
-      }
-
-      // --- mobile drawer ---
-
-      $("menuBtn").onclick = () => document.body.classList.toggle("nav-open");
-      $("scrim").onclick = () => document.body.classList.remove("nav-open");
-
-      // --- sidebar ---
-
-      function renderSidebar() {
-        const list = $("sessionList");
-        // re-renders replace the rows wholesale; put keyboard focus back where it was
-        const focused = list.contains(document.activeElement)
-          ? {
-              id: document.activeElement.closest(".sess")?.dataset.id,
-              x: document.activeElement.classList.contains("x"),
-            }
-          : null;
-        list.replaceChildren();
-        for (const s of state.sessions) {
-          const el = document.createElement("div");
-          el.className =
-            "sess" +
-            (s.id === state.selected ? " sel" : "") +
-            (state.unread.has(s.id) ? " unread" : "");
-          el.dataset.id = s.id;
-          el.setAttribute("role", "button");
-          el.tabIndex = 0;
-          if (s.id === state.selected) el.setAttribute("aria-current", "true");
-          el.onclick = () => select(s.id);
-          el.onkeydown = (e) => {
-            if (e.target === el && (e.key === "Enter" || e.key === " ")) {
-              e.preventDefault();
-              select(s.id);
-            }
-          };
-
-          const title = document.createElement("div");
-          title.className = "sess-title";
-          title.textContent = sessionLabel(s);
-          const meta = document.createElement("div");
-          meta.className = "sess-meta";
-          meta.textContent = `${s.agent} · ${s.snippetCount} snippet${s.snippetCount === 1 ? "" : "s"} · ${relTime(s.lastActiveAt)}`;
-          const dot = document.createElement("span");
-          dot.className = "dot";
-          const x = document.createElement("button");
-          x.className = "x";
-          x.textContent = "✕";
-          x.title = "Delete session";
-          x.setAttribute("aria-label", `Delete session "${sessionLabel(s)}"`);
-          x.onclick = async (e) => {
-            e.stopPropagation();
-            if (!confirm(`Delete "${sessionLabel(s)}" and its snippets?`)) return;
-            await api(`/api/sessions/${s.id}`, { method: "DELETE" });
-          };
-          el.append(title, meta, dot, x);
-          list.appendChild(el);
-        }
-        if (focused?.id) {
-          const row = list.querySelector(`.sess[data-id="${CSS.escape(focused.id)}"]`);
-          if (row) (focused.x ? row.querySelector(".x") : row).focus();
-        }
-        $("onboard").hidden = state.sessions.length > 0;
-        $("sessionView").hidden = state.sessions.length === 0;
-        document.title = state.unread.size ? `(${state.unread.size}) sideshow` : "sideshow";
-        $("menuDot").classList.toggle("show", state.unread.size > 0);
-      }
-
-      async function refreshSessions() {
-        state.sessions = await api("/api/sessions");
-        if (state.selected && !state.sessions.some((s) => s.id === state.selected))
-          state.selected = null;
-        if (!state.selected && state.sessions.length > 0) {
-          return select(state.sessions[0].id);
-        }
-        renderSidebar();
-        renderSessionHead();
-      }
-
-      // --- session view ---
-
-      function renderSessionHead() {
-        const s = state.sessions.find((x) => x.id === state.selected);
-        if (!s) return;
-        const titleEl = $("sessTitle");
-        if (document.activeElement !== titleEl) titleEl.textContent = sessionLabel(s);
-        titleEl.onblur = async () => {
-          const next = titleEl.textContent.trim();
-          if (next && next !== sessionLabel(s))
-            await api(`/api/sessions/${s.id}`, {
-              method: "PATCH",
-              body: JSON.stringify({ title: next }),
-            });
-        };
-        titleEl.onkeydown = (e) => {
-          if (e.key === "Enter") {
-            e.preventDefault();
-            titleEl.blur();
-          } else if (e.key === "Escape") {
-            e.preventDefault();
-            titleEl.textContent = sessionLabel(s);
-            titleEl.blur();
-          }
-        };
-        $("sessMeta").textContent = `${s.agent} · started ${relTime(s.createdAt)}`;
-      }
-
-      async function select(id) {
-        state.selected = id;
-        state.unread.delete(id);
-        $("newPill").hidden = true;
-        document.body.classList.remove("nav-open");
-        renderSidebar();
-        renderSessionHead();
-        const stream = $("stream");
-        stream.replaceChildren();
-        state.cards.clear();
-        const snippets = await api(`/api/sessions/${id}/snippets`).catch(() => []);
-        if (snippets.length === 0) {
-          const e = document.createElement("div");
-          e.className = "empty";
-          e.textContent = "No snippets in this session yet.";
-          e.id = "streamEmpty";
-          stream.appendChild(e);
-        }
-        for (const meta of snippets) await upsertCard(meta.id, { scroll: false });
-        ensureSessionThread();
-        const { comments } = await api(`/api/comments?session=${id}`);
-        for (const c of comments) renderComment(c);
-      }
-
-      // Comments without a snippet (e.g. `sideshow comment` with no --snippet)
-      // live in a session-level thread at the bottom of the stream, which also
-      // lets the user message the agent without picking a snippet.
-      function ensureSessionThread() {
-        if ($("sessionThread")) return;
-        const card = document.createElement("div");
-        card.className = "card";
-        card.id = "sessionThread";
-        card.innerHTML = `
-        <div class="card-head">
-          <span class="card-title">Session thread</span>
-          <span class="card-meta">not tied to a snippet</span>
-        </div>
-        <div class="thread">
-          <div class="cmts"></div>
-          <div class="composer">
-            <input placeholder="Message the agent…">
-            <button>Send</button>
-          </div>
-        </div>`;
-        wireComposer(card, (text) => ({ session: state.selected, text, author: "user" }));
-        $("stream").appendChild(card);
-      }
-
-      // Shared composer behavior: echo the comment immediately (pending until
-      // the POST confirms), and on failure put the text back in the input —
-      // a user message must never be silently lost.
-      function wireComposer(card, makeBody) {
-        const input = card.querySelector(".composer input");
-        const send = async () => {
-          const text = input.value.trim();
-          if (!text) return;
-          input.value = "";
-          const el = renderComment(
-            { author: "user", text, createdAt: new Date().toISOString() },
-            card,
-          );
-          el?.classList.add("pending");
-          try {
-            const created = await api("/api/comments", {
-              method: "POST",
-              body: JSON.stringify(makeBody(text)),
-            });
-            // the SSE refetch may have rendered it already; keep one copy
-            if (card.querySelector(`[data-cid="${created.id}"]`)) el?.remove();
-            else if (el) {
-              el.dataset.cid = created.id;
-              el.classList.remove("pending");
-            }
-          } catch (err) {
-            el?.remove();
-            if (!input.value) input.value = text;
-            input.focus();
-            toast(
-              `Couldn't send — ${err.message || "network error"}. Your message is back in the box.`,
-            );
-          }
-        };
-        input.onkeydown = (e) => {
-          if (e.key === "Enter") send();
-        };
-        card.querySelector(".composer button").onclick = send;
-      }
-
-      // --- snippet cards ---
-
-      async function upsertCard(snippetId, { scroll = true } = {}) {
-        const s = await api(`/api/snippets/${snippetId}`).catch(() => null);
-        if (!s || s.sessionId !== state.selected) return;
-        $("streamEmpty")?.remove();
-
-        let card = state.cards.get(s.id);
-        const fresh = !card;
-        if (fresh) {
-          card = document.createElement("div");
-          card.className = "card";
-          card.innerHTML = `
-        <div class="card-head">
-          <span class="card-title"></span>
-          <span class="vslot"></span>
-          <span class="card-meta"></span>
-          <span class="sp"></span>
-          <a class="act open" target="_blank">open ↗</a>
-          <button class="act del">delete</button>
-        </div>
-        <iframe sandbox="allow-scripts"></iframe>
-        <div class="thread">
-          <div class="cmts"></div>
-          <div class="composer">
-            <input placeholder="Reply to the agent…">
-            <button>Send</button>
-          </div>
-        </div>`;
-          wireComposer(card, (text) => ({ snippet: s.id, text, author: "user" }));
-          card.querySelector(".del").onclick = async () => {
-            if (
-              confirm(`Delete "${state.cards.get(s.id).querySelector(".card-title").textContent}"?`)
-            ) {
-              await api(`/api/snippets/${s.id}`, { method: "DELETE" });
-            }
-          };
-          state.cards.set(s.id, card);
-          const thread = $("sessionThread");
-          if (thread) $("stream").insertBefore(card, thread);
-          else $("stream").appendChild(card);
-        }
-
-        card.querySelector(".card-title").textContent = s.title;
-        card.querySelector(".card-meta").textContent = relTime(s.updatedAt);
-        card.querySelector(".open").href = `/s/${s.id}`;
-
-        const vslot = card.querySelector(".vslot");
-        vslot.replaceChildren();
-        if (s.version > 1) {
-          const sel = document.createElement("select");
-          sel.className = "vbadge";
-          for (let v = s.version; v >= Math.max(1, s.version - s.history.length); v--) {
-            const o = document.createElement("option");
-            o.value = v;
-            o.textContent = "v" + v;
-            sel.appendChild(o);
-          }
-          sel.onchange = () => {
-            card.querySelector("iframe").src = `/s/${s.id}?ver=${sel.value}&cb=${Date.now()}`;
-          };
-          vslot.appendChild(sel);
-        } else {
-          const b = document.createElement("span");
-          b.className = "vbadge";
-          b.textContent = "v1";
-          vslot.appendChild(b);
-        }
-
-        const iframe = card.querySelector("iframe");
-        iframe.title = s.title;
-        const src = `/s/${s.id}?cb=${s.version}`;
-        if (iframe.getAttribute("src") !== src) iframe.src = src;
-
-        // Follow new snippets only when the user is already at the bottom;
-        // never yank them away from whatever they're reading mid-scroll.
-        if (fresh && scroll) {
-          if (nearBottom()) card.scrollIntoView({ behavior: "smooth", block: "start" });
-          else showNewPill(s.id);
-        }
-      }
-
-      function nearBottom() {
-        const m = document.querySelector("main");
-        return m.scrollHeight - m.scrollTop - m.clientHeight < 200;
-      }
-
-      function showNewPill(snippetId) {
-        const pill = $("newPill");
-        pill.dataset.target = snippetId;
-        pill.hidden = false;
-      }
-
-      function renderComment(c, targetCard) {
-        const card =
-          targetCard || (c.snippetId ? state.cards.get(c.snippetId) : $("sessionThread"));
-        if (!card) return null;
-        const cmts = card.querySelector(".cmts");
-        if (c.id && cmts.querySelector(`[data-cid="${c.id}"]`)) return null;
-        const el = document.createElement("div");
-        el.className = "cmt" + (c.author === "user" ? " user" : "");
-        if (c.id) el.dataset.cid = c.id;
-        const who = document.createElement("span");
-        who.className = "who";
-        who.textContent = c.author === "user" ? "you" : c.author;
-        const txt = document.createElement("span");
-        txt.className = "txt";
-        txt.textContent = c.text;
-        const when = document.createElement("span");
-        when.className = "when";
-        when.textContent = relTime(c.createdAt);
-        el.append(who, txt, when);
-        cmts.appendChild(el);
-        return el;
-      }
-
-      // --- bridge messages from sandboxed snippets ---
-
-      window.addEventListener("message", async (ev) => {
-        const d = ev.data;
-        if (!d || !d.__sideshow) return;
-        let sourceId = null;
-        for (const [id, card] of state.cards) {
-          if (card.querySelector("iframe").contentWindow === ev.source) {
-            sourceId = id;
-            break;
-          }
-        }
-        if (d.type === "resize" && sourceId) {
-          state.cards.get(sourceId).querySelector("iframe").style.height =
-            Math.min(Math.max(d.height, 48), 2200) + "px";
-        } else if (d.type === "send-prompt" && sourceId) {
-          await api("/api/comments", {
-            method: "POST",
-            body: JSON.stringify({ snippet: sourceId, text: String(d.text), author: "user" }),
-          });
-          toast("Sent to agent: " + d.text);
-        } else if (d.type === "open-link") {
-          if (confirm(`Open external link?\n\n${d.url}`)) window.open(d.url, "_blank", "noopener");
-        }
-      });
-
-      // --- live feed ---
-
-      function connect() {
-        const es = new EventSource("/api/events");
-        let everConnected = false;
-        es.onopen = async () => {
-          setLive(true);
-          // events that fired during a gap are gone for good — refetch so the
-          // board can't silently go stale while still looking live
-          if (everConnected) await resyncSelected();
-          everConnected = true;
-        };
-        es.onerror = () => setLive(false);
-        es.onmessage = async (ev) => {
-          const e = JSON.parse(ev.data);
-          // activity the user isn't looking at — other session or hidden tab —
-          // marks the session unread, which also badges the tab title
-          const away = e.sessionId && (e.sessionId !== state.selected || document.hidden);
-          if (e.type.startsWith("session-")) {
-            await refreshSessions();
-          } else if (e.type === "snippet-created" || e.type === "snippet-updated") {
-            if (away) state.unread.add(e.sessionId);
-            if (e.sessionId === state.selected) await upsertCard(e.id);
-            await refreshSessionsQuiet();
-          } else if (e.type === "snippet-deleted") {
-            state.cards.get(e.id)?.remove();
-            state.cards.delete(e.id);
-            await refreshSessionsQuiet();
-          } else if (e.type === "comment-created") {
-            if (away) state.unread.add(e.sessionId);
-            if (e.sessionId === state.selected) {
-              const query = e.snippetId ? `snippet=${e.snippetId}` : `session=${e.sessionId}`;
-              const { comments } = await api(`/api/comments?${query}`);
-              for (const c of comments) renderComment(c);
-            }
-            renderSidebar();
-          }
-        };
-      }
-
-      // Re-fetch the selected session's snippets and comments after an SSE
-      // reconnect; cards reconcile by id and comments dedupe by data-cid.
-      async function resyncSelected() {
-        const before = state.selected;
-        await refreshSessions();
-        if (!state.selected || state.selected !== before) return; // select() rebuilt the stream
-        const snippets = await api(`/api/sessions/${state.selected}/snippets`).catch(() => []);
-        const ids = new Set(snippets.map((s) => s.id));
-        for (const [id, card] of [...state.cards]) {
-          if (!ids.has(id)) {
-            card.remove();
-            state.cards.delete(id);
-          }
-        }
-        for (const meta of snippets) await upsertCard(meta.id, { scroll: false });
-        const { comments } = await api(`/api/comments?session=${state.selected}`).catch(() => ({
-          comments: [],
-        }));
-        for (const c of comments) renderComment(c);
-      }
-
-      async function refreshSessionsQuiet() {
-        state.sessions = await api("/api/sessions");
-        renderSidebar();
-        renderSessionHead();
-      }
-
-      // --- onboarding copy buttons ---
-
-      for (const block of document.querySelectorAll(".snip")) {
-        block.querySelector(".copy").onclick = (e) => {
-          const text = block.cloneNode(true);
-          text.querySelector(".copy").remove();
-          navigator.clipboard.writeText(text.textContent.trim());
-          e.target.textContent = "copied";
-          setTimeout(() => (e.target.textContent = "copy"), 1500);
-        };
-      }
-
-      $("newPill").onclick = () => {
-        const card = state.cards.get($("newPill").dataset.target);
-        card?.scrollIntoView({ behavior: "smooth", block: "start" });
-        $("newPill").hidden = true;
-      };
-      document.querySelector("main").addEventListener(
-        "scroll",
-        () => {
-          if (nearBottom()) $("newPill").hidden = true;
-        },
-        { passive: true },
-      );
-
-      // returning to the tab counts as seeing the selected session
-      document.addEventListener("visibilitychange", () => {
-        if (!document.hidden && state.selected) {
-          state.unread.delete(state.selected);
-          renderSidebar();
-        }
-      });
-
-      setInterval(() => {
-        if (state.sessions.length > 0) refreshSessionsQuiet();
-      }, 45000);
-
-      refreshSessions();
-      connect();
-    </script>
+    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/viewer/src/App.tsx b/viewer/src/App.tsx
new file mode 100644
index 0000000..7f9ee2c
--- /dev/null
+++ b/viewer/src/App.tsx
@@ -0,0 +1,299 @@
+import { createEffect, createMemo, createSignal, For, onCleanup, onMount, Show } from "solid-js";
+import { api, relTime, sessionLabel, type SessionRow } from "./api.ts";
+import { Card, cardEls, SessionThread } from "./Card.tsx";
+import {
+  connect,
+  live,
+  navOpen,
+  nearBottom,
+  pillTarget,
+  refreshSessions,
+  refreshSessionsQuiet,
+  select,
+  selected,
+  sessions,
+  setNavOpen,
+  setPillTarget,
+  setUnread,
+  snippets,
+  streamLoading,
+  toast,
+  toastShow,
+  toastText,
+  unread,
+} from "./state.ts";
+
+export default function App() {
+  onMount(() => {
+    refreshSessions();
+    connect();
+    const timer = setInterval(() => {
+      if (sessions.length > 0) refreshSessionsQuiet();
+    }, 45_000);
+    onCleanup(() => clearInterval(timer));
+    window.addEventListener("message", onBridgeMessage);
+    onCleanup(() => window.removeEventListener("message", onBridgeMessage));
+    // returning to the tab counts as seeing the selected session
+    const onVisibility = () => {
+      const id = selected();
+      if (!document.hidden && id) {
+        setUnread((prev) => {
+          const next = new Set(prev);
+          next.delete(id);
+          return next;
+        });
+      }
+    };
+    document.addEventListener("visibilitychange", onVisibility);
+    onCleanup(() => document.removeEventListener("visibilitychange", onVisibility));
+  });
+
+  // unseen activity badges the tab title
+  createEffect(() => {
+    document.title = unread().size ? `(${unread().size}) sideshow` : "sideshow";
+  });
+  // the mobile drawer slides in via a body class (see styles.css)
+  createEffect(() => document.body.classList.toggle("nav-open", navOpen()));
+
+  return (
+    <>
+      <div id="app">
+        <header class="topbar">
+          <button
+            class="menu"
+            id="menuBtn"
+            aria-label="Show sessions"
+            onClick={() => setNavOpen(!navOpen())}
+          >
+            ☰<span class="dot" id="menuDot" classList={{ show: unread().size > 0 }}></span>
+          </button>
+          <div class="brand">
+            <span class="livedot" classList={{ on: live() }}></span>sideshow
+          </div>
+        </header>
+        <aside>
+          <div class="brand">
+            <span class="livedot" classList={{ on: live() }}></span>sideshow
+          </div>
+          <div id="sessionList">
+            <For each={sessions}>{(s) => <SessionItem session={s} />}</For>
+          </div>
+          <div class="aside-foot">
+            <a href="/guide" target="_blank">
+              design guide
+            </a>{" "}
+            &nbsp;·&nbsp;{" "}
+            <a href="/setup" target="_blank">
+              agent setup
+            </a>
+          </div>
+        </aside>
+        <main
+          onScroll={() => {
+            if (nearBottom()) setPillTarget(null);
+          }}
+        >
+          <Onboard />
+          <SessionView />
+        </main>
+      </div>
+      <div id="scrim" onClick={() => setNavOpen(false)}></div>
+      <div id="toast" role="status" aria-live="polite" classList={{ show: toastShow() }}>
+        {toastText()}
+      </div>
+      <button
+        id="newPill"
+        hidden={pillTarget() === null}
+        onClick={() => {
+          const target = pillTarget();
+          if (target)
+            cardEls.get(target)?.card.scrollIntoView({ behavior: "smooth", block: "start" });
+          setPillTarget(null);
+        }}
+      >
+        new snippet ↓
+      </button>
+    </>
+  );
+}
+
+// Messages from sandboxed snippet iframes (see server/snippetPage.ts bridge).
+async function onBridgeMessage(ev: MessageEvent) {
+  const d = ev.data as {
+    __sideshow?: boolean;
+    type?: string;
+    height?: number;
+    text?: unknown;
+    url?: string;
+  } | null;
+  if (!d || !d.__sideshow) return;
+  let sourceId: string | null = null;
+  let sourceFrame: HTMLIFrameElement | null = null;
+  for (const [id, { iframe }] of cardEls) {
+    if (iframe.contentWindow === ev.source) {
+      sourceId = id;
+      sourceFrame = iframe;
+      break;
+    }
+  }
+  if (d.type === "resize" && sourceFrame) {
+    sourceFrame.style.height = Math.min(Math.max(Number(d.height), 48), 2200) + "px";
+  } else if (d.type === "send-prompt" && sourceId) {
+    await api("/api/comments", {
+      method: "POST",
+      body: JSON.stringify({ snippet: sourceId, text: String(d.text), author: "user" }),
+    });
+    toast("Sent to agent: " + d.text);
+  } else if (d.type === "open-link") {
+    if (confirm(`Open external link?\n\n${d.url}`)) window.open(d.url, "_blank", "noopener");
+  }
+}
+
+function SessionItem(props: { session: SessionRow }) {
+  const label = () => sessionLabel(props.session);
+  return (
+    <div
+      class="sess"
+      classList={{
+        sel: props.session.id === selected(),
+        unread: unread().has(props.session.id),
+      }}
+      data-id={props.session.id}
+      role="button"
+      tabIndex={0}
+      aria-current={props.session.id === selected() ? "true" : undefined}
+      onClick={() => select(props.session.id)}
+      onKeyDown={(e) => {
+        if (e.target === e.currentTarget && (e.key === "Enter" || e.key === " ")) {
+          e.preventDefault();
+          select(props.session.id);
+        }
+      }}
+    >
+      <div class="sess-title">{label()}</div>
+      <div class="sess-meta">
+        {props.session.agent} · {props.session.snippetCount} snippet
+        {props.session.snippetCount === 1 ? "" : "s"} · {relTime(props.session.lastActiveAt)}
+      </div>
+      <span class="dot"></span>
+      <button
+        class="x"
+        title="Delete session"
+        aria-label={`Delete session "${label()}"`}
+        onClick={async (e) => {
+          e.stopPropagation();
+          if (!confirm(`Delete "${label()}" and its snippets?`)) return;
+          await api(`/api/sessions/${props.session.id}`, { method: "DELETE" });
+        }}
+      >
+        ✕
+      </button>
+    </div>
+  );
+}
+
+function SessionView() {
+  const current = createMemo(() => sessions.find((x) => x.id === selected()));
+  return (
+    <div id="sessionView" hidden={sessions.length === 0}>
+      <div class="session-head">
+        <SessionTitle current={current()} />
+        <span class="meta" id="sessMeta">
+          {current() ? `${current()!.agent} · started ${relTime(current()!.createdAt)}` : ""}
+        </span>
+      </div>
+      <div id="stream">
+        <Show when={!streamLoading() && snippets.length === 0}>
+          <div class="empty" id="streamEmpty">
+            No snippets in this session yet.
+          </div>
+        </Show>
+        <For each={snippets}>{(s) => <Card snippet={s} />}</For>
+        <SessionThread />
+      </div>
+    </div>
+  );
+}
+
+function SessionTitle(props: { current: SessionRow | undefined }) {
+  let el!: HTMLSpanElement;
+  // contenteditable owns its text while focused; sync from state otherwise
+  createEffect(() => {
+    if (props.current && document.activeElement !== el) {
+      el.textContent = sessionLabel(props.current);
+    }
+  });
+  const commit = async () => {
+    if (!props.current) return;
+    const next = el.textContent?.trim() ?? "";
+    if (next && next !== sessionLabel(props.current)) {
+      await api(`/api/sessions/${props.current.id}`, {
+        method: "PATCH",
+        body: JSON.stringify({ title: next }),
+      });
+    }
+  };
+  return (
+    <span
+      id="sessTitle"
+      ref={(span) => (el = span)}
+      contentEditable={true}
+      spellcheck={false}
+      role="textbox"
+      aria-label="Session title"
+      onBlur={commit}
+      onKeyDown={(e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          el.blur();
+        } else if (e.key === "Escape") {
+          e.preventDefault();
+          if (props.current) el.textContent = sessionLabel(props.current);
+          el.blur();
+        }
+      }}
+    ></span>
+  );
+}
+
+// withOrigin on the server rewrites these localhost URLs to the deployed
+// origin when serving the built document — keep them as plain literals.
+const SETUP_SNIP = "curl -s http://localhost:4242/setup >> AGENTS.md";
+const TRY_SNIP =
+  "curl -s -X POST http://localhost:4242/api/snippets -H 'content-type: application/json' " +
+  `-d '{"agent": "me", "title": "Hello", "html": "<h2>It works</h2>"}'`;
+
+function Onboard() {
+  return (
+    <div id="onboard" hidden={sessions.length > 0}>
+      <h1>The show hasn&rsquo;t started yet</h1>
+      <p class="sub">
+        sideshow is a live surface where coding agents draw HTML snippets — diagrams, sketches,
+        explainers — while they work in your terminal.
+      </p>
+      <h2>teach your agent about it</h2>
+      <Snip text={SETUP_SNIP} />
+      <h2>or try it yourself</h2>
+      <Snip text={TRY_SNIP} />
+    </div>
+  );
+}
+
+function Snip(props: { text: string }) {
+  const [label, setLabel] = createSignal("copy");
+  return (
+    <div class="snip">
+      {props.text}
+      <button
+        class="copy"
+        onClick={() => {
+          navigator.clipboard.writeText(props.text);
+          setLabel("copied");
+          setTimeout(() => setLabel("copy"), 1500);
+        }}
+      >
+        {label()}
+      </button>
+    </div>
+  );
+}
diff --git a/viewer/src/Card.tsx b/viewer/src/Card.tsx
new file mode 100644
index 0000000..6017c77
--- /dev/null
+++ b/viewer/src/Card.tsx
@@ -0,0 +1,170 @@
+import { For, onCleanup, onMount, Show } from "solid-js";
+import { api, relTime, type Snippet } from "./api.ts";
+import {
+  comments,
+  scrollTarget,
+  selected,
+  sendComment,
+  setScrollTarget,
+  toast,
+  type ViewComment,
+} from "./state.ts";
+
+// Card registry keyed by snippet id: the postMessage bridge in App finds the
+// source iframe here, and the "new snippet" pill scrolls to the card element.
+export const cardEls = new Map<string, { card: HTMLDivElement; iframe: HTMLIFrameElement }>();
+
+export function Card(props: { snippet: Snippet }) {
+  let card!: HTMLDivElement;
+  let iframe!: HTMLIFrameElement;
+
+  onMount(() => {
+    cardEls.set(props.snippet.id, { card, iframe });
+    onCleanup(() => cardEls.delete(props.snippet.id));
+    if (scrollTarget() === props.snippet.id) {
+      setScrollTarget(null);
+      card.scrollIntoView({ behavior: "smooth", block: "start" });
+    }
+  });
+
+  const versionRange = (latest: number) => {
+    const out = [];
+    for (let v = latest; v >= Math.max(1, latest - props.snippet.history.length); v--) out.push(v);
+    return out;
+  };
+
+  return (
+    <div class="card" ref={(el) => (card = el)}>
+      <div class="card-head">
+        <span class="card-title">{props.snippet.title}</span>
+        <span class="vslot">
+          {/* keyed on version: a new version rebuilds the select, resetting
+              the selection to the latest like the live iframe src does */}
+          <Show
+            when={props.snippet.version > 1 && props.snippet.version}
+            keyed
+            fallback={<span class="vbadge">v1</span>}
+          >
+            {(latest) => (
+              <select
+                class="vbadge"
+                onChange={(e) => {
+                  iframe.src = `/s/${props.snippet.id}?ver=${e.currentTarget.value}&cb=${Date.now()}`;
+                }}
+              >
+                <For each={versionRange(latest)}>{(v) => <option value={v}>v{v}</option>}</For>
+              </select>
+            )}
+          </Show>
+        </span>
+        <span class="card-meta">{relTime(props.snippet.updatedAt)}</span>
+        <span class="sp"></span>
+        <a class="act open" target="_blank" href={`/s/${props.snippet.id}`}>
+          open ↗
+        </a>
+        <button
+          class="act del"
+          onClick={async () => {
+            if (confirm(`Delete "${props.snippet.title}"?`)) {
+              await api(`/api/snippets/${props.snippet.id}`, { method: "DELETE" });
+            }
+          }}
+        >
+          delete
+        </button>
+      </div>
+      {/* src changes only when the version does, so unrelated refetches never
+          reload the sandboxed document */}
+      <iframe
+        ref={(el) => (iframe = el)}
+        sandbox="allow-scripts"
+        title={props.snippet.title}
+        src={`/s/${props.snippet.id}?cb=${props.snippet.version}`}
+      ></iframe>
+      <Thread
+        snippetId={props.snippet.id}
+        placeholder="Reply to the agent…"
+        send={(text) =>
+          sendComment({ snippet: props.snippet.id, text, author: "user" }, props.snippet.id, text)
+        }
+      />
+    </div>
+  );
+}
+
+// Comments without a snippet (e.g. `sideshow comment` with no --snippet)
+// live in a session-level thread at the bottom of the stream, which also
+// lets the user message the agent without picking a snippet.
+export function SessionThread() {
+  return (
+    <div class="card" id="sessionThread">
+      <div class="card-head">
+        <span class="card-title">Session thread</span>
+        <span class="card-meta">not tied to a snippet</span>
+      </div>
+      <Thread
+        snippetId={null}
+        placeholder="Message the agent…"
+        send={(text) => sendComment({ session: selected(), text, author: "user" }, null, text)}
+      />
+    </div>
+  );
+}
+
+function Thread(props: {
+  snippetId: string | null;
+  placeholder: string;
+  send: (text: string) => Promise<string | null>;
+}) {
+  const list = () => comments().filter((c) => c.snippetId === props.snippetId);
+  return (
+    <div class="thread">
+      <div class="cmts">
+        <For each={list()}>{(c) => <CommentRow comment={c} />}</For>
+      </div>
+      <Composer placeholder={props.placeholder} send={props.send} />
+    </div>
+  );
+}
+
+function CommentRow(props: { comment: ViewComment }) {
+  return (
+    <div
+      class="cmt"
+      classList={{ user: props.comment.author === "user", pending: !!props.comment.pending }}
+      data-cid={props.comment.id}
+    >
+      <span class="who">{props.comment.author === "user" ? "you" : props.comment.author}</span>
+      <span class="txt">{props.comment.text}</span>
+      <span class="when">{relTime(props.comment.createdAt)}</span>
+    </div>
+  );
+}
+
+function Composer(props: { placeholder: string; send: (text: string) => Promise<string | null> }) {
+  let input!: HTMLInputElement;
+  const send = async () => {
+    const text = input.value.trim();
+    if (!text) return;
+    input.value = "";
+    const error = await props.send(text);
+    // on failure the text goes back in the input — never silently lost
+    if (error !== null) {
+      if (!input.value) input.value = text;
+      input.focus();
+      toast(`Couldn't send — ${error}. Your message is back in the box.`);
+    }
+  };
+  return (
+    <div class="composer">
+      <input
+        ref={(el) => (input = el)}
+        placeholder={props.placeholder}
+        onKeyDown={(e) => {
+          if (e.key === "Enter") send();
+        }}
+      />
+      <button onClick={send}>Send</button>
+    </div>
+  );
+}
diff --git a/viewer/src/api.ts b/viewer/src/api.ts
new file mode 100644
index 0000000..8b724ee
--- /dev/null
+++ b/viewer/src/api.ts
@@ -0,0 +1,31 @@
+// Thin client over the REST API, typed against the server's data model.
+import type { Comment, Session, Snippet } from "../../server/types.ts";
+
+export type { Comment, Session, Snippet };
+
+// GET /api/sessions decorates each session with its snippet count.
+export interface SessionRow extends Session {
+  snippetCount: number;
+}
+
+export async function api<T = unknown>(path: string, init?: RequestInit): Promise<T> {
+  const res = await fetch(
+    path,
+    init ? { headers: { "content-type": "application/json" }, ...init } : undefined,
+  );
+  if (!res.ok) {
+    const body = (await res.json().catch(() => ({}))) as { error?: string };
+    throw new Error(body.error || String(res.status));
+  }
+  return res.json() as Promise<T>;
+}
+
+export const sessionLabel = (s: Session) => s.title || s.agent + " session";
+
+export function relTime(iso: string): string {
+  const s = (Date.now() - new Date(iso).getTime()) / 1000;
+  if (s < 60) return "just now";
+  if (s < 3600) return Math.floor(s / 60) + "m ago";
+  if (s < 86400) return Math.floor(s / 3600) + "h ago";
+  return new Date(iso).toLocaleDateString(undefined, { month: "short", day: "numeric" });
+}
diff --git a/viewer/src/main.tsx b/viewer/src/main.tsx
new file mode 100644
index 0000000..71c6e6c
--- /dev/null
+++ b/viewer/src/main.tsx
@@ -0,0 +1,5 @@
+import { render } from "solid-js/web";
+import App from "./App.tsx";
+import "./styles.css";
+
+render(() => <App />, document.body);
diff --git a/viewer/src/state.ts b/viewer/src/state.ts
new file mode 100644
index 0000000..1115f57
--- /dev/null
+++ b/viewer/src/state.ts
@@ -0,0 +1,210 @@
+// Shared state and the flows that mutate it. Stores reconcile by id so DOM
+// rows/cards persist across refetches (focus, composer drafts, iframes).
+import { createSignal } from "solid-js";
+import { createStore, produce, reconcile } from "solid-js/store";
+import { api, type Comment, type SessionRow, type Snippet } from "./api.ts";
+
+// A comment as the viewer renders it: server comments plus the optimistic
+// local echo (pending until the POST confirms).
+export type ViewComment = Comment & { pending?: boolean };
+
+export const [sessions, setSessions] = createStore<SessionRow[]>([]);
+export const [selected, setSelected] = createSignal<string | null>(null);
+export const [unread, setUnread] = createSignal<ReadonlySet<string>>(new Set<string>());
+export const [snippets, setSnippets] = createStore<Snippet[]>([]);
+export const [comments, setComments] = createSignal<ViewComment[]>([]);
+export const [streamLoading, setStreamLoading] = createSignal(false);
+export const [live, setLive] = createSignal(false);
+export const [navOpen, setNavOpen] = createSignal(false);
+// Snippet id the next mounted card should scroll to (set for SSE arrivals
+// landing while the user is near the bottom, not the initial batch of a
+// session switch).
+export const [scrollTarget, setScrollTarget] = createSignal<string | null>(null);
+// Snippet id the "new snippet ↓" pill jumps to — set instead of scrolling
+// when the user is reading further up.
+export const [pillTarget, setPillTarget] = createSignal<string | null>(null);
+
+export const [toastText, setToastText] = createSignal("");
+export const [toastShow, setToastShow] = createSignal(false);
+let toastTimer: ReturnType<typeof setTimeout> | undefined;
+
+export function toast(text: string) {
+  setToastText(text);
+  setToastShow(true);
+  clearTimeout(toastTimer);
+  toastTimer = setTimeout(() => setToastShow(false), 4000);
+}
+
+function markUnread(sessionId: string) {
+  setUnread((prev) => new Set(prev).add(sessionId));
+}
+
+export async function refreshSessionsQuiet() {
+  setSessions(reconcile(await api<SessionRow[]>("/api/sessions"), { key: "id" }));
+}
+
+export async function refreshSessions() {
+  await refreshSessionsQuiet();
+  if (selected() && !sessions.some((s) => s.id === selected())) setSelected(null);
+  if (!selected() && sessions.length > 0) await select(sessions[0].id);
+}
+
+export async function select(id: string) {
+  setSelected(id);
+  setUnread((prev) => {
+    const next = new Set(prev);
+    next.delete(id);
+    return next;
+  });
+  setPillTarget(null);
+  setNavOpen(false);
+  setStreamLoading(true);
+  setSnippets(reconcile([]));
+  setComments([]);
+  const metas = await api<{ id: string }[]>(`/api/sessions/${id}/snippets`).catch(() => []);
+  const details = (
+    await Promise.all(metas.map((m) => api<Snippet>(`/api/snippets/${m.id}`).catch(() => null)))
+  ).filter((s) => s !== null);
+  if (selected() !== id) return; // user switched away mid-load
+  setSnippets(reconcile(details, { key: "id" }));
+  setStreamLoading(false);
+  const res = await api<{ comments: Comment[] }>(`/api/comments?session=${id}`).catch(() => null);
+  if (!res || selected() !== id) return;
+  mergeComments(res.comments);
+}
+
+// Fetch a snippet and insert/update it in the open session's stream.
+export async function upsertSnippet(id: string, { scroll = true } = {}) {
+  const s = await api<Snippet>(`/api/snippets/${id}`).catch(() => null);
+  if (!s || s.sessionId !== selected()) return;
+  const idx = snippets.findIndex((x) => x.id === s.id);
+  if (idx >= 0) {
+    setSnippets(idx, reconcile(s));
+  } else {
+    // Follow new snippets only when the user is already at the bottom;
+    // never yank them away from whatever they're reading mid-scroll.
+    if (scroll) {
+      if (nearBottom()) setScrollTarget(s.id);
+      else setPillTarget(s.id);
+    }
+    setSnippets(snippets.length, s);
+  }
+}
+
+export function nearBottom() {
+  const m = document.querySelector("main");
+  return !!m && m.scrollHeight - m.scrollTop - m.clientHeight < 200;
+}
+
+export function mergeComments(list: Comment[]) {
+  setComments((prev) => {
+    const seen = new Set(prev.map((c) => c.id));
+    const fresh = list.filter((c) => !seen.has(c.id));
+    return fresh.length > 0 ? [...prev, ...fresh] : prev;
+  });
+}
+
+let localSeq = 0;
+
+// Echo the comment immediately (pending until the POST confirms), and on
+// failure report the error so the composer can put the text back — a user
+// message must never be silently lost. Returns the error message, or null.
+export async function sendComment(
+  body: Record<string, unknown>,
+  snippetId: string | null,
+  text: string,
+): Promise<string | null> {
+  const local: ViewComment = {
+    id: `local-${++localSeq}`,
+    seq: 0,
+    sessionId: selected() ?? "",
+    snippetId,
+    snippetTitle: null,
+    author: "user",
+    text,
+    createdAt: new Date().toISOString(),
+    pending: true,
+  };
+  setComments((prev) => [...prev, local]);
+  try {
+    const created = await api<Comment>("/api/comments", {
+      method: "POST",
+      body: JSON.stringify(body),
+    });
+    setComments((prev) => {
+      // the SSE refetch may have rendered it already; keep one copy
+      if (prev.some((c) => c.id === created.id)) return prev.filter((c) => c.id !== local.id);
+      return prev.map((c) => (c.id === local.id ? created : c));
+    });
+    return null;
+  } catch (err) {
+    setComments((prev) => prev.filter((c) => c.id !== local.id));
+    return err instanceof Error && err.message ? err.message : "network error";
+  }
+}
+
+interface FeedEvent {
+  type: string;
+  id: string;
+  sessionId?: string;
+  snippetId?: string | null;
+}
+
+export function connect() {
+  const es = new EventSource("/api/events");
+  let everConnected = false;
+  es.onopen = async () => {
+    setLive(true);
+    // events that fired during a gap are gone for good — refetch so the
+    // board can't silently go stale while still looking live
+    if (everConnected) await resyncSelected();
+    everConnected = true;
+  };
+  es.onerror = () => setLive(false);
+  es.onmessage = async (ev) => {
+    const e = JSON.parse(ev.data) as FeedEvent;
+    // activity the user isn't looking at — other session or hidden tab —
+    // marks the session unread, which also badges the tab title
+    const away = e.sessionId != null && (e.sessionId !== selected() || document.hidden);
+    if (e.type.startsWith("session-")) {
+      await refreshSessions();
+    } else if (e.type === "snippet-created" || e.type === "snippet-updated") {
+      if (away && e.sessionId) markUnread(e.sessionId);
+      if (e.sessionId === selected()) await upsertSnippet(e.id);
+      await refreshSessionsQuiet();
+    } else if (e.type === "snippet-deleted") {
+      const idx = snippets.findIndex((s) => s.id === e.id);
+      if (idx >= 0) setSnippets(produce((arr) => arr.splice(idx, 1)));
+      await refreshSessionsQuiet();
+    } else if (e.type === "comment-created") {
+      if (away && e.sessionId) markUnread(e.sessionId);
+      if (e.sessionId === selected()) {
+        const query = e.snippetId ? `snippet=${e.snippetId}` : `session=${e.sessionId}`;
+        const res = await api<{ comments: Comment[] }>(`/api/comments?${query}`);
+        mergeComments(res.comments);
+      }
+    }
+  };
+}
+
+// Re-fetch the selected session's snippets and comments after an SSE
+// reconnect; snippets reconcile by id and comments dedupe by id.
+async function resyncSelected() {
+  const before = selected();
+  await refreshSessions();
+  if (!before || selected() !== before) return; // select() rebuilt the stream
+  const metas = await api<{ id: string }[]>(`/api/sessions/${before}/snippets`).catch(() => []);
+  const ids = new Set(metas.map((m) => m.id));
+  setSnippets(
+    produce((arr) => {
+      for (let i = arr.length - 1; i >= 0; i--) {
+        if (!ids.has(arr[i].id)) arr.splice(i, 1);
+      }
+    }),
+  );
+  for (const meta of metas) await upsertSnippet(meta.id, { scroll: false });
+  const res = await api<{ comments: Comment[] }>(`/api/comments?session=${before}`).catch(
+    () => null,
+  );
+  if (res && selected() === before) mergeComments(res.comments);
+}
diff --git a/viewer/src/styles.css b/viewer/src/styles.css
new file mode 100644
index 0000000..2177583
--- /dev/null
+++ b/viewer/src/styles.css
@@ -0,0 +1,562 @@
+:root {
+  --bg: #faf9f5;
+  --panel: #f3f2ec;
+  --surface: #ffffff;
+  --text: #1a1915;
+  --muted: #5f5e56;
+  --faint: #8e8d83;
+  --border: rgba(20, 20, 10, 0.12);
+  --border-2: rgba(20, 20, 10, 0.25);
+  --accent: #185fa5;
+  --accent-bg: #e6f1fb;
+  --hover: rgba(20, 20, 10, 0.05);
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #1f1e1b;
+    --panel: #1a1917;
+    --surface: #2a2925;
+    --text: #eceadf;
+    --muted: #b3b1a4;
+    --faint: #8a887c;
+    --border: rgba(255, 255, 250, 0.12);
+    --border-2: rgba(255, 255, 250, 0.25);
+    --accent: #85b7eb;
+    --accent-bg: rgba(55, 138, 221, 0.16);
+    --hover: rgba(255, 255, 250, 0.06);
+  }
+}
+* {
+  box-sizing: border-box;
+}
+html,
+body {
+  height: 100%;
+}
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--text);
+  font:
+    14px/1.5 -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    sans-serif;
+}
+#app {
+  display: flex;
+  height: 100%;
+}
+
+aside {
+  width: 248px;
+  flex: none;
+  background: var(--panel);
+  border-right: 0.5px solid var(--border);
+  display: flex;
+  flex-direction: column;
+}
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 16px 16px 12px;
+  font-size: 15px;
+  font-weight: 500;
+  letter-spacing: 0.01em;
+}
+.livedot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--faint);
+  transition: background 0.3s;
+}
+.livedot.on {
+  background: #4caf78;
+}
+#sessionList {
+  flex: 1;
+  overflow-y: auto;
+  padding: 4px 8px;
+}
+.sess {
+  position: relative;
+  padding: 9px 10px;
+  border-radius: 8px;
+  cursor: pointer;
+  margin-bottom: 2px;
+}
+.sess:hover {
+  background: var(--hover);
+}
+.sess:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+}
+.sess.sel {
+  background: var(--surface);
+  box-shadow: 0 0 0 0.5px var(--border);
+}
+.sess-title {
+  font-weight: 500;
+  font-size: 13px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding-right: 18px;
+}
+.sess-meta {
+  font-size: 12px;
+  color: var(--faint);
+  margin-top: 1px;
+}
+.sess .dot {
+  position: absolute;
+  top: 12px;
+  right: 10px;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--accent);
+  display: none;
+}
+.sess.unread .dot {
+  display: block;
+}
+.sess .x {
+  position: absolute;
+  top: 8px;
+  right: 6px;
+  opacity: 0;
+  border: none;
+  background: none;
+  color: var(--faint);
+  cursor: pointer;
+  font-size: 13px;
+  padding: 2px 4px;
+  border-radius: 5px;
+  font-family: inherit;
+}
+.sess:hover .x,
+.sess:focus-within .x {
+  opacity: 1;
+}
+.sess:hover .dot,
+.sess:focus-within .dot {
+  display: none;
+}
+.sess .x:hover {
+  color: var(--text);
+  background: var(--hover);
+}
+.aside-foot {
+  padding: 12px 16px;
+  border-top: 0.5px solid var(--border);
+  font-size: 12px;
+  color: var(--faint);
+}
+.aside-foot a {
+  color: var(--muted);
+  text-decoration: none;
+}
+.aside-foot a:hover {
+  color: var(--text);
+}
+
+main {
+  flex: 1;
+  overflow-y: auto;
+  min-width: 0;
+}
+.session-head {
+  position: sticky;
+  top: 0;
+  z-index: 5;
+  background: var(--bg);
+  padding: 14px 28px 10px;
+  border-bottom: 0.5px solid var(--border);
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+}
+#sessTitle {
+  font-size: 16px;
+  font-weight: 500;
+  outline: none;
+  border-radius: 6px;
+  padding: 0 4px;
+  min-width: 40px;
+}
+#sessTitle:hover {
+  background: var(--hover);
+}
+#sessTitle:focus {
+  background: var(--surface);
+  box-shadow: 0 0 0 0.5px var(--border-2);
+}
+.session-head .meta {
+  font-size: 12.5px;
+  color: var(--faint);
+}
+#stream {
+  max-width: 860px;
+  margin: 0 auto;
+  padding: 22px 28px 120px;
+}
+
+.card {
+  background: var(--surface);
+  border: 0.5px solid var(--border);
+  border-radius: 12px;
+  margin-bottom: 22px;
+  overflow: hidden;
+}
+.card-head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+}
+.card-title {
+  font-weight: 500;
+  font-size: 14px;
+}
+.vbadge {
+  font-size: 11px;
+  color: var(--muted);
+  border: 0.5px solid var(--border);
+  border-radius: 999px;
+  padding: 0 7px;
+  line-height: 17px;
+  background: none;
+  cursor: default;
+  font-family: inherit;
+}
+select.vbadge {
+  cursor: pointer;
+  appearance: none;
+}
+.card-meta {
+  font-size: 12px;
+  color: var(--faint);
+}
+.card-head .sp {
+  flex: 1;
+}
+.card-head .act {
+  font-size: 12px;
+  color: var(--faint);
+  background: none;
+  border: none;
+  cursor: pointer;
+  text-decoration: none;
+  padding: 3px 7px;
+  border-radius: 6px;
+  font-family: inherit;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+.card:hover .act,
+.card:focus-within .act {
+  opacity: 1;
+}
+.card-head .act:hover {
+  color: var(--text);
+  background: var(--hover);
+}
+iframe {
+  display: block;
+  width: 100%;
+  height: 120px;
+  border: none;
+  border-top: 0.5px solid var(--border);
+  background: transparent;
+}
+.thread {
+  border-top: 0.5px solid var(--border);
+  padding: 6px 14px 10px;
+}
+.cmt {
+  display: flex;
+  gap: 8px;
+  padding: 5px 0;
+  font-size: 13px;
+}
+.cmt .who {
+  flex: none;
+  font-weight: 500;
+  color: var(--muted);
+}
+.cmt.user .who {
+  color: var(--accent);
+}
+.cmt .txt {
+  color: var(--text);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.cmt .when {
+  flex: none;
+  margin-left: auto;
+  font-size: 11.5px;
+  color: var(--faint);
+  align-self: center;
+}
+.composer {
+  display: flex;
+  gap: 8px;
+  margin-top: 4px;
+}
+.composer input {
+  flex: 1;
+  font: 13px/1.4 inherit;
+  color: var(--text);
+  background: var(--bg);
+  border: 0.5px solid var(--border);
+  border-radius: 8px;
+  padding: 7px 10px;
+  outline: none;
+}
+.composer input:focus {
+  border-color: var(--border-2);
+}
+.composer input::placeholder {
+  color: var(--faint);
+}
+.composer button {
+  font: 12.5px inherit;
+  color: var(--muted);
+  background: none;
+  border: 0.5px solid var(--border-2);
+  border-radius: 8px;
+  padding: 0 12px;
+  cursor: pointer;
+}
+.composer button:hover {
+  color: var(--text);
+  background: var(--hover);
+}
+.cmt.pending {
+  opacity: 0.55;
+}
+#newPill {
+  position: fixed;
+  left: 50%;
+  bottom: 64px;
+  transform: translateX(-50%);
+  font-family: inherit;
+  font-size: 12.5px;
+  color: var(--accent);
+  background: var(--accent-bg);
+  border: 0.5px solid var(--accent);
+  border-radius: 999px;
+  padding: 6px 14px;
+  cursor: pointer;
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
+  z-index: 40;
+}
+
+.empty {
+  text-align: center;
+  color: var(--faint);
+  padding: 90px 24px;
+}
+#onboard {
+  max-width: 660px;
+  margin: 0 auto;
+  padding: 72px 28px;
+}
+#onboard h1 {
+  font-size: 21px;
+  font-weight: 500;
+  margin: 0 0 6px;
+}
+#onboard .sub {
+  color: var(--muted);
+  font-size: 14.5px;
+  margin: 0 0 32px;
+}
+#onboard h2 {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--muted);
+  margin: 26px 0 8px;
+  text-transform: lowercase;
+  letter-spacing: 0.02em;
+}
+.snip {
+  position: relative;
+  background: var(--surface);
+  border: 0.5px solid var(--border);
+  border-radius: 10px;
+  padding: 12px 44px 12px 14px;
+  font:
+    12.5px/1.6 ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    monospace;
+  color: var(--text);
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+.snip .copy {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  font:
+    11.5px -apple-system,
+    sans-serif;
+  color: var(--faint);
+  background: var(--bg);
+  border: 0.5px solid var(--border);
+  border-radius: 6px;
+  padding: 3px 8px;
+  cursor: pointer;
+}
+.snip .copy:hover {
+  color: var(--text);
+}
+
+/* phone widths: the sidebar becomes an off-canvas drawer behind a slim
+   top bar; the stream keeps the full width */
+.topbar {
+  display: none;
+}
+#scrim {
+  display: none;
+}
+@media (max-width: 700px) {
+  #app {
+    flex-direction: column;
+  }
+  .topbar {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    flex: none;
+    padding: 8px 10px;
+    background: var(--panel);
+    border-bottom: 0.5px solid var(--border);
+  }
+  .topbar .brand {
+    padding: 0;
+  }
+  .topbar .menu {
+    position: relative;
+    font-size: 17px;
+    line-height: 1;
+    color: var(--muted);
+    background: none;
+    border: none;
+    border-radius: 8px;
+    padding: 6px 9px;
+    cursor: pointer;
+    font-family: inherit;
+  }
+  .topbar .menu:hover {
+    color: var(--text);
+    background: var(--hover);
+  }
+  .topbar .menu .dot {
+    position: absolute;
+    top: 3px;
+    right: 4px;
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background: var(--accent);
+    display: none;
+  }
+  .topbar .menu .dot.show {
+    display: block;
+  }
+  aside {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 30;
+    width: min(280px, 84vw);
+    transform: translateX(-105%);
+    transition: transform 0.2s ease;
+  }
+  body.nav-open aside {
+    transform: none;
+    box-shadow: 0 0 32px rgba(0, 0, 0, 0.25);
+  }
+  #scrim {
+    display: block;
+    position: fixed;
+    inset: 0;
+    z-index: 25;
+    background: rgba(0, 0, 0, 0.35);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.2s;
+  }
+  body.nav-open #scrim {
+    opacity: 1;
+    pointer-events: auto;
+  }
+  main {
+    min-height: 0;
+  }
+  .session-head {
+    padding: 12px 16px 10px;
+  }
+  #stream {
+    padding: 16px 14px 120px;
+  }
+  #onboard {
+    padding: 40px 18px;
+  }
+  .card-title {
+    min-width: 0;
+    flex: 0 1 auto;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+/* narrow or touch: hover-revealed actions must stay reachable */
+@media (max-width: 700px), (hover: none) {
+  .card-head .act {
+    opacity: 1;
+  }
+  .sess .x {
+    opacity: 1;
+  }
+  .sess-title {
+    padding-right: 44px;
+  }
+  .sess .dot {
+    right: 32px;
+  }
+}
+
+#toast {
+  position: fixed;
+  left: 50%;
+  bottom: 26px;
+  transform: translateX(-50%) translateY(8px);
+  background: var(--surface);
+  border: 0.5px solid var(--border-2);
+  border-radius: 10px;
+  padding: 9px 14px;
+  font-size: 13px;
+  max-width: 600px;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
+  opacity: 0;
+  pointer-events: none;
+  transition:
+    opacity 0.2s,
+    transform 0.2s;
+  z-index: 50;
+}
+#toast.show {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0);
+  pointer-events: auto;
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..b4a7618
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,15 @@
+import { defineConfig } from "vite";
+import { viteSingleFile } from "vite-plugin-singlefile";
+import solid from "vite-plugin-solid";
+
+// Builds viewer/ into a single self-contained viewer/dist/index.html — the
+// server keeps serving the viewer as one in-memory document on both runtimes
+// (Node readFile, Workers Text-rule import), so no static-asset routes exist.
+export default defineConfig({
+  root: "viewer",
+  plugins: [solid(), viteSingleFile()],
+  build: {
+    target: "es2022",
+    emptyOutDir: true,
+  },
+});
diff --git a/workers/index.ts b/workers/index.ts
index 9686778..cde54d6 100644
--- a/workers/index.ts
+++ b/workers/index.ts
@@ -2,7 +2,7 @@ import { DurableObject } from "cloudflare:workers";
 import setupText from "../guide/AGENT_SETUP.md";
 import guideMarkdown from "../guide/DESIGN_GUIDE.md";
 import { createApp } from "../server/app.ts";
-import viewerHtml from "../viewer/index.html";
+import viewerHtml from "../viewer/dist/index.html";
 import { SqlStore } from "./sqlStore.ts";
 
 interface Env {