Lazy OAuth: show welcome screen first, user avatar in topbar

frontend/src/components/Layout/AppLayout.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useRef, useEffect } from 'react';
 import {
+  Avatar,
   Box,
   Drawer,
   Typography,
@@ -32,7 +33,7 @@ const DRAWER_WIDTH = 260;
 
 export default function AppLayout() {
   const { sessions, activeSessionId, deleteSession, updateSessionTitle } = useSessionStore();
-  const { isConnected, isProcessing, getMessages, addMessage, setProcessing, llmHealthError, setLlmHealthError } = useAgentStore();
+  const { isConnected, isProcessing, getMessages, addMessage, setProcessing, llmHealthError, setLlmHealthError, user } = useAgentStore();
   const { 
     isLeftSidebarOpen, 
     isRightPanelOpen, 
@@ -300,16 +301,39 @@ export default function AppLayout() {
             </Typography>
           </Box>
 
-          <IconButton
-            onClick={toggleTheme}
-            size="small"
-            sx={{
-              color: 'text.secondary',
-              '&:hover': { color: 'primary.main' },
-            }}
-          >
-            {themeMode === 'dark' ? <LightModeOutlinedIcon fontSize="small" /> : <DarkModeOutlinedIcon fontSize="small" />}
-          </IconButton>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+            <IconButton
+              onClick={toggleTheme}
+              size="small"
+              sx={{
+                color: 'text.secondary',
+                '&:hover': { color: 'primary.main' },
+              }}
+            >
+              {themeMode === 'dark' ? <LightModeOutlinedIcon fontSize="small" /> : <DarkModeOutlinedIcon fontSize="small" />}
+            </IconButton>
+
+            {user?.picture ? (
+              <Avatar
+                src={user.picture}
+                alt={user.username || 'User'}
+                sx={{ width: 28, height: 28, ml: 0.5 }}
+              />
+            ) : user?.username ? (
+              <Avatar
+                sx={{
+                  width: 28,
+                  height: 28,
+                  ml: 0.5,
+                  bgcolor: 'primary.main',
+                  fontSize: '0.75rem',
+                  fontWeight: 700,
+                }}
+              >
+                {user.username[0].toUpperCase()}
+              </Avatar>
+            ) : null}
+          </Box>
         </Box>
 
         {/* ── LLM Health Error Banner ────────────────────────────── */}

frontend/src/components/WelcomeScreen/WelcomeScreen.tsx

@@ -9,18 +9,26 @@ import {
 import { useSessionStore } from '@/store/sessionStore';
 import { useAgentStore } from '@/store/agentStore';
 import { apiFetch } from '@/utils/api';
+import { triggerLogin } from '@/hooks/useAuth';
 
 /** HF brand orange */
 const HF_ORANGE = '#FF9D00';
 
 export default function WelcomeScreen() {
   const { createSession } = useSessionStore();
-  const { setPlan, setPanelContent } = useAgentStore();
+  const { setPlan, setPanelContent, user } = useAgentStore();
   const [isCreating, setIsCreating] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
   const handleStart = useCallback(async () => {
     if (isCreating) return;
+
+    // If user is not authenticated, trigger OAuth login first
+    if (!user?.authenticated) {
+      triggerLogin();
+      return;
+    }
+
     setIsCreating(true);
     setError(null);
 
@@ -44,7 +52,7 @@ export default function WelcomeScreen() {
     } finally {
       setIsCreating(false);
     }
-  }, [isCreating, createSession, setPlan, setPanelContent]);
+  }, [isCreating, createSession, setPlan, setPanelContent, user]);
 
   return (
     <Box

frontend/src/hooks/useAuth.ts

@@ -1,17 +1,21 @@
 /**
- * Authentication hook — non-blocking.
+ * Authentication hook — non-blocking, lazy.
  *
- * The app renders immediately. This hook fires a background check to /auth/me
- * and updates the agent store with user info when it resolves.
- * If an API call later returns 401, apiFetch handles the redirect to /auth/login.
+ * On mount: checks if the user is already authenticated (cookie/dev mode).
+ * Does NOT redirect to login automatically — the welcome screen handles that.
  *
- * This avoids blocking the entire UI on an auth check that depends on backend
- * availability (which can be slow during session/MCP initialization).
+ * Exports `triggerLogin()` for components that need to start the OAuth flow
+ * (e.g. the "Start Session" button on the welcome screen).
  */
 
-import { useEffect } from 'react';
+import { useEffect, useCallback } from 'react';
 import { useAgentStore } from '@/store/agentStore';
 
+/** Redirect to the OAuth login page. */
+export function triggerLogin() {
+  window.location.href = '/auth/login';
+}
+
 export function useAuth() {
   const setUser = useAgentStore((s) => s.setUser);
 
@@ -32,16 +36,19 @@ export function useAuth() {
           }
         }
 
-        // Not authenticated — check if auth is required
+        // Not authenticated — check if auth is even enabled
         const statusRes = await fetch('/auth/status', { credentials: 'include' });
         const statusData = await statusRes.json();
-        if (statusData.auth_enabled) {
-          window.location.href = '/auth/login';
+        if (!statusData.auth_enabled) {
+          // Dev mode — set dev user so the app is usable
+          setUser({ authenticated: true, username: 'dev' });
           return;
         }
 
-        // Dev mode — set dev user
-        setUser({ authenticated: true, username: 'dev' });
+        // Auth is enabled but user is not logged in.
+        // Don't redirect — let the welcome screen show first.
+        // The user will be prompted to log in when they click "Start Session".
+        setUser(null);
       } catch {
         // Backend not ready — set dev user so the app is usable
         setUser({ authenticated: true, username: 'dev' });
@@ -50,4 +57,6 @@ export function useAuth() {
 
     checkAuth();
   }, [setUser]);
+
+  return { triggerLogin };
 }