fluxy-bot 0.1.40 → 0.1.42

package/client/src/App.tsx

@@ -6,6 +6,8 @@ import DashboardLayout from './components/Layout/DashboardLayout';
 import DashboardPage from './components/Dashboard/DashboardPage';
 import ChatView from './components/Chat/ChatView';
 import FluxyFab from './components/FluxyFab';
+import BuildOverlay from './components/BuildOverlay';
+
 import OnboardWizard from './components/Onboard/OnboardWizard';
 import {
   Sheet,
@@ -70,6 +72,7 @@ export default function App() {
     <>
       <ErrorBoundary fallback={<DashboardError />}>
         <DashboardLayout onOpenOnboard={() => setShowOnboard(true)}>
+          <BuildOverlay ws={ws} />
           <DashboardPage />
         </DashboardLayout>
       </ErrorBoundary>

package/client/src/components/BuildOverlay.tsx

@@ -0,0 +1,87 @@
+import { useState, useEffect } from 'react';
+import type { WsClient } from '../lib/ws-client';
+
+interface Props {
+  ws: WsClient | null;
+}
+
+export default function BuildOverlay({ ws }: Props) {
+  const [state, setState] = useState<'idle' | 'building' | 'error'>('idle');
+  const [error, setError] = useState('');
+  const [copied, setCopied] = useState(false);
+
+  useEffect(() => {
+    if (!ws) return;
+
+    const unsubs = [
+      ws.on('build:start', () => {
+        setState('building');
+        setError('');
+        setCopied(false);
+      }),
+      ws.on('build:complete', () => {
+        // Wait for API to be healthy before reloading (worker may be restarting)
+        const checkAndReload = () => {
+          fetch('/api/health')
+            .then((r) => { if (r.ok) window.location.reload(); else setTimeout(checkAndReload, 500); })
+            .catch(() => setTimeout(checkAndReload, 500));
+        };
+        checkAndReload();
+      }),
+      ws.on('build:error', (data: { error: string }) => {
+        setState('error');
+        setError(data.error || 'Unknown build error');
+      }),
+    ];
+
+    return () => unsubs.forEach((u) => u());
+  }, [ws]);
+
+  if (state === 'idle') return null;
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(error).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    });
+  };
+
+  return (
+    <div className="absolute inset-0 z-50 bg-black/80 backdrop-blur-sm flex items-center justify-center p-6">
+      {state === 'building' && (
+        <div className="text-center">
+          <div className="inline-block h-8 w-8 animate-spin rounded-full border-2 border-white/20 border-t-white mb-4" />
+          <p className="text-sm text-white/80">Building...</p>
+        </div>
+      )}
+
+      {state === 'error' && (
+        <div className="w-full max-w-lg bg-zinc-900 rounded-lg border border-red-500/30 overflow-hidden">
+          <div className="flex items-center justify-between px-4 py-3 border-b border-red-500/20">
+            <span className="text-sm font-medium text-red-400">Build Failed</span>
+            <div className="flex gap-2">
+              <button
+                onClick={handleCopy}
+                className="px-3 py-1 text-xs rounded bg-white/10 hover:bg-white/20 text-white/80 transition-colors"
+              >
+                {copied ? 'Copied' : 'Copy'}
+              </button>
+              <button
+                onClick={() => setState('idle')}
+                className="px-3 py-1 text-xs rounded bg-white/10 hover:bg-white/20 text-white/80 transition-colors"
+              >
+                Dismiss
+              </button>
+            </div>
+          </div>
+          <pre className="p-4 text-xs text-red-300/90 overflow-auto max-h-64 whitespace-pre-wrap font-mono">
+            {error}
+          </pre>
+          <p className="px-4 pb-3 text-xs text-white/40">
+            Copy this error and paste it in the chat to fix
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -17,7 +17,7 @@ export default function DashboardLayout({ children, onOpenOnboard }: Props) {
           <Sidebar />
         </div>
         {/* Main content */}
-        <main className="flex-1 overflow-y-auto p-4 md:p-6">{children}</main>
+        <main className="relative flex-1 overflow-y-auto p-4 md:p-6">{children}</main>
       </div>
     </div>
   );

package/client/src/hooks/useChat.ts

@@ -52,58 +52,67 @@ export function useChat(ws: WsClient | null) {
       .catch(() => {});
   }, []);
 
-  // Load messages when conversationId is set
+  // Load messages when conversationId is set (with retry for worker restarts)
   useEffect(() => {
     if (!conversationId) return;
-    fetch(`/api/conversations/${conversationId}`)
-      .then((r) => {
-        if (!r.ok) throw new Error('not found');
-        return r.json();
-      })
-      .then((data) => {
-        if (data.messages?.length) {
-          setMessages(
-            data.messages
-              .filter((m: any) => m.role === 'user' || m.role === 'assistant')
-              .map((m: any) => {
-                // Backward compat for audio_data: file path → URL, data: prefix → legacy, else → prepend data URL
-                let audioData: string | undefined;
-                if (m.audio_data) {
-                  if (m.audio_data.startsWith('data:')) {
-                    audioData = m.audio_data; // legacy data URL
-                  } else if (m.audio_data.includes('/')) {
-                    audioData = `/api/files/${m.audio_data}`; // file path → HTTP URL
-                  } else {
-                    audioData = `data:audio/webm;base64,${m.audio_data}`; // raw base64
+    let cancelled = false;
+    let retries = 0;
+
+    const loadMessages = () => {
+      fetch(`/api/conversations/${conversationId}`)
+        .then((r) => {
+          if (!r.ok) throw new Error('not found');
+          return r.json();
+        })
+        .then((data) => {
+          if (cancelled) return;
+          if (data.messages?.length) {
+            setMessages(
+              data.messages
+                .filter((m: any) => m.role === 'user' || m.role === 'assistant')
+                .map((m: any) => {
+                  let audioData: string | undefined;
+                  if (m.audio_data) {
+                    if (m.audio_data.startsWith('data:')) {
+                      audioData = m.audio_data;
+                    } else if (m.audio_data.includes('/')) {
+                      audioData = `/api/files/${m.audio_data}`;
+                    } else {
+                      audioData = `data:audio/webm;base64,${m.audio_data}`;
+                    }
                   }
-                }
-
-                // Parse stored attachments
-                let attachments: StoredAttachment[] | undefined;
-                if (m.attachments) {
-                  try {
-                    attachments = JSON.parse(m.attachments);
-                  } catch { /* ignore malformed */ }
-                }
-
-                return {
-                  id: m.id,
-                  role: m.role,
-                  content: m.content,
-                  timestamp: m.created_at,
-                  audioData,
-                  hasAttachments: !!(attachments && attachments.length > 0),
-                  attachments,
-                };
-              }),
-          );
-        }
-      })
-      .catch(() => {
-        // Conversation gone — clear
-        setConversationId(null);
-        fetch('/api/context/clear', { method: 'POST' }).catch(() => {});
-      });
+
+                  let attachments: StoredAttachment[] | undefined;
+                  if (m.attachments) {
+                    try {
+                      attachments = JSON.parse(m.attachments);
+                    } catch { /* ignore malformed */ }
+                  }
+
+                  return {
+                    id: m.id,
+                    role: m.role,
+                    content: m.content,
+                    timestamp: m.created_at,
+                    audioData,
+                    hasAttachments: !!(attachments && attachments.length > 0),
+                    attachments,
+                  };
+                }),
+            );
+          }
+        })
+        .catch(() => {
+          // Worker may be restarting — retry a few times
+          if (!cancelled && retries < 5) {
+            retries++;
+            setTimeout(loadMessages, 1000);
+          }
+        });
+    };
+
+    loadMessages();
+    return () => { cancelled = true; };
   }, [conversationId]);
 
   // Persist conversationId to DB when it changes
@@ -223,13 +232,14 @@ export function useChat(ws: WsClient | null) {
   }, [ws, conversationId]);
 
   const clearContext = useCallback(() => {
+    // Clear UI state only — starts a fresh conversation on next message.
+    // Old messages stay in DB (used as context for the agent).
     setMessages([]);
     setConversationId(null);
     setStreamBuffer('');
     setStreaming(false);
     setTools([]);
     prevConvId.current = null;
-    loaded.current = false;
     fetch('/api/context/clear', { method: 'POST' }).catch(() => {});
   }, []);