feat: add 'Drill from Position' functionality to the analysis screen

Author: David Wager

src/components/Analysis/ConfigurableScreens.tsx

@@ -20,6 +20,7 @@ interface Props {
   onDeleteCustomGame?: () => void
   onAnalyzeEntireGame?: () => void
   onLearnFromMistakes?: () => void
+  onDrillFromPosition?: () => void
   isAnalysisInProgress?: boolean
   isLearnFromMistakesActive?: boolean
   autoSave?: {
@@ -51,6 +52,7 @@ export const ConfigurableScreens: React.FC<Props> = ({
   onDeleteCustomGame,
   onAnalyzeEntireGame,
   onLearnFromMistakes,
+  onDrillFromPosition,
   isAnalysisInProgress,
   isLearnFromMistakesActive,
   autoSave,
@@ -161,6 +163,7 @@ export const ConfigurableScreens: React.FC<Props> = ({
             onDeleteCustomGame={onDeleteCustomGame}
             onAnalyzeEntireGame={onAnalyzeEntireGame}
             onLearnFromMistakes={onLearnFromMistakes}
+            onDrillFromPosition={onDrillFromPosition}
             isAnalysisInProgress={isAnalysisInProgress}
             isLearnFromMistakesActive={isLearnFromMistakesActive}
             autoSave={autoSave}

src/components/Analysis/ConfigureAnalysis.tsx

@@ -12,6 +12,7 @@ interface Props {
   onDeleteCustomGame?: () => void
   onAnalyzeEntireGame?: () => void
   onLearnFromMistakes?: () => void
+  onDrillFromPosition?: () => void
   isAnalysisInProgress?: boolean
   isLearnFromMistakesActive?: boolean
   autoSave?: {
@@ -30,6 +31,7 @@ export const ConfigureAnalysis: React.FC<Props> = ({
   onDeleteCustomGame,
   onAnalyzeEntireGame,
   onLearnFromMistakes,
+  onDrillFromPosition,
   isAnalysisInProgress = false,
   isLearnFromMistakesActive = false,
   autoSave,
@@ -90,6 +92,17 @@ export const ConfigureAnalysis: React.FC<Props> = ({
           </div>
         </button>
       )}
+      {onDrillFromPosition && (
+        <button
+          onClick={onDrillFromPosition}
+          className="flex w-full items-center gap-1.5 rounded-sm bg-human-4/60 !px-2 !py-1 !text-sm text-primary/70 transition duration-200 hover:bg-human-4/80 hover:text-primary"
+        >
+          <div className="flex items-center justify-center gap-1.5">
+            <span className="material-symbols-outlined !text-sm">explore</span>
+            <span className="text-xs">Drill from this position</span>
+          </div>
+        </button>
+      )}
       {autoSave &&
         game.type !== 'custom-pgn' &&
         game.type !== 'custom-fen' &&

src/hooks/useOpeningDrillController/useOpeningDrillController.ts

@@ -169,7 +169,9 @@ export const useOpeningDrillController = (
 
     setAnalysisProgress({ total: 0, completed: 0, currentMove: null })
 
+    // Use custom FEN if available, otherwise default starting position
     const startingFen =
+      currentDrill.opening.fen ||
       'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1'
     const gameTree = new GameTree(startingFen)
 

src/pages/analysis/[...id].tsx

@@ -463,6 +463,35 @@ const Analysis: React.FC<Props> = ({
     setAnalysisEnabled(true) // Auto-enable analysis when stopping learn mode
   }, [controller.learnFromMistakes])
 
+  const handleDrillFromPosition = useCallback(() => {
+    const fen = controller.currentNode?.fen as string
+    const turn = controller.currentNode?.turn || 'w'
+    const path = controller.currentNode?.getPath()
+
+    let pgn = ''
+    path?.forEach((node, index) => {
+      if (index === 0) return // Skip the root node
+      const moveIndex = index - 1
+      if (moveIndex % 2 === 0) {
+        pgn += `${Math.floor(moveIndex / 2) + 1}. `
+      }
+      pgn += node.san + ' '
+    })
+    pgn = pgn.trim()
+
+    if (!fen) return
+
+    // Navigate to openings page with current position as starting FEN
+    const url =
+      '/openings?mode=drill-from-position&fen=' +
+      encodeURIComponent(fen) +
+      '&turn=' +
+      encodeURIComponent(turn) +
+      '&pgn=' +
+      encodeURIComponent(pgn)
+    router.push(url)
+  }, [controller.currentNode, router])
+
   const handleShowSolution = useCallback(() => {
     controller.learnFromMistakes.showSolution()
     setAnalysisEnabled(true) // Auto-enable analysis when showing solution
@@ -922,6 +951,7 @@ const Analysis: React.FC<Props> = ({
             onDeleteCustomGame={handleDeleteCustomGame}
             onAnalyzeEntireGame={handleAnalyzeEntireGame}
             onLearnFromMistakes={handleLearnFromMistakes}
+            onDrillFromPosition={handleDrillFromPosition}
             isAnalysisInProgress={controller.gameAnalysis.progress.isAnalyzing}
             isLearnFromMistakesActive={
               controller.learnFromMistakes.state.isActive

src/pages/openings/index.tsx

@@ -21,9 +21,10 @@ import {
   AuthContext,
   MaiaEngineContext,
 } from 'src/contexts'
-import { DrillConfiguration, AnalyzedGame } from 'src/types'
+import { DrillConfiguration, AnalyzedGame, OpeningSelection } from 'src/types'
 import { GameNode } from 'src/types/base/tree'
 import { MIN_STOCKFISH_DEPTH } from 'src/constants/analysis'
+import { MAIA_MODELS } from 'src/constants/common'
 import openings from 'src/lib/openings/openings.json'
 
 const LazyOpeningDrillAnalysis = lazy(() =>
@@ -59,7 +60,12 @@ import {
 const OpeningsPage: NextPage = () => {
   const router = useRouter()
   const { user } = useContext(AuthContext)
-  const [showSelectionModal, setShowSelectionModal] = useState(true)
+  const { mode, fen, turn, pgn } = router.query // Extract mode, fen and turn from query parameters
+
+  const isDrillFromPosition = mode === 'drill-from-position' && fen
+
+  const [showSelectionModal, setShowSelectionModal] =
+    useState(!isDrillFromPosition)
   const [isReopenedModal, setIsReopenedModal] = useState(false)
 
   const handleCloseModal = () => {
@@ -69,8 +75,49 @@ const OpeningsPage: NextPage = () => {
       router.push('/')
     }
   }
+
+  // Create drill configuration for drill-from-position mode
+  const createCustomDrillConfiguration = useCallback(
+    (fenPosition: string, turn: string, pgn: string): DrillConfiguration => {
+      const customSelection: OpeningSelection = {
+        id: `custom-position-${Date.now()}`,
+        opening: {
+          id: 'custom',
+          name: 'Custom Position',
+          description: 'Drill from analysis position',
+          fen: fenPosition, // Use the custom FEN as starting position
+          pgn: pgn, // Use the provided PGN
+          variations: [],
+        },
+        variation: null,
+        playerColor: turn === 'b' ? 'black' : 'white', // Default to white if not specified
+        maiaVersion: MAIA_MODELS[0], // Default Maia model
+        targetMoveNumber: 10, // Default target moves
+      }
+
+      return {
+        selections: [customSelection],
+        drillCount: 1,
+        drillSequence: [customSelection],
+      }
+    },
+    [],
+  )
+
+  // Initialize drill configuration based on mode
   const [drillConfiguration, setDrillConfiguration] =
-    useState<DrillConfiguration | null>(null)
+    useState<DrillConfiguration | null>(() => {
+      if (
+        isDrillFromPosition &&
+        typeof fen === 'string' &&
+        typeof turn === 'string' &&
+        typeof pgn === 'string'
+      ) {
+        return createCustomDrillConfiguration(fen, turn, pgn)
+      }
+      return null
+    })
+
   const [promotionFromTo, setPromotionFromTo] = useState<
     [string, string] | null
   >(null)
@@ -658,9 +705,10 @@ const OpeningsPage: NextPage = () => {
 
   // Show selection modal when no drill configuration exists (after model is ready)
   if (
-    !drillConfiguration ||
-    drillConfiguration.selections.length === 0 ||
-    showSelectionModal
+    (!drillConfiguration ||
+      drillConfiguration.selections.length === 0 ||
+      showSelectionModal) &&
+    !isDrillFromPosition // Don't show selection modal in drill-from-position mode
   ) {
     return (
       <>
@@ -1072,10 +1120,18 @@ const OpeningsPage: NextPage = () => {
   return (
     <>
       <Head>
-        <title>Opening Drills – Maia Chess</title>
+        <title>
+          {isDrillFromPosition
+            ? 'Drill from Position – Maia Chess'
+            : 'Opening Drills – Maia Chess'}
+        </title>
         <meta
           name="description"
-          content="Master chess openings with interactive drills against Maia AI. Practice popular openings, learn key variations, and get performance analysis to improve your opening repertoire."
+          content={
+            isDrillFromPosition
+              ? 'Practice from your analysis position with Maia AI. Continue playing from where you left off and improve your technique in real positions.'
+              : 'Master chess openings with interactive drills against Maia AI. Practice popular openings, learn key variations, and get performance analysis to improve your opening repertoire.'
+          }
         />
       </Head>
       <TreeControllerContext.Provider