fluxy-bot 0.3.20 → 0.3.22

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.22",
   "description": "Self-hosted AI bot — run your own AI assistant from anywhere",
   "type": "module",
   "license": "MIT",

package/shared/paths.ts

@@ -4,6 +4,7 @@ import { fileURLToPath } from 'url';
 
 export const PKG_DIR = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
 export const DATA_DIR = path.join(os.homedir(), '.fluxy');
+export const WORKSPACE_DIR = path.join(PKG_DIR, 'workspace');
 
 const cfName = process.platform === 'win32' ? 'cloudflared.exe' : 'cloudflared';
 
@@ -12,8 +13,8 @@ export const paths = {
   db: path.join(DATA_DIR, 'memory.db'),
   widgetJs: path.join(PKG_DIR, 'supervisor', 'widget.js'),
   cloudflared: path.join(DATA_DIR, 'bin', cfName),
-  files: path.join(DATA_DIR, 'files'),
-  filesAudio: path.join(DATA_DIR, 'files', 'audio'),
-  filesImages: path.join(DATA_DIR, 'files', 'images'),
-  filesDocuments: path.join(DATA_DIR, 'files', 'documents'),
+  files: path.join(WORKSPACE_DIR, 'files'),
+  filesAudio: path.join(WORKSPACE_DIR, 'files', 'audio'),
+  filesImages: path.join(WORKSPACE_DIR, 'files', 'images'),
+  filesDocuments: path.join(WORKSPACE_DIR, 'files', 'documents'),
 };

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/file-saver.ts

@@ -0,0 +1,50 @@
+import fs from 'fs';
+import crypto from 'crypto';
+import { paths } from '../shared/paths.js';
+
+export interface SavedFile {
+  type: 'image' | 'document';
+  name: string;
+  mediaType: string;
+  relPath: string;
+  absPath: string;
+}
+
+export function ensureFileDirs(): void {
+  fs.mkdirSync(paths.filesAudio, { recursive: true });
+  fs.mkdirSync(paths.filesImages, { recursive: true });
+  fs.mkdirSync(paths.filesDocuments, { recursive: true });
+}
+
+export function saveAttachment(att: { type: 'image' | 'file'; name: string; mediaType: string; data: string }): SavedFile {
+  const category = att.type === 'image' ? 'images' : 'documents';
+
+  const now = new Date();
+  const ts = now.toISOString().replace(/[-:T]/g, '').slice(0, 14);
+  const stamp = `${ts.slice(0, 8)}_${ts.slice(8, 14)}`;
+  const rand = crypto.randomBytes(3).toString('hex');
+
+  // Extract extension from original name or mediaType
+  const extFromName = att.name?.includes('.') ? att.name.split('.').pop()! : '';
+  const extFromMime: Record<string, string> = {
+    'image/png': 'png', 'image/jpeg': 'jpg', 'image/gif': 'gif', 'image/webp': 'webp',
+    'application/pdf': 'pdf', 'text/plain': 'txt', 'text/csv': 'csv',
+  };
+  const ext = extFromName || extFromMime[att.mediaType] || 'bin';
+
+  const filename = `${stamp}_${rand}.${ext}`;
+  const relPath = `files/${category}/${filename}`;
+
+  const dir = category === 'images' ? paths.filesImages : paths.filesDocuments;
+  const absPath = `${dir}/${filename}`;
+
+  fs.writeFileSync(absPath, Buffer.from(att.data, 'base64'));
+
+  return {
+    type: att.type === 'image' ? 'image' : 'document',
+    name: att.name,
+    mediaType: att.mediaType,
+    relPath,
+    absPath,
+  };
+}

package/supervisor/fluxy-agent.ts

@@ -8,6 +8,7 @@ import fs from 'fs';
 import path from 'path';
 import { log } from '../shared/logger.js';
 import { DATA_DIR, PKG_DIR } from '../shared/paths.js';
+import type { SavedFile } from './file-saver.js';
 import { getClaudeAccessToken } from '../worker/claude-auth.js';
 
 const PROMPT_FILE = path.join(import.meta.dirname, '..', 'worker', 'prompts', 'fluxy-system-prompt.txt');
@@ -29,7 +30,7 @@ export interface AgentAttachment {
 }
 
 /** Build a multi-part prompt with attachments for the SDK */
-function buildMultiPartPrompt(text: string, attachments: AgentAttachment[]): AsyncIterable<SDKUserMessage> {
+function buildMultiPartPrompt(text: string, attachments: AgentAttachment[], savedFiles?: SavedFile[]): AsyncIterable<SDKUserMessage> {
   return (async function* () {
     const content: any[] = [];
 
@@ -47,7 +48,14 @@ function buildMultiPartPrompt(text: string, attachments: AgentAttachment[]): Asy
       }
     }
 
-    content.push({ type: 'text', text: text || '(attached files)' });
+    // Append local file paths so Claude can reference them with tools
+    let promptText = text || '(attached files)';
+    if (savedFiles?.length) {
+      const lines = savedFiles.map((f) => `- ${f.name} -> ${f.relPath}`);
+      promptText += `\n\n[Attached files saved to disk]\n${lines.join('\n')}\nYou can read or reference these files using the paths above (relative to your cwd).`;
+    }
+
+    content.push({ type: 'text', text: promptText });
 
     yield {
       type: 'user' as const,
@@ -76,6 +84,7 @@ export async function startFluxyAgentQuery(
   model: string,
   onMessage: (type: string, data: any) => void,
   attachments?: AgentAttachment[],
+  savedFiles?: SavedFile[],
 ): Promise<void> {
   const oauthToken = await getClaudeAccessToken();
   if (!oauthToken) {
@@ -92,8 +101,15 @@ export async function startFluxyAgentQuery(
   let fullText = '';
   const usedTools = new Set<string>();
 
+  // If there are saved files but no inline attachments, append path info to plain text prompt
+  let plainPrompt = prompt;
+  if (savedFiles?.length && !attachments?.length) {
+    const lines = savedFiles.map((f) => `- ${f.name} -> ${f.relPath}`);
+    plainPrompt += `\n\n[Attached files saved to disk]\n${lines.join('\n')}\nYou can read or reference these files using the paths above (relative to your cwd).`;
+  }
+
   const sdkPrompt: string | AsyncIterable<SDKUserMessage> =
-    attachments?.length ? buildMultiPartPrompt(prompt, attachments) : prompt;
+    attachments?.length ? buildMultiPartPrompt(prompt, attachments, savedFiles) : plainPrompt;
 
   try {
     const claudeQuery = query({

package/supervisor/index.ts

@@ -13,6 +13,7 @@ import { spawnWorker, stopWorker, getWorkerPort, isWorkerAlive } from './worker.
 import { spawnBackend, stopBackend, getBackendPort, isBackendAlive, resetBackendRestarts } from './backend.js';
 import { updateTunnelUrl, startHeartbeat, stopHeartbeat, disconnect } from '../shared/relay.js';
 import { startFluxyAgentQuery, stopFluxyAgentQuery, clearFluxySession } from './fluxy-agent.js';
+import { ensureFileDirs, saveAttachment, type SavedFile } from './file-saver.js';
 import { startViteDevServers, stopViteDevServers } from './vite-dev.js';
 import { execSync } from 'child_process';
 
@@ -61,6 +62,9 @@ export async function startSupervisor() {
   const vitePorts = await startViteDevServers(config.port);
   console.log(`[supervisor] Vite ready — dashboard :${vitePorts.dashboard}`);
 
+  // Ensure file storage dirs exist
+  ensureFileDirs();
+
   // Fluxy's AI brain
   let ai: AiProvider | null = null;
   if (config.ai.provider && (config.ai.apiKey || config.ai.provider === 'ollama')) {
@@ -150,7 +154,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 +308,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 () => {
@@ -364,9 +384,27 @@ export async function startSupervisor() {
               }
               convId = dbConvId!;
 
-              // Save user message to DB
+              // Save attachments to disk
+              let savedFiles: SavedFile[] = [];
+              if (data.attachments?.length) {
+                for (const att of data.attachments) {
+                  try {
+                    savedFiles.push(saveAttachment(att));
+                  } catch (err: any) {
+                    log.warn(`[fluxy] File save error: ${err.message}`);
+                  }
+                }
+              }
+
+              // Save user message to DB (include attachment metadata)
+              const meta: any = { model: freshConfig.ai.model };
+              if (savedFiles.length) {
+                meta.attachments = savedFiles.map((f) => ({
+                  type: f.type, name: f.name, mediaType: f.mediaType, path: f.relPath,
+                }));
+              }
               await workerApi(`/api/conversations/${convId}/messages`, 'POST', {
-                role: 'user', content, meta: { model: freshConfig.ai.model },
+                role: 'user', content, meta,
               });
 
               // Broadcast user message to other clients
@@ -414,7 +452,7 @@ export async function startSupervisor() {
               if (ws.readyState === WebSocket.OPEN) {
                 ws.send(JSON.stringify({ type, data: eventData }));
               }
-            }, data.attachments);
+            }, data.attachments, savedFiles);
           })();
           return;
         }

package/worker/index.ts

@@ -7,7 +7,7 @@ import { initDb, closeDb, listConversations, createConversation, deleteConversat
 import { startCodexOAuth, cancelCodexOAuth, getCodexAuthStatus, readCodexAccessToken } from './codex-auth.js';
 import { startClaudeOAuth, exchangeClaudeCode, getClaudeAuthStatus, readClaudeAccessToken } from './claude-auth.js';
 import { checkAvailability, registerHandle, releaseHandle, updateTunnelUrl, startHeartbeat, stopHeartbeat } from '../shared/relay.js';
-import { ensureFileDirs } from './file-storage.js';
+import { ensureFileDirs } from '../supervisor/file-saver.js';
 
 // ── Password hashing (scrypt) ──
 
@@ -34,7 +34,7 @@ ensureFileDirs();
 
 // Express
 const app = express();
-app.use(express.json());
+app.use(express.json({ limit: '10mb' }));
 
 app.get('/api/health', (_, res) => res.json({ status: 'ok' }));
 app.get('/api/conversations', (_, res) => res.json(listConversations()));
@@ -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', () => {});

package/worker/file-storage.ts

@@ -1,25 +0,0 @@
-import fs from 'fs';
-import crypto from 'crypto';
-import { paths } from '../shared/paths.js';
-
-export function ensureFileDirs(): void {
-  fs.mkdirSync(paths.filesAudio, { recursive: true });
-  fs.mkdirSync(paths.filesImages, { recursive: true });
-  fs.mkdirSync(paths.filesDocuments, { recursive: true });
-}
-
-export function saveFile(base64: string, category: 'audio' | 'images' | 'documents', ext: string): string {
-  const now = new Date();
-  const ts = now.toISOString().replace(/[-:T]/g, '').slice(0, 14); // YYYYMMDD_HHmmss → YYYYMMDDHHmmss
-  const stamp = `${ts.slice(0, 8)}_${ts.slice(8, 14)}`;
-  const rand = crypto.randomBytes(3).toString('hex');
-  const filename = `${stamp}_${rand}.${ext}`;
-  const relPath = `${category}/${filename}`;
-
-  const dir = category === 'audio' ? paths.filesAudio
-    : category === 'images' ? paths.filesImages
-    : paths.filesDocuments;
-
-  fs.writeFileSync(`${dir}/${filename}`, Buffer.from(base64, 'base64'));
-  return relPath;
-}