feat(1d4_web): annotate board with arrows/highlights for active motif

[aaylward]

Background

When a motif occurrence is selected in the game detail panel, the board currently highlights the from/to squares of the move with a colored tint. This gives a rough sense of where the action happened but doesn't communicate the tactical idea (e.g. which piece is forked, which piece is pinning, what square is being attacked).

Proposed improvement

Use react-chessboard's customArrows prop to draw arrows on the board that visually explain the motif in the current position. Examples:

• fork: arrows from the forking piece to each forked piece
• pin: arrow from the pinning piece through the pinned piece to the target behind it
• skewer: similar to pin
• discovered attack: arrow from the piece that moves and arrow from the piece that was unblocked
• check / double check: arrow(s) to the king
• back rank mate / smothered mate: arrow to the mated king

The motif type and the move (from/to squares) are already available. Additional squares (e.g. the two targets of a fork) would need to come from the backend occurrence data or be inferred from the position using chess.js.

Scope options

1. Minimal: just draw a single colored arrow for the move itself (from → to), color-coded by motif type — already better than square highlights alone
2. Full: augment OccurrenceRow with an optional annotations field (list of {from, to} pairs) that the analysis backend populates, and render all of them as arrows

Related

• react-chessboard docs: customArrows accepts [fromSquare, toSquare, color?][]
• Current occurrence data: OccurrenceRow in domains/games/apps/1d4_web/src/types.ts
• Rendering: GameDetailPanel.tsx — squareStyles / Chessboard props