fluxy-bot 0.1.0

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

@@ -0,0 +1,763 @@
+import { useState, useRef, useEffect, type KeyboardEvent } from 'react';
+import { ArrowRight, LoaderCircle, ExternalLink, ClipboardPaste, RefreshCw, Check, ChevronDown, Mic } from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
+
+/* ── Provider config ── */
+
+const PROVIDERS = [
+  { id: 'anthropic', name: 'Claude', subtitle: 'by Anthropic', icon: '/icons/claude.png' },
+  { id: 'openai', name: 'OpenAI Codex', subtitle: 'ChatGPT Plus / Pro', icon: '/icons/codex.png' },
+  { id: 'ollama', name: 'Ollama', subtitle: 'Run locally', icon: null },
+] as const;
+
+const MODELS: Record<string, { id: string; label: string }[]> = {
+  anthropic: [
+    { id: 'claude-sonnet-4-20250514', label: 'Claude Sonnet 4' },
+    { id: 'claude-opus-4-20250514', label: 'Claude Opus 4' },
+    { id: 'claude-haiku-4-5-20251001', label: 'Claude Haiku 4.5' },
+  ],
+  openai: [
+    { id: 'gpt-5.2-codex:medium', label: 'GPT-5.2 Codex Medium' },
+    { id: 'gpt-5.2-codex:high', label: 'GPT-5.2 Codex High' },
+    { id: 'gpt-5.2-codex:xhigh', label: 'GPT-5.2 Codex Extra High' },
+    { id: 'gpt-5.3-codex:medium', label: 'GPT-5.3 Codex Medium (Pro)' },
+    { id: 'gpt-5.3-codex:high', label: 'GPT-5.3 Codex High (Pro)' },
+    { id: 'gpt-5.3-codex:xhigh', label: 'GPT-5.3 Codex Extra High (Pro)' },
+  ],
+  ollama: [
+    { id: 'llama3.2', label: 'Llama 3.2' },
+    { id: 'mistral', label: 'Mistral' },
+    { id: 'codellama', label: 'Code Llama' },
+    { id: 'phi3', label: 'Phi-3' },
+  ],
+};
+
+const TOTAL_STEPS = 5; // 0..4
+
+/* ── Dropdown ── */
+
+function ModelDropdown({ models, value, onChange }: { models: { id: string; label: string }[]; value: string; onChange: (id: string) => void }) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [open]);
+
+  const selected = models.find((m) => m.id === value);
+
+  return (
+    <div className="relative" ref={ref}>
+      <button
+        type="button"
+        onClick={() => setOpen((o) => !o)}
+        className="w-full flex items-center justify-between bg-white/[0.03] border border-white/[0.08] text-white rounded-xl px-4 py-2.5 text-[13px] outline-none hover:border-white/15 focus:border-primary/30 transition-colors"
+      >
+        <span className={selected ? 'text-white' : 'text-white/20'}>
+          {selected ? selected.label : 'Choose a model...'}
+        </span>
+        <ChevronDown className={`h-4 w-4 text-white/30 transition-transform ${open ? 'rotate-180' : ''}`} />
+      </button>
+      {open && (
+        <div className="absolute left-0 right-0 top-full mt-1 bg-[#222] border border-white/[0.08] rounded-xl shadow-xl py-1 z-10 max-h-48 overflow-y-auto">
+          {models.map((m) => (
+            <button
+              key={m.id}
+              onClick={() => { onChange(m.id); setOpen(false); }}
+              className={`w-full text-left px-4 py-2 text-[13px] transition-colors ${
+                value === m.id
+                  ? 'text-primary bg-primary/10'
+                  : 'text-white/70 hover:bg-white/[0.04] hover:text-white'
+              }`}
+            >
+              {m.label}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/* ── Component ── */
+
+interface Props {
+  onComplete: () => void;
+}
+
+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);
+
+  // Auth state per provider
+  const [authState, setAuthState] = useState<Record<string, 'idle' | 'authenticating' | 'connected'>>({
+    anthropic: 'idle',
+    openai: 'idle',
+    ollama: 'connected',
+  });
+
+  // Anthropic/Claude-specific
+  const [oauthStarted, setOauthStarted] = useState(false);
+  const [anthropicCode, setAnthropicCode] = useState('');
+  const [isExchanging, setIsExchanging] = useState(false);
+  const [anthropicError, setAnthropicError] = useState<string | undefined>();
+  const [anthropicChecking, setAnthropicChecking] = useState(false);
+
+  // OpenAI/Codex-specific
+  const [openaiWaiting, setOpenaiWaiting] = useState(false);
+  const [openaiError, setOpenaiError] = useState<string | undefined>();
+
+  // Ollama-specific
+  const [baseUrl, setBaseUrl] = useState('');
+
+  // Whisper (step 4)
+  const [whisperEnabled, setWhisperEnabled] = useState(false);
+
+  const isConnected = authState[provider] === 'connected';
+
+  // Check if Claude is already authenticated when selecting Anthropic
+  useEffect(() => {
+    if (provider !== 'anthropic' || authState.anthropic === 'connected') return;
+    fetch('/api/auth/claude/status')
+      .then((r) => r.json())
+      .then((data) => {
+        if (data.authenticated) setAuthState((s) => ({ ...s, anthropic: 'connected' }));
+      })
+      .catch(() => {});
+  }, [provider]);
+
+  // Check if Codex is already authenticated when selecting OpenAI
+  useEffect(() => {
+    if (provider !== 'openai' || authState.openai === 'connected') return;
+    fetch('/api/auth/codex/status')
+      .then((r) => r.json())
+      .then((data) => {
+        if (data.authenticated) setAuthState((s) => ({ ...s, openai: 'connected' }));
+      })
+      .catch(() => {});
+  }, [provider]);
+
+  // Poll for Codex auth completion while waiting
+  useEffect(() => {
+    if (!openaiWaiting) return;
+    const interval = setInterval(async () => {
+      try {
+        const res = await fetch('/api/auth/codex/status');
+        const data = await res.json();
+        if (data.authenticated) {
+          setOpenaiWaiting(false);
+          setAuthState((s) => ({ ...s, openai: 'connected' }));
+        }
+      } catch {}
+    }, 2000);
+    return () => clearInterval(interval);
+  }, [openaiWaiting]);
+
+  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);
+    }
+    setProvider(id);
+    setModel('');
+    setOauthStarted(false);
+    setAnthropicCode('');
+    setAnthropicError(undefined);
+    setOpenaiWaiting(false);
+    setOpenaiError(undefined);
+  };
+
+  /* ── Auth handlers: Anthropic/Claude ── */
+
+  const handleAnthropicAuth = async () => {
+    setAnthropicError(undefined);
+    try {
+      const res = await fetch('/api/auth/claude/start', { method: 'POST' });
+      const data = await res.json();
+      if (data.success && data.authUrl) {
+        window.open(data.authUrl, '_blank');
+        setOauthStarted(true);
+      } else {
+        setAnthropicError(data.error || 'Failed to start authentication');
+      }
+    } catch (err: any) {
+      setAnthropicError(err.message);
+    }
+  };
+
+  const handleAnthropicConnect = async () => {
+    if (!anthropicCode.trim()) return;
+    setIsExchanging(true);
+    setAnthropicError(undefined);
+    try {
+      const res = await fetch('/api/auth/claude/exchange', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ code: anthropicCode.trim() }),
+      });
+      const data = await res.json();
+      if (data.success) {
+        setAuthState((s) => ({ ...s, anthropic: 'connected' }));
+      } else {
+        setAnthropicError(data.error || 'Code exchange failed');
+      }
+    } catch (err: any) {
+      setAnthropicError(err.message);
+    } finally {
+      setIsExchanging(false);
+    }
+  };
+
+  const handleAnthropicPaste = async () => {
+    try {
+      const text = await navigator.clipboard.readText();
+      if (text) setAnthropicCode(text.trim());
+    } catch { /* clipboard denied */ }
+  };
+
+  const handleAnthropicCheckAuth = async () => {
+    setAnthropicChecking(true);
+    setAnthropicError(undefined);
+    try {
+      const res = await fetch('/api/auth/claude/status');
+      const data = await res.json();
+      if (data.authenticated) {
+        setAuthState((s) => ({ ...s, anthropic: 'connected' }));
+      } else {
+        setAnthropicError('No active session found. Please authenticate first.');
+      }
+    } catch {} finally {
+      setAnthropicChecking(false);
+    }
+  };
+
+  /* ── Auth handlers: OpenAI/Codex ── */
+
+  const handleOpenAIAuth = async () => {
+    setOpenaiWaiting(true);
+    setOpenaiError(undefined);
+    try {
+      const res = await fetch('/api/auth/codex/start', { method: 'POST' });
+      const data = await res.json();
+      if (data.success && data.authUrl) {
+        window.open(data.authUrl, '_blank');
+      } else {
+        setOpenaiWaiting(false);
+        setOpenaiError(data.error || 'Failed to start authentication');
+      }
+    } catch (err: any) {
+      setOpenaiWaiting(false);
+      setOpenaiError(err.message);
+    }
+  };
+
+  const handleOpenAICancel = () => {
+    setOpenaiWaiting(false);
+    fetch('/api/auth/codex/cancel', { method: 'POST' });
+  };
+
+  /* ── Navigation ── */
+
+  const canNext = (() => {
+    switch (step) {
+      case 0: return true;
+      case 1: return userName.trim().length > 0;
+      case 2: return agentName.trim().length > 0;
+      case 3: return !!(provider && model && isConnected);
+      case 4: return true; // Whisper is optional
+      default: return false;
+    }
+  })();
+
+  const next = () => { if (canNext && step < TOTAL_STEPS - 1) setStep((s) => s + 1); };
+  const back = () => { if (step > 0) setStep((s) => s - 1); };
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key === 'Enter' && canNext) next();
+  };
+
+  const handleComplete = async () => {
+    setSaving(true);
+    try {
+      await fetch('/api/onboard', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          userName: userName.trim(),
+          agentName: agentName.trim() || 'Fluxy',
+          provider,
+          model,
+          apiKey: '',
+          baseUrl: provider === 'ollama' ? baseUrl || undefined : undefined,
+          whisperEnabled,
+        }),
+      });
+      onComplete();
+    } catch (err) {
+      console.error('Onboard failed:', err);
+      setSaving(false);
+    }
+  };
+
+  /* ── Styles ── */
+
+  const inputCls =
+    'w-full bg-white/[0.05] border border-white/[0.08] text-white rounded-xl px-4 py-3 text-base outline-none focus:border-primary/40 placeholder:text-white/20 transition-colors';
+  const inputSmCls =
+    'w-full bg-white/[0.03] border border-white/[0.08] text-white rounded-xl px-4 py-2.5 text-[13px] outline-none focus:border-primary/30 placeholder:text-white/20 transition-colors';
+
+  return (
+    <div className="fixed inset-0 z-[200] flex items-center justify-center p-4">
+      <div className="absolute inset-0 bg-black/85 backdrop-blur-md" />
+
+      <motion.div
+        initial={{ opacity: 0, scale: 0.95 }}
+        animate={{ opacity: 1, scale: 1 }}
+        transition={{ duration: 0.3 }}
+        className="relative w-full max-w-[480px] bg-[#181818] border border-white/[0.06] rounded-[24px] shadow-2xl overflow-hidden"
+      >
+        {/* Step dots */}
+        <div className="flex justify-center gap-2 pt-6">
+          {Array.from({ length: TOTAL_STEPS }, (_, i) => (
+            <div
+              key={i}
+              className={`h-1.5 rounded-full transition-all duration-300 ${
+                i === step
+                  ? 'w-7 bg-primary'
+                  : i < step
+                    ? 'w-1.5 bg-primary/60'
+                    : 'w-1.5 bg-white/10'
+              }`}
+            />
+          ))}
+        </div>
+
+        {/* Content */}
+        <AnimatePresence mode="wait">
+          <motion.div
+            key={step}
+            initial={{ opacity: 0, x: 30 }}
+            animate={{ opacity: 1, x: 0 }}
+            exit={{ opacity: 0, x: -30 }}
+            transition={{ duration: 0.2, ease: 'easeOut' }}
+            className="px-8 pt-6 pb-8"
+          >
+            {/* ── Step 0: Welcome ── */}
+            {step === 0 && (
+              <div className="flex flex-col items-center text-center">
+                <img src="/fluxy.png" alt="Fluxy" className="h-16 w-auto mb-4" />
+                <h1 className="text-2xl font-bold text-white tracking-tight">
+                  Welcome to Fluxy
+                </h1>
+                <p className="text-white/40 text-[14px] mt-2 leading-relaxed max-w-[320px]">
+                  Let's set up your AI assistant in just a few steps.
+                </p>
+                <button
+                  onClick={next}
+                  className="mt-6 px-7 py-3 bg-primary hover:bg-primary/90 text-white text-[14px] font-semibold rounded-full transition-colors flex items-center gap-2"
+                >
+                  Get Started
+                  <ArrowRight className="h-4 w-4" />
+                </button>
+              </div>
+            )}
+
+            {/* ── Step 1: Your name ── */}
+            {step === 1 && (
+              <div>
+                <h1 className="text-xl font-bold text-white tracking-tight">
+                  What's your name?
+                </h1>
+                <p className="text-white/40 text-[13px] mt-1.5 leading-relaxed">
+                  This is how your agent will address you.
+                </p>
+                <div className="mt-5 flex items-center gap-3">
+                  <input
+                    type="text"
+                    value={userName}
+                    onChange={(e) => setUserName(e.target.value)}
+                    onKeyDown={handleKeyDown}
+                    placeholder="Enter your name"
+                    autoFocus
+                    className={inputCls + ' flex-1'}
+                  />
+                  <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"
+                  >
+                    <ArrowRight className="h-5 w-5" />
+                  </button>
+                </div>
+              </div>
+            )}
+
+            {/* ── Step 2: Agent name ── */}
+            {step === 2 && (
+              <div>
+                <h1 className="text-xl font-bold text-white tracking-tight">
+                  Name your AI agent
+                </h1>
+                <p className="text-white/40 text-[13px] mt-1.5 leading-relaxed">
+                  Give your assistant a personality.
+                </p>
+                <div className="mt-5 flex items-center gap-3">
+                  <input
+                    type="text"
+                    value={agentName}
+                    onChange={(e) => setAgentName(e.target.value)}
+                    onKeyDown={handleKeyDown}
+                    placeholder="e.g. Fluxy"
+                    autoFocus
+                    className={inputCls + ' flex-1'}
+                  />
+                  <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"
+                  >
+                    <ArrowRight className="h-5 w-5" />
+                  </button>
+                </div>
+              </div>
+            )}
+
+            {/* ── Step 3: Provider + Auth + Model ── */}
+            {step === 3 && (
+              <div>
+                <h1 className="text-xl font-bold text-white tracking-tight">
+                  Choose your AI provider
+                </h1>
+                <p className="text-white/40 text-[13px] mt-1.5 leading-relaxed">
+                  Pick one provider to power your bot, authenticate, and select a model.
+                </p>
+
+                {/* Provider cards */}
+                <div className="flex gap-2.5 mt-4">
+                  {PROVIDERS.map((p) => (
+                    <button
+                      key={p.id}
+                      onClick={() => handleProviderChange(p.id)}
+                      className={`flex-1 relative rounded-xl border transition-all duration-200 p-3 text-left ${
+                        provider === p.id
+                          ? 'bg-white/[0.04] border-primary/40'
+                          : 'bg-transparent border-white/[0.06] hover:border-white/10 hover:bg-white/[0.02]'
+                      }`}
+                    >
+                      <div className="flex flex-col items-center gap-1.5 py-0.5">
+                        {p.icon ? (
+                          <img src={p.icon} alt={p.name} className="w-8 h-8 rounded-lg" />
+                        ) : (
+                          <div className="w-8 h-8 rounded-lg bg-white/[0.06] flex items-center justify-center text-white/50 text-sm font-bold">
+                            O
+                          </div>
+                        )}
+                        <div className="text-center">
+                          <div className="text-[13px] font-medium text-white">{p.name}</div>
+                          <div className="text-[10px] text-white/30">{p.subtitle}</div>
+                        </div>
+                      </div>
+                      {authState[p.id] === 'connected' ? (
+                        <div className="absolute top-2 right-2 w-4 h-4 rounded-full bg-emerald-500/15 flex items-center justify-center">
+                          <Check className="h-2.5 w-2.5 text-emerald-400" />
+                        </div>
+                      ) : provider === p.id ? (
+                        <div className="absolute top-2 right-2 w-2 h-2 rounded-full bg-primary" />
+                      ) : null}
+                    </button>
+                  ))}
+                </div>
+
+                {/* Divider */}
+                <div className="border-t border-white/[0.06] mt-4 mb-3" />
+
+                {/* ── Auth flow: Anthropic ── */}
+                {provider === 'anthropic' && (
+                  <div className="space-y-2.5">
+                    {isConnected && (
+                      <div className="bg-emerald-500/8 border border-emerald-500/15 rounded-lg px-3.5 py-2.5">
+                        <p className="text-emerald-400/90 text-[12px]">Connected — Anthropic subscription is active.</p>
+                      </div>
+                    )}
+
+                    {!isConnected && (
+                      <>
+                        {anthropicError && (
+                          <div className="bg-red-500/8 border border-red-500/15 rounded-lg px-3.5 py-2.5">
+                            <p className="text-red-400/90 text-[12px]">{anthropicError}</p>
+                          </div>
+                        )}
+
+                        <div className="space-y-1.5">
+                          {[
+                            'Click the button below to open Anthropic\'s login page',
+                            'Sign in with your Anthropic account — a code will be generated',
+                            'Copy the code and paste it in the field below',
+                          ].map((text, i) => (
+                            <div key={i} className="flex items-start gap-2">
+                              <span className="flex-shrink-0 w-[18px] h-[18px] rounded-full bg-white/[0.06] text-white/30 text-[10px] font-medium flex items-center justify-center mt-px">{i + 1}</span>
+                              <p className="text-white/40 text-[12px] leading-relaxed">{text}</p>
+                            </div>
+                          ))}
+                        </div>
+
+                        <button
+                          onClick={handleAnthropicAuth}
+                          className="w-full py-2.5 px-4 bg-primary hover:bg-primary/90 text-white text-[13px] font-medium rounded-xl transition-colors flex items-center justify-center gap-2"
+                        >
+                          {oauthStarted ? (
+                            <><ExternalLink className="h-3.5 w-3.5 opacity-60" />Open authentication page again</>
+                          ) : (
+                            <>Authenticate with Anthropic<ArrowRight className="h-3.5 w-3.5 opacity-60" /></>
+                          )}
+                        </button>
+
+                        <div className="relative">
+                          <input
+                            type="text"
+                            value={anthropicCode}
+                            onChange={(e) => setAnthropicCode(e.target.value)}
+                            onKeyDown={(e) => e.key === 'Enter' && handleAnthropicConnect()}
+                            placeholder="Paste your code here..."
+                            className={inputSmCls + ' pr-10 font-mono'}
+                          />
+                          <button
+                            onClick={handleAnthropicPaste}
+                            className="absolute right-3 top-1/2 -translate-y-1/2 text-white/20 hover:text-white/50 transition-colors"
+                          >
+                            <ClipboardPaste className="h-3.5 w-3.5" />
+                          </button>
+                        </div>
+
+                        <button
+                          onClick={handleAnthropicConnect}
+                          disabled={!anthropicCode.trim() || isExchanging}
+                          className="w-full py-2.5 px-4 bg-primary hover:bg-primary/90 text-white text-[13px] font-medium rounded-xl transition-colors flex items-center justify-center gap-2 disabled:opacity-40"
+                        >
+                          {isExchanging ? (<><LoaderCircle className="h-3.5 w-3.5 animate-spin" />Verifying...</>) : 'Connect'}
+                        </button>
+
+                        <button
+                          onClick={handleAnthropicCheckAuth}
+                          disabled={anthropicChecking}
+                          className="w-full py-1.5 text-white/25 text-[11px] hover:text-white/40 transition-colors flex items-center justify-center gap-1.5 disabled:opacity-50"
+                        >
+                          {anthropicChecking ? (
+                            <LoaderCircle className="h-3 w-3 animate-spin" />
+                          ) : (
+                            <RefreshCw className="h-3 w-3" />
+                          )}
+                          {anthropicChecking ? 'Checking...' : 'I\'m already authenticated'}
+                        </button>
+                      </>
+                    )}
+                  </div>
+                )}
+
+                {/* ── Auth flow: OpenAI ── */}
+                {provider === 'openai' && (
+                  <div className="space-y-2.5">
+                    {isConnected && (
+                      <div className="bg-emerald-500/8 border border-emerald-500/15 rounded-lg px-3.5 py-2.5">
+                        <p className="text-emerald-400/90 text-[12px]">Connected — ChatGPT subscription is active.</p>
+                      </div>
+                    )}
+
+                    {!isConnected && (
+                      <>
+                        {openaiError && (
+                          <div className="bg-red-500/8 border border-red-500/15 rounded-lg px-3.5 py-2.5">
+                            <p className="text-red-400/90 text-[12px]">{openaiError}</p>
+                          </div>
+                        )}
+
+                        <div className="space-y-1.5">
+                          {[
+                            'Click the button below — your browser will open for ChatGPT sign-in',
+                            'Sign in with your ChatGPT Plus or Pro account',
+                            'Authentication completes automatically — no code to copy',
+                          ].map((text, i) => (
+                            <div key={i} className="flex items-start gap-2">
+                              <span className="flex-shrink-0 w-[18px] h-[18px] rounded-full bg-white/[0.06] text-white/30 text-[10px] font-medium flex items-center justify-center mt-px">{i + 1}</span>
+                              <p className="text-white/40 text-[12px] leading-relaxed">{text}</p>
+                            </div>
+                          ))}
+                        </div>
+
+                        <button
+                          onClick={handleOpenAIAuth}
+                          disabled={openaiWaiting}
+                          className="w-full py-2.5 px-4 bg-white/[0.06] hover:bg-white/[0.09] text-white text-[13px] font-medium rounded-xl transition-colors flex items-center justify-center gap-2 disabled:opacity-60"
+                        >
+                          {openaiWaiting ? (
+                            <><LoaderCircle className="h-3.5 w-3.5 animate-spin opacity-60" />Waiting for sign-in...</>
+                          ) : (
+                            <>Authenticate with ChatGPT<ArrowRight className="h-3.5 w-3.5 opacity-60" /></>
+                          )}
+                        </button>
+
+                        {openaiWaiting && (
+                          <button
+                            onClick={handleOpenAICancel}
+                            className="w-full py-1.5 text-white/25 text-[11px] hover:text-white/40 transition-colors"
+                          >
+                            Cancel
+                          </button>
+                        )}
+                      </>
+                    )}
+                  </div>
+                )}
+
+                {/* ── Auth flow: Ollama ── */}
+                {provider === 'ollama' && (
+                  <div className="space-y-2.5">
+                    <div className="bg-emerald-500/8 border border-emerald-500/15 rounded-lg px-3.5 py-2.5">
+                      <p className="text-emerald-400/90 text-[12px]">No authentication needed — Ollama runs locally.</p>
+                    </div>
+                    <div>
+                      <label className="text-[12px] text-white/40 font-medium mb-1.5 block">
+                        Base URL <span className="text-white/20">(optional)</span>
+                      </label>
+                      <input
+                        type="text"
+                        value={baseUrl}
+                        onChange={(e) => setBaseUrl(e.target.value)}
+                        placeholder="http://localhost:11434"
+                        className={inputSmCls}
+                      />
+                    </div>
+                  </div>
+                )}
+
+                {/* ── Model dropdown (after auth) ── */}
+                {isConnected && (
+                  <>
+                    <div className="border-t border-white/[0.06] mt-4 mb-3" />
+                    <label className="text-[12px] text-white/40 font-medium mb-1.5 block">
+                      Select a model
+                    </label>
+                    <ModelDropdown
+                      models={MODELS[provider] || []}
+                      value={model}
+                      onChange={setModel}
+                    />
+                  </>
+                )}
+
+                {/* Continue button */}
+                {isConnected && (
+                  <button
+                    onClick={next}
+                    disabled={!canNext}
+                    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"
+                  >
+                    Continue
+                    <ArrowRight className="h-4 w-4" />
+                  </button>
+                )}
+              </div>
+            )}
+
+            {/* ── Step 4: Whisper (optional) ── */}
+            {step === 4 && (
+              <div>
+                <div className="flex items-center gap-2 mb-1">
+                  <h1 className="text-xl font-bold text-white tracking-tight">
+                    Voice Messages
+                  </h1>
+                  <span className="text-[11px] text-white/25 font-medium bg-white/[0.04] border border-white/[0.06] rounded-full px-2.5 py-0.5">
+                    Optional
+                  </span>
+                </div>
+                <p className="text-white/40 text-[13px] mt-1 leading-relaxed">
+                  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 ${
+                    whisperEnabled
+                      ? 'bg-white/[0.04] border-primary/40'
+                      : 'bg-transparent border-white/[0.06] hover:border-white/10 hover:bg-white/[0.02]'
+                  }`}
+                >
+                  <div className="flex items-center gap-3.5">
+                    <img src="/icons/openai.svg" alt="OpenAI" className="w-10 h-10 rounded-xl bg-white/[0.04] p-1.5" />
+                    <div className="flex-1">
+                      <div className="text-[14px] font-medium text-white">OpenAI Whisper</div>
+                      <div className="text-[12px] text-white/35 mt-0.5 leading-relaxed">
+                        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]'
+                    }`}>
+                      <div className={`w-[18px] h-[18px] rounded-full bg-white shadow-sm transition-transform duration-200 ${
+                        whisperEnabled ? 'translate-x-[18px]' : 'translate-x-0'
+                      }`} />
+                    </div>
+                  </div>
+                </button>
+
+                {whisperEnabled && (
+                  <div className="mt-3 bg-white/[0.02] border border-white/[0.06] rounded-xl px-4 py-3">
+                    <div className="flex items-start gap-2.5">
+                      <Mic className="h-4 w-4 text-primary/60 mt-0.5 shrink-0" />
+                      <p className="text-white/35 text-[12px] leading-relaxed">
+                        Users will see a microphone button in the chat. Audio is sent to OpenAI's Whisper API for transcription, then processed as a regular text message.
+                      </p>
+                    </div>
+                  </div>
+                )}
+
+                {/* Actions */}
+                <button
+                  onClick={handleComplete}
+                  disabled={saving}
+                  className="w-full mt-5 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"
+                >
+                  {saving ? (
+                    <><LoaderCircle className="h-4 w-4 animate-spin" />Setting up...</>
+                  ) : (
+                    <>Complete Setup<ArrowRight className="h-4 w-4" /></>
+                  )}
+                </button>
+
+                {!whisperEnabled && (
+                  <p className="text-center text-white/20 text-[11px] mt-2.5">
+                    You can enable this later in Settings.
+                  </p>
+                )}
+              </div>
+            )}
+          </motion.div>
+        </AnimatePresence>
+
+        {/* Back button */}
+        {step > 0 && (
+          <div className="px-8 pb-5 -mt-3">
+            <button
+              onClick={back}
+              className="text-white/25 hover:text-white/50 text-[12px] transition-colors"
+            >
+              &larr; Back
+            </button>
+          </div>
+        )}
+      </motion.div>
+    </div>
+  );
+}