pretty much ready to 'ship'.3

frontend/src/pages/Picker.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useAuth } from '../context/AuthContext';
 import api from '../api/axios';
@@ -42,29 +42,31 @@ function Picker() {
   // Exclude previously played games
   const [excludePlayedGames, setExcludePlayedGames] = useState(false);
 
-  useEffect(() => {
-    // Wait for auth to finish loading before checking authentication
-    if (authLoading) return;
-    
-    if (!isAuthenticated) {
-      navigate('/login');
-      return;
+  const checkActiveSession = useCallback(async () => {
+    try {
+      const sessionResponse = await api.get('/sessions/active');
+      const session = sessionResponse.data?.session !== undefined 
+        ? sessionResponse.data.session 
+        : sessionResponse.data;
+      
+      // Check if session status changed
+      setActiveSession(prevSession => {
+        // If we had a session but now don't, mark it as ended
+        if (prevSession && (!session || !session.id)) {
+          setSessionEnded(true);
+          return null;
+        } else if (session && session.id) {
+          setSessionEnded(false);
+          return session;
+        }
+        return prevSession;
+      });
+    } catch (err) {
+      console.error('Failed to check session status', err);
     }
-    loadData();
-  }, [isAuthenticated, authLoading, navigate]);
+  }, []);
 
-  // Poll for active session status changes
-  useEffect(() => {
-    if (!isAuthenticated || authLoading) return;
-    
-    const interval = setInterval(() => {
-      checkActiveSession();
-    }, 3000);
-    
-    return () => clearInterval(interval);
-  }, [isAuthenticated, authLoading]);
-
-  const loadData = async () => {
+  const loadData = useCallback(async () => {
     try {
       // Load active session
       const sessionResponse = await api.get('/sessions/active');
@@ -85,27 +87,29 @@ function Picker() {
     } finally {
       setLoading(false);
     }
-  };
+  }, []);
 
-  const checkActiveSession = async () => {
-    try {
-      const sessionResponse = await api.get('/sessions/active');
-      const session = sessionResponse.data?.session !== undefined 
-        ? sessionResponse.data.session 
-        : sessionResponse.data;
-      
-      // If we had a session but now don't, mark it as ended
-      if (activeSession && (!session || !session.id)) {
-        setSessionEnded(true);
-        setActiveSession(null);
-      } else if (session && session.id) {
-        setActiveSession(session);
-        setSessionEnded(false);
-      }
-    } catch (err) {
-      console.error('Failed to check session status', err);
+  useEffect(() => {
+    // Wait for auth to finish loading before checking authentication
+    if (authLoading) return;
+    
+    if (!isAuthenticated) {
+      navigate('/login');
+      return;
     }
-  };
+    loadData();
+  }, [isAuthenticated, authLoading, navigate, loadData]);
+
+  // Poll for active session status changes
+  useEffect(() => {
+    if (!isAuthenticated || authLoading) return;
+    
+    const interval = setInterval(() => {
+      checkActiveSession();
+    }, 3000);
+    
+    return () => clearInterval(interval);
+  }, [isAuthenticated, authLoading, checkActiveSession]);
 
   const handleCreateSession = async () => {
     try {
@@ -727,11 +731,7 @@ function SessionInfo({ sessionId, onGamesUpdate }) {
   const [confirmingRemove, setConfirmingRemove] = useState(null);
   const [showPopularity, setShowPopularity] = useState(true);
 
-  useEffect(() => {
-    loadGames();
-  }, [sessionId, onGamesUpdate]);
-
-  const loadGames = async () => {
+  const loadGames = useCallback(async () => {
     try {
       const response = await api.get(`/sessions/${sessionId}/games`);
       // Reverse chronological order (most recent first)
@@ -741,7 +741,20 @@ function SessionInfo({ sessionId, onGamesUpdate }) {
     } finally {
       setLoading(false);
     }
-  };
+  }, [sessionId]);
+
+  useEffect(() => {
+    loadGames();
+  }, [sessionId, onGamesUpdate, loadGames]);
+
+  // Auto-refresh games list every 3 seconds
+  useEffect(() => {
+    const interval = setInterval(() => {
+      loadGames();
+    }, 3000);
+    
+    return () => clearInterval(interval);
+  }, [loadGames]);
 
   const handleUpdateStatus = async (gameId, newStatus) => {
     try {
@@ -815,8 +828,8 @@ function SessionInfo({ sessionId, onGamesUpdate }) {
         <p className="text-gray-500 dark:text-gray-400">No games played yet. Pick a game to get started!</p>
       ) : (
         <div className="space-y-2 max-h-96 overflow-y-auto">
-          {games.map((game) => {
-            const index = games.length - games.indexOf(game);
+          {games.map((game, index) => {
+            const displayNumber = games.length - index;
             return (
             <div 
               key={game.id} 
@@ -836,7 +849,7 @@ function SessionInfo({ sessionId, onGamesUpdate }) {
                         ? 'text-gray-500 dark:text-gray-500 line-through' 
                         : 'text-gray-700 dark:text-gray-200'
                     }`}>
-                      {index + 1}. {game.title}
+                      {displayNumber}. {game.title}
                     </span>
                     {getStatusBadge(game.status)}
                     {game.manually_added === 1 && (