bloby-bot 0.17.2

package/supervisor/chat/OnboardWizard.tsx

@@ -0,0 +1,2353 @@
+import { useState, useRef, useEffect, type KeyboardEvent } from 'react';
+import { ArrowRight, ArrowLeft, LoaderCircle, ExternalLink, ClipboardPaste, RefreshCw, Check, ChevronDown, Mic, Eye, EyeOff, Shield, ShieldCheck, ShieldOff, Copy, Smartphone, Globe, Wifi, WifiOff, TriangleAlert } from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
+
+/* ── Access detection ── */
+
+type AccessMethod = 'tailscale' | 'lan' | 'localhost' | 'tunnel' | 'relay' | 'custom-domain';
+
+function detectAccessMethod(hostname: string): AccessMethod {
+  // Tailscale CGNAT range: 100.64.0.0 – 100.127.255.255
+  const tailscaleMatch = hostname.match(/^100\.(\d+)\./);
+  if (tailscaleMatch && +tailscaleMatch[1] >= 64 && +tailscaleMatch[1] <= 127) return 'tailscale';
+
+  // LAN ranges
+  if (/^192\.168\./.test(hostname) || /^10\./.test(hostname)) return 'lan';
+  const m172 = hostname.match(/^172\.(\d+)\./);
+  if (m172 && +m172[1] >= 16 && +m172[1] <= 31) return 'lan';
+
+  // Localhost
+  if (hostname === 'localhost' || hostname === '127.0.0.1') return 'localhost';
+
+  // Cloudflare quick tunnel
+  if (hostname.endsWith('.trycloudflare.com')) return 'tunnel';
+
+  // Relay domain
+  if (hostname.endsWith('.bloby.bot')) return 'relay';
+
+  // Anything else is a custom domain (named tunnel)
+  return 'custom-domain';
+}
+
+function isPrivateAccess(method: AccessMethod): boolean {
+  return method === 'tailscale' || method === 'lan' || method === 'localhost';
+}
+
+const ACCESS_LABELS: Record<AccessMethod, string> = {
+  tailscale: 'Tailscale',
+  lan: 'Local network',
+  localhost: 'Localhost',
+  tunnel: 'Cloudflare tunnel',
+  relay: 'Relay',
+  'custom-domain': 'Custom domain',
+};
+
+/* ── 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' },
+] as const;
+
+const MODELS: Record<string, { id: string; label: string }[]> = {
+  anthropic: [
+    { id: 'claude-opus-4-6', label: 'Opus 4.6' },
+    { id: 'claude-sonnet-4-6', label: 'Sonnet 4.6' },
+    { id: 'claude-haiku-4-5-20251001', label: '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)' },
+  ],
+};
+
+// TOTAL_STEPS is dynamic — set inside the component based on isInitialSetup
+
+const HANDLES = [
+  { tier: 'at', prefix: 'my.bloby.bot/', label: (n: string) => `my.bloby.bot/${n}`, badge: 'Free', badgeCls: 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20', highlight: false },
+  { tier: 'premium', prefix: 'bloby.bot/', label: (n: string) => `bloby.bot/${n}`, badge: '$5', badgeCls: 'bg-[#AF27E3]/15 text-[#AF27E3] border-[#AF27E3]/20', highlight: true },
+] as const;
+
+/* ── 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-[#AF27E3]/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-[#AF27E3] bg-[#AF27E3]/10'
+                  : 'text-white/70 hover:bg-white/[0.04] hover:text-white'
+              }`}
+            >
+              {m.label}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/* ── Component ── */
+
+interface Props {
+  onComplete: () => void;
+  isInitialSetup?: boolean;
+  onSave?: (payload: any) => Promise<any>;
+  onTunnelSwitch?: (newMode: 'off' | 'quick') => Promise<any>;
+}
+
+export default function OnboardWizard({ onComplete, isInitialSetup = false, onSave, onTunnelSwitch }: Props) {
+  const TOTAL_STEPS = isInitialSetup ? 7 : 6; // 0..5 normal, +step 6 "All Set" for initial
+
+  const [step, setStep] = useState(0);
+  const [userName, setUserName] = useState('');
+  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',
+  });
+
+  // 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>();
+
+  // Bot name + Handle (step 2)
+  const [botName, setBotName] = useState('');
+  const [handleStatus, setHandleStatus] = useState<null | 'checking' | 'ready' | 'invalid'>(null);
+  const [handleError, setHandleError] = useState('');
+  const [tierAvailability, setTierAvailability] = useState<Record<string, boolean>>({});
+  const [selectedTier, setSelectedTier] = useState('');
+  const [registering, setRegistering] = useState(false);
+  const [registered, setRegistered] = useState(false);
+  const [registeredUrl, setRegisteredUrl] = useState('');
+  const handleDebounce = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // Tunnel mode (step 2 branching)
+  const [tunnelMode, setTunnelMode] = useState<'quick' | 'named' | 'off'>('quick');
+  const [tunnelDomain, setTunnelDomain] = useState('');
+  const [tunnelUrl, setTunnelUrl] = useState('');
+  const [handleChoice, setHandleChoice] = useState<'tunnel' | 'relay'>('relay');
+
+  // 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);
+
+  // Reserved handle claim flow
+  const [tierReserved, setTierReserved] = useState<Record<string, boolean>>({});
+  const [showClaimInput, setShowClaimInput] = useState(false);
+  const [claimCode, setClaimCode] = useState('');
+  const [claimError, setClaimError] = useState('');
+  const [claiming, setClaiming] = useState(false);
+
+  // Access detection + Tailscale-only switch
+  const [accessMethod, setAccessMethod] = useState<AccessMethod>('tunnel');
+  const [showTailscaleSwitch, setShowTailscaleSwitch] = useState(false);
+  const [tailscaleConfirmText, setTailscaleConfirmText] = useState('');
+  const [tailscaleSwitching, setTailscaleSwitching] = useState(false);
+  const [tailscaleSwitchError, setTailscaleSwitchError] = useState('');
+  const [showReEnableTunnel, setShowReEnableTunnel] = useState(false);
+  const [reEnabling, setReEnabling] = useState(false);
+  const [reEnableError, setReEnableError] = useState('');
+
+  // Portal credentials (step 3)
+  const [portalUser, setPortalUser] = useState('admin');
+  const [portalPass, setPortalPass] = useState('');
+  const [portalPassConfirm, setPortalPassConfirm] = useState('');
+  const [portalCopied, setPortalCopied] = useState(false);
+  const [portalExists, setPortalExists] = useState(false);
+  const [showPassAllSet, setShowPassAllSet] = useState(false);
+
+  // Portal old password (for changing existing credentials)
+  const [portalOldPass, setPortalOldPass] = useState('');
+  const [portalOldPassError, setPortalOldPassError] = useState('');
+  const [portalOldPassVerified, setPortalOldPassVerified] = useState(false);
+  const [portalVerifying, setPortalVerifying] = useState(false);
+
+  // Whisper (step 5)
+  const [whisperEnabled, setWhisperEnabled] = useState(false);
+  const [whisperKey, setWhisperKey] = useState('');
+
+  // TOTP 2FA (step 3)
+  const [totpEnabled, setTotpEnabled] = useState(false);
+  const [totpSecret, setTotpSecret] = useState('');
+  const [totpQrUri, setTotpQrUri] = useState('');
+  const [totpOtpauthUri, setTotpOtpauthUri] = useState('');
+  const [totpCode, setTotpCode] = useState('');
+  const [totpVerified, setTotpVerified] = useState(false);
+  const [totpVerifying, setTotpVerifying] = useState(false);
+  const [totpError, setTotpError] = useState('');
+  const [recoveryCodes, setRecoveryCodes] = useState<string[]>([]);
+  const [recoveryCodesCopied, setRecoveryCodesCopied] = useState(false);
+  const [totpDisabling, setTotpDisabling] = useState(false);
+  const [totpDisableCode, setTotpDisableCode] = useState('');
+  const [totpDisableError, setTotpDisableError] = useState('');
+  const [isMobileDevice, setIsMobileDevice] = useState(false);
+  // Sub-phase within step 3: 'password' | 'totp-setup' | 'recovery'
+  const [step3Phase, setStep3Phase] = useState<'password' | 'totp-setup' | 'recovery'>('password');
+
+  // Clipboard feedback for TOTP secret copy
+  const [totpSecretCopied, setTotpSecretCopied] = useState(false);
+
+  // Pre-fill guard
+  const prefillDone = useRef(false);
+
+  const isConnected = authState[provider] === 'connected';
+
+  // Persist/restore TOTP setup state across page reloads (mobile: OS suspends PWA on app-switch)
+  const TOTP_STORAGE_KEY = 'bloby_totp_setup';
+
+  function saveTotpState() {
+    try {
+      sessionStorage.setItem(TOTP_STORAGE_KEY, JSON.stringify({
+        secret: totpSecret, qrUri: totpQrUri, otpauthUri: totpOtpauthUri, phase: step3Phase,
+        // Also persist password fields so user doesn't re-type after returning
+        portalPass, portalPassConfirm,
+      }));
+    } catch {}
+  }
+
+  function restoreTotpState() {
+    try {
+      const raw = sessionStorage.getItem(TOTP_STORAGE_KEY);
+      if (!raw) return false;
+      const saved = JSON.parse(raw);
+      if (saved.secret && saved.phase === 'totp-setup') {
+        setTotpSecret(saved.secret);
+        setTotpQrUri(saved.qrUri || '');
+        setTotpOtpauthUri(saved.otpauthUri || '');
+        setTotpEnabled(true);
+        setStep3Phase('totp-setup');
+        setStep(3);
+        if (saved.portalPass) { setPortalPass(saved.portalPass); setPortalPassConfirm(saved.portalPassConfirm || ''); }
+        return true;
+      }
+    } catch {}
+    return false;
+  }
+
+  function clearTotpStorage() {
+    try { sessionStorage.removeItem(TOTP_STORAGE_KEY); } catch {}
+  }
+
+  // Pre-fill from existing settings (re-run wizard)
+  useEffect(() => {
+    fetch('/api/onboard/status')
+      .then((r) => r.json())
+      .then((data) => {
+        if (data.userName) setUserName(data.userName);
+        if (data.handle) {
+          setBotName(data.handle.username);
+          setSelectedTier(data.handle.tier || 'at');
+          setExistingHandle({ username: data.handle.username, tier: data.handle.tier, url: data.handle.url });
+          setRegistered(true);
+          setRegisteredUrl(data.handle.url);
+        }
+        if (data.portalUser) setPortalUser(data.portalUser);
+        if (data.portalConfigured) setPortalExists(true);
+        if (data.provider) setProvider(data.provider);
+        if (data.model) setModel(data.model);
+        if (data.whisperEnabled) { setWhisperEnabled(true); setWhisperKey(data.whisperKey || ''); }
+        if (data.totpEnabled) { setTotpEnabled(true); setTotpVerified(true); }
+        if (data.tunnelMode) setTunnelMode(data.tunnelMode);
+        if (data.tunnelDomain) setTunnelDomain(data.tunnelDomain);
+        if (data.tunnelUrl) setTunnelUrl(data.tunnelUrl);
+        // If user has existing handle, default to 'relay'; otherwise default to 'tunnel'
+        if (!data.handle) setHandleChoice('tunnel');
+        prefillDone.current = true;
+
+        // Restore TOTP setup state if returning from authenticator app
+        if (!data.totpEnabled) restoreTotpState();
+      })
+      .catch(() => { prefillDone.current = true; });
+  }, []);
+
+  // Detect access method on mount
+  useEffect(() => {
+    setAccessMethod(detectAccessMethod(window.location.hostname));
+  }, []);
+
+  // Mobile detection for TOTP setup
+  useEffect(() => {
+    setIsMobileDevice(window.matchMedia('(max-width: 768px)').matches || 'ontouchstart' in window);
+  }, []);
+
+  // 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]);
+
+  // Handle availability check (debounced, per-tier)
+  // Skip when the current botName matches the existing registered handle
+  useEffect(() => {
+    if (handleDebounce.current) clearTimeout(handleDebounce.current);
+
+    // Skip reset if this is the initial pre-fill setting the existing handle
+    if (!prefillDone.current) return;
+
+    // Private network mode — no handle registration needed
+    if (tunnelMode === 'off') return;
+
+    // Don't reset state if this is the already-registered handle
+    if (existingHandle && registered && botName === existingHandle.username) {
+      return;
+    }
+
+    setHandleStatus(null);
+    setHandleError('');
+    setTierAvailability({});
+    setTierReserved({});
+    setShowClaimInput(false);
+    setClaimCode('');
+    setClaimError('');
+    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 {
+          const avail: Record<string, boolean> = {};
+          const reserved: Record<string, boolean> = {};
+          for (const h of data.handles) {
+            avail[h.tier] = h.available;
+            if (h.reserved) reserved[h.tier] = true;
+          }
+          setTierAvailability(avail);
+          setTierReserved(reserved);
+          setHandleStatus('ready');
+          // Reset selection — user must explicitly choose
+          setSelectedTier('');
+        }
+      } catch {
+        setHandleStatus(null);
+      }
+    }, 400);
+
+    return () => { if (handleDebounce.current) clearTimeout(handleDebounce.current); };
+  }, [botName]);
+
+  // Re-check availability when user returns from external purchase page
+  useEffect(() => {
+    if (!botName || botName.length < 3 || handleStatus !== 'ready') return;
+    const onFocus = async () => {
+      try {
+        const res = await fetch(`/api/handle/check/${encodeURIComponent(botName.trim())}`);
+        const data = await res.json();
+        if (data.valid) {
+          const avail: Record<string, boolean> = {};
+          const reserved: Record<string, boolean> = {};
+          for (const h of data.handles) {
+            avail[h.tier] = h.available;
+            if (h.reserved) reserved[h.tier] = true;
+          }
+          setTierAvailability(avail);
+          setTierReserved(reserved);
+        }
+      } catch {}
+    };
+    window.addEventListener('focus', onFocus);
+    return () => window.removeEventListener('focus', onFocus);
+  }, [botName, handleStatus]);
+
+  const onBotNameInput = (val: string) => {
+    setBotName(val.toLowerCase().replace(/[^a-z0-9-]/g, ''));
+  };
+
+  const onClaimHandle = async () => {
+    if (!botName || handleStatus !== 'ready' || !tierAvailability[selectedTier]) 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 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 onClaimReserved = async () => {
+    if (!botName || !claimCode) return;
+    setClaiming(true);
+    setClaimError('');
+    try {
+      const res = await fetch('/api/handle/claim-reserved', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ handle: botName, hash: claimCode }),
+      });
+      const data = await res.json();
+      if (data.ok) {
+        setRegistered(true);
+        setRegisteredUrl(data.url);
+        setShowClaimInput(false);
+        setClaimCode('');
+        setSelectedTier('premium');
+        setHandleChoice('relay');
+      } else {
+        setClaimError(data.error || 'Invalid activation code');
+      }
+    } catch {
+      setClaimError('Could not reach server');
+    } finally {
+      setClaiming(false);
+    }
+  };
+
+  const handleProviderChange = (id: string) => {
+    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 openExternal = (url: string) => {
+    const isStandalone = window.matchMedia('(display-mode: standalone)').matches
+      || (navigator as any).standalone === true;
+    if (isStandalone) {
+      // iOS PWA standalone mode blocks window.open — use a temp anchor with target _blank
+      const a = document.createElement('a');
+      a.href = url;
+      a.target = '_blank';
+      a.rel = 'noopener noreferrer';
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+    } else {
+      window.open(url, '_blank', 'noopener,noreferrer');
+    }
+  };
+
+  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) {
+        openExternal(data.authUrl);
+        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) {
+        openExternal(data.authUrl);
+      } 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 ── */
+
+  // Steps: 0=Welcome, 1=Name, 2=Bot name + Handle, 3=Password, 4=Provider, 5=Whisper+Complete, 6=All Set (initial only)
+  const portalPassMatch = portalPass === portalPassConfirm;
+  const portalValid = portalPass.length >= 6 && portalPassMatch;
+  // When portal exists: can continue if no password fields touched, or old pass verified + new pass valid
+  const portalCanContinue = portalExists
+    ? (portalPass.length === 0 || (portalOldPassVerified && portalValid))
+    : portalValid;
+
+  const canNext = (() => {
+    switch (step) {
+      case 0: return true;
+      case 1: return userName.trim().length > 0;
+      case 2: {
+        if (showTailscaleSwitch || showReEnableTunnel) return false;
+        if (tunnelMode === 'off') return botName.trim().length >= 3;
+        if (tunnelMode === 'named') return botName.trim().length >= 3;
+        if (handleChoice === 'tunnel') return botName.trim().length >= 3;
+        return registered;
+      }
+      case 3: {
+        // Block "Continue" while in a TOTP sub-phase
+        if (step3Phase !== 'password') return false;
+        if (!portalCanContinue) return false;
+        if (totpEnabled && !totpVerified) return false;
+        return true;
+      }
+      case 4: return !!(provider && model && isConnected);
+      case 5: return true;
+      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);
+    const payload = {
+      userName: userName.trim(),
+      agentName: botName.trim() || 'Bloby',
+      provider,
+      model,
+      apiKey: '',
+      whisperEnabled,
+      whisperKey: whisperEnabled ? whisperKey : '',
+      portalUser: portalUser.trim(),
+      portalPass,
+    };
+    try {
+      if (onSave) {
+        // Chat context: save via WebSocket (bypasses relay POST issues)
+        await onSave(payload);
+      } else {
+        // Initial onboard: direct POST
+        await fetch('/api/onboard', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(payload),
+        });
+      }
+      if (isInitialSetup) {
+        setSaving(false);
+        setStep(6);
+      } else {
+        onComplete();
+      }
+    } catch (err) {
+      console.error('[OnboardWizard] 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 input-glow placeholder:text-white/20 transition-all';
+  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 input-glow placeholder:text-white/20 transition-all';
+
+  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-gradient-brand'
+                  : i < step
+                    ? 'w-1.5 bg-gradient-brand opacity-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">
+                <video autoPlay loop muted playsInline className="h-[180px] mb-4">
+                  <source src="/bloby_say_hi.mov" type='video/mp4; codecs="hvc1"' />
+                  <source src="/bloby_say_hi.webm" type="video/webm" />
+                </video>
+                <h1 className="text-2xl font-bold text-white tracking-tight">
+                  Welcome to Bloby
+                </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-gradient-brand hover:opacity-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
+                    autoComplete="off"
+                    data-1p-ignore
+                    data-lpignore="true"
+                    className={inputCls + ' flex-1'}
+                  />
+                  <button
+                    onClick={next}
+                    disabled={!canNext}
+                    className="shrink-0 h-12 w-12 flex items-center justify-center rounded-full bg-gradient-brand hover:opacity-90 text-white transition-colors disabled:opacity-30"
+                  >
+                    <ArrowRight className="h-5 w-5" />
+                  </button>
+                </div>
+              </div>
+            )}
+
+            {/* ── Step 2: Name your bot + Claim handle ── */}
+            {step === 2 && tunnelMode === 'off' && (
+              <div>
+                <h1 className="text-xl font-bold text-white tracking-tight">
+                  Bot Name & Access
+                </h1>
+                <p className="text-white/40 text-[13px] mt-1.5 leading-relaxed">
+                  Give your bot a name. This is used throughout the app as your bot's identity.
+                </p>
+
+                <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"
+                    autoComplete="off"
+                    data-1p-ignore
+                    data-lpignore="true"
+                    autoFocus
+                    className={inputCls + ' pr-10 font-mono'}
+                  />
+                </div>
+
+                <div className="mt-4 bg-white/[0.03] border border-white/[0.06] rounded-xl px-4 py-3">
+                  <p className="text-white/40 text-[12px] leading-relaxed">
+                    Private network mode — your bot is only accessible via your local network or VPN. No public URL will be created.
+                  </p>
+                </div>
+
+                {/* Access badge */}
+                {!isInitialSetup && (
+                  <div className="mt-3 flex items-center gap-2">
+                    <span className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11px] font-medium border ${
+                      isPrivateAccess(accessMethod)
+                        ? 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20'
+                        : 'bg-blue-500/10 text-blue-400 border-blue-500/20'
+                    }`}>
+                      {isPrivateAccess(accessMethod) ? <WifiOff className="h-3 w-3" /> : <Globe className="h-3 w-3" />}
+                      Accessing via {ACCESS_LABELS[accessMethod]}
+                    </span>
+                  </div>
+                )}
+
+                {/* Re-enable tunnel option */}
+                {!isInitialSetup && !showReEnableTunnel && (
+                  <button
+                    onClick={() => { setShowReEnableTunnel(true); setReEnableError(''); }}
+                    className="w-full mt-4 flex items-center justify-between px-4 py-3 rounded-xl border border-white/[0.06] bg-white/[0.02] hover:border-white/10 hover:bg-white/[0.04] transition-all text-left"
+                  >
+                    <div>
+                      <p className="text-[13px] text-white/70 font-medium">Re-enable public tunnel access</p>
+                      <p className="text-[11px] text-white/30 mt-0.5">Start a Cloudflare tunnel to make your bot accessible from anywhere</p>
+                    </div>
+                    <Globe className="h-4 w-4 text-white/30 shrink-0 ml-3" />
+                  </button>
+                )}
+
+                {/* Re-enable confirmation */}
+                {showReEnableTunnel && (
+                  <div className="mt-4 space-y-3">
+                    <div className="bg-amber-500/8 border border-amber-500/20 rounded-xl px-4 py-3">
+                      <div className="flex items-start gap-2">
+                        <TriangleAlert className="h-4 w-4 text-amber-400 shrink-0 mt-0.5" />
+                        <div>
+                          <p className="text-amber-400/90 text-[13px] font-medium">Enable public access?</p>
+                          <p className="text-amber-400/60 text-[12px] mt-1 leading-relaxed">
+                            This will start a Cloudflare tunnel, making your bot reachable from the internet.
+                            {existingHandle && ' Your handle will reconnect automatically.'}
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                    {reEnableError && (
+                      <p className="text-red-400/70 text-[12px]">{reEnableError}</p>
+                    )}
+                    <div className="flex gap-2">
+                      <button
+                        onClick={async () => {
+                          if (!onTunnelSwitch) return;
+                          setReEnabling(true);
+                          setReEnableError('');
+                          try {
+                            await onTunnelSwitch('quick');
+                            setTunnelMode('quick');
+                            setShowReEnableTunnel(false);
+                          } catch (err: any) {
+                            setReEnableError(err.message || 'Failed to start tunnel');
+                          } finally {
+                            setReEnabling(false);
+                          }
+                        }}
+                        disabled={reEnabling || !onTunnelSwitch}
+                        className="flex-1 py-2.5 bg-gradient-brand hover:opacity-90 text-white text-[13px] font-semibold rounded-full transition-colors flex items-center justify-center gap-2 disabled:opacity-40"
+                      >
+                        {reEnabling ? <><LoaderCircle className="h-4 w-4 animate-spin" />Starting tunnel...</> : 'Enable Tunnel'}
+                      </button>
+                      <button
+                        onClick={() => { setShowReEnableTunnel(false); setReEnableError(''); }}
+                        disabled={reEnabling}
+                        className="px-5 py-2.5 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"
+                      >
+                        Cancel
+                      </button>
+                    </div>
+                  </div>
+                )}
+
+                <button
+                  onClick={next}
+                  disabled={!canNext}
+                  className="w-full mt-5 py-3 bg-gradient-brand hover:opacity-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 === 2 && tunnelMode === 'named' && (
+              <div>
+                <h1 className="text-xl font-bold text-white tracking-tight">
+                  Bot Name & Access
+                </h1>
+                <p className="text-white/40 text-[13px] mt-1.5 leading-relaxed">
+                  This is your bot's identity. Your named tunnel domain is already configured.
+                </p>
+
+                <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"
+                    autoComplete="off"
+                    data-1p-ignore
+                    data-lpignore="true"
+                    autoFocus
+                    className={inputCls + ' pr-10 font-mono'}
+                  />
+                </div>
+
+                <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/70 truncate flex-1 text-left">https://{tunnelDomain}</span>
+                  <button
+                    onClick={() => {
+                      navigator.clipboard.writeText(`https://${tunnelDomain}`);
+                      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" />
+                    ) : (
+                      <ClipboardPaste className="h-4 w-4" />
+                    )}
+                  </button>
+                </div>
+              </div>
+            )}
+
+            {step === 2 && tunnelMode === 'quick' && (
+              <div>
+                <h1 className="text-xl font-bold text-white tracking-tight">
+                  Bot Name & Access
+                </h1>
+                <p className="text-white/40 text-[13px] mt-1.5 leading-relaxed">
+                  This is your bot's name and permanent handle — access it from anywhere.
+                </p>
+
+                {/* 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-gradient-brand hover:opacity-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({});
+                          setHandleChoice('relay');
+                        }}
+                        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 + handle flow — 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"
+                        autoComplete="off"
+                        data-1p-ignore
+                        data-lpignore="true"
+                        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-[#04D1FE] 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>
+
+                    {/* Status messages */}
+                    {handleStatus === 'invalid' && handleError && (
+                      <p className="text-amber-400 text-[12px] mt-2">{handleError}</p>
+                    )}
+
+                    {/* Handle tier options — shown when name is valid */}
+                    {handleStatus === 'ready' && botName.length > 0 && !registered && (
+                      <div className="space-y-3 mt-4">
+                        {/* ── Free tier block ── */}
+                        {(() => {
+                          const freeAvail = tierAvailability['at'];
+                          const freeTaken = freeAvail === false;
+                          const freeSelected = handleChoice === 'relay' && selectedTier === 'at';
+                          return (
+                            <button
+                              onClick={() => { if (!freeTaken) { setSelectedTier('at'); setHandleChoice('relay'); } }}
+                              disabled={freeTaken}
+                              className={`w-full rounded-xl border transition-all duration-200 text-left px-4 py-3 ${
+                                freeTaken
+                                  ? 'border-white/[0.04] opacity-50 cursor-not-allowed'
+                                  : freeSelected
+                                    ? 'border-[#AF27E3]/30 bg-white/[0.04]'
+                                    : 'border-white/[0.06] hover:border-white/10 hover:bg-white/[0.02]'
+                              }`}
+                            >
+                              <div className="flex items-center justify-between">
+                                <span className="text-[12px] font-semibold text-white/60 uppercase tracking-wider">Free</span>
+                                <span className={`text-[11px] font-medium px-2.5 py-0.5 rounded-full border ${
+                                  freeTaken ? 'bg-red-500/10 text-red-400 border-red-500/20' : 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20'
+                                }`}>
+                                  {freeTaken ? 'Taken' : 'Available'}
+                                </span>
+                              </div>
+                              <p className={`font-mono text-[13px] mt-1.5 ${freeSelected ? 'text-white/80' : 'text-white/40'}`}>
+                                my.bloby.bot/{botName}
+                              </p>
+                            </button>
+                          );
+                        })()}
+
+                        {/* ── Premium tier block ── */}
+                        {(() => {
+                          const premAvail = tierAvailability['premium'];
+                          const premTaken = premAvail === false;
+                          const premReserved = premTaken && tierReserved['premium'];
+                          return (
+                            <div className={`rounded-xl border transition-all duration-200 text-left px-4 py-3 ${
+                              premReserved
+                                ? 'border-[#AF27E3]/20'
+                                : 'border-white/[0.06]'
+                            }`}>
+                              <div className="flex items-center justify-between">
+                                <div className="flex items-center gap-2">
+                                  <span className="text-[12px] font-semibold text-white/60 uppercase tracking-wider">Premium</span>
+                                  <span className="text-[11px] font-medium px-2.5 py-0.5 rounded-full border bg-[#AF27E3]/15 text-[#AF27E3] border-[#AF27E3]/20">$5</span>
+                                </div>
+                                <span className={`text-[11px] font-medium px-2.5 py-0.5 rounded-full border ${
+                                  premReserved
+                                    ? 'bg-[#AF27E3]/10 text-[#AF27E3] border-[#AF27E3]/20'
+                                    : premTaken
+                                      ? 'bg-red-500/10 text-red-400 border-red-500/20'
+                                      : 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20'
+                                }`}>
+                                  {premReserved ? 'Reserved' : premTaken ? 'Taken' : 'Available'}
+                                </span>
+                              </div>
+                              <p className="font-mono text-[13px] mt-1.5 text-white/40">
+                                bloby.bot/{botName}
+                              </p>
+
+                              {/* Premium available — purchase on website */}
+                              {premAvail && (
+                                <div className="mt-3 pt-3 border-t border-white/[0.06] flex items-center justify-between">
+                                  <p className="text-[12px] text-white/40">Purchase on bloby.bot</p>
+                                  <a
+                                    href="https://www.bloby.bot/#reserve"
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    className="text-[12px] font-medium text-[#AF27E3] hover:text-[#c44df7] transition-colors"
+                                  >
+                                    Purchase
+                                  </a>
+                                </div>
+                              )}
+
+                              {/* Premium taken but reserved by user — activation */}
+                              {premReserved && (
+                                <div className="mt-3 pt-3 border-t border-[#AF27E3]/10">
+                                  {!showClaimInput ? (
+                                    <div className="flex items-center justify-between">
+                                      <p className="text-[12px] text-white/40">Is that yours?</p>
+                                      <button
+                                        onClick={() => { setShowClaimInput(true); setClaimCode(''); setClaimError(''); }}
+                                        className="text-[12px] font-medium text-[#AF27E3] hover:text-[#c44df7] transition-colors"
+                                      >
+                                        Activate
+                                      </button>
+                                    </div>
+                                  ) : (
+                                    <div className="space-y-2.5">
+                                      <p className="text-[12px] text-white/40">
+                                        Enter the 5-character code from your <span className="text-white/60 font-medium">bloby.bot</span> account
+                                      </p>
+                                      <div className="flex gap-2">
+                                        <input
+                                          type="text"
+                                          value={claimCode}
+                                          onChange={(e) => setClaimCode(e.target.value.trim())}
+                                          maxLength={5}
+                                          placeholder="e.g. a3Kx9"
+                                          spellCheck={false}
+                                          autoComplete="off"
+                                          autoFocus
+                                          className="flex-1 bg-white/[0.05] border border-white/[0.08] text-white rounded-lg px-3 py-2 text-[13px] font-mono outline-none focus:border-[#AF27E3]/30 transition-colors placeholder:text-white/20 tracking-widest text-center"
+                                        />
+                                        <button
+                                          onClick={onClaimReserved}
+                                          disabled={claiming || claimCode.length < 5}
+                                          className="px-4 py-2 bg-gradient-brand hover:opacity-90 text-white text-[13px] font-semibold rounded-lg transition-colors flex items-center gap-1.5 disabled:opacity-40"
+                                        >
+                                          {claiming ? <LoaderCircle className="h-3.5 w-3.5 animate-spin" /> : 'Activate'}
+                                        </button>
+                                      </div>
+                                      {claimError && (
+                                        <p className="text-red-400 text-[12px]">{claimError}</p>
+                                      )}
+                                      <button
+                                        onClick={() => { setShowClaimInput(false); setClaimCode(''); setClaimError(''); }}
+                                        className="text-[11px] text-white/25 hover:text-white/40 transition-colors"
+                                      >
+                                        Cancel
+                                      </button>
+                                    </div>
+                                  )}
+                                </div>
+                              )}
+                            </div>
+                          );
+                        })()}
+
+                        {/* No handle — use random tunnel URL */}
+                        <button
+                          onClick={() => { setHandleChoice('tunnel'); setSelectedTier('skip'); }}
+                          className={`w-full rounded-xl border transition-all duration-200 text-left px-4 py-3 ${
+                            selectedTier === 'skip'
+                              ? 'border-[#AF27E3]/30 bg-white/[0.04]'
+                              : 'border-white/[0.06] hover:border-white/10 hover:bg-white/[0.02]'
+                          }`}
+                        >
+                          <span className="text-[12px] font-semibold text-white/60 uppercase tracking-wider">No handle</span>
+                          <p className={`text-[13px] mt-1.5 ${selectedTier === 'skip' ? 'text-white/60' : 'text-white/30'}`}>
+                            I'll use the random tunnel URL
+                          </p>
+                        </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>
+                    )}
+
+                    {/* Action button — grayed out until user picks an option */}
+                    {handleStatus === 'ready' && botName.length > 0 && !registered && (
+                      <button
+                        onClick={
+                          selectedTier === 'skip' ? next
+                          : handleChoice === 'relay' && selectedTier === 'at' ? (showChangeConfirm ? onChangeHandle : onClaimHandle)
+                          : undefined
+                        }
+                        disabled={!selectedTier || registering || changingHandle || (selectedTier === 'at' && !tierAvailability['at'])}
+                        className="w-full mt-4 py-3 bg-gradient-brand hover:opacity-90 text-white text-[14px] font-semibold rounded-full transition-colors flex items-center justify-center gap-2 disabled:opacity-40 disabled:cursor-not-allowed"
+                      >
+                        {(registering || changingHandle) ? (
+                          <><LoaderCircle className="h-4 w-4 animate-spin" />{showChangeConfirm ? 'Changing...' : 'Claiming...'}</>
+                        ) : !selectedTier ? (
+                          <>Select an option to continue</>
+                        ) : selectedTier === 'skip' ? (
+                          <>Continue<ArrowRight className="h-4 w-4" /></>
+                        ) : (
+                          <>{showChangeConfirm ? 'Change Handle' : 'Claim & Continue'}<ArrowRight className="h-4 w-4" /></>
+                        )}
+                      </button>
+                    )}
+
+                    {/* Continue after claim */}
+                    {registered && (
+                      <button
+                        onClick={next}
+                        className="w-full mt-4 py-3 bg-gradient-brand hover:opacity-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>
+                    )}
+
+                    {/* Cancel change */}
+                    {showChangeConfirm && !registered && (
+                      <button
+                        onClick={() => {
+                          setShowChangeConfirm(false);
+                          setBotName(existingHandle!.username);
+                          setRegistered(true);
+                          setRegisteredUrl(existingHandle!.url);
+                          setSelectedTier(existingHandle!.tier);
+                          setHandleChoice('relay');
+                          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>
+                    )}
+                  </>
+                )}
+
+                {/* ── Tailscale-only switch (only when re-running wizard) ── */}
+                {!isInitialSetup && (
+                  <>
+                    {/* Access badge */}
+                    <div className="mt-5 flex items-center gap-2">
+                      <span className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11px] font-medium border ${
+                        isPrivateAccess(accessMethod)
+                          ? 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20'
+                          : 'bg-blue-500/10 text-blue-400 border-blue-500/20'
+                      }`}>
+                        {isPrivateAccess(accessMethod) ? <Wifi className="h-3 w-3" /> : <Globe className="h-3 w-3" />}
+                        Accessing via {ACCESS_LABELS[accessMethod]}
+                      </span>
+                    </div>
+
+                    {/* Switch to private network only */}
+                    {!showTailscaleSwitch && (
+                      <button
+                        onClick={() => {
+                          if (isPrivateAccess(accessMethod)) {
+                            setShowTailscaleSwitch(true);
+                            setTailscaleConfirmText('');
+                            setTailscaleSwitchError('');
+                          }
+                        }}
+                        disabled={!isPrivateAccess(accessMethod)}
+                        className={`w-full mt-3 flex items-center justify-between px-4 py-3 rounded-xl border transition-all text-left ${
+                          isPrivateAccess(accessMethod)
+                            ? 'border-white/[0.06] bg-white/[0.02] hover:border-white/10 hover:bg-white/[0.04] cursor-pointer'
+                            : 'border-white/[0.04] bg-transparent opacity-50 cursor-not-allowed'
+                        }`}
+                      >
+                        <div>
+                          <p className="text-[13px] text-white/70 font-medium">Switch to private network only</p>
+                          <p className="text-[11px] text-white/30 mt-0.5">
+                            {isPrivateAccess(accessMethod)
+                              ? 'Stop the tunnel and relay — access only via Tailscale or LAN'
+                              : 'Connect via Tailscale or private network to unlock'}
+                          </p>
+                        </div>
+                        <WifiOff className="h-4 w-4 text-white/30 shrink-0 ml-3" />
+                      </button>
+                    )}
+
+                    {/* Confirmation flow */}
+                    {showTailscaleSwitch && (
+                      <div className="mt-3 space-y-3">
+                        <div className="bg-amber-500/8 border border-amber-500/20 rounded-xl px-4 py-3">
+                          <div className="flex items-start gap-2">
+                            <TriangleAlert className="h-4 w-4 text-amber-400 shrink-0 mt-0.5" />
+                            <div>
+                              <p className="text-amber-400/90 text-[13px] font-medium">Switch to private network only?</p>
+                              <p className="text-amber-400/60 text-[12px] mt-1 leading-relaxed">
+                                This will stop the Cloudflare tunnel and relay connection. Your bot will only be accessible via your private network.
+                              </p>
+                              {existingHandle && (
+                                <p className="text-amber-400/50 text-[12px] mt-1.5">
+                                  Your handle will be preserved and can be re-activated later.
+                                </p>
+                              )}
+                            </div>
+                          </div>
+                        </div>
+                        <div>
+                          <label className="text-[12px] text-white/40 font-medium mb-1.5 block">
+                            Type <span className="font-mono text-white/60">I confirm</span> to proceed
+                          </label>
+                          <input
+                            type="text"
+                            value={tailscaleConfirmText}
+                            onChange={(e) => setTailscaleConfirmText(e.target.value)}
+                            placeholder="I confirm"
+                            spellCheck={false}
+                            autoFocus
+                            className={inputSmCls}
+                          />
+                        </div>
+                        {tailscaleSwitchError && (
+                          <p className="text-red-400/70 text-[12px]">{tailscaleSwitchError}</p>
+                        )}
+                        <div className="flex gap-2">
+                          <button
+                            onClick={async () => {
+                              if (!onTunnelSwitch || tailscaleConfirmText.trim().toLowerCase() !== 'i confirm') return;
+                              setTailscaleSwitching(true);
+                              setTailscaleSwitchError('');
+                              try {
+                                await onTunnelSwitch('off');
+                                setTunnelMode('off');
+                                setShowTailscaleSwitch(false);
+                              } catch (err: any) {
+                                setTailscaleSwitchError(err.message || 'Failed to switch');
+                              } finally {
+                                setTailscaleSwitching(false);
+                              }
+                            }}
+                            disabled={tailscaleSwitching || tailscaleConfirmText.trim().toLowerCase() !== 'i confirm' || !onTunnelSwitch}
+                            className="flex-1 py-2.5 bg-amber-600 hover:bg-amber-500 text-white text-[13px] font-semibold rounded-full transition-colors flex items-center justify-center gap-2 disabled:opacity-40"
+                          >
+                            {tailscaleSwitching ? <><LoaderCircle className="h-4 w-4 animate-spin" />Switching...</> : 'Confirm Switch'}
+                          </button>
+                          <button
+                            onClick={() => { setShowTailscaleSwitch(false); setTailscaleConfirmText(''); setTailscaleSwitchError(''); }}
+                            disabled={tailscaleSwitching}
+                            className="px-5 py-2.5 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"
+                          >
+                            Cancel
+                          </button>
+                        </div>
+                      </div>
+                    )}
+                  </>
+                )}
+              </div>
+            )}
+
+            {/* ── Step 3: Password + 2FA (sub-phase flow) ── */}
+            {step === 3 && (
+              <div>
+                <AnimatePresence mode="wait">
+                  {/* ── Phase: Password ── */}
+                  {step3Phase === 'password' && (
+                    <motion.div
+                      key="password"
+                      initial={{ opacity: 0, x: -20 }}
+                      animate={{ opacity: 1, x: 0 }}
+                      exit={{ opacity: 0, x: -20 }}
+                      transition={{ duration: 0.15 }}
+                    >
+                      <h1 className="text-xl font-bold text-white tracking-tight">
+                        Set a password
+                      </h1>
+                      <p className="text-white/40 text-[13px] mt-1.5 leading-relaxed">
+                        You'll need this password to access your agent's chat. Keep it safe — anyone with your URL will need it to log in.
+                      </p>
+
+                      {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]">Password already set. Leave fields empty to keep your current password, or enter your current password to change it.</p>
+                        </div>
+                      )}
+
+                      {portalExists && (
+                        <div className="mt-5">
+                          <label className="text-[12px] text-white/40 font-medium mb-1.5 block">Current password</label>
+                          <div className="flex items-center gap-2">
+                            <input
+                              type="password"
+                              value={portalOldPass}
+                              onChange={(e) => { setPortalOldPass(e.target.value); setPortalOldPassError(''); setPortalOldPassVerified(false); }}
+                              placeholder="Enter current password to change it"
+                              autoComplete="current-password"
+                              autoFocus
+                              className={inputCls + ' flex-1'}
+                            />
+                            {portalOldPass.length > 0 && !portalOldPassVerified && (
+                              <button
+                                onClick={async () => {
+                                  setPortalVerifying(true);
+                                  setPortalOldPassError('');
+                                  try {
+                                    const res = await fetch('/api/portal/verify-password', {
+                                      method: 'POST',
+                                      headers: { 'Content-Type': 'application/json' },
+                                      body: JSON.stringify({ password: portalOldPass }),
+                                    });
+                                    const data = await res.json();
+                                    if (data.valid) {
+                                      setPortalOldPassVerified(true);
+                                    } else {
+                                      setPortalOldPassError('Incorrect password');
+                                    }
+                                  } catch {
+                                    setPortalOldPassError('Could not verify');
+                                  } finally {
+                                    setPortalVerifying(false);
+                                  }
+                                }}
+                                disabled={portalVerifying}
+                                className="shrink-0 px-4 py-3 bg-white/[0.06] hover:bg-white/[0.1] text-white/60 text-[13px] font-medium rounded-xl transition-colors disabled:opacity-40"
+                              >
+                                {portalVerifying ? <LoaderCircle className="h-4 w-4 animate-spin" /> : 'Verify'}
+                              </button>
+                            )}
+                            {portalOldPassVerified && (
+                              <div className="shrink-0 w-10 h-10 flex items-center justify-center">
+                                <Check className="h-4 w-4 text-emerald-400" />
+                              </div>
+                            )}
+                          </div>
+                          {portalOldPassError && (
+                            <p className="text-red-400/70 text-[11px] mt-1">{portalOldPassError}</p>
+                          )}
+                        </div>
+                      )}
+
+                      {(!portalExists || portalOldPassVerified) && (
+                        <>
+                          <div className={portalExists ? 'mt-3' : 'mt-5'}>
+                            <label className="text-[12px] text-white/40 font-medium mb-1.5 block">
+                              {portalExists ? 'New password' : 'Password'}
+                            </label>
+                            <input
+                              type="password"
+                              value={portalPass}
+                              onChange={(e) => setPortalPass(e.target.value)}
+                              placeholder="••••••••"
+                              autoComplete="new-password"
+                              autoFocus={!portalExists}
+                              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>
+
+                          <div className="mt-3">
+                            <label className="text-[12px] text-white/40 font-medium mb-1.5 block">
+                              {portalExists ? 'Confirm new password' : '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>
+                        </>
+                      )}
+
+                      {/* ── 2FA toggle card ── */}
+                      <div className="mt-5 border border-white/[0.06] rounded-xl overflow-hidden">
+                        <button
+                          onClick={async () => {
+                            if (totpEnabled && totpVerified) {
+                              setTotpDisabling(true);
+                              return;
+                            }
+                            if (!totpEnabled) {
+                              // Enable → go to setup phase
+                              setTotpEnabled(true);
+                              setTotpError('');
+                              setTotpCode('');
+                              // Fetch QR if not already loaded
+                              if (!totpQrUri) {
+                                try {
+                                  const res = await fetch('/api/portal/totp/setup', {
+                                    method: 'POST',
+                                    headers: { 'Content-Type': 'application/json' },
+                                    body: JSON.stringify({ password: portalExists ? portalOldPass : portalPass }),
+                                  });
+                                  const data = await res.json();
+                                  if (res.ok) {
+                                    setTotpSecret(data.secret);
+                                    setTotpQrUri(data.qrDataUri);
+                                    setTotpOtpauthUri(data.otpauthUri);
+                                    setStep3Phase('totp-setup');
+                                  } else {
+                                    setTotpError(data.error || 'Setup failed');
+                                    setTotpEnabled(false);
+                                  }
+                                } catch {
+                                  setTotpError('Could not reach server');
+                                  setTotpEnabled(false);
+                                }
+                              } else {
+                                setStep3Phase('totp-setup');
+                              }
+                            } else {
+                              // Disable (setup incomplete)
+                              setTotpEnabled(false);
+                              setTotpQrUri('');
+                              setTotpSecret('');
+                              setTotpOtpauthUri('');
+                            }
+                          }}
+                          type="button"
+                          className="w-full flex items-center gap-3 px-4 py-3 text-left"
+                        >
+                          <div className={`w-9 h-9 rounded-lg flex items-center justify-center shrink-0 ${totpEnabled && totpVerified ? 'bg-emerald-500/10' : 'bg-white/[0.04]'}`}>
+                            {totpEnabled && totpVerified ? (
+                              <ShieldCheck className="h-[18px] w-[18px] text-emerald-400" />
+                            ) : (
+                              <Shield className="h-[18px] w-[18px] text-white/30" />
+                            )}
+                          </div>
+                          <div className="flex-1 min-w-0">
+                            <span className="text-[13px] font-medium text-white block">Two-Factor Auth</span>
+                            <p className="text-[11px] text-white/30 mt-0.5">
+                              {totpEnabled && totpVerified ? (
+                                <span className="text-emerald-400/70">Active — authenticator app required</span>
+                              ) : (tunnelMode === 'quick' || tunnelMode === 'named') ? (
+                                <span>Recommended for public bots</span>
+                              ) : (
+                                <span>Extra security with an authenticator app</span>
+                              )}
+                            </p>
+                          </div>
+                          <div className={`w-10 h-6 rounded-full transition-colors relative shrink-0 ${totpEnabled ? 'bg-emerald-500' : 'bg-white/10'}`}>
+                            <div className={`absolute top-1 w-4 h-4 rounded-full bg-white shadow transition-transform ${totpEnabled ? 'translate-x-5' : 'translate-x-1'}`} />
+                          </div>
+                        </button>
+
+                        {/* Inline disable flow */}
+                        {totpDisabling && (
+                          <div className="px-4 pb-3 border-t border-white/[0.06]">
+                            <p className="text-[12px] text-white/40 mt-3 mb-2">Enter your current TOTP code to disable 2FA:</p>
+                            <div className="flex items-center gap-2">
+                              <input
+                                type="text"
+                                inputMode="numeric"
+                                autoComplete="one-time-code"
+                                maxLength={6}
+                                value={totpDisableCode}
+                                onChange={(e) => { setTotpDisableCode(e.target.value.replace(/\D/g, '')); setTotpDisableError(''); }}
+                                placeholder="000000"
+                                className={inputSmCls + ' flex-1 tracking-[0.3em] text-center font-mono'}
+                              />
+                              <button
+                                onClick={async () => {
+                                  if (totpDisableCode.length !== 6) return;
+                                  try {
+                                    const res = await fetch('/api/portal/totp/disable', {
+                                      method: 'POST',
+                                      headers: { 'Content-Type': 'application/json' },
+                                      body: JSON.stringify({ password: portalExists ? portalOldPass : portalPass, code: totpDisableCode }),
+                                    });
+                                    const data = await res.json();
+                                    if (res.ok) {
+                                      setTotpEnabled(false);
+                                      setTotpVerified(false);
+                                      setTotpSecret('');
+                                      setTotpQrUri('');
+                                      setTotpOtpauthUri('');
+                                      setTotpDisabling(false);
+                                      setTotpDisableCode('');
+                                      setRecoveryCodes([]);
+                                      setRecoveryCodesCopied(false);
+                                    } else {
+                                      setTotpDisableError(data.error || 'Failed to disable');
+                                    }
+                                  } catch {
+                                    setTotpDisableError('Could not reach server');
+                                  }
+                                }}
+                                disabled={totpDisableCode.length !== 6}
+                                className="shrink-0 px-4 py-2.5 bg-red-500/10 hover:bg-red-500/20 text-red-400 text-[13px] font-medium rounded-xl transition-colors disabled:opacity-40"
+                              >
+                                Disable
+                              </button>
+                            </div>
+                            {totpDisableError && <p className="text-red-400/70 text-[11px] mt-1">{totpDisableError}</p>}
+                            <button onClick={() => { setTotpDisabling(false); setTotpDisableCode(''); setTotpDisableError(''); }} className="text-[11px] text-white/30 hover:text-white/50 mt-2">Cancel</button>
+                          </div>
+                        )}
+
+                        {totpError && step3Phase === 'password' && (
+                          <div className="mx-4 mb-3 bg-red-500/8 border border-red-500/15 rounded-xl px-3 py-2">
+                            <p className="text-red-400/90 text-[11px]">{totpError}</p>
+                          </div>
+                        )}
+                      </div>
+
+                      <button
+                        onClick={next}
+                        disabled={!canNext}
+                        className="w-full mt-5 py-3 bg-gradient-brand hover:opacity-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>
+                    </motion.div>
+                  )}
+
+                  {/* ── Phase: TOTP Setup (QR + verify) ── */}
+                  {step3Phase === 'totp-setup' && (
+                    <motion.div
+                      key="totp-setup"
+                      initial={{ opacity: 0, x: 20 }}
+                      animate={{ opacity: 1, x: 0 }}
+                      exit={{ opacity: 0, x: 20 }}
+                      transition={{ duration: 0.15 }}
+                    >
+                      <div className="flex items-center gap-3 mb-1">
+                        <button
+                          onClick={() => {
+                            setTotpEnabled(false);
+                            setTotpQrUri('');
+                            setTotpSecret('');
+                            setTotpOtpauthUri('');
+                            setTotpCode('');
+                            setTotpError('');
+                            setStep3Phase('password');
+                            clearTotpStorage();
+                          }}
+                          className="w-7 h-7 rounded-full bg-white/[0.04] flex items-center justify-center text-white/40 hover:text-white/70 transition-colors shrink-0"
+                        >
+                          <ArrowLeft className="h-4 w-4" />
+                        </button>
+                        <h1 className="text-xl font-bold text-white tracking-tight">Set up 2FA</h1>
+                      </div>
+
+                      {totpError && (
+                        <div className="mt-3 bg-red-500/8 border border-red-500/15 rounded-xl px-3 py-2">
+                          <p className="text-red-400/90 text-[11px]">{totpError}</p>
+                        </div>
+                      )}
+
+                      {totpQrUri && (
+                        <>
+                          {/* Desktop: horizontal QR + instructions | Mobile: authenticator link */}
+                          {isMobileDevice ? (
+                            <div className="mt-4">
+                              <p className="text-white/40 text-[13px] leading-relaxed mb-4">
+                                Add Bloby to your authenticator app, then enter the 6-digit code below to confirm.
+                              </p>
+
+                              {/* Primary: copy secret key (doesn't leave the app) */}
+                              <button
+                                onClick={() => {
+                                  navigator.clipboard.writeText(totpSecret);
+                                  setTotpSecretCopied(true);
+                                  setTimeout(() => setTotpSecretCopied(false), 3000);
+                                }}
+                                className={`w-full py-3 text-[14px] font-medium rounded-xl transition-colors flex items-center justify-center gap-2 ${
+                                  totpSecretCopied
+                                    ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20'
+                                    : 'bg-white/[0.05] text-white/70 hover:bg-white/[0.08] border border-white/[0.08]'
+                                }`}
+                              >
+                                {totpSecretCopied ? (
+                                  <><Check className="h-4 w-4" />Secret key copied</>
+                                ) : (
+                                  <><Copy className="h-4 w-4" />Copy secret key</>
+                                )}
+                              </button>
+                              <p className="text-[11px] text-white/20 text-center mt-2">
+                                Paste it in your authenticator app → Add account → Enter key
+                              </p>
+
+                              {/* Secondary: deep link (saves state before leaving) */}
+                              <a
+                                href={totpOtpauthUri}
+                                onClick={() => saveTotpState()}
+                                className="w-full mt-3 py-2.5 text-[13px] text-white/30 hover:text-white/50 flex items-center justify-center gap-1.5 transition-colors"
+                              >
+                                <Smartphone className="h-3.5 w-3.5" />
+                                Or open directly in authenticator
+                              </a>
+                            </div>
+                          ) : (
+                            <div className="mt-4 flex gap-4 items-start">
+                              {/* QR Code — compact */}
+                              <div className="shrink-0">
+                                <div className="bg-white rounded-xl p-1.5">
+                                  <img src={totpQrUri} alt="TOTP QR Code" className="w-[140px] h-[140px]" />
+                                </div>
+                              </div>
+                              {/* Instructions */}
+                              <div className="flex-1 min-w-0 pt-1">
+                                <p className="text-white/40 text-[13px] leading-relaxed">
+                                  Scan this QR code with your authenticator app.
+                                </p>
+                                <p className="text-white/25 text-[11px] mt-2 leading-relaxed">
+                                  Google Authenticator, Authy, 1Password, or any TOTP app.
+                                </p>
+                                <button
+                                  onClick={() => { navigator.clipboard.writeText(totpSecret); }}
+                                  className="mt-3 text-[11px] text-white/25 hover:text-white/40 flex items-center gap-1 transition-colors"
+                                >
+                                  <Copy className="h-3 w-3" />
+                                  Copy secret key
+                                </button>
+                              </div>
+                            </div>
+                          )}
+
+                          {/* Verification input */}
+                          <div className="mt-5">
+                            <label className="text-[12px] text-white/40 font-medium mb-1.5 block">Enter the 6-digit code from your app</label>
+                            <div className="flex items-center gap-2">
+                              <input
+                                type="text"
+                                inputMode="numeric"
+                                autoComplete="one-time-code"
+                                maxLength={6}
+                                value={totpCode}
+                                onChange={(e) => { setTotpCode(e.target.value.replace(/\D/g, '')); setTotpError(''); }}
+                                placeholder="000000"
+                                autoFocus
+                                className={inputCls + ' tracking-[0.3em] text-center font-mono flex-1'}
+                              />
+                              <button
+                                onClick={async () => {
+                                  if (totpCode.length !== 6) return;
+                                  setTotpVerifying(true);
+                                  setTotpError('');
+                                  try {
+                                    const res = await fetch('/api/portal/totp/verify-setup', {
+                                      method: 'POST',
+                                      headers: { 'Content-Type': 'application/json' },
+                                      body: JSON.stringify({ code: totpCode, password: portalExists ? portalOldPass : portalPass }),
+                                    });
+                                    const data = await res.json();
+                                    if (res.ok && data.success) {
+                                      setTotpVerified(true);
+                                      setRecoveryCodes(data.recoveryCodes || []);
+                                      setStep3Phase('recovery');
+                                      clearTotpStorage();
+                                    } else {
+                                      setTotpError(data.error || 'Verification failed');
+                                    }
+                                  } catch {
+                                    setTotpError('Could not reach server');
+                                  } finally {
+                                    setTotpVerifying(false);
+                                  }
+                                }}
+                                disabled={totpCode.length !== 6 || totpVerifying}
+                                className="shrink-0 px-5 py-3 bg-gradient-brand hover:opacity-90 text-white text-[14px] font-semibold rounded-xl transition-colors flex items-center gap-2 disabled:opacity-40"
+                              >
+                                {totpVerifying ? <LoaderCircle className="h-4 w-4 animate-spin" /> : 'Verify'}
+                              </button>
+                            </div>
+                          </div>
+                        </>
+                      )}
+                    </motion.div>
+                  )}
+
+                  {/* ── Phase: Recovery codes ── */}
+                  {step3Phase === 'recovery' && (
+                    <motion.div
+                      key="recovery"
+                      initial={{ opacity: 0, x: 20 }}
+                      animate={{ opacity: 1, x: 0 }}
+                      exit={{ opacity: 0, x: 20 }}
+                      transition={{ duration: 0.15 }}
+                    >
+                      <div className="flex items-center gap-3 mb-1">
+                        <div className="w-9 h-9 rounded-xl bg-emerald-500/10 flex items-center justify-center shrink-0">
+                          <ShieldCheck className="h-[18px] w-[18px] text-emerald-400" />
+                        </div>
+                        <div>
+                          <h1 className="text-xl font-bold text-white tracking-tight">2FA enabled</h1>
+                          <p className="text-emerald-400/70 text-[12px]">Save your recovery codes</p>
+                        </div>
+                      </div>
+
+                      <p className="text-white/35 text-[13px] mt-3 leading-relaxed">
+                        If you lose your authenticator app, you can use one of these codes to sign in. Each code works once. Store them somewhere safe.
+                      </p>
+
+                      <div className="mt-4 grid grid-cols-2 gap-1.5">
+                        {recoveryCodes.map((code, i) => (
+                          <div key={i} className="bg-white/[0.03] border border-white/[0.06] rounded-lg px-3 py-2 text-center">
+                            <code className="text-[13px] text-white/60 font-mono tracking-wider">{code}</code>
+                          </div>
+                        ))}
+                      </div>
+
+                      <button
+                        onClick={() => {
+                          navigator.clipboard.writeText(recoveryCodes.join('\n'));
+                          setRecoveryCodesCopied(true);
+                        }}
+                        className={`w-full mt-4 py-3 text-[14px] font-semibold rounded-full transition-colors flex items-center justify-center gap-2 ${
+                          recoveryCodesCopied
+                            ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20'
+                            : 'bg-white/[0.05] text-white/60 hover:bg-white/[0.08] border border-white/[0.08]'
+                        }`}
+                      >
+                        {recoveryCodesCopied ? (
+                          <><Check className="h-4 w-4" />Copied</>
+                        ) : (
+                          <><Copy className="h-4 w-4" />Copy recovery codes</>
+                        )}
+                      </button>
+
+                      <button
+                        onClick={() => {
+                          setRecoveryCodes([]);
+                          setStep3Phase('password');
+                          clearTotpStorage();
+                        }}
+                        disabled={!recoveryCodesCopied}
+                        className="w-full mt-3 py-3 bg-gradient-brand hover:opacity-90 text-white text-[14px] font-semibold rounded-full transition-colors flex items-center justify-center gap-2 disabled:opacity-40"
+                      >
+                        Done
+                        <ArrowRight className="h-4 w-4" />
+                      </button>
+                    </motion.div>
+                  )}
+                </AnimatePresence>
+              </div>
+            )}
+
+            {/* ── Step 4: Provider + Auth + Model ── */}
+            {step === 4 && (
+              <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-[#AF27E3]/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-gradient-brand" />
+                      ) : null}
+                    </button>
+                  ))}
+                </div>
+
+                <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="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]">Connected — Anthropic subscription is active.</p>
+                        </div>
+                        <button
+                          onClick={() => { setAuthState((s) => ({ ...s, anthropic: 'idle' })); setOauthStarted(false); setAnthropicCode(''); setAnthropicError(''); }}
+                          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"
+                        >
+                          <RefreshCw className="h-3 w-3" />
+                          Re-authenticate
+                        </button>
+                      </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-gradient-brand hover:opacity-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-gradient-brand hover:opacity-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="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]">Connected — ChatGPT subscription is active.</p>
+                        </div>
+                        <button
+                          onClick={() => { setAuthState((s) => ({ ...s, openai: 'idle' })); setOpenaiError(''); }}
+                          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"
+                        >
+                          <RefreshCw className="h-3 w-3" />
+                          Re-authenticate
+                        </button>
+                      </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>
+                )}
+
+                {/* ── 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}
+                    />
+                  </>
+                )}
+
+                {isConnected && (
+                  <button
+                    onClick={next}
+                    disabled={!canNext}
+                    className="w-full mt-4 py-3 bg-gradient-brand hover:opacity-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 5: Voice Messages + Complete ── */}
+            {step === 5 && (
+              <div>
+                <h1 className="text-xl font-bold text-white tracking-tight mb-1">
+                  Voice Messages
+                </h1>
+                <p className="text-white/40 text-[13px] mt-1 leading-relaxed">
+                  Voice input works out of the box using your browser's built-in speech recognition. For better accuracy, you can optionally enable OpenAI Whisper.
+                </p>
+
+                {/* Browser Speech Recognition card */}
+                <div className="w-full mt-5 rounded-xl border border-emerald-500/20 bg-emerald-500/[0.04] p-4">
+                  <div className="flex items-center gap-3.5">
+                    <div className="w-10 h-10 rounded-xl bg-emerald-500/10 flex items-center justify-center shrink-0">
+                      <Mic className="h-5 w-5 text-emerald-400" />
+                    </div>
+                    <div className="flex-1">
+                      <div className="text-[14px] font-medium text-white">Browser Speech Recognition</div>
+                      <div className="text-[12px] text-white/35 mt-0.5 leading-relaxed">
+                        Built-in voice input — no setup needed. Works in Chrome, Edge, and Safari.
+                      </div>
+                    </div>
+                    <div className="flex items-center justify-center w-6 h-6 rounded-full bg-emerald-500/20 shrink-0">
+                      <Check className="h-3.5 w-3.5 text-emerald-400" />
+                    </div>
+                  </div>
+                </div>
+
+                {/* Whisper upgrade toggle */}
+                <button
+                  onClick={() => setWhisperEnabled((v) => !v)}
+                  className={`w-full mt-3 rounded-xl border transition-all duration-200 p-4 text-left ${
+                    whisperEnabled
+                      ? 'bg-white/[0.04] border-[#AF27E3]/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">
+                        Upgrade to more accurate transcription that works in all browsers including Firefox.
+                      </div>
+                    </div>
+                    <div className={`w-10 h-[22px] rounded-full transition-colors duration-200 flex items-center px-0.5 shrink-0 ${
+                      whisperEnabled ? 'bg-gradient-brand' : '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">
+                    <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-[#AF27E3]/60 mt-0.5 shrink-0" />
+                      <p className="text-white/35 text-[12px] leading-relaxed">
+                        Whisper provides more accurate transcription and works in all browsers including Firefox.
+                      </p>
+                    </div>
+                  </div>
+                )}
+
+                <button
+                  onClick={handleComplete}
+                  disabled={saving || (whisperEnabled && (!whisperKey.startsWith('sk-') || whisperKey.length < 20))}
+                  className="w-full mt-5 py-3 bg-gradient-brand hover:opacity-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">
+                    Voice input is active using your browser's built-in speech recognition.
+                  </p>
+                )}
+              </div>
+            )}
+
+            {/* ── Step 6: All Set (initial onboard only) ── */}
+            {step === 6 && isInitialSetup && (() => {
+              const isPrivate = tunnelMode === 'off';
+              const finalUrl = (() => {
+                if (isPrivate) return window.location.origin;
+                if (tunnelMode === 'named') return `https://${tunnelDomain}`;
+                if (handleChoice === 'relay' && registeredUrl) return registeredUrl;
+                return tunnelUrl || `http://localhost:${3000}`;
+              })();
+              const finalUrlFull = finalUrl.startsWith('http') ? finalUrl : `https://${finalUrl}`;
+              const descriptionText = isPrivate
+                ? 'Your agent is running on your private network. Access it from any device on your local network or VPN.'
+                : tunnelMode === 'named'
+                  ? 'Access your agent at your custom domain.'
+                  : handleChoice === 'relay' && registeredUrl
+                    ? 'Your agent is live and ready. From now on, access it using your custom URL below.'
+                    : 'Your agent is live and ready. Your tunnel URL is shown below. Note: this URL changes on restart.';
+              return (
+              <div className="flex flex-col items-center text-center">
+                <div className="w-16 h-16 rounded-full bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center mb-5">
+                  <Check className="h-8 w-8 text-emerald-400" />
+                </div>
+                <h1 className="text-2xl font-bold text-white tracking-tight">
+                  All Set!
+                </h1>
+                <p className="text-white/40 text-[13px] mt-2 leading-relaxed max-w-[340px]">
+                  {descriptionText}
+                </p>
+
+                {/* URL */}
+                <div className="w-full mt-6 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/70 truncate flex-1 text-left">{finalUrl}</span>
+                  <button
+                    onClick={() => {
+                      navigator.clipboard.writeText(finalUrlFull);
+                      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>
+
+                {/* Password display with eye toggle */}
+                <div className="w-full mt-3">
+                  <label className="text-[12px] text-white/40 font-medium mb-1.5 block text-left">Your password</label>
+                  <div className="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/70 truncate flex-1 text-left">
+                      {showPassAllSet ? portalPass : '\u2022'.repeat(Math.max(portalPass.length, 8))}
+                    </span>
+                    <button
+                      onClick={() => setShowPassAllSet((v) => !v)}
+                      className="shrink-0 text-white/30 hover:text-white/60 transition-colors"
+                    >
+                      {showPassAllSet ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+                    </button>
+                  </div>
+                </div>
+
+                {/* Redirect / done button */}
+                <button
+                  onClick={() => {
+                    if (isPrivate) {
+                      (window.top || window).location.href = '/';
+                    } else {
+                      (window.top || window).location.href = finalUrlFull;
+                    }
+                  }}
+                  className="w-full mt-6 py-3 bg-gradient-brand hover:opacity-90 text-white text-[14px] font-semibold rounded-full transition-colors flex items-center justify-center gap-2"
+                >
+                  {isPrivate ? 'Go to dashboard' : 'Go to your agent'}
+                  <ExternalLink className="h-4 w-4" />
+                </button>
+
+                <p className="text-white/20 text-[11px] mt-3 leading-relaxed">
+                  {isPrivate
+                    ? 'Access from any device on your network using the URL above.'
+                    : `You'll be redirected to your ${tunnelMode === 'named' ? 'custom domain' : handleChoice === 'relay' ? 'custom URL' : 'tunnel URL'}.`
+                  }
+                </p>
+              </div>
+              );
+            })()}
+          </motion.div>
+        </AnimatePresence>
+
+        {/* Back button (hidden on All Set step) */}
+        {step > 0 && step < TOTAL_STEPS - 1 && !(step === 6 && isInitialSetup) && (
+          <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>
+  );
+}