fluxy-bot 0.1.0

package/bin/cli.js

@@ -0,0 +1,469 @@
+#!/usr/bin/env node
+
+import { spawn, execSync } from 'child_process';
+import fs from 'fs';
+import path from 'path';
+import os from 'os';
+import readline from 'readline';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const ROOT = path.resolve(__dirname, '..');
+const DATA_DIR = path.join(os.homedir(), '.fluxy');
+const CONFIG_PATH = path.join(DATA_DIR, 'config.json');
+const BIN_DIR = path.join(DATA_DIR, 'bin');
+const CF_PATH = path.join(BIN_DIR, 'cloudflared');
+
+const RELAY_API = 'https://api.fluxy.bot/api';
+
+const [, , command] = process.argv;
+
+// ── UI helpers ──
+
+const c = {
+  reset: '\x1b[0m',
+  dim: '\x1b[2m',
+  bold: '\x1b[1m',
+  green: '\x1b[32m',
+  cyan: '\x1b[36m',
+  yellow: '\x1b[33m',
+  red: '\x1b[31m',
+  white: '\x1b[97m',
+  bg: '\x1b[48;5;236m',
+};
+
+const SPINNER = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+const BAR_WIDTH = 30;
+
+function progressBar(ratio, width = BAR_WIDTH) {
+  const filled = Math.round(ratio * width);
+  const empty = width - filled;
+  return `${c.cyan}${'█'.repeat(filled)}${c.dim}${'░'.repeat(empty)}${c.reset}`;
+}
+
+class Stepper {
+  constructor(steps) {
+    this.steps = steps;
+    this.current = 0;
+    this.frame = 0;
+    this.interval = null;
+    this.done = false;
+  }
+
+  start() {
+    console.log('');
+    this.interval = setInterval(() => {
+      this.frame = (this.frame + 1) % SPINNER.length;
+      this.render();
+    }, 80);
+    this.render();
+  }
+
+  render() {
+    if (this.done) return;
+
+    if (this.current > 0 || this.frame > 0) {
+      process.stdout.write(`\x1b[${this.steps.length + 2}A`);
+    }
+
+    const ratio = this.current / this.steps.length;
+
+    for (let i = 0; i < this.steps.length; i++) {
+      if (i < this.current) {
+        console.log(`  ${c.green}✔${c.reset}  ${this.steps[i]}`);
+      } else if (i === this.current) {
+        console.log(`  ${c.cyan}${SPINNER[this.frame]}${c.reset}  ${this.steps[i]}${c.dim}...${c.reset}`);
+      } else {
+        console.log(`  ${c.dim}○  ${this.steps[i]}${c.reset}`);
+      }
+    }
+
+    console.log(`\n  ${progressBar(ratio)}  ${c.dim}${Math.round(ratio * 100)}%${c.reset}`);
+  }
+
+  advance() {
+    this.current++;
+    this.render();
+  }
+
+  finish() {
+    this.done = true;
+    if (this.interval) clearInterval(this.interval);
+
+    process.stdout.write(`\x1b[${this.steps.length + 2}A`);
+    for (const step of this.steps) {
+      console.log(`  ${c.green}✔${c.reset}  ${step}`);
+    }
+    console.log(`\n  ${progressBar(1)}  ${c.green}Done${c.reset}`);
+  }
+}
+
+function banner() {
+  console.log(`
+  ${c.cyan}${c.bold}╔═══════════════════════════════╗
+  ║         FLUXY  v0.1.0         ║
+  ╚═══════════════════════════════╝${c.reset}
+  ${c.dim}Self-hosted AI bot${c.reset}`);
+}
+
+function finalMessage(tunnelUrl, relayUrl) {
+  console.log(`
+  ${c.dim}─────────────────────────────────${c.reset}
+
+  ${c.bold}${c.white}Continue your setup at:${c.reset}
+
+  ${c.cyan}${c.bold}${tunnelUrl}${c.reset}`);
+
+  if (relayUrl) {
+    console.log(`
+  ${c.bold}${c.white}Your permanent URL:${c.reset}
+
+  ${c.cyan}${c.bold}${relayUrl}${c.reset}`);
+  }
+
+  console.log(`
+  ${c.dim}─────────────────────────────────${c.reset}
+  ${c.dim}Press Ctrl+C to stop the bot${c.reset}
+  `);
+}
+
+// ── Terminal input ──
+
+function ask(question) {
+  const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
+  return new Promise((resolve) => {
+    rl.question(question, (answer) => {
+      rl.close();
+      resolve(answer.trim());
+    });
+  });
+}
+
+// ── Steps ──
+
+function createConfig() {
+  fs.mkdirSync(DATA_DIR, { recursive: true });
+  if (!fs.existsSync(CONFIG_PATH)) {
+    const config = {
+      port: 3000,
+      username: '',
+      ai: { provider: '', model: '', apiKey: '' },
+      tunnel: { enabled: true },
+      relay: { token: '', tier: '', url: '' },
+    };
+    fs.writeFileSync(CONFIG_PATH, JSON.stringify(config, null, 2));
+  }
+}
+
+function hasCloudflared() {
+  try {
+    execSync('which cloudflared', { stdio: 'ignore' });
+    return true;
+  } catch {}
+  return fs.existsSync(CF_PATH);
+}
+
+async function installCloudflared() {
+  if (hasCloudflared()) return;
+
+  fs.mkdirSync(BIN_DIR, { recursive: true });
+
+  const platform = os.platform();
+  const arch = os.arch();
+  let url;
+
+  if (platform === 'darwin') {
+    url = arch === 'arm64'
+      ? 'https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-darwin-arm64.tgz'
+      : 'https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-darwin-amd64.tgz';
+  } else if (platform === 'linux') {
+    if (arch === 'arm64' || arch === 'aarch64') {
+      url = 'https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-linux-arm64';
+    } else if (arch === 'arm' || arch === 'armv7l') {
+      url = 'https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-linux-arm';
+    } else {
+      url = 'https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-linux-amd64';
+    }
+  } else {
+    throw new Error(`Unsupported platform: ${platform}/${arch}`);
+  }
+
+  if (url.endsWith('.tgz')) {
+    execSync(`curl -fsSL "${url}" | tar xz -C "${BIN_DIR}"`, { stdio: 'ignore' });
+  } else {
+    execSync(`curl -fsSL -o "${CF_PATH}" "${url}"`, { stdio: 'ignore' });
+  }
+
+  fs.chmodSync(CF_PATH, 0o755);
+}
+
+// ── Relay registration ──
+
+async function registerWithRelay() {
+  const config = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8'));
+
+  // Skip if already registered
+  if (config.relay?.token) return;
+
+  console.log(`
+  ${c.bold}${c.white}Choose your bot handle${c.reset}
+  ${c.dim}This is your permanent URL to access your bot from anywhere.${c.reset}
+  `);
+
+  let username = '';
+  let registered = false;
+
+  while (!registered) {
+    username = await ask(`  ${c.cyan}Handle:${c.reset} `);
+
+    if (!username) {
+      console.log(`  ${c.dim}Skipping relay registration. You can set this up later.${c.reset}\n`);
+      return;
+    }
+
+    username = username.toLowerCase().replace(/[^a-z0-9-]/g, '');
+
+    if (username.length < 3) {
+      console.log(`  ${c.yellow}Must be at least 3 characters.${c.reset}\n`);
+      continue;
+    }
+
+    // Check availability
+    try {
+      const checkRes = await fetch(`${RELAY_API}/availability/${encodeURIComponent(username)}`);
+      const check = await checkRes.json();
+
+      if (!check.valid) {
+        console.log(`  ${c.yellow}${check.error}${c.reset}\n`);
+        continue;
+      }
+
+      if (!check.available) {
+        console.log(`  ${c.yellow}That handle is taken. Try another.${c.reset}\n`);
+        continue;
+      }
+    } catch {
+      console.log(`  ${c.yellow}Could not reach relay server. Skipping registration.${c.reset}\n`);
+      return;
+    }
+
+    // Show options
+    console.log(`
+  ${c.bold}${c.white}Available handles:${c.reset}
+  ${c.dim}1)${c.reset} ${c.cyan}${username}.fluxy.bot${c.reset}        ${c.dim}(Premium — $5)${c.reset}
+  ${c.dim}2)${c.reset} ${c.cyan}my.fluxy.bot/${username}${c.reset}     ${c.green}Free${c.reset}
+  ${c.dim}3)${c.reset} ${c.cyan}at.fluxy.bot/${username}${c.reset}     ${c.green}Free${c.reset}
+  ${c.dim}4)${c.reset} ${c.cyan}on.fluxy.bot/${username}${c.reset}     ${c.green}Free${c.reset}
+  `);
+
+    const choice = await ask(`  ${c.cyan}Pick (1-4):${c.reset} `);
+    const tiers = ['premium', 'my', 'at', 'on'];
+    const tierIndex = parseInt(choice, 10) - 1;
+    const tier = tiers[tierIndex] ?? 'my'; // default to free
+
+    if (tier === 'premium') {
+      console.log(`  ${c.yellow}Premium handles require payment (coming soon). Using free tier.${c.reset}\n`);
+    }
+
+    const finalTier = tier === 'premium' ? 'my' : tier;
+
+    // Register
+    try {
+      const regRes = await fetch(`${RELAY_API}/register`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ username, tier: finalTier }),
+      });
+
+      const reg = await regRes.json();
+
+      if (!regRes.ok) {
+        console.log(`  ${c.yellow}${reg.error}${c.reset}\n`);
+        continue;
+      }
+
+      // Save to config
+      config.username = username;
+      config.relay = {
+        token: reg.token,
+        tier: finalTier,
+        url: reg.relayUrl,
+      };
+      fs.writeFileSync(CONFIG_PATH, JSON.stringify(config, null, 2));
+
+      console.log(`  ${c.green}✔${c.reset} Registered! Your URL: ${c.cyan}${c.bold}${reg.relayUrl}${c.reset}\n`);
+      registered = true;
+    } catch {
+      console.log(`  ${c.yellow}Registration failed. Skipping — you can try again later.${c.reset}\n`);
+      return;
+    }
+  }
+}
+
+// ── Boot server ──
+
+function bootServer() {
+  return new Promise((resolve) => {
+    const child = spawn(
+      'node',
+      ['--import', 'tsx/esm', path.join(ROOT, 'supervisor/index.ts')],
+      { cwd: ROOT, stdio: ['ignore', 'pipe', 'pipe'], env: { ...process.env } },
+    );
+
+    let tunnelUrl = null;
+    let relayUrl = null;
+
+    const fallbackLocal = () => {
+      if (!tunnelUrl) {
+        const config = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8'));
+        resolve({ child, tunnelUrl: `http://localhost:${config.port}`, relayUrl: config.relay?.url || null });
+      }
+    };
+
+    const handleData = (data) => {
+      const text = data.toString();
+
+      const tunnelMatch = text.match(/__TUNNEL_URL__=(\S+)/);
+      if (tunnelMatch) {
+        tunnelUrl = tunnelMatch[1];
+      }
+
+      const relayMatch = text.match(/__RELAY_URL__=(\S+)/);
+      if (relayMatch) {
+        relayUrl = relayMatch[1];
+      }
+
+      // Resolve once we have both tunnel URL and relay (or relay fails)
+      if (tunnelUrl && !relayUrl) {
+        // Give relay a moment to register, then resolve anyway
+        setTimeout(() => {
+          if (!relayUrl) {
+            const config = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8'));
+            resolve({ child, tunnelUrl, relayUrl: config.relay?.url || null });
+          }
+        }, 3000);
+      }
+
+      if (tunnelUrl && relayUrl) {
+        resolve({ child, tunnelUrl, relayUrl });
+        return;
+      }
+
+      if (text.includes('__TUNNEL_FAILED__')) {
+        fallbackLocal();
+        return;
+      }
+    };
+
+    child.stdout.on('data', handleData);
+    child.stderr.on('data', handleData);
+
+    process.on('SIGINT', () => child.kill('SIGINT'));
+    process.on('SIGTERM', () => child.kill('SIGTERM'));
+
+    child.on('exit', (code) => process.exit(code ?? 1));
+  });
+}
+
+// ── Main flows ──
+
+async function init() {
+  banner();
+
+  const steps = [
+    'Creating config',
+    'Registering handle',
+    'Installing cloudflared',
+    'Starting server',
+    'Connecting tunnel',
+  ];
+
+  // Step 1: Config
+  createConfig();
+
+  // Step 2: Relay registration (interactive — before stepper)
+  await registerWithRelay();
+
+  // Now the non-interactive steps
+  const buildSteps = [
+    'Installing cloudflared',
+    'Starting server',
+    'Connecting tunnel',
+  ];
+
+  const stepper = new Stepper(buildSteps);
+  stepper.start();
+
+  // Step 3: Cloudflared
+  await installCloudflared();
+  stepper.advance();
+
+  // Step 4+5: Server + Tunnel
+  stepper.advance();
+  const { child, tunnelUrl, relayUrl } = await bootServer();
+  stepper.advance();
+
+  stepper.finish();
+  finalMessage(tunnelUrl, relayUrl);
+
+  child.stdout.on('data', (d) => {
+    process.stdout.write(`  ${c.dim}${d.toString().trim()}${c.reset}\n`);
+  });
+  child.stderr.on('data', (d) => {
+    process.stderr.write(`  ${c.dim}${d.toString().trim()}${c.reset}\n`);
+  });
+}
+
+async function start() {
+  if (!fs.existsSync(CONFIG_PATH)) {
+    return init();
+  }
+
+  banner();
+
+  const steps = ['Loading config', 'Starting server', 'Connecting tunnel'];
+  const stepper = new Stepper(steps);
+  stepper.start();
+
+  stepper.advance(); // config exists
+  stepper.advance(); // starting
+
+  const { child, tunnelUrl, relayUrl } = await bootServer();
+  stepper.advance();
+
+  stepper.finish();
+  finalMessage(tunnelUrl, relayUrl);
+
+  child.stdout.on('data', (d) => {
+    process.stdout.write(`  ${c.dim}${d.toString().trim()}${c.reset}\n`);
+  });
+  child.stderr.on('data', (d) => {
+    process.stderr.write(`  ${c.dim}${d.toString().trim()}${c.reset}\n`);
+  });
+}
+
+async function status() {
+  try {
+    const config = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8'));
+    const res = await fetch(`http://localhost:${config.port}/api/health`);
+    const data = await res.json();
+    console.log(`\n  ${c.green}●${c.reset} Bot is running`);
+    console.log(`  ${c.dim}Uptime: ${data.uptime}s${c.reset}`);
+    if (config.relay?.url) {
+      console.log(`  ${c.dim}URL: ${config.relay.url}${c.reset}`);
+    }
+    console.log(`  ${c.dim}Config: ${CONFIG_PATH}${c.reset}\n`);
+  } catch {
+    console.log(`\n  ${c.dim}●${c.reset} Bot is not running.\n`);
+  }
+}
+
+// ── Route ──
+
+switch (command) {
+  case 'init':    init(); break;
+  case 'start':   start(); break;
+  case 'status':  status(); break;
+  default:
+    fs.existsSync(CONFIG_PATH) ? start() : init();
+}

package/client/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#212121" />
+    <title>Fluxy</title>
+  </head>
+  <body class="bg-background text-foreground">
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/client/public/icons/openai.svg

@@ -0,0 +1,15 @@
+<svg width="721" height="721" viewBox="0 0 721 721" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1637_2935)">
+<g clip-path="url(#clip1_1637_2935)">
+<path d="M304.246 295.411V249.828C304.246 245.989 305.687 243.109 309.044 241.191L400.692 188.412C413.167 181.215 428.042 177.858 443.394 177.858C500.971 177.858 537.44 222.482 537.44 269.982C537.44 273.34 537.44 277.179 536.959 281.018L441.954 225.358C436.197 222 430.437 222 424.68 225.358L304.246 295.411ZM518.245 472.945V364.024C518.245 357.304 515.364 352.507 509.608 349.149L389.174 279.096L428.519 256.543C431.877 254.626 434.757 254.626 438.115 256.543L529.762 309.323C556.154 324.679 573.905 357.304 573.905 388.971C573.905 425.436 552.315 459.024 518.245 472.941V472.945ZM275.937 376.982L236.592 353.952C233.235 352.034 231.794 349.154 231.794 345.315V239.756C231.794 188.416 271.139 149.548 324.4 149.548C344.555 149.548 363.264 156.268 379.102 168.262L284.578 222.964C278.822 226.321 275.942 231.119 275.942 237.838V376.986L275.937 376.982ZM360.626 425.922L304.246 394.255V327.083L360.626 295.416L417.002 327.083V394.255L360.626 425.922ZM396.852 571.789C376.698 571.789 357.989 565.07 342.151 553.075L436.674 498.374C442.431 495.017 445.311 490.219 445.311 483.499V344.352L485.138 367.382C488.495 369.299 489.936 372.179 489.936 376.018V481.577C489.936 532.917 450.109 571.785 396.852 571.785V571.789ZM283.134 464.79L191.486 412.01C165.094 396.654 147.343 364.029 147.343 332.362C147.343 295.416 169.415 262.309 203.48 248.393V357.791C203.48 364.51 206.361 369.308 212.117 372.665L332.074 442.237L292.729 464.79C289.372 466.707 286.491 466.707 283.134 464.79ZM277.859 543.48C223.639 543.48 183.813 502.695 183.813 452.314C183.813 448.475 184.294 444.636 184.771 440.797L279.295 495.498C285.051 498.856 290.812 498.856 296.568 495.498L417.002 425.927V471.509C417.002 475.349 415.562 478.229 412.204 480.146L320.557 532.926C308.081 540.122 293.206 543.48 277.854 543.48H277.859ZM396.852 600.576C454.911 600.576 503.37 559.313 514.41 504.612C568.149 490.696 602.696 440.315 602.696 388.976C602.696 355.387 588.303 322.762 562.392 299.25C564.791 289.173 566.231 279.096 566.231 269.024C566.231 200.411 510.571 149.067 446.274 149.067C433.322 149.067 420.846 150.984 408.37 155.305C386.775 134.192 357.026 120.758 324.4 120.758C266.342 120.758 217.883 162.02 206.843 216.721C153.104 230.637 118.557 281.018 118.557 332.357C118.557 365.946 132.95 398.571 158.861 422.083C156.462 432.16 155.022 442.237 155.022 452.309C155.022 520.922 210.682 572.266 274.978 572.266C287.931 572.266 300.407 570.349 312.883 566.028C334.473 587.141 364.222 600.576 396.852 600.576Z" fill="white"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_1637_2935">
+<rect width="720" height="720" fill="white" transform="translate(0.606934 0.899902)"/>
+</clipPath>
+<clipPath id="clip1_1637_2935">
+<rect width="484.139" height="479.818" fill="white" transform="translate(118.557 120.758)"/>
+</clipPath>
+</defs>
+</svg>

package/client/src/App.tsx

@@ -0,0 +1,81 @@
+import { useState, useEffect } from 'react';
+import { useWebSocket } from './hooks/useWebSocket';
+import ErrorBoundary from './components/ErrorBoundary';
+import DashboardLayout from './components/Layout/DashboardLayout';
+import DashboardPage from './components/Dashboard/DashboardPage';
+import ChatView from './components/Chat/ChatView';
+import FluxyFab from './components/FluxyFab';
+import OnboardWizard from './components/Onboard/OnboardWizard';
+import {
+  Sheet,
+  SheetContent,
+  SheetTitle,
+  SheetDescription,
+} from './components/ui/sheet';
+
+function DashboardError() {
+  return (
+    <div className="flex items-center justify-center h-dvh p-6 text-center">
+      <div>
+        <h1 className="text-xl font-semibold mb-2">Something went wrong</h1>
+        <p className="text-sm text-muted-foreground">
+          The dashboard encountered an error. Use the Fluxy button to continue chatting.
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export default function App() {
+  const [chatOpen, setChatOpen] = useState(false);
+  const [showOnboard, setShowOnboard] = useState(false);
+  const { ws, connected } = useWebSocket();
+
+  useEffect(() => {
+    fetch('/api/settings')
+      .then((r) => r.json())
+      .then((s) => { if (s.onboard_complete !== 'true') setShowOnboard(true); })
+      .catch(() => setShowOnboard(true));
+  }, []);
+
+  return (
+    <>
+      <ErrorBoundary fallback={<DashboardError />}>
+        <DashboardLayout onOpenOnboard={() => setShowOnboard(true)}>
+          <DashboardPage />
+        </DashboardLayout>
+      </ErrorBoundary>
+
+      {/* Chat sheet — slides from right */}
+      <Sheet open={chatOpen} onOpenChange={setChatOpen}>
+        <SheetContent
+          side="right"
+          className="w-full sm:max-w-md !gap-0 !p-0 !border-l-0"
+          onOpenAutoFocus={(e) => e.preventDefault()}
+        >
+          {/* Header — pr-12 to avoid overlap with built-in X button */}
+          <div className="flex items-center gap-3 px-4 pr-12 py-3 border-b border-border shrink-0">
+            <img src="/fluxy.png" alt="Fluxy" className="h-5 w-auto" />
+            <SheetTitle className="text-sm font-semibold">Fluxy</SheetTitle>
+            <div
+              className={`h-2 w-2 rounded-full ${connected ? 'bg-green-500' : 'bg-red-500'}`}
+            />
+            <SheetDescription className="sr-only">
+              Chat with your Fluxy AI assistant
+            </SheetDescription>
+          </div>
+
+          {/* Chat body — fills remaining height */}
+          <div className="flex-1 min-h-0 flex flex-col overflow-hidden">
+            <ChatView ws={ws} />
+          </div>
+        </SheetContent>
+      </Sheet>
+
+      <FluxyFab onClick={() => setChatOpen((o) => !o)} />
+
+      {/* Onboarding wizard overlay */}
+      {showOnboard && <OnboardWizard onComplete={() => setShowOnboard(false)} />}
+    </>
+  );
+}

package/client/src/components/Chat/ChatView.tsx

@@ -0,0 +1,19 @@
+import type { WsClient } from '../../lib/ws-client';
+import { useChat } from '../../hooks/useChat';
+import MessageList from './MessageList';
+import InputBar from './InputBar';
+
+interface Props {
+  ws: WsClient | null;
+}
+
+export default function ChatView({ ws }: Props) {
+  const { messages, streaming, streamBuffer, sendMessage, stopStreaming } = useChat(ws);
+
+  return (
+    <div className="flex flex-col h-full overflow-hidden">
+      <MessageList messages={messages} streaming={streaming} streamBuffer={streamBuffer} />
+      <InputBar onSend={sendMessage} onStop={stopStreaming} streaming={streaming} />
+    </div>
+  );
+}