Merge pull request #158 from CSSLab/copilot/fix-154

Implement client-side Stockfish/Maia analysis caching with auto-save and load functionality

Author: kevinjosethomas

src/api/analysis/analysis.ts

@@ -662,3 +662,59 @@ export const getAnalyzedUserGame = async (
     type: 'brain',
   } as AnalyzedGame
 }
+
+export interface EngineAnalysisPosition {
+  ply: number
+  fen: string
+  maia?: { [rating: string]: MaiaEvaluation }
+  stockfish?: {
+    depth: number
+    cp_vec: { [move: string]: number }
+  }
+}
+
+export const storeEngineAnalysis = async (
+  gameId: string,
+  analysisData: EngineAnalysisPosition[],
+): Promise<void> => {
+  const res = await fetch(
+    buildUrl(`analysis/store_engine_analysis/${gameId}`),
+    {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(analysisData),
+    },
+  )
+
+  if (res.status === 401) {
+    throw new Error('Unauthorized')
+  }
+
+  if (!res.ok) {
+    throw new Error('Failed to store engine analysis')
+  }
+}
+
+// Retrieve stored engine analysis from backend
+export const getEngineAnalysis = async (
+  gameId: string,
+): Promise<{ positions: EngineAnalysisPosition[] } | null> => {
+  const res = await fetch(buildUrl(`analysis/get_engine_analysis/${gameId}`))
+
+  if (res.status === 401) {
+    throw new Error('Unauthorized')
+  }
+
+  if (res.status === 404) {
+    // No stored analysis found
+    return null
+  }
+
+  if (!res.ok) {
+    throw new Error('Failed to retrieve engine analysis')
+  }
+
+  return res.json()
+}

src/components/Analysis/ConfigurableScreens.tsx

@@ -14,6 +14,11 @@ interface Props {
   onDeleteCustomGame?: () => void
   onAnalyzeEntireGame?: () => void
   isAnalysisInProgress?: boolean
+  autoSave?: {
+    hasUnsavedChanges: boolean
+    isSaving: boolean
+    status: 'saving' | 'unsaved' | 'saved'
+  }
 }
 
 export const ConfigurableScreens: React.FC<Props> = ({
@@ -26,6 +31,7 @@ export const ConfigurableScreens: React.FC<Props> = ({
   onDeleteCustomGame,
   onAnalyzeEntireGame,
   isAnalysisInProgress,
+  autoSave,
 }) => {
   const screens = [
     {
@@ -82,6 +88,7 @@ export const ConfigurableScreens: React.FC<Props> = ({
             onDeleteCustomGame={onDeleteCustomGame}
             onAnalyzeEntireGame={onAnalyzeEntireGame}
             isAnalysisInProgress={isAnalysisInProgress}
+            autoSave={autoSave}
           />
         ) : screen.id === 'export' ? (
           <div className="flex w-full flex-col p-3">

src/components/Analysis/ConfigureAnalysis.tsx

@@ -1,6 +1,4 @@
-import Link from 'next/link'
 import React from 'react'
-import { useLocalStorage } from 'src/hooks'
 import { AnalyzedGame } from 'src/types'
 
 import { ContinueAgainstMaia } from 'src/components'
@@ -14,6 +12,11 @@ interface Props {
   onDeleteCustomGame?: () => void
   onAnalyzeEntireGame?: () => void
   isAnalysisInProgress?: boolean
+  autoSave?: {
+    hasUnsavedChanges: boolean
+    isSaving: boolean
+    status: 'saving' | 'unsaved' | 'saved'
+  }
 }
 
 export const ConfigureAnalysis: React.FC<Props> = ({
@@ -25,6 +28,7 @@ export const ConfigureAnalysis: React.FC<Props> = ({
   onDeleteCustomGame,
   onAnalyzeEntireGame,
   isAnalysisInProgress = false,
+  autoSave,
 }: Props) => {
   const isCustomGame = game.type === 'custom-pgn' || game.type === 'custom-fen'
 
@@ -66,6 +70,43 @@ export const ConfigureAnalysis: React.FC<Props> = ({
           </div>
         </button>
       )}
+      {autoSave &&
+        game.type !== 'custom-pgn' &&
+        game.type !== 'custom-fen' &&
+        game.type !== 'tournament' && (
+          <div className="mt-2 w-full">
+            <div className="flex items-center gap-1.5">
+              {autoSave.status === 'saving' && (
+                <>
+                  <div className="h-2 w-2 animate-spin rounded-full border border-secondary border-t-primary"></div>
+                  <span className="text-xs text-secondary">
+                    Saving analysis...
+                  </span>
+                </>
+              )}
+              {autoSave.status === 'unsaved' && (
+                <>
+                  <span className="material-symbols-outlined !text-sm text-orange-400">
+                    sync_problem
+                  </span>
+                  <span className="text-xs text-orange-400">
+                    Unsaved analysis. Will auto-save...
+                  </span>
+                </>
+              )}
+              {autoSave.status === 'saved' && (
+                <>
+                  <span className="material-symbols-outlined !text-sm text-green-400">
+                    cloud_done
+                  </span>
+                  <span className="text-xs text-green-400">
+                    Analysis auto-saved
+                  </span>
+                </>
+              )}
+            </div>
+          </div>
+        )}
       {isCustomGame && onDeleteCustomGame && (
         <div className="mt-2 w-full">
           <button

src/hooks/useAnalysisController/useAnalysisController.ts

@@ -19,6 +19,11 @@ import { useMoveRecommendations } from './useMoveRecommendations'
 import { MaiaEngineContext } from 'src/contexts/MaiaEngineContext'
 import { generateColorSanMapping, calculateBlunderMeter } from './utils'
 import { StockfishEngineContext } from 'src/contexts/StockfishEngineContext'
+import {
+  collectEngineAnalysisData,
+  generateAnalysisCacheKey,
+} from 'src/lib/analysisStorage'
+import { storeEngineAnalysis } from 'src/api/analysis/analysis'
 
 export interface GameAnalysisProgress {
   currentMoveIndex: number
@@ -36,6 +41,7 @@ export interface GameAnalysisConfig {
 export const useAnalysisController = (
   game: AnalyzedGame,
   initialOrientation?: 'white' | 'black',
+  enableAutoSave = true,
 ) => {
   const defaultOrientation = initialOrientation
     ? initialOrientation
@@ -74,6 +80,110 @@ export const useAnalysisController = (
     currentNode: null,
   })
 
+  const [lastSavedCacheKey, setLastSavedCacheKey] = useState<string>('')
+  const [hasUnsavedAnalysis, setHasUnsavedAnalysis] = useState(false)
+  const [isAutoSaving, setIsAutoSaving] = useState(false)
+  const autoSaveTimerRef = useRef<NodeJS.Timeout | null>(null)
+
+  const saveAnalysisToBackend = useCallback(async () => {
+    if (
+      !enableAutoSave ||
+      !game.id ||
+      game.type === 'custom-pgn' ||
+      game.type === 'custom-fen' ||
+      game.type === 'tournament'
+    ) {
+      return
+    }
+
+    // Don't save if there are no unsaved changes
+    if (!hasUnsavedAnalysis) {
+      return
+    }
+
+    try {
+      setIsAutoSaving(true)
+      const analysisData = collectEngineAnalysisData(game.tree)
+
+      if (analysisData.length === 0) {
+        setIsAutoSaving(false)
+        return
+      }
+
+      const hasMeaningfulAnalysis = analysisData.some(
+        (pos) => (pos.stockfish && pos.stockfish.depth >= 12) || pos.maia,
+      )
+
+      if (!hasMeaningfulAnalysis) {
+        setIsAutoSaving(false)
+        return
+      }
+
+      const cacheKey = generateAnalysisCacheKey(analysisData)
+      if (cacheKey === lastSavedCacheKey) {
+        setIsAutoSaving(false)
+        return
+      }
+
+      await storeEngineAnalysis(game.id, analysisData)
+      setLastSavedCacheKey(cacheKey)
+      setHasUnsavedAnalysis(false) // Mark as saved
+      console.log(
+        'Analysis saved to backend:',
+        analysisData.length,
+        'positions',
+      )
+    } catch (error) {
+      console.warn('Failed to save analysis to backend:', error)
+      // Don't show error to user as this is background functionality
+    } finally {
+      setIsAutoSaving(false)
+    }
+  }, [
+    enableAutoSave,
+    game.id,
+    game.type,
+    game.tree,
+    lastSavedCacheKey,
+    hasUnsavedAnalysis,
+  ])
+
+  const saveAnalysisToBackendRef = useRef(saveAnalysisToBackend)
+  saveAnalysisToBackendRef.current = saveAnalysisToBackend
+
+  useEffect(() => {
+    setHasUnsavedAnalysis(false)
+    setIsAutoSaving(false)
+    setLastSavedCacheKey('')
+  }, [game.id, game.type])
+
+  useEffect(() => {
+    if (analysisState > 0) {
+      setHasUnsavedAnalysis(true)
+    }
+  }, [analysisState])
+
+  useEffect(() => {
+    if (!enableAutoSave) {
+      return
+    }
+
+    if (autoSaveTimerRef.current) {
+      clearInterval(autoSaveTimerRef.current)
+    }
+
+    autoSaveTimerRef.current = setInterval(() => {
+      saveAnalysisToBackendRef.current()
+    }, 10000)
+
+    return () => {
+      if (autoSaveTimerRef.current) {
+        clearInterval(autoSaveTimerRef.current)
+      }
+      saveAnalysisToBackendRef.current()
+    }
+  }, [game.id, enableAutoSave])
+
   // Simple batch analysis functions that reuse existing analysis infrastructure
   const startGameAnalysis = useCallback(
     async (targetDepth: number) => {
@@ -362,6 +472,16 @@ export const useAnalysisController = (
       cancelAnalysis: cancelGameAnalysis,
       resetProgress: resetGameAnalysisProgress,
       isEnginesReady: stockfish.isReady() && maia.status === 'ready',
+      saveAnalysis: saveAnalysisToBackend,
+      autoSave: {
+        hasUnsavedChanges: hasUnsavedAnalysis,
+        isSaving: isAutoSaving,
+        status: isAutoSaving
+          ? ('saving' as const)
+          : hasUnsavedAnalysis
+            ? ('unsaved' as const)
+            : ('saved' as const),
+      },
     },
   }
 }