@codeyam/codeyam-cli 0.1.0-staging.9574237 → 0.1.0-staging.a2f381a

package/codeyam-cli/src/webserver/build/server/index.js

@@ -1 +1 @@
-import{aG as Z,aH as _,aw as $,ax as rr,aE as tr,ay as or,aA as ir,aB as pr,aD as mr,aC as ar,aF as sr,az as er}from"./assets/server-build-BUKVjBSZ.js";import"react/jsx-runtime";import"node:stream";import"@react-router/node";import"react-router";import"isbot";import"react-dom/server";import"react";import"lucide-react";import"fetch-retry";import"better-sqlite3";import"pg";import"fs";import"path";import"kysely";import"kysely/helpers/sqlite";import"kysely/helpers/postgres";import"typescript";import"fs/promises";import"os";import"prompts";import"chalk";import"crypto";import"child_process";import"url";import"util";import"dotenv";import"events";import"uuid";import"http";import"net";import"ws";import"node-pty";import"openai";import"p-queue";import"p-retry";import"@aws-sdk/client-dynamodb";import"lru-cache";import"pluralize";import"piscina";import"json5";import"@aws-sdk/util-dynamodb";import"v8";import"react-syntax-highlighter";import"react-syntax-highlighter/dist/cjs/styles/prism/index.js";import"node:crypto";import"minimatch";import"react-markdown";import"remark-gfm";import"react-diff-viewer-continued";export{Z as allowedActionOrigins,_ as assets,$ as assetsBuildDirectory,rr as basename,tr as entry,or as future,ir as isSpaMode,pr as prerender,mr as publicPath,ar as routeDiscovery,sr as routes,er as ssr};
+import{aG as Z,aH as _,aw as $,ax as rr,aE as tr,ay as or,aA as ir,aB as pr,aD as mr,aC as ar,aF as sr,az as er}from"./assets/server-build-CNvgz1cC.js";import"react/jsx-runtime";import"node:stream";import"@react-router/node";import"react-router";import"isbot";import"react-dom/server";import"react";import"lucide-react";import"fetch-retry";import"better-sqlite3";import"pg";import"fs";import"path";import"kysely";import"kysely/helpers/sqlite";import"kysely/helpers/postgres";import"typescript";import"fs/promises";import"os";import"prompts";import"chalk";import"crypto";import"child_process";import"url";import"util";import"dotenv";import"events";import"uuid";import"http";import"net";import"ws";import"node-pty";import"openai";import"p-queue";import"p-retry";import"@aws-sdk/client-dynamodb";import"lru-cache";import"pluralize";import"piscina";import"json5";import"@aws-sdk/util-dynamodb";import"v8";import"react-syntax-highlighter";import"react-syntax-highlighter/dist/cjs/styles/prism/index.js";import"node:crypto";import"minimatch";import"react-markdown";import"remark-gfm";import"react-diff-viewer-continued";export{Z as allowedActionOrigins,_ as assets,$ as assetsBuildDirectory,rr as basename,tr as entry,or as future,ir as isSpaMode,pr as prerender,mr as publicPath,ar as routeDiscovery,sr as routes,er as ssr};

package/codeyam-cli/src/webserver/build-info.json

@@ -1,7 +1,7 @@
 {
-  "buildTimestamp": "2026-03-16T19:28:14.810Z",
-  "buildTime": 1773689294810,
-  "buildNumber": 1086,
-  "semanticVersion": "0.1.1086",
-  "version": "0.1.1086 (2026-03-16T19:28)"
+  "buildTimestamp": "2026-04-15T11:36:45.683Z",
+  "buildTime": 1776253005683,
+  "buildNumber": 1378,
+  "semanticVersion": "0.1.1378",
+  "version": "0.1.1378 (2026-04-15T11:36)"
 }

package/codeyam-cli/src/webserver/editorProxy.js

@@ -131,6 +131,42 @@ export const PREVIEW_HEALTH_SCRIPT = `<script data-codeyam-health>
       }).catch(function(){});
     }, 1000);
   });
+
+  // Network-idle detection: notify the parent editor when all initial
+  // fetch requests have completed, so it can show the preview after
+  // client-side data (API calls) has arrived — not just when the DOM loads.
+  var inflight = 0;
+  var settled = false;
+  var settleTimer = null;
+  var origFetch = window.fetch;
+  window.fetch = function() {
+    if (!settled) inflight++;
+    return origFetch.apply(this, arguments).then(function(resp) {
+      if (!settled) { inflight--; checkSettle(); }
+      return resp;
+    }, function(err) {
+      if (!settled) { inflight--; checkSettle(); }
+      throw err;
+    });
+  };
+  function checkSettle() {
+    if (inflight <= 0 && !settled) {
+      clearTimeout(settleTimer);
+      // Small delay to allow React to re-render with the fetched data
+      settleTimer = setTimeout(function() {
+        if (inflight <= 0) {
+          settled = true;
+          try {
+            window.parent.postMessage({ type: 'codeyam-preview-ready' }, '*');
+          } catch(e) {}
+        }
+      }, 100);
+    }
+  }
+  // Fallback: if no fetches happen (static page), settle after load
+  window.addEventListener('load', function() {
+    setTimeout(function() { checkSettle(); }, 200);
+  });
 })();
 </script>`;
 const CACHE_TTL_MS = 500;
@@ -298,6 +334,10 @@ function forwardBufferedRequest(req, res, targetUrl, bodyBuffer) {
     // Remove accept-encoding so the dev server returns uncompressed responses.
     // The proxy injects a health script into HTML — this fails on compressed bodies.
     delete headers['accept-encoding'];
+    // Inject session cookies into the request so the dev server sees auth
+    // on the first request after a scenario switch (before the browser has
+    // stored them from Set-Cookie responses).
+    injectRequestCookies(headers);
     // Update content-length if we have the body buffer
     if (bodyBuffer) {
         headers['content-length'] = String(bodyBuffer.length);
@@ -311,6 +351,9 @@ function forwardBufferedRequest(req, res, targetUrl, bodyBuffer) {
     };
     const proxyReq = http.request(options, (proxyRes) => {
         const status = proxyRes.statusCode || 200;
+        if (status >= 300 && status < 400) {
+            console.log(`[editorProxy] Target redirect ${status} for ${req.method} ${req.url} → ${proxyRes.headers.location}`);
+        }
         if (status >= 400) {
             console.warn(`[editorProxy] Target returned ${status} for ${req.method} ${req.url}`);
         }
@@ -324,27 +367,54 @@ function forwardBufferedRequest(req, res, targetUrl, bodyBuffer) {
             proxyRes.on('data', (chunk) => chunks.push(chunk));
             proxyRes.on('end', () => {
                 const body = Buffer.concat(chunks).toString('utf-8');
-                const lsScript = buildLocalStorageScript(localStorageConfig, activeScenarioId || '', currentPrototypeId);
-                const injected = injectHealthScript(body, lsScript);
                 delete headers['content-length'];
                 delete headers['content-encoding'];
-                // Prevent browser from caching HTML responses — scenario switches
-                // serve different content from the same URL (seed data changes the
-                // rendered page but the proxy URL stays the same).
                 headers['cache-control'] = 'no-store, must-revalidate';
+                // Serve a friendly error page for 5xx responses instead of
+                // forwarding the raw error HTML (e.g. Next.js "Internal Server Error")
+                if (status >= 500) {
+                    const errorPage = buildErrorPage(status, 'Internal Server Error', body);
+                    res.writeHead(status, headers);
+                    res.end(errorPage);
+                    return;
+                }
+                const lsScript = buildLocalStorageScript(localStorageConfig, activeScenarioId || '', currentPrototypeId);
+                const injected = injectHealthScript(body, lsScript);
                 res.writeHead(status, headers);
                 res.end(injected);
             });
             return;
         }
+        // For 5xx responses without a content type or with text/plain,
+        // serve a friendly error page. These are typically broken dev servers
+        // (e.g. Next.js returning bare "Internal Server Error" with no headers).
+        // JSON API errors are left alone — they're legitimate responses.
+        if (status >= 500 && !contentType.includes('application/json')) {
+            const chunks = [];
+            proxyRes.on('data', (chunk) => chunks.push(chunk));
+            proxyRes.on('end', () => {
+                const body = Buffer.concat(chunks).toString('utf-8');
+                const errorPage = buildErrorPage(status, 'Internal Server Error', body);
+                res.writeHead(status, {
+                    'Content-Type': 'text/html',
+                    'Cache-Control': 'no-store',
+                });
+                res.end(errorPage);
+            });
+            return;
+        }
         res.writeHead(status, headers);
         proxyRes.pipe(res, { end: true });
     });
     proxyReq.on('error', (err) => {
         console.warn(`[editorProxy] Forward error for ${req.method} ${req.url}: ${err.message}`);
         if (!res.headersSent) {
-            res.writeHead(502, { 'Content-Type': 'text/plain' });
-            res.end('Bad Gateway — dev server unreachable');
+            const errorPage = buildErrorPage(502, 'Dev Server Unreachable', `The proxy could not connect to the dev server. It may be starting up, restarting, or crashed.\n\n${err.message}`);
+            res.writeHead(502, {
+                'Content-Type': 'text/html',
+                'Cache-Control': 'no-store',
+            });
+            res.end(errorPage);
         }
     });
     if (bodyBuffer && bodyBuffer.length > 0) {
@@ -365,18 +435,25 @@ function forwardRequest(req, res, targetUrl) {
     // Build headers, stripping accept-encoding so the dev server returns uncompressed
     // responses. The proxy injects a health script into HTML — this fails on compressed bodies.
     const { 'accept-encoding': _ae, ...forwardHeaders } = req.headers;
+    const reqHeaders = {
+        ...forwardHeaders,
+        host: `${target.hostname}:${target.port}`,
+    };
+    // Inject session cookies into the request so the dev server sees auth
+    // on the first request after a scenario switch.
+    injectRequestCookies(reqHeaders);
     const options = {
         hostname,
         port: target.port,
         path: req.url,
         method: req.method,
-        headers: {
-            ...forwardHeaders,
-            host: `${target.hostname}:${target.port}`,
-        },
+        headers: reqHeaders,
     };
     const proxyReq = http.request(options, (proxyRes) => {
         const status = proxyRes.statusCode || 200;
+        if (status >= 300 && status < 400) {
+            console.log(`[editorProxy] Target redirect ${status} for ${req.method} ${req.url} → ${proxyRes.headers.location}`);
+        }
         if (status >= 400) {
             console.warn(`[editorProxy] Target returned ${status} for ${req.method} ${req.url}`);
         }
@@ -391,29 +468,54 @@ function forwardRequest(req, res, targetUrl) {
             proxyRes.on('data', (chunk) => chunks.push(chunk));
             proxyRes.on('end', () => {
                 const body = Buffer.concat(chunks).toString('utf-8');
-                const lsScript = buildLocalStorageScript(localStorageConfig, activeScenarioId || '', currentPrototypeId);
-                const injected = injectHealthScript(body, lsScript);
-                // Remove content-length since body size changed; use chunked transfer
                 delete headers['content-length'];
-                // Remove content-encoding since we're serving uncompressed
                 delete headers['content-encoding'];
-                // Prevent browser from caching HTML responses — scenario switches
-                // serve different content from the same URL (seed data changes the
-                // rendered page but the proxy URL stays the same).
                 headers['cache-control'] = 'no-store, must-revalidate';
+                // Serve a friendly error page for 5xx responses instead of
+                // forwarding the raw error HTML (e.g. Next.js "Internal Server Error")
+                if (status >= 500) {
+                    const errorPage = buildErrorPage(status, 'Internal Server Error', body);
+                    res.writeHead(status, headers);
+                    res.end(errorPage);
+                    return;
+                }
+                const lsScript = buildLocalStorageScript(localStorageConfig, activeScenarioId || '', currentPrototypeId);
+                const injected = injectHealthScript(body, lsScript);
                 res.writeHead(status, headers);
                 res.end(injected);
             });
             return;
         }
+        // For 5xx responses without a content type or with text/plain,
+        // serve a friendly error page. These are typically broken dev servers
+        // (e.g. Next.js returning bare "Internal Server Error" with no headers).
+        // JSON API errors are left alone — they're legitimate responses.
+        if (status >= 500 && !contentType.includes('application/json')) {
+            const chunks = [];
+            proxyRes.on('data', (chunk) => chunks.push(chunk));
+            proxyRes.on('end', () => {
+                const body = Buffer.concat(chunks).toString('utf-8');
+                const errorPage = buildErrorPage(status, 'Internal Server Error', body);
+                res.writeHead(status, {
+                    'Content-Type': 'text/html',
+                    'Cache-Control': 'no-store',
+                });
+                res.end(errorPage);
+            });
+            return;
+        }
         res.writeHead(status, headers);
         proxyRes.pipe(res, { end: true });
     });
     proxyReq.on('error', (err) => {
         console.warn(`[editorProxy] Forward error for ${req.method} ${req.url}: ${err.message}`);
         if (!res.headersSent) {
-            res.writeHead(502, { 'Content-Type': 'text/plain' });
-            res.end('Bad Gateway — dev server unreachable');
+            const errorPage = buildErrorPage(502, 'Dev Server Unreachable', `The proxy could not connect to the dev server. It may be starting up, restarting, or crashed.\n\n${err.message}`);
+            res.writeHead(502, {
+                'Content-Type': 'text/html',
+                'Cache-Control': 'no-store',
+            });
+            res.end(errorPage);
         }
     });
     req.pipe(proxyReq, { end: true });
@@ -456,6 +558,65 @@ function injectSessionCookie(headers) {
         headers['set-cookie'] = cookies;
     }
 }
+/**
+ * Get session cookies that should be injected into requests forwarded to the
+ * dev server. Returns an array of {name, value} pairs, or null if no session
+ * cookies are configured.
+ *
+ * This is the counterpart to `injectSessionCookie()` (which adds Set-Cookie
+ * to responses). Without request-side injection, the first request after a
+ * scenario switch has no cookies — the dev server's auth middleware sees no
+ * session and redirects to the login page before the browser ever receives
+ * the Set-Cookie response.
+ */
+export function getRequestCookieInjection() {
+    const cookies = [];
+    if (sessionConfig?.cookieValue) {
+        cookies.push({ name: 'session-token', value: sessionConfig.cookieValue });
+    }
+    if (seedSessionCookies && seedSessionCookies.length > 0) {
+        for (const sc of seedSessionCookies) {
+            cookies.push({ name: sc.name, value: sc.value });
+        }
+    }
+    return cookies.length > 0 ? cookies : null;
+}
+/**
+ * Inject session cookies into the request's Cookie header before forwarding
+ * to the dev server. This ensures the dev server sees auth cookies on the
+ * very first request after a scenario switch (before the browser has stored
+ * them from Set-Cookie responses).
+ */
+function injectRequestCookies(headers) {
+    const injection = getRequestCookieInjection();
+    if (!injection)
+        return;
+    // Parse existing cookies from the request
+    const existing = typeof headers.cookie === 'string' ? headers.cookie : '';
+    const existingPairs = existing
+        ? existing.split(';').map((s) => s.trim())
+        : [];
+    // Build a map of existing cookies for deduplication
+    const cookieMap = new Map();
+    for (const pair of existingPairs) {
+        const eqIdx = pair.indexOf('=');
+        if (eqIdx !== -1) {
+            cookieMap.set(pair.slice(0, eqIdx), pair.slice(eqIdx + 1));
+        }
+    }
+    // Override with injected cookies
+    for (const { name, value } of injection) {
+        cookieMap.set(name, value);
+    }
+    // Reassemble
+    const parts = [];
+    for (const [k, v] of cookieMap) {
+        parts.push(`${k}=${v}`);
+    }
+    if (parts.length > 0) {
+        headers.cookie = parts.join('; ');
+    }
+}
 /**
  * Get the current session config (for testing).
  */
@@ -480,6 +641,17 @@ export function getActiveScenarioId() {
 export function getCurrentPrototypeId() {
     return currentPrototypeId;
 }
+/**
+ * Simple djb2 hash — fast, deterministic, good enough for cache busting.
+ * Not cryptographic — just detects when localStorage config content changes.
+ */
+function simpleHash(str) {
+    let hash = 5381;
+    for (let i = 0; i < str.length; i++) {
+        hash = ((hash << 5) + hash + str.charCodeAt(i)) | 0;
+    }
+    return (hash >>> 0).toString(36);
+}
 /**
  * Build a script tag that seeds localStorage with scenario data on first load.
  * Gated by scenario ID — only seeds when the scenario changes, preserving
@@ -488,10 +660,13 @@ export function getCurrentPrototypeId() {
  * Returns empty string if no localStorage config is provided.
  */
 export function buildLocalStorageScript(localStorageConfig, scenarioId, prototypeId) {
-    // null/undefined means no localStorage config at all — but if we have a
-    // prototypeId, emit a one-time localStorage.clear() to flush stale data
-    // from a previous prototype session.
+    // null/undefined means no localStorage config at all — clean up keys
+    // that were set by a previous scenario so stale filter/sort state
+    // doesn't bleed through and hide data in the new scenario.
     if (!localStorageConfig || typeof localStorageConfig !== 'object') {
+        // Always clean up previous scenario's keys, gated by scenarioId
+        // so it only runs once per switch (not on every HMR reload).
+        const guardValue = scenarioId ? `clear:${scenarioId}` : '';
         if (prototypeId) {
             return `<script data-codeyam-ls>
 (function() {
@@ -499,6 +674,19 @@ export function buildLocalStorageScript(localStorageConfig, scenarioId, prototyp
   localStorage.clear();
   localStorage.setItem('__codeyam_proto__', ${JSON.stringify(prototypeId)});
 })();
+</script>`;
+        }
+        if (scenarioId) {
+            // No prototypeId but we do have a scenarioId — clean up keys
+            // from the previous scenario without doing a full clear.
+            return `<script data-codeyam-ls>
+(function() {
+  if (localStorage.getItem('__codeyam_ls_sid__') === ${JSON.stringify(guardValue)}) return;
+  var prev = JSON.parse(localStorage.getItem('__codeyam_ls_keys__') || '[]');
+  for (var i = 0; i < prev.length; i++) localStorage.removeItem(prev[i]);
+  localStorage.removeItem('__codeyam_ls_keys__');
+  localStorage.setItem('__codeyam_ls_sid__', ${JSON.stringify(guardValue)});
+})();
 </script>`;
         }
         return '';
@@ -514,14 +702,78 @@ export function buildLocalStorageScript(localStorageConfig, scenarioId, prototyp
         return `localStorage.setItem(${JSON.stringify(key)}, ${JSON.stringify(serialized)});`;
     })
         .join('\n');
-    return `<script data-codeyam-ls>
+    // Guard value includes a content hash so re-registering a scenario with
+    // updated data (same ID, different content) busts the cache. Without this,
+    // the browser skips re-seeding because the scenario ID hasn't changed,
+    // causing stale data in the live preview while screenshots show fresh data.
+    const contentHash = simpleHash(JSON.stringify(localStorageConfig));
+    const guardValue = `${scenarioId}:${contentHash}`;
+    return (`<script data-codeyam-ls>
 (function() {
-  if (localStorage.getItem('__codeyam_ls_sid__') === ${JSON.stringify(scenarioId)}) return;
+  if (localStorage.getItem('__codeyam_ls_sid__') === ${JSON.stringify(guardValue)}) return;
   var prev = JSON.parse(localStorage.getItem('__codeyam_ls_keys__') || '[]');
   for (var i = 0; i < prev.length; i++) localStorage.removeItem(prev[i]);
   ${setStatements}
   localStorage.setItem('__codeyam_ls_keys__', ${JSON.stringify(JSON.stringify(keys))});
-  localStorage.setItem('__codeyam_ls_sid__', ${JSON.stringify(scenarioId)});
+  localStorage.setItem('__codeyam_ls_sid__', ${JSON.stringify(guardValue)});
+})();
+</script>` + buildLocalStorageWatcherScript());
+}
+/**
+ * Build a script that watches for localStorage mutations and notifies the parent
+ * frame via postMessage. Also responds to `codeyam-get-localstorage` requests so
+ * the editor can read the current localStorage state when saving.
+ */
+function buildLocalStorageWatcherScript() {
+    return `<script data-codeyam-ls-watcher>
+(function() {
+  if (window.__codeyam_ls_watcher_installed__) return;
+  window.__codeyam_ls_watcher_installed__ = true;
+
+  var origSet = localStorage.setItem.bind(localStorage);
+  var origRemove = localStorage.removeItem.bind(localStorage);
+  var origClear = localStorage.clear.bind(localStorage);
+  window.__codeyam_orig_setItem__ = origSet;
+  window.__codeyam_orig_removeItem__ = origRemove;
+  window.__codeyam_orig_clear__ = origClear;
+
+  function isInternal(key) {
+    return typeof key === 'string' && key.indexOf('__codeyam_') === 0;
+  }
+
+  localStorage.setItem = function(key, value) {
+    origSet(key, value);
+    if (!isInternal(key) && window.parent !== window) {
+      window.parent.postMessage({ type: 'codeyam-localstorage-changed', action: 'set', key: key }, '*');
+    }
+  };
+
+  localStorage.removeItem = function(key) {
+    origRemove(key);
+    if (!isInternal(key) && window.parent !== window) {
+      window.parent.postMessage({ type: 'codeyam-localstorage-changed', action: 'remove', key: key }, '*');
+    }
+  };
+
+  localStorage.clear = function() {
+    origClear();
+    if (window.parent !== window) {
+      window.parent.postMessage({ type: 'codeyam-localstorage-changed', action: 'clear' }, '*');
+    }
+  };
+
+  window.addEventListener('message', function(event) {
+    if (event.data && event.data.type === 'codeyam-get-localstorage') {
+      var data = {};
+      for (var i = 0; i < localStorage.length; i++) {
+        var k = localStorage.key(i);
+        if (k && !isInternal(k)) {
+          data[k] = localStorage.getItem(k);
+        }
+      }
+      event.source.postMessage({ type: 'codeyam-localstorage-state', data: data }, '*');
+    }
+  });
 })();
 </script>`;
 }
@@ -541,6 +793,116 @@ export function injectHealthScript(html, localStorageScript) {
     }
     return html + scripts;
 }
+/**
+ * Escape HTML special characters to prevent XSS when embedding
+ * dev server error output into the error page.
+ */
+export function escapeHtml(str) {
+    return str
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+/**
+ * Build a self-contained HTML error page for display in the preview iframe.
+ *
+ * - Sends `codeyam-server-error` postMessage to the parent editor on load
+ *   so the editor can auto-restart the dev server.
+ * - Includes a "Retry" button that sends `codeyam-server-error-retry`.
+ * - Does NOT send `codeyam-preview-ready` (so the editor doesn't
+ *   mistake the error page for a successful load).
+ */
+export function buildErrorPage(statusCode, title, detail) {
+    const escapedDetail = escapeHtml(detail);
+    const escapedTitle = escapeHtml(title);
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>${escapedTitle}</title>
+<style>
+* { margin: 0; padding: 0; box-sizing: border-box; }
+body {
+  background: #1e1e1e;
+  color: #e0e0e0;
+  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  padding: 24px;
+}
+.container {
+  max-width: 560px;
+  width: 100%;
+  text-align: center;
+}
+.status-code {
+  font-size: 48px;
+  font-weight: 600;
+  color: #f87171;
+  line-height: 1;
+  margin-bottom: 8px;
+}
+.title {
+  font-size: 18px;
+  font-weight: 500;
+  color: #f87171;
+  margin-bottom: 16px;
+}
+.detail {
+  background: #2a2a2a;
+  border: 1px solid #3a3a3a;
+  border-radius: 6px;
+  padding: 16px;
+  margin-bottom: 20px;
+  max-height: 240px;
+  overflow: auto;
+  text-align: left;
+}
+.detail pre {
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 12px;
+  color: #b0b0b0;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.message {
+  font-size: 13px;
+  color: #888;
+  margin-bottom: 16px;
+}
+button {
+  background: #005c75;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  padding: 8px 20px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+button:hover { background: #004d63; }
+</style>
+</head>
+<body>
+<div class="container">
+  <div class="status-code">${statusCode}</div>
+  <div class="title">${escapedTitle}</div>
+  <div class="detail"><pre>${escapedDetail}</pre></div>
+  <p class="message">Attempting to restart the dev server...</p>
+  <button onclick="window.parent.postMessage({type:'codeyam-server-error-retry'},'*')">Retry</button>
+</div>
+<script>
+try { window.parent.postMessage({type:'codeyam-server-error',statusCode:${statusCode}},'*'); } catch(e) {}
+</script>
+</body>
+</html>`;
+}
 /**
  * Handle POST /__codeyam__/preview-health — store health data in globalThis.
  */