bloby-bot 0.30.1 → 0.32.1

package/supervisor/chat/OnboardWizard.tsx

@@ -57,12 +57,15 @@ const MODELS: Record<string, { id: string; label: string }[]> = {
     { id: 'claude-haiku-4-5', 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)' },
+    { id: 'gpt-5.5:high', label: 'GPT-5.5 High' },
+    { id: 'gpt-5.5:medium', label: 'GPT-5.5 Medium' },
+    { id: 'gpt-5.5:xhigh', label: 'GPT-5.5 Extra High' },
+    { id: 'gpt-5.4:medium', label: 'GPT-5.4 Medium' },
+    { id: 'gpt-5.4:high', label: 'GPT-5.4 High' },
+    { id: 'gpt-5.4:xhigh', label: 'GPT-5.4 Extra High' },
+    { id: 'gpt-5.4-mini:medium', label: 'GPT-5.4-Mini Medium' },
+    { id: 'gpt-5.4-mini:high', label: 'GPT-5.4-Mini High' },
+    { id: 'gpt-5.4-mini:xhigh', label: 'GPT-5.4-Mini Extra High' },
   ],
 };
 
@@ -77,22 +80,39 @@ const HANDLES = [
 
 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);
+  const [pos, setPos] = useState<{ top: number; left: number; width: number } | null>(null);
+  const btnRef = useRef<HTMLButtonElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     if (!open) return;
+    const recalc = () => {
+      const r = btnRef.current?.getBoundingClientRect();
+      if (r) setPos({ top: r.bottom + 4, left: r.left, width: r.width });
+    };
+    recalc();
     const handler = (e: MouseEvent) => {
-      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+      const t = e.target as Node;
+      if (btnRef.current?.contains(t)) return;
+      if (menuRef.current?.contains(t)) return;
+      setOpen(false);
     };
     document.addEventListener('mousedown', handler);
-    return () => document.removeEventListener('mousedown', handler);
+    window.addEventListener('resize', recalc);
+    window.addEventListener('scroll', recalc, true);
+    return () => {
+      document.removeEventListener('mousedown', handler);
+      window.removeEventListener('resize', recalc);
+      window.removeEventListener('scroll', recalc, true);
+    };
   }, [open]);
 
   const selected = models.find((m) => m.id === value);
 
   return (
-    <div className="relative" ref={ref}>
+    <div className="relative">
       <button
+        ref={btnRef}
         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"
@@ -102,8 +122,12 @@ function ModelDropdown({ models, value, onChange }: { models: { id: string; labe
         </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">
+      {open && pos && (
+        <div
+          ref={menuRef}
+          style={{ position: 'fixed', top: pos.top, left: pos.left, width: pos.width, zIndex: 60 }}
+          className="bg-[#222] border border-white/[0.08] rounded-xl shadow-xl py-1 max-h-[320px] overflow-y-auto"
+        >
           {models.map((m) => (
             <button
               key={m.id}
@@ -155,8 +179,24 @@ export default function OnboardWizard({ onComplete, isInitialSetup = false, onSa
   const [anthropicChecking, setAnthropicChecking] = useState(false);
 
   // OpenAI/Codex-specific
-  const [openaiWaiting, setOpenaiWaiting] = useState(false);
+  // Two flows are supported: device-code (default, headless-friendly) and
+  // paste-back (fallback for users who prefer the browser-callback flow).
+  const [codexFlow, setCodexFlow] = useState<'device' | 'paste'>('device');
+
+  // Device-code flow
+  const [codexDeviceState, setCodexDeviceState] = useState<'idle' | 'pending' | 'success' | 'error'>('idle');
+  const [codexUserCode, setCodexUserCode] = useState('');
+  const [codexVerificationUrl, setCodexVerificationUrl] = useState('');
+  const [codexDeviceStarting, setCodexDeviceStarting] = useState(false);
+  const [codexCodeCopied, setCodexCodeCopied] = useState(false);
+
+  // Paste-back flow
+  const [codexOauthStarted, setCodexOauthStarted] = useState(false);
+  const [codexCode, setCodexCode] = useState('');
+  const [codexExchanging, setCodexExchanging] = useState(false);
+
   const [openaiError, setOpenaiError] = useState<string | undefined>();
+  const [codexChecking, setCodexChecking] = useState(false);
 
   // Bot name + Handle (step 2)
   const [botName, setBotName] = useState('');
@@ -342,21 +382,6 @@ export default function OnboardWizard({ onComplete, isInitialSetup = false, onSa
       .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
@@ -529,16 +554,21 @@ export default function OnboardWizard({ onComplete, isInitialSetup = false, onSa
   };
 
   const handleProviderChange = (id: string) => {
-    if (provider === 'openai' && id !== 'openai' && openaiWaiting) {
-      fetch('/api/auth/codex/cancel', { method: 'POST' });
-      setOpenaiWaiting(false);
+    if (provider === 'openai' && id !== 'openai') {
+      if (codexOauthStarted) fetch('/api/auth/codex/cancel', { method: 'POST' });
+      if (codexDeviceState === 'pending') fetch('/api/auth/codex/device/cancel', { method: 'POST' });
     }
     setProvider(id);
-    setModel('');
+    setModel(id === 'openai' ? 'gpt-5.5:high' : '');
     setOauthStarted(false);
     setAnthropicCode('');
     setAnthropicError(undefined);
-    setOpenaiWaiting(false);
+    setCodexOauthStarted(false);
+    setCodexCode('');
+    setCodexDeviceState('idle');
+    setCodexUserCode('');
+    setCodexVerificationUrl('');
+    setCodexFlow('device');
     setOpenaiError(undefined);
   };
 
@@ -623,29 +653,128 @@ export default function OnboardWizard({ onComplete, isInitialSetup = false, onSa
     }
   };
 
-  /* ── Auth handlers: OpenAI/Codex ── */
+  /* ── Auth handlers: OpenAI/Codex (device-code flow — default) ── */
+
+  const handleOpenAIDeviceStart = async () => {
+    setOpenaiError(undefined);
+    setCodexDeviceStarting(true);
+    setCodexDeviceState('pending');
+    try {
+      const res = await fetch('/api/auth/codex/device/start', { method: 'POST' });
+      const data = await res.json();
+      if (data.success) {
+        setCodexUserCode(data.userCode || '');
+        setCodexVerificationUrl(data.verificationUrl || '');
+        if (data.verificationUrl) openExternal(data.verificationUrl);
+      } else {
+        setCodexDeviceState('error');
+        setOpenaiError(data.error || 'Failed to start device-code login');
+      }
+    } catch (err: any) {
+      setCodexDeviceState('error');
+      setOpenaiError(err.message);
+    } finally {
+      setCodexDeviceStarting(false);
+    }
+  };
+
+  const handleOpenAIDeviceCancel = async () => {
+    try { await fetch('/api/auth/codex/device/cancel', { method: 'POST' }); } catch {}
+    setCodexDeviceState('idle');
+    setCodexUserCode('');
+    setCodexVerificationUrl('');
+  };
+
+  const handleCopyUserCode = async () => {
+    try {
+      await navigator.clipboard.writeText(codexUserCode);
+      setCodexCodeCopied(true);
+      setTimeout(() => setCodexCodeCopied(false), 1500);
+    } catch { /* clipboard denied */ }
+  };
+
+  // Poll device-code status while pending
+  useEffect(() => {
+    if (codexDeviceState !== 'pending' || !codexUserCode) return;
+    const interval = setInterval(async () => {
+      try {
+        const res = await fetch('/api/auth/codex/device/status');
+        const data = await res.json();
+        if (data.state === 'success') {
+          setCodexDeviceState('success');
+          setAuthState((s) => ({ ...s, openai: 'connected' }));
+        } else if (data.state === 'error') {
+          setCodexDeviceState('error');
+          setOpenaiError(data.error || 'Device-code login failed');
+        }
+      } catch {}
+    }, 2000);
+    return () => clearInterval(interval);
+  }, [codexDeviceState, codexUserCode]);
+
+  /* ── Auth handlers: OpenAI/Codex (paste-back flow — fallback) ── */
 
   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);
+        setCodexOauthStarted(true);
       } 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' });
+  const handleOpenAIConnect = async () => {
+    if (!codexCode.trim()) return;
+    setCodexExchanging(true);
+    setOpenaiError(undefined);
+    try {
+      const res = await fetch('/api/auth/codex/exchange', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ code: codexCode.trim() }),
+      });
+      const data = await res.json();
+      if (data.success) {
+        setAuthState((s) => ({ ...s, openai: 'connected' }));
+        setCodexCode('');
+      } else {
+        setOpenaiError(data.error || 'Code exchange failed');
+      }
+    } catch (err: any) {
+      setOpenaiError(err.message);
+    } finally {
+      setCodexExchanging(false);
+    }
+  };
+
+  const handleOpenAIPaste = async () => {
+    try {
+      const text = await navigator.clipboard.readText();
+      if (text) setCodexCode(text.trim());
+    } catch { /* clipboard denied */ }
+  };
+
+  const handleOpenAICheckAuth = async () => {
+    setCodexChecking(true);
+    setOpenaiError(undefined);
+    try {
+      const res = await fetch('/api/auth/codex/status');
+      const data = await res.json();
+      if (data.authenticated) {
+        setAuthState((s) => ({ ...s, openai: 'connected' }));
+      } else {
+        setOpenaiError('No active session found. Please authenticate first.');
+      }
+    } catch {} finally {
+      setCodexChecking(false);
+    }
   };
 
   /* ── Navigation ── */
@@ -2077,38 +2206,155 @@ export default function OnboardWizard({ onComplete, isInitialSetup = false, onSa
                           </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>
+                        {/* ── Device-code flow (default) ── */}
+                        {codexFlow === 'device' && codexDeviceState !== 'pending' && (
+                          <>
+                            <div className="space-y-1.5">
+                              {[
+                                'Click below — we\'ll open auth.openai.com/codex/device for you',
+                                'Sign in with your ChatGPT Plus or Pro account',
+                                'Type the one-time code shown here on that page',
+                              ].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>
-                          ))}
-                        </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>
+                            <button
+                              onClick={handleOpenAIDeviceStart}
+                              disabled={codexDeviceStarting}
+                              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-60"
+                            >
+                              {codexDeviceStarting ? (
+                                <><LoaderCircle className="h-3.5 w-3.5 animate-spin" />Requesting code...</>
+                              ) : (
+                                <>Sign in 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>
+                        {codexFlow === 'device' && codexDeviceState === 'pending' && codexUserCode && (
+                          <div className="space-y-3">
+                            <div className="bg-white/[0.03] border border-white/[0.06] rounded-xl p-4">
+                              <p className="text-[11px] text-white/40 mb-1">1. Open this URL in any browser</p>
+                              <button
+                                onClick={() => openExternal(codexVerificationUrl)}
+                                className="w-full text-left py-2 px-3 bg-white/[0.04] hover:bg-white/[0.07] rounded-lg text-[12px] font-mono text-white/80 flex items-center justify-between transition-colors"
+                              >
+                                <span className="truncate">{codexVerificationUrl}</span>
+                                <ExternalLink className="h-3.5 w-3.5 ml-2 opacity-60 shrink-0" />
+                              </button>
+
+                              <p className="text-[11px] text-white/40 mt-3 mb-1">2. Enter this code</p>
+                              <button
+                                onClick={handleCopyUserCode}
+                                className="w-full py-3 px-3 bg-white/[0.04] hover:bg-white/[0.07] rounded-lg text-center transition-colors flex items-center justify-center gap-3 group"
+                              >
+                                <span className="text-[20px] font-mono font-semibold text-white tracking-widest">{codexUserCode}</span>
+                                {codexCodeCopied ? (
+                                  <Check className="h-4 w-4 text-emerald-400" />
+                                ) : (
+                                  <Copy className="h-4 w-4 text-white/30 group-hover:text-white/60" />
+                                )}
+                              </button>
+
+                              <div className="flex items-center justify-center gap-2 mt-3 text-[11px] text-white/40">
+                                <LoaderCircle className="h-3 w-3 animate-spin" />
+                                Waiting for you to approve...
+                              </div>
+                            </div>
+
+                            <button
+                              onClick={handleOpenAIDeviceCancel}
+                              className="w-full py-1.5 text-white/25 text-[11px] hover:text-white/40 transition-colors"
+                            >
+                              Cancel
+                            </button>
+                          </div>
+                        )}
+
+                        {/* ── Paste-back flow (fallback) ── */}
+                        {codexFlow === 'paste' && (
+                          <>
+                            <div className="space-y-1.5">
+                              {[
+                                'Click below to open ChatGPT sign-in',
+                                'Sign in with your ChatGPT Plus or Pro account',
+                                'Your browser will say "site can\'t be reached" — that\'s expected. Copy the FULL URL from the address bar and paste it 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={handleOpenAIAuth}
+                              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"
+                            >
+                              {codexOauthStarted ? (
+                                <><ExternalLink className="h-3.5 w-3.5 opacity-60" />Open authentication page again</>
+                              ) : (
+                                <>Authenticate with ChatGPT<ArrowRight className="h-3.5 w-3.5 opacity-60" /></>
+                              )}
+                            </button>
+
+                            <div className="relative">
+                              <input
+                                type="text"
+                                value={codexCode}
+                                onChange={(e) => setCodexCode(e.target.value)}
+                                onKeyDown={(e) => e.key === 'Enter' && handleOpenAIConnect()}
+                                placeholder="Paste callback URL or code here..."
+                                className={inputSmCls + ' pr-10 font-mono'}
+                              />
+                              <button
+                                onClick={handleOpenAIPaste}
+                                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={handleOpenAIConnect}
+                              disabled={!codexCode.trim() || codexExchanging}
+                              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"
+                            >
+                              {codexExchanging ? (<><LoaderCircle className="h-3.5 w-3.5 animate-spin" />Verifying...</>) : 'Connect'}
+                            </button>
+                          </>
+                        )}
+
+                        {/* ── Flow toggle + already-authenticated ── */}
+                        {codexDeviceState !== 'pending' && (
+                          <div className="flex items-center justify-between pt-1">
+                            <button
+                              onClick={() => {
+                                setOpenaiError(undefined);
+                                setCodexFlow(codexFlow === 'device' ? 'paste' : 'device');
+                              }}
+                              className="text-white/25 text-[11px] hover:text-white/40 transition-colors"
+                            >
+                              {codexFlow === 'device' ? 'Use callback URL instead' : 'Use device code instead'}
+                            </button>
+                            <button
+                              onClick={handleOpenAICheckAuth}
+                              disabled={codexChecking}
+                              className="text-white/25 text-[11px] hover:text-white/40 transition-colors flex items-center gap-1.5 disabled:opacity-50"
+                            >
+                              {codexChecking ? (
+                                <LoaderCircle className="h-3 w-3 animate-spin" />
+                              ) : (
+                                <RefreshCw className="h-3 w-3" />
+                              )}
+                              {codexChecking ? 'Checking...' : 'I\'m already authenticated'}
+                            </button>
+                          </div>
                         )}
                       </>
                     )}