bloby-bot 0.53.5 → 0.53.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bloby-bot",
-  "version": "0.53.5",
+  "version": "0.53.6",
   "releaseNotes": [
     "1. New Morphy animation system: config-driven sprites loaded from /morphy/*.json",
     "2. Swapped teleporting (splash) and headphones (bubble + chat) to the new format",

package/supervisor/index.ts

@@ -530,6 +530,15 @@ export async function startSupervisor() {
       return;
     }
 
+    // Workspace guard — injected by the supervisor into the dashboard HTML (see the Vite proxy
+    // below). Auto-reloads into the "backend down" interstitial when the backend gives up, and
+    // replaces Vite's raw error overlay with a friendly one. Served here so it's always current.
+    if (req.url === '/bloby/workspace-guard.js') {
+      res.writeHead(200, { 'Content-Type': 'application/javascript', 'Cache-Control': 'no-cache' });
+      res.end(fs.readFileSync(path.join(PKG_DIR, 'supervisor', 'workspace-guard.js')));
+      return;
+    }
+
     // Service worker — served from embedded constant (supervisor/ is always updated)
     if (req.url === '/sw.js' || req.url === '/bloby/sw.js') {
       res.writeHead(200, { 'Content-Type': 'application/javascript', 'Cache-Control': 'no-cache' });
@@ -1798,11 +1807,37 @@ mint();
 
     // Everything else → proxy to dashboard Vite dev server
     console.log(`[supervisor] → dashboard Vite :${vitePorts.dashboard} | ${req.method} ${(req.url || '').split('?')[0]}`);
+    const GUARD_TAG = '<script defer src="/bloby/workspace-guard.js"></script>';
     const proxy = http.request(
       { host: '127.0.0.1', port: vitePorts.dashboard, path: req.url, method: req.method, headers: req.headers },
       (proxyRes) => {
-        res.writeHead(proxyRes.statusCode!, proxyRes.headers);
-        proxyRes.pipe(res);
+        const ct = String(proxyRes.headers['content-type'] || '');
+        const enc = String(proxyRes.headers['content-encoding'] || '');
+        // Inject the workspace guard into dashboard HTML *documents* only (and only when
+        // uncompressed — Vite dev serves plain HTML). Assets, HMR, JSON, etc. stream through
+        // untouched. The guard auto-reloads into the "backend down" interstitial and replaces
+        // Vite's raw error overlay — supervisor-side so it reaches every workspace, no edits needed.
+        if (!ct.includes('text/html') || enc) {
+          res.writeHead(proxyRes.statusCode!, proxyRes.headers);
+          proxyRes.pipe(res);
+          return;
+        }
+        const chunks: Buffer[] = [];
+        proxyRes.on('data', (c: Buffer) => chunks.push(c));
+        proxyRes.on('end', () => {
+          let html = Buffer.concat(chunks).toString('utf-8');
+          if (!html.includes('workspace-guard.js')) {
+            html = html.includes('</head>') ? html.replace('</head>', GUARD_TAG + '</head>') : GUARD_TAG + html;
+          }
+          const headers = { ...proxyRes.headers };
+          // Body length changed — drop both framing headers and let Node set content-length
+          // from the single res.end() write.
+          delete headers['content-length'];
+          delete headers['transfer-encoding'];
+          res.writeHead(proxyRes.statusCode!, headers);
+          res.end(html);
+        });
+        proxyRes.on('error', () => { try { res.destroy(); } catch {} });
       },
     );
     proxy.on('error', (e) => {

package/supervisor/workspace-guard.js

@@ -0,0 +1,103 @@
+(function () {
+  // Injected by the supervisor into the workspace dashboard HTML (and ONLY there — never the
+  // chat PWA or the supervisor's own interstitials). Two jobs, both aimed at non-technical users:
+  //
+  //   1. Backend-down auto-detect — when the workspace backend crash-loops and gives up, the
+  //      supervisor serves a full "backend down" interstitial on the next navigation. Poll for
+  //      that state and reload automatically so the user doesn't have to press F5 to discover
+  //      their app's server broke. We reload ONLY on the terminal "dead" (gave-up) state, never
+  //      during a normal 1-2s restart (which reports alive:false, dead:false).
+  //
+  //   2. Friendly frontend-error overlay — Vite's dev server throws a raw red error box on a
+  //      compile/import error, covering the whole screen (even the chat). We hide Vite's overlay
+  //      and show a friendly one instead: the error text behind a "copy" button + a pointer to
+  //      the chat. It auto-clears when the agent fixes the error (Vite removes its overlay).
+  if (window.__blobyWorkspaceGuard) return;
+  window.__blobyWorkspaceGuard = true;
+
+  /* ── 1. Backend-down auto-detect ──────────────────────────────────────── */
+  var reloading = false;
+  function pollBackend() {
+    fetch('/__bloby/backend-status', { cache: 'no-store' })
+      .then(function (r) { return r.json(); })
+      .then(function (s) { if (s && s.dead && !reloading) { reloading = true; location.reload(); } })
+      .catch(function () {});
+  }
+  setInterval(pollBackend, 4000);
+  pollBackend();
+
+  /* ── 2. Friendly frontend-error overlay ───────────────────────────────── */
+  // Hide Vite's built-in overlay (kept enabled so we can read the error text from its shadow DOM).
+  var hideStyle = document.createElement('style');
+  hideStyle.textContent = 'vite-error-overlay{display:none!important}';
+  (document.head || document.documentElement).appendChild(hideStyle);
+
+  var overlay = null;
+  var dismissed = false;
+  var lastErr = '';
+
+  function readViteError() {
+    var ov = document.querySelector('vite-error-overlay');
+    if (!ov || !ov.shadowRoot) return '';
+    var sr = ov.shadowRoot, parts = [];
+    ['.message-body', '.file', '.frame'].forEach(function (sel) {
+      var el = sr.querySelector(sel);
+      if (el && el.textContent && el.textContent.trim()) parts.push(el.textContent.trim());
+    });
+    return parts.join('\n\n');
+  }
+
+  function buildOverlay() {
+    var d = document.createElement('div');
+    d.id = '__bloby_fe_error';
+    // z-index 99990: below the chat widget (99998/99999) so the user can still open chat, above the app.
+    d.setAttribute('style', 'position:fixed;inset:0;z-index:99990;background:#0a0a0b;color:#e4e4e7;display:flex;align-items:center;justify-content:center;padding:1.5rem;font-family:system-ui,-apple-system,sans-serif');
+    d.innerHTML =
+      '<div style="text-align:center;max-width:480px;width:100%">' +
+        '<div style="position:relative;width:160px;height:160px;margin:0 auto 1.2rem">' +
+          '<div style="position:absolute;inset:-18px;background:radial-gradient(circle,rgba(1,102,255,.18) 0%,transparent 60%);filter:blur(18px)"></div>' +
+          '<video autoplay loop muted playsinline style="position:relative;width:100%;height:100%;object-fit:contain;border-radius:50%">' +
+            '<source src="/what-happened.webm" type="video/webm"><source src="/what-happened.mp4" type="video/mp4">' +
+          '</video>' +
+        '</div>' +
+        '<h1 style="font-size:1.5rem;font-weight:700;margin:0 0 .6rem;background:linear-gradient(135deg,#0166FF,#009AFE,#4AEEFF);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">A screen in your app has an error</h1>' +
+        '<p style="color:#e4e4e7;font-size:1rem;line-height:1.6;margin:0 0 .4rem">Your latest change didn\'t compile.</p>' +
+        '<p style="color:#a1a1aa;font-size:.93rem;line-height:1.6;margin:0 0 1.2rem">Ask your agent to fix it — the chat is in the bottom corner. Copy the error so it can debug faster.</p>' +
+        '<div><button id="__bloby_fe_copy" style="font:inherit;cursor:pointer;border:none;border-radius:10px;padding:.65rem 1.2rem;font-size:.9rem;font-weight:600;background:linear-gradient(135deg,#0166FF,#0069FE);color:#fff">Copy error for your agent</button> ' +
+        '<button id="__bloby_fe_dismiss" style="font:inherit;cursor:pointer;border-radius:10px;padding:.65rem 1.1rem;font-size:.9rem;font-weight:600;border:1px solid #27272a;background:#18181b;color:#e4e4e7">Dismiss</button></div>' +
+      '</div>';
+    document.body.appendChild(d);
+
+    var copyBtn = d.querySelector('#__bloby_fe_copy');
+    copyBtn.addEventListener('click', function () {
+      var text = 'A screen in my app has a frontend build error. Find and fix the root cause. Error:\n\n' + (lastErr || '(no details captured)');
+      function ok() { copyBtn.textContent = '✓ Copied — paste it to your agent'; setTimeout(function () { copyBtn.textContent = 'Copy error for your agent'; }, 2600); }
+      function fb() { var ta = document.createElement('textarea'); ta.value = text; ta.style.position = 'fixed'; ta.style.opacity = '0'; document.body.appendChild(ta); ta.select(); try { document.execCommand('copy'); ok(); } catch (e) {} document.body.removeChild(ta); }
+      if (navigator.clipboard && navigator.clipboard.writeText) navigator.clipboard.writeText(text).then(ok).catch(fb); else fb();
+    });
+    d.querySelector('#__bloby_fe_dismiss').addEventListener('click', function () {
+      dismissed = true;
+      if (overlay) { overlay.remove(); overlay = null; }
+    });
+    return d;
+  }
+
+  function sync() {
+    var ov = document.querySelector('vite-error-overlay');
+    if (ov) {
+      var err = readViteError();
+      if (err) lastErr = err;
+      if (!overlay && !dismissed) overlay = buildOverlay();
+    } else {
+      // Error cleared (agent fixed it) — drop our overlay and re-arm for the next episode.
+      dismissed = false;
+      if (overlay) { overlay.remove(); overlay = null; }
+    }
+  }
+
+  // Vite appends <vite-error-overlay> directly under <body>; observing body's childList is enough
+  // and far lighter than a full-document subtree observer.
+  var obs = new MutationObserver(sync);
+  obs.observe(document.body, { childList: true });
+  sync();
+})();