fluxy-bot 0.1.41 → 0.1.43

package/client/src/App.tsx

@@ -7,6 +7,7 @@ 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,
@@ -71,6 +72,7 @@ export default function App() {
     <>
       <ErrorBoundary fallback={<DashboardError />}>
         <DashboardLayout onOpenOnboard={() => setShowOnboard(true)}>
+          <BuildOverlay ws={ws} />
           <DashboardPage />
         </DashboardLayout>
       </ErrorBoundary>
@@ -117,7 +119,6 @@ export default function App() {
         </SheetContent>
       </Sheet>
 
-      <BuildOverlay ws={ws} />
       <FluxyFab onClick={() => setChatOpen((o) => !o)} />
 
       {/* Onboarding wizard overlay */}

package/client/src/components/BuildOverlay.tsx

@@ -6,7 +6,7 @@ interface Props {
 }
 
 export default function BuildOverlay({ ws }: Props) {
-  const [state, setState] = useState<'idle' | 'building' | 'error'>('idle');
+  const [toast, setToast] = useState(false);
   const [error, setError] = useState('');
   const [copied, setCopied] = useState(false);
 
@@ -14,27 +14,18 @@ export default function BuildOverlay({ ws }: Props) {
     if (!ws) return;
 
     const unsubs = [
-      ws.on('build:start', () => {
-        setState('building');
-        setError('');
-        setCopied(false);
-      }),
-      ws.on('build:complete', () => {
-        setState('idle');
-        // Auto-refresh after a brief delay so the user sees the transition
-        setTimeout(() => window.location.reload(), 500);
+      ws.on('changes:applied', () => {
+        setToast(true);
+        setTimeout(() => setToast(false), 3000);
       }),
       ws.on('build:error', (data: { error: string }) => {
-        setState('error');
-        setError(data.error || 'Unknown build error');
+        setError(data.error || 'Unknown error');
       }),
     ];
 
     return () => unsubs.forEach((u) => u());
   }, [ws]);
 
-  if (state === 'idle') return null;
-
   const handleCopy = () => {
     navigator.clipboard.writeText(error).then(() => {
       setCopied(true);
@@ -43,18 +34,19 @@ export default function BuildOverlay({ ws }: Props) {
   };
 
   return (
-    <div className="fixed inset-0 z-[100] 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>
+    <>
+      {/* Toast notification */}
+      {toast && (
+        <div className="fixed bottom-4 right-4 z-50 px-4 py-2 bg-zinc-800 border border-zinc-700 rounded-lg shadow-lg text-sm text-zinc-300 animate-in fade-in slide-in-from-bottom-2 duration-200">
+          Dashboard updated
         </div>
       )}
 
-      {state === 'error' && (
-        <div className="w-full max-w-lg bg-zinc-900 rounded-lg border border-red-500/30 overflow-hidden">
+      {/* HMR error — non-blocking, dismissible */}
+      {error && (
+        <div className="fixed bottom-4 right-4 z-50 w-96 max-w-[calc(100vw-2rem)] bg-zinc-900 rounded-lg border border-red-500/30 shadow-lg 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>
+            <span className="text-sm font-medium text-red-400">HMR Error</span>
             <div className="flex gap-2">
               <button
                 onClick={handleCopy}
@@ -63,14 +55,14 @@ export default function BuildOverlay({ ws }: Props) {
                 {copied ? 'Copied' : 'Copy'}
               </button>
               <button
-                onClick={() => setState('idle')}
+                onClick={() => setError('')}
                 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">
+          <pre className="p-4 text-xs text-red-300/90 overflow-auto max-h-48 whitespace-pre-wrap font-mono">
             {error}
           </pre>
           <p className="px-4 pb-3 text-xs text-white/40">
@@ -78,6 +70,6 @@ export default function BuildOverlay({ ws }: Props) {
           </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,56 +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(() => {
-        // Network error (worker may be restarting) — don't clear, just ignore
-      });
+
+                  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
@@ -121,7 +132,8 @@ export function useChat(ws: WsClient | null) {
     if (!ws) return;
 
     const unsubs = [
-      ws.on('bot:typing', () => {
+      ws.on('bot:typing', (data: { conversationId?: string }) => {
+        if (data.conversationId) setConversationId(data.conversationId);
         setStreaming(true);
         setTools([]);
       }),

package/client/src/lib/ws-client.ts

@@ -20,7 +20,7 @@ export class WsClient {
 
   constructor(url?: string) {
     const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
-    const host = import.meta.env.DEV ? 'localhost:3000' : location.host;
+    const host = location.host;
     this.url = url ?? `${proto}//${host}/ws`;
   }