bloby-bot 0.63.0 → 0.65.0

package/workspace/client/src/App.tsx

@@ -28,80 +28,27 @@ export default function App() {
   const [showOnboard, setShowOnboard] = useState(false);
   const [userName, setUserName] = useState('');
   const [botName, setBotName] = useState('Bloby');
-  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).
+  // ── Seamless reload: splash before full-reloads ───────────────────
+  // Vite's reload-on-reconnect is suppressed by the supervisor-injected
+  // workspace-guard (which also owns location.reload wrapping), so the
+  // only reloads left are real ones: Vite full-reloads after frontend
+  // changes. Show the HTML splash before those so the user sees
+  // app → splash → app instead of a white flash.
   useEffect(() => {
     const splash = document.getElementById('splash');
-    let hiddenAt = 0;
 
-    // Show the dark background (used before reloads and on resume)
+    // Show the dark background before the reload unloads the page
     function showSplash() {
       if (!splash) return;
       splash.style.display = 'block';
       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.
-    try {
-      const origReload = location.reload.bind(location);
-      Object.defineProperty(location, 'reload', {
-        configurable: true,
-        value: () => {
-          showSplash();
-          requestAnimationFrame(() => requestAnimationFrame(() => origReload()));
-        },
-      });
-    } catch {
-      // location.reload is non-configurable in some browsers — skip override
-    }
-
     // 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(() => {
@@ -119,39 +66,18 @@ export default function App() {
       .catch(() => {});
   }, []);
 
-  // Listen for rebuild events from Bloby iframe via postMessage
+  // Listen for events from Bloby iframes via postMessage.
+  // 'bloby:hmr-update' is intentionally ignored: Vite HMR handles hot
+  // updates natively, and a manual location.reload() here would kill the
+  // chat iframe's WebSocket connection for nothing.
   useEffect(() => {
-    let safetyTimer: ReturnType<typeof setTimeout>;
     const handler = (e: MessageEvent) => {
-      if (e.data?.type === 'bloby:rebuilding') {
-        setRebuildState('rebuilding');
-        setBuildError('');
-        // Safety: auto-reload after 60s in case app:rebuilt message is lost
-        clearTimeout(safetyTimer);
-        safetyTimer = setTimeout(() => location.reload(), 60_000);
-      } else if (e.data?.type === 'bloby:rebuilt') {
-        clearTimeout(safetyTimer);
-        setRebuildState('idle');
-        location.reload();
-      } else if (e.data?.type === 'bloby:build-error') {
-        clearTimeout(safetyTimer);
-        setRebuildState('error');
-        setBuildError(e.data.error || 'Build failed');
-        setTimeout(() => setRebuildState('idle'), 5000);
-      } else if (e.data?.type === 'bloby:onboard-complete') {
+      if (e.data?.type === 'bloby:onboard-complete') {
         setShowOnboard(false);
-      } else if (e.data?.type === 'bloby:hmr-update') {
-        // Vite HMR handles hot updates natively — no manual reload needed.
-        // Manual location.reload() here was causing unnecessary full-page refreshes
-        // that killed the chat iframe's WebSocket connection.
-
       }
     };
     window.addEventListener('message', handler);
-    return () => {
-      window.removeEventListener('message', handler);
-      clearTimeout(safetyTimer);
-    };
+    return () => window.removeEventListener('message', handler);
   }, []);
 
   return (
@@ -172,22 +98,6 @@ export default function App() {
           style={{ position: 'fixed', inset: 0, width: '100vw', height: '100dvh', border: 'none', zIndex: 200 }}
         />
       )}
-
-      {rebuildState !== 'idle' && (
-        <div className="fixed inset-0 z-[49] flex flex-col items-center justify-center bg-background/90">
-          <video
-            src="/bloby_tilts.webm"
-            autoPlay
-            loop
-            muted
-            playsInline
-            className="h-24 w-24 rounded-full object-cover"
-          />
-          <p className="mt-4 text-sm text-muted-foreground">
-            {rebuildState === 'rebuilding' ? 'Rebuilding app...' : buildError}
-          </p>
-        </div>
-      )}
     </>
   );
 }

package/workspace/client/src/components/Layout/DashboardLayout.tsx

@@ -14,14 +14,11 @@ export default function DashboardLayout({ children, userName, botName = 'Bloby'
 
   useEffect(() => {
     const check = () => {
-      console.log('[health] checking /app/api/health…');
       fetch('/app/api/health', { signal: AbortSignal.timeout(3000) })
         .then((r) => {
-          console.log(`[health] response: ${r.status} ok=${r.ok}`);
           setStatus(r.ok ? 'healthy' : 'restarting');
         })
         .catch((err) => {
-          console.warn('[health] fetch failed:', err.message ?? err);
           setStatus('restarting');
         });
     };