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>
2026-08-08 04:06:18 -04:00 · 2026-07-03 23:59:38 -04:00
20 changed files with 1331 additions and 642 deletions
--- a/frontend/src/components/CommandCenterHero.tsx
+++ b/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>
+    </>
+  )
+}
--- a/frontend/src/components/live/TeamRadioTicker.tsx
+++ b/frontend/src/components/live/TeamRadioTicker.tsx
@@ -1,108 +0,0 @@
-import { useMemo, useRef, useState } from 'react'
-import { Pause, Play } from 'lucide-react'
-import type { LiveDriverInfo, LiveRadioCapture, LiveSessionMeta } from '../../types'
-import { radioCaptureKey, radioClipUrl } from '../../lib/radio'
-import { teamColor } from '../../utils'
-import '../../styles/team-radio.css'
-
-interface Props {
-  captures?: LiveRadioCapture[]
-  driverInfo?: Record<string, LiveDriverInfo>
-  session?: LiveSessionMeta
-}
-
-function relativeTime(utc: string): string {
-  const timestamp = new Date(utc).getTime()
-  if (!utc || Number.isNaN(timestamp)) return '--'
-
-  const diffSeconds = Math.max(0, Math.floor((Date.now() - timestamp) / 1000))
-  if (diffSeconds < 60) return `${diffSeconds}s ago`
-  const minutes = Math.floor(diffSeconds / 60)
-  if (minutes < 60) return `${minutes}m ago`
-  const hours = Math.floor(minutes / 60)
-  if (hours < 24) return `${hours}h ago`
-  return new Date(utc).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
-}
-
-function driverLabel(info: LiveDriverInfo | undefined, racingNumber: string): string {
-  return info?.Tla || racingNumber
-}
-
-export function TeamRadioTicker({ captures = [], driverInfo = {}, session }: Props) {
-  const audioRef = useRef<HTMLAudioElement | null>(null)
-  const [playingKey, setPlayingKey] = useState<string | null>(null)
-
-  const newestFirst = useMemo(() => [...captures].reverse(), [captures])
-
-  const toggleCapture = (capture: LiveRadioCapture) => {
-    const key = radioCaptureKey(capture)
-    const audio = audioRef.current
-    const url = radioClipUrl(session, capture)
-    if (!audio || !url) return
-
-    if (playingKey === key) {
-      audio.pause()
-      setPlayingKey(null)
-      return
-    }
-
-    audio.pause()
-    audio.src = url
-    setPlayingKey(key)
-    const play = audio.play()
-    if (play) {
-      play.catch(() => setPlayingKey(null))
-    }
-  }
-
-  return (
-    <section className="team-radio panel-glass" data-testid="team-radio-ticker">
-      <div className="sec-header sticky-header">
-        <span className="sec-title">Team Radio</span>
-        {captures.length > 0 && <span className="sec-meta">{captures.length} clips</span>}
-      </div>
-
-      <audio
-        ref={audioRef}
-        className="team-radio-audio"
-        onEnded={() => setPlayingKey(null)}
-      />
-
-      {newestFirst.length === 0 ? (
-        <div className="missing-notice">No team radio clips in the current live snapshot.</div>
-      ) : (
-        <div className="team-radio-list">
-          {newestFirst.map((capture) => {
-            const key = radioCaptureKey(capture)
-            const info = driverInfo[capture.RacingNumber]
-            const label = driverLabel(info, capture.RacingNumber)
-            const isPlaying = playingKey === key
-            const url = radioClipUrl(session, capture)
-
-            return (
-              <div className="team-radio-row" key={key}>
-                <button
-                  className="team-radio-play"
-                  type="button"
-                  aria-label={`${isPlaying ? 'Pause' : 'Play'} ${label} radio`}
-                  disabled={!url}
-                  onClick={() => toggleCapture(capture)}
-                >
-                  {isPlaying ? <Pause size={14} /> : <Play size={14} />}
-                </button>
-                <span
-                  className="team-radio-driver"
-                  style={{ borderColor: teamColor(info?.TeamColour) }}
-                  title={info?.TeamName || undefined}
-                >
-                  {label}
-                </span>
-                <span className="team-radio-time">{relativeTime(capture.Utc)}</span>
-              </div>
-            )
-          })}
-        </div>
-      )}
-    </section>
-  )
-}
--- a/frontend/src/lib/hero.ts
+++ b/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'
+}
--- a/frontend/src/lib/radio.ts
+++ b/frontend/src/lib/radio.ts
@@ -1,22 +0,0 @@
-import type { LiveRadioCapture, LiveSessionMeta } from '../types'
-
-export const LIVE_TIMING_STATIC_BASE = 'https://livetiming.formula1.com/static/'
-
-export function radioClipUrl(
-  session: Pick<LiveSessionMeta, 'Path'> | null | undefined,
-  capture: Pick<LiveRadioCapture, 'Path'> | null | undefined,
-): string {
-  const sessionPath = session?.Path?.trim()
-  const capturePath = capture?.Path?.trim()
-  if (!sessionPath || !capturePath) return ''
-  if (/^https?:\/\//i.test(capturePath)) return capturePath
-
-  const base = LIVE_TIMING_STATIC_BASE.replace(/\/+$/, '')
-  const normalizedSession = sessionPath.replace(/^\/+|\/+$/g, '')
-  const normalizedCapture = capturePath.replace(/^\/+/g, '')
-  return `${base}/${normalizedSession}/${normalizedCapture}`
-}
-
-export function radioCaptureKey(capture: LiveRadioCapture): string {
-  return `${capture.Utc}-${capture.RacingNumber}-${capture.Path}`
-}
--- a/frontend/src/pages/CommandCenterPage.tsx
+++ b/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
-}
--- a/frontend/src/pages/LiveTimingPage.tsx
+++ b/frontend/src/pages/LiveTimingPage.tsx
@@ -21,7 +21,6 @@ import { TimingTower } from '../components/live/TimingTower'
 import { BattleChips } from '../components/live/BattleChips'
 import { PinnedDrivers } from '../components/live/PinnedDrivers'
 import { RaceControlFeed } from '../components/live/RaceControlFeed'
-import { TeamRadioTicker } from '../components/live/TeamRadioTicker'
 import { TrackMap } from '../components/live/TrackMap'
 import { Radio } from 'lucide-react'

@@ -212,11 +211,6 @@ export function LiveTimingPage() {
              />
            </div>
            <div className="live-rc-col">
-              <TeamRadioTicker
-                captures={snapshot.TeamRadio ?? []}
-                driverInfo={snapshot.DriverInfo}
-                session={snapshot.Session}
-              />
              <RaceControlFeed messages={snapshot.RCMessages ?? []} driverInfo={snapshot.DriverInfo} />
            </div>
          </div>
--- a/frontend/src/styles/hero.css
+++ b/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;
+  }
+}
--- a/frontend/src/styles/team-radio.css
+++ b/frontend/src/styles/team-radio.css
@@ -1,82 +0,0 @@
-.team-radio {
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  overflow: hidden;
-}
-
-.team-radio-audio {
-  display: none;
-}
-
-.team-radio-list {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  max-height: 260px;
-  overflow-y: auto;
-  padding-right: 2px;
-}
-
-.team-radio-row {
-  display: grid;
-  grid-template-columns: 28px minmax(44px, 56px) minmax(68px, 1fr);
-  align-items: center;
-  gap: 8px;
-  min-height: 34px;
-  padding: 6px 0;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-}
-
-.team-radio-row:last-child {
-  border-bottom: 0;
-}
-
-.team-radio-play {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  padding: 0;
-  border: 1px solid rgba(255, 255, 255, 0.18);
-  border-radius: 50%;
-  color: var(--text-1);
-  background: rgba(255, 255, 255, 0.06);
-  cursor: pointer;
-}
-
-.team-radio-play:hover:not(:disabled),
-.team-radio-play:focus-visible:not(:disabled) {
-  border-color: rgba(255, 255, 255, 0.36);
-  background: rgba(255, 255, 255, 0.12);
-}
-
-.team-radio-play:disabled {
-  color: var(--text-3);
-  cursor: not-allowed;
-  opacity: 0.55;
-}
-
-.team-radio-driver {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 44px;
-  height: 24px;
-  border-left: 3px solid var(--text-3);
-  color: var(--text-1);
-  font-family: var(--font-mono);
-  font-size: 12px;
-  font-weight: 700;
-  letter-spacing: 0;
-}
-
-.team-radio-time {
-  min-width: 0;
-  color: var(--text-2);
-  font-family: var(--font-mono);
-  font-size: 12px;
-  text-align: right;
-  white-space: nowrap;
-}
--- a/frontend/src/test/CommandCenterPage.test.tsx
+++ b/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()
  })
--- a/frontend/src/test/LiveComponents.test.tsx
+++ b/frontend/src/test/LiveComponents.test.tsx
@@ -201,7 +201,6 @@ describe('TimingTower', () => {
          CircuitName: 'Silverstone',
          SessionType: 'Sprint Qualifying',
          SessionName: 'Sprint Qualifying',
-          Path: '',
        }}
      />,
    )
--- a/frontend/src/test/TeamRadioTicker.test.tsx
+++ b/frontend/src/test/TeamRadioTicker.test.tsx
@@ -1,87 +0,0 @@
-import { afterEach, describe, expect, it, vi } from 'vitest'
-import { fireEvent, render, screen } from '@testing-library/react'
-import { TeamRadioTicker } from '../components/live/TeamRadioTicker'
-import { radioClipUrl } from '../lib/radio'
-import type { LiveDriverInfo, LiveRadioCapture, LiveSessionMeta } from '../types'
-
-const session: LiveSessionMeta = {
-  MeetingName: 'British Grand Prix',
-  CircuitName: 'Silverstone',
-  SessionType: 'Race',
-  SessionName: 'Race',
-  Path: '/2026/2026-07-05_British_Grand_Prix/2026-07-05_Race/',
-}
-
-const driverInfo: Record<string, LiveDriverInfo> = {
-  '4': {
-    RacingNumber: '4',
-    BroadcastName: 'L NORRIS',
-    Tla: 'NOR',
-    TeamName: 'McLaren',
-    TeamColour: 'ff8000',
-    FirstName: 'Lando',
-    LastName: 'Norris',
-  },
-  '16': {
-    RacingNumber: '16',
-    BroadcastName: 'C LECLERC',
-    Tla: 'LEC',
-    TeamName: 'Ferrari',
-    TeamColour: 'e8002d',
-    FirstName: 'Charles',
-    LastName: 'Leclerc',
-  },
-}
-
-const captures: LiveRadioCapture[] = [
-  { Utc: '2026-07-05T14:05:00Z', RacingNumber: '16', Path: '/TeamRadio/LEC-1.mp3' },
-  { Utc: '2026-07-05T14:07:00Z', RacingNumber: '4', Path: 'TeamRadio/NOR-1.mp3' },
-]
-
-afterEach(() => {
-  vi.restoreAllMocks()
-})
-
-describe('radioClipUrl', () => {
-  it('builds static CDN URLs from the session path and capture path', () => {
-    expect(radioClipUrl(session, captures[0])).toBe(
-      'https://livetiming.formula1.com/static/2026/2026-07-05_British_Grand_Prix/2026-07-05_Race/TeamRadio/LEC-1.mp3',
-    )
-  })
-
-  it('returns an empty URL without path data', () => {
-    expect(radioClipUrl({ ...session, Path: '' }, captures[0])).toBe('')
-    expect(radioClipUrl(session, { ...captures[0], Path: '' })).toBe('')
-  })
-})
-
-describe('TeamRadioTicker', () => {
-  it('renders captures newest first with driver labels', () => {
-    vi.spyOn(Date, 'now').mockReturnValue(Date.parse('2026-07-05T14:10:00Z'))
-
-    render(<TeamRadioTicker captures={captures} driverInfo={driverInfo} session={session} />)
-
-    const rows = screen.getAllByRole('button')
-    expect(rows).toHaveLength(2)
-    expect(screen.getByText('NOR')).toBeInTheDocument()
-    expect(screen.getByText('LEC')).toBeInTheDocument()
-    expect(screen.getAllByText(/m ago/).map((node) => node.textContent)).toEqual(['3m ago', '5m ago'])
-  })
-
-  it('uses one audio element and toggles play/pause per clip', () => {
-    const play = vi.spyOn(window.HTMLMediaElement.prototype, 'play').mockResolvedValue()
-    const pause = vi.spyOn(window.HTMLMediaElement.prototype, 'pause').mockImplementation(() => {})
-
-    render(<TeamRadioTicker captures={captures} driverInfo={driverInfo} session={session} />)
-
-    fireEvent.click(screen.getByLabelText('Play NOR radio'))
-    expect(play).toHaveBeenCalledTimes(1)
-    expect(document.querySelectorAll('audio')).toHaveLength(1)
-    expect(document.querySelector('audio')?.getAttribute('src')).toBe(
-      'https://livetiming.formula1.com/static/2026/2026-07-05_British_Grand_Prix/2026-07-05_Race/TeamRadio/NOR-1.mp3',
-    )
-
-    fireEvent.click(screen.getByLabelText('Pause NOR radio'))
-    expect(pause).toHaveBeenCalled()
-  })
-})
--- a/frontend/src/test/hero.test.ts
+++ b/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')
+  })
+})
--- a/frontend/src/test/hero.test.tsx
+++ b/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')
+  })
+})
--- a/frontend/src/test/live.test.ts
+++ b/frontend/src/test/live.test.ts
@@ -100,8 +100,7 @@ const snapshot: LiveStreamData = {
    { Time: '14:08', Category: 'Drs', Flag: '', Message: 'DRS ENABLED', Lap: 3 },
  ],
  Weather: { AirTemp: 20, TrackTemp: 31, Humidity: 55, WindSpeed: 2, WindDir: 180, Rainfall: false },
-  Session: { MeetingName: 'Monaco Grand Prix', CircuitName: 'Monaco', SessionType: 'Race', SessionName: 'Race', Path: '2026/Monaco/Race' },
-  TeamRadio: [],
+  Session: { MeetingName: 'Monaco Grand Prix', CircuitName: 'Monaco', SessionType: 'Race', SessionName: 'Race' },
  TrackStatus: '1',
  CurrentLap: 21,
  TotalLaps: 78,
@@ -221,7 +220,7 @@ describe('track status mapping', () => {
 describe('live qualifying display', () => {
  it('puts the SQ1 cutoff after P17 for a 22-car sprint qualifying session', () => {
    const display = liveSessionDisplay(
-      { MeetingName: 'British Grand Prix', CircuitName: 'Silverstone', SessionType: 'Sprint Qualifying', SessionName: 'Sprint Qualifying', Path: '' },
+      { MeetingName: 'British Grand Prix', CircuitName: 'Silverstone', SessionType: 'Sprint Qualifying', SessionName: 'Sprint Qualifying' },
      rows(22),
    )
    expect(display.phaseLabel).toBe('SQ1')
@@ -233,7 +232,7 @@ describe('live qualifying display', () => {

  it('keeps the normal Q1 cutoff after P15 for a 20-car qualifying session', () => {
    const display = liveSessionDisplay(
-      { MeetingName: 'Monaco Grand Prix', CircuitName: 'Monaco', SessionType: 'Qualifying', SessionName: 'Qualifying', Path: '' },
+      { MeetingName: 'Monaco Grand Prix', CircuitName: 'Monaco', SessionType: 'Qualifying', SessionName: 'Qualifying' },
      rows(20),
    )
    expect(display.phaseLabel).toBe('Q1')
@@ -242,7 +241,7 @@ describe('live qualifying display', () => {

  it('moves phase 2 cutoff after P10 once five cars are knocked out', () => {
    const display = liveSessionDisplay(
-      { MeetingName: 'Monaco Grand Prix', CircuitName: 'Monaco', SessionType: 'Qualifying', SessionName: 'Qualifying', Path: '' },
+      { MeetingName: 'Monaco Grand Prix', CircuitName: 'Monaco', SessionType: 'Qualifying', SessionName: 'Qualifying' },
      rows(20, 5),
    )
    expect(display.phaseLabel).toBe('Q2')
@@ -252,13 +251,13 @@ describe('live qualifying display', () => {
  it('shows no cutoff for race sessions or Q3', () => {
    expect(
      liveSessionDisplay(
-        { MeetingName: 'Monaco Grand Prix', CircuitName: 'Monaco', SessionType: 'Race', SessionName: 'Race', Path: '' },
+        { MeetingName: 'Monaco Grand Prix', CircuitName: 'Monaco', SessionType: 'Race', SessionName: 'Race' },
        rows(20),
      ).cutoffPosition,
    ).toBeNull()
    expect(
      liveSessionDisplay(
-        { MeetingName: 'Monaco Grand Prix', CircuitName: 'Monaco', SessionType: 'Qualifying', SessionName: 'Q3', Path: '' },
+        { MeetingName: 'Monaco Grand Prix', CircuitName: 'Monaco', SessionType: 'Qualifying', SessionName: 'Q3' },
        rows(10),
      ).cutoffPosition,
    ).toBeNull()
--- a/frontend/src/types.ts
+++ b/frontend/src/types.ts
@@ -261,7 +261,6 @@ export interface LiveSessionMeta {
  CircuitName: string
  SessionType: string
  SessionName: string
-  Path: string
 }

 export interface LiveStintData {
@@ -270,12 +269,6 @@ export interface LiveStintData {
  Laps: number
 }

-export interface LiveRadioCapture {
-  Utc: string
-  RacingNumber: string
-  Path: string
-}
-
 export interface LiveStreamData {
  Drivers: Record<string, LiveDriverData>
  DriverInfo: Record<string, LiveDriverInfo>
@@ -284,7 +277,6 @@ export interface LiveStreamData {
  RCMessages: LiveRCMessage[]
  Weather: LiveWeatherData
  Session: LiveSessionMeta
-  TeamRadio: LiveRadioCapture[]
  TrackStatus: string
  CurrentLap: number
  TotalLaps: number
--- a/internal/live/parser_test.go
+++ b/internal/live/parser_test.go
@@ -5,7 +5,6 @@ import (
 	"compress/flate"
 	"encoding/base64"
 	"encoding/json"
-	"fmt"
 	"testing"
 	"time"

@@ -212,16 +211,12 @@ func TestProcessTopicSessionInfoCircuitName(t *testing.T) {
 	state.ProcessTopic("SessionInfo", json.RawMessage(`{
 		"Meeting": {"Name": "British Grand Prix", "Circuit": {"ShortName": "Silverstone"}},
 		"Name": "Race",
-		"Type": "Race",
-		"Path": "2026/2026-07-05_British_Grand_Prix/2026-07-05_Race/"
+		"Type": "Race"
 	}`))
 	s := state.Snapshot().Session
 	if s.MeetingName != "British Grand Prix" || s.CircuitName != "Silverstone" {
 		t.Fatalf("session = %+v", s)
 	}
-	if s.Path != "2026/2026-07-05_British_Grand_Prix/2026-07-05_Race/" {
-		t.Fatalf("session path = %q", s.Path)
-	}
 }

 func TestProcessTopicDriverList(t *testing.T) {
@@ -290,68 +285,6 @@ func TestProcessTopicRaceControlMessages(t *testing.T) {
 	}
 }

-func TestProcessTopicTeamRadioSnapshotAndPatch(t *testing.T) {
-	state := live.NewState()
-	snapshot := json.RawMessage(`{
-		"Captures": [
-			{"Utc": "2026-07-05T14:05:30Z", "RacingNumber": "4", "Path": "TeamRadio/NOR-1.mp3"},
-			{"Utc": "2026-07-05T14:04:10Z", "RacingNumber": "16", "Path": "TeamRadio/LEC-1.mp3"}
-		]
-	}`)
-
-	if !state.ProcessTopic("TeamRadio", snapshot) {
-		t.Fatal("TeamRadio snapshot should update state")
-	}
-
-	patch := json.RawMessage(`{
-		"Captures": {
-			"2": {"Utc": "2026-07-05T14:06:00Z", "RacingNumber": "44", "Path": "TeamRadio/HAM-1.mp3"}
-		}
-	}`)
-	if !state.ProcessTopic("TeamRadio", patch) {
-		t.Fatal("TeamRadio keyed patch should update state")
-	}
-
-	radio := state.Snapshot().TeamRadio
-	if len(radio) != 3 {
-		t.Fatalf("radio captures = %d, want 3", len(radio))
-	}
-	if radio[0].RacingNumber != "16" || radio[1].RacingNumber != "4" || radio[2].RacingNumber != "44" {
-		t.Fatalf("radio order = %+v", radio)
-	}
-}
-
-func TestProcessTopicTeamRadioMalformed(t *testing.T) {
-	state := live.NewState()
-	if state.ProcessTopic("TeamRadio", json.RawMessage(`{"Captures": {"1": {"Utc": "2026-07-05T14:06:00Z", "Path": "missing-driver.mp3"}}}`)) {
-		t.Fatal("incomplete TeamRadio capture should not update state")
-	}
-	if state.ProcessTopic("TeamRadio", json.RawMessage(`{"Captures": "not-a-list"}`)) {
-		t.Fatal("unexpected TeamRadio captures shape should not update state")
-	}
-	if len(state.Snapshot().TeamRadio) != 0 {
-		t.Fatalf("malformed captures mutated state: %+v", state.Snapshot().TeamRadio)
-	}
-}
-
-func TestProcessTopicTeamRadioCapsAtTwenty(t *testing.T) {
-	state := live.NewState()
-	for i := 0; i < 25; i++ {
-		payload := json.RawMessage([]byte(fmt.Sprintf(`{
-			"Captures": [{"Utc": "2026-07-05T14:%02d:00Z", "RacingNumber": "%d", "Path": "TeamRadio/%02d.mp3"}]
-		}`, i, i, i)))
-		state.ProcessTopic("TeamRadio", payload)
-	}
-
-	radio := state.Snapshot().TeamRadio
-	if len(radio) != 20 {
-		t.Fatalf("radio captures = %d, want 20", len(radio))
-	}
-	if radio[0].Utc != "2026-07-05T14:05:00Z" || radio[19].Utc != "2026-07-05T14:24:00Z" {
-		t.Fatalf("radio cap kept wrong captures: first=%+v last=%+v", radio[0], radio[19])
-	}
-}
-
 func TestProcessTopicWeatherData(t *testing.T) {
 	state := live.NewState()
 	state.ProcessTopic("WeatherData", json.RawMessage(`{
--- a/internal/live/signalr.go
+++ b/internal/live/signalr.go
@@ -105,7 +105,6 @@ func connectToF1SignalRCore(dataChan chan LiveStreamData) error {
 		"RaceControlMessages",
 		"WeatherData",
 		"SessionInfo",
-		"TeamRadio",
 		"CurrentTyres",
 		"TimingAppData",
 		"TimingStats",
@@ -197,7 +196,7 @@ func connectToF1LegacySignalR(dataChan chan LiveStreamData) error {
 		return err
 	}

-	subscribeMsg := []byte(`{"H":"Streaming","M":"Subscribe","A":[["Heartbeat","TimingData","Position.z","CarData.z","DriverList","LapCount","ExtrapolatedClock","TrackStatus","RaceControlMessages","WeatherData","SessionInfo","TeamRadio","CurrentTyres","TimingAppData","TimingStats"]],"I":1}`)
+	subscribeMsg := []byte(`{"H":"Streaming","M":"Subscribe","A":[["Heartbeat","TimingData","Position.z","CarData.z","DriverList","LapCount","ExtrapolatedClock","TrackStatus","RaceControlMessages","WeatherData","SessionInfo","CurrentTyres","TimingAppData","TimingStats"]],"I":1}`)
 	err = c.WriteMessage(websocket.TextMessage, subscribeMsg)
 	if err != nil {
 		return err
--- a/internal/live/state.go
+++ b/internal/live/state.go
@@ -8,8 +8,6 @@ import (
 	"encoding/json"
 	"fmt"
 	"io"
-	"log"
-	"sort"
 	"strings"
 	"time"
 )
@@ -25,7 +23,6 @@ type State struct {
 	RCMessages         []LiveRCMessage
 	Weather            LiveWeatherData
 	Session            LiveSessionMeta
-	TeamRadio          []LiveRadioCapture
 	TrackStatus        string
 	CurrentLap         int
 	TotalLaps          int
@@ -37,7 +34,6 @@ type State struct {
 }

 const signalRRecordSeparator = byte(0x1e)
-const maxTeamRadioCaptures = 20

 // NewState returns an empty live timing accumulator.
 func NewState() *State {
@@ -75,8 +71,6 @@ func (s *State) Snapshot() LiveStreamData {
 	}
 	cpyRC := make([]LiveRCMessage, len(s.RCMessages))
 	copy(cpyRC, s.RCMessages)
-	cpyRadio := make([]LiveRadioCapture, len(s.TeamRadio))
-	copy(cpyRadio, s.TeamRadio)
 	cpyStints := make(map[string][]LiveStintData, len(s.Stints))
 	for k, v := range s.Stints {
 		st := make([]LiveStintData, len(v))
@@ -92,7 +86,6 @@ func (s *State) Snapshot() LiveStreamData {
 		RCMessages:         cpyRC,
 		Weather:            s.Weather,
 		Session:            s.Session,
-		TeamRadio:          cpyRadio,
 		TrackStatus:        s.TrackStatus,
 		CurrentLap:         s.CurrentLap,
 		TotalLaps:          s.TotalLaps,
@@ -342,7 +335,6 @@ func (s *State) ProcessTopic(topic string, data json.RawMessage) bool {
 			} `json:"Meeting"`
 			Name string `json:"Name"`
 			Type string `json:"Type"`
-			Path string `json:"Path"`
 		}
 		if json.Unmarshal(data, &si) == nil {
 			if si.Meeting.Name != "" {
@@ -357,13 +349,8 @@ func (s *State) ProcessTopic(topic string, data json.RawMessage) bool {
 			if si.Type != "" {
 				s.Session.SessionType = si.Type
 			}
-			if si.Path != "" {
-				s.Session.Path = si.Path
-			}
 			updated = true
 		}
-	case "TeamRadio":
-		updated = s.updateTeamRadio(data)
 	case "CurrentTyres":
 		var ct map[string]json.RawMessage
 		if json.Unmarshal(data, &ct) == nil {
@@ -496,62 +483,6 @@ func readCompressed(r io.ReadCloser, err error) ([]byte, bool) {
 	return out, err == nil
 }

-func (s *State) updateTeamRadio(data json.RawMessage) bool {
-	var payload struct {
-		Captures json.RawMessage `json:"Captures"`
-	}
-	if err := json.Unmarshal(data, &payload); err != nil {
-		log.Printf("live: skipping malformed TeamRadio payload: %v", err)
-		return false
-	}
-	if len(payload.Captures) == 0 || string(payload.Captures) == "null" {
-		log.Printf("live: skipping TeamRadio payload without Captures")
-		return false
-	}
-
-	captures := indexedRawValues(payload.Captures)
-	if len(captures) == 0 {
-		log.Printf("live: skipping TeamRadio payload with unexpected Captures shape")
-		return false
-	}
-
-	updated := false
-	for _, captureRaw := range captures {
-		var capture LiveRadioCapture
-		if err := json.Unmarshal(captureRaw.Raw, &capture); err != nil {
-			log.Printf("live: skipping malformed TeamRadio capture: %v", err)
-			continue
-		}
-		if capture.Utc == "" || capture.RacingNumber == "" || capture.Path == "" {
-			log.Printf("live: skipping incomplete TeamRadio capture: utc=%q racing_number=%q path=%q", capture.Utc, capture.RacingNumber, capture.Path)
-			continue
-		}
-		if s.hasTeamRadioCapture(capture) {
-			continue
-		}
-		s.TeamRadio = append(s.TeamRadio, capture)
-		updated = true
-	}
-	if updated {
-		sort.SliceStable(s.TeamRadio, func(i, j int) bool {
-			return s.TeamRadio[i].Utc < s.TeamRadio[j].Utc
-		})
-		if len(s.TeamRadio) > maxTeamRadioCaptures {
-			s.TeamRadio = append([]LiveRadioCapture(nil), s.TeamRadio[len(s.TeamRadio)-maxTeamRadioCaptures:]...)
-		}
-	}
-	return updated
-}
-
-func (s *State) hasTeamRadioCapture(capture LiveRadioCapture) bool {
-	for _, existing := range s.TeamRadio {
-		if existing.Utc == capture.Utc && existing.RacingNumber == capture.RacingNumber && existing.Path == capture.Path {
-			return true
-		}
-	}
-	return false
-}
-
 func (s *State) updatePositions(data json.RawMessage) bool {
 	var payload struct {
 		Position json.RawMessage `json:"Position"`
@@ -868,9 +799,6 @@ func indexedRawValues(raw json.RawMessage) []indexedRaw {
 			fmt.Sscanf(k, "%d", &i)
 			values = append(values, indexedRaw{Index: i, Raw: v})
 		}
-		sort.Slice(values, func(i, j int) bool {
-			return values[i].Index < values[j].Index
-		})
 		return values
 	}

--- a/internal/live/types.go
+++ b/internal/live/types.go
@@ -85,7 +85,6 @@ type LiveSessionMeta struct {
 	CircuitName string
 	SessionType string
 	SessionName string
-	Path        string
 }

 // LivePositionData is the latest raw F1 GPS position for one driver.
@@ -145,13 +144,6 @@ type LiveStintData struct {
 	Laps     int
 }

-// LiveRadioCapture is one team radio audio clip from the live timing feed.
-type LiveRadioCapture struct {
-	Utc          string
-	RacingNumber string
-	Path         string
-}
-
 // LiveStreamData is an immutable snapshot of all live timing state.
 type LiveStreamData struct {
 	Drivers            map[string]LiveDriverData
@@ -161,7 +153,6 @@ type LiveStreamData struct {
 	RCMessages         []LiveRCMessage
 	Weather            LiveWeatherData
 	Session            LiveSessionMeta
-	TeamRadio          []LiveRadioCapture
 	TrackStatus        string // "1"=green "2"=yellow "4"=SC "5"=red "6"=VSC
 	CurrentLap         int
 	TotalLaps          int
--- a/tests/command-center.spec.ts
+++ b/tests/command-center.spec.ts
@@ -9,7 +9,7 @@ test.describe('Command Center', () => {
    await expect(page.getByTestId('command-center')).toBeVisible()
    await expect(page.getByTestId('cc-focus')).toBeVisible()
    await expect(page.getByTestId('cc-session-9472')).toBeVisible()
-    await expect(page.getByTestId('cc-actions')).toBeVisible()
+    await expect(page.getByTestId('hero-last-race-link')).toBeVisible()
  })

  test('nav link reaches command center from race hub', async ({ page }) => {
@@ -21,8 +21,8 @@ test.describe('Command Center', () => {

  test('open analysis action opens race hub for the focus session', async ({ page }) => {
    await page.goto('/')
-    await expect(page.getByTestId('cc-action-race-hub')).toContainText(String(FULL_SESSION))
-    await page.getByTestId('cc-action-race-hub').click()
+    await expect(page.getByTestId('hero-last-race-link')).toBeVisible()
+    await page.getByTestId('hero-last-race-link').click()
    await expect(page).toHaveURL(new RegExp(`/race-hub\\?session_key=${FULL_SESSION}`))
    await expect(page.getByTestId('rh-identity')).toBeVisible()
    await expect(page.getByTestId(`rh-session-${FULL_SESSION}`)).toBeVisible()