fluxy-bot 0.1.10 → 0.1.12

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

@@ -32,7 +32,7 @@ const MODELS: Record<string, { id: string; label: string }[]> = {
   ],
 };
 
-const TOTAL_STEPS = 5; // 0..4
+const TOTAL_STEPS = 6; // 0..5
 
 const HANDLES = [
   { tier: 'premium', label: (n: string) => `${n}.fluxy.bot`, badge: '$5', badgeCls: 'bg-primary/15 text-primary border-primary/20', highlight: true },
@@ -125,19 +125,52 @@ export default function OnboardWizard({ onComplete }: Props) {
 
   // Bot name + Handle (step 2)
   const [botName, setBotName] = useState('');
-  const [handleStatus, setHandleStatus] = useState<null | 'checking' | 'available' | 'taken' | 'invalid'>(null);
+  const [handleStatus, setHandleStatus] = useState<null | 'checking' | 'ready' | 'invalid'>(null);
   const [handleError, setHandleError] = useState('');
+  const [tierAvailability, setTierAvailability] = useState<Record<string, boolean>>({});
   const [selectedTier, setSelectedTier] = useState('at');
   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)
+  // Existing handle (for re-run / change flow)
+  const [existingHandle, setExistingHandle] = useState<{ username: string; tier: string; url: string } | null>(null);
+  const [showChangeConfirm, setShowChangeConfirm] = useState(false);
+  const [changingHandle, setChangingHandle] = useState(false);
+
+  // Portal credentials (step 3)
+  const [portalUser, setPortalUser] = useState('');
+  const [portalPass, setPortalPass] = useState('');
+  const [portalPassConfirm, setPortalPassConfirm] = useState('');
+  const [portalCopied, setPortalCopied] = useState(false);
+  const [portalExists, setPortalExists] = useState(false);
+
+  // Whisper (step 5)
   const [whisperEnabled, setWhisperEnabled] = useState(false);
+  const [whisperKey, setWhisperKey] = useState('');
 
   const isConnected = authState[provider] === 'connected';
 
+  // Pre-fill from existing settings (re-run wizard)
+  useEffect(() => {
+    Promise.all([
+      fetch('/api/settings').then((r) => r.json()),
+      fetch('/api/handle/status').then((r) => r.json()),
+    ]).then(([settings, handle]) => {
+      if (settings.user_name) setUserName(settings.user_name);
+      if (settings.portal_user) { setPortalUser(settings.portal_user); setPortalExists(true); }
+      if (settings.whisper_key) { setWhisperEnabled(true); setWhisperKey(settings.whisper_key); }
+      if (handle.registered && handle.username) {
+        setBotName(handle.username);
+        setSelectedTier(handle.tier || 'at');
+        setExistingHandle({ username: handle.username, tier: handle.tier, url: handle.url });
+        setRegistered(true);
+        setRegisteredUrl(handle.url);
+      }
+    }).catch(() => {});
+  }, []);
+
   // Check if Claude is already authenticated when selecting Anthropic
   useEffect(() => {
     if (provider !== 'anthropic' || authState.anthropic === 'connected') return;
@@ -176,11 +209,12 @@ export default function OnboardWizard({ onComplete }: Props) {
     return () => clearInterval(interval);
   }, [openaiWaiting]);
 
-  // Handle availability check (debounced)
+  // Handle availability check (debounced, per-tier)
   useEffect(() => {
     if (handleDebounce.current) clearTimeout(handleDebounce.current);
     setHandleStatus(null);
     setHandleError('');
+    setTierAvailability({});
     setRegistered(false);
     setRegisteredUrl('');
 
@@ -200,10 +234,18 @@ export default function OnboardWizard({ onComplete }: Props) {
         if (!data.valid) {
           setHandleStatus('invalid');
           setHandleError(data.error);
-        } else if (data.available) {
-          setHandleStatus('available');
         } else {
-          setHandleStatus('taken');
+          const avail: Record<string, boolean> = {};
+          for (const h of data.handles) {
+            avail[h.tier] = h.available;
+          }
+          setTierAvailability(avail);
+          setHandleStatus('ready');
+          // Auto-select first available tier
+          const firstAvailable = HANDLES.find((h) => avail[h.tier]);
+          if (firstAvailable && !avail[selectedTier]) {
+            setSelectedTier(firstAvailable.tier);
+          }
         }
       } catch {
         setHandleStatus(null);
@@ -218,7 +260,7 @@ export default function OnboardWizard({ onComplete }: Props) {
   };
 
   const onClaimHandle = async () => {
-    if (!botName || handleStatus !== 'available') return;
+    if (!botName || handleStatus !== 'ready' || !tierAvailability[selectedTier]) return;
     setRegistering(true);
     try {
       const res = await fetch('/api/handle/register', {
@@ -242,6 +284,33 @@ export default function OnboardWizard({ onComplete }: Props) {
     }
   };
 
+  const onChangeHandle = async () => {
+    if (!botName || handleStatus !== 'ready' || !tierAvailability[selectedTier]) return;
+    setChangingHandle(true);
+    try {
+      const res = await fetch('/api/handle/change', {
+        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);
+        setExistingHandle({ username: botName, tier: selectedTier, url: data.url });
+        setShowChangeConfirm(false);
+      } else {
+        setHandleError(data.error || 'Handle change failed');
+        setHandleStatus('invalid');
+      }
+    } catch {
+      setHandleError('Could not reach server');
+      setHandleStatus('invalid');
+    } finally {
+      setChangingHandle(false);
+    }
+  };
+
   const handleProviderChange = (id: string) => {
     if (provider === 'openai' && id !== 'openai' && openaiWaiting) {
       fetch('/api/auth/codex/cancel', { method: 'POST' });
@@ -347,14 +416,19 @@ export default function OnboardWizard({ onComplete }: Props) {
 
   /* ── Navigation ── */
 
-  // Steps: 0=Welcome, 1=Name, 2=Bot name + Handle, 3=Provider, 4=Whisper+Complete
+  // Steps: 0=Welcome, 1=Name, 2=Bot name + Handle, 3=Portal credentials, 4=Provider, 5=Whisper+Complete
+  const portalPassMatch = portalPass === portalPassConfirm;
+  const portalValid = portalUser.trim().length >= 3 && portalPass.length >= 6 && portalPassMatch;
+  const portalCanContinue = portalValid || (portalExists && portalPass.length === 0);
+
   const canNext = (() => {
     switch (step) {
       case 0: return true;
       case 1: return userName.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;
+      case 3: return portalCanContinue;
+      case 4: return !!(provider && model && isConnected);
+      case 5: return true;
       default: return false;
     }
   })();
@@ -380,6 +454,9 @@ export default function OnboardWizard({ onComplete }: Props) {
           apiKey: '',
           baseUrl: provider === 'ollama' ? baseUrl || undefined : undefined,
           whisperEnabled,
+          whisperKey: whisperEnabled ? whisperKey : '',
+          portalUser: portalUser.trim(),
+          portalPass,
         }),
       });
       onComplete();
@@ -492,135 +569,301 @@ export default function OnboardWizard({ onComplete }: Props) {
                   This is your bot's name and permanent handle — access it from anywhere.
                 </p>
 
-                {/* Input */}
-                <div className="relative mt-5">
-                  <input
-                    type="text"
-                    value={botName}
-                    onChange={(e) => onBotNameInput(e.target.value)}
-                    maxLength={30}
-                    placeholder="your-bot-name"
-                    spellCheck={false}
-                    autoCapitalize="none"
-                    autoCorrect="off"
-                    autoFocus
-                    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>
+                {/* Existing handle banner */}
+                {existingHandle && registered && !showChangeConfirm && (
+                  <>
+                    <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">Current handle</p>
+                      </div>
+                      <p className="text-emerald-400/60 text-[12px] mt-1 font-mono">{registeredUrl}</p>
+                    </div>
+                    <div className="flex gap-2 mt-4">
+                      <button
+                        onClick={next}
+                        className="flex-1 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"
+                      >
+                        Continue
+                        <ArrowRight className="h-4 w-4" />
+                      </button>
+                      <button
+                        onClick={() => {
+                          setShowChangeConfirm(true);
+                          setRegistered(false);
+                          setBotName('');
+                          setHandleStatus(null);
+                          setTierAvailability({});
+                        }}
+                        className="px-5 py-3 bg-white/[0.04] hover:bg-white/[0.08] border border-white/[0.08] text-white/60 text-[13px] font-medium rounded-full transition-colors"
+                      >
+                        Change
+                      </button>
+                    </div>
+                  </>
+                )}
+
+                {/* Change confirmation alert */}
+                {showChangeConfirm && !registered && (
+                  <div className="mt-4 bg-amber-500/8 border border-amber-500/20 rounded-xl px-4 py-3">
+                    <p className="text-amber-400/90 text-[13px] font-medium">Changing your handle</p>
+                    <p className="text-amber-400/60 text-[12px] mt-1">
+                      Your current handle <span className="font-mono">{existingHandle?.url}</span> will be released and become available for others.
+                    </p>
+                  </div>
+                )}
+
+                {/* Input — shown for new claim or change flow */}
+                {(!existingHandle || showChangeConfirm || !registered) && !(existingHandle && registered && !showChangeConfirm) && (
+                  <>
+                    <div className="relative mt-5">
+                      <input
+                        type="text"
+                        value={botName}
+                        onChange={(e) => onBotNameInput(e.target.value)}
+                        maxLength={30}
+                        placeholder="your-bot-name"
+                        spellCheck={false}
+                        autoCapitalize="none"
+                        autoCorrect="off"
+                        autoFocus
+                        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 === '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>
-                  )}
-                </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>
-                )}
+                    {/* Status messages */}
+                    {handleStatus === 'invalid' && handleError && (
+                      <p className="text-amber-400 text-[12px] mt-2">{handleError}</p>
+                    )}
 
-                {/* Handle tier options */}
-                {handleStatus === 'available' && botName.length > 0 && !registered && (
-                  <div className="space-y-2 mt-4">
-                    {HANDLES.map((h) => (
+                    {/* Handle tier options — per-tier availability */}
+                    {handleStatus === 'ready' && botName.length > 0 && !registered && (
+                      <div className="space-y-2 mt-4">
+                        {HANDLES.map((h) => {
+                          const available = tierAvailability[h.tier];
+                          const taken = available === false;
+                          return (
+                            <button
+                              key={h.tier}
+                              onClick={() => !taken && setSelectedTier(h.tier)}
+                              disabled={taken}
+                              className={`w-full flex items-center justify-between px-4 py-3 rounded-xl border transition-all duration-200 text-left ${
+                                taken
+                                  ? 'border-white/[0.04] bg-transparent opacity-50 cursor-not-allowed'
+                                  : 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>
+                              {taken ? (
+                                <span className="text-[11px] font-medium px-2.5 py-0.5 rounded-full border bg-red-500/10 text-red-400 border-red-500/20">
+                                  Taken
+                                </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 (after claiming) */}
+                    {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 / Change button */}
+                    {handleStatus === 'ready' && tierAvailability[selectedTier] && botName.length > 0 && !registered && (
                       <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]'
-                        }`}
+                        onClick={showChangeConfirm ? onChangeHandle : onClaimHandle}
+                        disabled={registering || changingHandle}
+                        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"
                       >
-                        <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>
+                        {(registering || changingHandle) ? (
+                          <><LoaderCircle className="h-4 w-4 animate-spin" />{showChangeConfirm ? 'Changing...' : 'Claiming...'}</>
+                        ) : (
+                          <>{showChangeConfirm ? 'Change Handle' : 'Claim & Continue'}<ArrowRight className="h-4 w-4" /></>
+                        )}
                       </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>
-                )}
+                    {/* Continue after claim */}
+                    {registered && (
+                      <button
+                        onClick={next}
+                        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"
+                      >
+                        Continue
+                        <ArrowRight className="h-4 w-4" />
+                      </button>
+                    )}
 
-                {/* 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" /></>
+                    {/* Skip */}
+                    {!registered && (!tierAvailability[selectedTier] || handleStatus !== 'ready') && 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>
                     )}
-                  </button>
+
+                    {/* Cancel change */}
+                    {showChangeConfirm && !registered && (
+                      <button
+                        onClick={() => {
+                          setShowChangeConfirm(false);
+                          setBotName(existingHandle!.username);
+                          setRegistered(true);
+                          setRegisteredUrl(existingHandle!.url);
+                          setSelectedTier(existingHandle!.tier);
+                          setHandleStatus(null);
+                        }}
+                        className="w-full mt-2 py-2 text-white/25 hover:text-white/40 text-[12px] transition-colors"
+                      >
+                        Cancel — keep current handle
+                      </button>
+                    )}
+                  </>
                 )}
+              </div>
+            )}
 
-                {/* Continue without claiming */}
-                {registered && (
-                  <button
-                    onClick={next}
-                    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"
-                  >
-                    Continue
-                    <ArrowRight className="h-4 w-4" />
-                  </button>
+            {/* ── Step 3: Portal credentials ── */}
+            {step === 3 && (
+              <div>
+                <h1 className="text-xl font-bold text-white tracking-tight">
+                  Secure your portal
+                </h1>
+                <p className="text-white/40 text-[13px] mt-1.5 leading-relaxed">
+                  Create credentials to protect your dashboard. Anyone with your URL will need these to log in.
+                </p>
+
+                {/* Relay URL display + copy */}
+                {(registered && registeredUrl) && (
+                  <div className="mt-4 flex items-center gap-2 bg-white/[0.03] border border-white/[0.06] rounded-xl px-4 py-3">
+                    <span className="font-mono text-[13px] text-white/60 truncate flex-1">{registeredUrl}</span>
+                    <button
+                      onClick={() => {
+                        navigator.clipboard.writeText(registeredUrl);
+                        setPortalCopied(true);
+                        setTimeout(() => setPortalCopied(false), 2000);
+                      }}
+                      className="shrink-0 text-white/30 hover:text-white/60 transition-colors"
+                    >
+                      {portalCopied ? (
+                        <Check className="h-4 w-4 text-emerald-400" />
+                      ) : (
+                        <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                          <rect x="9" y="9" width="13" height="13" rx="2" />
+                          <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" />
+                        </svg>
+                      )}
+                    </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>
+                {/* Already configured hint */}
+                {portalExists && (
+                  <div className="mt-4 bg-white/[0.02] border border-white/[0.06] rounded-xl px-4 py-2.5">
+                    <p className="text-white/40 text-[12px]">Credentials already set. Leave password fields empty to keep your current password.</p>
+                  </div>
                 )}
+
+                {/* Username */}
+                <div className="mt-5">
+                  <label className="text-[12px] text-white/40 font-medium mb-1.5 block">Username</label>
+                  <input
+                    type="text"
+                    value={portalUser}
+                    onChange={(e) => setPortalUser(e.target.value.replace(/\s/g, '').toLowerCase())}
+                    placeholder="admin"
+                    autoFocus
+                    autoComplete="username"
+                    className={inputCls + ' font-mono'}
+                  />
+                  {portalUser.length > 0 && portalUser.trim().length < 3 && (
+                    <p className="text-amber-400/70 text-[11px] mt-1">At least 3 characters</p>
+                  )}
+                </div>
+
+                {/* Password */}
+                <div className="mt-3">
+                  <label className="text-[12px] text-white/40 font-medium mb-1.5 block">Password</label>
+                  <input
+                    type="password"
+                    value={portalPass}
+                    onChange={(e) => setPortalPass(e.target.value)}
+                    placeholder="••••••••"
+                    autoComplete="new-password"
+                    onKeyDown={handleKeyDown}
+                    className={inputCls}
+                  />
+                  {portalPass.length > 0 && portalPass.length < 6 && (
+                    <p className="text-amber-400/70 text-[11px] mt-1">At least 6 characters</p>
+                  )}
+                </div>
+
+                {/* Confirm password */}
+                <div className="mt-3">
+                  <label className="text-[12px] text-white/40 font-medium mb-1.5 block">Confirm password</label>
+                  <input
+                    type="password"
+                    value={portalPassConfirm}
+                    onChange={(e) => setPortalPassConfirm(e.target.value)}
+                    placeholder="••••••••"
+                    autoComplete="new-password"
+                    onKeyDown={handleKeyDown}
+                    className={inputCls}
+                  />
+                  {portalPassConfirm.length > 0 && !portalPassMatch && (
+                    <p className="text-red-400/70 text-[11px] mt-1">Passwords don't match</p>
+                  )}
+                </div>
+
+                <button
+                  onClick={next}
+                  disabled={!canNext}
+                  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"
+                >
+                  Continue
+                  <ArrowRight className="h-4 w-4" />
+                </button>
               </div>
             )}
 
-            {/* ── Step 3: Provider + Auth + Model ── */}
-            {step === 3 && (
+            {/* ── Step 4: Provider + Auth + Model ── */}
+            {step === 4 && (
               <div>
                 <h1 className="text-xl font-bold text-white tracking-tight">
                   Choose your AI provider
@@ -854,8 +1097,8 @@ export default function OnboardWizard({ onComplete }: Props) {
               </div>
             )}
 
-            {/* ── Step 4: Whisper (optional) + Complete ── */}
-            {step === 4 && (
+            {/* ── Step 5: Whisper (optional) + Complete ── */}
+            {step === 5 && (
               <div>
                 <div className="flex items-center gap-2 mb-1">
                   <h1 className="text-xl font-bold text-white tracking-tight">
@@ -896,8 +1139,23 @@ export default function OnboardWizard({ onComplete }: Props) {
                 </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">
+                  <div className="mt-3">
+                    <label className="text-[12px] text-white/40 font-medium mb-1.5 block">OpenAI API Key</label>
+                    <input
+                      type="password"
+                      value={whisperKey}
+                      onChange={(e) => setWhisperKey(e.target.value.trim())}
+                      placeholder="sk-..."
+                      autoComplete="off"
+                      className={inputCls + ' font-mono text-[13px]'}
+                    />
+                    {whisperKey.length > 0 && !whisperKey.startsWith('sk-') && (
+                      <p className="text-amber-400/70 text-[11px] mt-1">Key should start with sk-</p>
+                    )}
+                    {whisperKey.length > 0 && whisperKey.startsWith('sk-') && whisperKey.length < 20 && (
+                      <p className="text-amber-400/70 text-[11px] mt-1">Key looks too short</p>
+                    )}
+                    <div className="flex items-start gap-2.5 mt-3 bg-white/[0.02] border border-white/[0.06] rounded-xl px-4 py-3">
                       <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.
@@ -908,7 +1166,7 @@ export default function OnboardWizard({ onComplete }: Props) {
 
                 <button
                   onClick={handleComplete}
-                  disabled={saving}
+                  disabled={saving || (whisperEnabled && (!whisperKey.startsWith('sk-') || whisperKey.length < 20))}
                   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 ? (