pretty much ready to 'ship'.3

frontend/src/pages/History.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { useAuth } from '../context/AuthContext';
 import { useToast } from '../components/Toast';
 import api from '../api/axios';
@@ -17,9 +17,32 @@ function History() {
   const [showAllSessions, setShowAllSessions] = useState(false);
   const [deletingSession, setDeletingSession] = useState(null);
 
+  const loadSessions = useCallback(async () => {
+    try {
+      const response = await api.get('/sessions');
+      setSessions(response.data);
+    } catch (err) {
+      console.error('Failed to load sessions', err);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  const refreshSessionGames = useCallback(async (sessionId, silent = false) => {
+    try {
+      const response = await api.get(`/sessions/${sessionId}/games`);
+      // Reverse chronological order (most recent first)
+      setSessionGames(response.data.reverse());
+    } catch (err) {
+      if (!silent) {
+        console.error('Failed to load session games', err);
+      }
+    }
+  }, []);
+
   useEffect(() => {
     loadSessions();
-  }, []);
+  }, [loadSessions]);
 
   // Auto-select active session if navigating from picker
   useEffect(() => {
@@ -29,7 +52,7 @@ function History() {
         loadSessionGames(activeSession.id);
       }
     }
-  }, [sessions]);
+  }, [sessions, selectedSession]);
 
   // Poll for session list updates (to detect when sessions end/start)
   useEffect(() => {
@@ -38,7 +61,7 @@ function History() {
     }, 3000);
     
     return () => clearInterval(interval);
-  }, []);
+  }, [loadSessions]);
 
   // Poll for updates on active session games
   useEffect(() => {
@@ -49,22 +72,11 @@ function History() {
     
     // Refresh games every 3 seconds for active session
     const interval = setInterval(() => {
-      loadSessionGames(selectedSession, true); // silent refresh
+      refreshSessionGames(selectedSession, true); // silent refresh
     }, 3000);
     
     return () => clearInterval(interval);
-  }, [selectedSession, sessions]);
-
-  const loadSessions = async () => {
-    try {
-      const response = await api.get('/sessions');
-      setSessions(response.data);
-    } catch (err) {
-      console.error('Failed to load sessions', err);
-    } finally {
-      setLoading(false);
-    }
-  };
+  }, [selectedSession, sessions, refreshSessionGames]);
 
   const handleExport = async (sessionId, format) => {
     try {