fluxy-bot 0.1.0 → 0.1.2

package/bin/cli.js

@@ -4,7 +4,6 @@ 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));
@@ -14,8 +13,6 @@ 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 ──
@@ -29,7 +26,6 @@ const c = {
   yellow: '\x1b[33m',
   red: '\x1b[31m',
   white: '\x1b[97m',
-  bg: '\x1b[48;5;236m',
 };
 
 const SPINNER = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
@@ -101,7 +97,7 @@ class Stepper {
 function banner() {
   console.log(`
   ${c.cyan}${c.bold}╔═══════════════════════════════╗
-  ║         FLUXY  v0.1.0         ║
+  ║         FLUXY  v0.1.1         ║
   ╚═══════════════════════════════╝${c.reset}
   ${c.dim}Self-hosted AI bot${c.reset}`);
 }
@@ -110,7 +106,7 @@ function finalMessage(tunnelUrl, relayUrl) {
   console.log(`
   ${c.dim}─────────────────────────────────${c.reset}
 
-  ${c.bold}${c.white}Continue your setup at:${c.reset}
+  ${c.bold}${c.white}Open your dashboard to finish setup:${c.reset}
 
   ${c.cyan}${c.bold}${tunnelUrl}${c.reset}`);
 
@@ -127,18 +123,6 @@ function finalMessage(tunnelUrl, relayUrl) {
   `);
 }
 
-// ── 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() {
@@ -197,161 +181,51 @@ async function installCloudflared() {
   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',
+      process.execPath,
       ['--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 });
-      }
+    let resolved = false;
+
+    const doResolve = () => {
+      if (resolved) return;
+      resolved = true;
+      const config = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8'));
+      resolve({
+        child,
+        tunnelUrl: tunnelUrl || `http://localhost:${config.port}`,
+        relayUrl: relayUrl || config.relay?.url || null,
+      });
     };
 
     const handleData = (data) => {
       const text = data.toString();
 
       const tunnelMatch = text.match(/__TUNNEL_URL__=(\S+)/);
-      if (tunnelMatch) {
-        tunnelUrl = tunnelMatch[1];
-      }
+      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 (relayMatch) relayUrl = relayMatch[1];
 
       if (tunnelUrl && relayUrl) {
-        resolve({ child, tunnelUrl, relayUrl });
+        doResolve();
         return;
       }
 
+      if (tunnelUrl && !relayUrl) {
+        setTimeout(doResolve, 3000);
+      }
+
       if (text.includes('__TUNNEL_FAILED__')) {
-        fallbackLocal();
-        return;
+        doResolve();
       }
     };
 
@@ -370,35 +244,26 @@ function bootServer() {
 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 = [
+  const steps = [
+    'Creating config',
     'Installing cloudflared',
     'Starting server',
     'Connecting tunnel',
   ];
 
-  const stepper = new Stepper(buildSteps);
+  const stepper = new Stepper(steps);
   stepper.start();
 
-  // Step 3: Cloudflared
+  // Config already created
+  stepper.advance();
+
+  // Cloudflared
   await installCloudflared();
   stepper.advance();
 
-  // Step 4+5: Server + Tunnel
+  // Server + Tunnel
   stepper.advance();
   const { child, tunnelUrl, relayUrl } = await bootServer();
   stepper.advance();

package/client/src/components/Onboard/OnboardWizard.tsx

@@ -34,6 +34,13 @@ const MODELS: Record<string, { id: string; label: string }[]> = {
 
 const TOTAL_STEPS = 5; // 0..4
 
+const HANDLES = [
+  { tier: 'premium', label: (n: string) => `${n}.fluxy.bot`, badge: '$5', badgeCls: 'bg-primary/15 text-primary border-primary/20', highlight: true },
+  { tier: 'my', label: (n: string) => `my.fluxy.bot/${n}`, badge: 'Free', badgeCls: 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20', highlight: false },
+  { tier: 'at', label: (n: string) => `at.fluxy.bot/${n}`, badge: 'Free', badgeCls: 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20', highlight: false },
+  { tier: 'on', label: (n: string) => `on.fluxy.bot/${n}`, badge: 'Free', badgeCls: 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20', highlight: false },
+] as const;
+
 /* ── Dropdown ── */
 
 function ModelDropdown({ models, value, onChange }: { models: { id: string; label: string }[]; value: string; onChange: (id: string) => void }) {
@@ -93,7 +100,6 @@ interface Props {
 export default function OnboardWizard({ onComplete }: Props) {
   const [step, setStep] = useState(0);
   const [userName, setUserName] = useState('');
-  const [agentName, setAgentName] = useState('Fluxy');
   const [provider, setProvider] = useState('anthropic');
   const [model, setModel] = useState('');
   const [saving, setSaving] = useState(false);
@@ -119,6 +125,16 @@ export default function OnboardWizard({ onComplete }: Props) {
   // Ollama-specific
   const [baseUrl, setBaseUrl] = useState('');
 
+  // Bot name + Handle (step 2)
+  const [botName, setBotName] = useState('');
+  const [handleStatus, setHandleStatus] = useState<null | 'checking' | 'available' | 'taken' | 'invalid'>(null);
+  const [handleError, setHandleError] = useState('');
+  const [selectedTier, setSelectedTier] = useState('my');
+  const [registering, setRegistering] = useState(false);
+  const [registered, setRegistered] = useState(false);
+  const [registeredUrl, setRegisteredUrl] = useState('');
+  const handleDebounce = useRef<ReturnType<typeof setTimeout> | null>(null);
+
   // Whisper (step 4)
   const [whisperEnabled, setWhisperEnabled] = useState(false);
 
@@ -162,8 +178,73 @@ export default function OnboardWizard({ onComplete }: Props) {
     return () => clearInterval(interval);
   }, [openaiWaiting]);
 
+  // Handle availability check (debounced)
+  useEffect(() => {
+    if (handleDebounce.current) clearTimeout(handleDebounce.current);
+    setHandleStatus(null);
+    setHandleError('');
+    setRegistered(false);
+    setRegisteredUrl('');
+
+    const trimmed = botName.trim();
+    if (!trimmed) return;
+    if (trimmed.length < 3) {
+      setHandleStatus('invalid');
+      setHandleError('At least 3 characters');
+      return;
+    }
+
+    setHandleStatus('checking');
+    handleDebounce.current = setTimeout(async () => {
+      try {
+        const res = await fetch(`/api/handle/check/${encodeURIComponent(trimmed)}`);
+        const data = await res.json();
+        if (!data.valid) {
+          setHandleStatus('invalid');
+          setHandleError(data.error);
+        } else if (data.available) {
+          setHandleStatus('available');
+        } else {
+          setHandleStatus('taken');
+        }
+      } catch {
+        setHandleStatus(null);
+      }
+    }, 400);
+
+    return () => { if (handleDebounce.current) clearTimeout(handleDebounce.current); };
+  }, [botName]);
+
+  const onBotNameInput = (val: string) => {
+    setBotName(val.toLowerCase().replace(/[^a-z0-9-]/g, ''));
+  };
+
+  const onClaimHandle = async () => {
+    if (!botName || handleStatus !== 'available') return;
+    setRegistering(true);
+    try {
+      const res = await fetch('/api/handle/register', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ username: botName, tier: selectedTier }),
+      });
+      const data = await res.json();
+      if (data.ok) {
+        setRegistered(true);
+        setRegisteredUrl(data.url);
+      } else {
+        setHandleError(data.error || 'Registration failed');
+        setHandleStatus('invalid');
+      }
+    } catch {
+      setHandleError('Could not reach server');
+      setHandleStatus('invalid');
+    } finally {
+      setRegistering(false);
+    }
+  };
+
   const handleProviderChange = (id: string) => {
-    // Cancel Codex OAuth if switching away from OpenAI
     if (provider === 'openai' && id !== 'openai' && openaiWaiting) {
       fetch('/api/auth/codex/cancel', { method: 'POST' });
       setOpenaiWaiting(false);
@@ -268,13 +349,14 @@ export default function OnboardWizard({ onComplete }: Props) {
 
   /* ── Navigation ── */
 
+  // Steps: 0=Welcome, 1=Name, 2=Bot name + Handle, 3=Provider, 4=Whisper+Complete
   const canNext = (() => {
     switch (step) {
       case 0: return true;
       case 1: return userName.trim().length > 0;
-      case 2: return agentName.trim().length > 0;
+      case 2: return botName.trim().length >= 3; // Must have a bot name
       case 3: return !!(provider && model && isConnected);
-      case 4: return true; // Whisper is optional
+      case 4: return true;
       default: return false;
     }
   })();
@@ -294,7 +376,7 @@ export default function OnboardWizard({ onComplete }: Props) {
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
           userName: userName.trim(),
-          agentName: agentName.trim() || 'Fluxy',
+          agentName: botName.trim() || 'Fluxy',
           provider,
           model,
           apiKey: '',
@@ -402,33 +484,140 @@ export default function OnboardWizard({ onComplete }: Props) {
               </div>
             )}
 
-            {/* ── Step 2: Agent name ── */}
+            {/* ── Step 2: Name your bot + Claim handle ── */}
             {step === 2 && (
               <div>
                 <h1 className="text-xl font-bold text-white tracking-tight">
-                  Name your AI agent
+                  Name your bot
                 </h1>
                 <p className="text-white/40 text-[13px] mt-1.5 leading-relaxed">
-                  Give your assistant a personality.
+                  This is your bot's name and permanent handle — access it from anywhere.
                 </p>
-                <div className="mt-5 flex items-center gap-3">
+
+                {/* Input */}
+                <div className="relative mt-5">
                   <input
                     type="text"
-                    value={agentName}
-                    onChange={(e) => setAgentName(e.target.value)}
-                    onKeyDown={handleKeyDown}
-                    placeholder="e.g. Fluxy"
+                    value={botName}
+                    onChange={(e) => onBotNameInput(e.target.value)}
+                    maxLength={30}
+                    placeholder="your-bot-name"
+                    spellCheck={false}
+                    autoCapitalize="none"
+                    autoCorrect="off"
                     autoFocus
-                    className={inputCls + ' flex-1'}
+                    disabled={registered}
+                    className={inputCls + ' pr-10 font-mono' + (registered ? ' opacity-50' : '')}
                   />
+                  {handleStatus && botName.length > 0 && !registered && (
+                    <div className="absolute right-4 top-1/2 -translate-y-1/2">
+                      {handleStatus === 'checking' && (
+                        <div className="w-5 h-5 border-2 border-white/10 border-t-primary rounded-full animate-spin" />
+                      )}
+                      {handleStatus === 'available' && (
+                        <div className="w-6 h-6 rounded-full bg-emerald-500/15 flex items-center justify-center">
+                          <Check className="h-3.5 w-3.5 text-emerald-400" />
+                        </div>
+                      )}
+                      {handleStatus === 'taken' && (
+                        <div className="w-6 h-6 rounded-full bg-red-500/15 flex items-center justify-center">
+                          <svg className="w-3.5 h-3.5 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
+                            <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+                          </svg>
+                        </div>
+                      )}
+                      {handleStatus === 'invalid' && (
+                        <div className="w-6 h-6 rounded-full bg-amber-500/15 flex items-center justify-center">
+                          <svg className="w-3.5 h-3.5 text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
+                            <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3m0 4h.01" />
+                          </svg>
+                        </div>
+                      )}
+                    </div>
+                  )}
+                </div>
+
+                {/* Status messages */}
+                {handleStatus === 'invalid' && handleError && (
+                  <p className="text-amber-400 text-[12px] mt-2">{handleError}</p>
+                )}
+                {handleStatus === 'taken' && (
+                  <p className="text-red-400 text-[12px] mt-2">This name is already taken</p>
+                )}
+
+                {/* Handle tier options */}
+                {handleStatus === 'available' && botName.length > 0 && !registered && (
+                  <div className="space-y-2 mt-4">
+                    {HANDLES.map((h) => (
+                      <button
+                        key={h.tier}
+                        onClick={() => setSelectedTier(h.tier)}
+                        className={`w-full flex items-center justify-between px-4 py-3 rounded-xl border transition-all duration-200 text-left ${
+                          selectedTier === h.tier
+                            ? h.highlight
+                              ? 'border-primary/40 bg-primary/[0.06]'
+                              : 'border-primary/30 bg-white/[0.04]'
+                            : 'border-white/[0.06] bg-transparent hover:border-white/10 hover:bg-white/[0.02]'
+                        }`}
+                      >
+                        <span className="font-mono text-[13px] text-white/70">
+                          {h.label(botName)}
+                        </span>
+                        <span className={`text-[11px] font-medium px-2.5 py-0.5 rounded-full border ${h.badgeCls}`}>
+                          {h.badge}
+                        </span>
+                      </button>
+                    ))}
+                  </div>
+                )}
+
+                {/* Registered success */}
+                {registered && (
+                  <div className="mt-4 bg-emerald-500/8 border border-emerald-500/15 rounded-xl px-4 py-3">
+                    <div className="flex items-center gap-2">
+                      <Check className="h-4 w-4 text-emerald-400" />
+                      <p className="text-emerald-400/90 text-[13px] font-medium">Handle claimed!</p>
+                    </div>
+                    <p className="text-emerald-400/60 text-[12px] mt-1 font-mono">{registeredUrl}</p>
+                  </div>
+                )}
+
+                {/* Claim button */}
+                {handleStatus === 'available' && botName.length > 0 && !registered && (
+                  <button
+                    onClick={onClaimHandle}
+                    disabled={registering}
+                    className="w-full mt-4 py-3 bg-primary hover:bg-primary/90 text-white text-[14px] font-semibold rounded-full transition-colors flex items-center justify-center gap-2 disabled:opacity-40"
+                  >
+                    {registering ? (
+                      <><LoaderCircle className="h-4 w-4 animate-spin" />Claiming...</>
+                    ) : (
+                      <>Claim & Continue<ArrowRight className="h-4 w-4" /></>
+                    )}
+                  </button>
+                )}
+
+                {/* Continue without claiming */}
+                {registered && (
                   <button
                     onClick={next}
-                    disabled={!canNext}
-                    className="shrink-0 h-12 w-12 flex items-center justify-center rounded-full bg-primary hover:bg-primary/90 text-white transition-colors disabled:opacity-30"
+                    className="w-full mt-4 py-3 bg-primary hover:bg-primary/90 text-white text-[14px] font-semibold rounded-full transition-colors flex items-center justify-center gap-2"
                   >
-                    <ArrowRight className="h-5 w-5" />
+                    Continue
+                    <ArrowRight className="h-4 w-4" />
                   </button>
-                </div>
+                )}
+
+                {/* Skip if name is taken or not checked yet */}
+                {!registered && (handleStatus !== 'available' || botName.length === 0) && botName.length >= 3 && (
+                  <button
+                    onClick={next}
+                    className="w-full mt-4 py-2.5 text-white/30 hover:text-white/50 text-[13px] transition-colors flex items-center justify-center gap-2"
+                  >
+                    Skip handle for now
+                    <ArrowRight className="h-3.5 w-3.5" />
+                  </button>
+                )}
               </div>
             )}
 
@@ -478,7 +667,6 @@ export default function OnboardWizard({ onComplete }: Props) {
                   ))}
                 </div>
 
-                {/* Divider */}
                 <div className="border-t border-white/[0.06] mt-4 mb-3" />
 
                 {/* ── Auth flow: Anthropic ── */}
@@ -655,7 +843,6 @@ export default function OnboardWizard({ onComplete }: Props) {
                   </>
                 )}
 
-                {/* Continue button */}
                 {isConnected && (
                   <button
                     onClick={next}
@@ -669,7 +856,7 @@ export default function OnboardWizard({ onComplete }: Props) {
               </div>
             )}
 
-            {/* ── Step 4: Whisper (optional) ── */}
+            {/* ── Step 4: Whisper (optional) + Complete ── */}
             {step === 4 && (
               <div>
                 <div className="flex items-center gap-2 mb-1">
@@ -684,7 +871,6 @@ export default function OnboardWizard({ onComplete }: Props) {
                   Allow users to send audio messages that are automatically transcribed.
                 </p>
 
-                {/* Whisper card */}
                 <button
                   onClick={() => setWhisperEnabled((v) => !v)}
                   className={`w-full mt-5 rounded-xl border transition-all duration-200 p-4 text-left ${
@@ -701,7 +887,6 @@ export default function OnboardWizard({ onComplete }: Props) {
                         Speech-to-text powered by OpenAI. Requires an OpenAI API key.
                       </div>
                     </div>
-                    {/* Toggle */}
                     <div className={`w-10 h-[22px] rounded-full transition-colors duration-200 flex items-center px-0.5 shrink-0 ${
                       whisperEnabled ? 'bg-primary' : 'bg-white/[0.08]'
                     }`}>
@@ -723,7 +908,6 @@ export default function OnboardWizard({ onComplete }: Props) {
                   </div>
                 )}
 
-                {/* Actions */}
                 <button
                   onClick={handleComplete}
                   disabled={saving}