fluxy-bot 0.9.5 → 0.9.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fluxy-bot",
-  "version": "0.9.5",
+  "version": "0.9.6",
   "releaseNotes": [
     "Another test for self update",
     "2. ",

package/supervisor/index.ts

@@ -47,15 +47,86 @@ const MIME_TYPES: Record<string, string> = {
 };
 
 // Service worker content — embedded here so it ships with supervisor/ (always updated)
-const SW_JS = `// Service worker — PWA installability + push notifications
-self.addEventListener('install', () => self.skipWaiting());
-self.addEventListener('activate', (e) => e.waitUntil(self.clients.claim()));
-self.addEventListener('fetch', () => {});
-
-// Push notification
-self.addEventListener('push', (event) => {
-  let data = { title: 'Fluxy', body: 'New message' };
-  try { data = event.data.json(); } catch {}
+// Keep in sync with workspace/client/public/sw.js (prod builds)
+const SW_JS = `// Service worker — app-shell caching + push notifications
+// Caching strategy:
+//   Hashed assets (/assets/*-AbCd12.js) → cache-first (immutable)
+//   Navigation (HTML)                   → network-first, cache fallback
+//   Static assets (img/video/fonts)     → stale-while-revalidate
+//   JS/CSS modules                      → stale-while-revalidate
+//   API, WebSocket, Vite internals      → network-only (no cache)
+
+var CACHE = 'fluxy-v2';
+var HASHED_RE = new RegExp('/assets/.+-[a-zA-Z0-9]{6,}[.](js|css)$');
+
+self.addEventListener('install', function() { self.skipWaiting(); });
+
+self.addEventListener('activate', function(e) {
+  e.waitUntil(
+    caches.keys()
+      .then(function(keys) { return Promise.all(keys.filter(function(k) { return k !== CACHE; }).map(function(k) { return caches.delete(k); })); })
+      .then(function() { return self.clients.claim(); })
+  );
+});
+
+self.addEventListener('message', function(e) {
+  if (e.data && e.data.type === 'SKIP_WAITING') self.skipWaiting();
+});
+
+self.addEventListener('fetch', function(event) {
+  var request = event.request;
+  var url = new URL(request.url);
+
+  // Network-only: never cache these
+  if (
+    request.method !== 'GET' ||
+    url.pathname.indexOf('/api/') === 0 ||
+    url.pathname.indexOf('/app/api/') === 0 ||
+    url.pathname.slice(-3) === '/ws' ||
+    url.pathname === '/sw.js' ||
+    url.pathname === '/fluxy/sw.js' ||
+    url.pathname.indexOf('/@') === 0 ||
+    url.pathname.indexOf('/__') === 0
+  ) return;
+
+  // Hashed assets (immutable, content-addressed) → cache-first
+  if (HASHED_RE.test(url.pathname)) {
+    event.respondWith(caches.open(CACHE).then(function(c) {
+      return c.match(request).then(function(hit) {
+        return hit || fetch(request).then(function(r) { if (r.ok) c.put(request, r.clone()); return r; });
+      });
+    }));
+    return;
+  }
+
+  // Navigation (HTML pages) → network-first, cached shell fallback
+  if (request.mode === 'navigate') {
+    event.respondWith(
+      fetch(request)
+        .then(function(r) {
+          if (r.ok) caches.open(CACHE).then(function(c) { c.put(request, r.clone()); });
+          return r;
+        })
+        .catch(function() { return caches.match(request).then(function(r) { return r || caches.match('/'); }); })
+    );
+    return;
+  }
+
+  // Everything else → stale-while-revalidate
+  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;
+    });
+  }));
+});
+
+// Push notifications
+self.addEventListener('push', function(event) {
+  var data = { title: 'Fluxy', body: 'New message' };
+  try { data = event.data.json(); } catch(e) {}
   event.waitUntil(
     self.registration.showNotification(data.title || 'Fluxy', {
       body: data.body || '',
@@ -69,13 +140,13 @@ self.addEventListener('push', (event) => {
 });
 
 // Notification click — focus or open app
-self.addEventListener('notificationclick', (event) => {
+self.addEventListener('notificationclick', function(event) {
   event.notification.close();
-  const url = event.notification.data?.url || '/';
+  var url = (event.notification.data && event.notification.data.url) || '/';
   event.waitUntil(
-    self.clients.matchAll({ type: 'window', includeUncontrolled: true }).then((clients) => {
-      for (const client of clients) {
-        if (client.url.includes('/fluxy') && 'focus' in client) return client.focus();
+    self.clients.matchAll({ type: 'window', includeUncontrolled: true }).then(function(clients) {
+      for (var i = 0; i < clients.length; i++) {
+        if (clients[i].url.indexOf('/fluxy') !== -1 && 'focus' in clients[i]) return clients[i].focus();
       }
       return self.clients.openWindow(url);
     })
@@ -87,7 +158,7 @@ const RECOVERING_HTML = `<!DOCTYPE html><html><head><meta charset="UTF-8"><meta
 <style>body{background:#0a0a0f;color:#94a3b8;font-family:system-ui;display:flex;align-items:center;justify-content:center;height:100vh;margin:0}
 div{text-align:center}h1{font-size:18px;margin-bottom:8px;color:#e2e8f0}p{font-size:14px}a{color:#60a5fa}</style></head>
 <body><div><h1>Dashboard is restarting...</h1><p>Refreshing automatically.</p></div>
-<script>setTimeout(()=>location.reload(),3000)</script>
+<script>console.error('[refresh-diag] RECOVERING_HTML loaded — will auto-reload in 3s');setTimeout(()=>{console.error('[refresh-diag] RECOVERING_HTML 3s timer fired — reloading');location.reload()},3000)</script>
 <script src="/fluxy/widget.js"></script></body></html>`;
 
 export async function startSupervisor() {

package/workspace/client/index.html

@@ -33,12 +33,21 @@
     <script>
     if('serviceWorker' in navigator){
       navigator.serviceWorker.register('/sw.js').then(function(r){
+        console.warn('[refresh-diag] SW registered, state:', r.active?.state, 'waiting:', !!r.waiting);
         r.update();
-        if(r.waiting){r.waiting.postMessage({type:'SKIP_WAITING'})}
+        if(r.waiting){
+          console.warn('[refresh-diag] SW: found waiting worker — sending SKIP_WAITING');
+          r.waiting.postMessage({type:'SKIP_WAITING'});
+        }
         r.addEventListener('updatefound',function(){
+          console.warn('[refresh-diag] SW: updatefound — new version installing');
           var w=r.installing;
           if(w)w.addEventListener('statechange',function(){
-            if(w.state==='installed'&&navigator.serviceWorker.controller)w.postMessage({type:'SKIP_WAITING'});
+            console.warn('[refresh-diag] SW installing statechange:', w.state);
+            if(w.state==='installed'&&navigator.serviceWorker.controller){
+              console.warn('[refresh-diag] SW: new version installed while controller exists — sending SKIP_WAITING');
+              w.postMessage({type:'SKIP_WAITING'});
+            }
           });
         });
       });

package/workspace/client/public/sw.js

@@ -1,14 +1,82 @@
-// Service worker — PWA installability + push notifications
+// Service worker — app-shell caching + push notifications
+// Caching strategy:
+//   Hashed assets (/assets/*-AbCd12.js) → cache-first (immutable)
+//   Navigation (HTML)                   → network-first, cache fallback
+//   Static assets (img/video/fonts)     → stale-while-revalidate
+//   JS/CSS modules                      → stale-while-revalidate
+//   API, WebSocket, Vite internals      → network-only (no cache)
+
+const CACHE = 'fluxy-v2';
+
 self.addEventListener('install', () => self.skipWaiting());
-self.addEventListener('activate', (e) => e.waitUntil(self.clients.claim()));
-self.addEventListener('fetch', () => {});
 
-// Push notification
+self.addEventListener('activate', (e) => e.waitUntil(
+  caches.keys()
+    .then(keys => Promise.all(keys.filter(k => k !== CACHE).map(k => caches.delete(k))))
+    .then(() => self.clients.claim())
+));
+
+self.addEventListener('message', (e) => {
+  if (e.data?.type === 'SKIP_WAITING') self.skipWaiting();
+});
+
+self.addEventListener('fetch', (event) => {
+  const { request } = event;
+  const url = new URL(request.url);
+
+  // ── Network-only: never cache these ──────────────────────────────
+  if (
+    request.method !== 'GET' ||
+    url.pathname.startsWith('/api/') ||
+    url.pathname.startsWith('/app/api/') ||
+    url.pathname.endsWith('/ws') ||
+    url.pathname === '/sw.js' ||
+    url.pathname === '/fluxy/sw.js' ||
+    url.pathname.startsWith('/@') ||
+    url.pathname.startsWith('/__')
+  ) return;
+
+  // ── Hashed assets (immutable, content-addressed) → cache-first ──
+  if (/\/assets\/.+-[a-zA-Z0-9]{6,}\.(js|css)$/.test(url.pathname)) {
+    event.respondWith(caches.open(CACHE).then(c =>
+      c.match(request).then(hit =>
+        hit || fetch(request).then(r => { if (r.ok) c.put(request, r.clone()); return r; })
+      )
+    ));
+    return;
+  }
+
+  // ── Navigation (HTML pages) → network-first, cached shell fallback ──
+  // On restore after OS kill: if network is slow, show cached shell instantly
+  if (request.mode === 'navigate') {
+    event.respondWith(
+      fetch(request)
+        .then(r => {
+          if (r.ok) caches.open(CACHE).then(c => c.put(request, r.clone()));
+          return r;
+        })
+        .catch(() => caches.match(request).then(r => r || caches.match('/')))
+    );
+    return;
+  }
+
+  // ── Everything else → stale-while-revalidate ────────────────────
+  // Serves cached version instantly, refreshes cache in background.
+  // 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;
+    })
+  ));
+});
+
+// ── Push notifications ─────────────────────────────────────────────
 self.addEventListener('push', (event) => {
   let data = { title: 'Fluxy', body: 'New message' };
-  try {
-    data = event.data.json();
-  } catch {}
+  try { data = event.data.json(); } catch {}
 
   event.waitUntil(
     self.registration.showNotification(data.title || 'Fluxy', {
@@ -30,9 +98,7 @@ self.addEventListener('notificationclick', (event) => {
   event.waitUntil(
     self.clients.matchAll({ type: 'window', includeUncontrolled: true }).then((clients) => {
       for (const client of clients) {
-        if (client.url.includes('/fluxy') && 'focus' in client) {
-          return client.focus();
-        }
+        if (client.url.includes('/fluxy') && 'focus' in client) return client.focus();
       }
       return self.clients.openWindow(url);
     })

package/workspace/client/src/App.tsx

@@ -27,6 +27,79 @@ export default function App() {
   const [rebuildState, setRebuildState] = useState<'idle' | 'rebuilding' | 'error'>('idle');
   const [buildError, setBuildError] = useState('');
 
+  // ── Refresh diagnostics ──────────────────────────────────────────
+  // Logs every possible reload trigger so we can trace phantom refreshes.
+  // Safe to remove once the mystery is solved.
+  useEffect(() => {
+    const t0 = Date.now();
+    const tag = `[refresh-diag ${new Date().toISOString()}]`;
+
+    // 1. Log page load reason
+    const navEntries = performance.getEntriesByType('navigation') as PerformanceNavigationTiming[];
+    const navType = navEntries[0]?.type ?? 'unknown'; // 'navigate' | 'reload' | 'back_forward' | 'prerender'
+    console.warn(`${tag} Page loaded — navType="${navType}", wasDiscarded=${document.wasDiscarded ?? 'N/A'}, visState="${document.visibilityState}"`);
+
+    // 2. Intercept location.reload to capture stack trace
+    const origReload = location.reload.bind(location);
+    location.reload = () => {
+      console.error(`${tag} ⚠ location.reload() called! Stack trace:`);
+      console.trace();
+      origReload();
+    };
+
+    // 3. Service Worker controller changes
+    if (navigator.serviceWorker) {
+      navigator.serviceWorker.addEventListener('controllerchange', () => {
+        console.warn(`${tag} SW controllerchange — new SW took control (can cause reload in some browsers)`);
+      });
+    }
+
+    // 4. Vite HMR events (Vite injects import.meta.hot on the client)
+    if (import.meta.hot) {
+      // Vite fires 'vite:beforeFullReload' before a full page reload
+      import.meta.hot.on('vite:beforeFullReload', (payload: unknown) => {
+        console.error(`${tag} ⚠ Vite HMR: full-reload triggered!`, payload);
+        console.trace();
+      });
+      import.meta.hot.on('vite:beforeUpdate', (payload: unknown) => {
+        console.warn(`${tag} Vite HMR: beforeUpdate`, payload);
+      });
+      import.meta.hot.on('vite:error', (payload: unknown) => {
+        console.error(`${tag} Vite HMR: error`, payload);
+      });
+      import.meta.hot.on('vite:ws:disconnect', () => {
+        console.warn(`${tag} Vite HMR: WebSocket disconnected`);
+      });
+      import.meta.hot.on('vite:ws:connect', () => {
+        console.warn(`${tag} Vite HMR: WebSocket reconnected (may trigger full-reload if stale)`);
+      });
+    }
+
+    // 5. Visibility + focus changes (iOS kills PWA processes in background)
+    const onVisChange = () => console.warn(`${tag} visibilitychange → "${document.visibilityState}" (uptime: ${((Date.now() - t0) / 1000).toFixed(1)}s)`);
+    const onPageShow = (e: PageTransitionEvent) => console.warn(`${tag} pageshow — persisted=${e.persisted} (bfcache restore)`);
+    const onFreeze = () => console.warn(`${tag} freeze — page is being frozen by OS`);
+    const onResume = () => console.warn(`${tag} resume — page resumed from frozen state`);
+    document.addEventListener('visibilitychange', onVisChange);
+    window.addEventListener('pageshow', onPageShow);
+    document.addEventListener('freeze', onFreeze);
+    document.addEventListener('resume', onResume);
+
+    // 6. beforeunload — last chance to log before the page goes away
+    const onBeforeUnload = () => {
+      console.warn(`${tag} beforeunload — page is about to unload (uptime: ${((Date.now() - t0) / 1000).toFixed(1)}s)`);
+    };
+    window.addEventListener('beforeunload', onBeforeUnload);
+
+    return () => {
+      document.removeEventListener('visibilitychange', onVisChange);
+      window.removeEventListener('pageshow', onPageShow);
+      document.removeEventListener('freeze', onFreeze);
+      document.removeEventListener('resume', onResume);
+      window.removeEventListener('beforeunload', onBeforeUnload);
+    };
+  }, []);
+
   useEffect(() => {
     fetch('/api/settings')
       .then((r) => r.json())
@@ -41,16 +114,22 @@ export default function App() {
     let safetyTimer: ReturnType<typeof setTimeout>;
     const handler = (e: MessageEvent) => {
       if (e.data?.type === 'fluxy:rebuilding') {
+        console.warn('[refresh-diag] fluxy:rebuilding received — starting 60s safety timer');
         setRebuildState('rebuilding');
         setBuildError('');
         // Safety: auto-reload after 60s in case app:rebuilt message is lost
         clearTimeout(safetyTimer);
-        safetyTimer = setTimeout(() => location.reload(), 60_000);
+        safetyTimer = setTimeout(() => {
+          console.error('[refresh-diag] ⚠ 60s safety timer fired — forcing reload');
+          location.reload();
+        }, 60_000);
       } else if (e.data?.type === 'fluxy:rebuilt') {
+        console.warn('[refresh-diag] fluxy:rebuilt received — reloading now');
         clearTimeout(safetyTimer);
         setRebuildState('idle');
         location.reload();
       } else if (e.data?.type === 'fluxy:build-error') {
+        console.warn('[refresh-diag] fluxy:build-error received:', e.data.error);
         clearTimeout(safetyTimer);
         setRebuildState('error');
         setBuildError(e.data.error || 'Build failed');