fluxy-bot 0.8.9 → 0.9.0

package/supervisor/chat/fluxy-main.tsx

@@ -1,667 +1,529 @@
 import React, { useEffect, useRef, useState } from 'react';
 import ReactDOM from 'react-dom/client';
-import {
-    ArrowLeft,
-    MoreVertical,
-    Trash2,
-    Wand2,
-    Download,
-    X,
-    Share,
-    Bell,
-    BellRing,
-    BellOff
-} from 'lucide-react';
+import { ArrowLeft, MoreVertical, Trash2, Wand2, Download, X, Share, Bell, BellRing, BellOff } from 'lucide-react';
 import { WsClient } from './src/lib/ws-client';
 import { useFluxyChat } from './src/hooks/useFluxyChat';
 import OnboardWizard from './OnboardWizard';
 import LoginScreen from './src/components/LoginScreen';
-import {
-    getAuthToken,
-    setAuthToken,
-    clearAuthToken,
-    authFetch,
-    onAuthFailure
-} from './src/lib/auth';
+import { getAuthToken, setAuthToken, clearAuthToken, authFetch, onAuthFailure } from './src/lib/auth';
 import MessageList from './src/components/Chat/MessageList';
 import InputBar from './src/components/Chat/InputBar';
 import './src/styles/globals.css';
 
 function FluxyApp() {
-    const clientRef = useRef<WsClient | null>(null);
-    const [connected, setConnected] = useState(false);
-    const [botName, setBotName] = useState('Fluxy');
-    const [whisperEnabled, setWhisperEnabled] = useState(false);
-    const [menuOpen, setMenuOpen] = useState(false);
-    const [showWizard, setShowWizard] = useState(false);
-    const [reloadTrigger, setReloadTrigger] = useState(0);
-    const menuRef = useRef<HTMLDivElement>(null);
-    const wasConnected = useRef(false);
-
-    // Push notifications
-    const [pushState, setPushState] = useState<
-        'loading' | 'unsupported' | 'denied' | 'subscribed' | 'unsubscribed'
-    >('loading');
-
-    function urlBase64ToUint8Array(base64String: string) {
-        const padding = '='.repeat((4 - (base64String.length % 4)) % 4);
-        const base64 = (base64String + padding)
-            .replace(/-/g, '+')
-            .replace(/_/g, '/');
-        const raw = atob(base64);
-        const arr = new Uint8Array(raw.length);
-        for (let i = 0; i < raw.length; i++) arr[i] = raw.charCodeAt(i);
-        return arr;
+  const clientRef = useRef<WsClient | null>(null);
+  const [connected, setConnected] = useState(false);
+  const [botName, setBotName] = useState('Fluxy');
+  const [whisperEnabled, setWhisperEnabled] = useState(false);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [showWizard, setShowWizard] = useState(false);
+  const [reloadTrigger, setReloadTrigger] = useState(0);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const wasConnected = useRef(false);
+
+  // Push notifications
+  const [pushState, setPushState] = useState<'loading' | 'unsupported' | 'denied' | 'subscribed' | 'unsubscribed'>('loading');
+
+  function urlBase64ToUint8Array(base64String: string) {
+    const padding = '='.repeat((4 - (base64String.length % 4)) % 4);
+    const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');
+    const raw = atob(base64);
+    const arr = new Uint8Array(raw.length);
+    for (let i = 0; i < raw.length; i++) arr[i] = raw.charCodeAt(i);
+    return arr;
+  }
+
+  async function subscribePush() {
+    try {
+      const permission = await Notification.requestPermission();
+      if (permission !== 'granted') { setPushState('denied'); return; }
+
+      const reg = await navigator.serviceWorker.ready;
+      const res = await fetch('/api/push/vapid-public-key');
+      const { publicKey } = await res.json();
+
+      const subscription = await reg.pushManager.subscribe({
+        userVisibleOnly: true,
+        applicationServerKey: urlBase64ToUint8Array(publicKey),
+      });
+
+      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 }),
+      });
+
+      setPushState('subscribed');
+    } catch (err) {
+      console.error('[push] Subscribe failed:', err);
     }
-
-    async function subscribePush() {
-        try {
-            const permission = await Notification.requestPermission();
-            if (permission !== 'granted') {
-                setPushState('denied');
-                return;
-            }
-
-            const reg = await navigator.serviceWorker.ready;
-            const res = await fetch('/api/push/vapid-public-key');
-            const { publicKey } = await res.json();
-
-            const subscription = await reg.pushManager.subscribe({
-                userVisibleOnly: true,
-                applicationServerKey: urlBase64ToUint8Array(publicKey)
-            });
-
-            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 })
-            });
-
-            setPushState('subscribed');
-        } catch (err) {
-            console.error('[push] Subscribe failed:', err);
-        }
+  }
+
+  async function unsubscribePush() {
+    try {
+      const reg = await navigator.serviceWorker.ready;
+      const subscription = await reg.pushManager.getSubscription();
+      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 }),
+        });
+      }
+      setPushState('unsubscribed');
+    } catch (err) {
+      console.error('[push] Unsubscribe failed:', err);
     }
-
-    async function unsubscribePush() {
-        try {
-            const reg = await navigator.serviceWorker.ready;
-            const subscription = await reg.pushManager.getSubscription();
-            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 })
-                });
-            }
-            setPushState('unsubscribed');
-        } catch (err) {
-            console.error('[push] Unsubscribe failed:', err);
+  }
+
+  // Install App (PWA)
+  const [showIosModal, setShowIosModal] = useState(false);
+  const isIos = /iPad|iPhone|iPod/.test(navigator.userAgent);
+  const isStandalone = window.matchMedia('(display-mode: standalone)').matches || (navigator as any).standalone;
+  const isMobile = /Android|iPhone|iPad|iPod|webOS|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+  const isInIframe = window.self !== window.top;
+
+  // Listen for install result from parent (when in iframe)
+  useEffect(() => {
+    const handler = (e: MessageEvent) => {
+      if (e.data?.type === 'fluxy:show-ios-install') {
+        setShowIosModal(true);
+      }
+    };
+    window.addEventListener('message', handler);
+    return () => window.removeEventListener('message', handler);
+  }, []);
+
+  // Auth state
+  const [authChecked, setAuthChecked] = useState(false);
+  const [authRequired, setAuthRequired] = useState(false);
+  const [authenticated, setAuthenticated] = useState(false);
+  const [totpEnabled, setTotpEnabled] = useState(false);
+
+  // Check auth on mount
+  useEffect(() => {
+    (async () => {
+      try {
+        const res = await fetch('/api/onboard/status');
+        const data = await res.json();
+        if (data.totpEnabled) setTotpEnabled(true);
+
+        if (!data.portalConfigured) {
+          // No password set — skip auth entirely
+          setAuthRequired(false);
+          setAuthenticated(true);
+          setAuthChecked(true);
+          return;
         }
-    }
 
-    // Install App (PWA)
-    const [showIosModal, setShowIosModal] = useState(false);
-    const isIos = /iPad|iPhone|iPod/.test(navigator.userAgent);
-    const isStandalone =
-        window.matchMedia('(display-mode: standalone)').matches ||
-        (navigator as any).standalone;
-    const isMobile =
-        /Android|iPhone|iPad|iPod|webOS|BlackBerry|IEMobile|Opera Mini/i.test(
-            navigator.userAgent
-        );
-    const isInIframe = window.self !== window.top;
-
-    // Listen for install result from parent (when in iframe)
-    useEffect(() => {
-        const handler = (e: MessageEvent) => {
-            if (e.data?.type === 'fluxy:show-ios-install') {
-                setShowIosModal(true);
-            }
-        };
-        window.addEventListener('message', handler);
-        return () => window.removeEventListener('message', handler);
-    }, []);
-
-    // Auth state
-    const [authChecked, setAuthChecked] = useState(false);
-    const [authRequired, setAuthRequired] = useState(false);
-    const [authenticated, setAuthenticated] = useState(false);
-    const [totpEnabled, setTotpEnabled] = useState(false);
-
-    // Check auth on mount
-    useEffect(() => {
-        (async () => {
-            try {
-                const res = await fetch('/api/onboard/status');
-                const data = await res.json();
-                if (data.totpEnabled) setTotpEnabled(true);
-
-                if (!data.portalConfigured) {
-                    // No password set — skip auth entirely
-                    setAuthRequired(false);
-                    setAuthenticated(true);
-                    setAuthChecked(true);
-                    return;
-                }
-
-                setAuthRequired(true);
-
-                // Check if we have a valid token in localStorage
-                const token = getAuthToken();
-                if (token) {
-                    const vRes = await fetch(
-                        `/api/portal/validate-token?token=${encodeURIComponent(token)}`
-                    );
-                    const vData = await vRes.json();
-                    if (vData.valid) {
-                        setAuthenticated(true);
-                        setAuthChecked(true);
-                        return;
-                    }
-                    clearAuthToken();
-                }
-
-                setAuthenticated(false);
-                setAuthChecked(true);
-            } catch {
-                // Worker not ready — skip auth, let it retry later
-                setAuthenticated(true);
-                setAuthChecked(true);
-            }
-        })();
-    }, []);
+        setAuthRequired(true);
+
+        // Check if we have a valid token in localStorage
+        const token = getAuthToken();
+        if (token) {
+          const vRes = await fetch(`/api/portal/validate-token?token=${encodeURIComponent(token)}`);
+          const vData = await vRes.json();
+          if (vData.valid) {
+            setAuthenticated(true);
+            setAuthChecked(true);
+            return;
+          }
+          clearAuthToken();
+        }
 
-    const handleLogin = (token: string) => {
-        setAuthToken(token);
+        setAuthenticated(false);
+        setAuthChecked(true);
+      } catch {
+        // Worker not ready — skip auth, let it retry later
         setAuthenticated(true);
+        setAuthChecked(true);
+      }
+    })();
+  }, []);
+
+  const handleLogin = (token: string) => {
+    setAuthToken(token);
+    setAuthenticated(true);
+  };
+
+  // Handle mid-session token expiry (authFetch gets 401)
+  useEffect(() => {
+    onAuthFailure(() => {
+      setAuthenticated(false);
+      setAuthRequired(true);
+    });
+  }, []);
+
+  // Check push state on mount
+  useEffect(() => {
+    if (!authenticated) return;
+    (async () => {
+      if (!('PushManager' in window) || !('serviceWorker' in navigator)) {
+        setPushState('unsupported');
+        return;
+      }
+      if (Notification.permission === 'denied') {
+        setPushState('denied');
+        return;
+      }
+      try {
+        const reg = await navigator.serviceWorker.ready;
+        const subscription = await reg.pushManager.getSubscription();
+        if (subscription) {
+          const res = await fetch(`/api/push/status?endpoint=${encodeURIComponent(subscription.endpoint)}`);
+          const data = await res.json();
+          setPushState(data.subscribed ? 'subscribed' : 'unsubscribed');
+        } else {
+          setPushState('unsubscribed');
+        }
+      } catch {
+        setPushState('unsupported');
+      }
+    })();
+  }, [authenticated]);
+
+  // Connect WebSocket only when authenticated
+  useEffect(() => {
+    if (!authenticated) return;
+
+    const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const host = location.host;
+    const client = new WsClient(`${proto}//${host}/fluxy/ws`, getAuthToken);
+    clientRef.current = client;
+
+    const unsub = client.onStatus((isConnected) => {
+      setConnected(isConnected);
+      // On reconnect, trigger a reload from DB to catch missed messages
+      if (isConnected && wasConnected.current) {
+        setReloadTrigger((n) => n + 1);
+      }
+      wasConnected.current = isConnected;
+    });
+
+    // Forward rebuild/HMR events to parent (dashboard) via postMessage
+    const unsubRebuilding = client.on('app:rebuilding', () => {
+      console.log('[fluxy] app:rebuilding received');
+      window.parent?.postMessage({ type: 'fluxy:rebuilding' }, '*');
+    });
+    const unsubRebuilt = client.on('app:rebuilt', () => {
+      console.log('[fluxy] app:rebuilt received');
+      window.parent?.postMessage({ type: 'fluxy:rebuilt' }, '*');
+    });
+    const unsubBuildError = client.on('app:build-error', (data: { error: string }) => {
+      console.log('[fluxy] app:build-error received:', data.error);
+      window.parent?.postMessage({ type: 'fluxy:build-error', error: data.error }, '*');
+    });
+    const unsubHmr = client.on('app:hmr-update', () => {
+      console.log('[fluxy] Vite HMR update — changes applied automatically');
+      window.parent?.postMessage({ type: 'fluxy:hmr-update' }, '*');
+    });
+
+    client.connect();
+
+    return () => {
+      unsub();
+      unsubRebuilding();
+      unsubRebuilt();
+      unsubBuildError();
+      unsubHmr();
+      client.disconnect();
     };
+  }, [authenticated]);
+
+  // Try to load settings (will work when worker is up, fail silently when down)
+  useEffect(() => {
+    if (!authenticated) return;
+    authFetch('/api/settings')
+      .then((r) => r.json())
+      .then((s) => {
+        if (s.agent_name) setBotName(s.agent_name);
+        if (s.whisper_enabled === 'true') setWhisperEnabled(true);
+      })
+      .catch(() => {});
+  }, [authenticated]);
+
+  // Close menu on outside click
+  useEffect(() => {
+    if (!menuOpen) return;
+    const handler = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) setMenuOpen(false);
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [menuOpen]);
 
-    // Handle mid-session token expiry (authFetch gets 401)
-    useEffect(() => {
-        onAuthFailure(() => {
-            setAuthenticated(false);
-            setAuthRequired(true);
-        });
-    }, []);
-
-    // Check push state on mount
-    useEffect(() => {
-        if (!authenticated) return;
-        (async () => {
-            if (!('PushManager' in window) || !('serviceWorker' in navigator)) {
-                setPushState('unsupported');
-                return;
-            }
-            if (Notification.permission === 'denied') {
-                setPushState('denied');
-                return;
-            }
-            try {
-                const reg = await navigator.serviceWorker.ready;
-                const subscription = await reg.pushManager.getSubscription();
-                if (subscription) {
-                    const res = await fetch(
-                        `/api/push/status?endpoint=${encodeURIComponent(subscription.endpoint)}`
-                    );
-                    const data = await res.json();
-                    setPushState(
-                        data.subscribed ? 'subscribed' : 'unsubscribed'
-                    );
-                } else {
-                    setPushState('unsubscribed');
-                }
-            } catch {
-                setPushState('unsupported');
-            }
-        })();
-    }, [authenticated]);
-
-    // Connect WebSocket only when authenticated
-    useEffect(() => {
-        if (!authenticated) return;
-
-        const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
-        const host = location.host;
-        const client = new WsClient(`${proto}//${host}/fluxy/ws`, getAuthToken);
-        clientRef.current = client;
-
-        const unsub = client.onStatus(isConnected => {
-            setConnected(isConnected);
-            // On reconnect, trigger a reload from DB to catch missed messages
-            if (isConnected && wasConnected.current) {
-                setReloadTrigger(n => n + 1);
-            }
-            wasConnected.current = isConnected;
-        });
-
-        // Forward rebuild/HMR events to parent (dashboard) via postMessage
-        const unsubRebuilding = client.on('app:rebuilding', () => {
-            console.log('[fluxy] app:rebuilding received');
-            window.parent?.postMessage({ type: 'fluxy:rebuilding' }, '*');
-        });
-        const unsubRebuilt = client.on('app:rebuilt', () => {
-            console.log('[fluxy] app:rebuilt received');
-            window.parent?.postMessage({ type: 'fluxy:rebuilt' }, '*');
-        });
-        const unsubBuildError = client.on(
-            'app:build-error',
-            (data: { error: string }) => {
-                console.log('[fluxy] app:build-error received:', data.error);
-                window.parent?.postMessage(
-                    { type: 'fluxy:build-error', error: data.error },
-                    '*'
-                );
-            }
-        );
-        const unsubHmr = client.on('app:hmr-update', () => {
-            console.log(
-                '[fluxy] Vite HMR update — changes applied automatically'
-            );
-            window.parent?.postMessage({ type: 'fluxy:hmr-update' }, '*');
-        });
-
-        client.connect();
-
-        return () => {
-            unsub();
-            unsubRebuilding();
-            unsubRebuilt();
-            unsubBuildError();
-            unsubHmr();
-            client.disconnect();
-        };
-    }, [authenticated]);
-
-    // Try to load settings (will work when worker is up, fail silently when down)
-    useEffect(() => {
-        if (!authenticated) return;
-        authFetch('/api/settings')
-            .then(r => r.json())
-            .then(s => {
-                if (s.agent_name) setBotName(s.agent_name);
-                if (s.whisper_enabled === 'true') setWhisperEnabled(true);
-            })
-            .catch(() => {});
-    }, [authenticated]);
-
-    // Close menu on outside click
-    useEffect(() => {
-        if (!menuOpen) return;
-        const handler = (e: MouseEvent) => {
-            if (menuRef.current && !menuRef.current.contains(e.target as Node))
-                setMenuOpen(false);
-        };
-        document.addEventListener('mousedown', handler);
-        return () => document.removeEventListener('mousedown', handler);
-    }, [menuOpen]);
-
-    const {
-        messages,
-        streaming,
-        streamBuffer,
-        tools,
-        hasMore,
-        loadOlder,
-        sendMessage,
-        stopStreaming,
-        clearContext
-    } = useFluxyChat(clientRef.current, reloadTrigger, authenticated);
-
-    // Auth gate: show spinner while checking, login screen if needed
-    if (!authChecked) {
-        return (
-            <div className="flex items-center justify-center h-dvh">
-                <div className="w-6 h-6 border-2 border-white/10 border-t-white/50 rounded-full animate-spin" />
-            </div>
-        );
-    }
-
-    if (authRequired && !authenticated) {
-        return <LoginScreen onLogin={handleLogin} totpEnabled={totpEnabled} />;
-    }
+  const { messages, streaming, streamBuffer, tools, hasMore, loadOlder, sendMessage, stopStreaming, clearContext } =
+    useFluxyChat(clientRef.current, reloadTrigger, authenticated);
 
+  // Auth gate: show spinner while checking, login screen if needed
+  if (!authChecked) {
     return (
-        <div className="flex flex-col h-dvh overflow-hidden">
-            {/* Header */}
-            <div className="flex items-center gap-3 px-4 py-3 border-b border-border shrink-0">
+      <div className="flex items-center justify-center h-dvh">
+        <div className="w-6 h-6 border-2 border-white/10 border-t-white/50 rounded-full animate-spin" />
+      </div>
+    );
+  }
+
+  if (authRequired && !authenticated) {
+    return <LoginScreen onLogin={handleLogin} totpEnabled={totpEnabled} />;
+  }
+
+  return (
+    <div className="flex flex-col h-dvh overflow-hidden">
+      {/* Header */}
+      <div className="flex items-center gap-3 px-4 py-3 border-b border-border shrink-0">
+        <button
+          onClick={() => window.parent?.postMessage({ type: 'fluxy:close' }, '*')}
+          className="flex items-center justify-center h-7 w-7 -ml-1 rounded-full text-muted-foreground hover:text-foreground hover:bg-white/[0.06] transition-colors"
+          aria-label="Close chat"
+        >
+          <ArrowLeft className="h-5 w-5" />
+        </button>
+        <img src="/fluxy.png" alt={botName} className="h-5 w-auto" />
+        <span className="text-sm font-semibold">{botName}</span>
+        <div className={`h-2 w-2 rounded-full ${connected ? 'bg-green-500' : 'bg-red-500'}`} />
+        {pushState !== 'loading' && pushState !== 'unsupported' && (
+          <button
+            onClick={() => {
+              if (pushState === 'subscribed') unsubscribePush();
+              else if (pushState === 'unsubscribed') subscribePush();
+            }}
+            disabled={pushState === 'denied'}
+            className="flex items-center justify-center h-7 w-7 rounded-full text-muted-foreground hover:text-foreground hover:bg-white/[0.06] transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
+            title={
+              pushState === 'denied' ? 'Notifications blocked — enable in browser settings' :
+              pushState === 'subscribed' ? 'Disable push notifications' : 'Enable push notifications'
+            }
+          >
+            {pushState === 'denied' ? (
+              <BellOff className="h-4 w-4" />
+            ) : pushState === 'subscribed' ? (
+              <BellRing className="h-4 w-4 text-blue-400" />
+            ) : (
+              <Bell className="h-4 w-4" />
+            )}
+          </button>
+        )}
+        <div className="flex-1" />
+        <div className="relative" ref={menuRef}>
+          <button
+            onClick={() => setMenuOpen((v) => !v)}
+            className="flex items-center justify-center h-7 w-7 rounded-full text-muted-foreground hover:text-foreground hover:bg-white/[0.06] transition-colors"
+          >
+            <MoreVertical className="h-4 w-4" />
+          </button>
+          {menuOpen && (
+            <div className="absolute right-0 top-full mt-1 min-w-[160px] rounded-md border border-border bg-popover py-1 shadow-lg z-50">
+              <button
+                onClick={() => { setShowWizard(true); setMenuOpen(false); }}
+                className="flex w-full items-center gap-2 px-3 py-2 text-sm text-muted-foreground hover:text-foreground hover:bg-white/[0.06] transition-colors"
+              >
+                <Wand2 className="h-4 w-4" />
+                Setup Wizard
+              </button>
+              <button
+                onClick={() => { clearContext(); setMenuOpen(false); }}
+                className="flex w-full items-center gap-2 px-3 py-2 text-sm text-muted-foreground hover:text-foreground hover:bg-white/[0.06] transition-colors"
+              >
+                <Trash2 className="h-4 w-4" />
+                Clear context
+              </button>
+              {isMobile && !isStandalone && (
                 <button
-                    onClick={() =>
-                        window.parent?.postMessage({ type: 'fluxy:close' }, '*')
+                  onClick={() => {
+                    setMenuOpen(false);
+                    if (isInIframe) {
+                      // Ask parent window to handle install
+                      window.parent.postMessage({ type: 'fluxy:install-app' }, '*');
+                    } else {
+                      // Direct page — show iOS instructions (beforeinstallprompt won't help here)
+                      setShowIosModal(true);
                     }
-                    className="flex items-center justify-center h-7 w-7 -ml-1 rounded-full text-muted-foreground hover:text-foreground hover:bg-white/[0.06] transition-colors"
-                    aria-label="Close chat"
+                  }}
+                  className="flex w-full items-center gap-2 px-3 py-2 text-sm text-muted-foreground hover:text-foreground hover:bg-white/[0.06] transition-colors"
                 >
-                    <ArrowLeft className="h-5 w-5" />
+                  <Download className="h-4 w-4" />
+                  Install App
                 </button>
-                <img src="/fluxy.png" alt={botName} className="h-5 w-auto" />
-                <span className="text-sm font-semibold">{botName}</span>
-                <div
-                    className={`h-2 w-2 rounded-full ${connected ? 'bg-green-500' : 'bg-red-500'}`}
-                />
-                {pushState !== 'loading' && pushState !== 'unsupported' && (
-                    <button
-                        onClick={() => {
-                            if (pushState === 'subscribed') unsubscribePush();
-                            else if (pushState === 'unsubscribed')
-                                subscribePush();
-                        }}
-                        disabled={pushState === 'denied'}
-                        className="flex items-center justify-center h-7 w-7 rounded-full text-muted-foreground hover:text-foreground hover:bg-white/[0.06] transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
-                        title={
-                            pushState === 'denied'
-                                ? 'Notifications blocked — enable in browser settings'
-                                : pushState === 'subscribed'
-                                  ? 'Disable push notifications'
-                                  : 'Enable push notifications'
-                        }
-                    >
-                        {pushState === 'denied' ? (
-                            <BellOff className="h-4 w-4" />
-                        ) : pushState === 'subscribed' ? (
-                            <BellRing className="h-4 w-4 text-blue-400" />
-                        ) : (
-                            <Bell className="h-4 w-4" />
-                        )}
-                    </button>
-                )}
-                <div className="flex-1" />
-                <div className="relative" ref={menuRef}>
-                    <button
-                        onClick={() => setMenuOpen(v => !v)}
-                        className="flex items-center justify-center h-7 w-7 rounded-full text-muted-foreground hover:text-foreground hover:bg-white/[0.06] transition-colors"
-                    >
-                        <MoreVertical className="h-4 w-4" />
-                    </button>
-                    {menuOpen && (
-                        <div className="absolute right-0 top-full mt-1 min-w-[160px] rounded-md border border-border bg-popover py-1 shadow-lg z-50">
-                            <button
-                                onClick={() => {
-                                    setShowWizard(true);
-                                    setMenuOpen(false);
-                                }}
-                                className="flex w-full items-center gap-2 px-3 py-2 text-sm text-muted-foreground hover:text-foreground hover:bg-white/[0.06] transition-colors"
-                            >
-                                <Wand2 className="h-4 w-4" />
-                                Setup Wizard
-                            </button>
-                            <button
-                                onClick={() => {
-                                    clearContext();
-                                    setMenuOpen(false);
-                                }}
-                                className="flex w-full items-center gap-2 px-3 py-2 text-sm text-muted-foreground hover:text-foreground hover:bg-white/[0.06] transition-colors"
-                            >
-                                <Trash2 className="h-4 w-4" />
-                                Clear context
-                            </button>
-                            {isMobile && !isStandalone && (
-                                <button
-                                    onClick={() => {
-                                        setMenuOpen(false);
-                                        if (isInIframe) {
-                                            // Ask parent window to handle install
-                                            window.parent.postMessage(
-                                                { type: 'fluxy:install-app' },
-                                                '*'
-                                            );
-                                        } else {
-                                            // Direct page — show iOS instructions (beforeinstallprompt won't help here)
-                                            setShowIosModal(true);
-                                        }
-                                    }}
-                                    className="flex w-full items-center gap-2 px-3 py-2 text-sm text-muted-foreground hover:text-foreground hover:bg-white/[0.06] transition-colors"
-                                >
-                                    <Download className="h-4 w-4" />
-                                    Install App
-                                </button>
-                            )}
-                        </div>
-                    )}
-                </div>
+              )}
             </div>
-
-            {/* Chat body */}
-            <div className="flex-1 min-h-0 flex flex-col overflow-hidden">
-                <MessageList
-                    messages={messages}
-                    streaming={streaming}
-                    streamBuffer={streamBuffer}
-                    tools={tools}
-                    hasMore={hasMore}
-                    onLoadOlder={loadOlder}
-                />
-                <InputBar
-                    onSend={sendMessage}
-                    onStop={stopStreaming}
-                    streaming={streaming}
-                    whisperEnabled={whisperEnabled}
-                    onTranscribe={audio => {
-                        return new Promise((resolve, reject) => {
-                            const client = clientRef.current;
-                            if (!client?.connected) {
-                                reject(new Error('WebSocket not connected'));
-                                return;
-                            }
-                            const unsub = client.on('whisper:result', data => {
-                                unsub();
-                                clearTimeout(timer);
-                                resolve(data);
-                            });
-                            const timer = setTimeout(() => {
-                                unsub();
-                                reject(new Error('Transcription timeout'));
-                            }, 30000);
-                            client.send('whisper:transcribe', { audio });
-                        });
-                    }}
-                />
+          )}
+        </div>
+      </div>
+
+      {/* Chat body */}
+      <div className="flex-1 min-h-0 flex flex-col overflow-hidden">
+        <MessageList messages={messages} streaming={streaming} streamBuffer={streamBuffer} tools={tools} hasMore={hasMore} onLoadOlder={loadOlder} />
+        <InputBar
+          onSend={sendMessage}
+          onStop={stopStreaming}
+          streaming={streaming}
+          whisperEnabled={whisperEnabled}
+          onTranscribe={(audio) => {
+            return new Promise((resolve, reject) => {
+              const client = clientRef.current;
+              if (!client?.connected) { reject(new Error('WebSocket not connected')); return; }
+              const unsub = client.on('whisper:result', (data) => {
+                unsub();
+                clearTimeout(timer);
+                resolve(data);
+              });
+              const timer = setTimeout(() => { unsub(); reject(new Error('Transcription timeout')); }, 30000);
+              client.send('whisper:transcribe', { audio });
+            });
+          }}
+        />
+      </div>
+
+      {/* Setup Wizard overlay */}
+      {showWizard && (
+        <OnboardWizard
+          onSave={(payload) => {
+            return new Promise((resolve, reject) => {
+              const client = clientRef.current;
+              if (!client?.connected) {
+                reject(new Error('WebSocket not connected'));
+                return;
+              }
+              const unsub = client.on('settings:saved', (data) => {
+                unsub();
+                clearTimeout(timer);
+                resolve(data);
+              });
+              const unsubErr = client.on('settings:save-error', (data) => {
+                unsubErr();
+                clearTimeout(timer);
+                reject(new Error(data.error || 'Save failed'));
+              });
+              const timer = setTimeout(() => { unsub(); unsubErr(); reject(new Error('Save timeout')); }, 10000);
+              client.send('settings:save', payload);
+            });
+          }}
+          onTunnelSwitch={(newMode) => {
+            return new Promise((resolve, reject) => {
+              const client = clientRef.current;
+              if (!client?.connected) { reject(new Error('Not connected')); return; }
+              const unsub = client.on('tunnel:switched', (data) => { unsub(); unsubErr(); clearTimeout(t); resolve(data); });
+              const unsubErr = client.on('tunnel:switch-error', (data) => { unsub(); unsubErr(); clearTimeout(t); reject(new Error(data.error)); });
+              const t = setTimeout(() => { unsub(); unsubErr(); reject(new Error('Timeout')); }, 30000);
+              client.send('tunnel:switch', { mode: newMode });
+            });
+          }}
+          onComplete={() => {
+            setShowWizard(false);
+            // Reload settings (bot name, whisper, etc.)
+            authFetch('/api/settings')
+              .then((r) => r.json())
+              .then((s) => {
+                if (s.agent_name) setBotName(s.agent_name);
+                setWhisperEnabled(s.whisper_enabled === 'true');
+              })
+              .catch(() => {});
+            // Notify dashboard so it can refresh
+            window.parent?.postMessage({ type: 'fluxy:onboard-complete' }, '*');
+          }}
+        />
+      )}
+
+      {/* iOS Install Instructions Modal */}
+      {showIosModal && (
+        <div className="fixed inset-0 z-[300] flex items-end sm:items-center justify-center p-4">
+          <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={() => setShowIosModal(false)} />
+          <div className="relative w-full max-w-[360px] bg-[#1c1c1e] border border-white/[0.08] rounded-2xl shadow-2xl overflow-hidden">
+            <div className="flex items-center justify-between px-5 pt-5 pb-2">
+              <h2 className="text-[17px] font-semibold text-white">Install App</h2>
+              <button
+                onClick={() => setShowIosModal(false)}
+                className="h-7 w-7 rounded-full bg-white/[0.08] flex items-center justify-center text-white/50 hover:text-white/80 transition-colors"
+              >
+                <X className="h-4 w-4" />
+              </button>
             </div>
-
-            {/* Setup Wizard overlay */}
-            {showWizard && (
-                <OnboardWizard
-                    onSave={payload => {
-                        return new Promise((resolve, reject) => {
-                            const client = clientRef.current;
-                            if (!client?.connected) {
-                                reject(new Error('WebSocket not connected'));
-                                return;
-                            }
-                            const unsub = client.on('settings:saved', data => {
-                                unsub();
-                                clearTimeout(timer);
-                                resolve(data);
-                            });
-                            const unsubErr = client.on(
-                                'settings:save-error',
-                                data => {
-                                    unsubErr();
-                                    clearTimeout(timer);
-                                    reject(
-                                        new Error(data.error || 'Save failed')
-                                    );
-                                }
-                            );
-                            const timer = setTimeout(() => {
-                                unsub();
-                                unsubErr();
-                                reject(new Error('Save timeout'));
-                            }, 10000);
-                            client.send('settings:save', payload);
-                        });
-                    }}
-                    onTunnelSwitch={newMode => {
-                        return new Promise((resolve, reject) => {
-                            const client = clientRef.current;
-                            if (!client?.connected) {
-                                reject(new Error('Not connected'));
-                                return;
-                            }
-                            const unsub = client.on('tunnel:switched', data => {
-                                unsub();
-                                unsubErr();
-                                clearTimeout(t);
-                                resolve(data);
-                            });
-                            const unsubErr = client.on(
-                                'tunnel:switch-error',
-                                data => {
-                                    unsub();
-                                    unsubErr();
-                                    clearTimeout(t);
-                                    reject(new Error(data.error));
-                                }
-                            );
-                            const t = setTimeout(() => {
-                                unsub();
-                                unsubErr();
-                                reject(new Error('Timeout'));
-                            }, 30000);
-                            client.send('tunnel:switch', { mode: newMode });
-                        });
-                    }}
-                    onComplete={() => {
-                        setShowWizard(false);
-                        // Reload settings (bot name, whisper, etc.)
-                        authFetch('/api/settings')
-                            .then(r => r.json())
-                            .then(s => {
-                                if (s.agent_name) setBotName(s.agent_name);
-                                setWhisperEnabled(s.whisper_enabled === 'true');
-                            })
-                            .catch(() => {});
-                        // Notify dashboard so it can refresh
-                        window.parent?.postMessage(
-                            { type: 'fluxy:onboard-complete' },
-                            '*'
-                        );
-                    }}
-                />
-            )}
-
-            {/* iOS Install Instructions Modal */}
-            {showIosModal && (
-                <div className="fixed inset-0 z-[300] flex items-end sm:items-center justify-center p-4">
-                    <div
-                        role="presentation"
-                        className="absolute inset-0 bg-black/60 backdrop-blur-sm"
-                        onClick={() => setShowIosModal(false)}
-                    />
-                    <div className="relative w-full max-w-[360px] bg-[#1c1c1e] border border-white/[0.08] rounded-2xl shadow-2xl overflow-hidden">
-                        <div className="flex items-center justify-between px-5 pt-5 pb-2">
-                            <h2 className="text-[17px] font-semibold text-white">
-                                Install App
-                            </h2>
-                            <button
-                                onClick={() => setShowIosModal(false)}
-                                className="h-7 w-7 rounded-full bg-white/[0.08] flex items-center justify-center text-white/50 hover:text-white/80 transition-colors"
-                            >
-                                <X className="h-4 w-4" />
-                            </button>
-                        </div>
-                        <div className="px-5 pb-6 pt-1">
-                            <p className="text-white/50 text-[13px] mb-5 leading-relaxed">
-                                Add Fluxy to your home screen for a full-screen
-                                app experience.
-                            </p>
-                            {isIos ? (
-                                <div className="space-y-3.5">
-                                    <div className="flex items-start gap-3">
-                                        <span className="flex-shrink-0 w-7 h-7 rounded-full bg-[#007AFF]/15 text-[#007AFF] text-[13px] font-semibold flex items-center justify-center mt-0.5">
-                                            1
-                                        </span>
-                                        <div className="flex-1">
-                                            <p className="text-white text-[14px] font-medium">
-                                                Tap the Share button
-                                            </p>
-                                            <p className="text-white/40 text-[12px] mt-0.5 flex items-center gap-1.5">
-                                                The{' '}
-                                                <Share className="h-3.5 w-3.5 inline" />{' '}
-                                                icon at the bottom of Safari
-                                            </p>
-                                        </div>
-                                    </div>
-                                    <div className="flex items-start gap-3">
-                                        <span className="flex-shrink-0 w-7 h-7 rounded-full bg-[#007AFF]/15 text-[#007AFF] text-[13px] font-semibold flex items-center justify-center mt-0.5">
-                                            2
-                                        </span>
-                                        <div className="flex-1">
-                                            <p className="text-white text-[14px] font-medium">
-                                                Scroll down and tap
-                                            </p>
-                                            <p className="text-white/40 text-[12px] mt-0.5">
-                                                "Add to Home Screen"
-                                            </p>
-                                        </div>
-                                    </div>
-                                    <div className="flex items-start gap-3">
-                                        <span className="flex-shrink-0 w-7 h-7 rounded-full bg-[#007AFF]/15 text-[#007AFF] text-[13px] font-semibold flex items-center justify-center mt-0.5">
-                                            3
-                                        </span>
-                                        <div className="flex-1">
-                                            <p className="text-white text-[14px] font-medium">
-                                                Tap "Add"
-                                            </p>
-                                            <p className="text-white/40 text-[12px] mt-0.5">
-                                                Fluxy will appear on your home
-                                                screen
-                                            </p>
-                                        </div>
-                                    </div>
-                                </div>
-                            ) : (
-                                <div className="space-y-3.5">
-                                    <div className="flex items-start gap-3">
-                                        <span className="flex-shrink-0 w-7 h-7 rounded-full bg-[#007AFF]/15 text-[#007AFF] text-[13px] font-semibold flex items-center justify-center mt-0.5">
-                                            1
-                                        </span>
-                                        <div className="flex-1">
-                                            <p className="text-white text-[14px] font-medium">
-                                                Open browser menu
-                                            </p>
-                                            <p className="text-white/40 text-[12px] mt-0.5">
-                                                Tap the three-dot menu in your
-                                                browser
-                                            </p>
-                                        </div>
-                                    </div>
-                                    <div className="flex items-start gap-3">
-                                        <span className="flex-shrink-0 w-7 h-7 rounded-full bg-[#007AFF]/15 text-[#007AFF] text-[13px] font-semibold flex items-center justify-center mt-0.5">
-                                            2
-                                        </span>
-                                        <div className="flex-1">
-                                            <p className="text-white text-[14px] font-medium">
-                                                Tap "Install app" or "Add to
-                                                Home screen"
-                                            </p>
-                                            <p className="text-white/40 text-[12px] mt-0.5">
-                                                Fluxy will be installed as a
-                                                standalone app
-                                            </p>
-                                        </div>
-                                    </div>
-                                </div>
-                            )}
-                            <button
-                                onClick={() => setShowIosModal(false)}
-                                className="w-full mt-5 py-2.5 bg-white/[0.06] hover:bg-white/[0.1] text-white text-[14px] font-medium rounded-xl transition-colors"
-                            >
-                                Got it
-                            </button>
-                        </div>
+            <div className="px-5 pb-6 pt-1">
+              <p className="text-white/50 text-[13px] mb-5 leading-relaxed">
+                Add Fluxy to your home screen for a full-screen app experience.
+              </p>
+              {isIos ? (
+                <div className="space-y-3.5">
+                  <div className="flex items-start gap-3">
+                    <span className="flex-shrink-0 w-7 h-7 rounded-full bg-[#007AFF]/15 text-[#007AFF] text-[13px] font-semibold flex items-center justify-center mt-0.5">1</span>
+                    <div className="flex-1">
+                      <p className="text-white text-[14px] font-medium">
+                        Tap the Share button
+                      </p>
+                      <p className="text-white/40 text-[12px] mt-0.5 flex items-center gap-1.5">
+                        The <Share className="h-3.5 w-3.5 inline" /> icon at the bottom of Safari
+                      </p>
+                    </div>
+                  </div>
+                  <div className="flex items-start gap-3">
+                    <span className="flex-shrink-0 w-7 h-7 rounded-full bg-[#007AFF]/15 text-[#007AFF] text-[13px] font-semibold flex items-center justify-center mt-0.5">2</span>
+                    <div className="flex-1">
+                      <p className="text-white text-[14px] font-medium">
+                        Scroll down and tap
+                      </p>
+                      <p className="text-white/40 text-[12px] mt-0.5">
+                        "Add to Home Screen"
+                      </p>
                     </div>
+                  </div>
+                  <div className="flex items-start gap-3">
+                    <span className="flex-shrink-0 w-7 h-7 rounded-full bg-[#007AFF]/15 text-[#007AFF] text-[13px] font-semibold flex items-center justify-center mt-0.5">3</span>
+                    <div className="flex-1">
+                      <p className="text-white text-[14px] font-medium">
+                        Tap "Add"
+                      </p>
+                      <p className="text-white/40 text-[12px] mt-0.5">
+                        Fluxy will appear on your home screen
+                      </p>
+                    </div>
+                  </div>
                 </div>
-            )}
+              ) : (
+                <div className="space-y-3.5">
+                  <div className="flex items-start gap-3">
+                    <span className="flex-shrink-0 w-7 h-7 rounded-full bg-[#007AFF]/15 text-[#007AFF] text-[13px] font-semibold flex items-center justify-center mt-0.5">1</span>
+                    <div className="flex-1">
+                      <p className="text-white text-[14px] font-medium">
+                        Open browser menu
+                      </p>
+                      <p className="text-white/40 text-[12px] mt-0.5">
+                        Tap the three-dot menu in your browser
+                      </p>
+                    </div>
+                  </div>
+                  <div className="flex items-start gap-3">
+                    <span className="flex-shrink-0 w-7 h-7 rounded-full bg-[#007AFF]/15 text-[#007AFF] text-[13px] font-semibold flex items-center justify-center mt-0.5">2</span>
+                    <div className="flex-1">
+                      <p className="text-white text-[14px] font-medium">
+                        Tap "Install app" or "Add to Home screen"
+                      </p>
+                      <p className="text-white/40 text-[12px] mt-0.5">
+                        Fluxy will be installed as a standalone app
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              )}
+              <button
+                onClick={() => setShowIosModal(false)}
+                className="w-full mt-5 py-2.5 bg-white/[0.06] hover:bg-white/[0.1] text-white text-[14px] font-medium rounded-xl transition-colors"
+              >
+                Got it
+              </button>
+            </div>
+          </div>
         </div>
-    );
+      )}
+    </div>
+  );
 }
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
-    <React.StrictMode>
-        <FluxyApp />
-    </React.StrictMode>
+  <React.StrictMode>
+    <FluxyApp />
+  </React.StrictMode>,
 );