bloby-bot 0.53.5 → 0.53.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bloby-bot",
-  "version": "0.53.5",
+  "version": "0.53.7",
   "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

@@ -112,12 +112,15 @@ const MIME_TYPES: Record<string, string> = {
 const SW_JS = `// Service worker — app-shell caching + push notifications
 // Caching strategy:
 //   Hashed assets (/assets/*-AbCd12.js) → cache-first (immutable)
-//   Navigation (HTML)                   → stale-while-revalidate (precached on install)
-//   Static assets (img/video/fonts)     → stale-while-revalidate
-//   JS/CSS modules                      → stale-while-revalidate
+//   Navigation (HTML)                   → network-first (cache = offline fallback only)
+//   Static assets / JS / CSS modules    → network-first (cache = offline fallback only)
 //   API, WebSocket, Vite internals      → network-only (no cache)
+// Network-first (NOT stale-while-revalidate) on navigations + modules: Bloby is a LIVE-EDIT
+// tool, so the browser must always see the current app and its build errors — never a stale
+// cached shell that masks a broken (or just-fixed) frontend and produces the confusing
+// "normal refresh is broken but hard refresh works" split. Cache is a pure offline fallback.
 
-var CACHE = 'bloby-v16';
+var CACHE = 'bloby-v17';
 var HASHED_RE = new RegExp('/assets/.+-[a-zA-Z0-9]{6,}[.](js|css)$');
 
 // Precache the HTML shell on install so the cache is never empty.
@@ -182,18 +185,11 @@ self.addEventListener('fetch', function(event) {
   if (request.mode === 'navigate') {
     console.log('[SW] navigate →', url.pathname);
     if (url.pathname === '/' || url.pathname === '/index.html') {
+      // Network-first: always fetch the live dashboard; only fall back to cache when offline.
       event.respondWith(caches.open(CACHE).then(function(c) {
-        return c.match('/').then(function(hit) {
-          console.log('[SW] cache hit for /:', !!hit);
-          var net = fetch(request)
-            .then(function(r) {
-              console.log('[SW] network response for /:', r.status);
-              if (r.ok) c.put('/', r.clone());
-              return r;
-            })
-            .catch(function(err) { console.warn('[SW] network failed, using cache:', err.message); return hit; });
-          return hit || net;
-        });
+        return fetch(request)
+          .then(function(r) { if (r.ok) c.put('/', r.clone()); return r; })
+          .catch(function(err) { console.warn('[SW] / network failed, using cache:', err.message); return c.match('/'); });
       }));
       return;
     }
@@ -202,14 +198,11 @@ self.addEventListener('fetch', function(event) {
     return;
   }
 
-  // Everything else → stale-while-revalidate
+  // Everything else (JS/CSS modules, static assets) → network-first, cache as offline fallback.
   event.respondWith(caches.open(CACHE).then(function(c) {
-    return c.match(request).then(function(hit) {
-      var net = fetch(request)
-        .then(function(r) { if (r.ok) c.put(request, r.clone()); return r; })
-        .catch(function() { return hit; });
-      return hit || net;
-    });
+    return fetch(request)
+      .then(function(r) { if (r.ok) c.put(request, r.clone()); return r; })
+      .catch(function() { return c.match(request); });
   }));
 });
 
@@ -530,6 +523,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 +1800,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,123 @@
+(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;
+  }
+
+  var start = Date.now();
+  var sawError = false;
+
+  function appLooksBroken() {
+    // 1. Compile/import error → Vite renders <vite-error-overlay>. Immediate, reliable.
+    if (document.querySelector('vite-error-overlay')) return true;
+    var root = document.getElementById('root');
+    if (!root) return false; // not the dashboard shell — don't interfere
+    // Healthy = React rendered real content into #root (and it isn't the workspace template's
+    // own "Your app crashed" fallback, which we supersede with the friendly screen).
+    var mounted = root.children.length > 0 && (root.textContent || '').indexOf('Your app crashed') === -1;
+    if (mounted) return false;
+    // Not mounted: if we already saw a hard error, judge immediately; otherwise give a cold
+    // load a generous grace window before declaring a black screen (avoids false positives).
+    if (sawError) return true;
+    return (Date.now() - start) > 8000;
+  }
+
+  function evaluate() {
+    if (appLooksBroken()) {
+      var err = readViteError();
+      if (err) lastErr = err;
+      if (!overlay && !dismissed) overlay = buildOverlay();
+    } else {
+      // App healthy (or recovered) — drop our overlay and re-arm for the next episode.
+      dismissed = false;
+      if (overlay) { overlay.remove(); overlay = null; }
+    }
+  }
+
+  // Triggers: Vite appends <vite-error-overlay> directly under <body> (childList catches it
+  // instantly + cheaply); a steady tick handles the timeout-based black-screen detection and
+  // recovery; window errors flip sawError so real load failures surface fast.
+  new MutationObserver(evaluate).observe(document.body, { childList: true });
+  setInterval(evaluate, 1500);
+  window.addEventListener('error', function () { sawError = true; evaluate(); });
+  window.addEventListener('unhandledrejection', function () { sawError = true; evaluate(); });
+  evaluate();
+})();

package/workspace/client/public/sw.js

@@ -1,12 +1,14 @@
 // Service worker — app-shell caching + push notifications
 // Caching strategy:
 //   Hashed assets (/assets/*-AbCd12.js) → cache-first (immutable)
-//   Navigation (HTML)                   → stale-while-revalidate (precached on install)
-//   Static assets (img/video/fonts)     → stale-while-revalidate
-//   JS/CSS modules                      → stale-while-revalidate
+//   Navigation (HTML)                   → network-first (cache = offline fallback only)
+//   Static assets / JS / CSS modules    → network-first (cache = offline fallback only)
 //   API, WebSocket, Vite internals      → network-only (no cache)
+// Network-first on navigations + modules so a live-edit always shows the current app and its
+// build errors, never a stale cached shell. Cache is a pure offline fallback. (Mirror of the
+// supervisor's SW_JS in supervisor/index.ts — keep in sync.)
 
-const CACHE = 'bloby-v7';
+const CACHE = 'bloby-v17';
 
 // Precache the HTML shell on install so the cache is never empty.
 // Without this, the first navigation isn't intercepted (SW wasn't
@@ -70,18 +72,11 @@ self.addEventListener('fetch', (event) => {
   if (request.mode === 'navigate') {
     console.log('[SW] navigate →', url.pathname);
     if (url.pathname === '/' || url.pathname === '/index.html') {
+      // Network-first: always fetch the live dashboard; cache only as offline fallback.
       event.respondWith(caches.open(CACHE).then(c =>
-        c.match('/').then(hit => {
-          console.log('[SW] cache hit for /:', !!hit);
-          const net = fetch(request)
-            .then(r => {
-              console.log('[SW] network response for /:', r.status);
-              if (r.ok) c.put('/', r.clone());
-              return r;
-            })
-            .catch(err => { console.warn('[SW] network failed, using cache:', err.message); return hit; });
-          return hit || net;
-        })
+        fetch(request)
+          .then(r => { if (r.ok) c.put('/', r.clone()); return r; })
+          .catch(err => { console.warn('[SW] / network failed, using cache:', err.message); return c.match('/'); })
       ));
       return;
     }
@@ -90,16 +85,12 @@ self.addEventListener('fetch', (event) => {
     return;
   }
 
-  // ── Everything else → stale-while-revalidate ────────────────────
-  // Serves cached version instantly, refreshes cache in background.
+  // ── Everything else → network-first, cache as offline fallback ───
   // Covers: JS/CSS modules, images, video, fonts, manifest, etc.
   event.respondWith(caches.open(CACHE).then(c =>
-    c.match(request).then(hit => {
-      const net = fetch(request)
-        .then(r => { if (r.ok) c.put(request, r.clone()); return r; })
-        .catch(() => hit);
-      return hit || net;
-    })
+    fetch(request)
+      .then(r => { if (r.ok) c.put(request, r.clone()); return r; })
+      .catch(() => c.match(request))
   ));
 });