fluxy-bot 0.3.20 → 0.3.21

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-sbmFOV3Z.js"></script>
+    <script type="module" crossorigin src="/fluxy/assets/fluxy-D_vy8fea.js"></script>
     <link rel="modulepreload" crossorigin href="/fluxy/assets/globals-BmcQJ_1f.js">
     <link rel="stylesheet" crossorigin href="/fluxy/assets/globals-BdY9BJIP.css">
   </head>

package/package.json

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

package/supervisor/chat/ARCHITECTURE.md

@@ -0,0 +1,89 @@
+# Fluxy Chat Architecture
+
+## Network Topology
+
+```
+Browser
+  |
+  |  https://bot-name.at.fluxy.bot
+  v
+Fluxy Relay (cloud)
+  |
+  |  Cloudflare Quick Tunnel
+  v
+Supervisor (localhost:3000)
+  |
+  ├── Worker (localhost:3001)      — DB, settings, AI providers
+  ├── Dashboard Vite (localhost:3002) — dev server for workspace/client
+  └── Backend (localhost:3004)     — user's app backend
+```
+
+## How the Chat Loads
+
+The dashboard (`workspace/client/`) loads at the root URL. It injects `widget.js`, which creates:
+
+1. A floating bubble (the Fluxy avatar)
+2. A slide-out panel containing an **iframe** at `/fluxy/`
+
+The iframe loads `dist-fluxy/fluxy.html`, which is the pre-built Fluxy chat SPA. This SPA is completely independent from the dashboard — it has its own React tree, its own styles, and its own WebSocket connection.
+
+```
+Dashboard (main page)
+  └── widget.js
+        ├── Bubble (click to open)
+        └── Panel
+              └── <iframe src="/fluxy/">   ← Fluxy chat lives here
+                    ├── fluxy-main.tsx
+                    ├── InputBar, MessageList, etc.
+                    └── OnboardWizard (opened from settings menu)
+```
+
+## The Relay Problem
+
+When a user registers a handle (e.g. `bug.at.fluxy.bot`), the relay proxies all HTTP traffic through Cloudflare's tunnel to the local supervisor. This works transparently for:
+
+- **GET requests** — settings, onboard status, static assets
+- **WebSocket** — chat messages, heartbeats, real-time events
+
+However, **POST requests from the chat iframe fail** (502 / timeout). The relay + tunnel chain cannot reliably forward HTTP POST bodies originating from an iframe context. The exact cause is in the relay/tunnel infrastructure — the request never reaches the supervisor.
+
+This does NOT affect:
+- The initial onboard (`/fluxy/onboard.html` in a separate iframe, runs before the relay is configured)
+- Direct `localhost` access
+- GET requests from the chat iframe
+- WebSocket messages from the chat iframe
+
+## The Fix: WebSocket as a Sidecar Channel
+
+Since the WebSocket connection works reliably from the chat iframe, any mutation that the chat needs to perform (saving settings, etc.) is sent over WebSocket instead of HTTP POST.
+
+```
+Chat Wizard                    Supervisor WS Handler           Worker
+    |                               |                           |
+    |-- ws: settings:save --------->|                           |
+    |                               |-- POST /api/onboard ----->|
+    |                               |   (localhost, no relay)   |
+    |                               |<-- { ok: true } ---------|
+    |<-- ws: settings:saved --------|                           |
+```
+
+The supervisor's WebSocket handler receives the `settings:save` message and makes a **local** HTTP POST to the worker (`localhost:3001`). This completely bypasses the relay.
+
+### When to use WebSocket vs HTTP
+
+| From where | GET | POST/PUT | Notes |
+|---|---|---|---|
+| Initial onboard | `fetch()` | `fetch()` | Runs before relay exists, direct tunnel works |
+| Chat iframe | `fetch()` / `authFetch()` | **WebSocket** | POST through relay fails |
+| Dashboard | `fetch()` | `fetch()` | Not in an iframe, relay handles it fine |
+
+## Key Files
+
+| File | Purpose |
+|---|---|
+| `supervisor/widget.js` | Creates the chat iframe + bubble on the dashboard |
+| `supervisor/chat/fluxy-main.tsx` | Chat app entry point, WS connection, wizard integration |
+| `supervisor/chat/OnboardWizard.tsx` | Setup wizard (uses `onSave` prop for WS saves) |
+| `supervisor/chat/src/lib/ws-client.ts` | WebSocket client with reconnect + message queue |
+| `supervisor/index.ts` | Supervisor HTTP server + WS handler (`settings:save`) |
+| `worker/index.ts` | Worker API (`POST /api/onboard`, settings DB) |

package/supervisor/chat/fluxy-main.tsx

@@ -246,7 +246,25 @@ function FluxyApp() {
       {/* Chat body */}
       <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} />
+        <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 */}

package/supervisor/chat/src/components/Chat/InputBar.tsx

@@ -8,6 +8,7 @@ interface Props {
   onStop: () => void;
   streaming: boolean;
   whisperEnabled?: boolean;
+  onTranscribe?: (audio: string) => Promise<{ transcript?: string }>;
 }
 
 function formatTime(s: number) {
@@ -53,7 +54,7 @@ function compressImage(dataUrl: string, maxBytes = 4 * 1024 * 1024): Promise<str
 
 const DRAFT_KEY = 'fluxy_draft';
 
-export default function InputBar({ onSend, onStop, streaming, whisperEnabled }: Props) {
+export default function InputBar({ onSend, onStop, streaming, whisperEnabled, onTranscribe }: Props) {
   const [text, setText] = useState(() => {
     try { return localStorage.getItem(DRAFT_KEY) || ''; } catch { return ''; }
   });
@@ -136,12 +137,17 @@ export default function InputBar({ onSend, onStop, streaming, whisperEnabled }:
           if (!base64) return;
 
           try {
-            const res = await fetch('/api/whisper/transcribe', {
-              method: 'POST',
-              headers: { 'Content-Type': 'application/json' },
-              body: JSON.stringify({ audio: base64 }),
-            });
-            const data = await res.json();
+            let data: { transcript?: string };
+            if (onTranscribe) {
+              data = await onTranscribe(base64);
+            } else {
+              const res = await fetch('/api/whisper/transcribe', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ audio: base64 }),
+              });
+              data = await res.json();
+            }
             if (data.transcript?.trim()) {
               onSend(data.transcript.trim(), undefined, dataUrl);
             }
@@ -158,7 +164,7 @@ export default function InputBar({ onSend, onStop, streaming, whisperEnabled }:
     setIsRecording(false);
     setRecordingTime(0);
     dragRef.current = 0;
-  }, [onSend]);
+  }, [onSend, onTranscribe]);
 
   // ── File handling ──
 

package/supervisor/index.ts

@@ -150,7 +150,6 @@ export async function startSupervisor() {
 
   // HTTP server — proxies to Vite dev servers + worker API
   const server = http.createServer(async (req, res) => {
-    if (req.method === 'POST') console.log(`[supervisor] POST received: ${req.url}`);
     // Fluxy widget — served directly (not part of Vite build)
     if (req.url === '/fluxy/widget.js') {
       console.log('[supervisor] Serving /fluxy/widget.js directly');
@@ -305,6 +304,23 @@ export async function startSupervisor() {
 
       const msg = JSON.parse(rawStr);
 
+      // Whisper transcription via WebSocket (bypasses relay POST issues)
+      if (msg.type === 'whisper:transcribe') {
+        (async () => {
+          try {
+            const result = await workerApi('/api/whisper/transcribe', 'POST', { audio: msg.data.audio });
+            if (ws.readyState === WebSocket.OPEN) {
+              ws.send(JSON.stringify({ type: 'whisper:result', data: result }));
+            }
+          } catch (err: any) {
+            if (ws.readyState === WebSocket.OPEN) {
+              ws.send(JSON.stringify({ type: 'whisper:result', data: { error: err.message } }));
+            }
+          }
+        })();
+        return;
+      }
+
       // Save settings via WebSocket (bypasses relay POST issues)
       if (msg.type === 'settings:save') {
         (async () => {

package/worker/index.ts

@@ -297,7 +297,6 @@ app.get('/api/portal/validate-token', (req, res) => {
 });
 
 app.post('/api/onboard', (req, res) => {
-  console.log('[worker] POST /api/onboard body:', JSON.stringify(req.body));
   const { userName, agentName, provider, model, apiKey, baseUrl, portalUser, portalPass, whisperEnabled, whisperKey } = req.body;
   setSetting('user_name', userName || '');
   setSetting('agent_name', agentName || 'Fluxy');

package/workspace/client/public/sw.js

@@ -1,3 +1,4 @@
 // Minimal service worker — required for PWA installability
 self.addEventListener('install', () => self.skipWaiting());
 self.addEventListener('activate', (e) => e.waitUntil(self.clients.claim()));
+self.addEventListener('fetch', () => {});