castle-web-cli 0.4.64 → 0.4.65

package/dist/ide.js

@@ -1,26 +1,61 @@
-// IDE panel for `castle-web serve --ide`: a desktop split view with the deck
-// in an iframe on the left and an xterm.js terminal on the right. The terminal
-// attaches to a PTY (a login shell) running in the deck directory, so an agent
-// CLI can be driven right next to the live deck.
+// IDE backend for `castle-web serve`: serves the shell UI (a dockview workspace
+// bundled from `src/shell/` into `dist/shell/`) and runs the terminal panel's
+// PTY. The deck loads in an iframe inside the shell; an agent CLI can be driven
+// in the terminal panel right next to the live deck.
 //
 // Backend pattern ported from castle-cli's `ide` branch: @lydell/node-pty for
 // the PTY, an @xterm/headless screen + @xterm/addon-serialize so a reconnecting
 // client gets a full replay of the current screen + scrollback.
 import * as fs from "fs";
 import * as path from "path";
-import { createRequire } from "module";
 import { fileURLToPath } from "url";
 import { spawn as spawnPty } from "@lydell/node-pty";
 import headlessPkg from "@xterm/headless";
 import { SerializeAddon } from "@xterm/addon-serialize";
 import { WebSocketServer } from "ws";
 const HeadlessTerminal = headlessPkg.Terminal;
-const require_ = createRequire(import.meta.url);
 const DIST_DIR = path.dirname(fileURLToPath(import.meta.url));
+// The bundled shell app (vite build output). `/` serves its index.html and
+// `/__castle/ide/<asset>` serves its hashed bundle assets (the vite `base`).
+const SHELL_DIR = path.join(DIST_DIR, "shell");
 const PTY_TERM = "xterm-256color";
 const INITIAL_COLS = 80;
 const INITIAL_ROWS = 24;
 const SCROLLBACK = 4000;
+const SHELL_MIME = {
+    ".html": "text/html; charset=utf-8",
+    ".js": "text/javascript; charset=utf-8",
+    ".mjs": "text/javascript; charset=utf-8",
+    ".css": "text/css; charset=utf-8",
+    ".json": "application/json; charset=utf-8",
+    ".svg": "image/svg+xml",
+    ".png": "image/png",
+    ".jpg": "image/jpeg",
+    ".woff": "font/woff",
+    ".woff2": "font/woff2",
+    ".ttf": "font/ttf",
+    ".map": "application/json; charset=utf-8",
+};
+// Serve a file from the bundled shell dir, guarding against path traversal.
+function serveShellFile(res, asset) {
+    const rel = path.normalize(asset).replace(/^(\.\.[/\\])+/, "");
+    const filePath = path.join(SHELL_DIR, rel);
+    if (!filePath.startsWith(SHELL_DIR + path.sep) &&
+        filePath !== path.join(SHELL_DIR, "index.html")) {
+        res.writeHead(404).end();
+        return true;
+    }
+    if (!fs.existsSync(filePath) || !fs.statSync(filePath).isFile()) {
+        res.writeHead(404).end();
+        return true;
+    }
+    res.writeHead(200, {
+        "content-type": SHELL_MIME[path.extname(filePath)] ?? "application/octet-stream",
+        "cache-control": "no-store",
+    });
+    fs.createReadStream(filePath).pipe(res);
+    return true;
+}
 // The split-view shell is served at the deck root `/` (the deck itself moves
 // into the iframe at `/index.html`); `/__castle/ide/<asset>` are the shell's
 // static assets; `/__castle/pty` is the PTY WebSocket (handled via a direct
@@ -97,7 +132,7 @@ function broadcast(session, body) {
 // Returns a handler for the IDE page + assets + the PTY WebSocket upgrade. The
 // PTY runs a login shell in `deckDir`; it spawns lazily on first connection.
 export function createIdeServer(opts) {
-    const { deckDir, deckLabel } = opts;
+    const { deckDir } = opts;
     let session = null;
     function spawnSession() {
         const { command, args } = defaultShell();
@@ -228,28 +263,11 @@ export function createIdeServer(opts) {
         return true;
     }
     function handleHttpRequest(_req, res, reqPath) {
-        if (reqPath === "/") {
-            const html = renderIdePage(deckLabel);
-            res.writeHead(200, {
-                "content-type": "text/html; charset=utf-8",
-                "cache-control": "no-store",
-            });
-            res.end(html);
-            return true;
-        }
+        // `/` -> the shell's index.html; `/__castle/ide/<asset>` -> bundle assets.
+        if (reqPath === "/")
+            return serveShellFile(res, "index.html");
         if (reqPath.startsWith(IDE_ASSET_PREFIX)) {
-            const asset = reqPath.slice(IDE_ASSET_PREFIX.length);
-            const resolved = resolveIdeAsset(asset);
-            if (!resolved) {
-                res.writeHead(404).end();
-                return true;
-            }
-            res.writeHead(200, {
-                "content-type": resolved.contentType,
-                "cache-control": "no-store",
-            });
-            fs.createReadStream(resolved.filePath).pipe(res);
-            return true;
+            return serveShellFile(res, reqPath.slice(IDE_ASSET_PREFIX.length) || "index.html");
         }
         return false;
     }
@@ -274,625 +292,3 @@ export function createIdeServer(opts) {
     }
     return { handleHttpRequest, handleUpgrade, shutdown };
 }
-// Map an IDE asset name to a file on disk. xterm + addon-fit come straight from
-// node_modules (UMD builds); the terminal client is compiled alongside this
-// file by tsc into the same dist directory.
-function resolveIdeAsset(asset) {
-    const assets = {
-        "xterm.js": {
-            spec: "@xterm/xterm/lib/xterm.js",
-            contentType: "text/javascript; charset=utf-8",
-        },
-        "xterm.css": {
-            spec: "@xterm/xterm/css/xterm.css",
-            contentType: "text/css; charset=utf-8",
-        },
-        "addon-fit.js": {
-            spec: "@xterm/addon-fit/lib/addon-fit.js",
-            contentType: "text/javascript; charset=utf-8",
-        },
-    };
-    const fromModule = assets[asset];
-    if (fromModule) {
-        try {
-            return {
-                filePath: require_.resolve(fromModule.spec),
-                contentType: fromModule.contentType,
-            };
-        }
-        catch {
-            return null;
-        }
-    }
-    // React's package "exports" hides umd/ from require.resolve; resolve the
-    // package root via its package.json (always exported) and join from there.
-    const umdAssets = {
-        "react.js": { pkg: "react", rel: "umd/react.production.min.js" },
-        "react-dom.js": {
-            pkg: "react-dom",
-            rel: "umd/react-dom.production.min.js",
-        },
-        "marked.js": { pkg: "marked", rel: "lib/marked.umd.js" },
-    };
-    const fromUmd = umdAssets[asset];
-    if (fromUmd) {
-        try {
-            const pkgRoot = path.dirname(require_.resolve(`${fromUmd.pkg}/package.json`));
-            const filePath = path.join(pkgRoot, fromUmd.rel);
-            return fs.existsSync(filePath)
-                ? { filePath, contentType: "text/javascript; charset=utf-8" }
-                : null;
-        }
-        catch {
-            return null;
-        }
-    }
-    if (asset === "ide-client.js" || asset === "chat-client.js") {
-        const filePath = path.join(DIST_DIR, asset);
-        return fs.existsSync(filePath)
-            ? { filePath, contentType: "text/javascript; charset=utf-8" }
-            : null;
-    }
-    return null;
-}
-// Lucide glyphs; currentColor so the button :hover styles drive them. The
-// panel toggle reads as "building" (hammer), not terminal -- the terminal is
-// just one view inside the panel.
-const HAMMER_ICON_SVG = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 12-8.373 8.373a1 1 0 1 1-3-3L12 9" /><path d="m18 15 4-4" /><path d="m21.5 11.5-1.914-1.914A2 2 0 0 1 19 8.172V7l-2.26-2.26a6 6 0 0 0-4.202-1.756L9 2.96l.92.82A6.18 6.18 0 0 1 12 8.4V10l2 2h1.172a2 2 0 0 1 1.414.586L18.5 14.5" /></svg>`;
-const COG_ICON_SVG = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" /><circle cx="12" cy="12" r="3" /></svg>`;
-const IDE_STYLES = `
-  :root { color-scheme: light; }
-  * { box-sizing: border-box; }
-  html, body { height: 100%; margin: 0; }
-  body {
-    /* Header-strip height. The deck's editor header is 48px, but drops to the
-       52px responsive variant once the deck iframe is below 860px wide -- which
-       it is whenever the terminal is open at a viewport under 1360px. Track
-       that so the terminal header strip and its buttons line up with the deck's
-       editor header beside it. */
-    --term-header-h: 48px;
-    background: #ffffff;
-    color: #1f2328;
-    /* Same stack as the kit editor (engine/ui.module.css --castle-font-body)
-       so the shell + chat read as one app with the deck's editor. */
-    font-family: baltomobile, Balto, ui-sans-serif, system-ui, -apple-system,
-      BlinkMacSystemFont, 'Segoe UI', sans-serif;
-    display: flex;
-    overflow: hidden;
-  }
-  @media (max-width: 1360px) {
-    body.term-open { --term-header-h: 52px; }
-  }
-  #deck {
-    flex: 1 1 0;
-    min-width: 0;
-    background: #f5f5f5;
-    border-right: 1px solid #e1e4e8;
-  }
-  #deck iframe { width: 100%; height: 100%; border: 0; display: block; }
-  /* The terminal panel is a flex column: a fixed-height header strip on top,
-     and the xterm host taking exactly the leftover height below it. */
-  #term {
-    flex: 1 1 500px;
-    max-width: 500px;
-    min-width: 320px;
-    background: #ffffff;
-    display: flex;
-    flex-direction: column;
-  }
-  body.term-dark #term { background: #1a1b26; }
-  /* Panel content area below the header. The chat view and the terminal view
-     are both mounted, absolutely filling it; the inactive one is lifted to
-     visibility:hidden (not display:none) so xterm keeps its measured layout
-     -- same trick as the closed-panel state below. */
-  #panel-body {
-    flex: 1 1 0;
-    min-height: 0;
-    position: relative;
-  }
-  #term-host {
-    position: absolute;
-    inset: 0;
-    padding: 6px;
-    overscroll-behavior: contain;
-  }
-  body:not(.term-view) #term-host { visibility: hidden; }
-  #chat-host {
-    position: absolute;
-    inset: 0;
-    display: flex;
-    flex-direction: column;
-  }
-  body.term-view #chat-host { visibility: hidden; }
-
-  /* Header strip for the terminal panel -- mirrors the deck's editor header
-     (same height, 1px bottom border, white background, 16px title). A real
-     flex item at the top of the panel; only shown while the terminal is open
-     (when closed the panel is hidden and the deck is full width). */
-  #term-header {
-    flex: 0 0 var(--term-header-h);
-    height: var(--term-header-h);
-    display: none;
-    align-items: center;
-    gap: 8px;
-    padding: 10px 12px;
-    background: #ffffff;
-    border-bottom: 1px solid #cccccc;
-  }
-  body.term-open #term-header { display: flex; }
-  body.term-dark #term-header { background: #1a1b26; border-bottom-color: #2a2c3d; }
-
-  /* Terminal hidden: the panel stays mounted at its full 500px size (so xterm
-     keeps its measured layout) -- just lifted out of flow and made invisible,
-     and the deck takes the whole width. */
-  body:not(.term-open) #deck { border-right: 0; }
-  body:not(.term-open) #term {
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 500px;
-    height: 100%;
-    visibility: hidden;
-  }
-
-  /* Toggle button: always pinned top-right above both the deck and the
-     terminal. Styling is copied from the editor-demo header icon buttons
-     (34px square, 1px solid #000, 4px radius, drop shadow) so it reads as a
-     header button when it overlays a header bar. Vertically centered in the
-     header strip -- (header-h - 34) / 2 -- which tracks the deck's editor
-     header height, so it sits centered whether the terminal is open or not. */
-  #term-toggle {
-    position: fixed;
-    top: calc((var(--term-header-h) - 34px) / 2);
-    right: 7px;
-    z-index: 2147483000;
-    width: 34px;
-    height: 34px;
-    padding: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: #ffffff;
-    color: #222222;
-    border: 1px solid #000000;
-    border-radius: 4px;
-    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
-    cursor: pointer;
-  }
-  #term-toggle:hover { background: #eeeeee; }
-  #term-toggle svg { width: 16px; height: 16px; display: block; }
-
-  /* Settings cog: same button style, sits just left of the toggle. Only
-     present while the terminal is open. */
-  #term-settings {
-    position: fixed;
-    top: calc((var(--term-header-h) - 34px) / 2);
-    right: 47px;
-    z-index: 2147483000;
-    width: 34px;
-    height: 34px;
-    padding: 0;
-    display: none;
-    align-items: center;
-    justify-content: center;
-    background: #ffffff;
-    color: #222222;
-    border: 1px solid #000000;
-    border-radius: 4px;
-    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
-    cursor: pointer;
-  }
-  body.term-open #term-settings { display: flex; }
-  #term-settings:hover { background: #eeeeee; }
-  #term-settings svg { width: 16px; height: 16px; display: block; }
-
-  /* Settings popover: flat, opaque, anchored under the buttons. */
-  #term-settings-panel {
-    position: fixed;
-    top: var(--term-header-h);
-    right: 7px;
-    z-index: 2147483000;
-    display: none;
-    width: 300px;
-    padding: 10px 12px;
-    background: #ffffff;
-    color: #222222;
-    border: 1px solid #000000;
-    border-radius: 4px;
-    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
-    font-size: 13px;
-  }
-  #term-settings-panel .row > span { white-space: nowrap; }
-  body.term-settings-open #term-settings-panel { display: block; }
-  #term-settings-panel .row {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 10px;
-  }
-  #term-settings-panel .row + .row { margin-top: 8px; }
-  /* Shared segmented control -- the settings popover rows and the panel
-     header's chat | terminal switch. */
-  .seg {
-    display: flex;
-    border: 1px solid #000000;
-    border-radius: 4px;
-    overflow: hidden;
-  }
-  .seg button {
-    padding: 5px 12px;
-    font: inherit;
-    font-size: 14px;
-    background: #ffffff;
-    color: #222222;
-    border: 0;
-    cursor: pointer;
-  }
-  .seg button + button { border-left: 1px solid #000000; }
-  .seg button.active { background: #222222; color: #ffffff; }
-  body.term-dark #term-header .seg { border-color: #2a2c3d; }
-  body.term-dark #term-header .seg button { background: #1a1b26; color: #c0caf5; }
-  body.term-dark #term-header .seg button + button { border-left-color: #2a2c3d; }
-  body.term-dark #term-header .seg button.active { background: #c0caf5; color: #1a1b26; }
-
-  /* -- Agent chat view ----------------------------------------------------
-     Matches the editor chrome: Inter, 13px, 1px #e1e4e8 borders, small radii,
-     no shadows. */
-  #chat-messages {
-    flex: 1 1 0;
-    min-height: 0;
-    overflow-y: auto;
-    padding: 14px 14px 8px;
-    display: flex;
-    flex-direction: column;
-    gap: 14px;
-    /* Sits between the deck editor's desktop (16px) and narrow (13-14px)
-       text sizes -- the iframe crosses that breakpoint as panes resize. */
-    font-size: 15px;
-    line-height: 1.45;
-    /* Hide the scrollbar (Windows draws a persistent one; macOS auto-hides). */
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-  }
-  #chat-messages::-webkit-scrollbar { width: 0; height: 0; }
-  #chat-empty { color: #6e7781; }
-  .msg-activity {
-    color: #6e7781;
-    font-size: 12px;
-    margin-top: 6px;
-    animation: chat-pulse 1.4s ease-in-out infinite;
-  }
-  @keyframes chat-pulse { 50% { opacity: 0.35; } }
-  .msg-interrupted { color: #6e7781; font-size: 12px; margin-top: 6px; }
-  .msg-log {
-    color: #6e7781;
-    font-size: 13px;
-    padding: 0 2px;
-  }
-  .msg-text { word-break: break-word; }
-  .msg-user .msg-text { white-space: pre-wrap; }
-  /* Markdown content (assistant replies + task notes). */
-  .msg-text > :first-child, .task-notes > :first-child { margin-top: 0; }
-  .msg-text > :last-child, .task-notes > :last-child { margin-bottom: 0; }
-  .msg-text p, .task-notes p { margin: 0.55em 0; }
-  .msg-text ul, .msg-text ol, .task-notes ul, .task-notes ol {
-    margin: 0.55em 0;
-    padding-left: 1.4em;
-  }
-  .msg-text li { margin: 0.15em 0; }
-  .msg-text h1, .msg-text h2, .msg-text h3, .msg-text h4 {
-    font-size: 1em;
-    margin: 0.7em 0 0.35em;
-  }
-  .msg-text code, .task-notes code {
-    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
-    font-size: 0.85em;
-    background: #f2f4f7;
-    border-radius: 3px;
-    padding: 1px 4px;
-  }
-  .msg-text pre {
-    background: #f6f8fa;
-    border: 1px solid #e1e4e8;
-    border-radius: 4px;
-    padding: 8px 10px;
-    overflow-x: auto;
-    margin: 0.55em 0;
-  }
-  .msg-text pre code { background: none; padding: 0; }
-  .msg-image {
-    display: block;
-    max-width: 220px;
-    max-height: 150px;
-    border: 1px solid #cccccc;
-    border-radius: 4px;
-    margin-top: 6px;
-  }
-  .msg-user { align-self: flex-end; max-width: 85%; }
-  .msg-user .msg-text {
-    background: #f2f4f7;
-    border: 1px solid #cccccc;
-    border-radius: 4px;
-    padding: 8px 10px;
-  }
-  /* Each agent turn is its own bordered card -- turn boundaries read at a
-     glance instead of running together as one wall of text. */
-  .msg-assistant {
-    align-self: stretch;
-    border: 1px solid #cccccc;
-    border-radius: 4px;
-    background: #ffffff;
-    padding: 8px 10px;
-  }
-  .msg-assistant.streaming .msg-text::after {
-    content: '\\258c';
-    opacity: 0.5;
-    animation: chat-blink 1s steps(1) infinite;
-  }
-  @keyframes chat-blink { 50% { opacity: 0; } }
-  .msg-error .msg-text { color: #a40e26; }
-  .task-card {
-    border: 1px solid #e1e4e8;
-    border-radius: 6px;
-    padding: 7px 10px;
-    cursor: pointer;
-  }
-  .task-card.waiting { opacity: 0.6; }
-  /* A finished task's filled pie IS the check-off control -- click it to
-     clear the row. Visible even in bar mode (the bar has no icon to click). */
-  .task-ack-pie { cursor: pointer; }
-  .task-ack-pie:hover { box-shadow: 0 0 0 2px #cfe0ff; }
-  body.progress-bars .task-pie.task-ack-pie { display: block; }
-  .task-notes {
-    margin-top: 6px;
-    color: #57606a;
-    word-break: break-word;
-    font-size: 14px;
-  }
-  /* Live stream of a running task agent (text lines + [tool labels]) shown
-     on expand -- capped height, auto-scrolled, fading at both scroll edges. */
-  .task-feed-tool {
-    padding-left: 14px;
-    color: #8c959f;
-    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-    font-size: 11px;
-  }
-  .task-feed-msg > :first-child { margin-top: 0; }
-  .task-feed-msg > :last-child { margin-bottom: 0; }
-  .task-feed-msg p { margin: 0.25em 0; }
-  .task-feed-msg code {
-    background: rgba(175, 184, 193, 0.2);
-    border-radius: 3px;
-    padding: 0 3px;
-    font-size: 11px;
-  }
-  .task-feed {
-    margin-top: 6px;
-    max-height: 65px;
-    overflow-y: auto;
-    /* Hide the scrollbar (Windows draws a persistent one; macOS auto-hides). */
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-    font-size: 12px;
-    line-height: 1.5;
-    color: #57606a;
-    cursor: default;
-    word-break: break-word;
-    -webkit-mask-image: linear-gradient(
-      to bottom,
-      transparent,
-      #000000 5px,
-      #000000 100%
-    );
-    mask-image: linear-gradient(to bottom, transparent, #000000 5px, #000000 100%);
-  }
-  .task-feed::-webkit-scrollbar { width: 0; height: 0; }
-  .task-row { display: flex; align-items: center; gap: 8px; }
-  .task-title {
-    flex: 1 1 auto;
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  .task-title::first-letter { text-transform: uppercase; }
-  .task-status { color: #6e7781; font-size: 12px; flex: 0 0 auto; }
-  .task-status.failed, .task-status.interrupted { color: #a40e26; }
-  .task-time { color: #6e7781; font-size: 12px; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
-  .task-pie {
-    width: 15px;
-    height: 15px;
-    border-radius: 50%;
-    flex: 0 0 15px;
-    border: 1px solid #d0d7de;
-  }
-  .task-bar { display: none; margin-top: 6px; height: 3px; border-radius: 2px; background: #eaeef2; overflow: hidden; }
-  .task-bar > div { height: 100%; background: #0969da; }
-  body.progress-bars .task-bar { display: block; }
-  body.progress-bars .task-pie { display: none; }
-  /* The task board: pinned above the conversation, one row per task until
-     the user checks it off. Grows freely -- hiding tasks behind a scroll
-     made them too easy to forget. Same text size as the chat. */
-  #chat-strip {
-    flex: 0 0 auto;
-    border-bottom: 1px solid #cccccc;
-    padding: 8px 14px;
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    font-size: 15px;
-    background: #f2f4f7;
-  }
-  .task-card { background: #ffffff; }
-  /* Input row styled like the kit editor's inspector controls: 1px black
-     borders, 4px radius, same text size; the button matches the kit .button
-     (subtle drop shadow). */
-  #chat-input-row {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: stretch;
-    gap: 8px;
-    padding: 10px 14px;
-    border-top: 1px solid #cccccc;
-  }
-  #chat-input {
-    flex: 1 1 auto;
-    resize: none;
-    font: inherit;
-    font-size: 15px;
-    line-height: 1.4;
-    border: 1px solid #000000;
-    border-radius: 4px;
-    padding: 5px 8px;
-    outline: none;
-    max-height: 120px;
-    background: #ffffff;
-    color: #222222;
-    /* Hide the scrollbar (Windows draws a persistent one; macOS auto-hides). */
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-  }
-  #chat-input::-webkit-scrollbar { width: 0; height: 0; }
-  #chat-send {
-    font: inherit;
-    font-size: 15px;
-    padding: 6px 10px;
-    border: 1px solid #000000;
-    border-radius: 4px;
-    background: #ffffff;
-    color: #222222;
-    cursor: pointer;
-    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
-  }
-  #chat-send:hover { background: #eeeeee; }
-  /* Pending image attachments (pasted or picked) shown as chips above the
-     input; click a chip to remove it. */
-  #chat-pending {
-    flex: 0 0 auto;
-    display: flex;
-    gap: 6px;
-    padding: 8px 14px 0;
-    border-top: 1px solid #cccccc;
-  }
-  #chat-pending img {
-    height: 44px;
-    border: 1px solid #cccccc;
-    border-radius: 4px;
-    cursor: pointer;
-  }
-  #chat-pending + #chat-input-row { border-top: 0; }
-
-  /* Let the xterm light theme show through, and hide every scrollbar xterm
-     can draw -- the native viewport one AND the renderer overlay one. */
-  .xterm, .xterm-viewport, .xterm-screen, .xterm-helpers {
-    background-color: transparent !important;
-  }
-  .xterm { overscroll-behavior: contain; }
-  .xterm-viewport {
-    overscroll-behavior: contain;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-  }
-  .xterm-viewport::-webkit-scrollbar { width: 0; height: 0; }
-  .xterm .xterm-scrollable-element > .scrollbar,
-  .xterm .xterm-scrollable-element > .scrollbar.visible,
-  .xterm .xterm-scrollable-element > .visible.scrollbar,
-  .xterm .xterm-scrollable-element > .invisible.scrollbar,
-  .xterm .xterm-scrollable-element > .xterm-scrollbar {
-    display: none !important;
-    width: 0 !important;
-    height: 0 !important;
-    min-width: 0 !important;
-    min-height: 0 !important;
-    opacity: 0 !important;
-    pointer-events: none !important;
-  }
-  .xterm .xterm-scrollable-element > .scrollbar > .slider,
-  .xterm .xterm-scrollable-element > .scrollbar > .scra,
-  .xterm .xterm-scrollable-element > .xterm-scrollbar > .xterm-slider {
-    display: none !important;
-    width: 0 !important;
-    height: 0 !important;
-  }
-  .xterm .xterm-scrollable-element > .shadow { display: none !important; }
-`;
-const IDE_BODY = `
-<button id="term-settings" type="button" tabindex="-1" title="panel settings" aria-label="panel settings">${COG_ICON_SVG}</button>
-<button id="term-toggle" type="button" tabindex="-1" title="toggle panel" aria-label="toggle panel">${HAMMER_ICON_SVG}</button>
-<div id="term-settings-panel">
-  <div class="row">
-    <span>Router agent</span>
-    <div class="seg" id="agent-router-seg">
-      <button type="button" tabindex="-1" data-backend="cursor">Cursor</button>
-      <button type="button" tabindex="-1" data-backend="claude">Claude</button>
-    </div>
-  </div>
-  <div class="row">
-    <span>Task agents</span>
-    <div class="seg" id="agent-tasks-seg">
-      <button type="button" tabindex="-1" data-backend="cursor">Cursor</button>
-      <button type="button" tabindex="-1" data-backend="claude">Claude</button>
-    </div>
-  </div>
-  <div class="row">
-    <span>Claude model</span>
-    <div class="seg" id="agent-model-seg">
-      <button type="button" tabindex="-1" data-model="sonnet">Sonnet</button>
-      <button type="button" tabindex="-1" data-model="opus">Opus</button>
-      <button type="button" tabindex="-1" data-model="fable">Fable</button>
-    </div>
-  </div>
-  <div class="row">
-    <span>Progress</span>
-    <div class="seg" id="chat-progress-seg">
-      <button type="button" tabindex="-1" data-progress="pie">Pie</button>
-      <button type="button" tabindex="-1" data-progress="bar">Bar</button>
-    </div>
-  </div>
-  <div class="row">
-    <span>Terminal theme</span>
-    <div class="seg" id="term-theme-seg">
-      <button type="button" tabindex="-1" data-theme="light">Light</button>
-      <button type="button" tabindex="-1" data-theme="dark">Dark</button>
-    </div>
-  </div>
-</div>
-<div id="deck"><iframe id="deck-frame" src="/index.html" title="deck" allow="autoplay; clipboard-read; clipboard-write; fullscreen; gamepad"></iframe></div>
-<div id="term">
-  <div id="term-header">
-    <div class="seg" id="panel-view-seg">
-      <button type="button" tabindex="-1" data-view="chat">Chat</button>
-      <button type="button" tabindex="-1" data-view="terminal">Terminal</button>
-    </div>
-  </div>
-  <div id="panel-body">
-    <div id="chat-host"></div>
-    <div id="term-host"></div>
-  </div>
-</div>
-<script src="${IDE_ASSET_PREFIX}xterm.js"></script>
-<script src="${IDE_ASSET_PREFIX}addon-fit.js"></script>
-<script src="${IDE_ASSET_PREFIX}react.js"></script>
-<script src="${IDE_ASSET_PREFIX}react-dom.js"></script>
-<script src="${IDE_ASSET_PREFIX}marked.js"></script>
-<script type="module" src="${IDE_ASSET_PREFIX}chat-client.js"></script>
-<script type="module" src="${IDE_ASSET_PREFIX}ide-client.js"></script>
-`;
-function renderIdePage(deckLabel) {
-    const title = `${deckLabel} -- Castle Editor`;
-    return `<!doctype html>
-<html lang="en">
-<head>
-<meta charset="utf-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1" />
-<title>${escapeHtml(title)}</title>
-<link rel="stylesheet" href="${IDE_ASSET_PREFIX}xterm.css" />
-<style>${IDE_STYLES}</style>
-</head>
-<body class="term-open">${IDE_BODY}</body>
-</html>
-`;
-}
-function escapeHtml(value) {
-    return value.replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c] ?? c);
-}