Fix OAuth in iframe: open login in new tab, check token before API call

frontend/src/components/WelcomeScreen/WelcomeScreen.tsx

@@ -9,6 +9,7 @@ import {
 import { useSessionStore } from '@/store/sessionStore';
 import { useAgentStore } from '@/store/agentStore';
 import { apiFetch } from '@/utils/api';
+import { getStoredToken, triggerLogin } from '@/hooks/useAuth';
 
 /** HF brand orange */
 const HF_ORANGE = '#FF9D00';
@@ -21,17 +22,32 @@ export default function WelcomeScreen() {
 
   const handleStart = useCallback(async () => {
     if (isCreating) return;
+
+    // If no token stored, trigger OAuth login first
+    if (!getStoredToken()) {
+      try {
+        await triggerLogin();
+      } catch {
+        setError('Could not open login page. Please try again.');
+      }
+      return;
+    }
+
     setIsCreating(true);
     setError(null);
 
     try {
-      // apiFetch handles 401 → redirects to /auth/login automatically
       const response = await apiFetch('/api/session', { method: 'POST' });
       if (response.status === 503) {
         const data = await response.json();
         setError(data.detail || 'Server is at capacity. Please try again later.');
         return;
       }
+      if (response.status === 401) {
+        // Token expired — trigger re-login
+        await triggerLogin();
+        return;
+      }
       if (!response.ok) {
         setError('Failed to create session. Please try again.');
         return;
@@ -41,7 +57,7 @@ export default function WelcomeScreen() {
       setPlan([]);
       setPanelContent(null);
     } catch {
-      // apiFetch throws on 401 redirect — don't show error in that case
+      // triggerLogin throws if redirect happens — don't show error
     } finally {
       setIsCreating(false);
     }

frontend/src/hooks/useAuth.ts

@@ -30,12 +30,25 @@ export function clearStoredToken(): void {
   }
 }
 
-/** Redirect to HF OAuth login. */
+/** Redirect to HF OAuth login.
+ *  Uses window.open as fallback for iframe environments where
+ *  top-level navigation is blocked by sandbox restrictions. */
 export async function triggerLogin(): Promise<void> {
   const url = await oauthLoginUrl({
     scopes: 'openid profile read-repos write-repos manage-repos inference-api jobs',
   });
-  window.location.href = url;
+  // Try top-level navigation first; if we're in an iframe, open a new tab
+  try {
+    if (window.top !== window.self) {
+      // We're in an iframe — open in parent or new tab
+      window.open(url, '_blank');
+    } else {
+      window.location.href = url;
+    }
+  } catch {
+    // SecurityError from cross-origin iframe — open in new tab
+    window.open(url, '_blank');
+  }
 }
 
 /**