fix(arena): backfill recent W/L form on leaderboard load (#58)

The leaderboard's 🔥/loss form strip only accrued from MatchSettled events
that fired while the page was open — historical results were read but never
fed into recentResultsRef, so the strip started empty on every load and the
per-row lengths were inconsistent.

- useArenaEngine: query MatchCreated history to learn each match's
  participants, then backfill recent W/L (newest-first) from the historical
  MatchSettled walk. Live handling unchanged; historical matches stay deduped
  via seenMatchSettled so they aren't double-counted.
- LeaderboardPanel: render a fixed 5-cell strip (pad short histories with
  placeholder dots) and distinguish loss (red ✕) from no-game-yet (dim ·).

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

Author: seven-feng

frontend/src/components/arena/LeaderboardPanel.tsx

@@ -106,16 +106,20 @@ export function LeaderboardPanel() {
                 </div>
                 <div className="flex items-center justify-between mt-0.5">
                   <div className="flex gap-0.5">
-                    {(g.recentResults.length > 0 ? g.recentResults : ['·','·','·','·','·']).slice(0, 5).map((r, i) => (
+                    {/* Always 5 cells: recent results (newest-first) padded with
+                        empty placeholders so every row reads as a fixed-width form
+                        strip. 🔥 = win, ✕ = loss, · = no game yet. */}
+                    {Array.from({ length: 5 }, (_, i) => g.recentResults[i] ?? null).map((r, i) => (
                       <span
                         key={i}
-                        className={
+                        className={[
+                          'leading-none',
                           r === 'W' ? 'text-emerald-400' :
                           r === 'L' ? 'text-rose-400' :
-                          'text-zinc-700'
-                        }
+                          'text-zinc-700',
+                        ].join(' ')}
                       >
-                        {r === 'W' ? '🔥' : r === 'L' ? '·' : '·'}
+                        {r === 'W' ? '🔥' : r === 'L' ? '✕' : '·'}
                       </span>
                     ))}
                   </div>

frontend/src/hooks/useArenaEngine.ts

@@ -216,12 +216,26 @@ export function useArenaEngine() {
       const latest = await provider.getBlockNumber();
       const from = Math.max(0, latest - EVENT_LOOKBACK_BLOCKS);
 
-      // MatchCreated events are intentionally NOT upserted here.
-      // The walk loop calls getMatch() which provides correct bench data.
-      // Upserting from MatchCreated would write attackerBench:[0,0,0,0,0],
-      // causing a premature render with empty slots before real data arrives.
+      // MatchCreated events are intentionally NOT upserted here (the walk loop
+      // calls getMatch() for correct bench data — upserting empty benches would
+      // render premature empty slots). We DO read them to learn each match's
+      // participants, so the settled loop below can identify the loser and
+      // backfill recent W/L form. Without this, recentResults starts empty on
+      // load and only accrues from matches that settle while the page is open.
+      const participants: Record<number, { attackerId: number; defenderId: number }> = {};
+      try {
+        const createdFilter = arena.filters.MatchCreated();
+        const createdEvents = await arena.queryFilter(createdFilter, from, latest);
+        for (const ev of createdEvents) {
+          if (!(ev instanceof EventLog)) continue;
+          const a = ev.args!;
+          participants[Number(a[0])] = { attackerId: Number(a[1]), defenderId: Number(a[2]) };
+        }
+      } catch (e) { console.warn('[arena] MatchCreated history fetch failed', e); }
 
-      // MatchSettled — drives highlight detection
+      // MatchSettled — drives highlight detection + recent-form backfill.
+      // queryFilter returns logs oldest-first; recentResults is most-recent-first,
+      // so prepending each result in iteration order leaves the newest at index 0.
       try {
         const settledFilter = arena.filters.MatchSettled();
         const events = await arena.queryFilter(settledFilter, from, latest);
@@ -249,6 +263,18 @@ export function useArenaEngine() {
             loserEloAfter: newLoseElo,
           });
           seenMatchSettled.current.add(matchId);
+
+          // Backfill recent W/L. Loser = the participant that isn't the winner.
+          const pair = participants[matchId];
+          const loserId = pair
+            ? (pair.attackerId === winnerId ? pair.defenderId : pair.attackerId)
+            : 0;
+          if (winnerId) {
+            recentResultsRef.current[winnerId] = ['W' as const, ...(recentResultsRef.current[winnerId] ?? [])].slice(0, 5);
+          }
+          if (loserId) {
+            recentResultsRef.current[loserId] = ['L' as const, ...(recentResultsRef.current[loserId] ?? [])].slice(0, 5);
+          }
         }
       } catch (e) { console.warn('[arena] MatchSettled history fetch failed', e); }
     };