fluxy-bot 0.10.10 → 0.10.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fluxy-bot",
-  "version": "0.10.10",
+  "version": "0.10.12",
   "releaseNotes": [
     "Adding a way for users to claim their fluxies on the fluxy.bot dashboard",
     "2. ",

package/supervisor/chat/fluxy-main.tsx

@@ -51,11 +51,10 @@ function FluxyApp() {
       });
 
       const sub = subscription.toJSON();
-      await authFetch('/api/push/subscribe', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ endpoint: sub.endpoint, keys: sub.keys }),
-      });
+      const client = clientRef.current;
+      if (client) {
+        client.send('push:subscribe', { endpoint: sub.endpoint, keys: sub.keys });
+      }
 
       setPushState('subscribed');
     } catch (err) {
@@ -70,11 +69,10 @@ function FluxyApp() {
       if (subscription) {
         const endpoint = subscription.endpoint;
         await subscription.unsubscribe();
-        await authFetch('/api/push/unsubscribe', {
-          method: 'DELETE',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ endpoint }),
-        });
+        const client = clientRef.current;
+        if (client) {
+          client.send('push:unsubscribe', { endpoint });
+        }
       }
       setPushState('unsubscribed');
     } catch (err) {

package/supervisor/index.ts

@@ -578,6 +578,40 @@ export async function startSupervisor() {
         return;
       }
 
+      // Push subscribe via WebSocket (bypasses relay POST issues)
+      if (msg.type === 'push:subscribe') {
+        (async () => {
+          try {
+            const result = await workerApi('/api/push/subscribe', 'POST', msg.data);
+            if (ws.readyState === WebSocket.OPEN) {
+              ws.send(JSON.stringify({ type: 'push:subscribed', data: result }));
+            }
+          } catch (err: any) {
+            if (ws.readyState === WebSocket.OPEN) {
+              ws.send(JSON.stringify({ type: 'push:subscribe-error', data: { error: err.message } }));
+            }
+          }
+        })();
+        return;
+      }
+
+      // Push unsubscribe via WebSocket (bypasses relay POST issues)
+      if (msg.type === 'push:unsubscribe') {
+        (async () => {
+          try {
+            const result = await workerApi('/api/push/unsubscribe', 'DELETE', msg.data);
+            if (ws.readyState === WebSocket.OPEN) {
+              ws.send(JSON.stringify({ type: 'push:unsubscribed', data: result }));
+            }
+          } catch (err: any) {
+            if (ws.readyState === WebSocket.OPEN) {
+              ws.send(JSON.stringify({ type: 'push:unsubscribe-error', data: { error: err.message } }));
+            }
+          }
+        })();
+        return;
+      }
+
       // Save settings via WebSocket (bypasses relay POST issues)
       if (msg.type === 'settings:save') {
         (async () => {

package/workspace/client/index.html

@@ -41,6 +41,15 @@
         }
       });
     </script>
+    <script>
+    // Re-show splash before page unloads (manual refresh / navigation).
+    // The last painted frame before teardown will be the dark splash
+    // instead of a white gap.
+    window.addEventListener('beforeunload', function () {
+      var s = document.getElementById('splash');
+      if (s) { s.style.transition = 'none'; s.style.display = 'flex'; s.style.opacity = '1'; }
+    });
+    </script>
     <script type="module" src="/src/main.tsx"></script>
     <script>
     if('serviceWorker' in navigator){

package/workspace/client/public/sw.js

@@ -1,14 +1,19 @@
 // Service worker — app-shell caching + push notifications
 // Caching strategy:
 //   Hashed assets (/assets/*-AbCd12.js) → cache-first (immutable)
-//   Navigation (HTML)                   → network-first, cache fallback
+//   Navigation (HTML)                   → stale-while-revalidate (precached on install)
 //   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';
+const CACHE = 'fluxy-v4';
 
-self.addEventListener('install', () => self.skipWaiting());
+// Precache the HTML shell on install so the cache is never empty.
+// Without this, the first navigation isn't intercepted (SW wasn't
+// controlling yet), so refresh would find an empty cache → white screen.
+self.addEventListener('install', (e) => e.waitUntil(
+  caches.open(CACHE).then(c => c.add('/')).then(() => self.skipWaiting())
+));
 
 self.addEventListener('activate', (e) => e.waitUntil(
   caches.keys()
@@ -46,17 +51,19 @@ self.addEventListener('fetch', (event) => {
     return;
   }
 
-  // ── Navigation (HTML pages) → network-first, cached shell fallback ──
-  // On restore after OS kill: if network is slow, show cached shell instantly
+  // ── Navigation (HTML pages) → stale-while-revalidate ──────────────
+  // Serves cached shell INSTANTLY (no white flash on refresh), then
+  // refreshes cache from network in the background.
+  // First visit has no cache → falls through to network.
   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('/')))
-    );
+    event.respondWith(caches.open(CACHE).then(c =>
+      c.match('/').then(hit => {
+        const net = fetch(request)
+          .then(r => { if (r.ok) c.put('/', r.clone()); return r; })
+          .catch(() => hit);
+        return hit || net;
+      })
+    ));
     return;
   }
 

package/workspace/client/src/main.tsx

@@ -9,9 +9,13 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
   </React.StrictMode>,
 );
 
-// Fade out the HTML splash screen now that React has mounted
-const splash = document.getElementById('splash');
-if (splash) {
-  splash.style.opacity = '0';
-  splash.addEventListener('transitionend', () => { splash.style.display = 'none'; }, { once: true });
-}
+// Fade out the HTML splash screen once React has actually painted.
+// React 18's createRoot().render() is async — wait for the next frame
+// to ensure the app is visible before removing the splash.
+requestAnimationFrame(() => requestAnimationFrame(() => {
+  const splash = document.getElementById('splash');
+  if (splash) {
+    splash.style.opacity = '0';
+    splash.addEventListener('transitionend', () => { splash.style.display = 'none'; }, { once: true });
+  }
+}));

package/workspace/client/public/fluxy.svg

@@ -1,56 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256" fill="none">
-<path d="M 240.91,138.91 C 233.17,132.97 219.01,128.82 219.78,105.04 C 222.51,70.32 202.18,34.26 155.19,27.17 C 122.91,22.28 98.81,35.96 80.08,59.11 C 69.99,71.74 59.18,76.12 43.12,75.61 C 39.98,75.51 38.02,75.06 35.42,75.17 C 17.29,75.97 2.11,88.69 2.24,103.78 C 2.35,116.39 13.41,127.29 26.58,127.07 C 35.21,126.92 41.39,123.86 47.89,118.76 C 51.29,116.21 55.71,114.78 58.31,116.93 C 62.68,120.47 59.98,127.97 46.92,136.32 C 32.82,144.78 17.01,156.87 18.19,173.94 C 19.53,191.76 37.19,199.93 54.61,202.21 C 63.18,202.97 70.92,201.38 78.32,201.99 C 88.92,202.91 96.07,207.81 103.91,214.81 C 113.25,223.09 123.72,227.77 136.99,227.34 C 152.17,226.82 163.18,218.71 174.28,207.06 C 184.32,196.76 196.62,191.96 208.76,191.59 C 218.29,191.29 227.23,190.96 235.12,187.22 C 252.26,178.94 259.46,153.81 240.91,138.91 Z" fill="url(#paint0_radial_143_2721)"/>
-<path d="M 142.28,26.41 C 119.01,26.08 98.31,36.68 80.38,58.48 C 70.89,70.46 61.18,76.07 43.66,75.74 C 60.22,76.76 70.92,70.93 79.92,60.09 C 96.71,39.08 117.29,28.48 142.28,26.41 Z" fill="url(#paint1_linear_143_2721)"/>
-<path d="M 200.43,201.63 C 191.8,202.29 184.71,209.18 184.81,214.81 C 184.92,221.44 192.42,226.56 200.01,226.51 C 207.91,226.46 214.46,219.12 214.46,212.93 C 214.46,206.04 207.26,201.15 200.43,201.63 Z" fill="url(#paint2_radial_143_2721)"/>
-<path d="M 241.12,150.21 C 239.69,141.98 232.86,137.88 223.71,139.26 C 210.71,141.38 201.61,157.41 194.78,166.13 C 204.11,159.65 209.17,151.7 222.34,150.1 C 231.13,149.02 237.01,155.06 238.76,156.24 C 240.61,157.46 241.69,153.81 241.12,150.21 Z" fill="url(#paint3_radial_143_2721)"/>
-<path d="M 42.41,80.18 C 33.13,77.01 21.04,78.71 13.84,87.91 C 9.01,94.05 9.49,97.49 11.39,97.65 C 13.73,97.86 16.02,94.16 20.22,90.11 C 26.88,83.64 33.33,82.89 42.41,80.18 Z" fill="url(#paint4_radial_143_2721)"/>
-<path d="M 61.82,142.19 C 55.22,138.19 41.23,143.21 33.74,154.11 C 28.73,161.16 28.16,170.04 33.28,172.1 C 38.69,174.31 46.19,165.86 51.07,160.5 C 56.79,154.21 66.02,144.9 61.82,142.19 Z" fill="url(#paint5_radial_143_2721)"/>
-<path d="M 111.11,86.68 C 105.39,86.68 103.96,91.68 103.96,93.74 C 103.96,99.01 108.01,101.51 111.11,101.51 C 116.98,101.51 119.09,96.87 119.09,93.95 C 119.09,90.06 116.15,86.68 111.11,86.68 Z" fill="url(#paint6_radial_143_2721)"/>
-<path d="M 166.45,86.68 C 160.26,86.68 157.92,91.84 157.92,93.95 C 157.92,99.22 162.02,101.62 165.68,101.62 C 171.09,101.62 173.64,97.13 173.64,93.95 C 173.64,89.85 170.4,86.68 166.45,86.68 Z" fill="url(#paint7_radial_143_2721)"/>
-<path d="M 146.82,99.06 C 143.88,101.83 141.49,102.04 138.79,102.04 C 135.44,102.04 133.16,100.91 130.82,99.06 C 128.81,97.54 126.96,100.76 128.19,102.14 C 130.58,104.96 134.58,106.56 138.79,106.56 C 143.31,106.56 146.82,104.76 148.99,102.14 C 150.32,100.55 148.62,97.33 146.82,99.06 Z" fill="url(#paint8_radial_143_2721)"/>
-<path d="M 199.81,204.07 C 194.82,205.25 191.83,208.94 192.25,211.06 C 192.82,213.88 197.81,213.61 200.41,212.69 C 205.08,211.05 207.15,208.42 206.73,206.41 C 206.31,204.67 203.71,203.29 199.81,204.07 Z" fill="url(#paint9_radial_143_2721)"/>
-<defs>
-<radialGradient id="paint0_radial_143_2721" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(109.896 49.9071) scale(193.071 191.493)">
-<stop stop-color="#00FFFF"/>
-<stop offset="0.354167" stop-color="#9933FF"/>
-<stop offset="0.692708" stop-color="#FE336F"/>
-<stop offset="1" stop-color="#FF7777"/>
-</radialGradient>
-<linearGradient id="paint1_linear_143_2721" x1="113.903" y1="26.3556" x2="113.903" y2="75.8114" gradientUnits="userSpaceOnUse">
-<stop stop-color="#00FFFF"/>
-<stop offset="1" stop-color="#00FFFF" stop-opacity="0.01"/>
-</linearGradient>
-<radialGradient id="paint2_radial_143_2721" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(200.253 209.179) scale(19.3566 17.7296)">
-<stop stop-color="#FFCDBB"/>
-<stop offset="0.994792" stop-color="#FF5555"/>
-</radialGradient>
-<radialGradient id="paint3_radial_143_2721" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(227.953 148.408) rotate(16.5911) scale(18.3468 12.2944)">
-<stop stop-color="#FFD9C5"/>
-<stop offset="1" stop-color="#FFD9C5" stop-opacity="0.01"/>
-</radialGradient>
-<radialGradient id="paint4_radial_143_2721" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(23.7314 86.0908) rotate(29.0072) scale(15.4089 9.09911)">
-<stop stop-color="#99FFFF"/>
-<stop offset="1" stop-color="#00CCFF" stop-opacity="0.01"/>
-</radialGradient>
-<radialGradient id="paint5_radial_143_2721" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(46.4881 153.877) rotate(37.8519) scale(17.2361 10.9818)">
-<stop stop-color="#9999FF"/>
-<stop offset="1" stop-color="#9999FF" stop-opacity="0.01"/>
-</radialGradient>
-<radialGradient id="paint6_radial_143_2721" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(111.098 93.3764) scale(9.10161 8.12939)">
-<stop stop-color="#1E1240"/>
-<stop offset="1" stop-color="#0A003B"/>
-</radialGradient>
-<radialGradient id="paint7_radial_143_2721" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(165.666 93.3764) scale(9.10161 8.12939)">
-<stop stop-color="#1E1240"/>
-<stop offset="1" stop-color="#0A003B"/>
-</radialGradient>
-<radialGradient id="paint8_radial_143_2721" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(138.658 101.292) scale(10.0069 5.26581)">
-<stop stop-color="#1E1240"/>
-<stop offset="1" stop-color="#0A003B"/>
-</radialGradient>
-<radialGradient id="paint9_radial_143_2721" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(199.318 208.168) rotate(16.4322) scale(9.07216 5.68359)">
-<stop stop-color="#FFCDBB"/>
-<stop offset="0.994792" stop-color="#FFCDBB" stop-opacity="0.01"/>
-</radialGradient>
-</defs>
-</svg>