feat(web): eval graph — clickable sparkline of game evaluation

SVG eval graph showing position evaluation across the whole game:
- White area = white advantage, dark area = black advantage
- Blue cursor line tracks current move
- Click anywhere on the graph to jump to that position
- Shown on both mobile (below board) and desktop (right panel)
- Only renders when eval metadata exists (after Analyze Game)
- Evals clamped to ±5 pawns, mate scores shown as ±10

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: bmarini

web/components/ChessApp.tsx

@@ -9,6 +9,7 @@ import PGNInput from './PGNInput'
 import GameInfo from './GameInfo'
 import Icon from './Icon'
 import EvalBar from './EvalBar'
+import EvalGraph from './EvalGraph'
 import { Position } from '@chess/board'
 import { useChessGame } from '@/hooks/useChessGame'
 import { useEngine } from '@/hooks/useEngine'
@@ -392,6 +393,15 @@ export default function ChessApp() {
                 </div>
               </div>
 
+              {/* Mobile eval graph */}
+              <div className="w-full lg:hidden">
+                <EvalGraph
+                  transitions={chess.mainTransitions}
+                  halfmove={chess.isInVariation ? 0 : chess.halfmove}
+                  onJump={chess.jumpTo}
+                />
+              </div>
+
               {/* Mobile move strip + annotation */}
               <div className="w-full lg:hidden">
                 <div className="border-y border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900">
@@ -526,6 +536,11 @@ export default function ChessApp() {
               </button>
             </div>
             <GameInfo game={activeGame.game} detectedOpening={detectedOpening} />
+            <EvalGraph
+              transitions={chess.mainTransitions}
+              halfmove={chess.isInVariation ? 0 : chess.halfmove}
+              onJump={chess.jumpTo}
+            />
             <div className="flex-1 overflow-hidden p-3">
               <MoveList
                 transitions={chess.mainTransitions}

web/components/EvalGraph.tsx

@@ -0,0 +1,111 @@
+'use client'
+
+import { useMemo } from 'react'
+import type { Transition } from '@chess/types'
+
+type Props = {
+  transitions: Transition[]
+  halfmove: number
+  onJump: (n: number) => void
+}
+
+function parseEval(evalStr: string | undefined): number | null {
+  if (!evalStr) return null
+  if (evalStr.startsWith('#')) {
+    const mate = parseInt(evalStr.slice(1), 10)
+    return mate > 0 ? 10 : -10 // cap mate scores at ±10 pawns
+  }
+  const n = parseFloat(evalStr)
+  return isNaN(n) ? null : n
+}
+
+/**
+ * Eval graph showing position evaluation across the whole game.
+ * Click to jump to a specific move.
+ */
+export default function EvalGraph({ transitions, halfmove, onJump }: Props) {
+  const evals = useMemo(() => {
+    return transitions.map(t => parseEval(t.metadata?.eval))
+  }, [transitions])
+
+  // Only render if we have at least some eval data
+  const hasData = evals.some(e => e !== null)
+  if (!hasData) return null
+
+  const n = evals.length
+  const viewW = 400
+  const viewH = 60
+  const midY = viewH / 2
+
+  // Clamp evals to ±5 pawns for display
+  const clamp = 5
+  const toY = (val: number | null) => {
+    if (val === null) return midY
+    const clamped = Math.max(-clamp, Math.min(clamp, val))
+    return midY - (clamped / clamp) * (midY - 2)
+  }
+
+  // Build the area path — fill white advantage area
+  const points = evals.map((e, i) => {
+    const x = (i / Math.max(n - 1, 1)) * viewW
+    const y = toY(e)
+    return { x, y }
+  })
+
+  // SVG path: top edge (evals), then bottom edge (midline)
+  const areaPath = [
+    `M 0 ${midY}`,
+    ...points.map(p => `L ${p.x} ${p.y}`),
+    `L ${viewW} ${midY}`,
+    'Z',
+  ].join(' ')
+
+  // Cursor position
+  const cursorX = halfmove > 0 && halfmove <= n
+    ? ((halfmove - 1) / Math.max(n - 1, 1)) * viewW
+    : null
+
+  return (
+    <div className="w-full">
+      <svg
+        viewBox={`0 0 ${viewW} ${viewH}`}
+        className="w-full h-10 lg:h-14 cursor-pointer"
+        preserveAspectRatio="none"
+        onClick={(e) => {
+          const rect = e.currentTarget.getBoundingClientRect()
+          const x = e.clientX - rect.left
+          const pct = x / rect.width
+          const move = Math.round(pct * (n - 1)) + 1
+          onJump(Math.max(1, Math.min(n, move)))
+        }}
+      >
+        {/* Background */}
+        <rect x="0" y="0" width={viewW} height={midY} fill="rgba(0,0,0,0.06)" />
+        <rect x="0" y={midY} width={viewW} height={midY} fill="rgba(255,255,255,0.06)" />
+
+        {/* Center line */}
+        <line x1="0" y1={midY} x2={viewW} y2={midY}
+          stroke="currentColor" strokeWidth="0.5" opacity="0.2" />
+
+        {/* Eval area — white advantage is below midline (positive eval = white winning) */}
+        <path d={areaPath} fill="rgba(255,255,255,0.5)" />
+
+        {/* Eval line */}
+        <polyline
+          points={points.map(p => `${p.x},${p.y}`).join(' ')}
+          fill="none"
+          stroke="rgba(100,100,100,0.6)"
+          strokeWidth="1"
+          vectorEffect="non-scaling-stroke"
+        />
+
+        {/* Move cursor */}
+        {cursorX !== null && (
+          <line x1={cursorX} y1="0" x2={cursorX} y2={viewH}
+            stroke="rgba(59,130,246,0.8)" strokeWidth="1.5"
+            vectorEffect="non-scaling-stroke" />
+        )}
+      </svg>
+    </div>
+  )
+}