feat: implement guest storage, refine interview flow, and fix UI crashes

frontend/src/App.jsx

@@ -12,7 +12,7 @@ import { api } from "./api/client";
 
 function App() {
   const iv = useInterview();
-  const { currentUser, loading: authLoading, loginWithGoogle } = useAuth();
+  const { currentUser, isGuest, loading: authLoading, loginWithGoogle } = useAuth();
   const [caps, setCaps] = useState({ mode: "CPU", llmMode: "api", audioEnabled: true });
 
   // 1. Route Guard: Auto-transition to dashboard if user is known
@@ -56,7 +56,8 @@ function App() {
 
   // FLOW: Dashboard
   if (iv.step === "dashboard") {
-    if (!currentUser) {
+    // Allow guests (isGuest=true) even if currentUser temporarily null during async restore
+    if (!currentUser && !isGuest) {
       iv.setStep("landing");
       return null;
     }

frontend/src/api/client.js

@@ -1,5 +1,5 @@
 /**
- * API client.
+ * API client with comprehensive error handling, timeouts, and retry logic.
  *
  * VITE_API_BASE — set in frontend/.env (local) or Vercel env vars (production).
  * Production example: VITE_API_BASE=https://your-space.hf.space/api
@@ -19,47 +19,196 @@ export const AUDIO_INPUT_HINT =
   import.meta.env.VITE_AUDIO_INPUT_HINT ||
   "Audio mode uses Whisper for speech-to-text. Speak clearly for best results.";
 
-async function req(path, options = {}) {
+// Request configuration
+const REQUEST_TIMEOUT = 30000; // 30 seconds default timeout
+const MAX_RETRIES = 2;
+const RETRY_DELAY = 1000; // 1 second between retries
+const RETRYABLE_STATUSES = [408, 429, 500, 502, 503, 504]; // Statuses that warrant retry
+
+/**
+ * Create an AbortController with timeout
+ */
+function createTimeoutController(timeoutMs = REQUEST_TIMEOUT) {
+  const controller = new AbortController();
+  const timeoutId = setTimeout(() => controller.abort(), timeoutMs);
+  return { controller, timeoutId };
+}
+
+/**
+ * Determine if an error is retryable
+ */
+function isRetryableError(error, status) {
+  // Network errors (no connection, DNS failure, etc.)
+  if (error.name === 'TypeError' || error.name === 'AbortError') {
+    return true;
+  }
+  // Server errors that might be transient
+  if (status && RETRYABLE_STATUSES.includes(status)) {
+    return true;
+  }
+  return false;
+}
+
+/**
+ * Sleep helper for retry delays
+ */
+function sleep(ms) {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+async function reqWithRetry(path, options = {}, attempt = 0) {
   const token = localStorage.getItem("firebaseToken");
   const headers = { 
     "Content-Type": "application/json", 
     ...(token ? { "Authorization": `Bearer ${token}` } : {}),
     ...(options.headers || {}) 
   };
+
+  const { controller, timeoutId } = createTimeoutController(options.timeout);
   
-  const res = await fetch(`${API_BASE}${path}`, {
-    ...options,
-    headers,
-  });
-  if (!res.ok) {
-    const data = await res.json().catch(() => ({}));
-    const error = new Error(data.detail || data.message || `API error ${res.status}`);
-    error.status = res.status;
-    error.data = data;
+  try {
+    const res = await fetch(`${API_BASE}${path}`, {
+      ...options,
+      headers,
+      signal: controller.signal,
+    });
+    
+    clearTimeout(timeoutId);
+    
+    if (!res.ok) {
+      const data = await res.json().catch(() => ({}));
+      const error = new Error(data.detail || data.message || `API error ${res.status}`);
+      error.status = res.status;
+      error.data = data;
+      
+      // Check if we should retry
+      if (attempt < MAX_RETRIES && isRetryableError(error, res.status)) {
+        console.warn(`API request failed (attempt ${attempt + 1}), retrying...`, error.message);
+        await sleep(RETRY_DELAY * (attempt + 1)); // Exponential backoff
+        return reqWithRetry(path, options, attempt + 1);
+      }
+      
+      throw error;
+    }
+    
+    return res.json();
+  } catch (error) {
+    clearTimeout(timeoutId);
+    
+    // Handle abort/timeout specifically
+    if (error.name === 'AbortError') {
+      const timeoutError = new Error('Request timed out. Please check your connection and try again.');
+      timeoutError.status = 408;
+      timeoutError.isTimeout = true;
+      
+      if (attempt < MAX_RETRIES) {
+        console.warn(`Request timeout (attempt ${attempt + 1}), retrying...`);
+        await sleep(RETRY_DELAY * (attempt + 1));
+        return reqWithRetry(path, options, attempt + 1);
+      }
+      
+      throw timeoutError;
+    }
+    
+    // Handle network errors with retry
+    if (attempt < MAX_RETRIES && isRetryableError(error)) {
+      console.warn(`Network error (attempt ${attempt + 1}), retrying...`, error.message);
+      await sleep(RETRY_DELAY * (attempt + 1));
+      return reqWithRetry(path, options, attempt + 1);
+    }
+    
+    // Enhance network error message
+    if (error.name === 'TypeError' && error.message.includes('fetch')) {
+      error.message = 'Network error. Please check your internet connection and try again.';
+      error.isNetworkError = true;
+    }
+    
     throw error;
   }
-  return res.json();
 }
 
-async function reqMultipart(url, body) {
+async function reqMultipartWithRetry(url, body, attempt = 0) {
   const token = localStorage.getItem("firebaseToken");
   const headers = { 
     ...(token ? { "Authorization": `Bearer ${token}` } : {})
   };
 
-  const res = await fetch(url, { 
-    method: "POST", 
-    body,
-    headers
-  });
-  if (!res.ok) {
-    const data = await res.json().catch(() => ({}));
-    const error = new Error(data.detail || data.message || `API error ${res.status}`);
-    error.status = res.status;
-    error.data = data;
+  const { controller, timeoutId } = createTimeoutController(60000); // Longer timeout for file uploads
+
+  try {
+    const res = await fetch(url, { 
+      method: "POST", 
+      body,
+      headers,
+      signal: controller.signal,
+    });
+    
+    clearTimeout(timeoutId);
+    
+    if (!res.ok) {
+      const data = await res.json().catch(() => ({}));
+      const error = new Error(data.detail || data.message || `API error ${res.status}`);
+      error.status = res.status;
+      error.data = data;
+      
+      // Check if we should retry (but be more conservative with file uploads)
+      if (attempt < MAX_RETRIES && isRetryableError(error, res.status) && res.status !== 413) {
+        console.warn(`Multipart request failed (attempt ${attempt + 1}), retrying...`, error.message);
+        await sleep(RETRY_DELAY * (attempt + 1));
+        return reqMultipartWithRetry(url, body, attempt + 1);
+      }
+      
+      throw error;
+    }
+    
+    return res.json();
+  } catch (error) {
+    clearTimeout(timeoutId);
+    
+    if (error.name === 'AbortError') {
+      const timeoutError = new Error('Upload timed out. The file may be too large or your connection is slow.');
+      timeoutError.status = 408;
+      timeoutError.isTimeout = true;
+      throw timeoutError;
+    }
+    
+    if (attempt < MAX_RETRIES && isRetryableError(error)) {
+      console.warn(`Multipart network error (attempt ${attempt + 1}), retrying...`, error.message);
+      await sleep(RETRY_DELAY * (attempt + 1));
+      return reqMultipartWithRetry(url, body, attempt + 1);
+    }
+    
+    if (error.name === 'TypeError' && error.message.includes('fetch')) {
+      error.message = 'Network error during upload. Please check your connection and try again.';
+      error.isNetworkError = true;
+    }
+    
     throw error;
   }
-  return res.json();
+}
+
+// Maintain backward compatibility with original function names
+async function req(path, options = {}) {
+  return reqWithRetry(path, options);
+}
+
+async function reqMultipart(url, body) {
+  return reqMultipartWithRetry(url, body);
+}
+
+/**
+ * Check if an error is a network error (for UI handling)
+ */
+export function isNetworkError(error) {
+  return error?.isNetworkError === true || error?.isTimeout === true || 
+         error?.name === 'TypeError' || error?.name === 'AbortError';
+}
+
+/**
+ * Check if an error is retryable (for UI retry buttons)
+ */
+export function isRetryable(error) {
+  return isNetworkError(error) || RETRYABLE_STATUSES.includes(error?.status);
 }
 
 /** Map a MIME type string to a file extension for audio blobs. */

frontend/src/components/PostureMonitor.jsx

@@ -214,16 +214,90 @@ export default function PostureMonitor({ sessionId, stream }) {
       } catch (_) {}
     }, 500);
 
+    // Metrics buffer with retry logic
+    const metricsBuffer = [];
+    let consecutiveFailures = 0;
+    const MAX_BUFFER_SIZE = 100; // Prevent unbounded growth
+
     sendRef.current = setInterval(async () => {
       if (!sessionId || metricsRef.current.length === 0) return;
-      const latest = metricsRef.current[metricsRef.current.length - 1];
-      try { await api.sendPosture({ session_id: sessionId, metrics: latest }); } catch (_) {}
+
+      // Add new metrics to buffer
+      metricsBuffer.push(...metricsRef.current);
+      if (metricsBuffer.length > MAX_BUFFER_SIZE) {
+        // Keep only the most recent metrics if buffer overflows
+        metricsBuffer.splice(0, metricsBuffer.length - MAX_BUFFER_SIZE);
+      }
       metricsRef.current = [];
+
+      // Send latest metric from buffer
+      const latest = metricsBuffer[metricsBuffer.length - 1];
+      if (!latest) return;
+
+      try {
+        await api.sendPosture({ session_id: sessionId, metrics: latest });
+        // Success - clear buffer and reset failure count
+        metricsBuffer.length = 0;
+        consecutiveFailures = 0;
+      } catch (err) {
+        consecutiveFailures++;
+        console.warn(`Posture metrics send failed (${consecutiveFailures}x):`, err);
+
+        // After 3 consecutive failures, send a batch of aggregated data
+        if (consecutiveFailures >= 3 && metricsBuffer.length > 1) {
+          try {
+            // Calculate average metrics for batch
+            const avgScore = metricsBuffer.reduce((sum, m) => sum + (m.posture_score || 0), 0) / metricsBuffer.length;
+            const modeLabel = metricsBuffer
+              .map(m => m.posture_label)
+              .sort((a, b) =>
+                metricsBuffer.filter(m => m.posture_label === a).length -
+                metricsBuffer.filter(m => m.posture_label === b).length
+              ).pop();
+
+            const batchMetric = {
+              posture_score: avgScore,
+              posture_label: modeLabel,
+              spine_height: metricsBuffer[metricsBuffer.length - 1].spine_height,
+              hands_visible: true,
+              timestamp: Date.now(),
+              batch_size: metricsBuffer.length,
+              batch_aggregated: true
+            };
+
+            await api.sendPosture({ session_id: sessionId, metrics: batchMetric });
+            metricsBuffer.length = 0;
+            consecutiveFailures = 0;
+          } catch (batchErr) {
+            console.warn("Batch posture send also failed:", batchErr);
+          }
+        }
+      }
     }, 30000);
 
     return () => {
       clearInterval(timerRef.current);
       clearInterval(sendRef.current);
+      
+      // Attempt to flush remaining metrics on unmount
+      if (sessionId && metricsBuffer.length > 0) {
+        const latest = metricsBuffer[metricsBuffer.length - 1];
+        const payload = JSON.stringify({
+          session_id: sessionId,
+          metrics: {
+            ...latest,
+            flush_on_unmount: true,
+            timestamp: Date.now()
+          }
+        });
+        
+        // Use sendBeacon for best-effort delivery on unmount
+        if (navigator.sendBeacon) {
+          navigator.sendBeacon('/api/posture/report', new Blob([payload], { type: 'application/json' }));
+        }
+        
+        metricsBuffer.length = 0;
+      }
     };
   }, [poseReady, sessionId, analysePosture, drawSkeleton]);
 

frontend/src/contexts/InterviewContext.jsx

@@ -82,7 +82,27 @@ export function InterviewProvider({ children }) {
       const recoverState = async () => {
         try {
           const status = await api.getSessionStatus(sid);
-          
+
+          // Handle expired sessions
+          if (status.status === "expired") {
+            console.warn("Session expired:", status.message);
+            sessionStorage.removeItem(SESSION_KEY);
+            sessionStorage.removeItem("ai_interview_step");
+            dispatch({ type: "SET_ERROR", v: "Your session has expired. Please start a new interview." });
+            dispatch({ type: "SET_STEP", v: "landing" });
+            return;
+          }
+
+          // Handle sessions that don't exist on backend (cleaned up or invalid)
+          if (status.status === "not_started" && storedStep === "interview") {
+            console.warn("Session not found on backend, clearing local state");
+            sessionStorage.removeItem(SESSION_KEY);
+            sessionStorage.removeItem("ai_interview_step");
+            dispatch({ type: "SET_ERROR", v: "Session not found. Please start a new interview." });
+            dispatch({ type: "SET_STEP", v: "landing" });
+            return;
+          }
+
           // If there's an active interview in progress
           if (status.has_active_question && status.current_question) {
             // Restore to interview step with current question
@@ -109,9 +129,16 @@ export function InterviewProvider({ children }) {
           // If no active question, user stays at their current step
         } catch (e) {
           console.warn("Failed to recover session state:", e);
+          // If 404, session doesn't exist - clear and redirect
+          if (e.status === 404) {
+            sessionStorage.removeItem(SESSION_KEY);
+            sessionStorage.removeItem("ai_interview_step");
+            dispatch({ type: "SET_ERROR", v: "Session not found. Please start a new interview." });
+            dispatch({ type: "SET_STEP", v: "landing" });
+          }
         }
       };
-      
+
       recoverState();
     }
   }, []);

frontend/src/hooks/useAntiCheat.js

@@ -1,14 +1,60 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { api } from "../api/client";
 
+const MAX_RETRY_ATTEMPTS = 3;
+const RETRY_DELAYS = [1000, 3000, 5000]; // Exponential backoff: 1s, 3s, 5s
+
 export function useAntiCheat(sessionId, enabled = false) {
   const [violations,      setViolations]      = useState([]);
   const [showWarning,     setShowWarning]     = useState(false);
   const [warningMessage,  setWarningMessage]  = useState("");
+  const [failedCount,    setFailedCount]     = useState(0);
   const countRef = useRef(0);
+  const pendingQueueRef = useRef([]);
+  const retryTimerRef = useRef(null);
+
+  // Process the pending queue with retry logic
+  const processQueue = useCallback(async () => {
+    if (pendingQueueRef.current.length === 0 || !sessionId) return;
+
+    const item = pendingQueueRef.current[0];
+    
+    try {
+      await api.logViolation({
+        session_id: sessionId,
+        type: item.type,
+        details: item.details
+      });
+      
+      // Success - remove from queue
+      pendingQueueRef.current.shift();
+      setFailedCount(pendingQueueRef.current.length);
+      
+      // Process next item if any
+      if (pendingQueueRef.current.length > 0) {
+        processQueue();
+      }
+    } catch (err) {
+      // Failed - increment retry count
+      item.attempts = (item.attempts || 0) + 1;
+      
+      if (item.attempts >= MAX_RETRY_ATTEMPTS) {
+        // Max retries reached - drop this violation and log to console
+        console.warn(`Anti-cheat: Dropping violation after ${MAX_RETRY_ATTEMPTS} retries:`, item);
+        pendingQueueRef.current.shift();
+        setFailedCount(pendingQueueRef.current.length);
+      } else {
+        // Schedule retry with exponential backoff
+        const delay = RETRY_DELAYS[Math.min(item.attempts - 1, RETRY_DELAYS.length - 1)];
+        if (retryTimerRef.current) clearTimeout(retryTimerRef.current);
+        retryTimerRef.current = setTimeout(processQueue, delay);
+      }
+    }
+  }, [sessionId]);
 
   const log = useCallback(async (type, details = "") => {
     if (!sessionId || !enabled) return;
+    
     countRef.current += 1;
     const entry = { type, details, timestamp: new Date().toISOString() };
     setViolations(v => [...v, entry]);
@@ -19,8 +65,37 @@ export function useAntiCheat(sessionId, enabled = false) {
     );
     setShowWarning(true);
     setTimeout(() => setShowWarning(false), 4000);
-    try { await api.logViolation({ session_id: sessionId, type, details }); } catch (_) {}
-  }, [sessionId, enabled]);
+    
+    // Add to queue and process immediately
+    pendingQueueRef.current.push({ type, details, attempts: 0 });
+    setFailedCount(pendingQueueRef.current.length);
+    processQueue();
+  }, [sessionId, enabled, processQueue]);
+
+  // Flush remaining violations on unmount
+  useEffect(() => {
+    return () => {
+      if (retryTimerRef.current) {
+        clearTimeout(retryTimerRef.current);
+      }
+      // Attempt to send any remaining violations synchronously (best effort)
+      if (pendingQueueRef.current.length > 0 && sessionId) {
+        const remaining = [...pendingQueueRef.current];
+        // Use sendBeacon if available, otherwise fire-and-forget fetch
+        remaining.forEach(item => {
+          const payload = JSON.stringify({
+            session_id: sessionId,
+            type: item.type,
+            details: item.details
+          });
+          
+          if (navigator.sendBeacon) {
+            navigator.sendBeacon('/api/session/violation', new Blob([payload], { type: 'application/json' }));
+          }
+        });
+      }
+    };
+  }, [sessionId]);
 
   useEffect(() => {
     if (!enabled) return;
@@ -65,5 +140,12 @@ export function useAntiCheat(sessionId, enabled = false) {
     document.exitFullscreen?.();
   }, []);
 
-  return { violations, showWarning, warningMessage, enterFullscreen, exitFullscreen };
+  return { 
+    violations, 
+    showWarning, 
+    warningMessage, 
+    failedCount,
+    enterFullscreen, 
+    exitFullscreen 
+  };
 }

frontend/src/lib/guestStorage.js

@@ -0,0 +1,195 @@
+/**
+ * Guest Interview Storage - IndexedDB
+ * 
+ * Provides persistent storage for guest users' interview history.
+ * Falls back to localStorage if IndexedDB unavailable.
+ */
+
+const DB_NAME = 'ascent_guest_db';
+const DB_VERSION = 1;
+const STORE_NAME = 'interviews';
+
+let dbPromise = null;
+
+function openDB() {
+  if (dbPromise) return dbPromise;
+  
+  if (!('indexedDB' in window)) {
+    console.warn('IndexedDB not supported, falling back to localStorage');
+    return Promise.resolve(null);
+  }
+  
+  dbPromise = new Promise((resolve, reject) => {
+    const request = indexedDB.open(DB_NAME, DB_VERSION);
+    
+    request.onerror = () => {
+      console.warn('IndexedDB open failed, falling back to localStorage');
+      resolve(null);
+    };
+    
+    request.onsuccess = () => resolve(request.result);
+    
+    request.onupgradeneeded = (event) => {
+      const db = event.target.result;
+      if (!db.objectStoreNames.contains(STORE_NAME)) {
+        const store = db.createObjectStore(STORE_NAME, { keyPath: 'session_id' });
+        store.createIndex('saved_at', 'saved_at', { unique: false });
+      }
+    };
+  });
+  
+  return dbPromise;
+}
+
+// Fallback localStorage key
+const FALLBACK_KEY = 'ascent_guest_interviews';
+
+function getFallback() {
+  try {
+    const data = localStorage.getItem(FALLBACK_KEY);
+    return data ? JSON.parse(data) : [];
+  } catch {
+    return [];
+  }
+}
+
+function setFallback(interviews) {
+  try {
+    localStorage.setItem(FALLBACK_KEY, JSON.stringify(interviews));
+  } catch (e) {
+    console.warn('Failed to save to localStorage:', e);
+  }
+}
+
+/**
+ * Save an interview report for a guest user
+ */
+export async function saveGuestInterview(sessionId, reportData) {
+  const interview = {
+    session_id: sessionId,
+    report: reportData,
+    saved_at: new Date().toISOString(),
+  };
+  
+  const db = await openDB();
+  
+  if (!db) {
+    // Fallback to localStorage
+    const existing = getFallback();
+    const filtered = existing.filter(i => i.session_id !== sessionId);
+    filtered.unshift(interview); // Add to beginning (newest first)
+    // Keep only last 50
+    if (filtered.length > 50) filtered.pop();
+    setFallback(filtered);
+    return;
+  }
+  
+  return new Promise((resolve, reject) => {
+    const transaction = db.transaction([STORE_NAME], 'readwrite');
+    const store = transaction.objectStore(STORE_NAME);
+    
+    const request = store.put(interview);
+    
+    request.onsuccess = () => resolve();
+    request.onerror = () => {
+      console.warn('IndexedDB save failed, falling back to localStorage');
+      const existing = getFallback();
+      const filtered = existing.filter(i => i.session_id !== sessionId);
+      filtered.unshift(interview);
+      if (filtered.length > 50) filtered.pop();
+      setFallback(filtered);
+      resolve();
+    };
+  });
+}
+
+/**
+ * Get all interview history for a guest user
+ */
+export async function getGuestHistory() {
+  const db = await openDB();
+  
+  if (!db) {
+    return getFallback();
+  }
+  
+  return new Promise((resolve) => {
+    const transaction = db.transaction([STORE_NAME], 'readonly');
+    const store = transaction.objectStore(STORE_NAME);
+    const index = store.index('saved_at');
+    
+    const request = index.openCursor(null, 'prev'); // Descending order
+    const results = [];
+    
+    request.onsuccess = (event) => {
+      const cursor = event.target.result;
+      if (cursor && results.length < 50) {
+        results.push(cursor.value);
+        cursor.continue();
+      } else {
+        resolve(results);
+      }
+    };
+    
+    request.onerror = () => {
+      console.warn('IndexedDB read failed, falling back to localStorage');
+      resolve(getFallback());
+    };
+  });
+}
+
+/**
+ * Delete a specific guest interview
+ */
+export async function deleteGuestInterview(sessionId) {
+  const db = await openDB();
+  
+  if (!db) {
+    const existing = getFallback();
+    const filtered = existing.filter(i => i.session_id !== sessionId);
+    setFallback(filtered);
+    return;
+  }
+  
+  return new Promise((resolve) => {
+    const transaction = db.transaction([STORE_NAME], 'readwrite');
+    const store = transaction.objectStore(STORE_NAME);
+    
+    const request = store.delete(sessionId);
+    request.onsuccess = () => resolve();
+    request.onerror = () => {
+      // Fallback
+      const existing = getFallback();
+      const filtered = existing.filter(i => i.session_id !== sessionId);
+      setFallback(filtered);
+      resolve();
+    };
+  });
+}
+
+/**
+ * Clear all guest interview history
+ */
+export async function clearGuestHistory() {
+  const db = await openDB();
+  
+  if (!db) {
+    localStorage.removeItem(FALLBACK_KEY);
+    return;
+  }
+  
+  return new Promise((resolve) => {
+    const transaction = db.transaction([STORE_NAME], 'readwrite');
+    const store = transaction.objectStore(STORE_NAME);
+    
+    const request = store.clear();
+    request.onsuccess = () => {
+      localStorage.removeItem(FALLBACK_KEY);
+      resolve();
+    };
+    request.onerror = () => {
+      localStorage.removeItem(FALLBACK_KEY);
+      resolve();
+    };
+  });
+}

frontend/src/pages/Dashboard.jsx

@@ -3,6 +3,7 @@ import { motion, AnimatePresence } from "framer-motion";
 import { ArrowRight, TrendingUp, Clock, ChevronRight, LogOut, BarChart3, Activity } from "lucide-react";
 import { useAuth } from "../contexts/AuthContext";
 import { api } from "../api/client";
+import { getGuestHistory } from "@/lib/guestStorage";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
@@ -19,31 +20,42 @@ const itemVariants = {
 };
 
 export default function Dashboard({ onStartNew, onViewResults }) {
-  const { currentUser, logout } = useAuth();
+  const { currentUser, isGuest, logout } = useAuth();
   const [history, setHistory] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState("");
 
-  useEffect(() => {
-    const fetchHistory = async () => {
-      try {
-        setLoading(true);
-        const res = await api.getUserHistory();
-        if (res.status === "ok") {
-          setHistory(res.history || []);
-        } else {
-          setError(res.detail || "Failed to load history");
-        }
-      } catch (err) {
-        setError("Error connecting to server. Please try again later.");
-        console.error(err);
-      } finally {
+  const fetchHistory = async () => {
+    try {
+      setLoading(true);
+      setError("");
+      
+      // Guest users: load from local IndexedDB/localStorage
+      if (isGuest) {
+        const guestHistory = await getGuestHistory();
+        setHistory(guestHistory || []);
         setLoading(false);
+        return;
+      }
+      
+      // Google users: load from backend
+      const res = await api.getUserHistory();
+      if (res.status === "ok") {
+        setHistory(res.history || []);
+      } else {
+        setError(res.detail || "Failed to load history");
       }
-    };
+    } catch (err) {
+      setError(err.message || "Error connecting to server. Please try again later.");
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  };
 
+  useEffect(() => {
     fetchHistory();
-  }, []);
+  }, [isGuest]);
 
   const formatDate = (dateStr) => {
     if (!dateStr) return "Unknown date";
@@ -212,7 +224,14 @@ export default function Dashboard({ onStartNew, onViewResults }) {
                 ) : error ? (
                   <Card className="p-8 text-center bg-red-500/5 border-red-500/20">
                     <p className="text-red-400 mb-4">{error}</p>
-                    <Button variant="outline" className="border-red-500/30 text-red-400 hover:bg-red-500/10" onClick={() => window.location.reload()}>Retry</Button>
+                    <Button 
+                      variant="outline" 
+                      className="border-red-500/30 text-red-400 hover:bg-red-500/10" 
+                      onClick={fetchHistory}
+                      disabled={loading}
+                    >
+                      {loading ? 'Retrying...' : 'Retry'}
+                    </Button>
                   </Card>
                 ) : history.length === 0 ? (
                   <Card className="p-12 text-center bg-white/[0.02] border-white/5 border-dashed">

frontend/src/pages/Interview.jsx

@@ -44,6 +44,7 @@ export default function Interview({
   const [isListening, setIsListening] = useState(false);
   const [timeElapsed, setTimeElapsed] = useState(0);
   const [isAnswering, setIsAnswering] = useState(false);
+  const [submitError, setSubmitError] = useState(null);
   const streamRef = useRef(null);
   const textareaRef = useRef(null);
   const timerRef = useRef(null);
@@ -91,6 +92,15 @@ export default function Interview({
     onSkip();
   };
 
+  // Camera cleanup helper
+  const stopCamera = useCallback(() => {
+    if (streamRef.current) {
+      streamRef.current.getTracks().forEach(t => t.stop());
+      streamRef.current = null;
+    }
+    setCameraStream(null);
+  }, []);
+
   useEffect(() => {
     navigator.mediaDevices.getUserMedia({ video: true, audio: false })
       .then(s => {
@@ -98,16 +108,36 @@ export default function Interview({
         setCameraStream(s);
       })
       .catch(e => console.warn("Camera unavailable:", e));
+
+    // Cleanup on page unload (beforeunload)
+    const handleBeforeUnload = () => {
+      stopCamera();
+      if ('speechSynthesis' in window) window.speechSynthesis.cancel();
+    };
+
+    // Cleanup on visibility change (tab switch/close)
+    const handleVisibilityChange = () => {
+      if (document.hidden && streamRef.current) {
+        // Optional: pause camera when tab hidden to save resources
+        // streamRef.current.getVideoTracks().forEach(t => t.enabled = false);
+      }
+    };
+
+    window.addEventListener('beforeunload', handleBeforeUnload);
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+
     return () => {
-      streamRef.current?.getTracks().forEach(t => t.stop());
-      setCameraStream(null);
+      stopCamera();
+      window.removeEventListener('beforeunload', handleBeforeUnload);
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
     };
-  }, []);
+  }, [stopCamera]);
 
   useEffect(() => {
     setAnswer(""); 
     resetRec(); 
     setSub(false);
+    setSubmitError(null); // Clear any submission errors
     setIsListening(false);
     setTimeElapsed(0);
     setIsAnswering(false);
@@ -127,9 +157,17 @@ export default function Interview({
         timerRef.current = setInterval(() => {
           setTimeElapsed(prev => prev + 1);
         }, 1000);
-        
-        if (modeRef.current === "voice") {
-          startRecRef.current();
+
+        // Check current mode at callback time, not closure time
+        // User may have switched to text mode during TTS playback
+        const currentMode = modeRef.current;
+        if (currentMode === "voice" && audioEnabled) {
+          // Double-check: verify user didn't just switch modes
+          setTimeout(() => {
+            if (modeRef.current === "voice") {
+              startRecRef.current();
+            }
+          }, 50);
         }
       };
       
@@ -156,17 +194,26 @@ export default function Interview({
   const handleTextSubmit = async () => {
     if (!answer.trim() || submitting || loading || evaluating) return;
     setSub(true);
-    await onSubmitText(answer);
-    setSub(false);
+    setSubmitError(null);
+    try {
+      await onSubmitText(answer);
+    } catch (e) {
+      console.error("Text submission failed:", e);
+      setSubmitError(e.message || "Failed to submit answer. Please try again.");
+    } finally {
+      setSub(false);
+    }
   };
 
   const handleAudioSubmit = async () => {
     if (!audioBlob || submitting || loading || evaluating) return;
     setSub(true);
+    setSubmitError(null);
     try {
       await onSubmitAudio(audioBlob);
     } catch (e) {
       console.error("Audio submission failed:", e);
+      setSubmitError(e.message || "Failed to submit audio. Please try again.");
     } finally {
       setSub(false);
     }
@@ -408,6 +455,20 @@ export default function Interview({
                 </div>
               )}
 
+              {/* Submit Error Display */}
+              {submitError && (
+                <div className="mb-4 p-3 bg-semantic-error-bg border border-semantic-error/20 rounded-sm flex items-center gap-2 text-sm text-semantic-error animate-in">
+                  <AlertTriangle size={16} />
+                  <span>{submitError}</span>
+                  <button 
+                    onClick={() => setSubmitError(null)}
+                    className="ml-auto text-xs hover:underline"
+                  >
+                    Dismiss
+                  </button>
+                </div>
+              )}
+
               {/* Text Input */}
               {mode === "text" && (
                 <div className="space-y-4 animate-in">

frontend/src/pages/PreInterview.jsx

@@ -52,22 +52,37 @@ export default function PreInterview({ onBegin, setupData, sessionId }) {
 
   // Background question generation
   useEffect(() => {
-    if (!sessionId) return;
+    if (!sessionId) {
+      setGenError("No session found. Please go back and set up your interview again.");
+      setGenerating(false);
+      return;
+    }
     
     let cancelled = false;
+    const abortControllers = [];
+    
+    const createAbortableRequest = () => {
+      const controller = new AbortController();
+      abortControllers.push(controller);
+      return controller;
+    };
     
     const generateQuestions = async () => {
       try {
         setGenerating(true);
         
         // Post setup data to backend before generating plan
-        if (setupData) {
+        if (setupData && !cancelled) {
+          const jobController = createAbortableRequest();
           await api.setJobDescription({
             session_id: sessionId,
             job_role: setupData.jobRole || "",
             job_description: setupData.jobDescription || "",
             company: setupData.company || "",
           });
+          if (cancelled) return;
+          
+          const profileController = createAbortableRequest();
           await api.setCandidateProfile({
             session_id: sessionId,
             name: setupData.name || "",
@@ -75,6 +90,7 @@ export default function PreInterview({ onBegin, setupData, sessionId }) {
             experience: setupData.experience || "",
             education: setupData.education || "",
           });
+          if (cancelled) return;
         }
         
         const result = await api.generateDynamicInterview(sessionId);
@@ -89,20 +105,26 @@ export default function PreInterview({ onBegin, setupData, sessionId }) {
           }
         }
       } catch (e) {
+        if (cancelled) return;
         console.warn("Dynamic generation failed, falling back to static:", e);
-        if (!cancelled) {
-          try {
-            // FALLBACK: Generate static plan if dynamic fails
-            const fallback = await api.generatePlan(sessionId);
-            if (fallback.status === "ok") {
-              setQuestionsReady(true);
-              setGenError("Using standard questions (dynamic research failed)");
-            } else {
-              setGenError("Could not generate questions. Please try restarting.");
-            }
-          } catch (err) {
+        
+        try {
+          // FALLBACK: Generate static plan if dynamic fails
+          const fallback = await api.generatePlan(sessionId);
+          if (cancelled) return;
+          
+          if (fallback.status === "ok") {
+            setQuestionsReady(true);
+            setGenError("Using standard questions (dynamic research failed)");
+          } else {
+            setGenError("Could not generate questions. Please try restarting.");
+          }
+        } catch (err) {
+          if (!cancelled) {
             setGenError(err.message || "Failed to generate questions");
-          } finally {
+          }
+        } finally {
+          if (!cancelled) {
             setGenerating(false);
           }
         }
@@ -111,7 +133,17 @@ export default function PreInterview({ onBegin, setupData, sessionId }) {
     
     generateQuestions();
     
-    return () => { cancelled = true; };
+    return () => { 
+      cancelled = true;
+      // Abort any pending requests
+      abortControllers.forEach(controller => {
+        try {
+          controller.abort();
+        } catch (e) {
+          // Ignore abort errors
+        }
+      });
+    };
   }, [sessionId]);
 
   useEffect(() => {

frontend/src/pages/Processing.jsx

@@ -1,5 +1,7 @@
 import { useEffect, useState, useRef } from "react";
 import { api } from "../api/client";
+import { useAuth } from "../contexts/AuthContext";
+import { saveGuestInterview } from "@/lib/guestStorage";
 import "./Processing.css";
 
 const STEPS = [
@@ -10,6 +12,7 @@ const STEPS = [
 ];
 
 export default function Processing({ sessionId, onDone }) {
+  const { isGuest } = useAuth();
   const [currentStep, setCurrentStep] = useState(0);
   const [error, setError] = useState(null);
   const [completedSteps, setCompletedSteps] = useState([]);
@@ -41,6 +44,15 @@ export default function Processing({ sessionId, onDone }) {
         const report = await api.getReport(sessionId);
         setCompletedSteps(prev => [...prev, "report"]);
 
+        // Save to guest storage for guest users
+        if (isGuest && report) {
+          try {
+            await saveGuestInterview(sessionId, report);
+          } catch (e) {
+            console.warn("Failed to save guest interview:", e);
+          }
+        }
+
         // Small delay for UX so user sees the last step complete
         setTimeout(() => onDone(report), 800);
       } catch (err) {
@@ -50,7 +62,7 @@ export default function Processing({ sessionId, onDone }) {
     };
 
     runAnalysis();
-  }, [sessionId, onDone]);
+  }, [sessionId, onDone, isGuest]);
 
   const handleRetry = () => {
     setError(null);

frontend/src/pages/Setup.jsx

@@ -1,4 +1,4 @@
-import { useRef, useState, useCallback } from "react";
+import { useRef, useState, useCallback, useEffect } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { Upload, Check, AlertCircle, ArrowRight, FileText, ChevronLeft } from "lucide-react";
 import { useInterview } from "../contexts/InterviewContext";
@@ -90,6 +90,22 @@ export default function Setup({ onSubmit, loading: outerLoading, error: outerErr
   const [showDetails, setShowDetails] = useState(null); // 'skills' | 'projects' | null
   const fileRef = useRef();
 
+  // Ensure session exists on mount (for direct navigation or refresh)
+  useEffect(() => {
+    const ensureSession = async () => {
+      if (!iv.sessionId) {
+        try {
+          const sessionRes = await api.createSession();
+          iv.setSession(sessionRes.session_id);
+        } catch (err) {
+          console.error("Failed to create session:", err);
+          setParseError("Failed to initialize session. Please refresh and try again.");
+        }
+      }
+    };
+    ensureSession();
+  }, []);
+
   const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
 
   const handleFileSelect = useCallback(async (selectedFile) => {