feat(frontend): add session-aware Command Center hero (#14)

Replace the static weekend band with a three-state hero (live, upcoming,
between weekends) driven by heroState() and existing page queries. Between-weekend
podium uses the existing race-hub endpoint for the last ingested race session
since championship hub does not expose finish positions.

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/src/components/CommandCenterHero.tsx

@@ -0,0 +1,415 @@
+import { Link } from '@tanstack/react-router'
+import { Activity, ArrowRight, Play } from 'lucide-react'
+import { sessionTypeAbbrev } from '../lib/coverage'
+import { countryDecal, countryFlag, formatGpDateRange } from '../lib/gpIdentity'
+import { classifySessionStatus, type HeroStateKind } from '../lib/hero'
+import { sortLiveTimingRows, trackStatusInfo } from '../lib/live'
+import {
+  formatCountdown,
+  formatSessionScheduleTime,
+  meetingStartTime,
+  sessionStartTime,
+  type FocusMeetingKind,
+} from '../lib/schedule'
+import type { EnrichedResult, LiveStreamData, Meeting, Session, WeekendSession } from '../types'
+import '../styles/hero.css'
+
+export interface CommandCenterHeroProps {
+  state: HeroStateKind
+  now: Date
+  accent: string
+  liveActive: boolean
+  liveData: LiveStreamData | null | undefined
+  focusMeeting: Meeting
+  focusKind: FocusMeetingKind
+  sessions: WeekendSession[]
+  currentSession: Session | null
+  nextSession: Session | null
+  analysisSessionKey?: number
+  analysisSessionName?: string
+  lastRaceName: string
+  lastRacePodium: EnrichedResult[]
+  lastRaceSessionKey?: number
+  nextMeeting: Meeting | null
+}
+
+export function CommandCenterHero({
+  state,
+  now,
+  accent,
+  liveActive,
+  liveData,
+  focusMeeting,
+  focusKind,
+  sessions,
+  currentSession,
+  nextSession,
+  analysisSessionKey,
+  analysisSessionName,
+  lastRaceName,
+  lastRacePodium,
+  lastRaceSessionKey,
+  nextMeeting,
+}: CommandCenterHeroProps) {
+  const accentStyle = {
+    '--gp-accent': accent,
+    '--hero-accent': accent,
+  } as React.CSSProperties
+
+  return (
+    <div className="hero-panel cc-hero" data-testid="cc-focus">
+      <section className="hero-card ui-card glass-panel" style={accentStyle}>
+        <div
+          className={`hero-accent${state === 'live' ? ' hero-accent--live' : ''}`}
+          aria-hidden="true"
+        />
+        <div className="hero-body">
+          <div className="hero-inner">
+            {state === 'live' && (
+              <LiveHero
+                liveActive={liveActive}
+                liveData={liveData}
+                currentSession={currentSession}
+                focusMeeting={focusMeeting}
+              />
+            )}
+            {state === 'upcoming' && (
+              <UpcomingHero
+                now={now}
+                focusMeeting={focusMeeting}
+                focusKind={focusKind}
+                sessions={sessions}
+                currentSession={currentSession}
+                nextSession={nextSession}
+                liveActive={liveActive}
+                analysisSessionKey={analysisSessionKey}
+                analysisSessionName={analysisSessionName}
+              />
+            )}
+            {state === 'between' && (
+              <BetweenHero
+                now={now}
+                lastRaceName={lastRaceName}
+                lastRacePodium={lastRacePodium}
+                lastRaceSessionKey={lastRaceSessionKey}
+                nextMeeting={nextMeeting}
+                analysisSessionKey={analysisSessionKey}
+                analysisSessionName={analysisSessionName}
+              />
+            )}
+          </div>
+        </div>
+      </section>
+    </div>
+  )
+}
+
+function LiveHero({
+  liveActive,
+  liveData,
+  currentSession,
+  focusMeeting,
+}: {
+  liveActive: boolean
+  liveData: LiveStreamData | null | undefined
+  currentSession: Session | null
+  focusMeeting: Meeting
+}) {
+  const sessionName =
+    liveData?.Session?.SessionName ?? currentSession?.session_name ?? 'Live session'
+  const trackStatus = trackStatusInfo(liveData?.TrackStatus)
+  const topThree = sortLiveTimingRows(liveData).filter((r) => r.Position > 0).slice(0, 3)
+  const decal = countryDecal(focusMeeting)
+
+  return (
+    <>
+      <div className="hero-row">
+        <span className="hero-decal mono">{decal}</span>
+        <div className="hero-identity">
+          <div className="hero-eyebrow hero-eyebrow--live mono">● Live now</div>
+          <h1 className="hero-title">{sessionName}</h1>
+          <div className="hero-sub mono">
+            {[focusMeeting.meeting_name, focusMeeting.circuit_short_name].filter(Boolean).join(' · ')}
+          </div>
+          <div className={`hero-track-status hero-track-status--${trackStatus.key}`}>
+            {trackStatus.label}
+          </div>
+        </div>
+        {topThree.length > 0 && (
+          <div className="hero-timing" data-testid="hero-live-timing">
+            {topThree.map((row) => (
+              <div key={row.RacingNumber} className="hero-timing-row">
+                <span className={`hero-timing-pos hero-timing-pos--p${row.Position}`}>
+                  P{row.Position}
+                </span>
+                <span className="hero-timing-driver">
+                  <span
+                    className="hero-timing-bar"
+                    style={{ background: `#${row.Info?.TeamColour ?? '9aa0a6'}` }}
+                  />
+                  {row.Info?.Tla ?? row.RacingNumber}
+                </span>
+                <span className="hero-timing-gap">
+                  {row.Position === 1 ? 'LEAD' : row.Driver.Interval || row.Driver.GapToLeader || '—'}
+                </span>
+              </div>
+            ))}
+          </div>
+        )}
+        <div className="hero-countdown">
+          <div className="hero-cd-label mono">{liveActive ? 'SignalR' : 'On track'}</div>
+          <div className="hero-cd-value hero-cd-value--live mono">LIVE</div>
+          <div className="hero-cd-sub mono">{sessionName}</div>
+        </div>
+      </div>
+      <div className="hero-actions">
+        <Link to="/live" className="hero-cta hero-cta--primary" data-testid="hero-live-link">
+          Open Live Timing <ArrowRight size={16} />
+        </Link>
+      </div>
+    </>
+  )
+}
+
+function UpcomingHero({
+  now,
+  focusMeeting,
+  focusKind,
+  sessions,
+  currentSession,
+  nextSession,
+  liveActive,
+  analysisSessionKey,
+  analysisSessionName,
+}: {
+  now: Date
+  focusMeeting: Meeting
+  focusKind: FocusMeetingKind
+  sessions: WeekendSession[]
+  currentSession: Session | null
+  nextSession: Session | null
+  liveActive: boolean
+  analysisSessionKey?: number
+  analysisSessionName?: string
+}) {
+  const decal = countryDecal(focusMeeting)
+  const countdownTarget =
+    nextSession && sessionStartTime(nextSession)
+      ? sessionStartTime(nextSession)!
+      : meetingStartTime(focusMeeting)
+
+  const kindLabel =
+    focusKind === 'current'
+      ? 'Current weekend'
+      : focusKind === 'next'
+        ? 'Next weekend'
+        : 'Weekend'
+
+  const sortedSessions = [...sessions].sort((a, b) => {
+    const left = sessionStartTime(a.session)?.getTime() ?? 0
+    const right = sessionStartTime(b.session)?.getTime() ?? 0
+    return left - right
+  })
+
+  return (
+    <>
+      <div className="hero-row">
+        <span className="hero-decal mono">{decal}</span>
+        <div className="hero-identity">
+          <div className="hero-eyebrow mono">{kindLabel}</div>
+          <h1 className="hero-title">{focusMeeting.meeting_name}</h1>
+          <div className="hero-sub mono">
+            {[focusMeeting.location, focusMeeting.circuit_short_name].filter(Boolean).join(' · ')}
+          </div>
+          <div className="hero-sub mono">{formatGpDateRange(focusMeeting)}</div>
+        </div>
+        <div className="hero-countdown" data-testid="hero-countdown">
+          {nextSession ? (
+            <>
+              <div className="hero-cd-label mono">Next · {nextSession.session_name}</div>
+              {countdownTarget && (
+                <div className="hero-cd-value mono">{formatCountdown(countdownTarget, now)}</div>
+              )}
+              <div className="hero-cd-sub mono">{formatSessionScheduleTime(nextSession.date_start)}</div>
+            </>
+          ) : (
+            <>
+              <div className="hero-cd-label mono">Status</div>
+              <div className="hero-cd-value mono">Complete</div>
+              <div className="hero-cd-sub mono">Weekend finished</div>
+            </>
+          )}
+        </div>
+      </div>
+
+      {sortedSessions.length > 0 && (
+        <div className="hero-schedule-strip" data-testid="hero-schedule-strip" role="list">
+          {sortedSessions.map(({ session }) => {
+            const status = classifySessionStatus(session, now)
+            const isNext = nextSession?.session_key === session.session_key
+            const isCurrent = currentSession?.session_key === session.session_key
+            const isLive = isCurrent && liveActive
+            return (
+              <Link
+                key={session.session_key}
+                to="/race-hub"
+                search={{ session_key: session.session_key }}
+                className={`hero-schedule-card${isNext ? ' is-next' : ''}${
+                  status === 'done' ? ' is-done' : ''
+                }${isLive ? ' is-live' : ''}`}
+                role="listitem"
+              >
+                <div className="hero-schedule-abbrev mono">
+                  {sessionTypeAbbrev(session.session_type, session.session_name)}
+                </div>
+                <div className="hero-schedule-name">{session.session_name}</div>
+                <div className="hero-schedule-time mono">
+                  {formatSessionScheduleTime(session.date_start)}
+                </div>
+                <div
+                  className={`hero-schedule-marker mono${
+                    isLive ? ' hero-schedule-marker--live' : isNext ? ' hero-schedule-marker--next' : ''
+                  }`}
+                >
+                  {isCurrent ? 'On track' : status === 'done' ? 'Done' : isNext ? 'Next' : 'Upcoming'}
+                </div>
+              </Link>
+            )
+          })}
+        </div>
+      )}
+
+      <div className="hero-actions">
+        <Link
+          to="/live"
+          className="hero-secondary-link"
+          style={{ display: 'inline-flex', alignItems: 'center', gap: '6px' }}
+        >
+          <Play size={14} /> Watch Live
+        </Link>
+        {analysisSessionKey != null && (
+          <Link
+            to="/race-hub"
+            search={{ session_key: analysisSessionKey }}
+            className="hero-secondary-link"
+            data-testid="hero-analysis-link"
+            style={{ display: 'inline-flex', alignItems: 'center', gap: '6px' }}
+          >
+            <Activity size={14} /> Open Analysis
+            {analysisSessionName ? ` · ${analysisSessionName}` : ''}
+          </Link>
+        )}
+      </div>
+    </>
+  )
+}
+
+function BetweenHero({
+  now,
+  lastRaceName,
+  lastRacePodium,
+  lastRaceSessionKey,
+  nextMeeting,
+  analysisSessionKey,
+  analysisSessionName,
+}: {
+  now: Date
+  lastRaceName: string
+  lastRacePodium: EnrichedResult[]
+  lastRaceSessionKey?: number
+  nextMeeting: Meeting | null
+  analysisSessionKey?: number
+  analysisSessionName?: string
+}) {
+  const nextStart = nextMeeting ? meetingStartTime(nextMeeting) : null
+  const podium = lastRacePodium
+    .filter((r) => r.position >= 1 && r.position <= 3)
+    .sort((a, b) => a.position - b.position)
+
+  return (
+    <>
+      <div className="hero-row">
+        <div className="hero-identity">
+          <div className="hero-eyebrow mono">Between race weekends</div>
+          {lastRaceName && (
+            <h1 className="hero-title" data-testid="hero-last-race">
+              After {lastRaceName}
+            </h1>
+          )}
+          {!lastRaceName && <h1 className="hero-title">Season pause</h1>}
+        </div>
+
+        {podium.length > 0 && (
+          <div className="hero-podium" data-testid="hero-podium">
+            {podium.map((r) => (
+              <div key={r.driver_number} className="hero-podium-row">
+                <span className={`hero-podium-pos hero-podium-pos--p${r.position} mono`}>
+                  P{r.position}
+                </span>
+                <span className="hero-podium-driver">
+                  <span
+                    className="hero-timing-bar"
+                    style={{ background: `#${r.team_colour}` }}
+                  />
+                  {r.name_acronym}
+                </span>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {nextMeeting && (
+          <div className="hero-countdown" data-testid="hero-next-gp-countdown">
+            <div className="hero-between-next">
+              {countryFlag(nextMeeting) && (
+                <span className="hero-flag" aria-hidden="true">
+                  {countryFlag(nextMeeting)}
+                </span>
+              )}
+              <div>
+                <div className="hero-cd-label mono">Next GP</div>
+                <div className="hero-title" style={{ fontSize: '20px' }}>
+                  {nextMeeting.meeting_name}
+                </div>
+              </div>
+            </div>
+            {nextStart && (
+              <>
+                <div className="hero-cd-value mono" style={{ marginTop: 'var(--s3)' }}>
+                  {formatCountdown(nextStart, now)}
+                </div>
+                <div className="hero-cd-sub mono">{formatGpDateRange(nextMeeting)}</div>
+              </>
+            )}
+          </div>
+        )}
+      </div>
+
+      <div className="hero-actions">
+        {lastRaceSessionKey != null && (
+          <Link
+            to="/race-hub"
+            search={{ session_key: lastRaceSessionKey }}
+            className="hero-secondary-link"
+            data-testid="hero-last-race-link"
+          >
+            View {lastRaceName || 'last race'} results →
+          </Link>
+        )}
+        {analysisSessionKey != null && analysisSessionKey !== lastRaceSessionKey && (
+          <Link
+            to="/race-hub"
+            search={{ session_key: analysisSessionKey }}
+            className="hero-secondary-link"
+            data-testid="hero-analysis-link"
+          >
+            Open Analysis{analysisSessionName ? ` · ${analysisSessionName}` : ''}
+          </Link>
+        )}
+        <Link to="/live" className="hero-secondary-link">
+          Live Timing →
+        </Link>
+      </div>
+    </>
+  )
+}

frontend/src/lib/hero.ts

@@ -0,0 +1,27 @@
+import type { Session } from '../types'
+import { sessionEndTime, sessionStartTime, type FocusMeetingKind } from './schedule'
+
+export type HeroStateKind = 'live' | 'upcoming' | 'between'
+
+export interface HeroStateInputs {
+  now: Date
+  liveActive: boolean
+  currentSession: Session | null
+  focusKind: FocusMeetingKind | null
+}
+
+export function classifySessionStatus(session: Session, now: Date): 'live' | 'done' | 'upcoming' {
+  const start = sessionStartTime(session)
+  const end = sessionEndTime(session)
+  if (start && end && now >= start && now < end) return 'live'
+  if (start && now >= start) return 'done'
+  return 'upcoming'
+}
+
+export function heroState(inputs: HeroStateInputs): HeroStateKind {
+  const { liveActive, currentSession, focusKind } = inputs
+
+  if (liveActive || currentSession) return 'live'
+  if (focusKind === 'current') return 'upcoming'
+  return 'between'
+}

frontend/src/pages/CommandCenterPage.tsx

@@ -1,38 +1,38 @@
 import { useEffect, useMemo, useState } from 'react'
 import { useQueries, useQuery } from '@tanstack/react-query'
 import { Link } from '@tanstack/react-router'
-import { fetchLiveState, fetchLocalMeetings, fetchSeasonMeetings, fetchSeasons, fetchSessions, fetchWeekend, fetchChampionshipHub } from '../api'
+import {
+  fetchChampionshipHub,
+  fetchLiveState,
+  fetchLocalMeetings,
+  fetchRaceHub,
+  fetchSeasonMeetings,
+  fetchSeasons,
+  fetchSessions,
+  fetchWeekend,
+} from '../api'
+import { CommandCenterHero } from '../components/CommandCenterHero'
+import { PaddockBriefing } from '../components/PaddockBriefing'
 import { RACE_HUB_DATASETS, countWeekendStats, formatCoverageHint, sessionTypeAbbrev } from '../lib/coverage'
+import { countryAccent, countryDecal, countryFlag, formatGpDateRange } from '../lib/gpIdentity'
+import { classifySessionStatus, heroState } from '../lib/hero'
 import {
   currentAndNextSession,
   focusMeetingKind,
-  formatCountdown,
   formatSessionScheduleTime,
   meetingHasStarted,
+  mostRecentPastMeeting,
+  nextUpcomingMeeting,
   pickFocusMeeting,
-  sessionEndTime,
-  sessionStartTime,
   sortSessionsByStart,
 } from '../lib/schedule'
-import { countryAccent, countryDecal, countryFlag, formatGpDateRange } from '../lib/gpIdentity'
 import type { Meeting, Session, Weekend, WeekendSession } from '../types'
-import { PaddockBriefing } from '../components/PaddockBriefing'
-import { Play, Activity, Calendar, Trophy } from 'lucide-react'
-
-type WeekendStatusKind = 'live' | 'current' | 'next' | 'recent' | 'fallback'
+import { Trophy } from 'lucide-react'
 
 const missingDatasets = Object.fromEntries(
   RACE_HUB_DATASETS.map((dataset) => [dataset, { status: 'missing', source: 'none', count: 0 }]),
 ) as WeekendSession['datasets']
 
-function classifySessionStatus(session: Session, now: Date): 'live' | 'done' | 'upcoming' {
-  const start = sessionStartTime(session)
-  const end = sessionEndTime(session)
-  if (start && end && now >= start && now < end) return 'live'
-  if (start && now >= start) return 'done'
-  return 'upcoming'
-}
-
 function meetingStatus(meeting: Meeting, focusKey: number | undefined, now: Date) {
   if (meeting.meeting_key === focusKey) return 'focus'
   if (meetingHasStarted(meeting, now)) return 'past'
@@ -148,7 +148,36 @@ export function CommandCenterPage() {
     focusWeekendSessions[0]?.session
   const analysisSessionKey = actionSession?.session_key
 
-  const weekendsLoading = weekendQueries.some((q) => q.isLoading)
+  const liveActive = liveQuery.data?.is_live === true
+  const heroStateKind = heroState({
+    now: nowDate,
+    liveActive,
+    currentSession,
+    focusKind,
+  })
+
+  const lastPastMeeting = useMemo(
+    () => mostRecentPastMeeting(focusMeetings, nowDate),
+    [focusMeetings, nowDate],
+  )
+  const lastPastWeekend = lastPastMeeting ? weekendsByKey.get(lastPastMeeting.meeting_key) : undefined
+  const lastRaceAnalysis = pickAnalysisSession(lastPastWeekend)
+  const lastRaceSessionKey = lastRaceAnalysis?.session.session_key
+
+  const lastRaceHubQuery = useQuery({
+    queryKey: ['race-hub', lastRaceSessionKey, 'hero-podium'],
+    queryFn: () => fetchRaceHub(lastRaceSessionKey!),
+    enabled: lastRaceSessionKey != null && heroStateKind === 'between',
+    staleTime: 60_000,
+  })
+
+  const nextMeetingForHero = useMemo(() => {
+    if (heroStateKind !== 'between') return null
+    return nextUpcomingMeeting(focusMeetings, nowDate)
+  }, [heroStateKind, focusMeetings, nowDate])
+
+  const lastRacePodium = lastRaceHubQuery.data?.results ?? []
+  const lastRaceName = champHub?.last_race ?? lastPastMeeting?.meeting_name ?? ''
 
   if (seasonsQuery.isLoading) {
     return <div className="page loading-state">loading command center…</div>
@@ -189,19 +218,7 @@ export function CommandCenterPage() {
     )
   }
 
-  const liveActive = liveQuery.data?.is_live === true
-  const statusKind: WeekendStatusKind = liveActive
-    ? 'live'
-    : focusKind === 'current'
-      ? 'current'
-      : focusKind === 'next'
-        ? 'next'
-        : focusKind === 'recent'
-          ? 'recent'
-          : 'fallback'
-
   const accent = countryAccent(focusMeeting ?? null)
-  const decal = countryDecal(focusMeeting ?? null)
   const accentStyle = { '--gp-accent': accent } as React.CSSProperties
 
   return (
@@ -224,76 +241,25 @@ export function CommandCenterPage() {
         </div>
       )}
 
-      {focusMeeting && (
-        <div className="cc-hero">
-          <section className="cc-weekend-band ui-card glass-panel" data-testid="cc-focus">
-            <div className="cc-band-accent" aria-hidden="true" />
-            <div className="cc-band-body">
-              <div className="cc-band-row">
-                <span className="cc-band-decal mono">{decal}</span>
-                <div className="cc-band-titles">
-                  <div className="cc-band-eyebrow mono">
-                    <WeekendKindLabel kind={statusKind} />
-                  </div>
-                  <h1 className="cc-band-name">{focusMeeting.meeting_name}</h1>
-                  <div className="cc-band-sub mono">
-                    {[focusMeeting.location, focusMeeting.circuit_short_name]
-                      .filter(Boolean)
-                      .join(' · ')}
-                  </div>
-                  <div className="cc-band-sub mono cc-band-dates">{formatGpDateRange(focusMeeting)}</div>
-                </div>
-                <CountdownBlock
-                  liveActive={liveActive}
-                  currentSession={currentSession}
-                  nextSession={nextSession}
-                  meeting={focusMeeting}
-                  now={nowDate}
-                />
-              </div>
-            </div>
-          </section>
-
-          <div className="cc-actions-row" data-testid="cc-actions">
-            <Link
-              to="/live"
-              className={`cc-pri-action ui-card interactive ${liveActive ? 'is-live ui-cta-primary' : ''}`}
-              data-testid="cc-action-live"
-            >
-              <span className="cc-pri-label" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}><Play size={16} /> Watch Live</span>
-              <span className="cc-pri-meta mono">{liveActive ? 'Feed active' : 'Standby'}</span>
-            </Link>
-            <Link
-              to="/race-hub"
-              search={analysisSessionKey ? { session_key: analysisSessionKey } : {}}
-              className="cc-pri-action ui-card interactive"
-              data-testid="cc-action-race-hub"
-            >
-              <span className="cc-pri-label" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}><Activity size={16} /> Open Analysis</span>
-              <span className="cc-pri-meta mono">
-                {actionSession
-                  ? `${actionSession.session_name} · session ${actionSession.session_key}`
-                  : 'Pick a session'}
-              </span>
-            </Link>
-            {nextSession && sessionStartTime(nextSession) && (
-              <a
-                href="#cc-schedule"
-                className="cc-pri-action ui-card interactive"
-                data-testid="cc-action-schedule"
-                onClick={(e) => {
-                  e.preventDefault()
-                  document.getElementById('cc-schedule')?.scrollIntoView({ behavior: 'smooth' })
-                }}
-              >
-                <span className="cc-pri-label" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}><Calendar size={16} /> Schedule</span>
-                <span className="cc-pri-meta mono">
-                  next: {nextSession.session_name}
-                </span>
-              </a>
-            )}
-          </div>
-        </div>
+      {focusMeeting && focusKind && (
+        <CommandCenterHero
+          state={heroStateKind}
+          now={nowDate}
+          accent={accent}
+          liveActive={liveActive}
+          liveData={liveQuery.data?.data}
+          focusMeeting={focusMeeting}
+          focusKind={focusKind}
+          sessions={focusWeekendSessions}
+          currentSession={currentSession}
+          nextSession={nextSession}
+          analysisSessionKey={analysisSessionKey}
+          analysisSessionName={actionSession?.session_name}
+          lastRaceName={lastRaceName}
+          lastRacePodium={lastRacePodium}
+          lastRaceSessionKey={lastRaceSessionKey}
+          nextMeeting={nextMeetingForHero}
+        />
       )}
 
       <div className="cc-dashboard-grid">
@@ -483,65 +449,3 @@ function FormSparkline({ form, color }: { form: number[], color: string }) {
   )
 }
 
-function WeekendKindLabel({ kind }: { kind: WeekendStatusKind }) {
-  switch (kind) {
-    case 'live':
-      return <span className="cc-kind cc-kind-live">● Live now</span>
-    case 'current':
-      return <span className="cc-kind cc-kind-current">Current weekend</span>
-    case 'next':
-      return <span className="cc-kind cc-kind-next">Next weekend</span>
-    case 'recent':
-      return <span className="cc-kind cc-kind-recent">Recent weekend</span>
-    default:
-      return <span className="cc-kind">Weekend</span>
-  }
-}
-
-interface CountdownBlockProps {
-  liveActive: boolean
-  currentSession: Session | null
-  nextSession: Session | null
-  meeting: Meeting
-  now: Date
-}
-
-function CountdownBlock({ liveActive, currentSession, nextSession, meeting, now }: CountdownBlockProps) {
-  if (liveActive) {
-    return (
-      <div className="cc-countdown-block">
-        <div className="cc-cd-label mono">SignalR</div>
-        <div className="cc-cd-value cc-cd-live">LIVE</div>
-        <div className="cc-cd-sub mono">{currentSession?.session_name ?? 'Feed connected'}</div>
-      </div>
-    )
-  }
-  if (currentSession) {
-    return (
-      <div className="cc-countdown-block">
-        <div className="cc-cd-label mono">On Track</div>
-        <div className="cc-cd-value cc-cd-current">{currentSession.session_name}</div>
-        <div className="cc-cd-sub mono">In session</div>
-      </div>
-    )
-  }
-  if (nextSession && sessionStartTime(nextSession)) {
-    return (
-      <div className="cc-countdown-block">
-        <div className="cc-cd-label mono">Next · {nextSession.session_name}</div>
-        <div className="cc-cd-value mono">{formatCountdown(sessionStartTime(nextSession)!, now)}</div>
-        <div className="cc-cd-sub mono">{formatSessionScheduleTime(nextSession.date_start)}</div>
-      </div>
-    )
-  }
-  if (meetingHasStarted(meeting, now)) {
-    return (
-      <div className="cc-countdown-block">
-        <div className="cc-cd-label mono">Status</div>
-        <div className="cc-cd-value cc-cd-done">Complete</div>
-        <div className="cc-cd-sub mono">Weekend finished</div>
-      </div>
-    )
-  }
-  return null
-}

frontend/src/styles/hero.css

@@ -0,0 +1,373 @@
+.hero-panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s4);
+}
+
+.hero-card {
+  display: flex;
+  background: var(--surface);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 8px;
+  overflow: hidden;
+  min-height: 124px;
+}
+
+.hero-accent {
+  width: 4px;
+  flex-shrink: 0;
+  box-shadow: 0 0 12px var(--hero-accent, var(--gp-accent));
+  background: var(--hero-accent, var(--gp-accent));
+}
+
+.hero-accent--live {
+  animation: hero-pulse 1.4s ease-in-out infinite;
+}
+
+@keyframes hero-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.55; }
+}
+
+.hero-body {
+  flex: 1;
+  padding: var(--s5);
+  min-width: 0;
+  position: relative;
+  overflow: hidden;
+  background:
+    radial-gradient(ellipse at top right, color-mix(in srgb, var(--gp-accent) 15%, transparent), transparent 60%),
+    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
+    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
+    var(--surface);
+  background-size: 100% 100%, 20px 20px, 20px 20px, 100% 100%;
+}
+
+.hero-body::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
+  pointer-events: none;
+}
+
+.hero-inner {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--s5);
+}
+
+.hero-row {
+  display: flex;
+  align-items: stretch;
+  gap: var(--s6);
+  min-width: 0;
+  flex-wrap: wrap;
+}
+
+.hero-identity {
+  flex: 1;
+  min-width: 0;
+}
+
+.hero-decal {
+  font-size: 56px;
+  font-weight: 800;
+  line-height: 0.85;
+  letter-spacing: -0.04em;
+  color: color-mix(in srgb, var(--gp-accent) 35%, var(--text-3));
+  opacity: 0.9;
+  flex-shrink: 0;
+}
+
+.hero-eyebrow {
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--text-3);
+  margin-bottom: var(--s2);
+}
+
+.hero-eyebrow--live {
+  color: var(--red);
+}
+
+.hero-title {
+  font-size: 28px;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  line-height: 1.1;
+  margin: 0;
+}
+
+.hero-sub {
+  font-size: 12px;
+  color: var(--text-2);
+  margin-top: var(--s2);
+}
+
+.hero-countdown {
+  text-align: right;
+  flex-shrink: 0;
+}
+
+.hero-cd-label {
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--text-3);
+  margin-bottom: var(--s2);
+}
+
+.hero-cd-value {
+  font-size: 22px;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  color: var(--text);
+}
+
+.hero-cd-value--live {
+  color: var(--red);
+  font-size: 28px;
+  letter-spacing: 0.08em;
+}
+
+.hero-cd-sub {
+  font-size: 11px;
+  color: var(--text-3);
+  margin-top: var(--s2);
+}
+
+.hero-track-status {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s3);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  padding: var(--s2) var(--s3);
+  border-radius: 4px;
+  margin-top: var(--s3);
+}
+
+.hero-track-status--green { color: #3dd68c; background: rgba(61, 214, 140, 0.1); }
+.hero-track-status--yellow { color: #f5c842; background: rgba(245, 200, 66, 0.1); }
+.hero-track-status--sc,
+.hero-track-status--vsc { color: #f5a623; background: rgba(245, 166, 35, 0.12); }
+.hero-track-status--red { color: var(--red); background: rgba(225, 6, 0, 0.12); }
+.hero-track-status--unknown { color: var(--text-3); background: rgba(255, 255, 255, 0.05); }
+
+.hero-timing {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s2);
+  min-width: 200px;
+}
+
+.hero-timing-row {
+  display: grid;
+  grid-template-columns: 28px 1fr auto;
+  align-items: center;
+  gap: var(--s3);
+  padding: var(--s2) var(--s3);
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 6px;
+  font-size: 13px;
+}
+
+.hero-timing-pos {
+  font-weight: 700;
+  color: var(--text-3);
+  font-variant-numeric: tabular-nums;
+}
+
+.hero-timing-pos--p1 { color: #ffd700; }
+.hero-timing-pos--p2 { color: #c0c0c0; }
+.hero-timing-pos--p3 { color: #cd7f32; }
+
+.hero-timing-bar {
+  width: 3px;
+  height: 14px;
+  border-radius: 2px;
+  flex-shrink: 0;
+}
+
+.hero-timing-driver {
+  display: flex;
+  align-items: center;
+  gap: var(--s3);
+  font-weight: 600;
+  font-family: var(--f-mono);
+}
+
+.hero-timing-gap {
+  font-size: 11px;
+  color: var(--text-3);
+  font-family: var(--f-mono);
+  font-variant-numeric: tabular-nums;
+}
+
+.hero-cta {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s3);
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--red);
+  text-decoration: none;
+  transition: opacity 0.1s;
+}
+
+.hero-cta:hover {
+  opacity: 0.85;
+}
+
+.hero-cta--primary {
+  padding: var(--s3) var(--s5);
+  background: rgba(225, 6, 0, 0.12);
+  border: 1px solid rgba(225, 6, 0, 0.35);
+  border-radius: 6px;
+}
+
+.hero-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--s3);
+  align-items: center;
+}
+
+.hero-secondary-link {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-2);
+  text-decoration: none;
+}
+
+.hero-secondary-link:hover {
+  color: var(--text);
+}
+
+.hero-schedule-strip {
+  display: flex;
+  gap: var(--s3);
+  overflow-x: auto;
+  padding-bottom: var(--s2);
+}
+
+.hero-schedule-card {
+  flex: 0 0 auto;
+  min-width: 120px;
+  padding: var(--s3) var(--s4);
+  border-radius: 6px;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  background: rgba(255, 255, 255, 0.02);
+  text-decoration: none;
+  color: inherit;
+  transition: background 0.1s, border-color 0.1s;
+}
+
+.hero-schedule-card:hover {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.hero-schedule-card.is-next {
+  border-color: color-mix(in srgb, var(--gp-accent) 50%, transparent);
+  background: color-mix(in srgb, var(--gp-accent) 8%, transparent);
+}
+
+.hero-schedule-card.is-done {
+  opacity: 0.55;
+}
+
+.hero-schedule-card.is-live {
+  border-color: rgba(225, 6, 0, 0.4);
+  background: rgba(225, 6, 0, 0.08);
+}
+
+.hero-schedule-abbrev {
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  color: var(--text-3);
+}
+
+.hero-schedule-name {
+  font-size: 12px;
+  font-weight: 600;
+  margin: var(--s2) 0;
+}
+
+.hero-schedule-time {
+  font-size: 10px;
+  color: var(--text-3);
+}
+
+.hero-schedule-marker {
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  margin-top: var(--s2);
+  color: var(--text-3);
+}
+
+.hero-schedule-marker--next { color: var(--gp-accent); }
+.hero-schedule-marker--live { color: var(--red); }
+
+.hero-podium {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s2);
+  min-width: 200px;
+}
+
+.hero-podium-row {
+  display: grid;
+  grid-template-columns: 32px 1fr;
+  align-items: center;
+  gap: var(--s3);
+  padding: var(--s2) var(--s3);
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 6px;
+  font-size: 13px;
+}
+
+.hero-podium-pos {
+  font-weight: 700;
+  font-family: var(--f-mono);
+  color: var(--text-3);
+}
+
+.hero-podium-pos--p1 { color: #ffd700; }
+.hero-podium-pos--p2 { color: #c0c0c0; }
+.hero-podium-pos--p3 { color: #cd7f32; }
+
+.hero-podium-driver {
+  display: flex;
+  align-items: center;
+  gap: var(--s3);
+  font-weight: 600;
+  font-family: var(--f-mono);
+}
+
+.hero-between-next {
+  display: flex;
+  align-items: center;
+  gap: var(--s4);
+}
+
+.hero-flag {
+  font-size: 32px;
+  line-height: 1;
+}
+
+@media (min-width: 700px) {
+  .hero-row {
+    flex-wrap: nowrap;
+  }
+}

frontend/src/test/CommandCenterPage.test.tsx

@@ -12,9 +12,20 @@ vi.mock('../api', () => ({
   fetchSessions: vi.fn(),
   fetchWeekend: vi.fn(),
   fetchLiveState: vi.fn(),
+  fetchChampionshipHub: vi.fn(),
+  fetchRaceHub: vi.fn(),
 }))
 
-import { fetchSeasons, fetchLocalMeetings, fetchSeasonMeetings, fetchSessions, fetchWeekend, fetchLiveState } from '../api'
+import {
+  fetchSeasons,
+  fetchLocalMeetings,
+  fetchSeasonMeetings,
+  fetchSessions,
+  fetchWeekend,
+  fetchLiveState,
+  fetchChampionshipHub,
+  fetchRaceHub,
+} from '../api'
 
 const mockFetchSeasons = vi.mocked(fetchSeasons)
 const mockFetchLocalMeetings = vi.mocked(fetchLocalMeetings)
@@ -22,6 +33,8 @@ const mockFetchSeasonMeetings = vi.mocked(fetchSeasonMeetings)
 const mockFetchSessions = vi.mocked(fetchSessions)
 const mockFetchWeekend = vi.mocked(fetchWeekend)
 const mockFetchLiveState = vi.mocked(fetchLiveState)
+const mockFetchChampionshipHub = vi.mocked(fetchChampionshipHub)
+const mockFetchRaceHub = vi.mocked(fetchRaceHub)
 
 const meeting: Meeting = {
   meeting_key: 1229,
@@ -102,6 +115,48 @@ describe('CommandCenterPage', () => {
     vi.clearAllMocks()
     mockFetchLiveState.mockResolvedValue({ is_live: false, data: null })
     mockFetchSessions.mockResolvedValue([])
+    mockFetchChampionshipHub.mockResolvedValue({
+      season: 2025,
+      round: 1,
+      total_rounds: 1,
+      rounds_left: 0,
+      last_race: 'Monaco',
+      round_labels: ['R1'],
+      drivers: [],
+      teams: [],
+    })
+    mockFetchRaceHub.mockResolvedValue({
+      source: 'local',
+      session_key: 9472,
+      datasets: fullDatasets,
+      results: [
+        {
+          driver_number: 1,
+          position: 1,
+          name_acronym: 'VER',
+          full_name: 'Max Verstappen',
+          team_name: 'Red Bull Racing',
+          team_colour: '3671c6',
+          dnf: false,
+          dns: false,
+          dsq: false,
+          duration: 7200,
+          gap_to_leader: null,
+          number_of_laps: 78,
+          points: 25,
+          session_key: 9472,
+          meeting_key: 1229,
+        },
+      ],
+      starting_grid: [],
+      drivers: [],
+      stints: [],
+      pit_stops: [],
+      positions: [],
+      race_control: [],
+      weather: [],
+      laps: [],
+    })
   })
 
   it('shows empty state when no seasons are ingested', async () => {
@@ -131,11 +186,10 @@ describe('CommandCenterPage', () => {
       expect(screen.getByTestId('cc-session-9472')).toBeInTheDocument()
     })
     expect(screen.getByTestId('cc-focus')).toHaveTextContent('Monaco')
-    expect(screen.getByTestId('cc-focus')).toHaveTextContent('MON')
     expect(screen.getByTestId('cc-season-calendar')).toHaveTextContent('Season Calendar')
     expect(screen.getByTestId('cc-calendar-1229')).toHaveTextContent('R01')
     expect(screen.getByText('No live session')).toBeInTheDocument()
-    expect(screen.getByTestId('cc-action-race-hub')).toHaveTextContent('Race')
+    expect(screen.getByTestId('hero-last-race-link')).toHaveTextContent('Monaco')
   })
 
   it('uses OpenF1 calendar metadata to focus the current weekend when local ingest is behind', async () => {
@@ -181,9 +235,9 @@ describe('CommandCenterPage', () => {
     await waitFor(() => {
       expect(screen.getByTestId('cc-focus')).toHaveTextContent('Monaco')
     })
-    expect(screen.getByTestId('cc-focus')).toHaveTextContent('Current weekend')
+    expect(screen.getByTestId('cc-focus')).toHaveTextContent('Live now')
     expect(screen.getByTestId('cc-session-9602')).toHaveTextContent('On track')
-    expect(screen.getByTestId('cc-action-race-hub')).toHaveTextContent('Qualifying')
+    expect(screen.getByTestId('hero-live-link')).toHaveAttribute('href', '/live')
 
     vi.useRealTimers()
   })

frontend/src/test/hero.test.ts

@@ -0,0 +1,123 @@
+import { describe, it, expect } from 'vitest'
+import { heroState, classifySessionStatus } from '../lib/hero'
+import { currentAndNextSession } from '../lib/schedule'
+import type { Session } from '../types'
+
+const session = (overrides: Partial<Session> = {}): Session => ({
+  session_key: 9472,
+  session_name: 'Race',
+  session_type: 'Race',
+  meeting_key: 1,
+  date_start: '2025-05-25T13:00:00+00:00',
+  date_end: '2025-05-25T15:00:00+00:00',
+  gmt_offset: '02:00:00',
+  ...overrides,
+})
+
+describe('heroState', () => {
+  it('returns live when the live snapshot is active', () => {
+    const now = new Date('2025-05-24T12:00:00Z')
+    expect(
+      heroState({
+        now,
+        liveActive: true,
+        currentSession: null,
+        focusKind: 'current',
+      }),
+    ).toBe('live')
+  })
+
+  it('returns live when a session is in progress', () => {
+    const now = new Date('2025-05-25T14:00:00Z')
+    const sessions = [session()]
+    const { current } = currentAndNextSession(sessions, now)
+    expect(
+      heroState({
+        now,
+        liveActive: false,
+        currentSession: current,
+        focusKind: 'current',
+      }),
+    ).toBe('live')
+  })
+
+  it('returns upcoming during a focus weekend gap before the next session', () => {
+    const now = new Date('2025-05-24T12:00:00Z')
+    const sessions = [
+      session({
+        session_key: 1,
+        session_name: 'FP1',
+        date_start: '2025-05-23T10:00:00+00:00',
+        date_end: '2025-05-23T11:00:00+00:00',
+      }),
+      session({
+        session_key: 2,
+        session_name: 'Race',
+        date_start: '2025-05-25T13:00:00+00:00',
+        date_end: '2025-05-25T15:00:00+00:00',
+      }),
+    ]
+    const { current, next } = currentAndNextSession(sessions, now)
+    expect(current).toBeNull()
+    expect(next?.session_key).toBe(2)
+    expect(
+      heroState({
+        now,
+        liveActive: false,
+        currentSession: current,
+        focusKind: 'current',
+      }),
+    ).toBe('upcoming')
+  })
+
+  it('returns upcoming when the weekend just ended but is still the focus weekend', () => {
+    const now = new Date('2025-05-25T16:00:00Z')
+    const sessions = [session()]
+    const { current } = currentAndNextSession(sessions, now)
+    expect(current).toBeNull()
+    expect(
+      heroState({
+        now,
+        liveActive: false,
+        currentSession: current,
+        focusKind: 'current',
+      }),
+    ).toBe('upcoming')
+  })
+
+  it('returns between before the next grand prix weekend', () => {
+    const now = new Date('2025-06-01T12:00:00Z')
+    expect(
+      heroState({
+        now,
+        liveActive: false,
+        currentSession: null,
+        focusKind: 'next',
+      }),
+    ).toBe('between')
+  })
+
+  it('returns between after the season when only a recent meeting remains', () => {
+    const now = new Date('2026-01-01T00:00:00Z')
+    expect(
+      heroState({
+        now,
+        liveActive: false,
+        currentSession: null,
+        focusKind: 'recent',
+      }),
+    ).toBe('between')
+  })
+})
+
+describe('classifySessionStatus', () => {
+  it('marks a session as done immediately after it ends', () => {
+    const now = new Date('2025-05-25T15:00:00Z')
+    expect(classifySessionStatus(session(), now)).toBe('done')
+  })
+
+  it('marks a session as live during its window', () => {
+    const now = new Date('2025-05-25T14:00:00Z')
+    expect(classifySessionStatus(session(), now)).toBe('live')
+  })
+})

frontend/src/test/hero.test.tsx

@@ -0,0 +1,257 @@
+import { describe, it, expect, vi } from 'vitest'
+import type { ComponentProps, ReactNode } from 'react'
+import { render, screen } from '@testing-library/react'
+import type { EnrichedResult, LiveStreamData, Meeting, WeekendSession } from '../types'
+
+vi.mock('@tanstack/react-router', () => ({
+  Link: ({
+    to,
+    children,
+    ...rest
+  }: {
+    to: string
+    children: ReactNode
+    className?: string
+    'data-testid'?: string
+  }) => (
+    <a href={to} {...rest}>
+      {children}
+    </a>
+  ),
+}))
+
+import { CommandCenterHero } from '../components/CommandCenterHero'
+
+const focusMeeting: Meeting = {
+  meeting_key: 1229,
+  meeting_name: 'Monaco',
+  meeting_official_name: 'FORMULA 1 GRAND PRIX DE MONACO 2025',
+  location: 'Monaco',
+  country_name: 'Monaco',
+  country_code: 'MON',
+  country_flag: '',
+  circuit_short_name: 'Monaco',
+  date_start: '2025-05-23T00:00:00+00:00',
+  date_end: '2025-05-25T00:00:00+00:00',
+  year: 2025,
+}
+
+const weekendSessions: WeekendSession[] = [
+  {
+    session: {
+      session_key: 9472,
+      session_name: 'Race',
+      session_type: 'Race',
+      meeting_key: 1229,
+      date_start: '2025-05-25T13:00:00+00:00',
+      date_end: '2025-05-25T15:00:00+00:00',
+      gmt_offset: '02:00:00',
+    },
+    source: 'local',
+    datasets: {} as WeekendSession['datasets'],
+  },
+]
+
+const liveData: LiveStreamData = {
+  Drivers: {
+    '1': {
+      RacingNumber: '1',
+      Position: 1,
+      PrevPosition: 1,
+      GapToLeader: '',
+      Interval: '',
+      LastLapTime: '1:14.000',
+      LastLapPB: false,
+      LastLapOB: false,
+      BestLapTime: '1:13.500',
+      BestLapPB: false,
+      BestLapOB: false,
+      BestLapNum: 10,
+      InPit: false,
+      PitOut: false,
+      Retired: false,
+      KnockedOut: false,
+      Cutoff: false,
+      OnFlyingLap: false,
+      NumberOfLaps: 10,
+      SpeedTrap: '',
+      Sectors: [],
+    },
+    '44': {
+      RacingNumber: '44',
+      Position: 2,
+      PrevPosition: 2,
+      GapToLeader: '+1.2',
+      Interval: '+1.2',
+      LastLapTime: '1:14.200',
+      LastLapPB: false,
+      LastLapOB: false,
+      BestLapTime: '1:13.700',
+      BestLapPB: false,
+      BestLapOB: false,
+      BestLapNum: 10,
+      InPit: false,
+      PitOut: false,
+      Retired: false,
+      KnockedOut: false,
+      Cutoff: false,
+      OnFlyingLap: false,
+      NumberOfLaps: 10,
+      SpeedTrap: '',
+      Sectors: [],
+    },
+  },
+  DriverInfo: {
+    '1': {
+      RacingNumber: '1',
+      BroadcastName: 'M VERSTAPPEN',
+      Tla: 'VER',
+      TeamName: 'Red Bull Racing',
+      TeamColour: '3671c6',
+      FirstName: 'Max',
+      LastName: 'Verstappen',
+    },
+    '44': {
+      RacingNumber: '44',
+      BroadcastName: 'L HAMILTON',
+      Tla: 'HAM',
+      TeamName: 'Ferrari',
+      TeamColour: 'e8002d',
+      FirstName: 'Lewis',
+      LastName: 'Hamilton',
+    },
+  },
+  Tyres: {},
+  RCMessages: [],
+  Weather: {
+    AirTemp: 20,
+    TrackTemp: 30,
+    Humidity: 50,
+    WindSpeed: 1,
+    WindDir: 0,
+    Rainfall: false,
+  },
+  Session: {
+    MeetingName: 'Monaco',
+    CircuitName: 'Monaco',
+    SessionType: 'Race',
+    SessionName: 'Race',
+  },
+  TrackStatus: '1',
+  CurrentLap: 10,
+  TotalLaps: 78,
+  Clock: '',
+  ClockRefTime: '',
+  ClockExtrapolating: false,
+  Stints: {},
+}
+
+const podium: EnrichedResult[] = [
+  {
+    driver_number: 1,
+    position: 1,
+    name_acronym: 'VER',
+    full_name: 'Max Verstappen',
+    team_name: 'Red Bull Racing',
+    team_colour: '3671c6',
+    dnf: false,
+    dns: false,
+    dsq: false,
+    duration: 7200,
+    gap_to_leader: null,
+    number_of_laps: 78,
+    points: 25,
+    session_key: 9472,
+    meeting_key: 1229,
+  },
+  {
+    driver_number: 44,
+    position: 2,
+    name_acronym: 'HAM',
+    full_name: 'Lewis Hamilton',
+    team_name: 'Ferrari',
+    team_colour: 'e8002d',
+    dnf: false,
+    dns: false,
+    dsq: false,
+    duration: 7205,
+    gap_to_leader: 3.2,
+    number_of_laps: 78,
+    points: 18,
+    session_key: 9472,
+    meeting_key: 1229,
+  },
+]
+
+function renderHero(overrides: Partial<ComponentProps<typeof CommandCenterHero>> = {}) {
+  const props: ComponentProps<typeof CommandCenterHero> = {
+    state: 'upcoming',
+    now: new Date('2025-05-24T12:00:00Z'),
+    accent: '#d61a3e',
+    liveActive: false,
+    liveData: null,
+    focusMeeting,
+    focusKind: 'current',
+    sessions: weekendSessions,
+    currentSession: null,
+    nextSession: weekendSessions[0].session,
+    lastRaceName: '',
+    lastRacePodium: [],
+    nextMeeting: null,
+    ...overrides,
+  }
+
+  return render(<CommandCenterHero {...props} />)
+}
+
+describe('CommandCenterHero', () => {
+  it('renders live timing link and top three in live state', () => {
+    renderHero({
+      state: 'live',
+      liveActive: true,
+      liveData,
+      currentSession: weekendSessions[0].session,
+    })
+
+    expect(screen.getByTestId('hero-live-link')).toHaveAttribute('href', '/live')
+    expect(screen.getByTestId('hero-live-timing')).toHaveTextContent('VER')
+    expect(screen.getByTestId('hero-live-timing')).toHaveTextContent('HAM')
+    expect(screen.getByText('TRACK CLEAR')).toBeInTheDocument()
+  })
+
+  it('renders countdown and schedule strip in upcoming state', () => {
+    renderHero({
+      state: 'upcoming',
+      nextSession: weekendSessions[0].session,
+    })
+
+    expect(screen.getByTestId('hero-countdown')).toHaveTextContent('1d 01h 00m 00s')
+    expect(screen.getByTestId('hero-schedule-strip')).toHaveTextContent('Race')
+    expect(screen.getByTestId('hero-schedule-strip')).toHaveTextContent('Next')
+  })
+
+  it('renders last race podium and next GP countdown in between state', () => {
+    const nextMeeting: Meeting = {
+      ...focusMeeting,
+      meeting_key: 1301,
+      meeting_name: 'Canada',
+      country_code: 'CAN',
+      date_start: '2025-06-06T00:00:00+00:00',
+      date_end: '2025-06-08T00:00:00+00:00',
+    }
+
+    renderHero({
+      state: 'between',
+      lastRaceName: 'Monaco',
+      lastRacePodium: podium,
+      nextMeeting,
+      now: new Date('2025-06-01T12:00:00Z'),
+    })
+
+    expect(screen.getByTestId('hero-last-race')).toHaveTextContent('After Monaco')
+    expect(screen.getByTestId('hero-podium')).toHaveTextContent('VER')
+    expect(screen.getByTestId('hero-podium')).toHaveTextContent('HAM')
+    expect(screen.getByTestId('hero-next-gp-countdown')).toHaveTextContent('Canada')
+    expect(screen.getByTestId('hero-next-gp-countdown')).toHaveTextContent('4d')
+  })
+})