feat: update session cookie options and enhance authentication flow

- Changed SameSite attribute for session cookies from 'strict' to 'lax' to allow cross-origin fetches, improving compatibility with various client requests.
- Updated cookie clearing logic in the authentication route to use `res.cookie()` for better reliability in cross-origin environments.
- Refactored the login view to implement a state machine for managing authentication phases, enhancing clarity and maintainability.
- Introduced a new logged-out view to inform users of session expiration and provide options to log in or retry.
- Added account and security sections to the settings view, allowing users to manage their account and security preferences more effectively.

apps/server/src/lib/auth.ts

@@ -262,7 +262,7 @@ export function getSessionCookieOptions(): {
   return {
     httpOnly: true, // JavaScript cannot access this cookie
     secure: process.env.NODE_ENV === 'production', // HTTPS only in production
-    sameSite: 'strict', // Only sent for same-site requests (CSRF protection)
+    sameSite: 'lax', // Sent on same-site requests including cross-origin fetches
     maxAge: SESSION_MAX_AGE_MS,
     path: '/',
   };

apps/server/src/routes/auth/index.ts

@@ -229,12 +229,16 @@ export function createAuthRoutes(): Router {
       await invalidateSession(sessionToken);
     }
 
-    // Clear the cookie
+    // Clear the cookie by setting it to empty with immediate expiration
-    res.clearCookie(cookieName, {
+    // Using res.cookie() with maxAge: 0 is more reliable than clearCookie()
+    // in cross-origin development environments
+    res.cookie(cookieName, '', {
       httpOnly: true,
       secure: process.env.NODE_ENV === 'production',
-      sameSite: 'strict',
+      sameSite: 'lax',
       path: '/',
+      maxAge: 0,
+      expires: new Date(0),
     });
 
     res.json({

apps/ui/src/app.tsx

@@ -4,7 +4,6 @@ import { createLogger } from '@automaker/utils/logger';
 import { router } from './utils/router';
 import { SplashScreen } from './components/splash-screen';
 import { LoadingState } from './components/ui/loading-state';
-import { useSettingsMigration } from './hooks/use-settings-migration';
 import { useSettingsSync } from './hooks/use-settings-sync';
 import { useCursorStatusInit } from './hooks/use-cursor-status-init';
 import './styles/global.css';
@@ -34,13 +33,9 @@ export default function App() {
     }
   }, []);
 
-  // Run settings migration on startup (localStorage -> file storage)
+  // Settings are now loaded in __root.tsx after successful session verification
-  // IMPORTANT: Wait for this to complete before rendering the router
+  // This ensures a unified flow: verify session → load settings → redirect
-  // so that currentProject and other settings are available
+  // We no longer block router rendering here - settings loading happens in __root.tsx
-  const migrationState = useSettingsMigration();
-  if (migrationState.migrated) {
-    logger.info('Settings migrated to file storage');
-  }
 
   // Sync settings changes back to server (API-first persistence)
   const settingsSyncState = useSettingsSync();
@@ -56,16 +51,6 @@ export default function App() {
     setShowSplash(false);
   }, []);
 
-  // Wait for settings migration to complete before rendering the router
-  // This ensures currentProject and other settings are available
-  if (!migrationState.checked) {
-    return (
-      <div className="flex h-screen items-center justify-center bg-background">
-        <LoadingState message="Loading settings..." />
-      </div>
-    );
-  }
-
   return (
     <>
       <RouterProvider router={router} />

apps/ui/src/components/views/logged-out-view.tsx

@@ -0,0 +1,33 @@
+import { useNavigate } from '@tanstack/react-router';
+import { Button } from '@/components/ui/button';
+import { LogOut, RefreshCcw } from 'lucide-react';
+
+export function LoggedOutView() {
+  const navigate = useNavigate();
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-background p-4">
+      <div className="w-full max-w-md space-y-8">
+        <div className="text-center">
+          <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-primary/10">
+            <LogOut className="h-8 w-8 text-primary" />
+          </div>
+          <h1 className="mt-6 text-2xl font-bold tracking-tight">You’ve been logged out</h1>
+          <p className="mt-2 text-sm text-muted-foreground">
+            Your session expired, or the server restarted. Please log in again.
+          </p>
+        </div>
+
+        <div className="space-y-3">
+          <Button className="w-full" onClick={() => navigate({ to: '/login' })}>
+            Go to login
+          </Button>
+          <Button className="w-full" variant="secondary" onClick={() => window.location.reload()}>
+            <RefreshCcw className="mr-2 h-4 w-4" />
+            Retry
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/ui/src/components/views/login-view.tsx

@@ -1,110 +1,322 @@
 /**
  * Login View - Web mode authentication
  *
- * Prompts user to enter the API key shown in server console.
+ * Uses a state machine for clear, maintainable flow:
- * On successful login, sets an HTTP-only session cookie.
  *
- * On mount, verifies if an existing session is valid using exponential backoff.
+ * States:
- * This handles cases where server live reloads kick users back to login
+ *   checking_server → server_error (after 5 retries)
- * even though their session is still valid.
+ *   checking_server → awaiting_login (401/unauthenticated)
+ *   checking_server → checking_setup (authenticated)
+ *   awaiting_login → logging_in → login_error | checking_setup
+ *   checking_setup → redirecting
  */
 
-import { useState, useEffect, useRef } from 'react';
+import { useReducer, useEffect, useRef } from 'react';
 import { useNavigate } from '@tanstack/react-router';
-import { login, verifySession } from '@/lib/http-api-client';
+import { login, getHttpApiClient, getServerUrlSync } from '@/lib/http-api-client';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
-import { KeyRound, AlertCircle, Loader2 } from 'lucide-react';
+import { KeyRound, AlertCircle, Loader2, RefreshCw, ServerCrash } from 'lucide-react';
 import { useAuthStore } from '@/store/auth-store';
 import { useSetupStore } from '@/store/setup-store';
 
+// =============================================================================
+// State Machine Types
+// =============================================================================
+
+type State =
+  | { phase: 'checking_server'; attempt: number }
+  | { phase: 'server_error'; message: string }
+  | { phase: 'awaiting_login'; apiKey: string; error: string | null }
+  | { phase: 'logging_in'; apiKey: string }
+  | { phase: 'checking_setup' }
+  | { phase: 'redirecting'; to: string };
+
+type Action =
+  | { type: 'SERVER_CHECK_RETRY'; attempt: number }
+  | { type: 'SERVER_ERROR'; message: string }
+  | { type: 'AUTH_REQUIRED' }
+  | { type: 'AUTH_VALID' }
+  | { type: 'UPDATE_API_KEY'; value: string }
+  | { type: 'SUBMIT_LOGIN' }
+  | { type: 'LOGIN_ERROR'; message: string }
+  | { type: 'REDIRECT'; to: string }
+  | { type: 'RETRY_SERVER_CHECK' };
+
+const initialState: State = { phase: 'checking_server', attempt: 1 };
+
+// =============================================================================
+// State Machine Reducer
+// =============================================================================
+
+function reducer(state: State, action: Action): State {
+  switch (action.type) {
+    case 'SERVER_CHECK_RETRY':
+      return { phase: 'checking_server', attempt: action.attempt };
+
+    case 'SERVER_ERROR':
+      return { phase: 'server_error', message: action.message };
+
+    case 'AUTH_REQUIRED':
+      return { phase: 'awaiting_login', apiKey: '', error: null };
+
+    case 'AUTH_VALID':
+      return { phase: 'checking_setup' };
+
+    case 'UPDATE_API_KEY':
+      if (state.phase !== 'awaiting_login') return state;
+      return { ...state, apiKey: action.value };
+
+    case 'SUBMIT_LOGIN':
+      if (state.phase !== 'awaiting_login') return state;
+      return { phase: 'logging_in', apiKey: state.apiKey };
+
+    case 'LOGIN_ERROR':
+      if (state.phase !== 'logging_in') return state;
+      return { phase: 'awaiting_login', apiKey: state.apiKey, error: action.message };
+
+    case 'REDIRECT':
+      return { phase: 'redirecting', to: action.to };
+
+    case 'RETRY_SERVER_CHECK':
+      return { phase: 'checking_server', attempt: 1 };
+
+    default:
+      return state;
+  }
+}
+
+// =============================================================================
+// Constants
+// =============================================================================
+
+const MAX_RETRIES = 5;
+const BACKOFF_BASE_MS = 400;
+
+// =============================================================================
+// Imperative Flow Logic (runs once on mount)
+// =============================================================================
+
 /**
- * Delay helper for exponential backoff
+ * Check auth status without triggering side effects.
+ * Unlike the httpClient methods, this does NOT call handleUnauthorized()
+ * which would navigate us away to /logged-out.
+ *
+ * Relies on HTTP-only session cookie being sent via credentials: 'include'.
+ *
+ * Returns: { authenticated: true } or { authenticated: false }
+ * Throws: on network errors (for retry logic)
  */
-const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+async function checkAuthStatusSafe(): Promise<{ authenticated: boolean }> {
+  const serverUrl = getServerUrlSync();
+
+  const response = await fetch(`${serverUrl}/api/auth/status`, {
+    credentials: 'include', // Send HTTP-only session cookie
+    signal: AbortSignal.timeout(5000),
+  });
+
+  // Any response means server is reachable
+  const data = await response.json();
+  return { authenticated: data.authenticated === true };
+}
+
+/**
+ * Check if server is reachable and if we have a valid session.
+ */
+async function checkServerAndSession(
+  dispatch: React.Dispatch<Action>,
+  setAuthState: (state: { isAuthenticated: boolean; authChecked: boolean }) => void
+): Promise<void> {
+  for (let attempt = 1; attempt <= MAX_RETRIES; attempt++) {
+    dispatch({ type: 'SERVER_CHECK_RETRY', attempt });
+
+    try {
+      const result = await checkAuthStatusSafe();
+
+      if (result.authenticated) {
+        // Server is reachable and we're authenticated
+        setAuthState({ isAuthenticated: true, authChecked: true });
+        dispatch({ type: 'AUTH_VALID' });
+        return;
+      }
+
+      // Server is reachable but we need to login
+      dispatch({ type: 'AUTH_REQUIRED' });
+      return;
+    } catch (error: unknown) {
+      // Network error - server is not reachable
+      console.debug(`Server check attempt ${attempt}/${MAX_RETRIES} failed:`, error);
+
+      if (attempt === MAX_RETRIES) {
+        dispatch({
+          type: 'SERVER_ERROR',
+          message: 'Unable to connect to server. Please check that the server is running.',
+        });
+        return;
+      }
+
+      // Exponential backoff before retry
+      const backoffMs = BACKOFF_BASE_MS * Math.pow(2, attempt - 1);
+      await new Promise((resolve) => setTimeout(resolve, backoffMs));
+    }
+  }
+}
+
+async function checkSetupStatus(dispatch: React.Dispatch<Action>): Promise<void> {
+  const httpClient = getHttpApiClient();
+
+  try {
+    const result = await httpClient.settings.getGlobal();
+
+    if (result.success && result.settings) {
+      // Check the setupComplete field from settings
+      // This is set to true when user completes the setup wizard
+      const setupComplete = (result.settings as { setupComplete?: boolean }).setupComplete === true;
+
+      // IMPORTANT: Update the Zustand store BEFORE redirecting
+      // Otherwise __root.tsx routing effect will override our redirect
+      // because it reads setupComplete from the store (which defaults to false)
+      useSetupStore.getState().setSetupComplete(setupComplete);
+
+      dispatch({ type: 'REDIRECT', to: setupComplete ? '/' : '/setup' });
+    } else {
+      // No settings yet = first run = need setup
+      useSetupStore.getState().setSetupComplete(false);
+      dispatch({ type: 'REDIRECT', to: '/setup' });
+    }
+  } catch {
+    // If we can't get settings, go to setup to be safe
+    useSetupStore.getState().setSetupComplete(false);
+    dispatch({ type: 'REDIRECT', to: '/setup' });
+  }
+}
+
+async function performLogin(
+  apiKey: string,
+  dispatch: React.Dispatch<Action>,
+  setAuthState: (state: { isAuthenticated: boolean; authChecked: boolean }) => void
+): Promise<void> {
+  try {
+    const result = await login(apiKey.trim());
+
+    if (result.success) {
+      setAuthState({ isAuthenticated: true, authChecked: true });
+      dispatch({ type: 'AUTH_VALID' });
+    } else {
+      dispatch({ type: 'LOGIN_ERROR', message: result.error || 'Invalid API key' });
+    }
+  } catch {
+    dispatch({ type: 'LOGIN_ERROR', message: 'Failed to connect to server' });
+  }
+}
+
+// =============================================================================
+// Component
+// =============================================================================
 
 export function LoginView() {
   const navigate = useNavigate();
   const setAuthState = useAuthStore((s) => s.setAuthState);
-  const setupComplete = useSetupStore((s) => s.setupComplete);
+  const [state, dispatch] = useReducer(reducer, initialState);
-  const [apiKey, setApiKey] = useState('');
+  const initialCheckDone = useRef(false);
-  const [error, setError] = useState<string | null>(null);
-  const [isLoading, setIsLoading] = useState(false);
-  const [isCheckingSession, setIsCheckingSession] = useState(true);
-  const sessionCheckRef = useRef(false);
 
-  // Check for existing valid session on mount with exponential backoff
+  // Run initial server/session check once on mount
   useEffect(() => {
-    // Prevent duplicate checks in strict mode
+    if (initialCheckDone.current) return;
-    if (sessionCheckRef.current) return;
+    initialCheckDone.current = true;
-    sessionCheckRef.current = true;
 
-    const checkExistingSession = async () => {
+    checkServerAndSession(dispatch, setAuthState);
-      const maxRetries = 5;
+  }, [setAuthState]);
-      const baseDelay = 500; // Start with 500ms
 
-      for (let attempt = 0; attempt < maxRetries; attempt++) {
+  // When we enter checking_setup phase, check setup status
-        try {
+  useEffect(() => {
-          const isValid = await verifySession();
+    if (state.phase === 'checking_setup') {
-          if (isValid) {
+      checkSetupStatus(dispatch);
-            // Session is valid, redirect to the main app
-            setAuthState({ isAuthenticated: true, authChecked: true });
-            navigate({ to: setupComplete ? '/' : '/setup' });
-            return;
-          }
-          // Session is invalid, no need to retry - show login form
-          break;
-        } catch {
-          // Network error or server not ready, retry with exponential backoff
-          if (attempt < maxRetries - 1) {
-            const waitTime = baseDelay * Math.pow(2, attempt); // 500, 1000, 2000, 4000, 8000ms
-            await delay(waitTime);
-          }
-        }
-      }
-
-      // Session check complete (either invalid or all retries exhausted)
-      setIsCheckingSession(false);
-    };
-
-    checkExistingSession();
-  }, [navigate, setAuthState, setupComplete]);
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setError(null);
-    setIsLoading(true);
-
-    try {
-      const result = await login(apiKey.trim());
-      if (result.success) {
-        // Mark as authenticated for this session (cookie-based auth)
-        setAuthState({ isAuthenticated: true, authChecked: true });
-
-        // After auth, determine if setup is needed or go to app
-        navigate({ to: setupComplete ? '/' : '/setup' });
-      } else {
-        setError(result.error || 'Invalid API key');
-      }
-    } catch (err) {
-      setError('Failed to connect to server');
-    } finally {
-      setIsLoading(false);
     }
+  }, [state.phase]);
+
+  // When we enter redirecting phase, navigate
+  useEffect(() => {
+    if (state.phase === 'redirecting') {
+      navigate({ to: state.to });
+    }
+  }, [state.phase, state.phase === 'redirecting' ? state.to : null, navigate]);
+
+  // Handle login form submission
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (state.phase !== 'awaiting_login' || !state.apiKey.trim()) return;
+
+    dispatch({ type: 'SUBMIT_LOGIN' });
+    performLogin(state.apiKey, dispatch, setAuthState);
   };
 
-  // Show loading state while checking existing session
+  // Handle retry button for server errors
-  if (isCheckingSession) {
+  const handleRetry = () => {
+    initialCheckDone.current = false;
+    dispatch({ type: 'RETRY_SERVER_CHECK' });
+    checkServerAndSession(dispatch, setAuthState);
+  };
+
+  // =============================================================================
+  // Render based on current state
+  // =============================================================================
+
+  // Checking server connectivity
+  if (state.phase === 'checking_server') {
     return (
       <div className="flex min-h-screen items-center justify-center bg-background p-4">
         <div className="text-center space-y-4">
           <Loader2 className="h-8 w-8 animate-spin mx-auto text-primary" />
-          <p className="text-sm text-muted-foreground">Checking session...</p>
+          <p className="text-sm text-muted-foreground">
+            Connecting to server
+            {state.attempt > 1 ? ` (attempt ${state.attempt}/${MAX_RETRIES})` : '...'}
+          </p>
         </div>
       </div>
     );
   }
 
+  // Server unreachable after retries
+  if (state.phase === 'server_error') {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-background p-4">
+        <div className="w-full max-w-md space-y-6 text-center">
+          <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-destructive/10">
+            <ServerCrash className="h-8 w-8 text-destructive" />
+          </div>
+          <div className="space-y-2">
+            <h1 className="text-2xl font-bold tracking-tight">Server Unavailable</h1>
+            <p className="text-sm text-muted-foreground">{state.message}</p>
+          </div>
+          <Button onClick={handleRetry} variant="outline" className="gap-2">
+            <RefreshCw className="h-4 w-4" />
+            Retry Connection
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  // Checking setup status after auth
+  if (state.phase === 'checking_setup' || state.phase === 'redirecting') {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-background p-4">
+        <div className="text-center space-y-4">
+          <Loader2 className="h-8 w-8 animate-spin mx-auto text-primary" />
+          <p className="text-sm text-muted-foreground">
+            {state.phase === 'checking_setup' ? 'Loading settings...' : 'Redirecting...'}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  // Login form (awaiting_login or logging_in)
+  const isLoggingIn = state.phase === 'logging_in';
+  const apiKey = state.phase === 'awaiting_login' ? state.apiKey : state.apiKey;
+  const error = state.phase === 'awaiting_login' ? state.error : null;
+
   return (
     <div className="flex min-h-screen items-center justify-center bg-background p-4">
       <div className="w-full max-w-md space-y-8">
@@ -130,8 +342,8 @@ export function LoginView() {
               type="password"
               placeholder="Enter API key..."
               value={apiKey}
-              onChange={(e) => setApiKey(e.target.value)}
+              onChange={(e) => dispatch({ type: 'UPDATE_API_KEY', value: e.target.value })}
-              disabled={isLoading}
+              disabled={isLoggingIn}
               autoFocus
               className="font-mono"
               data-testid="login-api-key-input"
@@ -148,10 +360,10 @@ export function LoginView() {
           <Button
             type="submit"
             className="w-full"
-            disabled={isLoading || !apiKey.trim()}
+            disabled={isLoggingIn || !apiKey.trim()}
             data-testid="login-submit-button"
           >
-            {isLoading ? (
+            {isLoggingIn ? (
               <>
                 <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                 Authenticating...

apps/ui/src/components/views/settings-view.tsx

@@ -16,6 +16,8 @@ import { AudioSection } from './settings-view/audio/audio-section';
 import { KeyboardShortcutsSection } from './settings-view/keyboard-shortcuts/keyboard-shortcuts-section';
 import { FeatureDefaultsSection } from './settings-view/feature-defaults/feature-defaults-section';
 import { DangerZoneSection } from './settings-view/danger-zone/danger-zone-section';
+import { AccountSection } from './settings-view/account';
+import { SecuritySection } from './settings-view/security';
 import { ProviderTabs } from './settings-view/providers';
 import { MCPServersSection } from './settings-view/mcp-servers';
 import { PromptCustomizationSection } from './settings-view/prompts';
@@ -146,13 +148,20 @@ export function SettingsView() {
             onDefaultAIProfileIdChange={setDefaultAIProfileId}
           />
         );
+      case 'account':
+        return <AccountSection />;
+      case 'security':
+        return (
+          <SecuritySection
+            skipSandboxWarning={skipSandboxWarning}
+            onSkipSandboxWarningChange={setSkipSandboxWarning}
+          />
+        );
       case 'danger':
         return (
           <DangerZoneSection
             project={settingsProject}
             onDeleteClick={() => setShowDeleteDialog(true)}
-            skipSandboxWarning={skipSandboxWarning}
-            onResetSandboxWarning={() => setSkipSandboxWarning(false)}
           />
         );
       default:

apps/ui/src/components/views/settings-view/account/account-section.tsx

@@ -0,0 +1,77 @@
+import { useState } from 'react';
+import { useNavigate } from '@tanstack/react-router';
+import { Button } from '@/components/ui/button';
+import { LogOut, User } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { logout } from '@/lib/http-api-client';
+import { useAuthStore } from '@/store/auth-store';
+
+export function AccountSection() {
+  const navigate = useNavigate();
+  const [isLoggingOut, setIsLoggingOut] = useState(false);
+
+  const handleLogout = async () => {
+    setIsLoggingOut(true);
+    try {
+      await logout();
+      // Reset auth state
+      useAuthStore.getState().resetAuth();
+      // Navigate to logged out page
+      navigate({ to: '/logged-out' });
+    } catch (error) {
+      console.error('Logout failed:', error);
+      setIsLoggingOut(false);
+    }
+  };
+
+  return (
+    <div
+      className={cn(
+        'rounded-2xl overflow-hidden',
+        'border border-border/50',
+        'bg-gradient-to-br from-card/80 via-card/70 to-card/80 backdrop-blur-xl',
+        'shadow-sm'
+      )}
+    >
+      <div className="p-6 border-b border-border/30 bg-gradient-to-r from-primary/5 via-transparent to-transparent">
+        <div className="flex items-center gap-3 mb-2">
+          <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-primary/20 to-primary/10 flex items-center justify-center border border-primary/20">
+            <User className="w-5 h-5 text-primary" />
+          </div>
+          <h2 className="text-lg font-semibold text-foreground tracking-tight">Account</h2>
+        </div>
+        <p className="text-sm text-muted-foreground/80 ml-12">Manage your session and account.</p>
+      </div>
+      <div className="p-6 space-y-4">
+        {/* Logout */}
+        <div className="flex items-center justify-between gap-4 p-4 rounded-xl bg-muted/30 border border-border/30">
+          <div className="flex items-center gap-3.5 min-w-0">
+            <div className="w-11 h-11 rounded-xl bg-gradient-to-br from-muted/50 to-muted/30 border border-border/30 flex items-center justify-center shrink-0">
+              <LogOut className="w-5 h-5 text-muted-foreground" />
+            </div>
+            <div className="min-w-0">
+              <p className="font-medium text-foreground">Log Out</p>
+              <p className="text-xs text-muted-foreground/70 mt-0.5">
+                End your current session and return to the login screen
+              </p>
+            </div>
+          </div>
+          <Button
+            variant="outline"
+            onClick={handleLogout}
+            disabled={isLoggingOut}
+            data-testid="logout-button"
+            className={cn(
+              'shrink-0 gap-2',
+              'transition-all duration-200 ease-out',
+              'hover:scale-[1.02] active:scale-[0.98]'
+            )}
+          >
+            <LogOut className="w-4 h-4" />
+            {isLoggingOut ? 'Logging out...' : 'Log Out'}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/ui/src/components/views/settings-view/account/index.ts

@@ -0,0 +1 @@
+export { AccountSection } from './account-section';

apps/ui/src/components/views/settings-view/components/settings-navigation.tsx

@@ -1,6 +1,7 @@
 import { cn } from '@/lib/utils';
 import type { Project } from '@/lib/electron';
 import type { NavigationItem } from '../config/navigation';
+import { GLOBAL_NAV_ITEMS, PROJECT_NAV_ITEMS } from '../config/navigation';
 import type { SettingsViewId } from '../hooks/use-settings-view';
 
 interface SettingsNavigationProps {
@@ -10,8 +11,53 @@ interface SettingsNavigationProps {
   onNavigate: (sectionId: SettingsViewId) => void;
 }
 
+function NavButton({
+  item,
+  isActive,
+  onNavigate,
+}: {
+  item: NavigationItem;
+  isActive: boolean;
+  onNavigate: (sectionId: SettingsViewId) => void;
+}) {
+  const Icon = item.icon;
+  return (
+    <button
+      key={item.id}
+      onClick={() => onNavigate(item.id)}
+      className={cn(
+        'group w-full flex items-center gap-2.5 px-3 py-2.5 rounded-xl text-sm font-medium transition-all duration-200 ease-out text-left relative overflow-hidden',
+        isActive
+          ? [
+              'bg-gradient-to-r from-brand-500/15 via-brand-500/10 to-brand-600/5',
+              'text-foreground',
+              'border border-brand-500/25',
+              'shadow-sm shadow-brand-500/5',
+            ]
+          : [
+              'text-muted-foreground hover:text-foreground',
+              'hover:bg-accent/50',
+              'border border-transparent hover:border-border/40',
+            ],
+        'hover:scale-[1.01] active:scale-[0.98]'
+      )}
+    >
+      {/* Active indicator bar */}
+      {isActive && (
+        <div className="absolute inset-y-0 left-0 w-0.5 bg-gradient-to-b from-brand-400 via-brand-500 to-brand-600 rounded-r-full" />
+      )}
+      <Icon
+        className={cn(
+          'w-4 h-4 shrink-0 transition-all duration-200',
+          isActive ? 'text-brand-500' : 'group-hover:text-brand-400 group-hover:scale-110'
+        )}
+      />
+      <span className="truncate">{item.label}</span>
+    </button>
+  );
+}
+
 export function SettingsNavigation({
-  navItems,
   activeSection,
   currentProject,
   onNavigate,
@@ -19,52 +65,53 @@ export function SettingsNavigation({
   return (
     <nav
       className={cn(
-        'hidden lg:block w-52 shrink-0',
+        'hidden lg:block w-52 shrink-0 overflow-y-auto',
         'border-r border-border/50',
         'bg-gradient-to-b from-card/80 via-card/60 to-card/40 backdrop-blur-xl'
       )}
     >
-      <div className="sticky top-0 p-4 space-y-1.5">
+      <div className="sticky top-0 p-4 space-y-1">
-        {navItems
+        {/* Global Settings Label */}
-          .filter((item) => item.id !== 'danger' || currentProject)
+        <div className="px-3 py-2 text-xs font-semibold text-muted-foreground/70 uppercase tracking-wider">
-          .map((item) => {
+          Global Settings
-            const Icon = item.icon;
+        </div>
-            const isActive = activeSection === item.id;
+
-            return (
+        {/* Global Settings Items */}
-              <button
+        <div className="space-y-1">
-                key={item.id}
+          {GLOBAL_NAV_ITEMS.map((item) => (
-                onClick={() => onNavigate(item.id)}
+            <NavButton
-                className={cn(
+              key={item.id}
-                  'group w-full flex items-center gap-2.5 px-3 py-2.5 rounded-xl text-sm font-medium transition-all duration-200 ease-out text-left relative overflow-hidden',
+              item={item}
-                  isActive
+              isActive={activeSection === item.id}
-                    ? [
+              onNavigate={onNavigate}
-                        'bg-gradient-to-r from-brand-500/15 via-brand-500/10 to-brand-600/5',
+            />
-                        'text-foreground',
+          ))}
-                        'border border-brand-500/25',
+        </div>
-                        'shadow-sm shadow-brand-500/5',
+
-                      ]
+        {/* Project Settings - only show when a project is selected */}
-                    : [
+        {currentProject && (
-                        'text-muted-foreground hover:text-foreground',
+          <>
-                        'hover:bg-accent/50',
+            {/* Divider */}
-                        'border border-transparent hover:border-border/40',
+            <div className="my-4 border-t border-border/50" />
-                      ],
+
-                  'hover:scale-[1.01] active:scale-[0.98]'
+            {/* Project Settings Label */}
-                )}
+            <div className="px-3 py-2 text-xs font-semibold text-muted-foreground/70 uppercase tracking-wider">
-              >
+              Project Settings
-                {/* Active indicator bar */}
+            </div>
-                {isActive && (
+
-                  <div className="absolute inset-y-0 left-0 w-0.5 bg-gradient-to-b from-brand-400 via-brand-500 to-brand-600 rounded-r-full" />
+            {/* Project Settings Items */}
-                )}
+            <div className="space-y-1">
-                <Icon
+              {PROJECT_NAV_ITEMS.map((item) => (
-                  className={cn(
+                <NavButton
-                    'w-4 h-4 shrink-0 transition-all duration-200',
+                  key={item.id}
-                    isActive ? 'text-brand-500' : 'group-hover:text-brand-400 group-hover:scale-110'
+                  item={item}
-                  )}
+                  isActive={activeSection === item.id}
+                  onNavigate={onNavigate}
                 />
-                <span className="truncate">{item.label}</span>
+              ))}
-              </button>
+            </div>
-            );
+          </>
-          })}
+        )}
       </div>
     </nav>
   );

apps/ui/src/components/views/settings-view/config/navigation.ts

@@ -11,6 +11,8 @@ import {
   Workflow,
   Plug,
   MessageSquareText,
+  User,
+  Shield,
 } from 'lucide-react';
 import type { SettingsViewId } from '../hooks/use-settings-view';
 
@@ -20,8 +22,13 @@ export interface NavigationItem {
   icon: LucideIcon;
 }
 
-// Navigation items for the settings side panel
+export interface NavigationGroup {
-export const NAV_ITEMS: NavigationItem[] = [
+  label: string;
+  items: NavigationItem[];
+}
+
+// Global settings - always visible
+export const GLOBAL_NAV_ITEMS: NavigationItem[] = [
   { id: 'api-keys', label: 'API Keys', icon: Key },
   { id: 'providers', label: 'AI Providers', icon: Bot },
   { id: 'mcp-servers', label: 'MCP Servers', icon: Plug },
@@ -32,5 +39,14 @@ export const NAV_ITEMS: NavigationItem[] = [
   { id: 'keyboard', label: 'Keyboard Shortcuts', icon: Settings2 },
   { id: 'audio', label: 'Audio', icon: Volume2 },
   { id: 'defaults', label: 'Feature Defaults', icon: FlaskConical },
+  { id: 'account', label: 'Account', icon: User },
+  { id: 'security', label: 'Security', icon: Shield },
+];
+
+// Project-specific settings - only visible when a project is selected
+export const PROJECT_NAV_ITEMS: NavigationItem[] = [
   { id: 'danger', label: 'Danger Zone', icon: Trash2 },
 ];
+
+// Legacy export for backwards compatibility
+export const NAV_ITEMS: NavigationItem[] = [...GLOBAL_NAV_ITEMS, ...PROJECT_NAV_ITEMS];

apps/ui/src/components/views/settings-view/danger-zone/danger-zone-section.tsx

@@ -1,21 +1,14 @@
 import { Button } from '@/components/ui/button';
-import { Trash2, Folder, AlertTriangle, Shield, RotateCcw } from 'lucide-react';
+import { Trash2, Folder, AlertTriangle } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import type { Project } from '../shared/types';
 
 interface DangerZoneSectionProps {
   project: Project | null;
   onDeleteClick: () => void;
-  skipSandboxWarning: boolean;
-  onResetSandboxWarning: () => void;
 }
 
-export function DangerZoneSection({
+export function DangerZoneSection({ project, onDeleteClick }: DangerZoneSectionProps) {
-  project,
-  onDeleteClick,
-  skipSandboxWarning,
-  onResetSandboxWarning,
-}: DangerZoneSectionProps) {
   return (
     <div
       className={cn(
@@ -32,43 +25,11 @@ export function DangerZoneSection({
           </div>
           <h2 className="text-lg font-semibold text-foreground tracking-tight">Danger Zone</h2>
         </div>
-        <p className="text-sm text-muted-foreground/80 ml-12">
+        <p className="text-sm text-muted-foreground/80 ml-12">Destructive project actions.</p>
-          Destructive actions and reset options.
-        </p>
       </div>
       <div className="p-6 space-y-4">
-        {/* Sandbox Warning Reset */}
-        {skipSandboxWarning && (
-          <div className="flex items-center justify-between gap-4 p-4 rounded-xl bg-destructive/5 border border-destructive/10">
-            <div className="flex items-center gap-3.5 min-w-0">
-              <div className="w-11 h-11 rounded-xl bg-gradient-to-br from-destructive/15 to-destructive/10 border border-destructive/20 flex items-center justify-center shrink-0">
-                <Shield className="w-5 h-5 text-destructive" />
-              </div>
-              <div className="min-w-0">
-                <p className="font-medium text-foreground">Sandbox Warning Disabled</p>
-                <p className="text-xs text-muted-foreground/70 mt-0.5">
-                  The sandbox environment warning is hidden on startup
-                </p>
-              </div>
-            </div>
-            <Button
-              variant="outline"
-              onClick={onResetSandboxWarning}
-              data-testid="reset-sandbox-warning-button"
-              className={cn(
-                'shrink-0 gap-2',
-                'transition-all duration-200 ease-out',
-                'hover:scale-[1.02] active:scale-[0.98]'
-              )}
-            >
-              <RotateCcw className="w-4 h-4" />
-              Reset
-            </Button>
-          </div>
-        )}
-
         {/* Project Delete */}
-        {project && (
+        {project ? (
           <div className="flex items-center justify-between gap-4 p-4 rounded-xl bg-destructive/5 border border-destructive/10">
             <div className="flex items-center gap-3.5 min-w-0">
               <div className="w-11 h-11 rounded-xl bg-gradient-to-br from-brand-500/15 to-brand-600/10 border border-brand-500/20 flex items-center justify-center shrink-0">
@@ -94,13 +55,8 @@ export function DangerZoneSection({
               Delete Project
             </Button>
           </div>
-        )}
+        ) : (
-
+          <p className="text-sm text-muted-foreground/60 text-center py-4">No project selected.</p>
-        {/* Empty state when nothing to show */}
-        {!skipSandboxWarning && !project && (
-          <p className="text-sm text-muted-foreground/60 text-center py-4">
-            No danger zone actions available.
-          </p>
         )}
       </div>
     </div>

apps/ui/src/components/views/settings-view/hooks/use-settings-view.ts

@@ -12,6 +12,8 @@ export type SettingsViewId =
   | 'keyboard'
   | 'audio'
   | 'defaults'
+  | 'account'
+  | 'security'
   | 'danger';
 
 interface UseSettingsViewOptions {

apps/ui/src/components/views/settings-view/security/index.ts

@@ -0,0 +1 @@
+export { SecuritySection } from './security-section';

apps/ui/src/components/views/settings-view/security/security-section.tsx

@@ -0,0 +1,71 @@
+import { Shield, AlertTriangle } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Switch } from '@/components/ui/switch';
+import { Label } from '@/components/ui/label';
+
+interface SecuritySectionProps {
+  skipSandboxWarning: boolean;
+  onSkipSandboxWarningChange: (skip: boolean) => void;
+}
+
+export function SecuritySection({
+  skipSandboxWarning,
+  onSkipSandboxWarningChange,
+}: SecuritySectionProps) {
+  return (
+    <div
+      className={cn(
+        'rounded-2xl overflow-hidden',
+        'border border-border/50',
+        'bg-gradient-to-br from-card/80 via-card/70 to-card/80 backdrop-blur-xl',
+        'shadow-sm'
+      )}
+    >
+      <div className="p-6 border-b border-border/30 bg-gradient-to-r from-primary/5 via-transparent to-transparent">
+        <div className="flex items-center gap-3 mb-2">
+          <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-primary/20 to-primary/10 flex items-center justify-center border border-primary/20">
+            <Shield className="w-5 h-5 text-primary" />
+          </div>
+          <h2 className="text-lg font-semibold text-foreground tracking-tight">Security</h2>
+        </div>
+        <p className="text-sm text-muted-foreground/80 ml-12">
+          Configure security warnings and protections.
+        </p>
+      </div>
+      <div className="p-6 space-y-4">
+        {/* Sandbox Warning Toggle */}
+        <div className="flex items-center justify-between gap-4 p-4 rounded-xl bg-muted/30 border border-border/30">
+          <div className="flex items-center gap-3.5 min-w-0">
+            <div className="w-11 h-11 rounded-xl bg-gradient-to-br from-amber-500/15 to-amber-600/10 border border-amber-500/20 flex items-center justify-center shrink-0">
+              <AlertTriangle className="w-5 h-5 text-amber-500" />
+            </div>
+            <div className="min-w-0 flex-1">
+              <Label
+                htmlFor="sandbox-warning-toggle"
+                className="font-medium text-foreground cursor-pointer"
+              >
+                Show Sandbox Warning on Startup
+              </Label>
+              <p className="text-xs text-muted-foreground/70 mt-0.5">
+                Display a security warning when not running in a sandboxed environment
+              </p>
+            </div>
+          </div>
+          <Switch
+            id="sandbox-warning-toggle"
+            checked={!skipSandboxWarning}
+            onCheckedChange={(checked) => onSkipSandboxWarningChange(!checked)}
+            data-testid="sandbox-warning-toggle"
+          />
+        </div>
+
+        {/* Info text */}
+        <p className="text-xs text-muted-foreground/60 px-4">
+          When enabled, you&apos;ll see a warning on app startup if you&apos;re not running in a
+          containerized environment (like Docker). This helps remind you to use proper isolation
+          when running AI agents.
+        </p>
+      </div>
+    </div>
+  );
+}

apps/ui/src/hooks/use-settings-migration.ts

@@ -20,8 +20,8 @@
 import { useEffect, useState, useRef } from 'react';
 import { createLogger } from '@automaker/utils/logger';
 import { getHttpApiClient, waitForApiKeyInit } from '@/lib/http-api-client';
-import { getItem, removeItem } from '@/lib/storage';
+import { getItem, removeItem, setItem } from '@/lib/storage';
-import { useAppStore } from '@/store/app-store';
+import { useAppStore, THEME_STORAGE_KEY } from '@/store/app-store';
 import { useSetupStore } from '@/store/setup-store';
 import type { GlobalSettings } from '@automaker/types';
 
@@ -69,7 +69,12 @@ let migrationCompleteResolve: (() => void) | null = null;
 let migrationCompletePromise: Promise<void> | null = null;
 let migrationCompleted = false;
 
-function signalMigrationComplete(): void {
+/**
+ * Signal that migration/hydration is complete.
+ * Call this after hydrating the store from server settings.
+ * This unblocks useSettingsSync so it can start syncing changes.
+ */
+export function signalMigrationComplete(): void {
   migrationCompleted = true;
   if (migrationCompleteResolve) {
     migrationCompleteResolve();
@@ -436,7 +441,7 @@ export function useSettingsMigration(): MigrationState {
 /**
  * Hydrate the Zustand store from settings object
  */
-function hydrateStoreFromSettings(settings: GlobalSettings): void {
+export function hydrateStoreFromSettings(settings: GlobalSettings): void {
   const current = useAppStore.getState();
 
   // Convert ProjectRef[] to Project[] (minimal data, features will be loaded separately)
@@ -458,6 +463,11 @@ function hydrateStoreFromSettings(settings: GlobalSettings): void {
     }
   }
 
+  // Save theme to localStorage for fallback when server settings aren't available
+  if (settings.theme) {
+    setItem(THEME_STORAGE_KEY, settings.theme);
+  }
+
   useAppStore.setState({
     theme: settings.theme as unknown as import('@/store/app-store').ThemeMode,
     sidebarOpen: settings.sidebarOpen ?? true,

apps/ui/src/hooks/use-settings-sync.ts

@@ -14,7 +14,8 @@
 import { useEffect, useRef, useCallback, useState } from 'react';
 import { createLogger } from '@automaker/utils/logger';
 import { getHttpApiClient, waitForApiKeyInit } from '@/lib/http-api-client';
-import { useAppStore, type ThemeMode } from '@/store/app-store';
+import { setItem } from '@/lib/storage';
+import { useAppStore, type ThemeMode, THEME_STORAGE_KEY } from '@/store/app-store';
 import { useSetupStore } from '@/store/setup-store';
 import { waitForMigrationComplete } from './use-settings-migration';
 import type { GlobalSettings } from '@automaker/types';
@@ -339,6 +340,11 @@ export async function refreshSettingsFromServer(): Promise<boolean> {
     const serverSettings = result.settings as unknown as GlobalSettings;
     const currentAppState = useAppStore.getState();
 
+    // Save theme to localStorage for fallback when server settings aren't available
+    if (serverSettings.theme) {
+      setItem(THEME_STORAGE_KEY, serverSettings.theme);
+    }
+
     useAppStore.setState({
       theme: serverSettings.theme as unknown as ThemeMode,
       sidebarOpen: serverSettings.sidebarOpen,

apps/ui/src/lib/http-api-client.ts

@@ -45,6 +45,36 @@ const logger = createLogger('HttpClient');
 // Cached server URL (set during initialization in Electron mode)
 let cachedServerUrl: string | null = null;
 
+/**
+ * Notify the UI that the current session is no longer valid.
+ * Used to redirect the user to a logged-out route on 401/403 responses.
+ */
+const notifyLoggedOut = (): void => {
+  if (typeof window === 'undefined') return;
+  try {
+    window.dispatchEvent(new CustomEvent('automaker:logged-out'));
+  } catch {
+    // Ignore - navigation will still be handled by failed requests in most cases
+  }
+};
+
+/**
+ * Handle an unauthorized response in cookie/session auth flows.
+ * Clears in-memory token and attempts to clear the cookie (best-effort),
+ * then notifies the UI to redirect.
+ */
+const handleUnauthorized = (): void => {
+  clearSessionToken();
+  // Best-effort cookie clear (avoid throwing)
+  fetch(`${getServerUrl()}/api/auth/logout`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    credentials: 'include',
+    body: '{}',
+  }).catch(() => {});
+  notifyLoggedOut();
+};
+
 /**
  * Initialize server URL from Electron IPC.
  * Must be called early in Electron mode before making API requests.
@@ -88,6 +118,7 @@ let apiKeyInitialized = false;
 let apiKeyInitPromise: Promise<void> | null = null;
 
 // Cached session token for authentication (Web mode - explicit header auth)
+// Only used in-memory after fresh login; on refresh we rely on HTTP-only cookies
 let cachedSessionToken: string | null = null;
 
 // Get API key for Electron mode (returns cached value after initialization)
@@ -105,10 +136,10 @@ export const waitForApiKeyInit = (): Promise<void> => {
   return initApiKey();
 };
 
-// Get session token for Web mode (returns cached value after login or token fetch)
+// Get session token for Web mode (returns cached value after login)
 export const getSessionToken = (): string | null => cachedSessionToken;
 
-// Set session token (called after login or token fetch)
+// Set session token (called after login)
 export const setSessionToken = (token: string | null): void => {
   cachedSessionToken = token;
 };
@@ -311,6 +342,7 @@ export const logout = async (): Promise<{ success: boolean }> => {
   try {
     const response = await fetch(`${getServerUrl()}/api/auth/logout`, {
       method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
       credentials: 'include',
     });
 
@@ -331,52 +363,52 @@ export const logout = async (): Promise<{ success: boolean }> => {
  * This should be called:
  * 1. After login to verify the cookie was set correctly
  * 2. On app load to verify the session hasn't expired
+ *
+ * Returns:
+ * - true: Session is valid
+ * - false: Session is definitively invalid (401/403 auth failure)
+ * - throws: Network error or server not ready (caller should retry)
  */
 export const verifySession = async (): Promise<boolean> => {
-  try {
+  const headers: Record<string, string> = {
-    const headers: Record<string, string> = {
+    'Content-Type': 'application/json',
-      'Content-Type': 'application/json',
+  };
-    };
 
-    // Add session token header if available
+  // Add session token header if available
-    const sessionToken = getSessionToken();
+  const sessionToken = getSessionToken();
-    if (sessionToken) {
+  if (sessionToken) {
-      headers['X-Session-Token'] = sessionToken;
+    headers['X-Session-Token'] = sessionToken;
-    }
+  }
 
-    // Make a request to an authenticated endpoint to verify the session
+  // Make a request to an authenticated endpoint to verify the session
-    // We use /api/settings/status as it requires authentication and is lightweight
+  // We use /api/settings/status as it requires authentication and is lightweight
-    const response = await fetch(`${getServerUrl()}/api/settings/status`, {
+  // Note: fetch throws on network errors, which we intentionally let propagate
-      headers,
+  const response = await fetch(`${getServerUrl()}/api/settings/status`, {
-      credentials: 'include',
+    headers,
-    });
+    credentials: 'include',
+    // Avoid hanging indefinitely during backend reloads or network issues
+    signal: AbortSignal.timeout(2500),
+  });
 
-    // Check for authentication errors
+  // Check for authentication errors - these are definitive "invalid session" responses
-    if (response.status === 401 || response.status === 403) {
+  if (response.status === 401 || response.status === 403) {
-      logger.warn('Session verification failed - session expired or invalid');
+    logger.warn('Session verification failed - session expired or invalid');
-      // Clear the session since it's no longer valid
+    // Clear the in-memory/localStorage session token since it's no longer valid
-      clearSessionToken();
+    // Note: We do NOT call logout here - that would destroy a potentially valid
-      // Try to clear the cookie via logout (fire and forget)
+    // cookie if the issue was transient (e.g., token not sent due to timing)
-      fetch(`${getServerUrl()}/api/auth/logout`, {
+    clearSessionToken();
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        credentials: 'include',
-        body: '{}',
-      }).catch(() => {});
-      return false;
-    }
-
-    if (!response.ok) {
-      logger.warn('Session verification failed with status:', response.status);
-      return false;
-    }
-
-    logger.info('Session verified successfully');
-    return true;
-  } catch (error) {
-    logger.error('Session verification error:', error);
     return false;
   }
+
+  // For other non-ok responses (5xx, etc.), throw to trigger retry
+  if (!response.ok) {
+    const error = new Error(`Session verification failed with status: ${response.status}`);
+    logger.warn('Session verification failed with status:', response.status);
+    throw error;
+  }
+
+  logger.info('Session verified successfully');
+  return true;
 };
 
 /**
@@ -472,6 +504,11 @@ export class HttpApiClient implements ElectronAPI {
         credentials: 'include',
       });
 
+      if (response.status === 401 || response.status === 403) {
+        handleUnauthorized();
+        return null;
+      }
+
       if (!response.ok) {
         logger.warn('Failed to fetch wsToken:', response.status);
         return null;
@@ -653,6 +690,11 @@ export class HttpApiClient implements ElectronAPI {
       body: body ? JSON.stringify(body) : undefined,
     });
 
+    if (response.status === 401 || response.status === 403) {
+      handleUnauthorized();
+      throw new Error('Unauthorized');
+    }
+
     if (!response.ok) {
       let errorMessage = `HTTP ${response.status}: ${response.statusText}`;
       try {
@@ -677,6 +719,11 @@ export class HttpApiClient implements ElectronAPI {
       credentials: 'include', // Include cookies for session auth
     });
 
+    if (response.status === 401 || response.status === 403) {
+      handleUnauthorized();
+      throw new Error('Unauthorized');
+    }
+
     if (!response.ok) {
       let errorMessage = `HTTP ${response.status}: ${response.statusText}`;
       try {
@@ -703,6 +750,11 @@ export class HttpApiClient implements ElectronAPI {
       body: body ? JSON.stringify(body) : undefined,
     });
 
+    if (response.status === 401 || response.status === 403) {
+      handleUnauthorized();
+      throw new Error('Unauthorized');
+    }
+
     if (!response.ok) {
       let errorMessage = `HTTP ${response.status}: ${response.statusText}`;
       try {
@@ -728,6 +780,11 @@ export class HttpApiClient implements ElectronAPI {
       credentials: 'include', // Include cookies for session auth
     });
 
+    if (response.status === 401 || response.status === 403) {
+      handleUnauthorized();
+      throw new Error('Unauthorized');
+    }
+
     if (!response.ok) {
       let errorMessage = `HTTP ${response.status}: ${response.statusText}`;
       try {

apps/ui/src/routes/__root.tsx

@@ -7,20 +7,19 @@ import {
   useFileBrowser,
   setGlobalFileBrowser,
 } from '@/contexts/file-browser-context';
-import { useAppStore } from '@/store/app-store';
+import { useAppStore, getStoredTheme } from '@/store/app-store';
 import { useSetupStore } from '@/store/setup-store';
 import { useAuthStore } from '@/store/auth-store';
 import { getElectronAPI, isElectron } from '@/lib/electron';
 import { isMac } from '@/lib/utils';
 import {
   initApiKey,
-  isElectronMode,
   verifySession,
   checkSandboxEnvironment,
   getServerUrlSync,
-  checkExternalServerMode,
+  getHttpApiClient,
-  isExternalServerMode,
 } from '@/lib/http-api-client';
+import { hydrateStoreFromSettings, signalMigrationComplete } from '@/hooks/use-settings-migration';
 import { Toaster } from 'sonner';
 import { ThemeOption, themeOptions } from '@/config/theme-options';
 import { SandboxRiskDialog } from '@/components/dialogs/sandbox-risk-dialog';
@@ -29,6 +28,33 @@ import { LoadingState } from '@/components/ui/loading-state';
 
 const logger = createLogger('RootLayout');
 
+// Apply stored theme immediately on page load (before React hydration)
+// This prevents flash of default theme on login/setup pages
+function applyStoredTheme(): void {
+  const storedTheme = getStoredTheme();
+  if (storedTheme) {
+    const root = document.documentElement;
+    // Remove all theme classes (themeOptions doesn't include 'system' which is only in ThemeMode)
+    const themeClasses = themeOptions.map((option) => option.value);
+    root.classList.remove(...themeClasses);
+
+    // Apply the stored theme
+    if (storedTheme === 'dark') {
+      root.classList.add('dark');
+    } else if (storedTheme === 'system') {
+      const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+      root.classList.add(isDark ? 'dark' : 'light');
+    } else if (storedTheme !== 'light') {
+      root.classList.add(storedTheme);
+    } else {
+      root.classList.add('light');
+    }
+  }
+}
+
+// Apply stored theme immediately (runs synchronously before render)
+applyStoredTheme();
+
 function RootLayoutContent() {
   const location = useLocation();
   const {
@@ -42,16 +68,13 @@ function RootLayoutContent() {
   const navigate = useNavigate();
   const [isMounted, setIsMounted] = useState(false);
   const [streamerPanelOpen, setStreamerPanelOpen] = useState(false);
-  // Since we removed persist middleware (settings now sync via API),
-  // we consider the store "hydrated" immediately - the useSettingsMigration
-  // hook in App.tsx handles loading settings from the API
-  const [setupHydrated, setSetupHydrated] = useState(true);
   const authChecked = useAuthStore((s) => s.authChecked);
   const isAuthenticated = useAuthStore((s) => s.isAuthenticated);
   const { openFileBrowser } = useFileBrowser();
 
   const isSetupRoute = location.pathname === '/setup';
   const isLoginRoute = location.pathname === '/login';
+  const isLoggedOutRoute = location.pathname === '/logged-out';
 
   // Sandbox environment check state
   type SandboxStatus = 'pending' | 'containerized' | 'needs-confirmation' | 'denied' | 'confirmed';
@@ -105,13 +128,18 @@ function RootLayoutContent() {
     setIsMounted(true);
   }, []);
 
-  // Check sandbox environment on mount
+  // Check sandbox environment only after user is authenticated and setup is complete
   useEffect(() => {
     // Skip if already decided
     if (sandboxStatus !== 'pending') {
       return;
     }
 
+    // Don't check sandbox until user is authenticated and has completed setup
+    if (!authChecked || !isAuthenticated || !setupComplete) {
+      return;
+    }
+
     const checkSandbox = async () => {
       try {
         const result = await checkSandboxEnvironment();
@@ -138,7 +166,7 @@ function RootLayoutContent() {
     };
 
     checkSandbox();
-  }, [sandboxStatus, skipSandboxWarning]);
+  }, [sandboxStatus, skipSandboxWarning, authChecked, isAuthenticated, setupComplete]);
 
   // Handle sandbox risk confirmation
   const handleSandboxConfirm = useCallback(
@@ -175,6 +203,24 @@ function RootLayoutContent() {
   // Ref to prevent concurrent auth checks from running
   const authCheckRunning = useRef(false);
 
+  // Global listener for 401/403 responses during normal app usage.
+  // This is triggered by the HTTP client whenever an authenticated request returns 401/403.
+  // Works for ALL modes (unified flow)
+  useEffect(() => {
+    const handleLoggedOut = () => {
+      useAuthStore.getState().setAuthState({ isAuthenticated: false, authChecked: true });
+
+      if (location.pathname !== '/logged-out') {
+        navigate({ to: '/logged-out' });
+      }
+    };
+
+    window.addEventListener('automaker:logged-out', handleLoggedOut);
+    return () => {
+      window.removeEventListener('automaker:logged-out', handleLoggedOut);
+    };
+  }, [location.pathname, navigate]);
+
   // Initialize authentication
   // - Electron mode: Uses API key from IPC (header-based auth)
   // - Web mode: Uses HTTP-only session cookie
@@ -191,30 +237,67 @@ function RootLayoutContent() {
         // Initialize API key for Electron mode
         await initApiKey();
 
-        // Check if running in external server mode (Docker API)
+        // 1. Verify session (Single Request, ALL modes)
-        const externalMode = await checkExternalServerMode();
+        let isValid = false;
-
+        try {
-        // In Electron mode (but NOT external server mode), we're always authenticated via header
+          isValid = await verifySession();
-        if (isElectronMode() && !externalMode) {
+        } catch (error) {
-          useAuthStore.getState().setAuthState({ isAuthenticated: true, authChecked: true });
+          logger.warn('Session verification failed (likely network/server issue):', error);
-          return;
+          isValid = false;
         }
 
-        // In web mode OR external server mode, verify the session cookie is still valid
-        // by making a request to an authenticated endpoint
-        const isValid = await verifySession();
-
         if (isValid) {
-          useAuthStore.getState().setAuthState({ isAuthenticated: true, authChecked: true });
+          // 2. Check Settings if valid
-          return;
+          const api = getHttpApiClient();
-        }
+          try {
+            const settingsResult = await api.settings.getGlobal();
+            if (settingsResult.success && settingsResult.settings) {
+              // Hydrate store (including setupComplete)
+              // This function handles updating the store with all settings
+              // Cast through unknown first to handle type differences between API response and GlobalSettings
+              hydrateStoreFromSettings(
+                settingsResult.settings as unknown as Parameters<typeof hydrateStoreFromSettings>[0]
+              );
 
-        // Session is invalid or expired - treat as not authenticated
+              // Signal that settings hydration is complete so useSettingsSync can start
-        useAuthStore.getState().setAuthState({ isAuthenticated: false, authChecked: true });
+              signalMigrationComplete();
+
+              // Redirect based on setup status happens in the routing effect below
+              // but we can also hint navigation here if needed.
+              // The routing effect (lines 273+) is robust enough.
+            }
+          } catch (error) {
+            logger.error('Failed to fetch settings after valid session:', error);
+            // If settings fail, we might still be authenticated but can't determine setup status.
+            // We should probably treat as authenticated but setup unknown?
+            // Or fail safe to logged-out/error?
+            // Existing logic relies on setupComplete which defaults to false/true based on env.
+            // Let's assume we proceed as authenticated.
+            // Still signal migration complete so sync can start (will sync current store state)
+            signalMigrationComplete();
+          }
+
+          useAuthStore.getState().setAuthState({ isAuthenticated: true, authChecked: true });
+        } else {
+          // Session is invalid or expired - treat as not authenticated
+          useAuthStore.getState().setAuthState({ isAuthenticated: false, authChecked: true });
+          // Signal migration complete so sync hook doesn't hang (nothing to sync when not authenticated)
+          signalMigrationComplete();
+
+          // Redirect to logged-out if not already there or login
+          if (location.pathname !== '/logged-out' && location.pathname !== '/login') {
+            navigate({ to: '/logged-out' });
+          }
+        }
       } catch (error) {
         logger.error('Failed to initialize auth:', error);
         // On error, treat as not authenticated
         useAuthStore.getState().setAuthState({ isAuthenticated: false, authChecked: true });
+        // Signal migration complete so sync hook doesn't hang
+        signalMigrationComplete();
+        if (location.pathname !== '/logged-out' && location.pathname !== '/login') {
+          navigate({ to: '/logged-out' });
+        }
       } finally {
         authCheckRunning.current = false;
       }
@@ -223,25 +306,21 @@ function RootLayoutContent() {
     initAuth();
   }, []); // Runs once per load; auth state drives routing rules
 
-  // Note: Setup store hydration is handled by useSettingsMigration in App.tsx
+  // Note: Settings are now loaded in __root.tsx after successful session verification
-  // No need to wait for persist middleware hydration since we removed it
+  // This ensures a unified flow across all modes (Electron, web, external server)
 
-  // Routing rules (web mode and external server mode):
+  // Routing rules (ALL modes - unified flow):
-  // - If not authenticated: force /login (even /setup is protected)
+  // - If not authenticated: force /logged-out (even /setup is protected)
   // - If authenticated but setup incomplete: force /setup
+  // - If authenticated and setup complete: allow access to app
   useEffect(() => {
-    if (!setupHydrated) return;
-
-    // Check if we need session-based auth (web mode OR external server mode)
-    const needsSessionAuth = !isElectronMode() || isExternalServerMode() === true;
-
     // Wait for auth check to complete before enforcing any redirects
-    if (needsSessionAuth && !authChecked) return;
+    if (!authChecked) return;
 
-    // Unauthenticated -> force /login
+    // Unauthenticated -> force /logged-out (but allow /login so user can authenticate)
-    if (needsSessionAuth && !isAuthenticated) {
+    if (!isAuthenticated) {
-      if (location.pathname !== '/login') {
+      if (location.pathname !== '/logged-out' && location.pathname !== '/login') {
-        navigate({ to: '/login' });
+        navigate({ to: '/logged-out' });
       }
       return;
     }
@@ -256,7 +335,7 @@ function RootLayoutContent() {
     if (setupComplete && location.pathname === '/setup') {
       navigate({ to: '/' });
     }
-  }, [authChecked, isAuthenticated, setupComplete, setupHydrated, location.pathname, navigate]);
+  }, [authChecked, isAuthenticated, setupComplete, location.pathname, navigate]);
 
   useEffect(() => {
     setGlobalFileBrowser(openFileBrowser);
@@ -326,26 +405,17 @@ function RootLayoutContent() {
   const showSandboxDialog = sandboxStatus === 'needs-confirmation';
 
   // Show login page (full screen, no sidebar)
-  if (isLoginRoute) {
+  // Note: No sandbox dialog here - it only shows after login and setup complete
+  if (isLoginRoute || isLoggedOutRoute) {
     return (
-      <>
+      <main className="h-screen overflow-hidden" data-testid="app-container">
-        <main className="h-screen overflow-hidden" data-testid="app-container">
+        <Outlet />
-          <Outlet />
+      </main>
-        </main>
-        <SandboxRiskDialog
-          open={showSandboxDialog}
-          onConfirm={handleSandboxConfirm}
-          onDeny={handleSandboxDeny}
-        />
-      </>
     );
   }
 
-  // Check if we need session-based auth (web mode OR external server mode)
+  // Wait for auth check before rendering protected routes (ALL modes - unified flow)
-  const needsSessionAuth = !isElectronMode() || isExternalServerMode() === true;
+  if (!authChecked) {
-
-  // Wait for auth check before rendering protected routes (web mode and external server mode)
-  if (needsSessionAuth && !authChecked) {
     return (
       <main className="flex h-screen items-center justify-center" data-testid="app-container">
         <LoadingState message="Loading..." />
@@ -353,12 +423,12 @@ function RootLayoutContent() {
     );
   }
 
-  // Redirect to login if not authenticated (web mode and external server mode)
+  // Redirect to logged-out if not authenticated (ALL modes - unified flow)
-  // Show loading state while navigation to login is in progress
+  // Show loading state while navigation is in progress
-  if (needsSessionAuth && !isAuthenticated) {
+  if (!isAuthenticated) {
     return (
       <main className="flex h-screen items-center justify-center" data-testid="app-container">
-        <LoadingState message="Redirecting to login..." />
+        <LoadingState message="Redirecting..." />
       </main>
     );
   }

apps/ui/src/routes/logged-out.tsx

@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router';
+import { LoggedOutView } from '@/components/views/logged-out-view';
+
+export const Route = createFileRoute('/logged-out')({
+  component: LoggedOutView,
+});

apps/ui/src/store/app-store.ts

@@ -2,6 +2,7 @@ import { create } from 'zustand';
 // Note: persist middleware removed - settings now sync via API (use-settings-sync.ts)
 import type { Project, TrashedProject } from '@/lib/electron';
 import { createLogger } from '@automaker/utils/logger';
+import { setItem, getItem } from '@/lib/storage';
 import type {
   Feature as BaseFeature,
   FeatureImagePath,
@@ -60,6 +61,29 @@ export type ThemeMode =
   | 'sunset'
   | 'gray';
 
+// LocalStorage key for theme persistence (fallback when server settings aren't available)
+export const THEME_STORAGE_KEY = 'automaker:theme';
+
+/**
+ * Get the theme from localStorage as a fallback
+ * Used before server settings are loaded (e.g., on login/setup pages)
+ */
+export function getStoredTheme(): ThemeMode | null {
+  const stored = getItem(THEME_STORAGE_KEY);
+  if (stored) {
+    return stored as ThemeMode;
+  }
+  return null;
+}
+
+/**
+ * Save theme to localStorage for immediate persistence
+ * This is used as a fallback when server settings can't be loaded
+ */
+function saveThemeToStorage(theme: ThemeMode): void {
+  setItem(THEME_STORAGE_KEY, theme);
+}
+
 export type KanbanCardDetailLevel = 'minimal' | 'standard' | 'detailed';
 
 export type BoardViewMode = 'kanban' | 'graph';
@@ -1005,7 +1029,7 @@ const initialState: AppState = {
   currentView: 'welcome',
   sidebarOpen: true,
   lastSelectedSessionByProject: {},
-  theme: 'dark',
+  theme: getStoredTheme() || 'dark', // Use localStorage theme as initial value, fallback to 'dark'
   features: [],
   appSpec: '',
   ipcConnected: false,
@@ -1321,7 +1345,11 @@ export const useAppStore = create<AppState & AppActions>()((set, get) => ({
   setSidebarOpen: (open) => set({ sidebarOpen: open }),
 
   // Theme actions
-  setTheme: (theme) => set({ theme }),
+  setTheme: (theme) => {
+    // Save to localStorage for fallback when server settings aren't available
+    saveThemeToStorage(theme);
+    set({ theme });
+  },
 
   setProjectTheme: (projectId, theme) => {
     // Update the project's theme property