fluxy-bot 0.9.5 → 0.9.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fluxy-bot",
-  "version": "0.9.5",
+  "version": "0.9.7",
   "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);
     })
@@ -83,11 +154,12 @@ self.addEventListener('notificationclick', (event) => {
 });
 `;
 
-const RECOVERING_HTML = `<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Recovering</title>
-<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>
+const RECOVERING_HTML = `<!DOCTYPE html><html style="background:#222122"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Fluxy</title>
+<style>@keyframes _fs{to{transform:rotate(360deg)}}body{background:#222122;margin:0}</style></head>
+<body><div style="background:#222122;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100dvh;width:100vw;font-family:system-ui,-apple-system,sans-serif">
+<img src="/fluxy-icon-192.png" width="56" height="56" style="border-radius:14px;margin-bottom:20px" alt="" />
+<div style="width:18px;height:18px;border:2px solid rgba(255,255,255,0.12);border-top-color:rgba(255,255,255,0.7);border-radius:50%;animation:_fs .6s linear infinite"></div>
+</div><script>setTimeout(function(){location.reload()},3000)</script>
 <script src="/fluxy/widget.js"></script></body></html>`;
 
 export async function startSupervisor() {

package/worker/prompts/fluxy-system-prompt.txt

@@ -318,6 +318,53 @@ When an MCP server is configured, its tools appear alongside your built-in tools
 - `shared/` — shared utilities
 - `bin/` — CLI entry point
 
+## Workspace Security — CRITICAL: Two Password Systems
+
+There are TWO completely separate password systems in Fluxy. Understanding the difference is essential — confusing them WILL cause problems.
+
+### 1. Chat Password (Portal Password) — DO NOT TOUCH
+
+- **Set during onboarding** — it is MANDATORY. Every Fluxy has one.
+- **Protects the chat interface** (fluxy.bot/your_name) where your human talks to you.
+- Stored as `portal_pass` in the **worker** database (scrypt-hashed). You cannot and should not access or modify this.
+- **This is the MOST CRITICAL credential** — if compromised, an attacker gets chat access, and through you, they get terminal access, file access, and potentially root access to the entire machine.
+- Optional 2FA (TOTP) can be layered on top for extra protection.
+- **YOU DO NOT SET OR CHANGE THIS.** It was configured during onboarding. If your human mentions their "chat password" or "portal password", it refers to this. Never try to look it up, reset it, or modify it. If they need to change it, they re-run onboarding.
+
+### 2. Workspace Password (Dashboard Password) — YOU CAN SET THIS
+
+- **OPTIONAL — not set by default.**
+- Protects the **dashboard/workspace** (the `/app/` path) where your human's mini-apps, modules, data, and tools live.
+- **Without this password, ANYONE who knows the URL can view the entire workspace** — all pages, all data displayed in the UI.
+- Your human sets this **through you** — when they say "add a password", "protect the workspace", "lock the dashboard", or just "set a password", they mean THIS one. They already have a chat password.
+
+**How to set the workspace password:**
+```
+POST /app/api/workspace/set-password
+Body: { "password": "the_password" }
+```
+
+**How to remove it:**
+```
+POST /app/api/workspace/remove-password
+```
+
+**How it works under the hood:**
+- Password is hashed (scrypt with random salt) and stored in the workspace `app.db` database (`workspace_settings` table).
+- When someone visits the dashboard, a lock screen appears asking for the password.
+- On correct entry, a 7-day session token is created and stored in the browser's localStorage.
+- The session persists across page reloads until it expires or the password is changed.
+- Changing the password invalidates all existing sessions.
+
+### Default State — BE AWARE
+
+The workspace is **NOT secured by default**. If your human's Fluxy is accessible via the internet (relay, Cloudflare tunnel, etc.) and they haven't set a workspace password, their workspace data is visible to anyone who knows or guesses the URL. Be aware of this and **proactively suggest setting a workspace password** when appropriate — especially if sensitive data is in the workspace.
+
+### The Cardinal Rule
+
+**When your human says "add a password" or "set a password" → they mean the WORKSPACE password.**
+They already have a chat password from onboarding. Don't confuse the two. Don't go looking in the worker database for `portal_pass`. Don't tell them "you already have a password set." Set the workspace password using the route above.
+
 ## Modular Philosophy
 When your human asks for something new, don't rebuild the app — add a module. A sidebar icon, a dashboard card, a new page. Yesterday it was a CRM, today a finance tracker, tomorrow a diet log. They all coexist. Keep it organized.
 

package/workspace/client/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" style="background:#222122">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, interactive-widget=resizes-content" />
@@ -10,9 +10,21 @@
     <link rel="apple-touch-icon" href="/fluxy-icon-192.png" />
     <link rel="manifest" href="/manifest.json" />
     <title>Fluxy</title>
+    <style>
+      @keyframes _fs{to{transform:rotate(360deg)}}
+    </style>
   </head>
-  <body class="bg-background text-foreground">
+  <body class="bg-background text-foreground" style="background:#222122">
+    <!-- App shell splash — visible instantly, no JS needed.
+         Covers the screen during reload/restore so there's never a white flash.
+         React hides it on mount; shown again before any reload. -->
+    <div id="splash" style="background:#222122;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100dvh;width:100vw;position:fixed;inset:0;z-index:9999;font-family:system-ui,-apple-system,sans-serif;transition:opacity .25s ease-out">
+      <img src="/fluxy-icon-192.png" width="56" height="56" style="border-radius:14px;margin-bottom:20px" alt="" />
+      <div style="width:18px;height:18px;border:2px solid rgba(255,255,255,0.12);border-top-color:rgba(255,255,255,0.7);border-radius:50%;animation:_fs .6s linear infinite"></div>
+    </div>
+
     <div id="root"></div>
+
     <script>
       // Global error handler — catches errors outside React's Error Boundary
       // (e.g., Vite compilation errors, module loading failures)

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,72 @@ export default function App() {
   const [rebuildState, setRebuildState] = useState<'idle' | 'rebuilding' | 'error'>('idle');
   const [buildError, setBuildError] = useState('');
 
+  // ── Seamless reload: splash screen + freeze-thaw ──────────────────
+  // Prevents the "white flash" and "delayed reload" jank that plagues PWAs.
+  //
+  // How it works:
+  // 1. Any location.reload() shows the HTML splash BEFORE reloading
+  //    so the user sees: app → splash → splash → app (no white gap).
+  // 2. When returning from background (> 30s hidden), the splash shows
+  //    IMMEDIATELY — before Vite's delayed reconnect-reload can fire.
+  //    If no reload comes within 3s, the splash fades away.
+  // 3. Vite full-reloads trigger the splash too (same mechanism).
+  useEffect(() => {
+    const splash = document.getElementById('splash');
+    let hiddenAt = 0;
+
+    // Show the splash screen (used before reloads and on resume)
+    function showSplash() {
+      if (!splash) return;
+      splash.style.display = 'flex';
+      splash.style.opacity = '1';
+    }
+
+    // Hide the splash screen with a fade
+    function hideSplash() {
+      if (!splash || splash.style.display === 'none') return;
+      splash.style.opacity = '0';
+      splash.addEventListener('transitionend', () => { splash.style.display = 'none'; }, { once: true });
+    }
+
+    // Wrap location.reload: show splash, wait for paint, then reload.
+    // This ensures the dark splash is visible during the brief unload→load gap.
+    const origReload = location.reload.bind(location);
+    location.reload = () => {
+      showSplash();
+      requestAnimationFrame(() => requestAnimationFrame(() => origReload()));
+    };
+
+    // Vite HMR: show splash before a full-reload
+    if (import.meta.hot) {
+      import.meta.hot.on('vite:beforeFullReload', () => showSplash());
+    }
+
+    // Freeze-thaw: when returning from background after > 30s,
+    // show splash proactively so the user never sees the "working app
+    // suddenly yank away" pattern. If Vite decides to full-reload,
+    // the splash is already visible. If not, we fade it away after 3s.
+    let thawTimer: ReturnType<typeof setTimeout>;
+    const BACKGROUND_THRESHOLD = 30_000; // 30 seconds
+
+    const onVisChange = () => {
+      if (document.visibilityState === 'hidden') {
+        hiddenAt = Date.now();
+      } else if (hiddenAt && Date.now() - hiddenAt > BACKGROUND_THRESHOLD) {
+        showSplash();
+        // Give Vite 3s to trigger a reload; if it doesn't, hide splash
+        clearTimeout(thawTimer);
+        thawTimer = setTimeout(hideSplash, 3_000);
+      }
+    };
+    document.addEventListener('visibilitychange', onVisChange);
+
+    return () => {
+      document.removeEventListener('visibilitychange', onVisChange);
+      clearTimeout(thawTimer);
+    };
+  }, []);
+
   useEffect(() => {
     fetch('/api/settings')
       .then((r) => r.json())

package/workspace/client/src/main.tsx

@@ -8,3 +8,10 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
     <App />
   </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 });
+}