Merge remote-tracking branch 'origin/phase-1' into feat/issue-13-live-tyre-degradation-pit-window-panel

Session-aware Command Center hero (#14)

.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
-  # --new-project is required for --model to take effect (otherwise agy resumes the
-  # previous conversation and silently keeps its old model).
+harness_agy() {                         # Antigravity CLI — UNRELIABLE headless (2026-07): with
+  # --new-project it ignores the prompt and asks to scaffold a project; without it, it
+  # 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/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/StrategyView.tsx

@@ -1,28 +1,9 @@
 import type { EnrichedResult, Stint, PitStop } from '../types'
 import { compareFinishPosition } from '../utils'
-
-const COMPOUND_COLORS: Record<string, string> = {
-  SOFT: '#e8002d',
-  MEDIUM: '#ffd600',
-  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] ?? '?'
-}
+import {
+  TyreStintTimeline,
+  type StintTimelineRow,
+} from './charts/TyreStintTimeline'
 
 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 LEFT = 48
-  const RIGHT = 12
-  const ROW_H = 28
-  const BAR_H = 14
-  const BAR_Y = 7
-  const BAR_W = SVG_W - LEFT - RIGHT
-  const SVG_H = sortedDrivers.length * ROW_H + 8
-
-  const lapX = (lap: number) => LEFT + ((lap - 1) / totalLaps) * BAR_W
-  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
-  )
+  const timelineRows: StintTimelineRow[] = sortedDrivers.map((driver) => ({
+    label: driver.name_acronym || String(driver.driver_number),
+    color: driver.team_colour ? `#${driver.team_colour}` : '#888',
+    stints: stints
+      .filter((s) => s.driver_number === driver.driver_number)
+      .map((s) => ({
+        compound: s.compound,
+        lapStart: s.lap_start,
+        lapEnd: s.lap_end,
+        isNew: s.tyre_age_at_start === 0,
+      })),
+  }))
 
   return (
     <div data-testid="strategy-chart">
-      <div className="scroll-x">
-        <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>
+      <TyreStintTimeline rows={timelineRows} totalLaps={totalLaps} />
     </div>
   )
 }

frontend/src/components/charts/DeltaTimeGraph.tsx

@@ -0,0 +1,282 @@
+import { useCallback, useMemo, useRef, useState } from 'react'
+import {
+  computeCumulativeDeltas,
+  deltaPolylineSegments,
+  formatDeltaSeconds,
+  type DeltaSeries,
+  type DriverDeltaResult,
+} from '../../lib/delta'
+import '../../styles/delta-graph.css'
+
+export type { DeltaSeries }
+
+export interface DeltaTimeGraphProps {
+  series: DeltaSeries[]
+  referenceLabel?: string
+}
+
+const W = 640
+const H = 220
+const PL = 44
+const PR = 16
+const PT = 12
+const PB = 28
+
+function lapCount(series: ReadonlyArray<DeltaSeries>): number {
+  return series.reduce((max, s) => Math.max(max, s.lapTimes.length), 0)
+}
+
+function yExtent(drivers: ReadonlyArray<DriverDeltaResult>): { min: number; max: number } {
+  let min = 0
+  let max = 0
+  for (const driver of drivers) {
+    for (const delta of driver.deltas) {
+      if (delta === null) continue
+      min = Math.min(min, delta)
+      max = Math.max(max, delta)
+    }
+  }
+  if (min === max) {
+    const pad = 1
+    return { min: min - pad, max: max + pad }
+  }
+  const span = max - min
+  const pad = span * 0.08
+  return { min: min - pad, max: max + pad }
+}
+
+function niceYTicks(min: number, max: number): number[] {
+  const span = max - min
+  if (span <= 0) return [0]
+  const rough = span / 4
+  const magnitude = Math.pow(10, Math.floor(Math.log10(rough)))
+  const step = Math.ceil(rough / magnitude) * magnitude
+  const ticks: number[] = []
+  const start = Math.ceil(min / step) * step
+  for (let v = start; v <= max + step * 0.01; v += step) {
+    ticks.push(Number(v.toFixed(6)))
+  }
+  if (!ticks.some((t) => Math.abs(t) < step * 0.01)) {
+    ticks.push(0)
+    ticks.sort((a, b) => a - b)
+  }
+  return ticks
+}
+
+export function DeltaTimeGraph({ series, referenceLabel }: DeltaTimeGraphProps) {
+  const svgRef = useRef<SVGSVGElement>(null)
+  const [hoverLap, setHoverLap] = useState<number | null>(null)
+
+  const drivers = useMemo(
+    () => computeCumulativeDeltas(series, referenceLabel),
+    [series, referenceLabel],
+  )
+
+  const laps = useMemo(() => lapCount(series), [series])
+  const plotW = W - PL - PR
+  const plotH = H - PT - PB
+  const { min: yMin, max: yMax } = useMemo(() => yExtent(drivers), [drivers])
+  const yTicks = useMemo(() => niceYTicks(yMin, yMax), [yMin, yMax])
+
+  const toX = useCallback(
+    (lapIndex: number) => {
+      if (laps <= 1) return PL + plotW / 2
+      return PL + (lapIndex / (laps - 1)) * plotW
+    },
+    [laps, plotW],
+  )
+
+  const toY = useCallback(
+    (delta: number) => {
+      const span = yMax - yMin || 1
+      return PT + ((delta - yMin) / span) * plotH
+    },
+    [yMin, yMax, plotH],
+  )
+
+  const lapTickNumbers = useMemo(() => {
+    const ticks: number[] = []
+    for (let lap = 5; lap <= laps; lap += 5) {
+      ticks.push(lap)
+    }
+    return ticks
+  }, [laps])
+
+  const handlePointerMove = useCallback(
+    (e: React.PointerEvent<SVGRectElement> | React.MouseEvent<SVGRectElement>) => {
+      if (!svgRef.current || laps === 0) return
+      const rect = svgRef.current.getBoundingClientRect()
+      if (rect.width <= 0) return
+      const x = ((e.clientX - rect.left) / rect.width) * W
+      const frac = Math.max(0, Math.min(1, (x - PL) / plotW))
+      const lapIndex = laps <= 1 ? 0 : Math.round(frac * (laps - 1))
+      if (!Number.isFinite(lapIndex)) return
+      setHoverLap(Math.max(0, Math.min(laps - 1, lapIndex)))
+    },
+    [laps, plotW],
+  )
+
+  const handlePointerLeave = useCallback(() => setHoverLap(null), [])
+
+  if (series.length === 0 || laps === 0) {
+    return (
+      <div className="delta-graph" data-testid="delta-time-graph-empty">
+        <p className="delta-graph-empty">No lap data to compare.</p>
+      </div>
+    )
+  }
+
+  if (drivers.length === 0) {
+    return (
+      <div className="delta-graph" data-testid="delta-time-graph-empty">
+        <p className="delta-graph-empty">Select at least two drivers to compare.</p>
+      </div>
+    )
+  }
+
+  const hoverX = hoverLap !== null ? toX(hoverLap) : null
+  const tooltipRows = hoverLap !== null
+    ? drivers
+        .map((d) => {
+          const delta = d.deltas[hoverLap]
+          if (delta == null) return null
+          return { label: d.label, color: d.color, delta }
+        })
+        .filter((row): row is { label: string; color: string; delta: number } => row !== null)
+    : []
+
+  const tooltipH = 18 + tooltipRows.length * 14
+  const tooltipW = 120
+  const tooltipX = hoverX !== null ? Math.min(Math.max(hoverX + 8, PL), W - PR - tooltipW) : 0
+  const tooltipY = PT
+
+  return (
+    <div className="delta-graph" data-testid="delta-time-graph">
+      <svg
+        ref={svgRef}
+        className="delta-graph-svg"
+        viewBox={`0 0 ${W} ${H}`}
+        role="img"
+        aria-label="Cumulative delta time chart"
+      >
+        {yTicks.map((tick) => (
+          <g key={`y-${tick}`}>
+            <line
+              x1={PL}
+              x2={W - PR}
+              y1={toY(tick)}
+              y2={toY(tick)}
+              className={Math.abs(tick) < 1e-9 ? 'delta-graph-zero-line' : 'delta-graph-grid-line'}
+              data-testid={Math.abs(tick) < 1e-9 ? 'delta-zero-line' : undefined}
+            />
+            <text
+              x={PL - 6}
+              y={toY(tick) + 3}
+              textAnchor="end"
+              className="delta-graph-axis-label"
+            >
+              {formatDeltaSeconds(tick)}
+            </text>
+          </g>
+        ))}
+
+        {lapTickNumbers.map((lap) => {
+          const x = toX(lap - 1)
+          return (
+            <g key={`lap-${lap}`}>
+              <line
+                x1={x}
+                x2={x}
+                y1={H - PB}
+                y2={H - PB + 4}
+                className="delta-graph-grid-line"
+              />
+              <text
+                x={x}
+                y={H - PB + 16}
+                textAnchor="middle"
+                className="delta-graph-axis-label"
+              >
+                {lap}
+              </text>
+            </g>
+          )
+        })}
+
+        {drivers.map((driver) => {
+          const segments = deltaPolylineSegments(driver.deltas, (lapIndex, delta) =>
+            `${toX(lapIndex).toFixed(1)},${toY(delta).toFixed(1)}`,
+          )
+          return (
+            <g key={driver.label} data-testid={`delta-line-${driver.label}`}>
+              {segments.map((points, i) => (
+                <polyline
+                  key={`${driver.label}-${i}`}
+                  points={points}
+                  className="delta-graph-driver-line"
+                  stroke={driver.color}
+                />
+              ))}
+            </g>
+          )
+        })}
+
+        {hoverX !== null && (
+          <>
+            <line
+              x1={hoverX}
+              x2={hoverX}
+              y1={PT}
+              y2={H - PB}
+              className="delta-graph-crosshair"
+              data-testid="delta-crosshair"
+            />
+            {tooltipRows.length > 0 && (
+              <g className="delta-graph-tooltip" data-testid="delta-tooltip">
+                <rect
+                  x={tooltipX}
+                  y={tooltipY}
+                  width={tooltipW}
+                  height={tooltipH}
+                  rx={4}
+                  className="delta-graph-tooltip-bg"
+                />
+                <text
+                  x={tooltipX + 8}
+                  y={tooltipY + 14}
+                  className="delta-graph-tooltip-title"
+                >
+                  Lap {hoverLap! + 1}
+                </text>
+                {tooltipRows.map((row, i) => (
+                  <text
+                    key={row.label}
+                    x={tooltipX + 8}
+                    y={tooltipY + 28 + i * 14}
+                    className="delta-graph-tooltip-row"
+                    fill={row.color}
+                  >
+                    {row.label} {formatDeltaSeconds(row.delta)}
+                  </text>
+                ))}
+              </g>
+            )}
+          </>
+        )}
+
+        <rect
+          x={PL}
+          y={PT}
+          width={plotW}
+          height={plotH}
+          fill="transparent"
+          className="delta-graph-hover-layer"
+          onPointerMove={handlePointerMove}
+          onMouseMove={handlePointerMove}
+          onPointerLeave={handlePointerLeave}
+          onMouseLeave={handlePointerLeave}
+        />
+      </svg>
+    </div>
+  )
+}

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/TyreDegPanel.tsx

@@ -0,0 +1,130 @@
+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 '../../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
+            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)}`}>{tyreLabel(row.Tyre)}</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/delta.ts

@@ -0,0 +1,112 @@
+// Cumulative lap-time delta math for driver comparison charts.
+// Pure functions only — no React — so everything is unit-testable.
+
+export interface DeltaSeries {
+  label: string
+  color: string
+  /** Lap duration in seconds; null = no time (pit/out lap). */
+  lapTimes: (number | null)[]
+}
+
+export interface DriverDeltaResult {
+  label: string
+  color: string
+  /** Cumulative delta vs reference (seconds); null when that lap has no time. */
+  deltas: (number | null)[]
+}
+
+/** Format a delta value for axis labels and tooltips (e.g. "+2.5s", "-1.2s"). */
+export function formatDeltaSeconds(delta: number): string {
+  const sign = delta >= 0 ? '+' : ''
+  return `${sign}${delta.toFixed(1)}s`
+}
+
+function buildCumulative(lapTimes: ReadonlyArray<number | null>): number[] {
+  const cumulative: number[] = []
+  let running = 0
+  for (const lap of lapTimes) {
+    if (lap !== null) {
+      running += lap
+    }
+    cumulative.push(running)
+  }
+  return cumulative
+}
+
+function resolveReference(
+  series: ReadonlyArray<DeltaSeries>,
+  referenceLabel?: string,
+): DeltaSeries | null {
+  if (series.length === 0) return null
+  if (referenceLabel) {
+    return series.find((s) => s.label === referenceLabel) ?? series[0]
+  }
+  return series[0]
+}
+
+/**
+ * Compute per-lap cumulative time delta for each non-reference driver.
+ * Positive = behind reference; negative = ahead.
+ * Null laps carry cumulative forward but emit null in deltas (skip when plotting).
+ */
+export function computeCumulativeDeltas(
+  series: ReadonlyArray<DeltaSeries>,
+  referenceLabel?: string,
+): DriverDeltaResult[] {
+  const reference = resolveReference(series, referenceLabel)
+  if (!reference) return []
+
+  const refCumulative = buildCumulative(reference.lapTimes)
+
+  return series
+    .filter((s) => s.label !== reference.label)
+    .map((driver) => {
+      const driverCumulative = buildCumulative(driver.lapTimes)
+      const lapCount = Math.max(driver.lapTimes.length, refCumulative.length)
+      const deltas: (number | null)[] = []
+
+      for (let i = 0; i < lapCount; i++) {
+        if (driver.lapTimes[i] === null) {
+          deltas.push(null)
+          continue
+        }
+        const refValue = refCumulative[i] ?? refCumulative[refCumulative.length - 1] ?? 0
+        const driverValue =
+          driverCumulative[i] ?? driverCumulative[driverCumulative.length - 1] ?? 0
+        deltas.push(driverValue - refValue)
+      }
+
+      return {
+        label: driver.label,
+        color: driver.color,
+        deltas,
+      }
+    })
+}
+
+/** Split delta samples into contiguous SVG polyline point strings (gaps at null laps). */
+export function deltaPolylineSegments(
+  deltas: ReadonlyArray<number | null>,
+  toPoint: (lapIndex: number, delta: number) => string,
+): string[] {
+  const segments: string[] = []
+  let current: string[] = []
+
+  for (let i = 0; i < deltas.length; i++) {
+    const value = deltas[i]
+    if (value === null) {
+      if (current.length > 0) {
+        segments.push(current.join(' '))
+        current = []
+      }
+      continue
+    }
+    current.push(toPoint(i, value))
+  }
+
+  if (current.length > 0) {
+    segments.push(current.join(' '))
+  }
+
+  return segments
+}

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/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/CommandCenterPage.tsx

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

frontend/src/pages/LiveTimingPage.tsx

@@ -23,6 +23,7 @@ import { PinnedDrivers } from '../components/live/PinnedDrivers'
 import { RaceControlFeed } from '../components/live/RaceControlFeed'
 import { TeamRadioTicker } from '../components/live/TeamRadioTicker'
 import { TrackMap } from '../components/live/TrackMap'
+import { TyreDegPanel } from '../components/live/TyreDegPanel'
 import { Radio } from 'lucide-react'
 
 type StreamStatus = 'connecting' | 'connected' | 'disconnected' | 'error'
@@ -194,6 +195,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">

frontend/src/styles/delta-graph.css

@@ -0,0 +1,76 @@
+.delta-graph {
+  width: 100%;
+  min-width: 280px;
+  max-width: 640px;
+}
+
+.delta-graph-svg {
+  display: block;
+  width: 100%;
+}
+
+.delta-graph-empty {
+  padding: 1.5rem 1rem;
+  text-align: center;
+  color: var(--text-3);
+  font-size: 0.875rem;
+}
+
+.delta-graph-zero-line {
+  stroke: var(--text-3);
+  stroke-width: 1;
+  stroke-dasharray: 4 3;
+}
+
+.delta-graph-grid-line {
+  stroke: var(--border);
+  stroke-width: 0.5;
+}
+
+.delta-graph-axis-label {
+  fill: var(--text-3);
+  font-family: var(--f-mono);
+  font-size: 9px;
+}
+
+.delta-graph-driver-line {
+  fill: none;
+  stroke-width: 2;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+}
+
+.delta-graph-crosshair {
+  stroke: var(--text-2);
+  stroke-width: 1;
+  stroke-dasharray: 3 3;
+  pointer-events: none;
+}
+
+.delta-graph-hover-layer {
+  cursor: crosshair;
+  touch-action: none;
+}
+
+.delta-graph-tooltip {
+  pointer-events: none;
+}
+
+.delta-graph-tooltip-bg {
+  fill: var(--bg-elevated, var(--bg));
+  stroke: var(--border);
+  stroke-width: 1;
+}
+
+.delta-graph-tooltip-title {
+  fill: var(--text-1);
+  font-family: var(--f-mono);
+  font-size: 10px;
+  font-weight: 600;
+}
+
+.delta-graph-tooltip-row {
+  fill: var(--text-2);
+  font-family: var(--f-mono);
+  font-size: 9px;
+}

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

@@ -0,0 +1,99 @@
+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('warming up')
+  })
+
+  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/delta-time-graph.test.tsx

@@ -0,0 +1,121 @@
+import { describe, expect, it, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { DeltaTimeGraph } from '../components/charts/DeltaTimeGraph'
+import {
+  computeCumulativeDeltas,
+  deltaPolylineSegments,
+  formatDeltaSeconds,
+  type DeltaSeries,
+} from '../lib/delta'
+
+const reference: DeltaSeries = {
+  label: 'VER',
+  color: '#3671C6',
+  lapTimes: [90, 91, 92],
+}
+
+const challenger: DeltaSeries = {
+  label: 'HAM',
+  color: '#E8002D',
+  lapTimes: [89, 92, 90],
+}
+
+describe('formatDeltaSeconds', () => {
+  it('formats signed deltas with one decimal and s suffix', () => {
+    expect(formatDeltaSeconds(2.5)).toBe('+2.5s')
+    expect(formatDeltaSeconds(-1.2)).toBe('-1.2s')
+    expect(formatDeltaSeconds(0)).toBe('+0.0s')
+  })
+})
+
+describe('computeCumulativeDeltas', () => {
+  it('computes cumulative delta vs the first series by default', () => {
+    const result = computeCumulativeDeltas([reference, challenger])
+    expect(result).toHaveLength(1)
+    expect(result[0].label).toBe('HAM')
+    // Lap 1: 89-90=-1, Lap 2: (89+92)-(90+91)=0, Lap 3: (89+92+90)-(90+91+92)=-2
+    expect(result[0].deltas[0]).toBeCloseTo(-1)
+    expect(result[0].deltas[1]).toBeCloseTo(0)
+    expect(result[0].deltas[2]).toBeCloseTo(-2)
+  })
+
+  it('respects an explicit reference label', () => {
+    const result = computeCumulativeDeltas([reference, challenger], 'HAM')
+    expect(result).toHaveLength(1)
+    expect(result[0].label).toBe('VER')
+    expect(result[0].deltas[0]).toBeCloseTo(1)
+    expect(result[0].deltas[2]).toBeCloseTo(2)
+  })
+
+  it('emits null for missing lap times while carrying cumulative forward', () => {
+    const withNull: DeltaSeries = {
+      label: 'NOR',
+      color: '#FF8000',
+      lapTimes: [88, null, 93],
+    }
+    const result = computeCumulativeDeltas([reference, withNull])
+    expect(result[0].deltas[0]).toBeCloseTo(-2)
+    expect(result[0].deltas[1]).toBeNull()
+    // After null: NOR cum=181, VER cum=273 → delta -92
+    expect(result[0].deltas[2]).toBeCloseTo(-92)
+  })
+
+  it('returns an empty array when only one series is provided', () => {
+    expect(computeCumulativeDeltas([reference])).toEqual([])
+  })
+})
+
+describe('deltaPolylineSegments', () => {
+  it('splits polylines at null laps', () => {
+    const segments = deltaPolylineSegments(
+      [1, null, 2],
+      (lap, delta) => `${lap},${delta}`,
+    )
+    expect(segments).toEqual(['0,1', '2,2'])
+  })
+})
+
+describe('DeltaTimeGraph', () => {
+  it('renders an empty state with no series', () => {
+    render(<DeltaTimeGraph series={[]} />)
+    expect(screen.getByTestId('delta-time-graph-empty')).toBeInTheDocument()
+    expect(screen.getByText(/No lap data/i)).toBeInTheDocument()
+  })
+
+  it('renders an empty state with only the reference driver', () => {
+    render(<DeltaTimeGraph series={[reference]} />)
+    expect(screen.getByTestId('delta-time-graph-empty')).toBeInTheDocument()
+    expect(screen.getByText(/at least two drivers/i)).toBeInTheDocument()
+  })
+
+  it('renders a zero line and one polyline per non-reference driver', () => {
+    const { container } = render(<DeltaTimeGraph series={[reference, challenger]} />)
+    expect(screen.getByTestId('delta-time-graph')).toBeInTheDocument()
+    expect(container.querySelector('[data-testid="delta-zero-line"]')).toBeInTheDocument()
+    expect(screen.getByTestId('delta-line-HAM')).toBeInTheDocument()
+    expect(container.querySelectorAll('.delta-graph-driver-line')).toHaveLength(1)
+    expect(screen.queryByTestId('delta-line-VER')).not.toBeInTheDocument()
+  })
+
+  it('shows a crosshair tooltip on hover', () => {
+    vi.spyOn(SVGSVGElement.prototype, 'getBoundingClientRect').mockReturnValue({
+      x: 0,
+      y: 0,
+      left: 0,
+      top: 0,
+      width: 640,
+      height: 220,
+      right: 640,
+      bottom: 220,
+      toJSON: () => ({}),
+    })
+    const { container } = render(<DeltaTimeGraph series={[reference, challenger]} />)
+    const hoverLayer = container.querySelector('.delta-graph-hover-layer')
+    expect(hoverLayer).toBeTruthy()
+    fireEvent.mouseMove(hoverLayer!, { clientX: 44, clientY: 100 })
+    expect(screen.getByTestId('delta-crosshair')).toBeInTheDocument()
+    expect(screen.getByTestId('delta-tooltip')).toBeInTheDocument()
+    expect(screen.getByText(/Lap 1/)).toBeInTheDocument()
+    vi.restoreAllMocks()
+  })
+})

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/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,
+    })
+  })
+})

tests/command-center.spec.ts

@@ -9,7 +9,7 @@ test.describe('Command Center', () => {
     await expect(page.getByTestId('command-center')).toBeVisible()
     await expect(page.getByTestId('cc-focus')).toBeVisible()
     await expect(page.getByTestId('cc-session-9472')).toBeVisible()
-    await expect(page.getByTestId('cc-actions')).toBeVisible()
+    await expect(page.getByTestId('hero-last-race-link')).toBeVisible()
   })
 
   test('nav link reaches command center from race hub', async ({ page }) => {
@@ -21,8 +21,8 @@ test.describe('Command Center', () => {
 
   test('open analysis action opens race hub for the focus session', async ({ page }) => {
     await page.goto('/')
-    await expect(page.getByTestId('cc-action-race-hub')).toContainText(String(FULL_SESSION))
-    await page.getByTestId('cc-action-race-hub').click()
+    await expect(page.getByTestId('hero-last-race-link')).toBeVisible()
+    await page.getByTestId('hero-last-race-link').click()
     await expect(page).toHaveURL(new RegExp(`/race-hub\\?session_key=${FULL_SESSION}`))
     await expect(page.getByTestId('rh-identity')).toBeVisible()
     await expect(page.getByTestId(`rh-session-${FULL_SESSION}`)).toBeVisible()