bloby-bot 0.53.6 → 0.53.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bloby-bot",
-  "version": "0.53.6",
+  "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); });
   }));
 });
 

package/supervisor/workspace-guard.js

@@ -82,22 +82,42 @@
     return d;
   }
 
-  function sync() {
-    var ov = document.querySelector('vite-error-overlay');
-    if (ov) {
+  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 {
-      // Error cleared (agent fixed it) — drop our overlay and re-arm for the next episode.
+      // App healthy (or recovered) — 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();
+  // 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))
   ));
 });