feat(frontend): annotate key numbers with meaning (#18)

Add shared Meaning primitive and pure interpretation helpers for interval,
tyre age, and championship gap columns on the live tower, tyre deg panel,
and championship hub. Thresholds are exported consts (undercut window tied
to PIT_LOSS_SECONDS from #13).

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

.agents/harnesses.sh

@@ -31,11 +31,13 @@ harness_cursor() {                      # Cursor CLI agent — composer-2.5, hea
   ( cd "$dir" && cursor-agent -p "$(cat "$prompt")" --model composer-2.5 --force --trust )
 }
 
-harness_agy() {                         # Antigravity CLI — Gemini 3.1 Pro, headless full-auto
+harness_agy() {                         # Antigravity CLI — UNRELIABLE headless (2026-07): with
-  # --new-project is required for --model to take effect (otherwise agy resumes the
+  # --new-project it ignores the prompt and asks to scaffold a project; without it, it
-  # previous conversation and silently keeps its old model).
+  # resumes the previous conversation (silently keeping its old model — --model only
+  # applies to new conversations) and can hang past the print timeout. Do not trust for
+  # dispatch until fixed upstream; verify with a trivial prompt first.
   local dir="$1" prompt="$2"
-  ( cd "$dir" && agy --print --new-project --print-timeout 60m \
+  ( cd "$dir" && agy --print --print-timeout 60m \
       --model="Gemini 3.1 Pro (High)" --dangerously-skip-permissions "$(cat "$prompt")" )
 }
 

frontend/src/api.ts

@@ -1,6 +1,8 @@
 import type {
   ArticleContent,
+  CarDataSample,
   ChampionshipHub,
+  LapsComparisonResponse,
   LiveStateResponse,
   LiveSessionMeta,
   Meeting,
@@ -126,3 +128,32 @@ export async function markNewsRead(articleUrl: string): Promise<void> {
     body: JSON.stringify({ url: articleUrl }),
   })
 }
+
+export async function fetchTelemetry(
+  sessionKey: number,
+  driverNumber: number,
+): Promise<CarDataSample[]> {
+  const res = await fetch(
+    `/api/v1/telemetry?session_key=${sessionKey}&driver_number=${driverNumber}`,
+  )
+  if (!res.ok) {
+    throw new Error(`API ${res.status}: ${res.statusText}`)
+  }
+  const data = await res.json()
+  return Array.isArray(data) ? data : []
+}
+
+export async function fetchLapsComparison(
+  sessionKey: number,
+  drivers?: number[],
+): Promise<LapsComparisonResponse> {
+  const params = new URLSearchParams({ session_key: String(sessionKey) })
+  if (drivers?.length) {
+    params.set('drivers', drivers.join(','))
+  }
+  const res = await fetch(`/api/v1/laps/comparison?${params}`)
+  if (!res.ok) {
+    throw new Error(`API ${res.status}: ${res.statusText}`)
+  }
+  return res.json()
+}

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/components/CompareView.tsx

@@ -0,0 +1,244 @@
+import { useEffect, useMemo, useState } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { fetchLapsComparison, fetchTelemetry } from '../api'
+import {
+  buildBestLapTraceSeries,
+  compareDriverOptions,
+  comparisonToDeltaSeries,
+  defaultCompareDriverNumbers,
+  formatPitLapsCaption,
+} from '../lib/compare'
+import type { Driver, EnrichedResult } from '../types'
+import { teamColor } from '../utils'
+import { DriverCell } from './DriverCell'
+import { TelemetryTraceChart } from './charts/TelemetryTraceChart'
+import { DeltaTimeGraph } from './charts/DeltaTimeGraph'
+import '../styles/compare-view.css'
+
+interface Props {
+  sessionKey: number
+  results: EnrichedResult[]
+  drivers: Driver[]
+}
+
+function SectionState({
+  loading,
+  error,
+  empty,
+  emptyMessage,
+  children,
+}: {
+  loading: boolean
+  error: Error | null
+  empty: boolean
+  emptyMessage: string
+  children: React.ReactNode
+}) {
+  if (loading) {
+    return <div className="loading-state">loading…</div>
+  }
+  if (error) {
+    return <div className="error-box">{error.message}</div>
+  }
+  if (empty) {
+    return <div className="missing-notice">{emptyMessage}</div>
+  }
+  return <>{children}</>
+}
+
+export function CompareView({ sessionKey, results, drivers }: Props) {
+  const driverOptions = useMemo(
+    () => compareDriverOptions(drivers, results),
+    [drivers, results],
+  )
+
+  const initialPair = useMemo(
+    () => defaultCompareDriverNumbers(results, drivers),
+    [results, drivers],
+  )
+
+  const [driverA, setDriverA] = useState<number | null>(initialPair?.[0] ?? null)
+  const [driverB, setDriverB] = useState<number | null>(initialPair?.[1] ?? null)
+
+  useEffect(() => {
+    if (driverA != null && driverB != null) return
+    const pair = defaultCompareDriverNumbers(results, drivers)
+    if (!pair) return
+    setDriverA(pair[0])
+    setDriverB(pair[1])
+  }, [results, drivers, driverA, driverB])
+
+  const pair = useMemo((): [number, number] | null => {
+    if (driverA == null || driverB == null || driverA === driverB) return null
+    return [driverA, driverB]
+  }, [driverA, driverB])
+
+  const comparisonQuery = useQuery({
+    queryKey: ['laps-comparison', sessionKey, pair?.[0], pair?.[1]],
+    queryFn: () => fetchLapsComparison(sessionKey, pair!),
+    enabled: pair != null,
+    staleTime: 60_000,
+  })
+
+  const telemetryAQuery = useQuery({
+    queryKey: ['telemetry', sessionKey, pair?.[0]],
+    queryFn: () => fetchTelemetry(sessionKey, pair![0]),
+    enabled: pair != null,
+    staleTime: 60_000,
+  })
+
+  const telemetryBQuery = useQuery({
+    queryKey: ['telemetry', sessionKey, pair?.[1]],
+    queryFn: () => fetchTelemetry(sessionKey, pair![1]),
+    enabled: pair != null,
+    staleTime: 60_000,
+  })
+
+  const comparison = comparisonQuery.data
+  const referenceLabel = useMemo(() => {
+    if (!pair) return undefined
+    const meta = comparison?.drivers.find((d) => d.driver_number === pair[0])
+    const session = drivers.find((d) => d.driver_number === pair[0])
+    return meta?.name_acronym || session?.name_acronym
+  }, [pair, comparison, drivers])
+
+  const deltaSeries = useMemo(() => {
+    if (!comparison || !pair) return []
+    return comparisonToDeltaSeries(comparison, pair, drivers)
+  }, [comparison, pair, drivers])
+
+  const pitCaption = useMemo(() => {
+    if (!comparison || !pair) return null
+    return formatPitLapsCaption(comparison.pit_laps, pair, comparison, drivers)
+  }, [comparison, pair, drivers])
+
+  const traceSeries = useMemo(() => {
+    if (!pair || !comparison) return []
+    const out = []
+
+    for (const dn of pair) {
+      const comp = comparison.drivers.find((d) => d.driver_number === dn)
+      const session = drivers.find((d) => d.driver_number === dn)
+      const label = comp?.name_acronym || session?.name_acronym || `#${dn}`
+      const color = teamColor(comp?.team_colour || session?.team_colour)
+
+      const carData =
+        dn === pair[0] ? (telemetryAQuery.data ?? []) : (telemetryBQuery.data ?? [])
+      const series = buildBestLapTraceSeries(carData, comp?.laps ?? [], label, color)
+      if (series) out.push(series)
+    }
+
+    return out
+  }, [pair, comparison, drivers, telemetryAQuery.data, telemetryBQuery.data])
+
+  const telemetryLoading = telemetryAQuery.isLoading || telemetryBQuery.isLoading
+  const telemetryError = telemetryAQuery.error ?? telemetryBQuery.error
+
+  if (driverOptions.length < 2) {
+    return (
+      <div className="missing-notice" data-testid="compare-view-empty">
+        Need at least two drivers in this session to compare.
+      </div>
+    )
+  }
+
+  const driverAInfo = driverOptions.find((d) => d.driver_number === driverA)
+  const driverBInfo = driverOptions.find((d) => d.driver_number === driverB)
+
+  return (
+    <div className="compare-view" data-testid="compare-view">
+      <div className="compare-pickers">
+        <div className="compare-picker">
+          <span className="compare-picker-label">Reference</span>
+          <select
+            className="compare-picker-select"
+            value={driverA ?? ''}
+            onChange={(e) => setDriverA(Number(e.target.value))}
+            data-testid="compare-picker-a"
+          >
+            {driverOptions.map((d) => (
+              <option key={d.driver_number} value={d.driver_number}>
+                {d.name_acronym} · #{d.driver_number}
+              </option>
+            ))}
+          </select>
+          {driverAInfo && (
+            <DriverCell
+              acronym={driverAInfo.name_acronym}
+              number={driverAInfo.driver_number}
+              colour={driverAInfo.team_colour}
+            />
+          )}
+        </div>
+
+        <div className="compare-picker">
+          <span className="compare-picker-label">Challenger</span>
+          <select
+            className="compare-picker-select"
+            value={driverB ?? ''}
+            onChange={(e) => setDriverB(Number(e.target.value))}
+            data-testid="compare-picker-b"
+          >
+            {driverOptions.map((d) => (
+              <option key={d.driver_number} value={d.driver_number}>
+                {d.name_acronym} · #{d.driver_number}
+              </option>
+            ))}
+          </select>
+          {driverBInfo && (
+            <DriverCell
+              acronym={driverBInfo.name_acronym}
+              number={driverBInfo.driver_number}
+              colour={driverBInfo.team_colour}
+            />
+          )}
+        </div>
+      </div>
+
+      {driverA === driverB && (
+        <div className="analysis-notice">
+          <strong>Pick two different drivers</strong> to run a comparison.
+        </div>
+      )}
+
+      <section className="compare-section" data-testid="compare-telemetry-section">
+        <div>
+          <div className="compare-section-title">Best lap telemetry</div>
+          <div className="compare-section-meta">
+            Speed, throttle, and brake traces for each driver&apos;s fastest lap
+          </div>
+        </div>
+        <SectionState
+          loading={telemetryLoading}
+          error={telemetryError instanceof Error ? telemetryError : null}
+          empty={!telemetryLoading && !telemetryError && traceSeries.length === 0}
+          emptyMessage="No telemetry samples for the best laps. Car data may not be available for this session."
+        >
+          <TelemetryTraceChart series={traceSeries} />
+        </SectionState>
+      </section>
+
+      <section className="compare-section" data-testid="compare-pace-section">
+        <div>
+          <div className="compare-section-title">Race pace</div>
+          <div className="compare-section-meta">
+            Cumulative lap-time delta vs {referenceLabel ?? 'reference'}
+          </div>
+        </div>
+        <SectionState
+          loading={comparisonQuery.isLoading}
+          error={comparisonQuery.error instanceof Error ? comparisonQuery.error : null}
+          empty={!comparisonQuery.isLoading && !comparisonQuery.error && deltaSeries.length < 2}
+          emptyMessage="No lap comparison data for the selected drivers."
+        >
+          <DeltaTimeGraph series={deltaSeries} referenceLabel={referenceLabel} />
+          {pitCaption && (
+            <p className="compare-pit-caption" data-testid="compare-pit-caption">
+              {pitCaption}
+            </p>
+          )}
+        </SectionState>
+      </section>
+    </div>
+  )
+}

frontend/src/components/Meaning.tsx

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react'
+import '../styles/meaning.css'
+
+export interface MeaningProps {
+  value: ReactNode
+  meaning?: string | null
+  /** Long-form explanation for the native tooltip; falls back to meaning. */
+  title?: string | null
+  tone?: 'good' | 'bad' | 'neutral' | 'warn'
+}
+
+export function Meaning({ value, meaning, title, tone }: MeaningProps) {
+  if (!meaning) {
+    return <>{value}</>
+  }
+
+  const tooltip = title ?? meaning
+  const toneClass = tone ? `meaning-caption--${tone}` : ''
+
+  return (
+    <span className="meaning" title={tooltip}>
+      <span className="meaning-value">{value}</span>
+      <span className={`meaning-caption ${toneClass}`.trim()}>{meaning}</span>
+    </span>
+  )
+}

frontend/src/components/StrategyView.tsx

@@ -1,28 +1,9 @@
 import type { EnrichedResult, Stint, PitStop } from '../types'
 import { compareFinishPosition } from '../utils'
-
+import {
-const COMPOUND_COLORS: Record<string, string> = {
+  TyreStintTimeline,
-  SOFT: '#e8002d',
+  type StintTimelineRow,
-  MEDIUM: '#ffd600',
+} from './charts/TyreStintTimeline'
-  HARD: '#e8e8e4',
-  INTERMEDIATE: '#39b54a',
-  WET: '#0067ff',
-}
-
-function compoundColor(c: string): string {
-  return COMPOUND_COLORS[c.toUpperCase()] ?? '#666'
-}
-
-function compoundInitial(c: string): string {
-  const abbr: Record<string, string> = {
-    SOFT: 'S',
-    MEDIUM: 'M',
-    HARD: 'H',
-    INTERMEDIATE: 'I',
-    WET: 'W',
-  }
-  return abbr[c.toUpperCase()] ?? c[0] ?? '?'
-}
 
 interface Props {
   results: EnrichedResult[]
@@ -31,7 +12,7 @@ interface Props {
   hasStints: boolean
 }
 
-export function StrategyView({ results, stints, pit_stops, hasStints }: Props) {
+export function StrategyView({ results, stints, pit_stops: _pitStops, hasStints }: Props) {
   if (!hasStints) {
     return (
       <div>
@@ -89,147 +70,29 @@ export function StrategyView({ results, stints, pit_stops, hasStints }: Props) {
     const cmp = compareFinishPosition(a.position, b.position)
     return cmp !== 0 ? cmp : a.driver_number - b.driver_number
   })
+
   const totalLaps = Math.max(
     ...stints.map((s) => s.lap_end),
     ...results.map((r) => r.number_of_laps),
-    1
+    1,
   )
 
-  const SVG_W = 640
+  const timelineRows: StintTimelineRow[] = sortedDrivers.map((driver) => ({
-  const LEFT = 48
+    label: driver.name_acronym || String(driver.driver_number),
-  const RIGHT = 12
+    color: driver.team_colour ? `#${driver.team_colour}` : '#888',
-  const ROW_H = 28
+    stints: stints
-  const BAR_H = 14
+      .filter((s) => s.driver_number === driver.driver_number)
-  const BAR_Y = 7
+      .map((s) => ({
-  const BAR_W = SVG_W - LEFT - RIGHT
+        compound: s.compound,
-  const SVG_H = sortedDrivers.length * ROW_H + 8
+        lapStart: s.lap_start,
-
+        lapEnd: s.lap_end,
-  const lapX = (lap: number) => LEFT + ((lap - 1) / totalLaps) * BAR_W
+        isNew: s.tyre_age_at_start === 0,
-  const stintW = (s: Stint) =>
+      })),
-    Math.max(2, ((s.lap_end - s.lap_start + 1) / totalLaps) * BAR_W)
+  }))
-
-  const usedCompounds = [...new Set(stints.map((s) => s.compound.toUpperCase()))].filter(
-    (c) => c in COMPOUND_COLORS
-  )
 
   return (
     <div data-testid="strategy-chart">
-      <div className="scroll-x">
+      <TyreStintTimeline rows={timelineRows} totalLaps={totalLaps} />
-        <svg
-          viewBox={`0 0 ${SVG_W} ${SVG_H}`}
-          style={{ width: '100%', minWidth: 280, maxWidth: SVG_W, display: 'block' }}
-          role="img"
-          aria-label="Race strategy stint chart"
-        >
-          {sortedDrivers.map((driver, i) => {
-            const rowY = i * ROW_H
-            const color = driver.team_colour ? `#${driver.team_colour}` : '#888'
-            const dStints = stints.filter((s) => s.driver_number === driver.driver_number)
-            const dPits = pit_stops.filter((p) => p.driver_number === driver.driver_number)
-
-            return (
-              <g key={driver.driver_number} transform={`translate(0,${rowY})`}>
-                <text
-                  x={LEFT - 5}
-                  y={BAR_Y + BAR_H / 2 + 4}
-                  textAnchor="end"
-                  fill={color}
-                  fontFamily="var(--f-mono)"
-                  fontWeight={700}
-                  fontSize={10}
-                >
-                  {driver.name_acronym}
-                </text>
-
-                {dStints.map((stint, si) => {
-                  const x = lapX(stint.lap_start)
-                  const w = stintW(stint)
-                  const fill = compoundColor(stint.compound)
-                  return (
-                    <g key={si}>
-                      <rect x={x} y={BAR_Y} width={w} height={BAR_H} fill={fill} rx={1.5} />
-                      {w > 18 && (
-                        <text
-                          x={x + w / 2}
-                          y={BAR_Y + BAR_H / 2 + 4}
-                          textAnchor="middle"
-                          fill="#111"
-                          fontFamily="var(--f-mono)"
-                          fontWeight={700}
-                          fontSize={8}
-                        >
-                          {compoundInitial(stint.compound)}
-                        </text>
-                      )}
-                    </g>
-                  )
-                })}
-
-                {dPits.map((pit, pi) => {
-                  const x = lapX(pit.lap_number)
-                  return (
-                    <line
-                      key={pi}
-                      x1={x}
-                      x2={x}
-                      y1={BAR_Y - 3}
-                      y2={BAR_Y + BAR_H + 3}
-                      stroke="var(--text)"
-                      strokeWidth={1.5}
-                      opacity={0.7}
-                    />
-                  )
-                })}
-              </g>
-            )
-          })}
-        </svg>
-      </div>
-
-      <div
-        style={{
-          display: 'flex',
-          gap: 'var(--s4)',
-          flexWrap: 'wrap',
-          marginTop: 'var(--s4)',
-          fontSize: 11,
-          color: 'var(--text-3)',
-          alignItems: 'center',
-        }}
-      >
-        {usedCompounds.map((c) => (
-          <span key={c} style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
-            <span
-              style={{
-                width: 10,
-                height: 10,
-                background: COMPOUND_COLORS[c],
-                borderRadius: 2,
-                display: 'inline-block',
-                border: c === 'HARD' ? '1px solid #555' : undefined,
-              }}
-            />
-            {c.charAt(0) + c.slice(1).toLowerCase()}
-          </span>
-        ))}
-        {pit_stops.length > 0 && (
-          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, marginLeft: 4 }}>
-            <span
-              style={{
-                width: 1,
-                height: 12,
-                background: 'var(--text)',
-                display: 'inline-block',
-                opacity: 0.7,
-              }}
-            />
-            Pit stop
-          </span>
-        )}
-        <span style={{ marginLeft: 'auto', fontFamily: 'var(--f-mono)', fontSize: 10 }}>
-          {totalLaps} laps
-        </span>
-      </div>
     </div>
   )
 }

frontend/src/components/TabBar.tsx

@@ -2,6 +2,7 @@ export type Tab =
   | 'overview'
   | 'race_story'
   | 'strategy'
+  | 'compare'
   | 'lap_data'
   | 'conditions'
   | 'race_control'
@@ -11,6 +12,7 @@ const TABS: { id: Tab; label: string }[] = [
   { id: 'overview', label: 'Overview' },
   { id: 'race_story', label: 'Race Story' },
   { id: 'strategy', label: 'Strategy' },
+  { id: 'compare', label: 'Compare' },
   { id: 'lap_data', label: 'Lap Data' },
   { id: 'conditions', label: 'Conditions' },
   { id: 'race_control', label: 'Race Control' },

frontend/src/components/charts/TelemetryTraceChart.tsx

@@ -0,0 +1,194 @@
+import { useMemo, useRef, useState } from 'react'
+import '../../styles/telemetry-trace.css'
+
+export interface TelemetryTraceSample {
+  speed: number
+  throttle: number
+  brake: number
+}
+
+export interface TelemetryTraceSeries {
+  label: string
+  color: string
+  samples: TelemetryTraceSample[]
+}
+
+export type TelemetryTraceChannel = 'speed' | 'throttle' | 'brake'
+
+export interface TelemetryTraceChartProps {
+  series: TelemetryTraceSeries[]
+  channels?: TelemetryTraceChannel[]
+  /** Height of each channel panel in SVG units (viewBox space). */
+  height?: number
+}
+
+const VIEW_WIDTH = 800
+const PANEL_GAP = 18
+const PAD_TOP = 6
+const PAD_BOTTOM = 6
+
+const CHANNEL_LABELS: Record<TelemetryTraceChannel, string> = {
+  speed: 'Speed',
+  throttle: 'Throttle',
+  brake: 'Brake',
+}
+
+const clamp = (v: number, min: number, max: number) => Math.min(max, Math.max(min, v))
+
+function channelValue(sample: TelemetryTraceSample, channel: TelemetryTraceChannel): number {
+  const raw = sample[channel]
+  // Throttle/brake are percentages; clamp so out-of-range API values can't
+  // draw outside the panel. Speed is clamped to >= 0.
+  if (channel === 'speed') return Math.max(0, raw)
+  return clamp(raw, 0, 100)
+}
+
+function formatValue(value: number, channel: TelemetryTraceChannel): string {
+  if (channel === 'speed') return `${Math.round(value)} km/h`
+  return `${Math.round(value)}%`
+}
+
+export function TelemetryTraceChart({
+  series,
+  channels = ['speed', 'throttle', 'brake'],
+  height = 110,
+}: TelemetryTraceChartProps) {
+  const svgRef = useRef<SVGSVGElement | null>(null)
+  const [hoverIndex, setHoverIndex] = useState<number | null>(null)
+
+  // Series are index-aligned; mismatched lengths are clamped to the shortest
+  // series so every drawn x has a value for every driver.
+  const sampleCount = useMemo(
+    () => (series.length === 0 ? 0 : Math.min(...series.map((s) => s.samples.length))),
+    [series],
+  )
+
+  const speedMax = useMemo(() => {
+    let max = 0
+    for (const s of series) {
+      for (let i = 0; i < sampleCount; i++) {
+        max = Math.max(max, channelValue(s.samples[i], 'speed'))
+      }
+    }
+    return max > 0 ? max : 1
+  }, [series, sampleCount])
+
+  if (series.length === 0 || sampleCount === 0 || channels.length === 0) {
+    return <div className="telemetry-trace-empty">No telemetry data</div>
+  }
+
+  // Clamp a stale hover index in case the series prop shrank between renders.
+  const hover = hoverIndex === null ? null : Math.min(hoverIndex, sampleCount - 1)
+
+  const panelHeight = height
+  const totalHeight = channels.length * panelHeight + (channels.length - 1) * PANEL_GAP
+  const xAt = (i: number) => (i / Math.max(1, sampleCount - 1)) * VIEW_WIDTH
+
+  const channelMax = (channel: TelemetryTraceChannel) => (channel === 'speed' ? speedMax : 100)
+
+  const yAt = (value: number, channel: TelemetryTraceChannel, panelTop: number) => {
+    const usable = panelHeight - PAD_TOP - PAD_BOTTOM
+    const frac = channelValue({ speed: value, throttle: value, brake: value }, channel) / channelMax(channel)
+    return panelTop + PAD_TOP + (1 - frac) * usable
+  }
+
+  const handleMouseMove = (e: React.MouseEvent<SVGSVGElement>) => {
+    const rect = svgRef.current?.getBoundingClientRect()
+    if (!rect || rect.width === 0) {
+      setHoverIndex(0)
+      return
+    }
+    const frac = clamp((e.clientX - rect.left) / rect.width, 0, 1)
+    setHoverIndex(clamp(Math.round(frac * (sampleCount - 1)), 0, sampleCount - 1))
+  }
+
+  return (
+    <div className="telemetry-trace" data-testid="telemetry-trace">
+      <div className="telemetry-trace-legend">
+        {series.map((s) => (
+          <span key={s.label} className="telemetry-trace-legend-item">
+            <span className="telemetry-trace-swatch" style={{ background: s.color }} aria-hidden="true" />
+            {s.label}
+          </span>
+        ))}
+      </div>
+      <svg
+        ref={svgRef}
+        className="telemetry-trace-svg"
+        viewBox={`0 0 ${VIEW_WIDTH} ${totalHeight}`}
+        role="img"
+        aria-label="Telemetry trace chart"
+        onMouseMove={handleMouseMove}
+        onMouseLeave={() => setHoverIndex(null)}
+      >
+        {channels.map((channel, panelIdx) => {
+          const panelTop = panelIdx * (panelHeight + PANEL_GAP)
+          return (
+            <g key={channel} className="telemetry-trace-panel" data-channel={channel}>
+              <rect
+                className="telemetry-trace-panel-bg"
+                x={0}
+                y={panelTop}
+                width={VIEW_WIDTH}
+                height={panelHeight}
+              />
+              <text className="telemetry-trace-panel-title" x={6} y={panelTop + 13}>
+                {CHANNEL_LABELS[channel]}
+              </text>
+              <text className="telemetry-trace-axis-max" x={VIEW_WIDTH - 6} y={panelTop + 13} textAnchor="end">
+                {channel === 'speed' ? `${Math.round(speedMax)} km/h` : '100%'}
+              </text>
+              {series.map((s) => {
+                const points = Array.from({ length: sampleCount }, (_, i) => {
+                  const x = xAt(i)
+                  const y = yAt(s.samples[i][channel], channel, panelTop)
+                  return `${x.toFixed(2)},${y.toFixed(2)}`
+                }).join(' ')
+                return (
+                  <polyline
+                    key={s.label}
+                    className="telemetry-trace-line"
+                    data-channel={channel}
+                    data-series={s.label}
+                    points={points}
+                    fill="none"
+                    stroke={s.color}
+                    strokeWidth={1.6}
+                    strokeLinejoin="round"
+                    strokeLinecap="round"
+                  />
+                )
+              })}
+            </g>
+          )
+        })}
+        {hover !== null && (
+          <line
+            className="telemetry-trace-crosshair"
+            data-testid="telemetry-trace-crosshair"
+            x1={xAt(hover)}
+            y1={0}
+            x2={xAt(hover)}
+            y2={totalHeight}
+          />
+        )}
+      </svg>
+      {hover !== null && (
+        <div className="telemetry-trace-readout" data-testid="telemetry-trace-readout">
+          <span className="telemetry-trace-readout-index">Sample {hover}</span>
+          {series.map((s) => (
+            <span key={s.label} className="telemetry-trace-readout-driver">
+              <span className="telemetry-trace-swatch" style={{ background: s.color }} aria-hidden="true" />
+              <span className="telemetry-trace-readout-label">{s.label}</span>
+              {channels.map((channel) => (
+                <span key={channel} className="telemetry-trace-readout-value">
+                  {formatValue(channelValue(s.samples[hover], channel), channel)}
+                </span>
+              ))}
+            </span>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

frontend/src/components/charts/TyreStintTimeline.tsx

@@ -0,0 +1,182 @@
+import { compoundClass } from '../../lib/live'
+import '../../styles/stint-timeline.css'
+
+export interface StintTimelineStint {
+  compound: string
+  lapStart: number
+  lapEnd: number
+  isNew?: boolean
+}
+
+export interface StintTimelineRow {
+  label: string
+  color: string
+  stints: StintTimelineStint[]
+}
+
+interface TyreStintTimelineProps {
+  rows: StintTimelineRow[]
+  totalLaps: number
+}
+
+const SVG_W = 640
+const LEFT = 48
+const RIGHT = 12
+const ROW_H = 28
+const BAR_H = 14
+const BAR_Y = 7
+const AXIS_H = 20
+const BAR_W = SVG_W - LEFT - RIGHT
+
+const COMPOUND_ORDER = ['SOFT', 'MEDIUM', 'HARD', 'INTERMEDIATE', 'WET'] as const
+
+function compoundLabel(compound: string): string {
+  const upper = compound.toUpperCase()
+  if (upper === 'INTERMEDIATE') return 'Intermediate'
+  return upper.charAt(0) + upper.slice(1).toLowerCase()
+}
+
+function stintLength(stint: StintTimelineStint): number {
+  return stint.lapEnd - stint.lapStart + 1
+}
+
+function stintTitle(stint: StintTimelineStint): string {
+  const length = stintLength(stint)
+  return `${compoundLabel(stint.compound)} · L${stint.lapStart}–${stint.lapEnd} · ${length} lap${length === 1 ? '' : 's'}`
+}
+
+function lapX(lap: number, totalLaps: number): number {
+  return LEFT + (lap / totalLaps) * BAR_W
+}
+
+function stintBarX(stint: StintTimelineStint, totalLaps: number): number {
+  return LEFT + ((stint.lapStart - 1) / totalLaps) * BAR_W
+}
+
+function stintBarW(stint: StintTimelineStint, totalLaps: number): number {
+  return Math.max(2, (stintLength(stint) / totalLaps) * BAR_W)
+}
+
+function axisTicks(totalLaps: number): number[] {
+  const ticks: number[] = []
+  for (let lap = 0; lap <= totalLaps; lap += 10) {
+    ticks.push(lap)
+  }
+  return ticks
+}
+
+function collectUsedCompounds(rows: StintTimelineRow[]): string[] {
+  const seen = new Set<string>()
+  for (const row of rows) {
+    for (const stint of row.stints) {
+      seen.add(stint.compound.toUpperCase())
+    }
+  }
+  const ordered = COMPOUND_ORDER.filter((c) => seen.has(c))
+  const extras = [...seen]
+    .filter((c) => !COMPOUND_ORDER.includes(c as (typeof COMPOUND_ORDER)[number]))
+    .sort()
+  return [...ordered, ...extras]
+}
+
+export function TyreStintTimeline({ rows, totalLaps }: TyreStintTimelineProps) {
+  const safeTotal = Math.max(totalLaps, 1)
+  const usedCompounds = collectUsedCompounds(rows)
+  const ticks = axisTicks(safeTotal)
+  const chartH = rows.length * ROW_H
+  const svgH = chartH + AXIS_H + 4
+
+  if (rows.length === 0) {
+    return (
+      <div className="stint-timeline" data-testid="stint-timeline-empty">
+        <div className="stint-timeline__empty">No stint data to display.</div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="stint-timeline" data-testid="stint-timeline">
+      <div className="stint-timeline__scroll">
+        <svg
+          viewBox={`0 0 ${SVG_W} ${svgH}`}
+          className="stint-timeline__svg"
+          role="img"
+          aria-label="Tyre stint timeline"
+        >
+          {rows.map((row, i) => {
+            const rowY = i * ROW_H
+            return (
+              <g key={`${row.label}-${i}`} transform={`translate(0,${rowY})`}>
+                <text
+                  x={LEFT - 5}
+                  y={BAR_Y + BAR_H / 2 + 4}
+                  textAnchor="end"
+                  fill={row.color}
+                  className="stint-timeline__label"
+                >
+                  {row.label}
+                </text>
+
+                {row.stints.map((stint, si) => (
+                  <rect
+                    key={si}
+                    x={stintBarX(stint, safeTotal)}
+                    y={BAR_Y}
+                    width={stintBarW(stint, safeTotal)}
+                    height={BAR_H}
+                    rx={3}
+                    className={`stint-timeline__bar ${compoundClass(stint.compound)}${stint.isNew ? ' stint-timeline__bar--new' : ''}`}
+                  >
+                    <title>{stintTitle(stint)}</title>
+                  </rect>
+                ))}
+              </g>
+            )
+          })}
+
+          <g transform={`translate(0,${chartH})`}>
+            <line
+              x1={LEFT}
+              x2={LEFT + BAR_W}
+              y1={0}
+              y2={0}
+              className="stint-timeline__axis-line"
+            />
+            {ticks.map((lap) => (
+              <g key={lap}>
+                <line
+                  x1={lapX(lap, safeTotal)}
+                  x2={lapX(lap, safeTotal)}
+                  y1={0}
+                  y2={4}
+                  className="stint-timeline__axis-line"
+                />
+                <text
+                  x={lapX(lap, safeTotal)}
+                  y={14}
+                  textAnchor="middle"
+                  className="stint-timeline__axis-tick"
+                >
+                  {lap}
+                </text>
+              </g>
+            ))}
+          </g>
+        </svg>
+      </div>
+
+      <div className="stint-timeline__legend">
+        {usedCompounds.map((compound) => (
+          <span key={compound} className="stint-timeline__legend-item">
+            <span
+              className={`stint-timeline__legend-swatch ${compoundClass(compound)}`}
+              data-testid={`legend-${compound.toLowerCase()}`}
+            />
+            {compoundLabel(compound)}
+          </span>
+        ))}
+        <span className="stint-timeline__meta">{safeTotal} laps</span>
+      </div>
+    </div>
+  )
+}

frontend/src/components/live/EventRail.tsx

@@ -0,0 +1,72 @@
+import { useAutoAnimate } from '@formkit/auto-animate/react'
+import {
+  Flag,
+  LogOut,
+  Megaphone,
+  OctagonX,
+  Swords,
+  Timer,
+  TrendingDown,
+  TrendingUp,
+  Wrench,
+  Zap,
+} from 'lucide-react'
+import type { LucideIcon } from 'lucide-react'
+import type { LiveDriverInfo } from '../../types'
+import type { LiveEvent, LiveEventKind } from '../../lib/events'
+import { teamColor } from '../../utils'
+import '../../styles/event-rail.css'
+
+interface Props {
+  events: LiveEvent[]
+  driverInfo?: Record<string, LiveDriverInfo>
+}
+
+const KIND_ICONS: Record<LiveEventKind, LucideIcon> = {
+  overtake: Swords,
+  'position-gain': TrendingUp,
+  'position-loss': TrendingDown,
+  'pit-in': Wrench,
+  'pit-out': LogOut,
+  'personal-best': Timer,
+  'fastest-lap': Zap,
+  retirement: OctagonX,
+  'track-status': Flag,
+  'race-control': Megaphone,
+}
+
+export function EventRail({ events, driverInfo }: Props) {
+  const [listRef] = useAutoAnimate<HTMLDivElement>()
+
+  return (
+    <section className="event-rail panel-glass" data-testid="event-rail">
+      <div className="sec-header sticky-header">
+        <span className="sec-title">What Just Happened</span>
+        {events.length > 0 && <span className="sec-meta">{events.length} events</span>}
+      </div>
+      {events.length === 0 ? (
+        <div className="missing-notice">Events will appear here as the session unfolds.</div>
+      ) : (
+        <div className="event-rail-list" ref={listRef}>
+          {events.map((event) => {
+            const Icon = KIND_ICONS[event.kind] ?? Megaphone
+            const colour = driverInfo?.[event.racingNumbers[0]]?.TeamColour
+            const accent = event.racingNumbers.length > 0 ? teamColor(colour) : 'var(--border-2)'
+            return (
+              <div className={`event-rail-row event-kind-${event.kind}`} key={event.id} style={{ borderLeftColor: accent }}>
+                <span className="event-rail-icon" aria-hidden="true">
+                  <Icon size={14} />
+                </span>
+                <div className="event-rail-body">
+                  <span className="event-rail-headline">{event.headline}</span>
+                  {event.detail && <span className="event-rail-detail">{event.detail}</span>}
+                </div>
+                {event.lap > 0 && <span className="event-rail-lap">L{event.lap}</span>}
+              </div>
+            )
+          })}
+        </div>
+      )}
+    </section>
+  )
+}

frontend/src/components/live/TeamRadioTicker.tsx

@@ -0,0 +1,108 @@
+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>
+  )
+}

frontend/src/components/live/TimingTower.tsx

@@ -12,6 +12,9 @@ import {
   tyreLabel,
 } from '../../lib/live'
 import type { GapHistoryMap } from '../../lib/gapHistory'
+import { parseIntervalSeconds } from '../../lib/gapHistory'
+import { intervalMeaning } from '../../lib/meaning'
+import { Meaning } from '../Meaning'
 import { GapSparkline } from './GapSparkline'
 import { StintHistory } from './StintHistory'
 import { Pin } from 'lucide-react'
@@ -100,7 +103,11 @@ export function TimingTower({
             const showCutoffAfter = row.Position === sessionDisplay.cutoffPosition
 
             const gapText = gapMode === 'interval' && isRace ? (driver.Interval || driver.GapToLeader) : driver.GapToLeader
-            
+            const intervalAnnotation =
+              gapMode === 'interval' && isRace && row.Position > 1
+                ? intervalMeaning(parseIntervalSeconds(gapText))
+                : null
+
             const renderSector = (idx: number) => {
               const sec = driver.Sectors?.[idx]
               if (!sec) return '-'
@@ -149,7 +156,14 @@ export function TimingTower({
                   <td className={driver.LastLapOB ? 'mono lap-ob' : driver.LastLapPB ? 'mono lap-pb' : 'mono'}>
                     {driver.LastLapTime || '-'}
                   </td>
-                  <td className="mono">{gapText || '-'}</td>
+                  <td className="mono">
+                    <Meaning
+                      value={gapText || '-'}
+                      meaning={intervalAnnotation?.caption}
+                      title={intervalAnnotation?.title}
+                      tone={intervalAnnotation?.tone}
+                    />
+                  </td>
                   
                   {isRace && (
                     <td className="spark-cell">

frontend/src/components/live/TyreDegPanel.tsx

@@ -0,0 +1,140 @@
+import { useEffect, useMemo, useState } from 'react'
+import { teamColor } from '../../utils'
+import type { LiveTimingRow } from '../../lib/live'
+import { compoundClass, driverCode, tyreLabel } from '../../lib/live'
+import { sparklinePoints } from '../../lib/gapHistory'
+import { isRaceSession } from '../../lib/battles'
+import type { StintHistoryMap } from '../../lib/tyredeg'
+import {
+  PIT_LOSS_SECONDS,
+  degradationModel,
+  estimatePitRejoin,
+  formatSlope,
+  recordStintSamples,
+  stintInputFromRow,
+} from '../../lib/tyredeg'
+import { tyreAgeMeaning } from '../../lib/meaning'
+import { Meaning } from '../Meaning'
+import '../../styles/tyredeg.css'
+
+const TOP_DRIVER_COUNT = 10
+const SPARK_WIDTH = 64
+const SPARK_HEIGHT = 16
+
+interface Props {
+  rows: LiveTimingRow[]
+  sessionType: string | undefined
+  pinned: string[]
+}
+
+function StintSparkline({ seconds }: { seconds: number[] }) {
+  if (seconds.length < 2) return <span className="tyredeg-spark-empty">·</span>
+  const points = sparklinePoints(seconds, SPARK_WIDTH, SPARK_HEIGHT)
+  return (
+    <svg
+      className="tyredeg-spark"
+      width={SPARK_WIDTH}
+      height={SPARK_HEIGHT}
+      viewBox={`0 0 ${SPARK_WIDTH} ${SPARK_HEIGHT}`}
+      aria-hidden="true"
+      focusable="false"
+    >
+      <polyline
+        points={points}
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.2"
+        strokeLinejoin="round"
+        strokeLinecap="round"
+      />
+    </svg>
+  )
+}
+
+export function TyreDegPanel({ rows, sessionType, pinned }: Props) {
+  const [collapsed, setCollapsed] = useState(false)
+  const [stints, setStints] = useState<StintHistoryMap>({})
+
+  // One lap-history update per received snapshot (rows is rebuilt per snapshot).
+  useEffect(() => {
+    if (rows.length === 0) return
+    setStints((prev) => recordStintSamples(prev, rows.map(stintInputFromRow)))
+  }, [rows])
+
+  const isRace = isRaceSession(sessionType)
+
+  const visible = useMemo(
+    () =>
+      rows.filter(
+        (row) =>
+          row.Position > 0 &&
+          !row.Driver.Retired &&
+          (row.Position <= TOP_DRIVER_COUNT || pinned.includes(row.RacingNumber)),
+      ),
+    [rows, pinned],
+  )
+
+  if (visible.length === 0) return null
+
+  return (
+    <section className="live-tyredeg-panel" data-testid="tyredeg-panel">
+      <button
+        type="button"
+        className="sec-header tyredeg-toggle"
+        onClick={() => setCollapsed((prev) => !prev)}
+        aria-expanded={!collapsed}
+      >
+        <span className="sec-title">Tyre Deg &amp; Pit Window</span>
+        {isRace && <span className="sec-meta">rejoin assumes ~{PIT_LOSS_SECONDS}s pit loss</span>}
+        <span className="tyredeg-chevron" aria-hidden="true">{collapsed ? '▸' : '▾'}</span>
+      </button>
+
+      {!collapsed && (
+        <div className="tyredeg-rows">
+          {visible.map((row) => {
+            const model = degradationModel(stints[row.RacingNumber]?.samples ?? [])
+            const rejoin = isRace ? estimatePitRejoin(rows, row.RacingNumber) : null
+            const ageAnnotation = tyreAgeMeaning(row.Tyre?.Compound, row.Tyre?.Age)
+            return (
+              <div className="tyredeg-row" key={row.RacingNumber} data-testid="tyredeg-row">
+                <span className="tyredeg-pos mono">P{row.Position}</span>
+                <span className="drv-bar" style={{ background: teamColor(row.Info?.TeamColour) }} />
+                <span className="drv-code">{driverCode(row)}</span>
+                <span className={`tyre-badge ${compoundClass(row.Tyre?.Compound)}`}>
+                  <Meaning
+                    value={tyreLabel(row.Tyre)}
+                    meaning={ageAnnotation?.caption}
+                    title={ageAnnotation?.title}
+                    tone={ageAnnotation?.tone}
+                  />
+                </span>
+                {model ? (
+                  <>
+                    <span className={`tyredeg-trend tyredeg-trend-${model.trend}`}>
+                      <StintSparkline seconds={model.samples.map((sample) => sample.seconds)} />
+                    </span>
+                    <span className={`tyredeg-slope mono tyredeg-trend-${model.trend}`}>
+                      {formatSlope(model.slope)}
+                    </span>
+                  </>
+                ) : (
+                  <span className="tyredeg-warmup">warming up</span>
+                )}
+                {rejoin && (
+                  <span className="tyredeg-rejoin mono" title={`Pits now: rejoins ~P${rejoin.rejoinPosition}`}>
+                    → ~P{rejoin.rejoinPosition}
+                    {rejoin.aheadCode && rejoin.behindCode && (
+                      <span className="tyredeg-rejoin-between">
+                        {rejoin.aheadCode} · {rejoin.behindCode}
+                      </span>
+                    )}
+                  </span>
+                )}
+              </div>
+            )
+          })}
+        </div>
+      )}
+    </section>
+  )
+}

frontend/src/lib/compare.ts

@@ -0,0 +1,202 @@
+// Driver comparison mapping — pure functions for telemetry traces and lap deltas.
+
+import type { TelemetryTraceSeries } from '../components/charts/TelemetryTraceChart'
+import type { DeltaSeries } from '../lib/delta'
+import type {
+  CarDataSample,
+  ComparisonLap,
+  Driver,
+  EnrichedResult,
+  LapsComparisonResponse,
+} from '../types'
+import { compareFinishPosition, teamColor } from '../utils'
+
+function sortDriversByResults(drivers: Driver[], results: EnrichedResult[]): Driver[] {
+  const order = new Map(
+    [...results]
+      .filter((r) => r.position > 0)
+      .sort((a, b) => compareFinishPosition(a.position, b.position))
+      .map((r, i) => [r.driver_number, i]),
+  )
+  return [...drivers].sort((a, b) => {
+    const ao = order.get(a.driver_number) ?? 999
+    const bo = order.get(b.driver_number) ?? 999
+    if (ao !== bo) return ao - bo
+    return a.driver_number - b.driver_number
+  })
+}
+
+/** Default compare pair: top two classified finishers, else first two session drivers. */
+export function defaultCompareDriverNumbers(
+  results: EnrichedResult[],
+  drivers: Driver[],
+): [number, number] | null {
+  const classified = [...results]
+    .filter((r) => r.position > 0)
+    .sort((a, b) => compareFinishPosition(a.position, b.position))
+
+  if (classified.length >= 2) {
+    return [classified[0].driver_number, classified[1].driver_number]
+  }
+
+  if (drivers.length >= 2) {
+    const sorted = sortDriversByResults(drivers, results)
+    return [sorted[0].driver_number, sorted[1].driver_number]
+  }
+
+  if (classified.length === 1 && drivers.length >= 1) {
+    const other = drivers.find((d) => d.driver_number !== classified[0].driver_number)
+    if (other) return [classified[0].driver_number, other.driver_number]
+  }
+
+  return null
+}
+
+/** Lap records → per-lap duration array (index 0 = lap 1); null for pit/out laps. */
+export function lapsToLapTimes(laps: ComparisonLap[]): (number | null)[] {
+  if (laps.length === 0) return []
+
+  const maxLap = laps.reduce((max, lap) => Math.max(max, lap.lap_number), 0)
+  const times: (number | null)[] = Array.from({ length: maxLap }, () => null)
+
+  for (const lap of laps) {
+    const idx = lap.lap_number - 1
+    if (idx < 0) continue
+    if (lap.is_pit_out_lap || lap.lap_duration == null || lap.lap_duration <= 0) {
+      times[idx] = null
+    } else {
+      times[idx] = lap.lap_duration
+    }
+  }
+
+  return times
+}
+
+export function findBestLap(laps: ComparisonLap[]): ComparisonLap | null {
+  let best: ComparisonLap | null = null
+  for (const lap of laps) {
+    if (lap.lap_duration == null || lap.lap_duration <= 0) continue
+    if (!best || (best.lap_duration ?? Infinity) > lap.lap_duration) {
+      best = lap
+    }
+  }
+  return best
+}
+
+/** Keep car-data samples whose timestamps fall within a lap window. */
+export function filterCarDataToLap(
+  samples: CarDataSample[],
+  lap: ComparisonLap,
+): CarDataSample[] {
+  if (!lap.date_start || samples.length === 0) return samples
+
+  const start = new Date(lap.date_start).getTime()
+  if (!Number.isFinite(start)) return samples
+
+  const end = start + (lap.lap_duration ?? 0) * 1000 + 500
+
+  return samples.filter((s) => {
+    const t = new Date(s.date).getTime()
+    return Number.isFinite(t) && t >= start && t <= end
+  })
+}
+
+export function carDataToTraceSeries(
+  samples: CarDataSample[],
+  label: string,
+  color: string,
+): TelemetryTraceSeries {
+  return {
+    label,
+    color,
+    samples: samples.map((s) => ({
+      speed: s.speed,
+      throttle: s.throttle,
+      brake: s.brake,
+    })),
+  }
+}
+
+export function buildBestLapTraceSeries(
+  carData: CarDataSample[],
+  laps: ComparisonLap[],
+  label: string,
+  color: string,
+): TelemetryTraceSeries | null {
+  const best = findBestLap(laps)
+  if (!best) return null
+
+  const filtered = filterCarDataToLap(carData, best)
+  if (filtered.length === 0) return null
+
+  return carDataToTraceSeries(filtered, label, color)
+}
+
+function driverMeta(
+  driverNumber: number,
+  comparison: LapsComparisonResponse | undefined,
+  drivers: Driver[],
+): { label: string; color: string; laps: ComparisonLap[] } {
+  const comp = comparison?.drivers.find((d) => d.driver_number === driverNumber)
+  const session = drivers.find((d) => d.driver_number === driverNumber)
+  return {
+    label: comp?.name_acronym || session?.name_acronym || `#${driverNumber}`,
+    color: teamColor(comp?.team_colour || session?.team_colour),
+    laps: comp?.laps ?? [],
+  }
+}
+
+export function comparisonToDeltaSeries(
+  comparison: LapsComparisonResponse,
+  driverNumbers: [number, number],
+  drivers: Driver[],
+): DeltaSeries[] {
+  return driverNumbers.map((dn) => {
+    const meta = driverMeta(dn, comparison, drivers)
+    return {
+      label: meta.label,
+      color: meta.color,
+      lapTimes: lapsToLapTimes(meta.laps),
+    }
+  })
+}
+
+export function formatPitLapsCaption(
+  pitLaps: Record<string, number[]>,
+  driverNumbers: [number, number],
+  comparison: LapsComparisonResponse | undefined,
+  drivers: Driver[],
+): string | null {
+  const parts: string[] = []
+
+  for (const dn of driverNumbers) {
+    const laps = pitLaps[String(dn)]
+    if (!laps?.length) continue
+    const meta = driverMeta(dn, comparison, drivers)
+    parts.push(`${meta.label}: L${laps.join(', L')}`)
+  }
+
+  return parts.length > 0 ? `Pit stops — ${parts.join(' · ')}` : null
+}
+
+export function compareDriverOptions(
+  drivers: Driver[],
+  results: EnrichedResult[],
+): Driver[] {
+  if (drivers.length > 0) {
+    return sortDriversByResults(drivers, results)
+  }
+  return results.map((r) => ({
+    driver_number: r.driver_number,
+    name_acronym: r.name_acronym,
+    full_name: r.full_name,
+    first_name: '',
+    last_name: '',
+    team_name: r.team_name,
+    team_colour: r.team_colour,
+    headshot_url: '',
+    broadcast_name: r.full_name,
+    session_key: r.session_key,
+    meeting_key: r.meeting_key,
+  }))
+}

frontend/src/lib/events.ts

@@ -0,0 +1,318 @@
+// "What just happened" event synthesis for the live page.
+// Pure functions only — no React, no side effects — so everything is unit-testable.
+// Mirrors the gapHistory/battles precedent: successive LiveStreamData snapshots
+// in, typed events out; the page owns the buffer, this module owns the diffing.
+
+import type {
+  LiveDriverData,
+  LiveRCMessage,
+  LiveSessionMeta,
+  LiveStreamData,
+} from '../types'
+
+export const MAX_EVENTS = 30
+
+export type LiveEventKind =
+  | 'overtake'
+  | 'position-gain'
+  | 'position-loss'
+  | 'pit-in'
+  | 'pit-out'
+  | 'personal-best'
+  | 'fastest-lap'
+  | 'retirement'
+  | 'track-status'
+  | 'race-control'
+
+export interface LiveEvent {
+  id: string
+  kind: LiveEventKind
+  lap: number
+  timestamp: string
+  headline: string
+  detail?: string
+  racingNumbers: string[]
+}
+
+/**
+ * Identity of the running session, used to reset the event buffer when a new
+ * session starts. LiveSessionMeta carries no numeric session key, so the
+ * meeting + session name/type triple stands in for one.
+ */
+export function sessionSignature(session: LiveSessionMeta | null | undefined): string {
+  if (!session) return ''
+  return [session.MeetingName, session.SessionName, session.SessionType].join('|')
+}
+
+/**
+ * Prepend freshly diffed events onto the newest-first buffer, dropping any
+ * whose id is already present (re-renders and replayed diffs must not
+ * duplicate) and evicting the oldest events beyond `cap`.
+ */
+export function appendEvents(
+  buffer: ReadonlyArray<LiveEvent>,
+  incoming: ReadonlyArray<LiveEvent>,
+  cap = MAX_EVENTS,
+): LiveEvent[] {
+  const seen = new Set(buffer.map((event) => event.id))
+  const fresh = incoming.filter((event) => {
+    if (seen.has(event.id)) return false
+    seen.add(event.id)
+    return true
+  })
+  if (fresh.length === 0) return [...buffer]
+  // Within one diff the array is oldest-first; reverse so the last-produced
+  // event ends up at the top of the newest-first rail.
+  return [...fresh.reverse(), ...buffer].slice(0, cap)
+}
+
+const TRACK_STATUS_HEADLINES: Record<string, string> = {
+  '1': 'Green flag — track clear',
+  '2': 'Yellow flag',
+  '4': 'Safety Car deployed',
+  '5': 'Red flag — session stopped',
+  '6': 'Virtual Safety Car deployed',
+  '7': 'Virtual Safety Car ending',
+}
+
+const RC_CATEGORIES = new Set(['flag', 'safetycar', 'drs'])
+
+/**
+ * Diff two successive live snapshots into a chronological list of synthesized
+ * events. Callers are expected to feed genuinely consecutive snapshots of the
+ * same session; diffing across a session boundary is the caller's job to
+ * prevent (see sessionSignature).
+ */
+export function diffSnapshots(prev: LiveStreamData, next: LiveStreamData): LiveEvent[] {
+  if (!prev || !next || prev === next) return []
+
+  const events: LiveEvent[] = []
+  const lap = next.CurrentLap || 0
+  const timestamp = next.Clock || ''
+  const code = (racingNumber: string): string =>
+    next.DriverInfo?.[racingNumber]?.Tla ||
+    prev.DriverInfo?.[racingNumber]?.Tla ||
+    `#${racingNumber}`
+
+  diffTrackStatus(prev, next, lap, timestamp, events)
+  diffRaceControl(prev, next, events)
+
+  const prevDrivers = prev.Drivers ?? {}
+  const nextDrivers = next.Drivers ?? {}
+  const numbers = Object.keys(nextDrivers).filter((number) => prevDrivers[number])
+
+  // Racing numbers whose position loss is already explained by an overtake
+  // event, so we don't also report a generic "drops to Pn".
+  const overtakenNumbers = new Set<string>()
+
+  for (const number of numbers) {
+    const before = prevDrivers[number]
+    const after = nextDrivers[number]
+
+    if (!before.Retired && after.Retired) {
+      events.push({
+        id: `ret:${number}`,
+        kind: 'retirement',
+        lap,
+        timestamp,
+        headline: `${code(number)} retires`,
+        detail: before.Position > 0 ? `Was running P${before.Position}` : undefined,
+        racingNumbers: [number],
+      })
+    }
+
+    if (!before.InPit && after.InPit && !after.Retired) {
+      const fromPosition = before.Position > 0 ? ` from P${before.Position}` : ''
+      events.push({
+        id: `pit-in:${number}:l${lap}`,
+        kind: 'pit-in',
+        lap,
+        timestamp,
+        headline: `${code(number)} pits${fromPosition}`,
+        racingNumbers: [number],
+      })
+    }
+
+    if (before.InPit && !after.InPit && !after.Retired) {
+      const compound = next.Tyres?.[number]?.Compound || ''
+      const stops = Math.max(0, (next.Stints?.[number]?.length ?? 0) - 1)
+      const parts = [compound, stops > 0 ? `${ordinal(stops)} stop` : ''].filter(Boolean)
+      const rejoined = after.Position > 0 ? ` P${after.Position}` : ''
+      events.push({
+        id: `pit-out:${number}:l${lap}`,
+        kind: 'pit-out',
+        lap,
+        timestamp,
+        headline: `${code(number)} rejoins${rejoined}${parts.length > 0 ? ` (${parts.join(', ')})` : ''}`,
+        racingNumbers: [number],
+      })
+    }
+
+    diffBestLap(number, before, after, code, lap, timestamp, events)
+  }
+
+  // Position gains, with overtake attribution via position swaps.
+  for (const number of numbers) {
+    const before = prevDrivers[number]
+    const after = nextDrivers[number]
+    if (before.Position <= 0 || after.Position <= 0) continue
+    if (after.Position >= before.Position) continue
+    if (after.InPit || after.Retired) continue
+
+    const overtaken = numbers.find((other) => {
+      if (other === number) return false
+      const otherBefore = prevDrivers[other]
+      const otherAfter = nextDrivers[other]
+      return (
+        otherBefore.Position === after.Position &&
+        otherAfter.Position > otherBefore.Position &&
+        !otherAfter.InPit &&
+        !otherAfter.Retired
+      )
+    })
+
+    if (overtaken) {
+      overtakenNumbers.add(overtaken)
+      events.push({
+        id: `overtake:${number}:${overtaken}:p${after.Position}:l${lap}`,
+        kind: 'overtake',
+        lap,
+        timestamp,
+        headline: `${code(number)} overtakes ${code(overtaken)} for P${after.Position}`,
+        detail: before.Position - after.Position > 1 ? `Up from P${before.Position}` : undefined,
+        racingNumbers: [number, overtaken],
+      })
+    } else {
+      events.push({
+        id: `pos:${number}:${before.Position}-${after.Position}:l${lap}`,
+        kind: 'position-gain',
+        lap,
+        timestamp,
+        headline: `${code(number)} moves up to P${after.Position} (from P${before.Position})`,
+        racingNumbers: [number],
+      })
+    }
+  }
+
+  // Position losses not already explained by an overtake or a pit visit.
+  for (const number of numbers) {
+    const before = prevDrivers[number]
+    const after = nextDrivers[number]
+    if (before.Position <= 0 || after.Position <= 0) continue
+    if (after.Position <= before.Position) continue
+    if (overtakenNumbers.has(number)) continue
+    if (after.InPit || after.PitOut || after.Retired || before.InPit) continue
+
+    events.push({
+      id: `pos:${number}:${before.Position}-${after.Position}:l${lap}`,
+      kind: 'position-loss',
+      lap,
+      timestamp,
+      headline: `${code(number)} drops to P${after.Position} (from P${before.Position})`,
+      racingNumbers: [number],
+    })
+  }
+
+  return events
+}
+
+function diffTrackStatus(
+  prev: LiveStreamData,
+  next: LiveStreamData,
+  lap: number,
+  timestamp: string,
+  events: LiveEvent[],
+): void {
+  if (!prev.TrackStatus || !next.TrackStatus) return
+  if (prev.TrackStatus === next.TrackStatus) return
+  events.push({
+    id: `track:${next.TrackStatus}:l${lap}`,
+    kind: 'track-status',
+    lap,
+    timestamp,
+    headline: TRACK_STATUS_HEADLINES[next.TrackStatus] ?? `Track status ${next.TrackStatus}`,
+    racingNumbers: [],
+  })
+}
+
+function diffRaceControl(prev: LiveStreamData, next: LiveStreamData, events: LiveEvent[]): void {
+  const prevMessages = prev.RCMessages ?? []
+  const seen = new Set(prevMessages.map(rcMessageKey))
+  for (const message of next.RCMessages ?? []) {
+    if (!message.Message || seen.has(rcMessageKey(message))) continue
+    if (!RC_CATEGORIES.has((message.Category || '').toLowerCase())) continue
+    events.push({
+      id: `rc:${rcMessageKey(message)}`,
+      kind: 'race-control',
+      lap: message.Lap || 0,
+      timestamp: message.Time || '',
+      headline: humanizeRaceControl(message.Message),
+      racingNumbers: carNumbersIn(message.Message),
+    })
+  }
+}
+
+function diffBestLap(
+  number: string,
+  before: LiveDriverData,
+  after: LiveDriverData,
+  code: (racingNumber: string) => string,
+  lap: number,
+  timestamp: string,
+  events: LiveEvent[],
+): void {
+  if (!after.LastLapTime) return
+  const isNewLap = after.LastLapTime !== before.LastLapTime
+
+  if (after.LastLapOB && (isNewLap || !before.LastLapOB)) {
+    events.push({
+      id: `ob:${number}:${after.LastLapTime}`,
+      kind: 'fastest-lap',
+      lap,
+      timestamp,
+      headline: `${code(number)} sets the fastest lap — ${after.LastLapTime}`,
+      racingNumbers: [number],
+    })
+    return
+  }
+
+  if (after.LastLapPB && !after.LastLapOB && (isNewLap || !before.LastLapPB)) {
+    events.push({
+      id: `pb:${number}:${after.LastLapTime}`,
+      kind: 'personal-best',
+      lap,
+      timestamp,
+      headline: `${code(number)} sets a personal best — ${after.LastLapTime}`,
+      racingNumbers: [number],
+    })
+  }
+}
+
+function rcMessageKey(message: LiveRCMessage): string {
+  return `${message.Time}:${message.Message}`
+}
+
+/** "SAFETY CAR DEPLOYED" -> "Safety car deployed", keeping known acronyms upper-cased. */
+export function humanizeRaceControl(message: string): string {
+  const lower = message.trim().toLowerCase()
+  if (!lower) return ''
+  const sentence = lower.charAt(0).toUpperCase() + lower.slice(1)
+  return sentence.replace(/\b(drs|vsc|sc|fia)\b/gi, (acronym) => acronym.toUpperCase())
+}
+
+function carNumbersIn(message: string): string[] {
+  const numbers: string[] = []
+  for (const match of message.matchAll(/CAR (\d+)/gi)) {
+    if (!numbers.includes(match[1])) numbers.push(match[1])
+  }
+  return numbers
+}
+
+function ordinal(n: number): string {
+  const rem10 = n % 10
+  const rem100 = n % 100
+  if (rem10 === 1 && rem100 !== 11) return `${n}st`
+  if (rem10 === 2 && rem100 !== 12) return `${n}nd`
+  if (rem10 === 3 && rem100 !== 13) return `${n}rd`
+  return `${n}th`
+}

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/lib/meaning.ts

@@ -0,0 +1,146 @@
+// Pure interpretation helpers for pairing numbers with their "so-what".
+// Thresholds are exported consts so they are cheap to tune in one place.
+
+import { PIT_LOSS_SECONDS } from './tyredeg'
+
+/** Gaps under this (seconds) are DRS attack range. */
+export const INTERVAL_DRS_MAX_SECONDS = 1.0
+
+/** Lower bound of the undercut window (seconds); contiguous with DRS range. */
+export const INTERVAL_UNDERCUT_MIN_SECONDS = INTERVAL_DRS_MAX_SECONDS
+
+/**
+ * Upper bound of the undercut window (seconds). Kept well below typical pit
+ * loss ({@link PIT_LOSS_SECONDS}s) — only a few seconds matter for strategy.
+ */
+export const INTERVAL_UNDERCUT_MAX_SECONDS = Math.min(3.0, PIT_LOSS_SECONDS / 7)
+
+/**
+ * Rough per-compound cliff lap estimates (dry compounds). Wet/intermediate
+ * values are conservative — deg varies wildly with conditions.
+ */
+export const TYRE_CLIFF_LAPS: Readonly<Record<string, number>> = {
+  SOFT: 18,
+  MEDIUM: 28,
+  HARD: 38,
+  INTERMEDIATE: 20,
+  WET: 15,
+}
+
+/** Default cliff when compound is unknown. */
+export const TYRE_CLIFF_DEFAULT_LAPS = 25
+
+/** Championship max points per race (winner). */
+export const MAX_POINTS_PER_ROUND = 25
+
+export interface MeaningAnnotation {
+  caption: string
+  title: string
+  tone?: 'good' | 'bad' | 'neutral' | 'warn'
+}
+
+function cliffLaps(compound: string | null | undefined): number {
+  if (!compound) return TYRE_CLIFF_DEFAULT_LAPS
+  return TYRE_CLIFF_LAPS[compound.toUpperCase()] ?? TYRE_CLIFF_DEFAULT_LAPS
+}
+
+/**
+ * Interval / gap-to-ahead meaning for the live timing tower.
+ * Returns null for leader gaps, out-of-range values, or unparsable input.
+ */
+export function intervalMeaning(seconds: number | null | undefined): MeaningAnnotation | null {
+  if (seconds == null || !Number.isFinite(seconds) || seconds < 0) return null
+
+  if (seconds < INTERVAL_DRS_MAX_SECONDS) {
+    return {
+      caption: 'DRS range',
+      title: `Within ${INTERVAL_DRS_MAX_SECONDS}s — DRS enabled next straight`,
+      tone: 'good',
+    }
+  }
+
+  if (seconds >= INTERVAL_UNDERCUT_MIN_SECONDS && seconds <= INTERVAL_UNDERCUT_MAX_SECONDS) {
+    return {
+      caption: 'undercut window',
+      title: `${INTERVAL_UNDERCUT_MIN_SECONDS}–${INTERVAL_UNDERCUT_MAX_SECONDS}s — pit now could gain a position (vs ~${PIT_LOSS_SECONDS}s stop)`,
+      tone: 'warn',
+    }
+  }
+
+  return null
+}
+
+/**
+ * Tyre-age meaning for deg / stint panels.
+ */
+export function tyreAgeMeaning(
+  compound: string | null | undefined,
+  age: number | null | undefined,
+): MeaningAnnotation | null {
+  if (age == null || !Number.isFinite(age) || age < 0) return null
+
+  const cliff = cliffLaps(compound)
+  const freshEnd = Math.ceil(cliff * 0.25)
+  const midEnd = Math.ceil(cliff * 0.65)
+
+  if (age <= freshEnd) {
+    return {
+      caption: 'fresh',
+      title: `${age} lap${age === 1 ? '' : 's'} on ${compound ?? 'tyre'} — early stint grip`,
+      tone: 'good',
+    }
+  }
+
+  if (age <= midEnd) {
+    return {
+      caption: 'mid-life',
+      title: `${age} laps — tyre in its working window before cliff (~${cliff} laps)`,
+      tone: 'neutral',
+    }
+  }
+
+  const lapsToCliff = cliff - age
+  if (lapsToCliff <= 0) {
+    return {
+      caption: 'past cliff',
+      title: `${age} laps — beyond typical ${compound ?? 'tyre'} cliff (~${cliff} laps)`,
+      tone: 'bad',
+    }
+  }
+
+  return {
+    caption: `~${lapsToCliff} laps to cliff`,
+    title: `${age} of ~${cliff} laps before deg cliff on ${compound ?? 'tyre'}`,
+    tone: 'warn',
+  }
+}
+
+/**
+ * Points gap to the driver directly ahead — catchable-or-not v1.
+ */
+export function pointsGapMeaning(
+  gapToAhead: number | null | undefined,
+  roundsLeft: number,
+  driverAhead?: string | null,
+): MeaningAnnotation | null {
+  if (gapToAhead == null || !Number.isFinite(gapToAhead) || gapToAhead <= 0) return null
+  if (!Number.isFinite(roundsLeft) || roundsLeft <= 0) return null
+
+  const maxCatchable = roundsLeft * MAX_POINTS_PER_ROUND
+  const ahead = driverAhead?.trim() || 'ahead'
+
+  if (gapToAhead > maxCatchable) {
+    return {
+      caption: 'out of reach',
+      title: `+${gapToAhead} pts with ${roundsLeft} round${roundsLeft === 1 ? '' : 's'} left (max ${maxCatchable} available)`,
+      tone: 'bad',
+    }
+  }
+
+  const perRound = Math.ceil(gapToAhead / roundsLeft)
+  return {
+    caption: `~${perRound} pts/round`,
+    title: `Needs ~${perRound} pts per round on ${ahead} to catch (${gapToAhead} pts in ${roundsLeft} round${roundsLeft === 1 ? '' : 's'})`,
+    tone: perRound <= 10 ? 'good' : 'warn',
+  }
+}

frontend/src/lib/radio.ts

@@ -0,0 +1,22 @@
+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}`
+}

frontend/src/lib/tyredeg.ts

@@ -0,0 +1,271 @@
+// Tyre degradation + pit-window estimation for the live timing page.
+// Pure functions only — no React, no side effects — so everything is unit-testable.
+//
+// Lap-time samples are accumulated client-side from successive SSE snapshots
+// (mirroring the gapHistory/battles precedent); nothing here talks to the server.
+
+import type { LiveTimingRow } from './live'
+import { driverCode } from './live'
+import { parseIntervalSeconds } from './gapHistory'
+
+/**
+ * Rough typical pit-lane time loss (entry + stop + exit vs a flying lap), in
+ * seconds. Per-track values are deliberately out of scope for v1.
+ */
+export const PIT_LOSS_SECONDS = 22
+
+/** Minimum clean laps in the current stint before a slope is trustworthy. */
+export const MIN_CLEAN_LAPS = 4
+
+/**
+ * Laps more than this many seconds off the stint median are treated as
+ * outliers (traffic, spins, safety car) and excluded from the fit.
+ */
+export const OUTLIER_DELTA_SECONDS = 5
+
+/**
+ * Slope classification thresholds (seconds per lap):
+ *   slope <= -DEG_SLOPE_THRESHOLD  -> 'improving' (track evolution, fuel burn dominating)
+ *   slope >= +DEG_SLOPE_THRESHOLD  -> 'degrading' (tyre wear dominating)
+ *   otherwise                      -> 'stable'
+ */
+export const DEG_SLOPE_THRESHOLD = 0.05
+
+/** Safety cap so a very long stint cannot grow the buffer unbounded. */
+export const MAX_STINT_SAMPLES = 80
+
+export type DegTrend = 'improving' | 'stable' | 'degrading'
+
+export interface StintSample {
+  lap: number
+  seconds: number
+}
+
+export interface DriverStintHistory {
+  compound: string
+  tyreAge: number
+  lastLapNumber: number
+  lastLapTime: string
+  /** The next completed lap is an out-lap (fresh stint) and must be discarded. */
+  skipNextLap: boolean
+  samples: StintSample[]
+}
+
+/** Per-driver current-stint lap history, keyed by racing number. */
+export type StintHistoryMap = Record<string, DriverStintHistory>
+
+export interface StintLapInput {
+  racingNumber: string
+  lapNumber: number
+  lastLapTime: string
+  compound: string
+  tyreAge: number
+  inPit: boolean
+  pitOut: boolean
+}
+
+/**
+ * Parse an F1 live-timing lap time string ("1:23.456", "83.456") into seconds.
+ * Same conventions as parseIntervalSeconds, but a lap time is never signed and
+ * never a lapped/leader marker; zero or negative values are rejected.
+ */
+export function parseLapTimeSeconds(raw: string | null | undefined): number | null {
+  const value = parseIntervalSeconds(raw)
+  if (value === null || value <= 0) return null
+  return value
+}
+
+export function stintInputFromRow(row: LiveTimingRow): StintLapInput {
+  return {
+    racingNumber: row.RacingNumber,
+    lapNumber: row.Driver.NumberOfLaps || 0,
+    lastLapTime: row.Driver.LastLapTime || '',
+    compound: row.Tyre?.Compound || '',
+    tyreAge: row.Tyre?.Age ?? 0,
+    inPit: Boolean(row.Driver.InPit),
+    pitOut: Boolean(row.Driver.PitOut),
+  }
+}
+
+/**
+ * Record one snapshot's worth of lap samples for each driver's current stint.
+ * Returns a new map (input is not mutated); drivers missing from `inputs` are
+ * pruned.
+ *
+ * A lap counts as completed when LastLapTime changes to a new non-empty value
+ * (NumberOfLaps can tick before the lap time arrives, so the time string is
+ * the trigger; a sample for the same lap number is replaced, not duplicated).
+ * The stint buffer resets when the compound changes or the tyre age drops
+ * (new set fitted), and laps completed in the pit lane (in-lap), on pit exit
+ * (out-lap), or immediately after a reset are excluded.
+ */
+export function recordStintSamples(
+  history: StintHistoryMap,
+  inputs: ReadonlyArray<StintLapInput>,
+): StintHistoryMap {
+  const next: StintHistoryMap = {}
+
+  for (const input of inputs) {
+    if (!input.racingNumber) continue
+
+    const prior = history[input.racingNumber]
+    if (!prior) {
+      next[input.racingNumber] = {
+        compound: input.compound,
+        tyreAge: input.tyreAge,
+        lastLapNumber: input.lapNumber,
+        lastLapTime: input.lastLapTime,
+        skipNextLap: false,
+        samples: [],
+      }
+      continue
+    }
+
+    let samples = prior.samples
+    let skipNextLap = prior.skipNextLap
+
+    const compoundChanged = Boolean(input.compound) && Boolean(prior.compound) && input.compound !== prior.compound
+    const freshSet = input.tyreAge < prior.tyreAge
+    if (compoundChanged || freshSet || input.inPit) {
+      // Stint over (or a new one starting): drop the old laps and flag the
+      // upcoming out-lap for exclusion.
+      samples = []
+      skipNextLap = true
+    }
+
+    const lapCompleted = Boolean(input.lastLapTime) && input.lastLapTime !== prior.lastLapTime
+    if (lapCompleted) {
+      const seconds = parseLapTimeSeconds(input.lastLapTime)
+      const dirty = input.inPit || input.pitOut || skipNextLap
+      if (seconds !== null && !dirty) {
+        const last = samples[samples.length - 1]
+        if (last && last.lap === input.lapNumber) {
+          samples = [...samples.slice(0, -1), { lap: input.lapNumber, seconds }]
+        } else {
+          samples = [...samples, { lap: input.lapNumber, seconds }]
+          if (samples.length > MAX_STINT_SAMPLES) {
+            samples = samples.slice(samples.length - MAX_STINT_SAMPLES)
+          }
+        }
+      }
+      if (!input.inPit) skipNextLap = false
+    }
+
+    next[input.racingNumber] = {
+      compound: input.compound || prior.compound,
+      tyreAge: input.tyreAge,
+      lastLapNumber: input.lapNumber,
+      lastLapTime: input.lastLapTime || prior.lastLapTime,
+      skipNextLap,
+      samples,
+    }
+  }
+
+  return next
+}
+
+export interface DegModel {
+  /** Least-squares slope of lap time vs lap number, in seconds per lap. */
+  slope: number
+  trend: DegTrend
+  /** Clean (outlier-filtered) samples the fit ran over, in lap order. */
+  samples: StintSample[]
+}
+
+/** Drop laps more than OUTLIER_DELTA_SECONDS off the stint median. */
+export function cleanStintSamples(
+  samples: ReadonlyArray<StintSample>,
+  maxDelta = OUTLIER_DELTA_SECONDS,
+): StintSample[] {
+  if (samples.length === 0) return []
+  const sorted = samples.map((sample) => sample.seconds).sort((a, b) => a - b)
+  const mid = Math.floor(sorted.length / 2)
+  const median = sorted.length % 2 === 1 ? sorted[mid] : (sorted[mid - 1] + sorted[mid]) / 2
+  return samples.filter((sample) => Math.abs(sample.seconds - median) <= maxDelta)
+}
+
+/**
+ * Fit a linear degradation model over the stint's clean laps.
+ * Returns null with fewer than MIN_CLEAN_LAPS clean samples — the caller
+ * should show a "warming up" placeholder rather than a junk slope.
+ */
+export function degradationModel(samples: ReadonlyArray<StintSample>): DegModel | null {
+  const clean = cleanStintSamples(samples)
+  if (clean.length < MIN_CLEAN_LAPS) return null
+
+  const n = clean.length
+  const meanLap = clean.reduce((sum, s) => sum + s.lap, 0) / n
+  const meanSec = clean.reduce((sum, s) => sum + s.seconds, 0) / n
+
+  let numerator = 0
+  let denominator = 0
+  for (const sample of clean) {
+    numerator += (sample.lap - meanLap) * (sample.seconds - meanSec)
+    denominator += (sample.lap - meanLap) ** 2
+  }
+  if (denominator === 0) return null
+
+  const slope = numerator / denominator
+  const trend: DegTrend =
+    slope <= -DEG_SLOPE_THRESHOLD ? 'improving' : slope >= DEG_SLOPE_THRESHOLD ? 'degrading' : 'stable'
+
+  return { slope, trend, samples: clean }
+}
+
+/** "+0.08s/lap" / "-0.12s/lap" display form. */
+export function formatSlope(slope: number): string {
+  const sign = slope >= 0 ? '+' : '−'
+  return `${sign}${Math.abs(slope).toFixed(2)}s/lap`
+}
+
+export interface PitRejoinEstimate {
+  rejoinPosition: number
+  /** Cars behind that would get past during the stop. */
+  positionsLost: number
+  /** Driver code directly ahead after rejoining, if any. */
+  aheadCode: string | null
+  /** Driver code directly behind after rejoining, if any. */
+  behindCode: string | null
+}
+
+/**
+ * Estimate where a driver rejoins after a pit stop costing `pitLoss` seconds.
+ *
+ * Walks the cars behind the driver, accumulating their Interval (gap to car
+ * ahead) values: every car whose cumulative gap to the driver is under the
+ * pit loss gets past. An unparsable interval (lapped marker like "1L") ends
+ * the walk — those cars are at least a lap down and stay behind. Cars in the
+ * pits or retired are excluded from the ladder.
+ */
+export function estimatePitRejoin(
+  rows: ReadonlyArray<LiveTimingRow>,
+  racingNumber: string,
+  pitLoss = PIT_LOSS_SECONDS,
+): PitRejoinEstimate | null {
+  const ladder = rows
+    .filter((row) => row.Position > 0 && !row.Driver.Retired && !row.Driver.InPit)
+    .sort((a, b) => a.Position - b.Position)
+
+  const index = ladder.findIndex((row) => row.RacingNumber === racingNumber)
+  if (index === -1) return null
+
+  let cumulative = 0
+  let positionsLost = 0
+  for (let i = index + 1; i < ladder.length; i++) {
+    const gap = parseIntervalSeconds(ladder[i].Driver.Interval)
+    if (gap === null) break
+    cumulative += Math.max(0, gap)
+    if (cumulative >= pitLoss) break
+    positionsLost += 1
+  }
+
+  const ahead = positionsLost > 0 ? ladder[index + positionsLost] : ladder[index - 1]
+  const behind = ladder[index + positionsLost + 1]
+
+  return {
+    rejoinPosition: ladder[index].Position + positionsLost,
+    positionsLost,
+    aheadCode: ahead ? driverCode(ahead) : null,
+    behindCode: behind ? driverCode(behind) : null,
+  }
+}

frontend/src/pages/ChampionshipPage.tsx

@@ -4,6 +4,8 @@ import { fetchChampionshipHub, fetchSeasons } from '../api'
 import { teamColor } from '../utils'
 import type { ChampHubDriver, ChampionshipHub } from '../types'
 import { ChampionshipSimulator } from '../components/ChampionshipSimulator'
+import { Meaning } from '../components/Meaning'
+import { pointsGapMeaning } from '../lib/meaning'
 
 type View = 'drivers' | 'constructors' | 'progression' | 'simulator'
 
@@ -138,6 +140,8 @@ function ChampionshipBody({ hub, view, setView }: BodyProps) {
           color: teamColor(d.team_colour),
           gapLeader: i === 0 ? 'LEADER' : `+${fmtPts(gapLeaderNum)}`,
           gapAhead: gapAheadNum == null ? '—' : `+${fmtPts(gapAheadNum)}`,
+          gapAheadNum,
+          driverAhead: i === 0 ? null : drivers[i - 1].name_acronym,
           spark: sparkPoints(d.form),
           h2h: `${d.teammate_wins}–${d.teammate_losses}`,
           h2hWin: d.teammate_wins >= d.teammate_losses,
@@ -233,7 +237,12 @@ function ChampionshipBody({ hub, view, setView }: BodyProps) {
       </div>
 
       {view === 'drivers' && (
-        <DriversView enriched={enriched} leaderPoints={leader.points} titleMath={titleMath} />
+        <DriversView
+          enriched={enriched}
+          leaderPoints={leader.points}
+          titleMath={titleMath}
+          roundsLeft={hub.rounds_left}
+        />
       )}
       {view === 'constructors' && <ConstructorsView hub={hub} />}
       {view === 'progression' && <ProgressionView hub={hub} />}
@@ -248,6 +257,8 @@ interface EnrichedDriver {
   color: string
   gapLeader: string
   gapAhead: string
+  gapAheadNum: number | null
+  driverAhead: string | null
   spark: string
   h2h: string
   h2hWin: boolean
@@ -259,10 +270,12 @@ function DriversView({
   enriched,
   leaderPoints,
   titleMath,
+  roundsLeft,
 }: {
   enriched: EnrichedDriver[]
   leaderPoints: number
   titleMath: string
+  roundsLeft: number
 }) {
   const podium = enriched.slice(0, 3)
   return (
@@ -357,7 +370,19 @@ function DriversView({
                 <td className="champ-td-team">{e.d.team_name}</td>
                 <td className="r mono champ-td-pts">{fmtPts(e.d.points)}</td>
                 <td className="r mono champ-td-muted">{e.gapLeader}</td>
-                <td className="r mono champ-td-dim">{e.gapAhead}</td>
+                <td className="r mono champ-td-dim">
+                  {(() => {
+                    const gapAnnotation = pointsGapMeaning(e.gapAheadNum, roundsLeft, e.driverAhead)
+                    return (
+                      <Meaning
+                        value={e.gapAhead}
+                        meaning={gapAnnotation?.caption}
+                        title={gapAnnotation?.title}
+                        tone={gapAnnotation?.tone}
+                      />
+                    )
+                  })()}
+                </td>
                 <td className="c mono" style={{ color: e.d.wins > 0 ? 'var(--text)' : 'var(--text-3)' }}>
                   {e.d.wins}
                 </td>

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 { Trophy } from 'lucide-react'
-import { Play, Activity, Calendar, Trophy } from 'lucide-react'
-
-type WeekendStatusKind = 'live' | 'current' | 'next' | 'recent' | 'fallback'
 
 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 && (
+      {focusMeeting && focusKind && (
-        <div className="cc-hero">
+        <CommandCenterHero
-          <section className="cc-weekend-band ui-card glass-panel" data-testid="cc-focus">
+          state={heroStateKind}
-            <div className="cc-band-accent" aria-hidden="true" />
+          now={nowDate}
-            <div className="cc-band-body">
+          accent={accent}
-              <div className="cc-band-row">
+          liveActive={liveActive}
-                <span className="cc-band-decal mono">{decal}</span>
+          liveData={liveQuery.data?.data}
-                <div className="cc-band-titles">
+          focusMeeting={focusMeeting}
-                  <div className="cc-band-eyebrow mono">
+          focusKind={focusKind}
-                    <WeekendKindLabel kind={statusKind} />
+          sessions={focusWeekendSessions}
-                  </div>
+          currentSession={currentSession}
-                  <h1 className="cc-band-name">{focusMeeting.meeting_name}</h1>
+          nextSession={nextSession}
-                  <div className="cc-band-sub mono">
+          analysisSessionKey={analysisSessionKey}
-                    {[focusMeeting.location, focusMeeting.circuit_short_name]
+          analysisSessionName={actionSession?.session_name}
-                      .filter(Boolean)
+          lastRaceName={lastRaceName}
-                      .join(' · ')}
+          lastRacePodium={lastRacePodium}
-                  </div>
+          lastRaceSessionKey={lastRaceSessionKey}
-                  <div className="cc-band-sub mono cc-band-dates">{formatGpDateRange(focusMeeting)}</div>
+          nextMeeting={nextMeetingForHero}
-                </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>
       )}
 
       <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/pages/LiveTimingPage.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { fetchLiveState, fetchLiveTrackOutline } from '../api'
 import type { LivePosition, LiveStreamData } from '../types'
@@ -15,13 +15,18 @@ import type { VisibleSectorState } from '../lib/live'
 import type { GapHistoryMap } from '../lib/gapHistory'
 import { recordGapSamples } from '../lib/gapHistory'
 import { battleNumbers, detectBattles } from '../lib/battles'
+import type { LiveEvent } from '../lib/events'
+import { appendEvents, diffSnapshots, sessionSignature } from '../lib/events'
 import { SessionBanner } from '../components/live/SessionBanner'
 import { TrackStatusBanner } from '../components/live/TrackStatusBanner'
 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 { EventRail } from '../components/live/EventRail'
+import { TeamRadioTicker } from '../components/live/TeamRadioTicker'
 import { TrackMap } from '../components/live/TrackMap'
+import { TyreDegPanel } from '../components/live/TyreDegPanel'
 import { Radio } from 'lucide-react'
 
 type StreamStatus = 'connecting' | 'connected' | 'disconnected' | 'error'
@@ -35,6 +40,9 @@ export function LiveTimingPage() {
   const [pinned, setPinned] = useState<string[]>(() => loadPinnedDrivers())
   const [visibleSectors, setVisibleSectors] = useState<VisibleSectorState>({})
   const [positions, setPositions] = useState<Record<string, LivePosition>>({})
+  const [events, setEvents] = useState<LiveEvent[]>([])
+  const prevSnapshotRef = useRef<LiveStreamData | null>(null)
+  const sessionSigRef = useRef('')
 
   const { data, isLoading, isError, error } = useQuery({
     queryKey: ['live-state'],
@@ -112,6 +120,23 @@ export function LiveTimingPage() {
     }
   }, [])
 
+  // Synthesize "what just happened" events from successive snapshots; the
+  // buffer resets whenever a different session starts streaming.
+  useEffect(() => {
+    if (!snapshot) return
+    const signature = sessionSignature(snapshot.Session)
+    const prev = prevSnapshotRef.current
+    prevSnapshotRef.current = snapshot
+    if (signature !== sessionSigRef.current) {
+      sessionSigRef.current = signature
+      setEvents([])
+      return
+    }
+    if (!prev || prev === snapshot) return
+    const fresh = diffSnapshots(prev, snapshot)
+    if (fresh.length > 0) setEvents((current) => appendEvents(current, fresh))
+  }, [snapshot])
+
   const rawRows = useMemo(() => sortLiveTimingRows(snapshot), [snapshot])
 
   useEffect(() => {
@@ -193,6 +218,7 @@ export function LiveTimingPage() {
             driverInfo={snapshot.DriverInfo}
             loading={trackOutlineQuery.isLoading}
           />
+          <TyreDegPanel rows={rows} sessionType={snapshot.Session?.SessionType} pinned={pinned} />
           <div className="live-columns">
             <div className="live-tower-col">
               <div className="sec-header">
@@ -211,7 +237,13 @@ 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} />
+              <EventRail events={events} driverInfo={snapshot.DriverInfo} />
             </div>
           </div>
         </>

frontend/src/pages/RaceHubPage.tsx

@@ -13,6 +13,7 @@ import { TabBar, type Tab } from '../components/TabBar'
 import { DatasetStatusView } from '../components/DatasetStatusView'
 import { StrategyView } from '../components/StrategyView'
 import { LapsView } from '../components/LapsView'
+import { CompareView } from '../components/CompareView'
 import { RaceControlView } from '../components/RaceControlView'
 import { WeatherView } from '../components/WeatherView'
 import { OverviewView } from '../components/OverviewView'
@@ -307,6 +308,19 @@ export function RaceHubPage({ sessionKey }: Props) {
         </div>
       )}
 
+      {activeTab === 'compare' && (
+        <div className="data-section">
+          <div className="sec-header">
+            <span className="sec-title">Driver Compare</span>
+          </div>
+          <CompareView
+            sessionKey={sessionKey}
+            results={data.results}
+            drivers={data.drivers}
+          />
+        </div>
+      )}
+
       {activeTab === 'lap_data' && (
         <div className="data-section">
           <div className="sec-header">

frontend/src/styles/compare-view.css

@@ -0,0 +1,78 @@
+.compare-view {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s5);
+}
+
+.compare-pickers {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--s4);
+  align-items: flex-end;
+}
+
+.compare-picker {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s3);
+  min-width: 180px;
+}
+
+.compare-picker-label {
+  font-family: var(--f-mono);
+  font-size: 11px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--text-3);
+}
+
+.compare-picker-select {
+  font-family: var(--f-mono);
+  font-size: 13px;
+  padding: var(--s2) var(--s3);
+  border: 1px solid var(--border);
+  border-radius: var(--r1);
+  background: var(--surface-2);
+  color: var(--text);
+}
+
+.compare-picker-select:focus {
+  outline: 2px solid var(--gp-accent, var(--red));
+  outline-offset: 1px;
+}
+
+.compare-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s3);
+}
+
+.compare-section-title {
+  font-family: var(--f-mono);
+  font-size: 12px;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--text-2);
+}
+
+.compare-section-meta {
+  font-family: var(--f-mono);
+  font-size: 11px;
+  color: var(--text-3);
+}
+
+.compare-pit-caption {
+  font-family: var(--f-mono);
+  font-size: 11px;
+  color: var(--text-3);
+  margin: 0;
+}
+
+.compare-stale-notice {
+  font-size: 12px;
+  color: var(--amber, #f59e0b);
+  background: rgba(245, 158, 11, 0.08);
+  border: 1px solid rgba(245, 158, 11, 0.25);
+  border-radius: var(--r1);
+  padding: var(--s2) var(--s3);
+}

frontend/src/styles/event-rail.css

@@ -0,0 +1,67 @@
+/* ── "What just happened" event rail (live page) ── */
+
+.event-rail {
+  margin-top: var(--s5);
+}
+
+.event-rail-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s3);
+  padding-top: var(--s4);
+}
+
+.event-rail-row {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--s4);
+  padding: var(--s3) var(--s4);
+  border-left: 3px solid var(--border-2);
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 0 4px 4px 0;
+}
+
+.event-rail-icon {
+  display: inline-flex;
+  align-items: center;
+  color: var(--text-2);
+  padding-top: 1px;
+  flex-shrink: 0;
+}
+
+.event-kind-fastest-lap .event-rail-icon { color: var(--purple); }
+.event-kind-personal-best .event-rail-icon { color: var(--green); }
+.event-kind-overtake .event-rail-icon,
+.event-kind-position-gain .event-rail-icon { color: var(--green); }
+.event-kind-position-loss .event-rail-icon { color: var(--yellow); }
+.event-kind-retirement .event-rail-icon,
+.event-kind-track-status .event-rail-icon { color: var(--red); }
+.event-kind-pit-in .event-rail-icon,
+.event-kind-pit-out .event-rail-icon { color: var(--blue); }
+
+.event-rail-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s1);
+  min-width: 0;
+  flex: 1;
+}
+
+.event-rail-headline {
+  font-size: 12px;
+  color: var(--text);
+  line-height: 1.4;
+}
+
+.event-rail-detail {
+  font-size: 11px;
+  color: var(--text-2);
+}
+
+.event-rail-lap {
+  font-family: var(--f-mono);
+  font-size: 10px;
+  color: var(--text-3);
+  flex-shrink: 0;
+  padding-top: 2px;
+}

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/styles/meaning.css

@@ -0,0 +1,48 @@
+/* Compact value + muted meaning caption (issue #18). */
+
+.meaning {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: inherit;
+  gap: 1px;
+  line-height: 1.2;
+}
+
+.meaning-value {
+  /* inherits table cell mono styling from parent */
+}
+
+.meaning-caption {
+  font-size: 10px;
+  font-family: var(--f-mono);
+  color: var(--text-3);
+  letter-spacing: 0.02em;
+  white-space: nowrap;
+}
+
+.meaning-caption--good {
+  color: var(--green);
+}
+
+.meaning-caption--bad {
+  color: var(--red);
+}
+
+.meaning-caption--warn {
+  color: var(--yellow, #e8c547);
+}
+
+.meaning-caption--neutral {
+  color: var(--text-3);
+}
+
+/* Table cells: right-align caption under numeric values */
+td.r .meaning,
+.champ-td-dim .meaning,
+.champ-td-muted .meaning {
+  align-items: flex-end;
+}
+
+.tyredeg-row .meaning {
+  align-items: flex-start;
+}

frontend/src/styles/stint-timeline.css

@@ -0,0 +1,94 @@
+.stint-timeline {
+  --stint-left: 48px;
+  --stint-right: 12px;
+  --stint-row-h: 28px;
+  --stint-bar-h: 14px;
+  --stint-axis-h: 20px;
+}
+
+.stint-timeline__scroll {
+  overflow-x: auto;
+}
+
+.stint-timeline__svg {
+  width: 100%;
+  min-width: 280px;
+  max-width: 640px;
+  display: block;
+}
+
+.stint-timeline__label {
+  font-family: var(--f-mono);
+  font-weight: 700;
+  font-size: 10px;
+}
+
+.stint-timeline__bar {
+  stroke: none;
+}
+
+.stint-timeline__bar.tyre-soft { fill: var(--tyre-soft); }
+.stint-timeline__bar.tyre-medium { fill: var(--tyre-medium); }
+.stint-timeline__bar.tyre-hard { fill: var(--tyre-hard); stroke: #555; stroke-width: 0.5; }
+.stint-timeline__bar.tyre-inter { fill: var(--tyre-inter); }
+.stint-timeline__bar.tyre-wet { fill: var(--tyre-wet); }
+.stint-timeline__bar.tyre-unknown { fill: var(--surface-2); stroke: var(--border-2); stroke-width: 0.5; }
+
+.stint-timeline__bar--new {
+  stroke: var(--text);
+  stroke-width: 1;
+  stroke-dasharray: 2 1;
+}
+
+.stint-timeline__axis-tick {
+  font-family: var(--f-mono);
+  font-size: 9px;
+  fill: var(--text-3);
+}
+
+.stint-timeline__axis-line {
+  stroke: var(--border-2);
+  stroke-width: 1;
+}
+
+.stint-timeline__legend {
+  display: flex;
+  gap: var(--s4);
+  flex-wrap: wrap;
+  margin-top: var(--s4);
+  font-size: 11px;
+  color: var(--text-3);
+  align-items: center;
+}
+
+.stint-timeline__legend-swatch {
+  width: 10px;
+  height: 10px;
+  border-radius: 2px;
+  display: inline-block;
+}
+
+.stint-timeline__legend-swatch.tyre-hard {
+  border: 1px solid #555;
+}
+
+.stint-timeline__legend-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.stint-timeline__meta {
+  margin-left: auto;
+  font-family: var(--f-mono);
+  font-size: 10px;
+}
+
+.stint-timeline__empty {
+  padding: var(--s5);
+  color: var(--text-3);
+  font-size: 13px;
+  text-align: center;
+  border: 1px dashed var(--border-2);
+  border-radius: var(--r2);
+}

frontend/src/styles/team-radio.css

@@ -0,0 +1,82 @@
+.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;
+}

frontend/src/styles/telemetry-trace.css

@@ -0,0 +1,101 @@
+.telemetry-trace {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.telemetry-trace-empty {
+  padding: 24px;
+  text-align: center;
+  color: var(--text-3);
+  font-size: 13px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+}
+
+.telemetry-trace-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 14px;
+  font-size: 12px;
+  color: var(--text-2);
+}
+
+.telemetry-trace-legend-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.telemetry-trace-swatch {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: 2px;
+  flex: none;
+}
+
+.telemetry-trace-svg {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
+.telemetry-trace-panel-bg {
+  fill: var(--surface);
+  stroke: var(--border);
+  stroke-width: 1;
+  rx: 4;
+}
+
+.telemetry-trace-panel-title {
+  fill: var(--text-2);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.telemetry-trace-axis-max {
+  fill: var(--text-3);
+  font-size: 10px;
+}
+
+.telemetry-trace-crosshair {
+  stroke: var(--text-2);
+  stroke-width: 1;
+  stroke-dasharray: 3 3;
+  pointer-events: none;
+}
+
+.telemetry-trace-readout {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px;
+  padding: 6px 10px;
+  font-size: 12px;
+  color: var(--text-2);
+  background: var(--surface-h);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+}
+
+.telemetry-trace-readout-index {
+  color: var(--text-3);
+}
+
+.telemetry-trace-readout-driver {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.telemetry-trace-readout-label {
+  color: var(--text);
+  font-weight: 600;
+}
+
+.telemetry-trace-readout-value {
+  font-variant-numeric: tabular-nums;
+}

frontend/src/styles/tyredeg.css

@@ -0,0 +1,84 @@
+/* Live tyre-degradation & pit-window panel (see components/live/TyreDegPanel.tsx) */
+
+.live-tyredeg-panel {
+  margin-bottom: var(--s5);
+}
+
+.tyredeg-toggle {
+  width: 100%;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  text-align: left;
+}
+
+.tyredeg-chevron {
+  margin-left: auto;
+  font-size: 10px;
+  color: var(--text-3);
+}
+
+.tyredeg-rows {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.tyredeg-row {
+  display: flex;
+  align-items: center;
+  gap: var(--s4);
+  padding: var(--s2) var(--s4);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  font-size: 12px;
+}
+
+.tyredeg-row .drv-bar { height: 16px; }
+
+.tyredeg-pos {
+  min-width: 28px;
+  color: var(--text-2);
+  font-size: 11px;
+}
+
+.tyredeg-spark { display: block; }
+.tyredeg-spark-empty { color: var(--text-3); }
+
+.tyredeg-trend { display: inline-flex; align-items: center; }
+.tyredeg-trend-improving { color: var(--green); }
+.tyredeg-trend-stable    { color: var(--text-3); }
+.tyredeg-trend-degrading { color: #ff6b6b; }
+
+.tyredeg-slope {
+  min-width: 78px;
+  font-size: 11px;
+}
+
+.tyredeg-warmup {
+  color: var(--text-3);
+  font-size: 11px;
+  font-style: italic;
+}
+
+.tyredeg-rejoin {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: baseline;
+  gap: var(--s3);
+  color: var(--text-2);
+  font-size: 11px;
+  white-space: nowrap;
+}
+
+.tyredeg-rejoin-between {
+  color: var(--text-3);
+  font-size: 10px;
+}
+
+@media (max-width: 640px) {
+  .tyredeg-rejoin-between { display: none; }
+  .tyredeg-slope { min-width: 0; }
+}

frontend/src/test/ChampionshipPage.test.tsx

@@ -112,6 +112,7 @@ describe('ChampionshipPage', () => {
     expect(screen.getAllByText('VER').length).toBeGreaterThan(0)
     expect(screen.getByText('Monaco GP', { exact: false })).toBeInTheDocument()
     expect(screen.getByTestId('champ-titlemath')).toHaveTextContent('mathematically win the title')
+    expect(screen.getAllByText('~10 pts/round').length).toBeGreaterThan(0)
   })
 
   it('switches to constructors and progression views', async () => {

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/LiveComponents.test.tsx

@@ -189,6 +189,26 @@ describe('TimingTower', () => {
     expect(screen.getByText(/no driver timing rows/i)).toBeInTheDocument()
   })
 
+  it('annotates DRS-range intervals in race mode', () => {
+    const raceRows = [
+      makeRow('1', 1, 'VER'),
+      makeRow('4', 2, 'NOR', { Interval: '+0.4', GapToLeader: '+0.4' }),
+    ]
+    render(
+      <TimingTower
+        rows={raceRows}
+        session={{
+          MeetingName: 'Monaco Grand Prix',
+          CircuitName: 'Monaco',
+          SessionType: 'Race',
+          SessionName: 'Race',
+          Path: '',
+        }}
+      />,
+    )
+    expect(screen.getByText('DRS range')).toBeInTheDocument()
+  })
+
   it('renders the SQ1 cutoff after P17 and marks rows below as at risk', () => {
     const sprintRows = Array.from({ length: 22 }, (_, index) =>
       makeRow(String(index + 1), index + 1, `D${index + 1}`),
@@ -201,6 +221,7 @@ describe('TimingTower', () => {
           CircuitName: 'Silverstone',
           SessionType: 'Sprint Qualifying',
           SessionName: 'Sprint Qualifying',
+          Path: '',
         }}
       />,
     )

frontend/src/test/Meaning.test.tsx

@@ -0,0 +1,26 @@
+import { describe, expect, it } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { Meaning } from '../components/Meaning'
+
+describe('Meaning', () => {
+  it('renders bare value when meaning is null', () => {
+    render(<Meaning value="+1.234" meaning={null} />)
+    expect(screen.getByText('+1.234')).toBeInTheDocument()
+    expect(screen.queryByText('DRS range')).not.toBeInTheDocument()
+  })
+
+  it('renders value with caption and tooltip title', () => {
+    render(
+      <Meaning
+        value="+0.4"
+        meaning="DRS range"
+        title="Within 1.0s — DRS enabled next straight"
+        tone="good"
+      />,
+    )
+    const value = screen.getByText('+0.4')
+    expect(value).toBeInTheDocument()
+    expect(screen.getByText('DRS range')).toHaveClass('meaning-caption--good')
+    expect(value.closest('.meaning')).toHaveAttribute('title', 'Within 1.0s — DRS enabled next straight')
+  })
+})

frontend/src/test/TabBar.test.tsx

@@ -8,6 +8,7 @@ describe('TabBar', () => {
     expect(screen.getByRole('tab', { name: 'Overview' })).toBeInTheDocument()
     expect(screen.getByRole('tab', { name: 'Race Story' })).toBeInTheDocument()
     expect(screen.getByRole('tab', { name: 'Strategy' })).toBeInTheDocument()
+    expect(screen.getByRole('tab', { name: 'Compare' })).toBeInTheDocument()
     expect(screen.getByRole('tab', { name: 'Lap Data' })).toBeInTheDocument()
     expect(screen.getByRole('tab', { name: 'Conditions' })).toBeInTheDocument()
     expect(screen.getByRole('tab', { name: 'Race Control' })).toBeInTheDocument()

frontend/src/test/TeamRadioTicker.test.tsx

@@ -0,0 +1,87 @@
+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()
+  })
+})

frontend/src/test/TyreDegPanel.test.tsx

@@ -0,0 +1,108 @@
+import { describe, expect, it } from 'vitest'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { TyreDegPanel } from '../components/live/TyreDegPanel'
+import type { LiveTimingRow } from '../lib/live'
+import type { LiveDriverData, LiveTyreData } from '../types'
+
+function makeRow(
+  number: string,
+  position: number,
+  tla: string,
+  driver: Partial<LiveDriverData> = {},
+  tyre: Partial<LiveTyreData> = {},
+): LiveTimingRow {
+  return {
+    RacingNumber: number,
+    Position: position,
+    Driver: {
+      RacingNumber: number,
+      Position: position,
+      Interval: position === 1 ? '' : '+5.0',
+      GapToLeader: '',
+      LastLapTime: '1:30.000',
+      NumberOfLaps: 10,
+      InPit: false,
+      PitOut: false,
+      Retired: false,
+      ...driver,
+    } as LiveDriverData,
+    Info: {
+      RacingNumber: number,
+      BroadcastName: '',
+      Tla: tla,
+      TeamName: '',
+      TeamColour: '3671c6',
+      FirstName: '',
+      LastName: '',
+    },
+    Tyre: { Compound: 'MEDIUM', New: false, Age: 5, ...tyre } as LiveTyreData,
+  }
+}
+
+function snapshotRows(lap: number, lastLapTime: string): LiveTimingRow[] {
+  return [
+    makeRow('1', 1, 'VER', { NumberOfLaps: lap, LastLapTime: lastLapTime }),
+    makeRow('4', 2, 'NOR', { NumberOfLaps: lap, LastLapTime: lastLapTime }),
+  ]
+}
+
+describe('TyreDegPanel', () => {
+  it('shows a warming-up placeholder until enough clean laps accumulate', () => {
+    render(<TyreDegPanel rows={snapshotRows(3, '1:30.000')} sessionType="Race" pinned={[]} />)
+    const panel = screen.getByTestId('tyredeg-panel')
+    expect(panel).toHaveTextContent('VER')
+    expect(panel).toHaveTextContent('M +5')
+    expect(panel).toHaveTextContent('fresh')
+    expect(panel).toHaveTextContent('warming up')
+  })
+
+  it('annotates tyre age meaning on stint rows', () => {
+    const rows = [
+      makeRow('1', 1, 'VER', { NumberOfLaps: 10, LastLapTime: '1:30.000' }, { Compound: 'MEDIUM', Age: 12 }),
+    ]
+    render(<TyreDegPanel rows={rows} sessionType="Race" pinned={[]} />)
+    expect(screen.getByText('mid-life')).toBeInTheDocument()
+  })
+
+  it('renders slope and rejoin estimate once laps accumulate across snapshots', () => {
+    const { rerender } = render(
+      <TyreDegPanel rows={snapshotRows(1, '1:30.000')} sessionType="Race" pinned={[]} />,
+    )
+    // Five completed laps at +0.1s/lap after the first observed snapshot.
+    for (let lap = 2; lap <= 6; lap++) {
+      const time = `1:30.${String((lap - 1) * 100).padStart(3, '0')}`
+      rerender(<TyreDegPanel rows={snapshotRows(lap, time)} sessionType="Race" pinned={[]} />)
+    }
+
+    const panel = screen.getByTestId('tyredeg-panel')
+    expect(panel).toHaveTextContent('+0.10s/lap')
+    expect(panel).not.toHaveTextContent('warming up')
+    // VER pits from P1 with NOR +5.0 behind: NOR gets past -> rejoin ~P2.
+    expect(panel).toHaveTextContent('→ ~P2')
+  })
+
+  it('hides the rejoin estimate outside race sessions and collapses on toggle', () => {
+    render(<TyreDegPanel rows={snapshotRows(3, '1:30.000')} sessionType="Qualifying" pinned={[]} />)
+    const panel = screen.getByTestId('tyredeg-panel')
+    expect(panel).not.toHaveTextContent('~P')
+
+    expect(screen.getAllByTestId('tyredeg-row')).toHaveLength(2)
+    fireEvent.click(screen.getByRole('button', { name: /tyre deg/i }))
+    expect(screen.queryAllByTestId('tyredeg-row')).toHaveLength(0)
+  })
+
+  it('limits rows to the top ten plus pinned drivers', () => {
+    const rows = Array.from({ length: 15 }, (_, index) =>
+      makeRow(String(index + 1), index + 1, `D${index + 1}`),
+    )
+    render(<TyreDegPanel rows={rows} sessionType="Race" pinned={['14']} />)
+    expect(screen.getAllByTestId('tyredeg-row')).toHaveLength(11)
+    expect(screen.getByText('D14')).toBeInTheDocument()
+    expect(screen.queryByText('D12')).not.toBeInTheDocument()
+  })
+
+  it('renders nothing without rows', () => {
+    render(<TyreDegPanel rows={[]} sessionType="Race" pinned={[]} />)
+    expect(screen.queryByTestId('tyredeg-panel')).not.toBeInTheDocument()
+  })
+})

frontend/src/test/compare-view.test.tsx

@@ -0,0 +1,341 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render, screen, waitFor } from '@testing-library/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { CompareView } from '../components/CompareView'
+import type { Driver, EnrichedResult, LapsComparisonResponse } from '../types'
+import {
+  buildBestLapTraceSeries,
+  carDataToTraceSeries,
+  comparisonToDeltaSeries,
+  defaultCompareDriverNumbers,
+  filterCarDataToLap,
+  findBestLap,
+  formatPitLapsCaption,
+  lapsToLapTimes,
+} from '../lib/compare'
+import { computeCumulativeDeltas } from '../lib/delta'
+
+vi.mock('../api', () => ({
+  fetchTelemetry: vi.fn(),
+  fetchLapsComparison: vi.fn(),
+}))
+
+import { fetchTelemetry, fetchLapsComparison } from '../api'
+
+const mockFetchTelemetry = vi.mocked(fetchTelemetry)
+const mockFetchLapsComparison = vi.mocked(fetchLapsComparison)
+
+const results: 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: null,
+    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: null,
+    gap_to_leader: 5.1,
+    number_of_laps: 78,
+    points: 18,
+    session_key: 9472,
+    meeting_key: 1229,
+  },
+]
+
+const drivers: Driver[] = [
+  {
+    driver_number: 1,
+    name_acronym: 'VER',
+    full_name: 'Max Verstappen',
+    first_name: 'Max',
+    last_name: 'Verstappen',
+    team_name: 'Red Bull Racing',
+    team_colour: '3671C6',
+    headshot_url: '',
+    broadcast_name: 'M VERSTAPPEN',
+    session_key: 9472,
+    meeting_key: 1229,
+  },
+  {
+    driver_number: 44,
+    name_acronym: 'HAM',
+    full_name: 'Lewis Hamilton',
+    first_name: 'Lewis',
+    last_name: 'Hamilton',
+    team_name: 'Ferrari',
+    team_colour: 'E8002D',
+    headshot_url: '',
+    broadcast_name: 'L HAMILTON',
+    session_key: 9472,
+    meeting_key: 1229,
+  },
+]
+
+const comparison: LapsComparisonResponse = {
+  session_key: 9472,
+  sc_periods: [],
+  pit_laps: { '44': [19, 40] },
+  drivers: [
+    {
+      driver_number: 1,
+      name_acronym: 'VER',
+      team_colour: '3671C6',
+      laps: [
+        {
+          session_key: 9472,
+          driver_number: 1,
+          meeting_key: 1229,
+          lap_number: 1,
+          date_start: '2025-05-25T13:00:00.000Z',
+          lap_duration: 92.1,
+          is_pit_out_lap: false,
+        },
+        {
+          session_key: 9472,
+          driver_number: 1,
+          meeting_key: 1229,
+          lap_number: 2,
+          date_start: '2025-05-25T13:01:32.100Z',
+          lap_duration: 90.5,
+          is_pit_out_lap: false,
+        },
+      ],
+    },
+    {
+      driver_number: 44,
+      name_acronym: 'HAM',
+      team_colour: 'E8002D',
+      laps: [
+        {
+          session_key: 9472,
+          driver_number: 44,
+          meeting_key: 1229,
+          lap_number: 1,
+          date_start: '2025-05-25T13:00:01.000Z',
+          lap_duration: 93.0,
+          is_pit_out_lap: false,
+        },
+        {
+          session_key: 9472,
+          driver_number: 44,
+          meeting_key: 1229,
+          lap_number: 2,
+          date_start: '2025-05-25T13:01:34.000Z',
+          lap_duration: null,
+          is_pit_out_lap: true,
+        },
+        {
+          session_key: 9472,
+          driver_number: 44,
+          meeting_key: 1229,
+          lap_number: 3,
+          date_start: '2025-05-25T13:03:10.000Z',
+          lap_duration: 91.2,
+          is_pit_out_lap: false,
+        },
+      ],
+    },
+  ],
+}
+
+function renderCompareView() {
+  const client = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  })
+  return render(
+    <QueryClientProvider client={client}>
+      <CompareView sessionKey={9472} results={results} drivers={drivers} />
+    </QueryClientProvider>,
+  )
+}
+
+describe('compare mapping helpers', () => {
+  it('defaults to top two finishers', () => {
+    expect(defaultCompareDriverNumbers(results, drivers)).toEqual([1, 44])
+  })
+
+  it('maps comparison laps to delta series with null pit laps', () => {
+    const series = comparisonToDeltaSeries(comparison, [1, 44], drivers)
+    expect(series).toHaveLength(2)
+    expect(series[0].label).toBe('VER')
+    expect(series[1].lapTimes[1]).toBeNull()
+
+    const deltas = computeCumulativeDeltas(series, 'VER')
+    expect(deltas[0].deltas[0]).toBeCloseTo(0.9)
+  })
+
+  it('maps car data to trace series', () => {
+    const trace = carDataToTraceSeries(
+      [
+        {
+          speed: 300,
+          throttle: 100,
+          brake: 0,
+          date: '',
+          driver_number: 1,
+          drs: 0,
+          meeting_key: 1,
+          n_gear: 8,
+          rpm: 12000,
+          session_key: 1,
+        },
+      ],
+      'VER',
+      '#3671C6',
+    )
+    expect(trace.samples[0]).toEqual({ speed: 300, throttle: 100, brake: 0 })
+  })
+
+  it('filters car data to best lap window', () => {
+    const best = findBestLap(comparison.drivers[0].laps)
+    expect(best?.lap_number).toBe(2)
+
+    const samples = [
+      {
+        date: '2025-05-25T13:01:32.100Z',
+        speed: 280,
+        throttle: 90,
+        brake: 0,
+        driver_number: 1,
+        drs: 0,
+        meeting_key: 1229,
+        n_gear: 7,
+        rpm: 11000,
+        session_key: 9472,
+      },
+      {
+        date: '2025-05-25T13:00:00.000Z',
+        speed: 200,
+        throttle: 50,
+        brake: 10,
+        driver_number: 1,
+        drs: 0,
+        meeting_key: 1229,
+        n_gear: 4,
+        rpm: 9000,
+        session_key: 9472,
+      },
+    ]
+
+    const filtered = filterCarDataToLap(samples, best!)
+    expect(filtered).toHaveLength(1)
+    expect(filtered[0].speed).toBe(280)
+  })
+
+  it('builds best-lap trace series from car data and laps', () => {
+    const series = buildBestLapTraceSeries(
+      [
+        {
+          date: '2025-05-25T13:01:33.000Z',
+          speed: 310,
+          throttle: 100,
+          brake: 0,
+          driver_number: 1,
+          drs: 10,
+          meeting_key: 1229,
+          n_gear: 8,
+          rpm: 12000,
+          session_key: 9472,
+        },
+      ],
+      comparison.drivers[0].laps,
+      'VER',
+      '#3671C6',
+    )
+    expect(series?.samples).toHaveLength(1)
+    expect(series?.samples[0].speed).toBe(310)
+  })
+
+  it('maps laps to lap time arrays with nulls', () => {
+    expect(lapsToLapTimes(comparison.drivers[1].laps)).toEqual([93.0, null, 91.2])
+  })
+
+  it('formats pit lap captions', () => {
+    expect(formatPitLapsCaption(comparison.pit_laps, [1, 44], comparison, drivers)).toBe(
+      'Pit stops — HAM: L19, L40',
+    )
+  })
+})
+
+describe('CompareView', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockFetchLapsComparison.mockResolvedValue(comparison)
+    mockFetchTelemetry.mockResolvedValue([
+      {
+        date: '2025-05-25T13:01:33.000Z',
+        speed: 310,
+        throttle: 100,
+        brake: 0,
+        driver_number: 1,
+        drs: 10,
+        meeting_key: 1229,
+        n_gear: 8,
+        rpm: 12000,
+        session_key: 9472,
+      },
+    ])
+  })
+
+  it('renders pickers defaulting to top two finishers', async () => {
+    renderCompareView()
+    expect(screen.getByTestId('compare-picker-a')).toHaveValue('1')
+    expect(screen.getByTestId('compare-picker-b')).toHaveValue('44')
+    expect(screen.getAllByText('VER').length).toBeGreaterThan(0)
+    expect(screen.getAllByText('HAM').length).toBeGreaterThan(0)
+  })
+
+  it('renders telemetry and pace sections with mocked queries', async () => {
+    renderCompareView()
+
+    await waitFor(() => {
+      expect(mockFetchLapsComparison).toHaveBeenCalledWith(9472, [1, 44])
+    })
+
+    await waitFor(() => {
+      expect(screen.getByTestId('telemetry-trace')).toBeInTheDocument()
+    })
+
+    expect(screen.getByTestId('delta-time-graph')).toBeInTheDocument()
+    expect(screen.getByTestId('compare-pit-caption')).toHaveTextContent('HAM: L19, L40')
+  })
+
+  it('shows error state when comparison fetch fails', async () => {
+    mockFetchLapsComparison.mockRejectedValue(new Error('comparison unavailable'))
+    renderCompareView()
+
+    await waitFor(() => {
+      expect(screen.getByText('comparison unavailable')).toBeInTheDocument()
+    })
+  })
+
+  it('shows empty state when fewer than two drivers', () => {
+    const client = new QueryClient({ defaultOptions: { queries: { retry: false } } })
+    render(
+      <QueryClientProvider client={client}>
+        <CompareView sessionKey={9472} results={[]} drivers={[drivers[0]]} />
+      </QueryClientProvider>,
+    )
+    expect(screen.getByTestId('compare-view-empty')).toBeInTheDocument()
+  })
+})

frontend/src/test/events.test.ts

@@ -0,0 +1,268 @@
+import { describe, expect, it } from 'vitest'
+import {
+  MAX_EVENTS,
+  appendEvents,
+  diffSnapshots,
+  humanizeRaceControl,
+  sessionSignature,
+} from '../lib/events'
+import type { LiveEvent } from '../lib/events'
+import type {
+  LiveDriverData,
+  LiveDriverInfo,
+  LiveRCMessage,
+  LiveStreamData,
+} from '../types'
+
+function driver(number: string, position: number, overrides: Partial<LiveDriverData> = {}): LiveDriverData {
+  return {
+    RacingNumber: number,
+    Position: position,
+    PrevPosition: position,
+    GapToLeader: '',
+    Interval: '',
+    LastLapTime: '',
+    LastLapPB: false,
+    LastLapOB: false,
+    BestLapTime: '',
+    BestLapPB: false,
+    BestLapOB: false,
+    BestLapNum: 0,
+    InPit: false,
+    PitOut: false,
+    Retired: false,
+    KnockedOut: false,
+    Cutoff: false,
+    OnFlyingLap: false,
+    NumberOfLaps: 10,
+    SpeedTrap: '',
+    Sectors: [],
+    ...overrides,
+  }
+}
+
+function info(number: string, tla: string): LiveDriverInfo {
+  return {
+    RacingNumber: number,
+    BroadcastName: tla,
+    Tla: tla,
+    TeamName: '',
+    TeamColour: '3671C6',
+    FirstName: '',
+    LastName: '',
+  }
+}
+
+function snapshot(
+  drivers: Record<string, LiveDriverData>,
+  overrides: Partial<LiveStreamData> = {},
+): LiveStreamData {
+  return {
+    Drivers: drivers,
+    DriverInfo: {
+      '1': info('1', 'VER'),
+      '4': info('4', 'NOR'),
+      '44': info('44', 'HAM'),
+    },
+    Tyres: {},
+    RCMessages: [],
+    TeamRadio: [],
+    Weather: {} as LiveStreamData['Weather'],
+    Session: {
+      MeetingName: 'Test Grand Prix',
+      CircuitName: 'Test Circuit',
+      SessionType: 'Race',
+      SessionName: 'Race',
+      Path: '',
+    },
+    TrackStatus: '1',
+    CurrentLap: 12,
+    TotalLaps: 57,
+    Clock: '01:23:45',
+    ClockRefTime: '',
+    ClockExtrapolating: false,
+    Stints: {},
+    ...overrides,
+  }
+}
+
+function rc(message: string, category: string, overrides: Partial<LiveRCMessage> = {}): LiveRCMessage {
+  return { Time: '2026-07-03T14:00:00Z', Category: category, Flag: '', Message: message, Lap: 12, ...overrides }
+}
+
+describe('diffSnapshots', () => {
+  it('returns no events for identical snapshots', () => {
+    const prev = snapshot({ '1': driver('1', 1), '44': driver('44', 2) })
+    const next = snapshot({ '1': driver('1', 1), '44': driver('44', 2) })
+    expect(diffSnapshots(prev, next)).toEqual([])
+  })
+
+  it('reports an overtake when two drivers swap positions', () => {
+    const prev = snapshot({ '1': driver('1', 3), '44': driver('44', 2) })
+    const next = snapshot({ '1': driver('1', 2), '44': driver('44', 3) })
+    const events = diffSnapshots(prev, next)
+    expect(events).toHaveLength(1)
+    expect(events[0].kind).toBe('overtake')
+    expect(events[0].headline).toBe('VER overtakes HAM for P2')
+    expect(events[0].racingNumbers).toEqual(['1', '44'])
+    expect(events[0].lap).toBe(12)
+  })
+
+  it('reports a generic gain when the displaced driver pitted instead', () => {
+    const prev = snapshot({ '1': driver('1', 3), '44': driver('44', 2) })
+    const next = snapshot({ '1': driver('1', 2), '44': driver('44', 5, { InPit: true }) })
+    const events = diffSnapshots(prev, next)
+    const gain = events.find((event) => event.kind === 'position-gain')
+    expect(gain?.headline).toBe('VER moves up to P2 (from P3)')
+    // HAM's drop is covered by the pit-in event, not a position-loss one.
+    expect(events.some((event) => event.kind === 'position-loss')).toBe(false)
+    expect(events.some((event) => event.kind === 'pit-in')).toBe(true)
+  })
+
+  it('reports a position loss not explained by an overtake or pit stop', () => {
+    const prev = snapshot({ '44': driver('44', 3) })
+    const next = snapshot({ '44': driver('44', 6) })
+    const events = diffSnapshots(prev, next)
+    expect(events).toHaveLength(1)
+    expect(events[0].kind).toBe('position-loss')
+    expect(events[0].headline).toBe('HAM drops to P6 (from P3)')
+  })
+
+  it('reports pit entry with the position pitted from', () => {
+    const prev = snapshot({ '4': driver('4', 3) })
+    const next = snapshot({ '4': driver('4', 3, { InPit: true }) })
+    const events = diffSnapshots(prev, next)
+    expect(events).toHaveLength(1)
+    expect(events[0].kind).toBe('pit-in')
+    expect(events[0].headline).toBe('NOR pits from P3')
+    expect(events[0].racingNumbers).toEqual(['4'])
+  })
+
+  it('reports pit exit with rejoin position, compound, and stop count', () => {
+    const prev = snapshot({ '4': driver('4', 3, { InPit: true }) })
+    const next = snapshot(
+      { '4': driver('4', 6, { PitOut: true }) },
+      {
+        Tyres: { '4': { Compound: 'MEDIUM', New: true, Age: 0 } },
+        Stints: {
+          '4': [
+            { Compound: 'SOFT', New: true, Laps: 12 },
+            { Compound: 'HARD', New: true, Laps: 20 },
+            { Compound: 'MEDIUM', New: true, Laps: 0 },
+          ],
+        },
+      },
+    )
+    const events = diffSnapshots(prev, next)
+    expect(events).toHaveLength(1)
+    expect(events[0].kind).toBe('pit-out')
+    expect(events[0].headline).toBe('NOR rejoins P6 (MEDIUM, 2nd stop)')
+  })
+
+  it('reports personal and overall best laps once per lap time', () => {
+    const prev = snapshot({
+      '1': driver('1', 1, { LastLapTime: '1:24.500' }),
+      '4': driver('4', 2, { LastLapTime: '1:25.100' }),
+    })
+    const next = snapshot({
+      '1': driver('1', 1, { LastLapTime: '1:23.456', LastLapPB: true, LastLapOB: true }),
+      '4': driver('4', 2, { LastLapTime: '1:24.900', LastLapPB: true }),
+    })
+    const events = diffSnapshots(prev, next)
+    const fastest = events.find((event) => event.kind === 'fastest-lap')
+    const personal = events.find((event) => event.kind === 'personal-best')
+    expect(fastest?.headline).toBe('VER sets the fastest lap — 1:23.456')
+    expect(personal?.headline).toBe('NOR sets a personal best — 1:24.900')
+    // A repeat diff of the same state produces nothing new.
+    expect(diffSnapshots(next, snapshot(next.Drivers))).toEqual([])
+  })
+
+  it('reports a retirement with the last running position', () => {
+    const prev = snapshot({ '44': driver('44', 5) })
+    const next = snapshot({ '44': driver('44', 5, { Retired: true }) })
+    const events = diffSnapshots(prev, next)
+    expect(events).toHaveLength(1)
+    expect(events[0].kind).toBe('retirement')
+    expect(events[0].headline).toBe('HAM retires')
+    expect(events[0].detail).toBe('Was running P5')
+  })
+
+  it('reports track status transitions as human sentences', () => {
+    const prev = snapshot({ '1': driver('1', 1) })
+    const next = snapshot({ '1': driver('1', 1) }, { TrackStatus: '4' })
+    const events = diffSnapshots(prev, next)
+    expect(events).toHaveLength(1)
+    expect(events[0].kind).toBe('track-status')
+    expect(events[0].headline).toBe('Safety Car deployed')
+  })
+
+  it('reports new Flag/SafetyCar/Drs race-control messages and skips other categories', () => {
+    const existing = rc('YELLOW IN TRACK SECTOR 7', 'Flag', { Time: '2026-07-03T13:00:00Z' })
+    const prev = snapshot({ '1': driver('1', 1) }, { RCMessages: [existing] })
+    const next = snapshot({ '1': driver('1', 1) }, {
+      RCMessages: [
+        existing,
+        rc('DRS ENABLED', 'Drs'),
+        rc('FIA STEWARDS: CAR 4 (NOR) UNDER INVESTIGATION', 'Other'),
+      ],
+    })
+    const events = diffSnapshots(prev, next)
+    expect(events).toHaveLength(1)
+    expect(events[0].kind).toBe('race-control')
+    expect(events[0].headline).toBe('DRS enabled')
+  })
+
+  it('produces stable ids across repeated diffs of the same snapshots', () => {
+    const prev = snapshot({ '1': driver('1', 3), '44': driver('44', 2) })
+    const next = snapshot({ '1': driver('1', 2), '44': driver('44', 3) })
+    const first = diffSnapshots(prev, next)
+    const second = diffSnapshots(prev, next)
+    expect(first.map((event) => event.id)).toEqual(second.map((event) => event.id))
+  })
+})
+
+describe('humanizeRaceControl', () => {
+  it('sentence-cases while preserving acronyms', () => {
+    expect(humanizeRaceControl('SAFETY CAR DEPLOYED')).toBe('Safety car deployed')
+    expect(humanizeRaceControl('DRS ENABLED')).toBe('DRS enabled')
+    expect(humanizeRaceControl('VSC DEPLOYED')).toBe('VSC deployed')
+  })
+})
+
+describe('appendEvents', () => {
+  const event = (id: string): LiveEvent => ({
+    id,
+    kind: 'race-control',
+    lap: 1,
+    timestamp: '',
+    headline: id,
+    racingNumbers: [],
+  })
+
+  it('prepends new events newest-first and dedups by id', () => {
+    const buffer = appendEvents([event('a')], [event('a'), event('b'), event('c')])
+    expect(buffer.map((entry) => entry.id)).toEqual(['c', 'b', 'a'])
+    // Re-appending the same diff output changes nothing.
+    const again = appendEvents(buffer, [event('b'), event('c')])
+    expect(again.map((entry) => entry.id)).toEqual(['c', 'b', 'a'])
+  })
+
+  it('evicts the oldest events beyond the cap', () => {
+    let buffer: LiveEvent[] = []
+    for (let index = 0; index < MAX_EVENTS + 5; index += 1) {
+      buffer = appendEvents(buffer, [event(`event-${index}`)])
+    }
+    expect(buffer).toHaveLength(MAX_EVENTS)
+    expect(buffer[0].id).toBe(`event-${MAX_EVENTS + 4}`)
+    expect(buffer[buffer.length - 1].id).toBe('event-5')
+  })
+})
+
+describe('sessionSignature', () => {
+  it('changes when the session changes, enabling buffer resets', () => {
+    const race = snapshot({}).Session
+    expect(sessionSignature(race)).toBe('Test Grand Prix|Race|Race')
+    expect(sessionSignature({ ...race, SessionName: 'Qualifying' })).not.toBe(sessionSignature(race))
+    expect(sessionSignature(null)).toBe('')
+  })
+})

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')
+  })
+})

frontend/src/test/live.test.ts

@@ -100,7 +100,8 @@ 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' },
+  Session: { MeetingName: 'Monaco Grand Prix', CircuitName: 'Monaco', SessionType: 'Race', SessionName: 'Race', Path: '2026/Monaco/Race' },
+  TeamRadio: [],
   TrackStatus: '1',
   CurrentLap: 21,
   TotalLaps: 78,
@@ -220,7 +221,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' },
+      { MeetingName: 'British Grand Prix', CircuitName: 'Silverstone', SessionType: 'Sprint Qualifying', SessionName: 'Sprint Qualifying', Path: '' },
       rows(22),
     )
     expect(display.phaseLabel).toBe('SQ1')
@@ -232,7 +233,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' },
+      { MeetingName: 'Monaco Grand Prix', CircuitName: 'Monaco', SessionType: 'Qualifying', SessionName: 'Qualifying', Path: '' },
       rows(20),
     )
     expect(display.phaseLabel).toBe('Q1')
@@ -241,7 +242,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' },
+      { MeetingName: 'Monaco Grand Prix', CircuitName: 'Monaco', SessionType: 'Qualifying', SessionName: 'Qualifying', Path: '' },
       rows(20, 5),
     )
     expect(display.phaseLabel).toBe('Q2')
@@ -251,13 +252,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' },
+        { MeetingName: 'Monaco Grand Prix', CircuitName: 'Monaco', SessionType: 'Race', SessionName: 'Race', Path: '' },
         rows(20),
       ).cutoffPosition,
     ).toBeNull()
     expect(
       liveSessionDisplay(
-        { MeetingName: 'Monaco Grand Prix', CircuitName: 'Monaco', SessionType: 'Qualifying', SessionName: 'Q3' },
+        { MeetingName: 'Monaco Grand Prix', CircuitName: 'Monaco', SessionType: 'Qualifying', SessionName: 'Q3', Path: '' },
         rows(10),
       ).cutoffPosition,
     ).toBeNull()

frontend/src/test/meaning.test.ts

@@ -0,0 +1,71 @@
+import { describe, expect, it } from 'vitest'
+import {
+  INTERVAL_DRS_MAX_SECONDS,
+  INTERVAL_UNDERCUT_MAX_SECONDS,
+  INTERVAL_UNDERCUT_MIN_SECONDS,
+  MAX_POINTS_PER_ROUND,
+  TYRE_CLIFF_LAPS,
+  intervalMeaning,
+  pointsGapMeaning,
+  tyreAgeMeaning,
+} from '../lib/meaning'
+
+describe('intervalMeaning', () => {
+  it('returns DRS range below the threshold', () => {
+    expect(intervalMeaning(0.4)?.caption).toBe('DRS range')
+    expect(intervalMeaning(INTERVAL_DRS_MAX_SECONDS - 0.01)?.caption).toBe('DRS range')
+  })
+
+  it('returns undercut window in the middle band', () => {
+    expect(intervalMeaning(INTERVAL_UNDERCUT_MIN_SECONDS)?.caption).toBe('undercut window')
+    expect(intervalMeaning(2.0)?.caption).toBe('undercut window')
+    expect(intervalMeaning(INTERVAL_UNDERCUT_MAX_SECONDS)?.caption).toBe('undercut window')
+  })
+
+  it('returns null outside known bands', () => {
+    expect(intervalMeaning(INTERVAL_UNDERCUT_MAX_SECONDS + 0.5)).toBeNull()
+    expect(intervalMeaning(10)).toBeNull()
+    expect(intervalMeaning(null)).toBeNull()
+    expect(intervalMeaning(undefined)).toBeNull()
+    expect(intervalMeaning(-1)).toBeNull()
+  })
+})
+
+describe('tyreAgeMeaning', () => {
+  it('labels fresh, mid-life, and laps-to-cliff for SOFT', () => {
+    const cliff = TYRE_CLIFF_LAPS.SOFT
+    expect(tyreAgeMeaning('SOFT', 2)?.caption).toBe('fresh')
+    expect(tyreAgeMeaning('SOFT', Math.ceil(cliff * 0.5))?.caption).toBe('mid-life')
+    expect(tyreAgeMeaning('SOFT', cliff - 2)?.caption).toBe('~2 laps to cliff')
+    expect(tyreAgeMeaning('SOFT', cliff + 5)?.caption).toBe('past cliff')
+  })
+
+  it('handles unknown compounds with defaults', () => {
+    expect(tyreAgeMeaning('UNKNOWN', 3)?.caption).toBe('fresh')
+    expect(tyreAgeMeaning(undefined, 3)?.caption).toBe('fresh')
+  })
+
+  it('returns null for invalid age', () => {
+    expect(tyreAgeMeaning('MEDIUM', null)).toBeNull()
+    expect(tyreAgeMeaning('MEDIUM', -1)).toBeNull()
+  })
+})
+
+describe('pointsGapMeaning', () => {
+  it('computes catchable pts/round', () => {
+    const result = pointsGapMeaning(40, 4, 'VER')
+    expect(result?.caption).toBe('~10 pts/round')
+    expect(result?.title).toContain('VER')
+  })
+
+  it('marks uncatchable gaps', () => {
+    const max = 3 * MAX_POINTS_PER_ROUND
+    expect(pointsGapMeaning(max + 1, 3, 'VER')?.caption).toBe('out of reach')
+  })
+
+  it('returns null for leader or invalid input', () => {
+    expect(pointsGapMeaning(0, 4)).toBeNull()
+    expect(pointsGapMeaning(10, 0)).toBeNull()
+    expect(pointsGapMeaning(null, 4)).toBeNull()
+  })
+})

frontend/src/test/telemetry-trace-chart.test.tsx

@@ -0,0 +1,118 @@
+import { describe, expect, it } from 'vitest'
+import { fireEvent, render, screen } from '@testing-library/react'
+import {
+  TelemetryTraceChart,
+  type TelemetryTraceSeries,
+} from '../components/charts/TelemetryTraceChart'
+
+function makeSeries(label: string, color: string, speeds: number[]): TelemetryTraceSeries {
+  return {
+    label,
+    color,
+    samples: speeds.map((speed, i) => ({
+      speed,
+      throttle: (i * 25) % 101,
+      brake: i % 2 === 0 ? 100 : 0,
+    })),
+  }
+}
+
+const VER = makeSeries('VER', '#2563eb', [280, 310, 190, 90, 240])
+const LEC = makeSeries('LEC', '#dc2626', [275, 305, 200, 95, 235])
+
+describe('TelemetryTraceChart', () => {
+  it('renders one polyline per series per channel', () => {
+    const { container } = render(<TelemetryTraceChart series={[VER, LEC]} />)
+    const lines = container.querySelectorAll('polyline.telemetry-trace-line')
+    expect(lines).toHaveLength(2 * 3)
+    for (const channel of ['speed', 'throttle', 'brake']) {
+      expect(
+        container.querySelectorAll(`polyline.telemetry-trace-line[data-channel="${channel}"]`),
+      ).toHaveLength(2)
+    }
+    expect(
+      container.querySelectorAll('polyline.telemetry-trace-line[data-series="VER"]'),
+    ).toHaveLength(3)
+  })
+
+  it('respects the channels prop', () => {
+    const { container } = render(<TelemetryTraceChart series={[VER]} channels={['speed']} />)
+    expect(container.querySelectorAll('polyline.telemetry-trace-line')).toHaveLength(1)
+    expect(container.querySelectorAll('.telemetry-trace-panel')).toHaveLength(1)
+  })
+
+  it('renders an empty state for no series', () => {
+    render(<TelemetryTraceChart series={[]} />)
+    expect(screen.getByText('No telemetry data')).toBeInTheDocument()
+  })
+
+  it('renders an empty state when a series has no samples', () => {
+    render(<TelemetryTraceChart series={[makeSeries('VER', '#2563eb', [])]} />)
+    expect(screen.getByText('No telemetry data')).toBeInTheDocument()
+  })
+
+  it('survives a single sample and mismatched series lengths', () => {
+    const short = makeSeries('VER', '#2563eb', [300])
+    const long = makeSeries('LEC', '#dc2626', [280, 290, 300])
+    const { container } = render(<TelemetryTraceChart series={[short, long]} />)
+    // Clamped to the shortest series: every polyline has exactly one point.
+    const lines = container.querySelectorAll('polyline.telemetry-trace-line')
+    expect(lines).toHaveLength(6)
+    for (const line of lines) {
+      expect(line.getAttribute('points')!.trim().split(' ')).toHaveLength(1)
+    }
+  })
+
+  it('clamps throttle values to 0-100 within the panel', () => {
+    const wild: TelemetryTraceSeries = {
+      label: 'VER',
+      color: '#2563eb',
+      samples: [
+        { speed: 100, throttle: 150, brake: 0 },
+        { speed: 100, throttle: -20, brake: 0 },
+        { speed: 100, throttle: 50, brake: 0 },
+      ],
+    }
+    const { container } = render(
+      <TelemetryTraceChart series={[wild]} channels={['throttle']} height={110} />,
+    )
+    const line = container.querySelector('polyline.telemetry-trace-line[data-channel="throttle"]')!
+    const ys = line
+      .getAttribute('points')!
+      .split(' ')
+      .map((p) => Number(p.split(',')[1]))
+    // Panel occupies y 0..110 with 6px padding; clamped values pin to the edges.
+    expect(ys[0]).toBeCloseTo(6, 1) // 150% -> 100% -> panel top
+    expect(ys[1]).toBeCloseTo(104, 1) // -20% -> 0% -> panel bottom
+    expect(ys[2]).toBeCloseTo(55, 1) // 50% -> middle
+  })
+
+  it('shows the speed axis max in km/h', () => {
+    render(<TelemetryTraceChart series={[VER]} channels={['speed']} />)
+    expect(screen.getByText('310 km/h')).toBeInTheDocument()
+  })
+
+  it('lists every series in the legend with a color swatch', () => {
+    const { container } = render(<TelemetryTraceChart series={[VER, LEC]} />)
+    const legend = container.querySelector('.telemetry-trace-legend')!
+    expect(legend.textContent).toContain('VER')
+    expect(legend.textContent).toContain('LEC')
+    expect(legend.querySelectorAll('.telemetry-trace-swatch')).toHaveLength(2)
+  })
+
+  it('shows a crosshair and per-driver readout on hover, hides on leave', () => {
+    const { container } = render(<TelemetryTraceChart series={[VER, LEC]} />)
+    const svg = container.querySelector('svg.telemetry-trace-svg')!
+    expect(screen.queryByTestId('telemetry-trace-crosshair')).not.toBeInTheDocument()
+
+    fireEvent.mouseMove(svg, { clientX: 0, clientY: 10 })
+    expect(screen.getByTestId('telemetry-trace-crosshair')).toBeInTheDocument()
+    const readout = screen.getByTestId('telemetry-trace-readout')
+    expect(readout.textContent).toContain('VER')
+    expect(readout.textContent).toContain('LEC')
+    expect(readout.textContent).toContain('km/h')
+
+    fireEvent.mouseLeave(svg)
+    expect(screen.queryByTestId('telemetry-trace-crosshair')).not.toBeInTheDocument()
+  })
+})

frontend/src/test/tyre-stint-timeline.test.tsx

@@ -0,0 +1,149 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { TyreStintTimeline, type StintTimelineRow } from '../components/charts/TyreStintTimeline'
+import { StrategyView } from '../components/StrategyView'
+import type { EnrichedResult, Stint, PitStop } from '../types'
+
+const sampleRows: StintTimelineRow[] = [
+  {
+    label: 'VER',
+    color: '#3671C6',
+    stints: [
+      { compound: 'MEDIUM', lapStart: 1, lapEnd: 30 },
+      { compound: 'SOFT', lapStart: 31, lapEnd: 78 },
+    ],
+  },
+  {
+    label: 'HAM',
+    color: '#E8002D',
+    stints: [{ compound: 'SOFT', lapStart: 1, lapEnd: 18 }],
+  },
+]
+
+describe('TyreStintTimeline', () => {
+  it('renders one rect per stint', () => {
+    const { container } = render(
+      <TyreStintTimeline rows={sampleRows} totalLaps={78} />,
+    )
+    expect(container.querySelectorAll('.stint-timeline__bar')).toHaveLength(3)
+  })
+
+  it('maps compounds to color classes', () => {
+    const { container } = render(
+      <TyreStintTimeline rows={sampleRows} totalLaps={78} />,
+    )
+    const bars = container.querySelectorAll('.stint-timeline__bar')
+    expect(bars[0]).toHaveClass('tyre-medium')
+    expect(bars[1]).toHaveClass('tyre-soft')
+    expect(bars[2]).toHaveClass('tyre-soft')
+  })
+
+  it('shows native title with compound, lap range, and stint length', () => {
+    const { container } = render(
+      <TyreStintTimeline rows={sampleRows} totalLaps={78} />,
+    )
+    const titles = [...container.querySelectorAll('title')].map((t) => t.textContent)
+    expect(titles).toContain('Medium · L1–30 · 30 laps')
+    expect(titles).toContain('Soft · L31–78 · 48 laps')
+    expect(titles).toContain('Soft · L1–18 · 18 laps')
+  })
+
+  it('renders lap-axis ticks every 10 laps', () => {
+    render(<TyreStintTimeline rows={sampleRows} totalLaps={78} />)
+    expect(screen.getByText('0')).toBeInTheDocument()
+    expect(screen.getByText('10')).toBeInTheDocument()
+    expect(screen.getByText('20')).toBeInTheDocument()
+    expect(screen.getByText('70')).toBeInTheDocument()
+  })
+
+  it('shows legend only for used compounds', () => {
+    render(<TyreStintTimeline rows={sampleRows} totalLaps={78} />)
+    expect(screen.getByTestId('legend-soft')).toBeInTheDocument()
+    expect(screen.getByTestId('legend-medium')).toBeInTheDocument()
+    expect(screen.queryByTestId('legend-hard')).not.toBeInTheDocument()
+    expect(screen.queryByTestId('legend-wet')).not.toBeInTheDocument()
+    expect(screen.getByText('Soft')).toBeInTheDocument()
+    expect(screen.getByText('Medium')).toBeInTheDocument()
+  })
+
+  it('renders empty state when rows are empty', () => {
+    render(<TyreStintTimeline rows={[]} totalLaps={50} />)
+    expect(screen.getByTestId('stint-timeline-empty')).toBeInTheDocument()
+    expect(screen.getByText(/No stint data/i)).toBeInTheDocument()
+  })
+})
+
+const results: 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: null,
+    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: null,
+    gap_to_leader: 5.1,
+    number_of_laps: 78,
+    points: 18,
+    session_key: 9472,
+    meeting_key: 1229,
+  },
+]
+
+const stints: Stint[] = [
+  {
+    session_key: 9472,
+    driver_number: 1,
+    meeting_key: 1229,
+    stint_number: 1,
+    compound: 'MEDIUM',
+    lap_start: 1,
+    lap_end: 30,
+    tyre_age_at_start: 0,
+  },
+  {
+    session_key: 9472,
+    driver_number: 44,
+    meeting_key: 1229,
+    stint_number: 1,
+    compound: 'SOFT',
+    lap_start: 1,
+    lap_end: 18,
+    tyre_age_at_start: 0,
+  },
+]
+
+const pitStops: PitStop[] = []
+
+describe('StrategyView integration', () => {
+  it('renders timeline when stints exist', () => {
+    const { container } = render(
+      <StrategyView results={results} stints={stints} pit_stops={pitStops} hasStints={true} />,
+    )
+    expect(container.querySelector('[data-testid="strategy-chart"]')).toBeInTheDocument()
+    expect(screen.getByTestId('stint-timeline')).toBeInTheDocument()
+    expect(screen.getByText('VER')).toBeInTheDocument()
+    expect(screen.getByText('HAM')).toBeInTheDocument()
+    expect(container.querySelectorAll('.stint-timeline__bar')).toHaveLength(2)
+  })
+})

frontend/src/test/tyredeg.test.ts

@@ -0,0 +1,281 @@
+import { describe, expect, it } from 'vitest'
+import {
+  DEG_SLOPE_THRESHOLD,
+  MIN_CLEAN_LAPS,
+  PIT_LOSS_SECONDS,
+  cleanStintSamples,
+  degradationModel,
+  estimatePitRejoin,
+  formatSlope,
+  parseLapTimeSeconds,
+  recordStintSamples,
+  stintInputFromRow,
+} from '../lib/tyredeg'
+import type { StintHistoryMap, StintLapInput, StintSample } from '../lib/tyredeg'
+import type { LiveTimingRow } from '../lib/live'
+import type { LiveDriverData } from '../types'
+
+function makeInput(overrides: Partial<StintLapInput> = {}): StintLapInput {
+  return {
+    racingNumber: '1',
+    lapNumber: 1,
+    lastLapTime: '1:30.000',
+    compound: 'MEDIUM',
+    tyreAge: 1,
+    inPit: false,
+    pitOut: false,
+    ...overrides,
+  }
+}
+
+/** Feed a sequence of snapshots for one driver through the accumulator. */
+function accumulate(snapshots: Array<Partial<StintLapInput>>): StintHistoryMap {
+  let history: StintHistoryMap = {}
+  for (const snapshot of snapshots) {
+    history = recordStintSamples(history, [makeInput(snapshot)])
+  }
+  return history
+}
+
+function makeRow(
+  number: string,
+  position: number,
+  tla: string,
+  driver: Partial<LiveDriverData> = {},
+): LiveTimingRow {
+  return {
+    RacingNumber: number,
+    Position: position,
+    Driver: {
+      RacingNumber: number,
+      Position: position,
+      Interval: '',
+      GapToLeader: '',
+      LastLapTime: '1:30.000',
+      NumberOfLaps: 10,
+      InPit: false,
+      PitOut: false,
+      Retired: false,
+      ...driver,
+    } as LiveDriverData,
+    Info: {
+      RacingNumber: number,
+      BroadcastName: '',
+      Tla: tla,
+      TeamName: '',
+      TeamColour: '3671c6',
+      FirstName: '',
+      LastName: '',
+    },
+  }
+}
+
+describe('parseLapTimeSeconds', () => {
+  it('parses minute-form and plain-second lap times', () => {
+    expect(parseLapTimeSeconds('1:23.456')).toBeCloseTo(83.456)
+    expect(parseLapTimeSeconds('83.456')).toBeCloseTo(83.456)
+  })
+
+  it('rejects empty, garbage, and non-positive values', () => {
+    expect(parseLapTimeSeconds('')).toBeNull()
+    expect(parseLapTimeSeconds(undefined)).toBeNull()
+    expect(parseLapTimeSeconds(null)).toBeNull()
+    expect(parseLapTimeSeconds('LAP 12')).toBeNull()
+    expect(parseLapTimeSeconds('-1:30.000')).toBeNull()
+  })
+})
+
+describe('recordStintSamples', () => {
+  it('accumulates one sample per completed lap across snapshots', () => {
+    const history = accumulate([
+      { lapNumber: 1, lastLapTime: '1:30.000' },
+      { lapNumber: 2, lastLapTime: '1:30.100' },
+      { lapNumber: 2, lastLapTime: '1:30.100' }, // repeated snapshot, same lap
+      { lapNumber: 3, lastLapTime: '1:30.200' },
+    ])
+    expect(history['1'].samples).toEqual([
+      { lap: 2, seconds: 90.1 },
+      { lap: 3, seconds: 90.2 },
+    ])
+  })
+
+  it('does not record a lap from the very first snapshot seen', () => {
+    const history = accumulate([{ lapNumber: 5, lastLapTime: '1:29.000' }])
+    expect(history['1'].samples).toEqual([])
+  })
+
+  it('replaces (not duplicates) a sample when the lap time is corrected', () => {
+    const history = accumulate([
+      { lapNumber: 1, lastLapTime: '1:30.000' },
+      { lapNumber: 2, lastLapTime: '1:30.500' },
+      { lapNumber: 2, lastLapTime: '1:30.400' }, // late correction for lap 2
+    ])
+    expect(history['1'].samples).toEqual([{ lap: 2, seconds: 90.4 }])
+  })
+
+  it('resets the stint on compound change and skips the next lap', () => {
+    const history = accumulate([
+      { lapNumber: 1, lastLapTime: '1:30.000', compound: 'SOFT', tyreAge: 1 },
+      { lapNumber: 2, lastLapTime: '1:30.100', compound: 'SOFT', tyreAge: 2 },
+      { lapNumber: 3, lastLapTime: '1:30.200', compound: 'SOFT', tyreAge: 3 },
+      // Boxed for hards: old samples dropped, out-lap (lap 4) excluded.
+      { lapNumber: 4, lastLapTime: '1:52.000', compound: 'HARD', tyreAge: 0 },
+      { lapNumber: 5, lastLapTime: '1:31.000', compound: 'HARD', tyreAge: 1 },
+      { lapNumber: 6, lastLapTime: '1:31.100', compound: 'HARD', tyreAge: 2 },
+    ])
+    expect(history['1'].samples).toEqual([
+      { lap: 5, seconds: 91.0 },
+      { lap: 6, seconds: 91.1 },
+    ])
+  })
+
+  it('resets on a fresh set of the same compound (tyre age drops)', () => {
+    const history = accumulate([
+      { lapNumber: 1, lastLapTime: '1:30.000', tyreAge: 10 },
+      { lapNumber: 2, lastLapTime: '1:30.100', tyreAge: 11 },
+      { lapNumber: 3, lastLapTime: '1:50.000', tyreAge: 0 }, // new mediums
+      { lapNumber: 4, lastLapTime: '1:30.500', tyreAge: 1 },
+    ])
+    expect(history['1'].samples).toEqual([{ lap: 4, seconds: 90.5 }])
+  })
+
+  it('excludes laps completed in the pit lane or on pit exit', () => {
+    const history = accumulate([
+      { lapNumber: 1, lastLapTime: '1:30.000' },
+      { lapNumber: 2, lastLapTime: '1:30.100' },
+      { lapNumber: 3, lastLapTime: '1:48.000', inPit: true }, // in-lap
+      { lapNumber: 4, lastLapTime: '1:45.000', pitOut: true, tyreAge: 0 }, // out-lap
+      { lapNumber: 5, lastLapTime: '1:30.300', tyreAge: 1 },
+    ])
+    expect(history['1'].samples).toEqual([{ lap: 5, seconds: 90.3 }])
+  })
+
+  it('prunes drivers missing from the snapshot and does not mutate input', () => {
+    const initial = accumulate([
+      { lapNumber: 1, lastLapTime: '1:30.000' },
+      { lapNumber: 2, lastLapTime: '1:30.100' },
+    ])
+    const next = recordStintSamples(initial, [makeInput({ racingNumber: '44' })])
+    expect(next['1']).toBeUndefined()
+    expect(next['44']).toBeDefined()
+    expect(initial['1'].samples).toHaveLength(1)
+  })
+})
+
+describe('degradationModel', () => {
+  const series = (times: number[], startLap = 1): StintSample[] =>
+    times.map((seconds, index) => ({ lap: startLap + index, seconds }))
+
+  it('fits the slope of a known linear series', () => {
+    const model = degradationModel(series([90.0, 90.1, 90.2, 90.3, 90.4]))
+    expect(model).not.toBeNull()
+    expect(model!.slope).toBeCloseTo(0.1, 5)
+    expect(model!.trend).toBe('degrading')
+  })
+
+  it('classifies improving and stable stints', () => {
+    expect(degradationModel(series([91.0, 90.8, 90.6, 90.4]))!.trend).toBe('improving')
+    expect(degradationModel(series([90.0, 90.01, 90.0, 90.02, 90.01]))!.trend).toBe('stable')
+    // A slope clearly under the threshold stays stable.
+    expect(DEG_SLOPE_THRESHOLD).toBeGreaterThan(0.03)
+    expect(degradationModel(series([90.0, 90.03, 90.06, 90.09, 90.12]))!.trend).toBe('stable')
+  })
+
+  it('excludes outliers more than ~5s off the stint median', () => {
+    // Clean laps follow +0.1s/lap; the 97.5 (traffic/spin) must not skew the fit.
+    const samples = series([90.0, 90.1, 97.5, 90.3, 90.4, 90.5])
+    expect(cleanStintSamples(samples)).toHaveLength(5)
+    const model = degradationModel(samples)
+    expect(model!.samples).toHaveLength(5)
+    expect(model!.slope).toBeCloseTo(0.1, 5)
+  })
+
+  it('returns null with fewer than MIN_CLEAN_LAPS clean laps', () => {
+    expect(degradationModel(series([90.0, 90.1, 90.2]))).toBeNull()
+    // 4 raw laps but one outlier -> only 3 clean -> still warming up
+    expect(degradationModel(series([90.0, 90.1, 90.2, 99.0]))).toBeNull()
+    expect(MIN_CLEAN_LAPS).toBe(4)
+  })
+})
+
+describe('formatSlope', () => {
+  it('renders signed seconds-per-lap', () => {
+    expect(formatSlope(0.083)).toBe('+0.08s/lap')
+    expect(formatSlope(-0.125)).toBe('−0.13s/lap')
+  })
+})
+
+describe('estimatePitRejoin', () => {
+  const ladder = [
+    makeRow('1', 1, 'VER'),
+    makeRow('4', 2, 'NOR', { Interval: '+5.0' }),
+    makeRow('44', 3, 'HAM', { Interval: '+10.0' }),
+    makeRow('14', 4, 'ALO', { Interval: '+15.0' }),
+    makeRow('16', 5, 'LEC', { Interval: '+20.0' }),
+  ]
+
+  it('projects the rejoin slot between the right cars', () => {
+    // VER pits from P1: NOR (5s) and HAM (15s cumulative) get past;
+    // ALO would be 30s back -> stays behind. Rejoin ~P3.
+    const estimate = estimatePitRejoin(ladder, '1')
+    expect(estimate).toEqual({
+      rejoinPosition: 3,
+      positionsLost: 2,
+      aheadCode: 'HAM',
+      behindCode: 'ALO',
+    })
+  })
+
+  it('keeps position when the cars behind are further than the pit loss', () => {
+    const estimate = estimatePitRejoin(ladder, '14')
+    // LEC is 20s behind ALO — inside the 22s window, so he gets past.
+    expect(estimate!.rejoinPosition).toBe(5)
+    expect(estimate!.aheadCode).toBe('LEC')
+    expect(estimate!.behindCode).toBeNull()
+
+    const wide = estimatePitRejoin(
+      [makeRow('1', 1, 'VER'), makeRow('4', 2, 'NOR', { Interval: `+${PIT_LOSS_SECONDS + 3}.0` })],
+      '1',
+    )
+    expect(wide!.rejoinPosition).toBe(1)
+    expect(wide!.positionsLost).toBe(0)
+    expect(wide!.behindCode).toBe('NOR')
+  })
+
+  it('stops the ladder walk at lapped cars and skips pitted/retired ones', () => {
+    const estimate = estimatePitRejoin(
+      [
+        makeRow('1', 1, 'VER'),
+        makeRow('4', 2, 'NOR', { Interval: '+5.0', InPit: true }), // mid-stop, excluded
+        makeRow('44', 3, 'HAM', { Interval: '+10.0' }),
+        makeRow('16', 4, 'LEC', { Interval: '1L' }), // lapped — walk ends here
+        makeRow('14', 5, 'ALO', { Interval: '+2.0' }),
+      ],
+      '1',
+    )
+    expect(estimate!.positionsLost).toBe(1) // only HAM gets past
+    expect(estimate!.rejoinPosition).toBe(2)
+    expect(estimate!.aheadCode).toBe('HAM')
+    expect(estimate!.behindCode).toBe('LEC')
+  })
+
+  it('returns null for unknown drivers', () => {
+    expect(estimatePitRejoin(ladder, '99')).toBeNull()
+  })
+})
+
+describe('stintInputFromRow', () => {
+  it('maps tower rows into accumulator inputs', () => {
+    const row = makeRow('4', 2, 'NOR', { NumberOfLaps: 12, LastLapTime: '1:29.900' })
+    row.Tyre = { Compound: 'HARD', New: false, Age: 7 }
+    expect(stintInputFromRow(row)).toEqual({
+      racingNumber: '4',
+      lapNumber: 12,
+      lastLapTime: '1:29.900',
+      compound: 'HARD',
+      tyreAge: 7,
+      inPit: false,
+      pitOut: false,
+    })
+  })
+})

frontend/src/types.ts

@@ -158,6 +158,37 @@ export interface Lap {
   is_pit_out_lap: boolean
 }
 
+export interface CarDataSample {
+  brake: number
+  date: string
+  driver_number: number
+  drs: number
+  meeting_key: number
+  n_gear: number
+  rpm: number
+  session_key: number
+  speed: number
+  throttle: number
+}
+
+export interface ComparisonLap extends Lap {
+  compound?: string
+}
+
+export interface ComparisonDriver {
+  driver_number: number
+  name_acronym: string
+  team_colour: string
+  laps: ComparisonLap[]
+}
+
+export interface LapsComparisonResponse {
+  session_key: number
+  sc_periods: unknown[]
+  pit_laps: Record<string, number[]>
+  drivers: ComparisonDriver[]
+}
+
 export interface WeekendSession {
   session: Session
   source: 'local' | 'partial' | 'none' | 'cancelled'
@@ -261,6 +292,7 @@ export interface LiveSessionMeta {
   CircuitName: string
   SessionType: string
   SessionName: string
+  Path: string
 }
 
 export interface LiveStintData {
@@ -269,6 +301,12 @@ 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>
@@ -277,6 +315,7 @@ export interface LiveStreamData {
   RCMessages: LiveRCMessage[]
   Weather: LiveWeatherData
   Session: LiveSessionMeta
+  TeamRadio: LiveRadioCapture[]
   TrackStatus: string
   CurrentLap: number
   TotalLaps: number

internal/live/parser_test.go

@@ -5,6 +5,7 @@ import (
 	"compress/flate"
 	"encoding/base64"
 	"encoding/json"
+	"fmt"
 	"testing"
 	"time"
 
@@ -211,12 +212,16 @@ func TestProcessTopicSessionInfoCircuitName(t *testing.T) {
 	state.ProcessTopic("SessionInfo", json.RawMessage(`{
 		"Meeting": {"Name": "British Grand Prix", "Circuit": {"ShortName": "Silverstone"}},
 		"Name": "Race",
-		"Type": "Race"
+		"Type": "Race",
+		"Path": "2026/2026-07-05_British_Grand_Prix/2026-07-05_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) {
@@ -285,6 +290,68 @@ 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(`{

internal/live/signalr.go

@@ -105,6 +105,7 @@ func connectToF1SignalRCore(dataChan chan LiveStreamData) error {
 		"RaceControlMessages",
 		"WeatherData",
 		"SessionInfo",
+		"TeamRadio",
 		"CurrentTyres",
 		"TimingAppData",
 		"TimingStats",
@@ -196,7 +197,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","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","TeamRadio","CurrentTyres","TimingAppData","TimingStats"]],"I":1}`)
 	err = c.WriteMessage(websocket.TextMessage, subscribeMsg)
 	if err != nil {
 		return err

internal/live/state.go

@@ -8,6 +8,8 @@ import (
 	"encoding/json"
 	"fmt"
 	"io"
+	"log"
+	"sort"
 	"strings"
 	"time"
 )
@@ -23,6 +25,7 @@ type State struct {
 	RCMessages         []LiveRCMessage
 	Weather            LiveWeatherData
 	Session            LiveSessionMeta
+	TeamRadio          []LiveRadioCapture
 	TrackStatus        string
 	CurrentLap         int
 	TotalLaps          int
@@ -34,6 +37,7 @@ type State struct {
 }
 
 const signalRRecordSeparator = byte(0x1e)
+const maxTeamRadioCaptures = 20
 
 // NewState returns an empty live timing accumulator.
 func NewState() *State {
@@ -71,6 +75,8 @@ 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))
@@ -86,6 +92,7 @@ func (s *State) Snapshot() LiveStreamData {
 		RCMessages:         cpyRC,
 		Weather:            s.Weather,
 		Session:            s.Session,
+		TeamRadio:          cpyRadio,
 		TrackStatus:        s.TrackStatus,
 		CurrentLap:         s.CurrentLap,
 		TotalLaps:          s.TotalLaps,
@@ -335,6 +342,7 @@ 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 != "" {
@@ -349,8 +357,13 @@ 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 {
@@ -483,6 +496,62 @@ 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"`
@@ -799,6 +868,9 @@ 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
 	}
 

internal/live/types.go

@@ -85,6 +85,7 @@ type LiveSessionMeta struct {
 	CircuitName string
 	SessionType string
 	SessionName string
+	Path        string
 }
 
 // LivePositionData is the latest raw F1 GPS position for one driver.
@@ -144,6 +145,13 @@ 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
@@ -153,6 +161,7 @@ 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

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 expect(page.getByTestId('hero-last-race-link')).toBeVisible()
-    await page.getByTestId('cc-action-race-hub').click()
+    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()