Wave 2A: real player headshots — sport-agnostic id threaded from ingestion

Threads a REAL athlete id from the snapshot's per-player stats resolve (zero
new I/O) → enriched grade → grades:{sport} → slate strip → PlayerAvatar. Real
photo where an id resolves; team-colored monogram (never a gray silhouette,
never a broken image) where it can't. Ids are never fabricated.

Ingestion (Addition 1):
- espnStatsAdapter.getSeasonAverages now RETURNS the resolved ESPN athlete id
  (was discarded) as espnId; non-numeric uid degrades to null.
- playerIntelService surfaces MLBAM playerId (MLB) / ESPN espnId (NBA/WNBA).
- snapshotService captures both per player and stores them on the enriched
  grade beside archetype/team (null when unresolved → monogram path).

Thread → component:
- slateAdapter.buildPlayerStripsFromProps carries playerId/espnId onto each
  strip; StatStrip → PlayerAvatar (accepts both ids; getHeadshotUrl routes by
  sport: MLB→mlbstatic, NBA/WNBA→a.espncdn).
- Silhouette surfaces rewired to PlayerAvatar (branded monogram on null):
  scan search dropdown (guarded MLBAM p.id) + tonight chips, SearchModal,
  HotListPanel, GradeResultCard header. Scan grade card feeds the picked
  MLBAM id through gradeAdapter.
- playerHeadshot pure URL logic extracted to CommonJS playerHeadshotUrl.js
  (unit-testable; the .ts re-exports it). nfl/nhl added to ESPN_SPORT_PATH.

Tests: tests/unit/headshotThread.test.js (per-league URL + id thread + monogram
null path) + extended snapshotService/espnStatsAdapter suites. Full suite
241 suites / 2915 green; next build exit 0.

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

web/src/components/HotListPanel.tsx

@@ -1,7 +1,8 @@
 'use client';
 
 import { useEffect, useState } from 'react';
-import { getHeadshotUrl, PLAYER_SILHOUETTE } from '@/lib/playerHeadshot';
+import PlayerAvatar from '@/components/vyndr/PlayerAvatar';
+import type { HeadshotSport } from '@/lib/playerHeadshot';
 import { getVisibleCount, getHiddenCount, type Tier } from '@/lib/tierGate';
 
 /**
@@ -65,13 +66,14 @@ export default function HotListPanel({ sport, tier = 'free', stat = 'all', limit
         {visible.map((p) => (
           <div key={`${p.name}-${p.stat}`} style={rowStyle}>
             <span style={rankStyle}>#{p.rank}</span>
-            <img
-              src={getHeadshotUrl({ sport, playerId: p.playerId })}
-              alt={p.name}
-              width={36}
-              height={36}
-              style={avatarStyle}
-              onError={(e) => { (e.target as HTMLImageElement).src = PLAYER_SILHOUETTE; }}
+            {/* Wave 2A — real headshot where the rosterlogs id resolves (MLBAM);
+                team-colored monogram otherwise. Never a gray silhouette. */}
+            <PlayerAvatar
+              name={p.name}
+              sport={sport as HeadshotSport}
+              playerId={p.playerId}
+              team={p.team}
+              size={36}
             />
             <div style={{ flex: 1, minWidth: 0 }}>
               <div style={playerName}>{p.name}{p.team ? ` · ${p.team}` : ''}</div>
@@ -103,9 +105,6 @@ const rankStyle: React.CSSProperties = {
   flex: '0 0 auto', fontSize: 13, fontWeight: 800, width: 28,
   color: 'var(--text-tertiary, #6A6A78)',
 };
-const avatarStyle: React.CSSProperties = {
-  borderRadius: '50%', objectFit: 'cover', background: '#1A1A24', flex: '0 0 auto',
-};
 const playerName: React.CSSProperties = {
   fontSize: 14, fontWeight: 700, color: 'var(--text-primary, #F0F0F4)',
   whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',