bloby-bot 0.17.2

package/supervisor/chat/bloby-main.tsx

@@ -0,0 +1,567 @@
+import React, { useEffect, useRef, useState } from 'react';
+import ReactDOM from 'react-dom/client';
+import { ArrowLeft, EllipsisVertical, WandSparkles, Download, X, Share, Bell, BellRing, BellOff } from 'lucide-react';
+import { WsClient } from './src/lib/ws-client';
+import { useBlobyChat } from './src/hooks/useBlobyChat';
+import OnboardWizard from './OnboardWizard';
+import LoginScreen from './src/components/LoginScreen';
+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 BlobyApp() {
+  const clientRef = useRef<WsClient | null>(null);
+  const [connected, setConnected] = useState(false);
+  const [botName, setBotName] = useState('Bloby');
+  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);
+
+  // Backend health
+  const [backendHealthy, setBackendHealthy] = useState(true);
+
+  // Wallet balance
+  const [walletBalance, setWalletBalance] = useState<string | null>(null);
+
+  // 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();
+      const client = clientRef.current;
+      if (client) {
+        client.send('push:subscribe', { 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();
+        const client = clientRef.current;
+        if (client) {
+          client.send('push:unsubscribe', { 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 === 'bloby: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);
+      }
+    })();
+  }, []);
+
+  const handleLogin = (token: string) => {
+    setAuthToken(token);
+    setAuthenticated(true);
+  };
+
+  // Handle mid-session token expiry (authFetch gets 401)
+  useEffect(() => {
+    onAuthFailure(() => {
+      setAuthenticated(false);
+      setAuthRequired(true);
+    });
+  }, []);
+
+  // Backend health check
+  useEffect(() => {
+    if (!authenticated) return;
+    const check = () => {
+      fetch('/app/api/health')
+        .then((r) => setBackendHealthy(r.ok))
+        .catch(() => setBackendHealthy(false));
+    };
+    check();
+    const id = setInterval(check, 10_000);
+    return () => clearInterval(id);
+  }, [authenticated]);
+
+  // 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}/bloby/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', () => {
+      window.parent?.postMessage({ type: 'bloby:rebuilding' }, '*');
+    });
+    const unsubRebuilt = client.on('app:rebuilt', () => {
+      window.parent?.postMessage({ type: 'bloby:rebuilt' }, '*');
+    });
+    const unsubBuildError = client.on('app:build-error', (data: { error: string }) => {
+      window.parent?.postMessage({ type: 'bloby:build-error', error: data.error }, '*');
+    });
+    const unsubHmr = client.on('app:hmr-update', () => {
+      window.parent?.postMessage({ type: 'bloby: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(() => {});
+
+    // Fetch wallet balance
+    authFetch('/api/wallet/balance')
+      .then((r) => r.json())
+      .then((w) => { if (w.address) setWalletBalance(w.balance); })
+      .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 } =
+    useBlobyChat(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} />;
+  }
+
+  return (
+    <div className="flex flex-col h-dvh overflow-hidden">
+      {/* Header */}
+      <div className="flex items-center gap-2 px-4 py-3 border-b border-border shrink-0">
+        {/* Left: close, bot identity */}
+        <button
+          onClick={() => window.parent?.postMessage({ type: 'bloby: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="/bloby.png" alt={botName} className="h-5 w-auto" />
+        <span className="text-sm font-semibold">{botName}</span>
+        <div className="flex items-center gap-2 text-[10px] text-muted-foreground ml-1">
+          <span className="flex items-center gap-1">
+            <span className={`h-1.5 w-1.5 rounded-full ${connected ? 'bg-green-500' : 'bg-red-500'}`} />
+            Chat
+          </span>
+          <span className="flex items-center gap-1">
+            <span className={`h-1.5 w-1.5 rounded-full ${backendHealthy ? 'bg-green-500' : 'bg-orange-400 animate-pulse'}`} />
+            Workspace
+          </span>
+        </div>
+        {walletBalance !== null && (
+          <div className="flex items-center gap-1.5 rounded-full bg-white/[0.06] border border-border px-2.5 py-1">
+            <span className="text-[11px] text-muted-foreground font-mono">${walletBalance}</span>
+            <a
+              href="https://www.bloby.bot/marketplace"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-[11px] font-medium text-blue-400 hover:text-blue-300 transition-colors"
+            >
+              Add
+            </a>
+          </div>
+        )}
+
+        <div className="flex-1" />
+
+        {/* Right: notifications + menu */}
+        <div className="flex items-center gap-1">
+          {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="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"
+            >
+              <EllipsisVertical 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"
+                >
+                  <WandSparkles className="h-4 w-4" />
+                  Settings
+                </button>
+                {isMobile && !isStandalone && (
+                  <button
+                    onClick={() => {
+                      setMenuOpen(false);
+                      if (isInIframe) {
+                        window.parent.postMessage({ type: 'bloby:install-app' }, '*');
+                      } else {
+                        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>
+      </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: 'bloby: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>
+            <div className="px-5 pb-6 pt-1">
+              <p className="text-white/50 text-[13px] mb-5 leading-relaxed">
+                Add Bloby 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">
+                        Bloby 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">
+                        Bloby 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>
+    <BlobyApp />
+  </React.StrictMode>,
+);

package/supervisor/chat/bloby.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+  <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" />
+    <title>Bloby Chat</title>
+  </head>
+  <body class="bg-background text-foreground">
+    <div id="root"></div>
+    <script type="module" src="/bloby-main.tsx"></script>
+    <script>
+    if('serviceWorker' in navigator){
+      navigator.serviceWorker.register('/bloby/sw.js').then(function(r){
+        r.update();
+        if(r.waiting){r.waiting.postMessage({type:'SKIP_WAITING'})}
+        r.addEventListener('updatefound',function(){
+          var w=r.installing;
+          if(w)w.addEventListener('statechange',function(){
+            if(w.state==='installed'&&navigator.serviceWorker.controller)w.postMessage({type:'SKIP_WAITING'});
+          });
+        });
+      });
+    }
+    </script>
+  </body>
+</html>

package/supervisor/chat/onboard-main.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import OnboardWizard from './OnboardWizard';
+import './src/styles/globals.css';
+
+function App() {
+  const handleComplete = () => {
+    // Notify the parent (dashboard) that onboarding is done
+    window.parent?.postMessage({ type: 'bloby:onboard-complete' }, '*');
+  };
+
+  return <OnboardWizard onComplete={handleComplete} isInitialSetup />;
+}
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

package/supervisor/chat/onboard.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <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" />
+    <title>Bloby Setup</title>
+  </head>
+  <body class="bg-background text-foreground">
+    <div id="root"></div>
+    <script type="module" src="/onboard-main.tsx"></script>
+  </body>
+</html>