fluxy-bot 0.2.40 → 0.2.42

package/dist-fluxy/fluxy.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content" />
     <title>Fluxy Chat</title>
-    <script type="module" crossorigin src="/fluxy/assets/fluxy-Bg7VWQTH.js"></script>
+    <script type="module" crossorigin src="/fluxy/assets/fluxy-Cfl58Zg0.js"></script>
     <link rel="modulepreload" crossorigin href="/fluxy/assets/globals--DVlL_N5.js">
     <link rel="stylesheet" crossorigin href="/fluxy/assets/globals-DMXu7CFU.css">
   </head>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fluxy-bot",
-  "version": "0.2.40",
+  "version": "0.2.42",
   "description": "Self-hosted AI bot — run your own AI assistant from anywhere",
   "type": "module",
   "license": "MIT",

package/supervisor/chat/fluxy-main.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import ReactDOM from 'react-dom/client';
-import { ArrowLeft, MoreVertical, Trash2, Wand2, LogIn } from 'lucide-react';
+import { ArrowLeft, MoreVertical, Trash2, Wand2 } from 'lucide-react';
 import { WsClient } from './src/lib/ws-client';
 import { useFluxyChat } from './src/hooks/useFluxyChat';
 import OnboardWizard from './OnboardWizard';
@@ -79,51 +79,18 @@ function LoginForm({ botName, onSuccess }: { botName: string; onSuccess: () => v
   );
 }
 
-function FluxyApp() {
+/** Chat view — only mounted when authenticated or first-run */
+function ChatView({ botName }: { botName: string }) {
   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 [authState, setAuthState] = useState<AuthState>('checking');
   const menuRef = useRef<HTMLDivElement>(null);
   const wasConnected = useRef(false);
 
-  // Check auth on mount
-  useEffect(() => {
-    (async () => {
-      try {
-        // Check if authenticated
-        const meRes = await fetch('/api/auth/me');
-        if (meRes.ok) {
-          const me = await meRes.json();
-          if (me.authenticated) { setAuthState('authenticated'); return; }
-        }
-
-        // Not authenticated — check if credentials are configured
-        const cfgRes = await fetch('/api/auth/configured');
-        const cfg = await cfgRes.json();
-        if (!cfg.configured) {
-          setAuthState('first-run');
-          // Auto-show onboard wizard on first run
-          if (!cfg.onboardComplete) setShowWizard(true);
-        } else {
-          setAuthState('unauthenticated');
-        }
-      } catch {
-        // Worker not ready — allow (onboarding scenario)
-        setAuthState('first-run');
-        setShowWizard(true);
-      }
-    })();
-  }, []);
-
-  // Connect WebSocket only when authenticated or first-run
   useEffect(() => {
-    if (authState !== 'authenticated' && authState !== 'first-run') return;
-
     const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
     const host = location.host;
     const client = new WsClient(`${proto}//${host}/fluxy/ws`);
@@ -165,20 +132,17 @@ function FluxyApp() {
       client.disconnect();
       clientRef.current = null;
     };
-  }, [authState]);
+  }, []);
 
-  // Load settings
   useEffect(() => {
     fetch('/api/settings')
       .then((r) => r.json())
       .then((s) => {
-        if (s.agent_name) setBotName(s.agent_name);
         if (s.whisper_enabled === 'true') setWhisperEnabled(true);
       })
       .catch(() => {});
   }, []);
 
-  // Close menu on outside click
   useEffect(() => {
     if (!menuOpen) return;
     const handler = (e: MouseEvent) => {
@@ -191,10 +155,97 @@ function FluxyApp() {
   const { messages, streaming, streamBuffer, tools, sendMessage, stopStreaming, clearContext } =
     useFluxyChat(clientRef.current, reloadTrigger);
 
+  return (
+    <>
+      {/* Status + menu in header area */}
+      <div className="flex items-center gap-2 shrink-0" style={{ position: 'absolute', right: 12, top: 10 }}>
+        <div className={`h-2 w-2 rounded-full ${connected ? 'bg-green-500' : 'bg-red-500'}`} />
+        <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>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div className="flex-1 min-h-0 flex flex-col overflow-hidden">
+        <MessageList messages={messages} streaming={streaming} streamBuffer={streamBuffer} tools={tools} />
+        <InputBar onSend={sendMessage} onStop={stopStreaming} streaming={streaming} whisperEnabled={whisperEnabled} />
+      </div>
+
+      {showWizard && (
+        <OnboardWizard
+          onComplete={() => {
+            setShowWizard(false);
+            fetch('/api/settings')
+              .then((r) => r.json())
+              .then((s) => {
+                if (s.whisper_enabled === 'true') setWhisperEnabled(true);
+              })
+              .catch(() => {});
+            window.parent?.postMessage({ type: 'fluxy:onboard-complete' }, '*');
+          }}
+        />
+      )}
+    </>
+  );
+}
+
+function FluxyApp() {
+  const [botName, setBotName] = useState('Fluxy');
+  const [authState, setAuthState] = useState<AuthState>('checking');
+
+  // Check auth on mount
+  useEffect(() => {
+    (async () => {
+      try {
+        const meRes = await fetch('/api/auth/me');
+        if (meRes.ok) {
+          const me = await meRes.json();
+          if (me.authenticated) { setAuthState('authenticated'); return; }
+        }
+
+        const cfgRes = await fetch('/api/auth/configured');
+        const cfg = await cfgRes.json();
+        setAuthState(cfg.configured ? 'unauthenticated' : 'first-run');
+      } catch {
+        setAuthState('first-run');
+      }
+    })();
+  }, []);
+
+  // Load bot name
+  useEffect(() => {
+    fetch('/api/settings')
+      .then((r) => r.json())
+      .then((s) => { if (s.agent_name) setBotName(s.agent_name); })
+      .catch(() => {});
+  }, []);
+
   const showChat = authState === 'authenticated' || authState === 'first-run';
 
   return (
-    <div className="flex flex-col h-dvh overflow-hidden">
+    <div className="flex flex-col h-dvh overflow-hidden relative">
       {/* Header */}
       <div className="flex items-center gap-3 px-4 py-3 border-b border-border shrink-0">
         <button
@@ -206,39 +257,10 @@ function FluxyApp() {
         </button>
         <img src="/fluxy.png" alt={botName} className="h-5 w-auto" />
         <span className="text-sm font-semibold">{botName}</span>
-        {showChat && <div className={`h-2 w-2 rounded-full ${connected ? 'bg-green-500' : 'bg-red-500'}`} />}
         <div className="flex-1" />
-        {showChat && (
-          <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>
-              </div>
-            )}
-          </div>
-        )}
       </div>
 
-      {/* Auth gate or chat */}
+      {/* Auth gate */}
       {authState === 'checking' && (
         <div className="flex-1 flex items-center justify-center">
           <div className="h-6 w-6 border-2 border-muted-foreground/30 border-t-foreground rounded-full animate-spin" />
@@ -246,36 +268,11 @@ function FluxyApp() {
       )}
 
       {authState === 'unauthenticated' && (
-        <LoginForm
-          botName={botName}
-          onSuccess={() => setAuthState('authenticated')}
-        />
+        <LoginForm botName={botName} onSuccess={() => setAuthState('authenticated')} />
       )}
 
-      {showChat && (
-        <>
-          <div className="flex-1 min-h-0 flex flex-col overflow-hidden">
-            <MessageList messages={messages} streaming={streaming} streamBuffer={streamBuffer} tools={tools} />
-            <InputBar onSend={sendMessage} onStop={stopStreaming} streaming={streaming} whisperEnabled={whisperEnabled} />
-          </div>
-
-          {showWizard && (
-            <OnboardWizard
-              onComplete={() => {
-                setShowWizard(false);
-                fetch('/api/settings')
-                  .then((r) => r.json())
-                  .then((s) => {
-                    if (s.agent_name) setBotName(s.agent_name);
-                    setWhisperEnabled(s.whisper_enabled === 'true');
-                  })
-                  .catch(() => {});
-                window.parent?.postMessage({ type: 'fluxy:onboard-complete' }, '*');
-              }}
-            />
-          )}
-        </>
-      )}
+      {/* Chat — only mounted when auth is resolved, so useFluxyChat won't fire 401s */}
+      {showChat && <ChatView botName={botName} />}
     </div>
   );
 }

package/worker/index.ts

@@ -328,7 +328,7 @@ app.post('/api/portal/verify-password', (req, res) => {
   res.json({ valid: verifyPassword(password, stored) });
 });
 
-app.post('/api/onboard', (req, res) => {
+app.post('/api/onboard', async (req, res) => {
   const { userName, agentName, provider, model, apiKey, baseUrl, portalUser, portalPass, whisperEnabled, whisperKey } = req.body;
   setSetting('user_name', userName || '');
   setSetting('agent_name', agentName || 'Fluxy');
@@ -367,6 +367,13 @@ app.post('/api/onboard', (req, res) => {
 
   saveConfig(currentCfg);
 
+  // Auto-login: issue JWT cookie so the user is immediately authenticated after onboarding
+  if (portalUser) {
+    const token = await signToken({ sub: portalUser.trim().toLowerCase(), role: 'owner' });
+    const secure = req.headers['x-forwarded-proto'] === 'https' || req.protocol === 'https';
+    res.setHeader('Set-Cookie', buildSessionCookie(token, secure));
+  }
+
   res.json({ ok: true });
 });
 

package/workspace/client/src/components/Landing/LandingPage.tsx

@@ -20,11 +20,25 @@ export default function LandingPage() {
     });
   }, []);
 
+  // Hide/show bubble during onboarding
+  useEffect(() => {
+    const bubble = document.getElementById('fluxy-widget-bubble');
+    if (bubble) bubble.style.display = showOnboard ? 'none' : '';
+  }, [showOnboard]);
+
   // Listen for onboard complete from fluxy iframe
   useEffect(() => {
     const handler = (e: MessageEvent) => {
       if (e.data?.type === 'fluxy:onboard-complete') {
         setShowOnboard(false);
+        // Re-check auth — onboard auto-issues a JWT cookie
+        fetch('/api/auth/me').then((r) => r.json())
+          .then((me) => { if (me?.authenticated) setIsAuthed(true); })
+          .catch(() => {});
+        // Re-fetch bot name
+        fetch('/api/settings').then((r) => r.json())
+          .then((s) => { if (s?.agent_name) setBotName(s.agent_name); })
+          .catch(() => {});
       }
     };
     window.addEventListener('message', handler);