feat: redesign Live Timing page with dynamic animations and premium dashboard layout

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

CLAUDE.md

@@ -3,18 +3,31 @@
 ## Commands
 
 ```bash
-go build -o box-box ./cmd/main.go   # Build binary
+go build -o box-box ./cmd/main.go    # Build binary
-go run cmd/main.go                   # Run directly
+go run cmd/main.go                   # Run TUI
-go test ./...                        # All tests
+go run cmd/main.go --web --port 8080 # Run web server (default port 8080)
+go run cmd/main.go --ingest-year 2025  # Ingest a season into the domain DB (also: --ingest-meeting, --ingest-session, --ingest-news, --coverage)
+go test ./...                        # All Go tests
 go test -v ./internal/api            # API integration tests (requires internet, rate-limit aware)
 OPENF1_API_KEY=key go run cmd/main.go  # Run with paid tier (enables live session access)
+
+# Frontend (run inside frontend/)
+npm run dev                          # Vite dev server on :5173, proxies /api to :8080 (override with BOXBOX_API_PORT)
+npm run build                        # tsc --noEmit && vite build -> frontend/dist
+npm run test                         # Vitest unit tests (frontend/src/test/); npm run test:watch for watch mode
+
+# E2E / visual (run at repo root; Playwright auto-starts a seeded Go server + Vite dev server)
+npm run test:e2e                     # Playwright e2e (tests/*.spec.ts, playwright.config.ts)
+npm run test:visual                  # Visual snapshots (tests/visual/, playwright.visual.config.ts)
+npm run test:visual:update           # Regenerate visual snapshots
+# :prod variants (test:e2e:prod, test:visual:prod) run against the *.prod.config.ts configs
 ```
 
 ## Project Overview
 
-**box-box** is an F1 Terminal UI (TUI) dashboard built in Go with Bubble Tea. It shows live timing, standings, race calendar, driver telemetry, track maps, and race replay — all sourced from the OpenF1 API.
+**box-box** is an F1 dashboard in Go with two frontends sharing the same data layer: a Bubble Tea TUI and a web app (`--web` flag) — a Go HTTP server in `internal/web/` serving a React SPA plus a REST/SSE API. It shows live timing, standings, race calendar, driver telemetry, track maps, and race replay — sourced from the OpenF1 API and a local domain SQLite DB filled by the ingestion CLI.
 
-**Status**: Pre-beta, actively developed. All layers (API, models, UI) are fully implemented.
+**Status**: Pre-beta, actively developed.
 
 ## Tech Stack
 
@@ -23,12 +36,15 @@ OPENF1_API_KEY=key go run cmd/main.go  # Run with paid tier (enables live sessio
 - **Bubbles** — TUI components (spinner, viewport, table)
 - **OpenF1 API** — F1 data at `https://api.openf1.org`
 - **gorilla/websocket** — Official F1 SignalR live feed
-- **modernc.org/sqlite** — HTTP response caching with TTL
+- **modernc.org/sqlite** — HTTP response cache + domain DB
+- **React 18 + Vite + TypeScript** — Web frontend (`frontend/`), TanStack Router + TanStack Query
+- **Vitest + Testing Library** — Frontend unit tests; **Playwright** — e2e and visual tests (repo root)
 
 ## File Map
 
 ```
-cmd/main.go                  Entry point (package main). Inits client, launches TUI.
+cmd/main.go                  Entry point. Flags: --web/--port (web server), --ingest-* /
+                             --backfill-season/--coverage (ingestion CLI), --db. Default: TUI.
 
 internal/api/
   client.go                  OpenF1Client: HTTP client, 15s timeout, optional Bearer auth
@@ -56,6 +72,40 @@ internal/ui/
   battles.go                 Sub-view: Auto-detected on-track battles with gap sparkline
   pitwindow.go               Sub-view: Pit stop rejoin position calculator
   replay.go                  Sub-view: Lap-by-lap race replay scrubber
+
+internal/store/              Domain SQLite DB (~/.local/share/box-box/boxbox.db), season/session data
+internal/ingest/             OpenF1 -> domain DB ingestion (driven by cmd/main.go --ingest-* flags)
+internal/query/              Read models over the domain DB, used by web handlers
+internal/news/               RSS/Atom paddock briefing feed ingestion (--ingest-news)
+internal/live/               Shared F1 SignalR live feed client + LiveStreamData types
+
+internal/web/
+  server.go                  HTTP server: route table, CORS/logging middleware, SPA file server.
+                             Serves frontend/dist if found (walks up from cwd), else embedded assets/
+  api.go                     REST handlers under /api/v1/ (results, laps, telemetry, championship
+                             hub aggregation, news + readability article extraction, ...)
+  live.go                    SSEHub + SignalR bridge: relays official F1 feed to SSE subscribers
+  racehub.go                 /api/v1/race-hub: per-session payload assembled from the domain DB
+  navigation.go              Local-first navigation: /api/v1/seasons, meetings, sessions, weekend
+  source.go                  ?source=openf1|local|auto data-source resolution
+  assets/                    Embedded fallback SPA (legacy vanilla JS; used when no frontend/dist)
+
+frontend/                    React + Vite + TypeScript SPA
+  src/main.tsx               Entry: QueryClientProvider + RouterProvider
+  src/router.tsx             TanStack Router: / (command center), /race-hub, /live, /championship,
+                             /briefing, /data-library (also /admin alias)
+  src/api.ts                 Typed fetch wrappers for /api/v1/ endpoints
+  src/types.ts               TypeScript mirrors of API payloads
+  src/pages/                 CommandCenterPage, RaceHubPage, LiveTimingPage, ChampionshipPage,
+                             BriefingPage, DataLibraryPage
+  src/components/            Shared components (Nav, TabBar, race hub views, live/ timing tower)
+  src/lib/                   Client helpers: live SSE parsing, schedule, coverage, GP identity
+  src/test/                  Vitest + Testing Library unit tests
+
+tests/                       Playwright e2e specs; tests/visual/ visual snapshot specs
+playwright*.config.ts        Dev/prod e2e + visual configs (webServer blocks seed a temp domain DB
+                             and start Go API + Vite automatically)
+scripts/seed-e2e-db/         Seeds the throwaway domain DB used by Playwright runs
 ```
 
 ## Architecture
@@ -66,6 +116,17 @@ Each tab is a sub-model with `Init()`, `Update(msg)`, `View()`. The root `AppMod
 
 Async work (API calls, WebSocket) returns `tea.Cmd` that emits typed messages back to Update. Use `tea.Batch()` for parallel fetches.
 
+### Web Layer
+
+`box-box --web` starts an HTTP server (default `:8080`) with three surfaces:
+
+- **REST API at `/api/v1/...`** — Handlers in `internal/web/api.go` wrap `OpenF1Client`; navigation/race-hub endpoints read the domain DB via `internal/query` (empty responses if the DB is missing). `?source=openf1|local|auto` picks the data source where supported. Register routes in `routes()` in `server.go` — Go ServeMux longest-prefix matching means more specific paths (e.g. `/api/v1/laps/comparison`) must be registered before their prefixes.
+- **SSE live stream** — `internal/web/live.go` runs a background SignalR connection to the official F1 feed (exponential-backoff reconnect; disabled with `BOXBOX_DISABLE_LIVE=1`). An `SSEHub` broadcasts snapshots to browsers on `/api/v1/live/stream`, with `/api/v1/live/state` for the initial snapshot and a 20s heartbeat. `LiveTimingPage.tsx` consumes it; parsing helpers live in `frontend/src/lib/live.ts`.
+- **Embedded SPA** — Static file server with SPA fallback to `index.html`. Prefers a `frontend/dist` directory found by walking up from cwd (so `npm run build` output is served without rebuilding Go); otherwise serves the legacy assets embedded via `//go:embed assets`.
+- **Championship hub** — `/api/v1/championship/hub` aggregates official standings with derived stats (wins, podiums, poles, last-5 form, teammate head-to-head) and per-round cumulative points, computed from all season race results.
+
+Frontend dev loop: run `go run cmd/main.go --web` and `npm run dev` in `frontend/` — Vite proxies `/api` to the Go server.
+
 ### Key Patterns
 
 - **Two-phase standings load**: `GetLatestDriverChampionship()` -> extract SessionKey -> `GetDriversForSession(sessionKey)` -> join by DriverNumber for names/colors
@@ -104,13 +165,20 @@ Replay: `h`/`l` or arrows scrub laps
 - **New message type**: Define in `messages.go`, handle in relevant model's `Update()`
 - **New keybinding**: Define in `keys.go`, handle in relevant model's `Update()`
 - **New styles**: Add to `styles.go`, reference F1 palette constants
+- **New web page/route**: Create page in `frontend/src/pages/`, register route in `frontend/src/router.tsx`, add nav link in `frontend/src/components/Nav.tsx`, add fetchers to `src/api.ts` and payload types to `src/types.ts`, add a test in `frontend/src/test/`
+- **New web API endpoint**: Add handler in `internal/web/api.go` (or a new file in `internal/web/`), register it in `routes()` in `server.go` (mind prefix ordering), add a handler test alongside (see `championship_hub_test.go`)
 
 ## Testing
 
-Tests in `openf1_test.go` hit the real OpenF1 API. They use `skipOnRateLimit(t, err)` to gracefully skip on HTTP 429. Require internet.
+- Go: tests in `openf1_test.go` hit the real OpenF1 API and use `skipOnRateLimit(t, err)` to skip on HTTP 429 (require internet). `internal/web` handler tests run offline.
+- Frontend: Vitest + Testing Library in `frontend/src/test/` (`npm run test` inside `frontend/`).
+- E2E/visual: Playwright at repo root (`npm run test:e2e`, `npm run test:visual`). Configs seed a temp domain DB and start the Go server with `BOXBOX_DISABLE_LIVE=1` and `BOXBOX_OPENF1_BASE_URL` pointed at an unreachable address (hermetic: no live OpenF1 dependency, date-stable) plus a Vite dev server — no manual setup needed.
 
 ## Environment
 
 - `OPENF1_API_KEY` — Optional Bearer token for paid tier (live session WebSocket access)
-- Logs go to `box-box.log` in project root (prevents TUI pollution)
+- `BOXBOX_DISABLE_LIVE=1` — Skip the background SignalR live feed in web mode (used by e2e)
-- Cache at `~/.cache/box-box/cache.db` (SQLite WAL mode, auto-created)
+- `BOXBOX_OPENF1_BASE_URL` — Override the OpenF1 API root (default `https://api.openf1.org`; e2e sets an unreachable address for hermetic runs)
+- `BOXBOX_API_PORT` — Go API port that the Vite dev proxy targets (default 8080)
+- Logs: TUI writes `box-box.log` in project root; web/ingest modes log to stderr
+- HTTP cache at `~/.cache/box-box/cache.db`; domain DB at `~/.local/share/box-box/boxbox.db` (override with `--db`)

cmd/main.go

@@ -41,11 +41,19 @@ func main() {
 		return
 	}
 
+	// BOXBOX_OPENF1_BASE_URL overrides the upstream OpenF1 API root. E2E runs
+	// point it at an unreachable address so tests stay hermetic and
+	// deterministic regardless of wall-clock date or network state.
+	baseURL := os.Getenv("BOXBOX_OPENF1_BASE_URL")
+	if baseURL == "" {
+		baseURL = "https://api.openf1.org"
+	}
+
 	var client *api.OpenF1Client
 	if apiKey := os.Getenv("OPENF1_API_KEY"); apiKey != "" {
-		client = api.NewOpenF1ClientWithKey("https://api.openf1.org", 15*time.Second, apiKey)
+		client = api.NewOpenF1ClientWithKey(baseURL, 15*time.Second, apiKey)
 	} else {
-		client = api.NewOpenF1Client("https://api.openf1.org", 15*time.Second)
+		client = api.NewOpenF1Client(baseURL, 15*time.Second)
 	}
 	defer client.Close()
 

frontend/index.html

@@ -2,8 +2,28 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-    <title>box-box</title>
+    <meta name="theme-color" content="#0d0d0d" />
+    <meta name="description" content="box-box: A premium Live F1 Dashboard and Timing Tower" />
+    
+    <!-- Open Graph / Social -->
+    <meta property="og:title" content="box-box | Live F1 Dashboard" />
+    <meta property="og:description" content="Real-time F1 timing, telemetry, and race dashboard." />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://box-box.amantahiliani.com/" />
+    <meta property="og:image" content="https://box-box.amantahiliani.com/favicon.jpg" />
+    
+    <!-- Icons & PWA -->
+    <link rel="icon" type="image/jpeg" href="/favicon.jpg" />
+    <link rel="apple-touch-icon" href="/favicon.jpg" />
+    <link rel="manifest" href="/manifest.json" />
+
+    <!-- Google Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700;800&display=swap" rel="stylesheet">
+    
+    <title>box-box | Live F1 Dashboard</title>
   </head>
   <body>
     <div id="root"></div>

frontend/package-lock.json

@@ -8,8 +8,10 @@
       "name": "box-box-web",
       "version": "0.1.0",
       "dependencies": {
+        "@formkit/auto-animate": "^0.9.0",
         "@tanstack/react-query": "^5.62.0",
         "@tanstack/react-router": "^1.81.0",
+        "lucide-react": "^1.23.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1"
       },
@@ -902,6 +904,12 @@
         "node": ">=18"
       }
     },
+    "node_modules/@formkit/auto-animate": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@formkit/auto-animate/-/auto-animate-0.9.0.tgz",
+      "integrity": "sha512-VhP4zEAacXS3dfTpJpJ88QdLqMTcabMg0jwpOSxZ/VzfQVfl3GkZSCZThhGC5uhq/TxPHPzW0dzr4H9Bb1OgKA==",
+      "license": "MIT"
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.13",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
@@ -2556,6 +2564,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "1.23.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-1.23.0.tgz",
+      "integrity": "sha512-38BpJcD0JhFosxHApP/BYsBetLpQFRoTRzEzstM/XCc3jsAG7wqaY1lgVwxiUe3xqYE+lNxo2PkCmYwXWrwwIw==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/lz-string": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",

frontend/package.json

@@ -11,8 +11,10 @@
     "test:watch": "vitest"
   },
   "dependencies": {
+    "@formkit/auto-animate": "^0.9.0",
     "@tanstack/react-query": "^5.62.0",
     "@tanstack/react-router": "^1.81.0",
+    "lucide-react": "^1.23.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },

frontend/public/manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "box-box",
+  "name": "box-box | Live F1 Dashboard",
+  "icons": [
+    {
+      "src": "/favicon.jpg",
+      "type": "image/jpeg",
+      "sizes": "192x192 512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#0d0d0d",
+  "background_color": "#0d0d0d"
+}

frontend/src/api.ts

@@ -1,4 +1,13 @@
-import type { ArticleContent, LiveStateResponse, Meeting, NewsItem, RaceHub, Weekend } from './types'
+import type {
+  ArticleContent,
+  ChampionshipHub,
+  LiveStateResponse,
+  Meeting,
+  NewsItem,
+  RaceHub,
+  Session,
+  Weekend,
+} from './types'
 
 export async function fetchRaceHub(sessionKey: number): Promise<RaceHub> {
   const res = await fetch(`/api/v1/race-hub?session_key=${sessionKey}`)
@@ -35,6 +44,15 @@ export async function fetchSeasonMeetings(year: number): Promise<Meeting[]> {
   return Array.isArray(meetings) ? meetings : []
 }
 
+export async function fetchSessions(meetingKey: number, source = 'openf1'): Promise<Session[]> {
+  const res = await fetch(`/api/v1/sessions?meeting_key=${meetingKey}&source=${source}`)
+  if (!res.ok) {
+    throw new Error(`API ${res.status}: ${res.statusText}`)
+  }
+  const sessions = await res.json()
+  return Array.isArray(sessions) ? sessions : []
+}
+
 export async function fetchWeekend(meetingKey: number): Promise<Weekend> {
   const res = await fetch(`/api/v1/weekend?meeting_key=${meetingKey}`)
   if (!res.ok) {
@@ -43,6 +61,17 @@ export async function fetchWeekend(meetingKey: number): Promise<Weekend> {
   return res.json()
 }
 
+export async function fetchChampionshipHub(year?: number): Promise<ChampionshipHub> {
+  const params = new URLSearchParams({ source: 'auto' })
+  if (year) params.set('year', year.toString())
+  const url = `/api/v1/championship/hub?${params.toString()}`
+  const res = await fetch(url)
+  if (!res.ok) {
+    throw new Error(`API ${res.status}: ${res.statusText}`)
+  }
+  return res.json()
+}
+
 export async function fetchLiveState(): Promise<LiveStateResponse> {
   const res = await fetch('/api/v1/live/state')
   if (!res.ok) {

frontend/src/components/ChampionshipSimulator.tsx

@@ -0,0 +1,233 @@
+import { useEffect, useMemo, useState } from 'react'
+import type { ChampionshipHub } from '../types'
+import { teamColor } from '../utils'
+import {
+  assignPosition,
+  defaultRound,
+  defaultScenario,
+  normalizeScenario,
+  pointsForPosition,
+  projectStandings,
+} from '../lib/simulator'
+import type { Scenario } from '../lib/simulator'
+
+const STORAGE_PREFIX = 'box-box.champ.sim'
+
+function storageKey(season: number): string {
+  return `${STORAGE_PREFIX}.${season}`
+}
+
+function loadScenario(hub: ChampionshipHub): Scenario {
+  try {
+    const raw = window.localStorage.getItem(storageKey(hub.season))
+    if (!raw) return defaultScenario(hub.drivers, hub.rounds_left)
+    return normalizeScenario(JSON.parse(raw), hub.drivers, hub.rounds_left)
+  } catch {
+    return defaultScenario(hub.drivers, hub.rounds_left)
+  }
+}
+
+function saveScenario(season: number, scenario: Scenario) {
+  try {
+    window.localStorage.setItem(storageKey(season), JSON.stringify(scenario))
+  } catch {
+    // storage unavailable (private mode, quota) — simulator still works in memory
+  }
+}
+
+/** Label for the i-th remaining round (0-based), e.g. "R7" or "Round 7". */
+function roundLabel(hub: ChampionshipHub, index: number): string {
+  return hub.round_labels[hub.round + index] ?? `Round ${hub.round + index + 1}`
+}
+
+function fmtPts(n: number): string {
+  return Number.isInteger(n) ? String(n) : n.toFixed(1)
+}
+
+export function ChampionshipSimulator({ hub }: { hub: ChampionshipHub }) {
+  const [scenario, setScenario] = useState<Scenario>(() => loadScenario(hub))
+  const [selected, setSelected] = useState(0)
+
+  // Reload when the season changes (new hub, new storage key).
+  useEffect(() => {
+    setScenario(loadScenario(hub))
+    setSelected(0)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [hub.season, hub.rounds_left])
+
+  useEffect(() => {
+    if (scenario.length > 0) saveScenario(hub.season, scenario)
+  }, [hub.season, scenario])
+
+  const projected = useMemo(
+    () => projectStandings(hub.drivers, scenario, hub.rounds_left),
+    [hub.drivers, scenario, hub.rounds_left],
+  )
+
+  if (hub.rounds_left <= 0 || hub.drivers.length === 0 || scenario.length === 0) {
+    return (
+      <div className="champ-chart-empty" data-testid="champ-view-simulator">
+        Season complete — nothing left to simulate.
+      </div>
+    )
+  }
+
+  const roundIdx = Math.min(selected, scenario.length - 1)
+  const round = scenario[roundIdx]
+
+  const setRound = (nextRound: (number | null)[]) => {
+    setScenario((prev) => prev.map((r, i) => (i === roundIdx ? nextRound : r)))
+  }
+
+  const driverByNumber = new Map(hub.drivers.map((d) => [d.driver_number, d]))
+
+  return (
+    <div className="champ-sim" data-testid="champ-view-simulator">
+      <div className="champ-sim-head">
+        <span className="champ-chart-title mono">What-if simulator — remaining rounds</span>
+        <button
+          type="button"
+          className="champ-sim-btn"
+          onClick={() => setScenario(defaultScenario(hub.drivers, hub.rounds_left))}
+          data-testid="sim-reset-all"
+        >
+          Reset all
+        </button>
+      </div>
+
+      <div className="champ-sim-rounds" role="tablist" aria-label="Remaining rounds">
+        {scenario.map((_, i) => (
+          <button
+            key={i}
+            type="button"
+            className={`champ-sim-round${i === roundIdx ? ' is-active' : ''}`}
+            onClick={() => setSelected(i)}
+            data-testid={`sim-round-${i}`}
+          >
+            {roundLabel(hub, i)}
+          </button>
+        ))}
+      </div>
+
+      <div className="champ-sim-grid">
+        <div className="champ-sim-editor" data-testid="sim-editor">
+          <div className="champ-sim-editor-head">
+            <span className="champ-sim-editor-title mono">{roundLabel(hub, roundIdx)} finishing order</span>
+            <button
+              type="button"
+              className="champ-sim-btn"
+              onClick={() => setRound(defaultRound(hub.drivers))}
+              data-testid="sim-reset-round"
+            >
+              Reset round
+            </button>
+          </div>
+          {round.map((driverNumber, p) => {
+            const driver = driverNumber != null ? driverByNumber.get(driverNumber) : undefined
+            return (
+              <div className="champ-sim-slot" key={p}>
+                <span className="champ-sim-slot-pos mono">P{p + 1}</span>
+                <span
+                  className="champ-sim-slot-bar"
+                  style={{ background: driver ? teamColor(driver.team_colour) : 'var(--border)' }}
+                />
+                <select
+                  className="champ-sim-select mono"
+                  value={driverNumber ?? ''}
+                  aria-label={`P${p + 1} driver`}
+                  data-testid={`sim-pos-${p + 1}`}
+                  onChange={(e) => {
+                    const value = e.target.value
+                    setRound(assignPosition(round, p, value === '' ? null : Number(value)))
+                  }}
+                >
+                  <option value="">—</option>
+                  {hub.drivers.map((d) => (
+                    <option key={d.driver_number} value={d.driver_number}>
+                      {d.name_acronym} · {d.full_name}
+                    </option>
+                  ))}
+                </select>
+                <span className="champ-sim-slot-pts mono">+{pointsForPosition(p + 1)}</span>
+              </div>
+            )
+          })}
+        </div>
+
+        <div className="champ-sim-table-wrap">
+          <div className="champ-sim-editor-head">
+            <span className="champ-sim-editor-title mono">Projected standings</span>
+          </div>
+          <div className="champ-scroll">
+            <table className="champ-table champ-sim-table" data-testid="sim-projected">
+              <thead>
+                <tr>
+                  <th className="l">Pos</th>
+                  <th className="c">Δ</th>
+                  <th className="l">Driver</th>
+                  <th className="r">Now</th>
+                  <th className="r">+Sim</th>
+                  <th className="r">Proj</th>
+                  <th className="r">Title</th>
+                </tr>
+              </thead>
+              <tbody>
+                {projected.map((row) => {
+                  const d = row.driver
+                  const moved = row.delta !== 0
+                  return (
+                    <tr
+                      key={d.driver_number}
+                      className={moved ? 'champ-sim-row-moved' : undefined}
+                      data-testid={`sim-row-${d.driver_number}`}
+                    >
+                      <td className="mono" style={{ fontWeight: 700 }}>
+                        P{row.projectedPosition}
+                      </td>
+                      <td className="c mono">
+                        {row.delta > 0 && (
+                          <span className="champ-sim-delta up">▲{row.delta}</span>
+                        )}
+                        {row.delta < 0 && (
+                          <span className="champ-sim-delta down">▼{-row.delta}</span>
+                        )}
+                        {row.delta === 0 && <span className="champ-td-dim">—</span>}
+                      </td>
+                      <td>
+                        <div className="champ-drv">
+                          <span
+                            className="champ-drv-bar"
+                            style={{ background: teamColor(d.team_colour) }}
+                          />
+                          <span className="champ-drv-code mono">{d.name_acronym}</span>
+                          <span className="champ-drv-name">{d.full_name}</span>
+                        </div>
+                      </td>
+                      <td className="r mono champ-td-muted">{fmtPts(row.currentPoints)}</td>
+                      <td className="r mono champ-td-dim">+{fmtPts(row.simPoints)}</td>
+                      <td className="r mono champ-td-pts">{fmtPts(row.projectedPoints)}</td>
+                      <td className="r">
+                        <span
+                          className="champ-alive mono"
+                          style={{ color: row.titleAlive ? 'var(--green)' : 'var(--text-3)' }}
+                        >
+                          {row.titleAlive ? 'ALIVE' : 'OUT'}
+                        </span>
+                      </td>
+                    </tr>
+                  )
+                })}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+
+      <p className="champ-sim-caption">
+        Simplified model: every remaining round is scored as a standard Grand Prix
+        (25-18-15-12-10-8-6-4-2-1, no fastest-lap point). Sprint weekends are ignored. Title status
+        uses the max-points-remaining bound against the leader&apos;s projected total.
+      </p>
+    </div>
+  )
+}

frontend/src/components/CliCommands.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react'
+import { Copy, Check } from 'lucide-react'
 
 interface Command {
   comment?: string
@@ -39,8 +40,9 @@ function CliCommandLine({ cmd }: { cmd: string }) {
   return (
     <div className="cli-cmd-row">
       <code className="cli-cmd">{cmd}</code>
-      <button type="button" className="cli-copy-btn" onClick={handleCopy} aria-label={`Copy ${cmd}`}>
+      <button type="button" className="cli-copy-btn interactive" onClick={handleCopy} aria-label={`Copy ${cmd}`} style={{ display: 'flex', alignItems: 'center', gap: '4px', padding: '4px 8px', background: copied ? 'var(--green)' : 'rgba(255,255,255,0.05)', color: copied ? '#000' : 'var(--text)', border: 'none', borderRadius: '4px', cursor: 'pointer', transition: 'all 0.2s' }}>
-        {copied ? 'Copied' : 'Copy'}
+        {copied ? <Check size={14} /> : <Copy size={14} />}
+        <span>{copied ? 'Copied' : 'Copy'}</span>
       </button>
     </div>
   )

frontend/src/components/Nav.tsx

@@ -16,6 +16,9 @@ export function Nav() {
         <Link to="/race-hub" search={{}} activeProps={{ className: 'active' }}>
           Race Hub
         </Link>
+        <Link to="/championship" activeProps={{ className: 'active' }}>
+          Championship
+        </Link>
         <Link to="/briefing" activeProps={{ className: 'active' }}>
           Briefing
         </Link>

frontend/src/components/OverviewView.tsx

@@ -1,6 +1,7 @@
 import type { RaceHub } from '../types'
 import { compareFinishPosition, formatDuration, formatGap, formatLapTime } from '../utils'
 import { countRaceHubDatasets } from '../lib/coverage'
+import { Thermometer, Map, Droplets, Wind, CloudRain } from 'lucide-react'
 
 interface Props {
   data: RaceHub
@@ -74,7 +75,7 @@ export function OverviewView({ data }: Props) {
       </div>
 
       <div className="rh-overview-row">
-        <section className="rh-panel">
+        <section className="rh-panel ui-card">
           <div className="sec-header">
             <span className="sec-title">Conditions</span>
             {latestWeather && (
@@ -83,17 +84,20 @@ export function OverviewView({ data }: Props) {
           </div>
           {latestWeather ? (
             <div className="rh-condition-strip" data-testid="rh-conditions">
-              <ConditionChip label="Air" value={`${latestWeather.air_temperature.toFixed(1)}°C`} />
+              <ConditionChip icon={Thermometer} label="Air" value={`${latestWeather.air_temperature.toFixed(1)}°C`} />
               <ConditionChip
+                icon={Map}
                 label="Track"
                 value={`${latestWeather.track_temperature.toFixed(1)}°C`}
               />
-              <ConditionChip label="Humidity" value={`${latestWeather.humidity.toFixed(0)}%`} />
+              <ConditionChip icon={Droplets} label="Humidity" value={`${latestWeather.humidity.toFixed(0)}%`} />
               <ConditionChip
+                icon={Wind}
                 label="Wind"
                 value={`${latestWeather.wind_speed.toFixed(1)} m/s`}
               />
               <ConditionChip
+                icon={CloudRain}
                 label="Rain"
                 value={latestWeather.rainfall > 0 ? 'Yes' : 'No'}
                 accent={latestWeather.rainfall > 0 ? 'wet' : undefined}
@@ -104,7 +108,7 @@ export function OverviewView({ data }: Props) {
           )}
         </section>
 
-        <section className="rh-panel">
+        <section className="rh-panel ui-card">
           <div className="sec-header">
             <span className="sec-title">Race Control · Latest</span>
             <span className="sec-meta mono">{data.race_control.length}</span>
@@ -126,7 +130,7 @@ export function OverviewView({ data }: Props) {
           )}
         </section>
 
-        <section className="rh-panel">
+        <section className="rh-panel ui-card">
           <div className="sec-header">
             <span className="sec-title">Local Coverage</span>
             <span className="sec-meta mono">
@@ -173,7 +177,7 @@ function StatCard({
 }: StatCardProps) {
   if (placeholder) {
     return (
-      <div className="rh-stat-card rh-stat-empty">
+      <div className="rh-stat-card ui-card rh-stat-empty">
         <div className="rh-stat-label mono">{label}</div>
         <div className="rh-stat-primary">—</div>
         <div className="rh-stat-secondary">No data ingested</div>
@@ -181,7 +185,7 @@ function StatCard({
     )
   }
   return (
-    <div className="rh-stat-card">
+    <div className="rh-stat-card ui-card interactive">
       <div className="rh-stat-label mono">{label}</div>
       <div className="rh-stat-primary" style={primaryColor ? { color: primaryColor } : undefined}>
         {primary}
@@ -196,7 +200,7 @@ function StatCard({
 function PodiumCard({ podium }: { podium: Array<{ name_acronym: string; team_colour: string; position: number; full_name: string; gap_to_leader: number | string | number[] | null; duration: number | number[] | null; driver_number: number }> }) {
   if (podium.length === 0) {
     return (
-      <div className="rh-stat-card rh-stat-empty">
+      <div className="rh-stat-card ui-card rh-stat-empty">
         <div className="rh-stat-label mono">Podium</div>
         <div className="rh-stat-primary">—</div>
         <div className="rh-stat-secondary">No classified finishers</div>
@@ -204,7 +208,7 @@ function PodiumCard({ podium }: { podium: Array<{ name_acronym: string; team_col
     )
   }
   return (
-    <div className="rh-stat-card">
+    <div className="rh-stat-card ui-card interactive">
       <div className="rh-stat-label mono">Podium</div>
       <ol className="rh-podium-list">
         {podium.map((r) => (
@@ -232,13 +236,16 @@ function ConditionChip({
   label,
   value,
   accent,
+  icon: Icon,
 }: {
   label: string
   value: string
   accent?: 'wet'
+  icon?: React.ElementType
 }) {
   return (
-    <div className={`rh-condition-chip${accent === 'wet' ? ' rh-condition-wet' : ''}`}>
+    <div className={`rh-condition-chip${accent === 'wet' ? ' rh-condition-wet' : ''}`} style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
+      {Icon && <Icon size={14} style={{ opacity: 0.7 }} />}
       <span className="rh-condition-label mono">{label}</span>
       <span className="rh-condition-value">{value}</span>
     </div>

frontend/src/components/live/BattleChips.tsx

@@ -0,0 +1,21 @@
+import type { Battle } from '../../lib/battles'
+import { battleLabel } from '../../lib/battles'
+
+interface Props {
+  battles: Battle[]
+}
+
+export function BattleChips({ battles }: Props) {
+  if (battles.length === 0) return null
+
+  return (
+    <div className="battle-chips" data-testid="battle-chips">
+      <span className="battle-chips-label">Battles</span>
+      {battles.map((battle) => (
+        <span className="battle-chip mono" key={battle.drivers.map((d) => d.racingNumber).join('-')}>
+          {battleLabel(battle)}
+        </span>
+      ))}
+    </div>
+  )
+}

frontend/src/components/live/GapSparkline.tsx

@@ -0,0 +1,44 @@
+import { gapTrend, sparklinePoints } from '../../lib/gapHistory'
+
+interface Props {
+  samples: number[] | undefined
+  width?: number
+  height?: number
+}
+
+export function GapSparkline({ samples, width = 56, height = 14 }: Props) {
+  if (!samples || samples.length < 2) {
+    return <span className="gap-spark gap-spark-empty">·</span>
+  }
+
+  const trend = gapTrend(samples)
+  const points = sparklinePoints(samples, width, height)
+
+  return (
+    <span className={`gap-spark trend-${trend ?? 'steady'}`} data-testid="gap-spark">
+      <svg
+        className="gap-spark-svg"
+        width={width}
+        height={height}
+        viewBox={`0 0 ${width} ${height}`}
+        aria-hidden="true"
+        focusable="false"
+      >
+        <polyline
+          points={points}
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.2"
+          strokeLinejoin="round"
+          strokeLinecap="round"
+        />
+      </svg>
+      {trend === 'closing' && (
+        <span className="trend-arrow trend-arrow-closing" title="Gap closing">▼</span>
+      )}
+      {trend === 'opening' && (
+        <span className="trend-arrow trend-arrow-opening" title="Gap opening">▲</span>
+      )}
+    </span>
+  )
+}

frontend/src/components/live/PinnedDrivers.tsx

@@ -0,0 +1,63 @@
+import { teamColor } from '../../utils'
+import type { LiveTimingRow } from '../../lib/live'
+import { driverCode, tyreClass, tyreLabel } from '../../lib/live'
+import type { GapHistoryMap } from '../../lib/gapHistory'
+import { GapSparkline } from './GapSparkline'
+
+interface Props {
+  rows: LiveTimingRow[]
+  history: GapHistoryMap
+  pinned: string[]
+  onToggle: (racingNumber: string) => void
+}
+
+export function PinnedDrivers({ rows, history, pinned, onToggle }: Props) {
+  if (pinned.length === 0) return null
+
+  const rowsByNumber = new Map(rows.map((row) => [row.RacingNumber, row]))
+
+  return (
+    <div className="pinned-strip" data-testid="pinned-strip">
+      {pinned.map((number) => {
+        const row = rowsByNumber.get(number)
+        if (!row) {
+          return (
+            <button
+              type="button"
+              className="pinned-card pinned-card-missing"
+              key={number}
+              onClick={() => onToggle(number)}
+              title="Unpin driver"
+            >
+              <span className="drv-code">#{number}</span>
+              <span className="pinned-nodata">no data</span>
+              <span className="pinned-unpin" aria-hidden="true">×</span>
+            </button>
+          )
+        }
+
+        const driver = row.Driver
+        const gap = driver.Interval || driver.GapToLeader || '-'
+        return (
+          <button
+            type="button"
+            className="pinned-card"
+            key={number}
+            onClick={() => onToggle(number)}
+            title="Unpin driver"
+          >
+            <span className="pinned-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 ${tyreClass(row.Tyre)}`}>{tyreLabel(row.Tyre)}</span>
+            <span className="pinned-gap mono">{gap}</span>
+            <GapSparkline samples={history[number]} />
+            {driver.InPit && <span className="badge badge-pit">PIT</span>}
+            {driver.Retired && <span className="badge badge-out">RET</span>}
+            <span className="pinned-unpin" aria-hidden="true">×</span>
+          </button>
+        )
+      })}
+    </div>
+  )
+}

frontend/src/components/live/RaceControlFeed.tsx

@@ -1,36 +1,119 @@
-import type { LiveRCMessage } from '../../types'
+import { useEffect, useRef, useState } from 'react'
+import type { LiveRCMessage, LiveDriverInfo } from '../../types'
 import { latestRaceControl, rcFlagClass } from '../../lib/live'
+import { teamColor } from '../../utils'
+import { useAutoAnimate } from '@formkit/auto-animate/react'
 
 interface Props {
   messages: LiveRCMessage[]
+  driverInfo?: Record<string, LiveDriverInfo>
 }
 
-export function RaceControlFeed({ messages }: Props) {
+function FormattedMessage({ text, driverInfo }: { text: string, driverInfo?: Record<string, LiveDriverInfo> }) {
-  const latest = latestRaceControl(messages)
+  if (!text) return null;
+  const regex = /(CAR \d+(?: \([A-Z]{3}\))?|DELETED|TRACK LIMITS|INVESTIGATING|NO FURTHER INVESTIGATION|TIME PENALTY|DRIVE THROUGH PENALTY|STOP AND GO PENALTY|BLACK AND WHITE FLAG|DISQUALIFIED)/g;
+  const parts = text.split(regex);
   
   return (
-    <section className="live-rc">
+    <span className="rc-message">
-      <div className="sec-header">
+      {parts.map((part, i) => {
+        if (!part) return null;
+        if (part.startsWith('CAR ')) {
+          let style = {}
+          const match = part.match(/CAR (\d+)/)
+          if (match && driverInfo && driverInfo[match[1]]) {
+            const hex = teamColor(driverInfo[match[1]].TeamColour)
+            style = { 
+              backgroundColor: hex, 
+              color: '#fff', 
+              textShadow: '0 1px 2px rgba(0,0,0,0.5)',
+              border: 'none'
+            }
+          }
+          return <span key={i} className="rc-hlt rc-hlt-car" style={style}>{part}</span>
+        }
+        if (part === 'DELETED' || part.includes('PENALTY') || part === 'DISQUALIFIED') return <span key={i} className="rc-hlt rc-hlt-bad">{part}</span>;
+        if (part === 'TRACK LIMITS' || part === 'INVESTIGATING' || part === 'BLACK AND WHITE FLAG') return <span key={i} className="rc-hlt rc-hlt-warn">{part}</span>;
+        if (part === 'NO FURTHER INVESTIGATION') return <span key={i} className="rc-hlt rc-hlt-ok">{part}</span>;
+        return <span key={i}>{part}</span>;
+      })}
+    </span>
+  )
+}
+
+export function RaceControlFeed({ messages, driverInfo }: Props) {
+  const latest = latestRaceControl(messages)
+  const [listRef] = useAutoAnimate<HTMLDivElement>()
+  const prevMessagesRef = useRef<LiveRCMessage[]>([])
+  const [newKeys, setNewKeys] = useState<Set<string>>(new Set())
+
+  useEffect(() => {
+    const prev = prevMessagesRef.current
+    if (prev.length > 0 && messages.length > prev.length) {
+      // Find new messages
+      const newlyAdded = messages.filter(
+        (m) => !prev.some((p) => p.Time === m.Time && p.Message === m.Message)
+      )
+      
+      if (newlyAdded.length > 0) {
+        const keys = newlyAdded.map((m) => `${m.Time}-${m.Message}`)
+        setNewKeys((current) => {
+          const updated = new Set(current)
+          keys.forEach(k => updated.add(k))
+          return updated
+        })
+
+        // Clear highlight after 3 seconds
+        setTimeout(() => {
+          setNewKeys((current) => {
+            const updated = new Set(current)
+            keys.forEach(k => updated.delete(k))
+            return updated
+          })
+        }, 3000)
+      }
+    }
+    prevMessagesRef.current = messages
+  }, [messages])
+
+  return (
+    <section className="live-rc panel-glass">
+      <div className="sec-header sticky-header">
         <span className="sec-title">Race Control</span>
         {messages.length > 0 && <span className="sec-meta">{messages.length} messages</span>}
       </div>
       {latest.length === 0 ? (
         <div className="missing-notice">No race control messages in the current live snapshot.</div>
       ) : (
-        <div className="live-rc-list live-rc-scroll">
+        <div className="live-rc-list live-rc-scroll" ref={listRef}>
-          {latest.map((message, index) => (
+          {latest.map((message, index) => {
-            <div className="live-rc-row" key={`${message.Time}-${message.Message}-${index}`}>
+            const key = `${message.Time}-${message.Message}`
-              <span className="rc-time">{message.Time || '--:--'}</span>
+            const isNew = newKeys.has(key)
-              {message.Lap > 0 && <span className="rc-lap">L{message.Lap}</span>}
+            let flashClass = ''
-              {message.Flag
+            if (isNew) {
-                ? <span className={`rc-flag ${rcFlagClass(message.Flag)}`}>{message.Flag}</span>
+              if (message.Flag === 'YELLOW' || message.Flag === 'DOUBLE YELLOW') {
-                : message.Category && message.Category !== 'Other'
+                flashClass = ' rc-item-yellow'
-                  ? <span className="rc-category">{message.Category}</span>
+              } else if (message.Flag === 'RED') {
-                  : null
+                flashClass = ' rc-item-red'
+              } else {
+                flashClass = ' rc-item-new'
               }
-              <span className="rc-message">{message.Message}</span>
+            }
-            </div>
+
-          ))}
+            return (
+              <div className={`live-rc-row${flashClass}`} key={key}>
+                <span className="rc-time">{message.Time || '--:--'}</span>
+                {message.Lap > 0 && <span className="rc-lap">L{message.Lap}</span>}
+                {message.Flag
+                  ? <span className={`rc-flag ${rcFlagClass(message.Flag)}`}>{message.Flag}</span>
+                  : message.Category && message.Category !== 'Other'
+                    ? <span className="rc-category">{message.Category}</span>
+                    : null
+                }
+                <FormattedMessage text={message.Message} driverInfo={driverInfo} />
+              </div>
+            )
+          })}
         </div>
       )}
     </section>

frontend/src/components/live/SessionBanner.tsx

@@ -1,5 +1,6 @@
 import type { LiveStreamData } from '../../types'
-import { extrapolateClock, trackStatusClass, trackStatusLabel } from '../../lib/live'
+import { extrapolateClock } from '../../lib/live'
+import { WeatherStrip } from './WeatherStrip'
 
 interface Props {
   isLive: boolean
@@ -11,9 +12,6 @@ interface Props {
 export function SessionBanner({ isLive, snapshot, connection, now }: Props) {
   const session = snapshot.Session
   const clock = extrapolateClock(snapshot.Clock, snapshot.ClockRefTime, snapshot.ClockExtrapolating, now)
-  const status = snapshot.TrackStatus ? trackStatusLabel(snapshot.TrackStatus) : ''
-  const weather = snapshot.Weather
-  const hasWeather = weather && (weather.AirTemp > 0 || weather.TrackTemp > 0)
 
   return (
     <section className="live-banner">
@@ -28,7 +26,6 @@ export function SessionBanner({ isLive, snapshot, connection, now }: Props) {
           </div>
         </div>
         <div className="live-banner-meta">
-          {status && <span className={`track-status ${trackStatusClass(snapshot.TrackStatus)}`}>{status}</span>}
           <span className="mono">
             L<strong>{snapshot.CurrentLap || '-'}</strong>/<strong>{snapshot.TotalLaps || '-'}</strong>
           </span>
@@ -36,15 +33,7 @@ export function SessionBanner({ isLive, snapshot, connection, now }: Props) {
           <span className={isLive ? 'live-state live-state-on' : 'live-state'}>{isLive ? 'live' : 'stale'}</span>
         </div>
       </div>
-      {hasWeather && (
+      <WeatherStrip weather={snapshot.Weather} />
-        <div className="live-weather-strip">
-          <span>{weather.AirTemp.toFixed(0)}° air</span>
-          <span>{weather.TrackTemp.toFixed(0)}° track</span>
-          {weather.Humidity > 0 && <span>{weather.Humidity.toFixed(0)}% humidity</span>}
-          {weather.WindSpeed > 0 && <span>{weather.WindSpeed.toFixed(1)} m/s</span>}
-          {weather.Rainfall && <span className="badge badge-wet">WET</span>}
-        </div>
-      )}
     </section>
   )
 }

frontend/src/components/live/StintHistory.tsx

@@ -0,0 +1,29 @@
+import type { LiveStintData } from '../../types'
+import { compoundClass, compoundLetter } from '../../lib/live'
+
+interface Props {
+  stints: LiveStintData[] | undefined
+}
+
+export function StintHistory({ stints }: Props) {
+  if (!stints || stints.length === 0) {
+    return <span className="stint-empty">-</span>
+  }
+
+  return (
+    <span className="stint-seq" data-testid="stint-seq">
+      {stints.map((stint, index) => (
+        <span className="stint-item" key={index}>
+          {index > 0 && <span className="stint-arrow">›</span>}
+          <span
+            className={`stint-dot ${compoundClass(stint.Compound)}`}
+            title={`${stint.Compound || 'Unknown'}${stint.New ? ' (new)' : ''} · ${stint.Laps} laps`}
+          >
+            {compoundLetter(stint.Compound)}
+          </span>
+          {stint.Laps > 0 && <span className="stint-laps">{stint.Laps}</span>}
+        </span>
+      ))}
+    </span>
+  )
+}

frontend/src/components/live/TimingTower.tsx

@@ -1,16 +1,28 @@
+import { useState, Fragment } from 'react'
 import { teamColor } from '../../utils'
-import type { LiveStreamData } from '../../types'
+import { useAutoAnimate } from '@formkit/auto-animate/react'
+import type { LiveStintData } from '../../types'
+import type { LiveTimingRow } from '../../lib/live'
 import {
   driverCode,
   positionDelta,
   positionDeltaClass,
-  sortLiveTimingRows,
   tyreClass,
   tyreLabel,
 } from '../../lib/live'
+import type { GapHistoryMap } from '../../lib/gapHistory'
+import { GapSparkline } from './GapSparkline'
+import { StintHistory } from './StintHistory'
+import { Pin } from 'lucide-react'
 
 interface Props {
-  snapshot: LiveStreamData
+  rows: LiveTimingRow[]
+  stints?: Record<string, LiveStintData[]>
+  history?: GapHistoryMap
+  battleNumbers?: Set<string>
+  pinned?: string[]
+  onTogglePin?: (racingNumber: string) => void
+  sessionType?: string
 }
 
 function posClass(pos: number): string {
@@ -20,8 +32,18 @@ function posClass(pos: number): string {
   return 'pos-n'
 }
 
-export function TimingTower({ snapshot }: Props) {
+export function TimingTower({
-  const rows = sortLiveTimingRows(snapshot)
+  rows,
+  stints,
+  history,
+  battleNumbers,
+  pinned,
+  onTogglePin,
+  sessionType = '',
+}: Props) {
+  const [expandedRow, setExpandedRow] = useState<string | null>(null)
+  const [gapMode, setGapMode] = useState<'interval' | 'leader'>('interval')
+  const [listRef] = useAutoAnimate<HTMLTableSectionElement>({ duration: 300, easing: 'ease-out' })
 
   if (rows.length === 0) {
     return (
@@ -31,62 +53,164 @@ export function TimingTower({ snapshot }: Props) {
     )
   }
 
+  const sType = sessionType.toLowerCase()
+  const isRace = sType.includes('race') || sType.includes('sprint')
+  const isQuali = sType.includes('qualifying') || sType.includes('practice') || !isRace
+
+  const isQ1 = sType === 'qualifying 1' || sType.includes('q1')
+  const isQ2 = sType === 'qualifying 2' || sType.includes('q2')
+
   return (
     <div className="scroll-x">
-      <table className="data-table live-tower" style={{ minWidth: 480 }}>
+      <table className="data-table live-tower" style={{ minWidth: 620 }}>
         <thead>
           <tr>
             <th>Pos</th>
-            <th>Δ</th>
+            {isRace && <th>Δ</th>}
             <th>Driver</th>
             <th>Tyre</th>
             <th>Last Lap</th>
-            <th>Gap</th>
+            <th 
+              className="interactive" 
+              onClick={() => setGapMode(g => g === 'interval' ? 'leader' : 'interval')}
+              title="Click to toggle Gap vs Interval"
+              style={{ cursor: 'pointer', textDecoration: 'underline' }}
+            >
+              {gapMode === 'interval' && isRace ? 'Interval' : 'Gap to P1'}
+            </th>
+            {isRace && <th>Trend</th>}
+            {isQuali && <th>S1</th>}
+            {isQuali && <th>S2</th>}
+            {isQuali && <th>S3</th>}
             <th className="hide-mobile">Best</th>
-            <th className="hide-mobile r">Laps</th>
+            {isRace && <th className="hide-mobile r">Laps</th>}
+            <th className="r"></th>
           </tr>
         </thead>
-        <tbody>
+        <tbody ref={listRef}>
           {rows.map((row) => {
             const driver = row.Driver
             const delta = positionDelta(driver)
             const deltaClass = positionDeltaClass(driver)
+            const isPinned = pinned?.includes(row.RacingNumber) ?? false
+            const inBattle = battleNumbers?.has(row.RacingNumber) ?? false
+            const isExpanded = expandedRow === row.RacingNumber
+            
+            // Knockout zone border
+            let koClass = ''
+            if (isQuali && (isQ1 || isQ2)) {
+              if (isQ1 && row.Position === 15) koClass = 'ko-line-p15'
+              if (isQ2 && row.Position === 10) koClass = 'ko-line-p10'
+            } else if (isQuali) {
+               if (row.Position === 15) koClass = 'ko-line-p15'
+               if (row.Position === 10) koClass = 'ko-line-p10'
+            }
+
+            const gapText = gapMode === 'interval' && isRace ? (driver.Interval || driver.GapToLeader) : driver.GapToLeader
+            
+            // Render micro sectors
+            const renderSector = (idx: number) => {
+              const sec = driver.Sectors?.[idx]
+              if (!sec) return '-'
+              let sClass = 'mono'
+              if (sec.OverallFastest) sClass = 'mono txt-purple'
+              else if (sec.PersonalFastest) sClass = 'mono txt-green'
+              else if (sec.Value) sClass = 'mono txt-yellow'
+              return <span className={sClass}>{sec.Value || '-'}</span>
+            }
+
             return (
-              <tr
+              <Fragment key={row.RacingNumber}>
-                key={row.RacingNumber}
+                <tr
-                className={[
+                  className={[
-                  driver.InPit ? 'in-pit' : '',
+                    driver.InPit ? 'in-pit' : '',
-                  driver.PitOut ? 'pit-out' : '',
+                    driver.PitOut ? 'pit-out' : '',
-                  driver.Retired ? 'retired' : '',
+                    driver.Retired ? 'retired' : '',
-                ].filter(Boolean).join(' ')}
+                    inBattle ? 'battle-row' : '',
-              >
+                    isPinned ? 'pinned-row' : '',
-                <td className={`mono ${posClass(row.Position)}`}>{row.Position}</td>
+                    koClass,
-                <td className={`pos-delta${deltaClass ? ` ${deltaClass}` : ''}`}>{delta}</td>
+                    'interactive-row'
-                <td>
+                  ].filter(Boolean).join(' ')}
-                  <div className="drv-cell">
+                  onClick={() => setExpandedRow(isExpanded ? null : row.RacingNumber)}
-                    <div className="drv-bar" style={{ background: teamColor(row.Info?.TeamColour) }} />
+                  style={{ cursor: 'pointer' }}
-                    <span className="drv-code">{driverCode(row)}</span>
+                >
-                    <span className="drv-num">{row.RacingNumber}</span>
+                  <td className={`mono ${posClass(row.Position)}`}>{row.Position}</td>
-                    {driver.InPit && <span className="badge badge-pit">PIT</span>}
+                  {isRace && <td className={`pos-delta${deltaClass ? ` ${deltaClass}` : ''}`}>{delta}</td>}
-                    {driver.PitOut && !driver.InPit && <span className="badge badge-pit">OUT</span>}
+                  <td>
-                    {driver.Retired && <span className="badge badge-out">RET</span>}
+                    <div className="drv-cell">
-                    {driver.KnockedOut && <span className="badge badge-knocked">KO</span>}
+                      <div className="drv-bar" style={{ background: teamColor(row.Info?.TeamColour) }} />
-                    {driver.Cutoff && !driver.KnockedOut && <span className="badge badge-cutoff">CUT</span>}
+                      <span className="drv-code">{driverCode(row)}</span>
-                    {driver.OnFlyingLap && <span className="badge badge-flying">FL</span>}
+                      <span className="drv-num">{row.RacingNumber}</span>
-                  </div>
+                      {driver.InPit && <span className="badge badge-pit">PIT</span>}
-                </td>
+                      {driver.PitOut && !driver.InPit && <span className="badge badge-pit">OUT</span>}
-                <td>
+                      {driver.Retired && <span className="badge badge-out">RET</span>}
-                  <span className={`tyre-badge ${tyreClass(row.Tyre)}`}>{tyreLabel(row.Tyre)}</span>
+                      {driver.KnockedOut && <span className="badge badge-knocked">KO</span>}
-                </td>
+                      {driver.Cutoff && !driver.KnockedOut && <span className="badge badge-cutoff">CUT</span>}
-                <td className={driver.LastLapOB ? 'mono lap-ob' : driver.LastLapPB ? 'mono lap-pb' : 'mono'}>
+                      {driver.OnFlyingLap && <span className="badge badge-flying">FL</span>}
-                  {driver.LastLapTime || '-'}
+                    </div>
-                </td>
+                  </td>
-                <td className="mono">{driver.GapToLeader || driver.Interval || '-'}</td>
+                  <td>
-                <td className={`hide-mobile ${driver.BestLapOB ? 'mono lap-ob' : 'mono'}`}>
+                    <span className={`tyre-badge ${tyreClass(row.Tyre)}`}>{tyreLabel(row.Tyre)}</span>
-                  {driver.BestLapTime || '-'}
+                  </td>
-                </td>
+                  <td className={driver.LastLapOB ? 'mono lap-ob' : driver.LastLapPB ? 'mono lap-pb' : 'mono'}>
-                <td className="hide-mobile mono r">{driver.NumberOfLaps || '-'}</td>
+                    {driver.LastLapTime || '-'}
-              </tr>
+                  </td>
+                  <td className="mono">{gapText || '-'}</td>
+                  
+                  {isRace && (
+                    <td className="spark-cell">
+                      <GapSparkline samples={history?.[row.RacingNumber]} />
+                    </td>
+                  )}
+
+                  {isQuali && <td>{renderSector(0)}</td>}
+                  {isQuali && <td>{renderSector(1)}</td>}
+                  {isQuali && <td>{renderSector(2)}</td>}
+
+                  <td className={`hide-mobile ${driver.BestLapOB ? 'mono lap-ob' : 'mono'}`}>
+                    {driver.BestLapTime || '-'}
+                  </td>
+                  
+                  {isRace && <td className="hide-mobile mono r">{driver.NumberOfLaps || '-'}</td>}
+
+                  <td className="r">
+                     {onTogglePin && (
+                        <button 
+                          className="pin-btn interactive" 
+                          onClick={(e) => { e.stopPropagation(); onTogglePin(row.RacingNumber); }}
+                          style={{ opacity: isPinned ? 1 : 0.3, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text)' }}
+                          title={isPinned ? 'Unpin driver' : 'Pin driver'}
+                        >
+                          <Pin size={14} fill={isPinned ? 'currentColor' : 'none'} />
+                        </button>
+                     )}
+                  </td>
+                </tr>
+                {isExpanded && (
+                   <tr className="expanded-row">
+                      <td colSpan={12} style={{ padding: '16px', background: 'rgba(255,255,255,0.02)', borderBottom: '1px solid var(--border)' }}>
+                         <div style={{ display: 'flex', gap: '24px', alignItems: 'center' }}>
+                            <div>
+                               <div className="mono" style={{ color: 'var(--text-3)', fontSize: '10px', marginBottom: '4px' }}>STINTS</div>
+                               <StintHistory stints={stints?.[row.RacingNumber]} />
+                            </div>
+                            {!isRace && (
+                              <div>
+                                 <div className="mono" style={{ color: 'var(--text-3)', fontSize: '10px', marginBottom: '4px' }}>LAPS</div>
+                                 <div className="mono">{driver.NumberOfLaps || 0}</div>
+                              </div>
+                            )}
+                            {driver.SpeedTrap && (
+                              <div>
+                                 <div className="mono" style={{ color: 'var(--text-3)', fontSize: '10px', marginBottom: '4px' }}>SPEED TRAP</div>
+                                 <div className="mono">{driver.SpeedTrap} km/h</div>
+                              </div>
+                            )}
+                         </div>
+                      </td>
+                   </tr>
+                )}
+              </Fragment>
             )
           })}
         </tbody>

frontend/src/components/live/TrackStatusBanner.tsx

@@ -0,0 +1,17 @@
+import { trackStatusInfo } from '../../lib/live'
+
+interface Props {
+  status: string | null | undefined
+}
+
+export function TrackStatusBanner({ status }: Props) {
+  if (!status) return null
+  const info = trackStatusInfo(status)
+
+  return (
+    <div className={`track-banner track-banner-${info.key}`} role="status" data-testid="track-banner">
+      <span className="track-banner-label">{info.label}</span>
+      {info.detail && <span className="track-banner-detail">{info.detail}</span>}
+    </div>
+  )
+}

frontend/src/components/live/WeatherStrip.tsx

@@ -0,0 +1,51 @@
+import type { LiveWeatherData } from '../../types'
+import { windDirectionLabel } from '../../lib/live'
+
+interface Props {
+  weather: LiveWeatherData | null | undefined
+}
+
+export function WeatherStrip({ weather }: Props) {
+  if (!weather) return null
+  const hasData =
+    weather.AirTemp > 0 ||
+    weather.TrackTemp > 0 ||
+    weather.Humidity > 0 ||
+    weather.WindSpeed > 0 ||
+    weather.Rainfall
+  if (!hasData) return null
+
+  const windDir = windDirectionLabel(weather.WindDir)
+
+  return (
+    <div className="live-weather-strip" data-testid="weather-strip">
+      {weather.AirTemp > 0 && (
+        <span className="weather-item">
+          <span className="weather-k">air</span>
+          <span className="weather-v">{weather.AirTemp.toFixed(0)}°C</span>
+        </span>
+      )}
+      {weather.TrackTemp > 0 && (
+        <span className="weather-item">
+          <span className="weather-k">track</span>
+          <span className="weather-v">{weather.TrackTemp.toFixed(0)}°C</span>
+        </span>
+      )}
+      {weather.Humidity > 0 && (
+        <span className="weather-item">
+          <span className="weather-k">hum</span>
+          <span className="weather-v">{weather.Humidity.toFixed(0)}%</span>
+        </span>
+      )}
+      {weather.WindSpeed > 0 && (
+        <span className="weather-item">
+          <span className="weather-k">wind</span>
+          <span className="weather-v">
+            {weather.WindSpeed.toFixed(1)} m/s{windDir ? ` ${windDir}` : ''}
+          </span>
+        </span>
+      )}
+      {weather.Rainfall && <span className="badge badge-wet">RAIN</span>}
+    </div>
+  )
+}

frontend/src/lib/battles.ts

@@ -0,0 +1,107 @@
+// Battle detection for the live timing tower.
+// Pure functions only — no React, no side effects — so everything is unit-testable.
+
+import type { LiveTimingRow } from './live'
+import { driverCode } from './live'
+import { parseIntervalSeconds } from './gapHistory'
+
+export const BATTLE_THRESHOLD_SECONDS = 1.0
+
+export interface BattleDriver {
+  racingNumber: string
+  code: string
+  position: number
+  /** Interval to the car ahead within the group; null for the group leader. */
+  gapToAhead: number | null
+}
+
+export interface Battle {
+  drivers: BattleDriver[]
+  /** Tightest car-to-car interval within the group. */
+  minGap: number
+}
+
+/** Battles are only meaningful in race-type sessions (GP race, sprint). */
+export function isRaceSession(sessionType: string | null | undefined): boolean {
+  if (!sessionType) return false
+  const type = sessionType.toLowerCase()
+  return type.includes('race') || type.includes('sprint')
+}
+
+function isEligible(row: LiveTimingRow): boolean {
+  const driver = row.Driver
+  return Boolean(driver) && !driver.InPit && !driver.Retired && row.Position > 0
+}
+
+/**
+ * Scan position-sorted tower rows and group consecutive cars racing within
+ * `threshold` seconds of the car ahead. Cars in the pits or retired break
+ * the chain, as do lapped/unparsable intervals.
+ */
+export function detectBattles(
+  rows: ReadonlyArray<LiveTimingRow>,
+  sessionType: string | null | undefined,
+  threshold = BATTLE_THRESHOLD_SECONDS,
+): Battle[] {
+  if (!isRaceSession(sessionType) || rows.length < 2) return []
+
+  const battles: Battle[] = []
+  let current: BattleDriver[] | null = null
+  let minGap = Number.POSITIVE_INFINITY
+
+  const flush = () => {
+    if (current && current.length >= 2) {
+      battles.push({ drivers: current, minGap })
+    }
+    current = null
+    minGap = Number.POSITIVE_INFINITY
+  }
+
+  for (let i = 1; i < rows.length; i++) {
+    const ahead = rows[i - 1]
+    const row = rows[i]
+    const gap = parseIntervalSeconds(row.Driver?.Interval)
+
+    const inBattle =
+      gap !== null && gap >= 0 && gap <= threshold && isEligible(ahead) && isEligible(row)
+
+    if (!inBattle) {
+      flush()
+      continue
+    }
+
+    if (!current) {
+      current = [toBattleDriver(ahead, null)]
+    }
+    current.push(toBattleDriver(row, gap))
+    if (gap < minGap) minGap = gap
+  }
+  flush()
+
+  return battles
+}
+
+function toBattleDriver(row: LiveTimingRow, gapToAhead: number | null): BattleDriver {
+  return {
+    racingNumber: row.RacingNumber,
+    code: driverCode(row),
+    position: row.Position,
+    gapToAhead,
+  }
+}
+
+/** Chip label, e.g. "VER ⚔ NOR +0.4" or "VER ⚔ NOR ⚔ PIA +0.3". */
+export function battleLabel(battle: Battle): string {
+  const codes = battle.drivers.map((driver) => driver.code).join(' ⚔ ')
+  const gap = Number.isFinite(battle.minGap) ? ` +${battle.minGap.toFixed(1)}` : ''
+  return `${codes}${gap}`
+}
+
+/** Racing numbers involved in any battle, for tower row highlighting. */
+export function battleNumbers(battles: ReadonlyArray<Battle>): Set<string> {
+  const numbers = new Set<string>()
+  for (const battle of battles) {
+    for (const driver of battle.drivers) numbers.add(driver.racingNumber)
+  }
+  return numbers
+}

frontend/src/lib/gapHistory.ts

@@ -0,0 +1,108 @@
+// Client-side gap/interval history tracking for the live timing tower.
+// Pure functions only — no React, no side effects — so everything is unit-testable.
+
+export const MAX_GAP_SAMPLES = 40
+
+/** Per-driver ring buffer of interval samples (seconds), keyed by racing number. */
+export type GapHistoryMap = Record<string, number[]>
+
+export type GapTrend = 'closing' | 'opening' | 'steady'
+
+/**
+ * Parse an F1 live-timing interval/gap string into seconds.
+ * Handles "+1.234", "1.234", "+1:05.678" (minute form) and rejects
+ * lapped/leader markers: "", "LAP 12", "1L", "+1 LAP", "2 LAPS", etc.
+ */
+export function parseIntervalSeconds(raw: string | null | undefined): number | null {
+  if (!raw) return null
+  const text = raw.trim()
+  if (!text) return null
+  // Lapped / leader markers are never numeric gaps.
+  if (/lap/i.test(text) || /^\+?\d+\s*L$/i.test(text)) return null
+
+  const match = text.match(/^([+-])?(?:(\d+):)?(\d+(?:\.\d+)?)$/)
+  if (!match) return null
+
+  const sign = match[1] === '-' ? -1 : 1
+  const minutes = match[2] ? Number(match[2]) : 0
+  const seconds = Number(match[3])
+  if (!Number.isFinite(minutes) || !Number.isFinite(seconds)) return null
+
+  return sign * (minutes * 60 + seconds)
+}
+
+export interface GapSampleInput {
+  racingNumber: string
+  interval: string
+}
+
+/**
+ * Record one snapshot's worth of interval samples.
+ * Returns a new map (input is not mutated). Drivers missing from `rows`
+ * are pruned; unparsable intervals keep the existing buffer untouched.
+ */
+export function recordGapSamples(
+  history: GapHistoryMap,
+  rows: ReadonlyArray<GapSampleInput>,
+  maxSamples = MAX_GAP_SAMPLES,
+): GapHistoryMap {
+  const next: GapHistoryMap = {}
+  for (const row of rows) {
+    if (!row.racingNumber) continue
+    const existing = history[row.racingNumber] ?? []
+    const value = parseIntervalSeconds(row.interval)
+    if (value === null) {
+      if (existing.length > 0) next[row.racingNumber] = existing
+      continue
+    }
+    const samples = [...existing, value]
+    next[row.racingNumber] = samples.length > maxSamples ? samples.slice(samples.length - maxSamples) : samples
+  }
+  return next
+}
+
+/**
+ * Classify the recent trend of a gap buffer: is the driver closing on the
+ * car ahead, dropping back, or holding steady? Compares the mean of the
+ * older half vs the newer half of the most recent samples.
+ */
+export function gapTrend(samples: ReadonlyArray<number>, window = 10, threshold = 0.1): GapTrend | null {
+  if (!samples || samples.length < 3) return null
+  const recent = samples.slice(-window)
+  const mid = Math.floor(recent.length / 2)
+  const older = recent.slice(0, mid)
+  const newer = recent.slice(mid)
+  if (older.length === 0 || newer.length === 0) return null
+
+  const mean = (xs: ReadonlyArray<number>) => xs.reduce((a, b) => a + b, 0) / xs.length
+  const delta = mean(newer) - mean(older)
+  if (delta <= -threshold) return 'closing'
+  if (delta >= threshold) return 'opening'
+  return 'steady'
+}
+
+/**
+ * Compute SVG polyline points for a sparkline of the samples, fitted to
+ * width x height with a small vertical inset. Flat data draws a mid line.
+ */
+export function sparklinePoints(
+  samples: ReadonlyArray<number>,
+  width: number,
+  height: number,
+  inset = 1.5,
+): string {
+  if (!samples || samples.length < 2) return ''
+  const min = Math.min(...samples)
+  const max = Math.max(...samples)
+  const span = max - min
+  const usable = height - inset * 2
+  const step = width / (samples.length - 1)
+
+  return samples
+    .map((value, index) => {
+      const x = index * step
+      const y = span === 0 ? height / 2 : inset + (1 - (value - min) / span) * usable
+      return `${x.toFixed(1)},${y.toFixed(1)}`
+    })
+    .join(' ')
+}

frontend/src/lib/live.ts

@@ -21,6 +21,35 @@ const TRACK_STATUS_LABELS: Record<string, string> = {
   '4': 'SC',
   '5': 'RED',
   '6': 'VSC',
+  '7': 'VSC ENDING',
+}
+
+export interface TrackStatusInfo {
+  key: 'green' | 'yellow' | 'sc' | 'vsc' | 'red' | 'unknown'
+  label: string
+  detail: string
+}
+
+// Raw F1 SignalR TrackStatus.Status values (see internal/live/types.go):
+// "1"=all clear, "2"=yellow, "4"=safety car, "5"=red, "6"=VSC, "7"=VSC ending.
+// "3" has not been observed in the feed; unknown values fall through to a
+// neutral display so a new encoding never breaks the banner.
+const TRACK_STATUS_INFO: Record<string, TrackStatusInfo> = {
+  '1': { key: 'green', label: 'TRACK CLEAR', detail: 'Green flag — racing' },
+  '2': { key: 'yellow', label: 'YELLOW FLAG', detail: 'Caution on track' },
+  '4': { key: 'sc', label: 'SAFETY CAR', detail: 'Safety car deployed' },
+  '5': { key: 'red', label: 'RED FLAG', detail: 'Session stopped' },
+  '6': { key: 'vsc', label: 'VIRTUAL SAFETY CAR', detail: 'VSC deployed' },
+  '7': { key: 'vsc', label: 'VSC ENDING', detail: 'Virtual safety car ending' },
+}
+
+export function trackStatusInfo(status: string | null | undefined): TrackStatusInfo {
+  if (status && TRACK_STATUS_INFO[status]) return TRACK_STATUS_INFO[status]
+  return {
+    key: 'unknown',
+    label: status ? `TRACK STATUS ${status}` : 'TRACK STATUS UNKNOWN',
+    detail: '',
+  }
 }
 
 export function parseLiveStateEvent(data: string): LiveStateResponse | null {
@@ -90,10 +119,6 @@ export function trackStatusLabel(status: string): string {
   return TRACK_STATUS_LABELS[status] || status || 'UNKNOWN'
 }
 
-export function trackStatusClass(status: string): string {
-  return `track-${trackStatusLabel(status).toLowerCase()}`
-}
-
 export function positionDelta(driver: LiveDriverData): string {
   if (!driver.PrevPosition || !driver.Position || driver.PrevPosition === driver.Position) return ''
   return driver.PrevPosition > driver.Position ? '▲' : '▼'
@@ -132,10 +157,68 @@ export function tyreLabel(tyre: LiveTyreData | undefined): string {
   return `${compound} +${tyre.Age || 0}`
 }
 
+export function compoundClass(compound: string | null | undefined): string {
+  if (!compound) return 'tyre-unknown'
+  const normalized = compound.toLowerCase()
+  return `tyre-${normalized === 'intermediate' ? 'inter' : normalized}`
+}
+
+export function compoundLetter(compound: string | null | undefined): string {
+  return compound?.charAt(0).toUpperCase() || '?'
+}
+
 export function tyreClass(tyre: LiveTyreData | undefined): string {
-  if (!tyre?.Compound) return 'tyre-unknown'
+  return compoundClass(tyre?.Compound)
-  const compound = tyre.Compound.toLowerCase()
+}
-  return `tyre-${compound === 'intermediate' ? 'inter' : compound}`
+
+export function windDirectionLabel(degrees: number | null | undefined): string {
+  if (degrees == null || !Number.isFinite(degrees)) return ''
+  const points = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW']
+  const index = Math.round((((degrees % 360) + 360) % 360) / 45) % 8
+  return points[index]
+}
+
+export const MAX_PINNED_DRIVERS = 3
+
+/**
+ * Toggle a driver pin. Unpins if already pinned; otherwise appends,
+ * dropping the oldest pin when at capacity so clicking always works.
+ */
+export function togglePin(pins: ReadonlyArray<string>, racingNumber: string, max = MAX_PINNED_DRIVERS): string[] {
+  if (!racingNumber) return [...pins]
+  if (pins.includes(racingNumber)) return pins.filter((pin) => pin !== racingNumber)
+  const next = [...pins, racingNumber]
+  return next.length > max ? next.slice(next.length - max) : next
+}
+
+const PINS_STORAGE_KEY = 'box-box.live.pins'
+
+export function loadPinnedDrivers(storage: Pick<Storage, 'getItem'> | null = safeStorage()): string[] {
+  try {
+    const raw = storage?.getItem(PINS_STORAGE_KEY)
+    if (!raw) return []
+    const parsed = JSON.parse(raw)
+    if (!Array.isArray(parsed)) return []
+    return parsed.filter((pin): pin is string => typeof pin === 'string').slice(0, MAX_PINNED_DRIVERS)
+  } catch {
+    return []
+  }
+}
+
+export function savePinnedDrivers(pins: ReadonlyArray<string>, storage: Pick<Storage, 'setItem'> | null = safeStorage()): void {
+  try {
+    storage?.setItem(PINS_STORAGE_KEY, JSON.stringify(pins))
+  } catch {
+    // storage unavailable (private mode, SSR) — pins just won't persist
+  }
+}
+
+function safeStorage(): Storage | null {
+  try {
+    return typeof window !== 'undefined' ? window.localStorage : null
+  } catch {
+    return null
+  }
 }
 
 export function latestRaceControl(messages: LiveRCMessage[], limit = 10): LiveRCMessage[] {

frontend/src/lib/simulator.ts

@@ -0,0 +1,183 @@
+// Championship simulator: project the drivers' championship over the
+// remaining rounds from per-round finishing assignments.
+// Pure functions only — no React, no side effects — so everything is unit-testable.
+
+import type { ChampHubDriver } from '../types'
+
+/** Current F1 points system for P1–P10. No fastest-lap point (dropped in 2025). */
+export const POINTS_BY_POSITION = [25, 18, 15, 12, 10, 8, 6, 4, 2, 1] as const
+
+/** Number of points-scoring positions per round. */
+export const SCORING_POSITIONS = POINTS_BY_POSITION.length
+
+/** Maximum points a single driver can take from one round. */
+export const MAX_POINTS_PER_ROUND = POINTS_BY_POSITION[0]
+
+/**
+ * One remaining round: driver numbers assigned to P1–P10 (index 0 = P1).
+ * `null` means the position is unassigned (nobody scores those points).
+ */
+export type RoundAssignment = (number | null)[]
+
+/** One assignment per remaining round, in chronological order. */
+export type Scenario = RoundAssignment[]
+
+/** Points for a 1-based finishing position; 0 outside the top ten. */
+export function pointsForPosition(position: number): number {
+  if (!Number.isInteger(position) || position < 1 || position > SCORING_POSITIONS) return 0
+  return POINTS_BY_POSITION[position - 1]
+}
+
+/** An empty round: all ten scoring positions unassigned. */
+export function emptyRound(): RoundAssignment {
+  return Array.from({ length: SCORING_POSITIONS }, () => null)
+}
+
+/** Drivers sorted by current championship order (points desc, position asc). */
+function championshipOrder(drivers: ReadonlyArray<ChampHubDriver>): ChampHubDriver[] {
+  return [...drivers].sort((a, b) => b.points - a.points || a.position - b.position)
+}
+
+/**
+ * Default assignment for one round: the top ten drivers in current
+ * championship order finish P1–P10.
+ */
+export function defaultRound(drivers: ReadonlyArray<ChampHubDriver>): RoundAssignment {
+  const ordered = championshipOrder(drivers)
+  const round = emptyRound()
+  for (let i = 0; i < SCORING_POSITIONS; i++) {
+    round[i] = ordered[i]?.driver_number ?? null
+  }
+  return round
+}
+
+/** Default scenario: every remaining round finishes in current championship order. */
+export function defaultScenario(drivers: ReadonlyArray<ChampHubDriver>, roundsLeft: number): Scenario {
+  const rounds = Math.max(0, Math.floor(roundsLeft) || 0)
+  return Array.from({ length: rounds }, () => defaultRound(drivers))
+}
+
+/**
+ * Validate an untrusted (e.g. localStorage) scenario against the current hub.
+ * Rounds with the wrong shape, unknown driver numbers, or duplicate drivers
+ * fall back to the default round; the scenario is trimmed/padded to
+ * `roundsLeft`. Never throws.
+ */
+export function normalizeScenario(
+  raw: unknown,
+  drivers: ReadonlyArray<ChampHubDriver>,
+  roundsLeft: number,
+): Scenario {
+  const fallback = defaultScenario(drivers, roundsLeft)
+  if (!Array.isArray(raw)) return fallback
+
+  const known = new Set(drivers.map((d) => d.driver_number))
+  return fallback.map((defRound, i) => {
+    const candidate = raw[i]
+    if (!Array.isArray(candidate) || candidate.length !== SCORING_POSITIONS) return defRound
+    const seen = new Set<number>()
+    const round = emptyRound()
+    for (let p = 0; p < SCORING_POSITIONS; p++) {
+      const v = candidate[p]
+      if (v === null) continue
+      if (typeof v !== 'number' || !known.has(v) || seen.has(v)) return defRound
+      seen.add(v)
+      round[p] = v
+    }
+    return round
+  })
+}
+
+/** Total simulated (extra) points per driver number across the scenario. */
+export function simulatedPoints(scenario: Scenario): Map<number, number> {
+  const totals = new Map<number, number>()
+  for (const round of scenario) {
+    if (!Array.isArray(round)) continue
+    for (let p = 0; p < Math.min(round.length, SCORING_POSITIONS); p++) {
+      const driverNumber = round[p]
+      if (driverNumber == null) continue
+      totals.set(driverNumber, (totals.get(driverNumber) ?? 0) + POINTS_BY_POSITION[p])
+    }
+  }
+  return totals
+}
+
+export interface ProjectedDriver {
+  driver: ChampHubDriver
+  currentPoints: number
+  simPoints: number
+  projectedPoints: number
+  currentPosition: number
+  projectedPosition: number
+  /** Positive = moved up the standings, negative = dropped. */
+  delta: number
+  /** Mathematically alive for the title under the max-points-remaining bound. */
+  titleAlive: boolean
+}
+
+/**
+ * Project final standings from current standings plus a scenario.
+ * Ties on projected points keep the driver with the better current position ahead.
+ *
+ * Title math: a driver is mathematically alive if
+ *   current points + 25 × rounds left ≥ current leader's points under the scenario.
+ * The current leader is always alive by this bound.
+ */
+export function projectStandings(
+  drivers: ReadonlyArray<ChampHubDriver>,
+  scenario: Scenario,
+  roundsLeft: number,
+): ProjectedDriver[] {
+  if (drivers.length === 0) return []
+
+  const extras = simulatedPoints(scenario)
+  const ordered = championshipOrder(drivers)
+  const leader = ordered[0]
+  const leaderProjected = leader.points + (extras.get(leader.driver_number) ?? 0)
+  const maxRemaining = MAX_POINTS_PER_ROUND * Math.max(0, roundsLeft)
+
+  const rows = ordered.map((driver, i) => {
+    const simPoints = extras.get(driver.driver_number) ?? 0
+    return {
+      driver,
+      currentPoints: driver.points,
+      simPoints,
+      projectedPoints: driver.points + simPoints,
+      currentPosition: i + 1,
+      projectedPosition: 0,
+      delta: 0,
+      titleAlive: driver.points + maxRemaining >= leaderProjected,
+    }
+  })
+
+  rows.sort(
+    (a, b) => b.projectedPoints - a.projectedPoints || a.currentPosition - b.currentPosition,
+  )
+  rows.forEach((row, i) => {
+    row.projectedPosition = i + 1
+    row.delta = row.currentPosition - row.projectedPosition
+  })
+  return rows
+}
+
+/**
+ * Assign a driver to a position within one round, returning a new round.
+ * The driver is removed from any other position it held; assigning `null`
+ * clears the slot.
+ */
+export function assignPosition(
+  round: RoundAssignment,
+  positionIndex: number,
+  driverNumber: number | null,
+): RoundAssignment {
+  const next = round.slice(0, SCORING_POSITIONS)
+  while (next.length < SCORING_POSITIONS) next.push(null)
+  if (positionIndex < 0 || positionIndex >= SCORING_POSITIONS) return next
+  if (driverNumber != null) {
+    for (let p = 0; p < next.length; p++) {
+      if (next[p] === driverNumber) next[p] = null
+    }
+  }
+  next[positionIndex] = driverNumber
+  return next
+}

frontend/src/pages/ChampionshipPage.tsx

@@ -0,0 +1,628 @@
+import { useMemo, useState } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { fetchChampionshipHub, fetchSeasons } from '../api'
+import { teamColor } from '../utils'
+import type { ChampHubDriver, ChampionshipHub } from '../types'
+import { ChampionshipSimulator } from '../components/ChampionshipSimulator'
+
+type View = 'drivers' | 'constructors' | 'progression' | 'simulator'
+
+const GOLD = '#ffd700'
+const SILVER = '#c0c0c0'
+const BRONZE = '#cd7f32'
+
+function medalColor(pos: number): string {
+  if (pos === 1) return GOLD
+  if (pos === 2) return SILVER
+  if (pos === 3) return BRONZE
+  return 'var(--text-2)'
+}
+
+function ghostColor(pos: number): string {
+  if (pos === 1) return 'rgba(255,215,0,0.08)'
+  if (pos === 2) return 'rgba(192,192,192,0.07)'
+  if (pos === 3) return 'rgba(205,127,50,0.07)'
+  return 'rgba(255,255,255,0.03)'
+}
+
+function fmtPts(n: number): string {
+  return Number.isInteger(n) ? String(n) : n.toFixed(1)
+}
+
+/** Sparkline polyline points inside a 62×20 box. */
+function sparkPoints(form: number[]): string {
+  if (!form.length) return ''
+  const fmax = Math.max(25, ...form)
+  const n = form.length
+  return form
+    .map((v, k) => {
+      const x = n === 1 ? 0 : (k * 62) / (n - 1)
+      const y = 18 - (fmax > 0 ? (v / fmax) * 16 : 0)
+      return `${x.toFixed(1)},${y.toFixed(1)}`
+    })
+    .join(' ')
+}
+
+interface TeamSplit {
+  driverA: string
+  ptsA: number
+  driverB: string
+  ptsB: number
+  splitA: number
+  splitB: number
+  shareLabel: string
+}
+
+function teamSplit(teamName: string, drivers: ChampHubDriver[]): TeamSplit {
+  const ds = drivers.filter((d) => d.team_name === teamName).sort((a, b) => b.points - a.points)
+  const a = ds[0]
+  const b = ds[1]
+  const ptsA = a?.points ?? 0
+  const ptsB = b?.points ?? 0
+  const total = ptsA + ptsB || 1
+  const splitA = Math.round((ptsA / total) * 100)
+  return {
+    driverA: a?.name_acronym ?? '—',
+    ptsA,
+    driverB: b?.name_acronym ?? '—',
+    ptsB,
+    splitA,
+    splitB: 100 - splitA,
+    shareLabel: `${splitA}/${100 - splitA}`,
+  }
+}
+
+export function ChampionshipPage() {
+  const [view, setView] = useState<View>('drivers')
+
+  const seasonsQuery = useQuery({ queryKey: ['seasons'], queryFn: fetchSeasons })
+  const latestSeason = seasonsQuery.data?.[0] ?? null
+
+  const hubQuery = useQuery({
+    queryKey: ['championship-hub', latestSeason],
+    queryFn: () => fetchChampionshipHub(latestSeason ?? undefined),
+    enabled: latestSeason != null,
+    staleTime: 5 * 60_000,
+  })
+
+  if (seasonsQuery.isLoading || hubQuery.isLoading) {
+    return <div className="page loading-state">loading championship…</div>
+  }
+  if (hubQuery.isError) {
+    return (
+      <div className="page error-box">
+        {hubQuery.error instanceof Error ? hubQuery.error.message : 'Failed to load championship'}
+      </div>
+    )
+  }
+
+  const hub = hubQuery.data
+  if (!hub || hub.drivers.length === 0) {
+    return (
+      <div className="champ-page champ-empty" data-testid="championship-empty">
+        <div className="champ-empty-band">
+          <span className="champ-empty-eyebrow mono">box-box · championship</span>
+          <h1 className="champ-empty-title">No championship data</h1>
+          <p className="champ-empty-sub">
+            Standings for {latestSeason ?? 'this season'} are not available yet. Once race results are
+            ingested they will appear here.
+          </p>
+        </div>
+      </div>
+    )
+  }
+
+  return <ChampionshipBody hub={hub} view={view} setView={setView} />
+}
+
+interface BodyProps {
+  hub: ChampionshipHub
+  view: View
+  setView: (v: View) => void
+}
+
+function ChampionshipBody({ hub, view, setView }: BodyProps) {
+  const { drivers, teams } = hub
+  const leader = drivers[0]
+  const remaining = hub.rounds_left * 25
+
+  const enriched = useMemo<EnrichedDriver[]>(
+    () =>
+      drivers.map((d, i) => {
+        const gapLeaderNum = leader.points - d.points
+        const gapAheadNum = i === 0 ? null : drivers[i - 1].points - d.points
+        const alive = i === 0 || gapLeaderNum <= remaining
+        return {
+          d,
+          pos: d.position,
+          color: teamColor(d.team_colour),
+          gapLeader: i === 0 ? 'LEADER' : `+${fmtPts(gapLeaderNum)}`,
+          gapAhead: gapAheadNum == null ? '—' : `+${fmtPts(gapAheadNum)}`,
+          spark: sparkPoints(d.form),
+          h2h: `${d.teammate_wins}–${d.teammate_losses}`,
+          h2hWin: d.teammate_wins >= d.teammate_losses,
+          aliveLabel: i === 0 ? 'LEADS' : alive ? 'ALIVE' : 'OUT',
+          aliveColor: i === 0 ? GOLD : alive ? 'var(--green)' : 'var(--text-3)',
+        }
+      }),
+    [drivers, leader, remaining],
+  )
+
+  const aliveCount = enriched.filter((e) => e.aliveLabel === 'ALIVE' || e.aliveLabel === 'LEADS').length
+
+  const titleMath =
+    `${aliveCount} driver${aliveCount === 1 ? '' : 's'} can still mathematically win the title. ` +
+    `With ${hub.rounds_left} round${hub.rounds_left === 1 ? '' : 's'} left (max ${remaining} pts), ` +
+    `${leader.name_acronym} leads ` +
+    (drivers[1] ? `${drivers[1].name_acronym} by ${fmtPts(leader.points - drivers[1].points)}` : 'the field') +
+    (drivers[2] ? ` and ${drivers[2].name_acronym} by ${fmtPts(leader.points - drivers[2].points)}.` : '.')
+
+  const topTeam = teams[0]
+  const teamGap = teams[1] ? topTeam.points - teams[1].points : 0
+  const seasonPct = hub.total_rounds > 0 ? Math.round((hub.round / hub.total_rounds) * 100) : 0
+
+  const statRail = [
+    { label: 'Drivers Leader', value: leader.name_acronym, sub: `${fmtPts(leader.points)} pts · ${leader.wins} wins`, color: '#fff' },
+    {
+      label: 'Constructors Leader',
+      value: topTeam?.team_name ?? '—',
+      sub: teams[1] ? `+${fmtPts(teamGap)} ahead` : 'Sole entry',
+      color: '#fff',
+    },
+    { label: 'Title Fight', value: `${aliveCount} alive`, sub: `${hub.rounds_left} rounds remain`, color: 'var(--red)' },
+    { label: 'Season Progress', value: `${seasonPct}%`, sub: `Round ${hub.round}/${hub.total_rounds}`, color: '#fff' },
+  ]
+
+  return (
+    <div className="champ-page" data-testid="championship">
+      <div className="champ-header">
+        <div className="champ-title-row">
+          <span className="champ-accent" aria-hidden="true" />
+          <h1 className="champ-title">Championship</h1>
+          <span className="champ-season mono">{hub.season}</span>
+        </div>
+        <div className="champ-sub">
+          {hub.last_race ? `After ${hub.last_race} · ` : ''}Round {hub.round} of {hub.total_rounds}
+        </div>
+        <div className="champ-tabs" role="tablist">
+          <button
+            type="button"
+            className={`champ-tab${view === 'drivers' ? ' is-active' : ''}`}
+            onClick={() => setView('drivers')}
+            data-testid="champ-tab-drivers"
+          >
+            Drivers
+          </button>
+          <button
+            type="button"
+            className={`champ-tab${view === 'constructors' ? ' is-active' : ''}`}
+            onClick={() => setView('constructors')}
+            data-testid="champ-tab-constructors"
+          >
+            Constructors
+          </button>
+          <button
+            type="button"
+            className={`champ-tab${view === 'progression' ? ' is-active' : ''}`}
+            onClick={() => setView('progression')}
+            data-testid="champ-tab-progression"
+          >
+            Progression
+          </button>
+          <button
+            type="button"
+            className={`champ-tab${view === 'simulator' ? ' is-active' : ''}`}
+            onClick={() => setView('simulator')}
+            data-testid="champ-tab-simulator"
+          >
+            Simulator
+          </button>
+        </div>
+      </div>
+
+      <div className="champ-stat-rail">
+        {statRail.map((stat) => (
+          <div className="champ-stat" key={stat.label}>
+            <div className="champ-stat-label mono">{stat.label}</div>
+            <div className="champ-stat-value mono" style={{ color: stat.color }}>
+              {stat.value}
+            </div>
+            <div className="champ-stat-sub">{stat.sub}</div>
+          </div>
+        ))}
+      </div>
+
+      {view === 'drivers' && (
+        <DriversView enriched={enriched} leaderPoints={leader.points} titleMath={titleMath} />
+      )}
+      {view === 'constructors' && <ConstructorsView hub={hub} />}
+      {view === 'progression' && <ProgressionView hub={hub} />}
+      {view === 'simulator' && <ChampionshipSimulator hub={hub} />}
+    </div>
+  )
+}
+
+interface EnrichedDriver {
+  d: ChampHubDriver
+  pos: number
+  color: string
+  gapLeader: string
+  gapAhead: string
+  spark: string
+  h2h: string
+  h2hWin: boolean
+  aliveLabel: string
+  aliveColor: string
+}
+
+function DriversView({
+  enriched,
+  leaderPoints,
+  titleMath,
+}: {
+  enriched: EnrichedDriver[]
+  leaderPoints: number
+  titleMath: string
+}) {
+  const podium = enriched.slice(0, 3)
+  return (
+    <div data-testid="champ-view-drivers">
+      <div className="champ-podium">
+        {podium.map((e) => (
+          <div
+            className="champ-podium-card"
+            key={e.d.driver_number}
+            style={{ borderTopColor: e.color }}
+          >
+            <span className="champ-podium-ghost mono" style={{ color: ghostColor(e.pos) }}>
+              P{e.pos}
+            </span>
+            <div className="champ-podium-inner">
+              <div className="champ-podium-top">
+                <span className="mono" style={{ color: medalColor(e.pos), fontWeight: 700 }}>
+                  P{e.pos}
+                </span>
+                <span className="champ-podium-team mono">{e.d.team_name}</span>
+              </div>
+              <div className="champ-podium-id">
+                <span className="champ-podium-bar" style={{ background: e.color }} />
+                <span className="champ-podium-code mono">{e.d.name_acronym}</span>
+              </div>
+              <div className="champ-podium-name">{e.d.full_name}</div>
+              <div className="champ-podium-pts">
+                <span className="champ-podium-pts-num mono">{fmtPts(e.d.points)}</span>
+                <span className="champ-podium-pts-unit">PTS</span>
+                <span
+                  className="champ-podium-gap mono"
+                  style={{ color: e.pos === 1 ? GOLD : 'var(--text-2)' }}
+                >
+                  {e.pos === 1 ? 'P1' : `+${fmtPts(leaderPoints - e.d.points)}`}
+                </span>
+              </div>
+              <div className="champ-podium-stats">
+                <div>
+                  <div className="champ-podium-stat-num mono">{e.d.wins}</div>
+                  <div className="champ-podium-stat-label">Wins</div>
+                </div>
+                <div>
+                  <div className="champ-podium-stat-num mono">{e.d.podiums}</div>
+                  <div className="champ-podium-stat-label">Podiums</div>
+                </div>
+                <div>
+                  <div className="champ-podium-stat-num mono">{e.d.poles}</div>
+                  <div className="champ-podium-stat-label">Poles</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <div className="champ-titlemath" data-testid="champ-titlemath">
+        <span className="champ-titlemath-tag mono">Title Math</span>
+        <span className="champ-titlemath-text">{titleMath}</span>
+      </div>
+
+      <div className="champ-scroll">
+        <table className="champ-table champ-table-drivers">
+          <thead>
+            <tr>
+              <th className="l">Pos</th>
+              <th className="l">Driver</th>
+              <th className="l">Team</th>
+              <th className="r">Pts</th>
+              <th className="r">Gap</th>
+              <th className="r">Int</th>
+              <th className="c">Wins</th>
+              <th className="c">Pod</th>
+              <th className="l">Form</th>
+              <th className="c">vs Teammate</th>
+              <th className="r">Title</th>
+            </tr>
+          </thead>
+          <tbody>
+            {enriched.map((e) => (
+              <tr key={e.d.driver_number}>
+                <td className="mono" style={{ color: medalColor(e.pos), fontWeight: 700 }}>
+                  P{e.pos}
+                </td>
+                <td>
+                  <div className="champ-drv">
+                    <span className="champ-drv-bar" style={{ background: e.color }} />
+                    <span className="champ-drv-code mono">{e.d.name_acronym}</span>
+                    <span className="champ-drv-name">{e.d.full_name}</span>
+                    <span className="champ-drv-num mono">#{e.d.driver_number}</span>
+                  </div>
+                </td>
+                <td className="champ-td-team">{e.d.team_name}</td>
+                <td className="r mono champ-td-pts">{fmtPts(e.d.points)}</td>
+                <td className="r mono champ-td-muted">{e.gapLeader}</td>
+                <td className="r mono champ-td-dim">{e.gapAhead}</td>
+                <td className="c mono" style={{ color: e.d.wins > 0 ? 'var(--text)' : 'var(--text-3)' }}>
+                  {e.d.wins}
+                </td>
+                <td className="c mono champ-td-muted">{e.d.podiums}</td>
+                <td>
+                  {e.spark ? (
+                    <svg width="62" height="20" viewBox="0 0 62 20" className="champ-spark">
+                      <polyline
+                        points={e.spark}
+                        fill="none"
+                        stroke={e.color}
+                        strokeWidth="1.5"
+                        strokeLinejoin="round"
+                        strokeLinecap="round"
+                        opacity="0.9"
+                      />
+                    </svg>
+                  ) : (
+                    <span className="champ-td-dim mono">—</span>
+                  )}
+                </td>
+                <td className="c mono" style={{ color: e.h2hWin ? 'var(--green)' : 'var(--text-2)' }}>
+                  {e.h2h}
+                </td>
+                <td className="r">
+                  <span className="champ-alive mono" style={{ color: e.aliveColor }}>
+                    {e.aliveLabel}
+                  </span>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}
+
+function ConstructorsView({ hub }: { hub: ChampionshipHub }) {
+  const { teams, drivers } = hub
+  const leaderPts = teams[0]?.points ?? 0
+  const podium = teams.slice(0, 3)
+
+  return (
+    <div data-testid="champ-view-constructors">
+      <div className="champ-podium">
+        {podium.map((t) => {
+          const color = teamColor(t.team_colour)
+          const split = teamSplit(t.team_name, drivers)
+          return (
+            <div className="champ-podium-card" key={t.team_name} style={{ borderTopColor: color }}>
+              <span className="champ-podium-ghost mono" style={{ color: ghostColor(t.position) }}>
+                P{t.position}
+              </span>
+              <div className="champ-podium-inner">
+                <div className="champ-podium-top">
+                  <span className="mono" style={{ color: medalColor(t.position), fontWeight: 700 }}>
+                    P{t.position}
+                  </span>
+                </div>
+                <div className="champ-podium-id">
+                  <span className="champ-podium-bar" style={{ background: color }} />
+                  <span className="champ-podium-team-name">{t.team_name}</span>
+                </div>
+                <div className="champ-podium-pts">
+                  <span className="champ-podium-pts-num mono">{fmtPts(t.points)}</span>
+                  <span className="champ-podium-pts-unit">PTS</span>
+                  <span
+                    className="champ-podium-gap mono"
+                    style={{ color: t.position === 1 ? GOLD : 'var(--text-2)' }}
+                  >
+                    {t.position === 1 ? 'P1' : `+${fmtPts(leaderPts - t.points)}`}
+                  </span>
+                </div>
+                <div className="champ-contrib">
+                  <div className="champ-contrib-bar">
+                    <span style={{ width: `${split.splitA}%`, background: color }} />
+                    <span style={{ width: `${split.splitB}%`, background: color, opacity: 0.4 }} />
+                  </div>
+                  <div className="champ-contrib-legend mono">
+                    <span>
+                      {split.driverA} <em>{fmtPts(split.ptsA)}</em>
+                    </span>
+                    <span>
+                      {split.driverB} <em>{fmtPts(split.ptsB)}</em>
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )
+        })}
+      </div>
+
+      <div className="champ-scroll">
+        <table className="champ-table champ-table-teams">
+          <thead>
+            <tr>
+              <th className="l">Pos</th>
+              <th className="l">Constructor</th>
+              <th className="r">Pts</th>
+              <th className="r">Gap</th>
+              <th className="c">Wins</th>
+              <th className="l">Driver Contribution</th>
+              <th className="r">Share</th>
+            </tr>
+          </thead>
+          <tbody>
+            {teams.map((t) => {
+              const color = teamColor(t.team_colour)
+              const split = teamSplit(t.team_name, drivers)
+              return (
+                <tr key={t.team_name}>
+                  <td className="mono" style={{ color: medalColor(t.position), fontWeight: 700 }}>
+                    P{t.position}
+                  </td>
+                  <td>
+                    <div className="champ-drv">
+                      <span className="champ-drv-bar" style={{ background: color }} />
+                      <span className="champ-team-name">{t.team_name}</span>
+                    </div>
+                  </td>
+                  <td className="r mono champ-td-pts">{fmtPts(t.points)}</td>
+                  <td className="r mono champ-td-muted">
+                    {t.position === 1 ? 'LEADER' : `+${fmtPts(leaderPts - t.points)}`}
+                  </td>
+                  <td className="c mono" style={{ color: t.wins > 0 ? 'var(--text)' : 'var(--text-3)' }}>
+                    {t.wins}
+                  </td>
+                  <td>
+                    <div className="champ-contrib-row">
+                      <div className="champ-contrib-bar">
+                        <span style={{ width: `${split.splitA}%`, background: color }} />
+                        <span style={{ width: `${split.splitB}%`, background: color, opacity: 0.4 }} />
+                      </div>
+                      <span className="champ-contrib-names mono">
+                        {split.driverA}
+                        <em> · </em>
+                        {split.driverB}
+                      </span>
+                    </div>
+                  </td>
+                  <td className="r mono champ-td-dim">{split.shareLabel}</td>
+                </tr>
+              )
+            })}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}
+
+const CHART_PAD_L = 48
+const CHART_PAD_T = 16
+const CHART_PLOT_W = 882
+const CHART_PLOT_H = 316
+
+function ProgressionView({ hub }: { hub: ChampionshipHub }) {
+  const top = hub.drivers.slice(0, 6).filter((d) => d.cumulative.length > 0)
+
+  if (top.length === 0) {
+    return (
+      <div className="champ-chart-empty" data-testid="champ-view-progression">
+        No completed rounds yet — progression will appear after the first race.
+      </div>
+    )
+  }
+
+  const N = Math.max(...top.map((d) => d.cumulative.length))
+  const peak = Math.max(...top.flatMap((d) => d.cumulative))
+  const maxY = Math.max(100, Math.ceil(peak / 100) * 100)
+
+  const x = (i: number) => (N <= 1 ? CHART_PAD_L : CHART_PAD_L + (i * CHART_PLOT_W) / (N - 1))
+  const y = (v: number) => CHART_PAD_T + CHART_PLOT_H - (v / maxY) * CHART_PLOT_H
+
+  const yGrid = [0, 0.25, 0.5, 0.75, 1].map((f) => {
+    const value = Math.round(maxY * f)
+    const yy = y(value)
+    return { y: yy, label: value }
+  })
+
+  // x ticks: up to ~7 evenly spaced round labels.
+  const tickStep = Math.max(1, Math.ceil(N / 7))
+  const xGrid: { x: number; label: string }[] = []
+  for (let i = 0; i < N; i += tickStep) {
+    xGrid.push({ x: x(i), label: hub.round_labels[i] ?? `R${i + 1}` })
+  }
+  if (xGrid[xGrid.length - 1]?.label !== (hub.round_labels[N - 1] ?? `R${N}`)) {
+    xGrid.push({ x: x(N - 1), label: hub.round_labels[N - 1] ?? `R${N}` })
+  }
+
+  const seenTeams = new Set<string>()
+  const series = top.map((d, idx) => {
+    const dashed = seenTeams.has(d.team_name)
+    seenTeams.add(d.team_name)
+    const pts = d.cumulative.map((v, i) => `${x(i).toFixed(1)},${y(v).toFixed(1)}`).join(' ')
+    const endVal = d.cumulative[d.cumulative.length - 1]
+    const endX = x(d.cumulative.length - 1)
+    const endY = y(endVal)
+    return {
+      code: d.name_acronym,
+      name: d.full_name,
+      total: d.points,
+      color: teamColor(d.team_colour),
+      width: idx < 3 ? 2.4 : 1.8,
+      dash: dashed ? '5 4' : '0',
+      points: pts,
+      endX,
+      endY,
+    }
+  })
+
+  return (
+    <div className="champ-progression" data-testid="champ-view-progression">
+      <div className="champ-chart-head">
+        <span className="champ-chart-title mono">Cumulative points — top {top.length} drivers</span>
+        <span className="champ-chart-meta">
+          Rounds 1–{hub.round} · {hub.season}
+        </span>
+      </div>
+      <div className="champ-chart">
+        <svg viewBox="0 0 1000 380" className="champ-chart-svg" preserveAspectRatio="none">
+          {yGrid.map((g) => (
+            <g key={g.label}>
+              <line x1={CHART_PAD_L} y1={g.y} x2={930} y2={g.y} stroke="var(--border)" strokeWidth="1" />
+              <text x={40} y={g.y + 4} textAnchor="end" className="champ-chart-axis">
+                {g.label}
+              </text>
+            </g>
+          ))}
+          {xGrid.map((g, i) => (
+            <text key={i} x={g.x} y={372} textAnchor="middle" className="champ-chart-axis">
+              {g.label}
+            </text>
+          ))}
+          {series.map((s) => (
+            <g key={s.code}>
+              <polyline
+                points={s.points}
+                fill="none"
+                stroke={s.color}
+                strokeWidth={s.width}
+                strokeDasharray={s.dash}
+                strokeLinejoin="round"
+                strokeLinecap="round"
+              />
+              <circle cx={s.endX} cy={s.endY} r="3" fill={s.color} />
+              <text x={s.endX + 8} y={s.endY + 4} fill={s.color} className="champ-chart-label">
+                {s.code}
+              </text>
+            </g>
+          ))}
+        </svg>
+      </div>
+      <div className="champ-legend">
+        {series.map((s) => (
+          <div className="champ-legend-item" key={s.code}>
+            <span className="champ-legend-swatch" style={{ background: s.color }} />
+            <span className="champ-legend-code mono">{s.code}</span>
+            <span className="champ-legend-name">{s.name}</span>
+            <span className="champ-legend-total mono">{fmtPts(s.total)}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

frontend/src/pages/CommandCenterPage.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useMemo, useState } from 'react'
 import { useQueries, useQuery } from '@tanstack/react-query'
 import { Link } from '@tanstack/react-router'
-import { fetchLiveState, fetchLocalMeetings, fetchSeasonMeetings, fetchSeasons, fetchWeekend } from '../api'
+import { fetchLiveState, fetchLocalMeetings, fetchSeasonMeetings, fetchSeasons, fetchSessions, fetchWeekend, fetchChampionshipHub } from '../api'
-import { countWeekendStats, formatCoverageHint, sessionTypeAbbrev } from '../lib/coverage'
+import { RACE_HUB_DATASETS, countWeekendStats, formatCoverageHint, sessionTypeAbbrev } from '../lib/coverage'
 import {
   currentAndNextSession,
   focusMeetingKind,
@@ -17,9 +17,14 @@ import {
 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'
 
+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)
@@ -70,13 +75,13 @@ export function CommandCenterPage() {
 
   const localMeetings = meetingsQuery.data ?? []
   const seasonMeetings = seasonMeetingsQuery.data?.length ? seasonMeetingsQuery.data : localMeetings
-  const meetings = localMeetings
+  const focusMeetings = seasonMeetings.length > 0 ? seasonMeetings : localMeetings
 
   const weekendQueries = useQueries({
-    queries: meetings.map((meeting) => ({
+    queries: localMeetings.map((meeting) => ({
       queryKey: ['weekend', meeting.meeting_key],
       queryFn: () => fetchWeekend(meeting.meeting_key),
-      enabled: meetings.length > 0,
+      enabled: localMeetings.length > 0,
       staleTime: 60_000,
     })),
   })
@@ -87,6 +92,13 @@ export function CommandCenterPage() {
     staleTime: 5_000,
   })
 
+  const championshipQuery = useQuery({
+    queryKey: ['championship-hub', latestSeason],
+    queryFn: () => fetchChampionshipHub(latestSeason!),
+    enabled: latestSeason != null,
+  })
+  const champHub = championshipQuery.data
+
   useEffect(() => {
     const timer = window.setInterval(() => setNow(Date.now()), 1000)
     return () => window.clearInterval(timer)
@@ -96,28 +108,45 @@ export function CommandCenterPage() {
 
   const weekendsByKey = useMemo(() => {
     const map = new Map<number, Weekend>()
-    meetings.forEach((meeting, i) => {
+    localMeetings.forEach((meeting, i) => {
       const data = weekendQueries[i]?.data
       if (data) map.set(meeting.meeting_key, data)
     })
     return map
-  }, [meetings, weekendQueries])
+  }, [localMeetings, weekendQueries])
 
   const weekendList = useMemo(() => weekendQueries.map((q) => q.data), [weekendQueries])
   const meetingStats = countWeekendStats(weekendList)
-  const focusMeeting = pickFocusMeeting(meetings, nowDate)
+  const focusMeeting = pickFocusMeeting(focusMeetings, nowDate)
   const focusWeekend = focusMeeting ? weekendsByKey.get(focusMeeting.meeting_key) : undefined
+  const openF1SessionsQuery = useQuery({
+    queryKey: ['sessions', focusMeeting?.meeting_key, 'openf1'],
+    queryFn: () => fetchSessions(focusMeeting!.meeting_key, 'openf1'),
+    enabled: focusMeeting != null && focusWeekend == null,
+    staleTime: 60_000,
+  })
+  const openF1WeekendSessions: WeekendSession[] = useMemo(
+    () =>
+      (openF1SessionsQuery.data ?? []).map((session) => ({
+        session,
+        source: 'none',
+        datasets: missingDatasets,
+      })),
+    [openF1SessionsQuery.data],
+  )
+  const focusWeekendSessions = focusWeekend?.sessions ?? openF1WeekendSessions
   const focusKind = focusMeeting ? focusMeetingKind(focusMeeting, nowDate) : null
-  const focusSessions: Session[] = focusWeekend
+  const focusSessions: Session[] = sortSessionsByStart(focusWeekendSessions.map((s) => s.session))
-    ? sortSessionsByStart(focusWeekend.sessions.map((s) => s.session))
-    : []
   const { current: currentSession, next: nextSession } = currentAndNextSession(focusSessions, nowDate)
 
   const analysisSession = pickAnalysisSession(focusWeekend)
-  const analysisSessionKey =
+  const actionSession =
-    analysisSession?.session.session_key ??
+    analysisSession?.session ??
-    focusWeekend?.default_session_key ??
+    currentSession ??
-    focusWeekend?.sessions[0]?.session.session_key
+    nextSession ??
+    focusWeekendSessions.find((s) => s.session.session_key === focusWeekend?.default_session_key)?.session ??
+    focusWeekendSessions[0]?.session
+  const analysisSessionKey = actionSession?.session_key
 
   const weekendsLoading = weekendQueries.some((q) => q.isLoading)
 
@@ -196,174 +225,264 @@ export function CommandCenterPage() {
       )}
 
       {focusMeeting && (
-        <section className="cc-weekend-band" data-testid="cc-focus">
+        <div className="cc-hero">
-          <div className="cc-band-accent" aria-hidden="true" />
+          <section className="cc-weekend-band ui-card glass-panel" data-testid="cc-focus">
-          <div className="cc-band-body">
+            <div className="cc-band-accent" aria-hidden="true" />
-            <div className="cc-band-row">
+            <div className="cc-band-body">
-              <span className="cc-band-decal mono">{decal}</span>
+              <div className="cc-band-row">
-              <div className="cc-band-titles">
+                <span className="cc-band-decal mono">{decal}</span>
-                <div className="cc-band-eyebrow mono">
+                <div className="cc-band-titles">
-                  <WeekendKindLabel kind={statusKind} />
+                  <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>
-                <h1 className="cc-band-name">{focusMeeting.meeting_name}</h1>
+                <CountdownBlock
-                <div className="cc-band-sub mono">
+                  liveActive={liveActive}
-                  {[focusMeeting.location, focusMeeting.circuit_short_name]
+                  currentSession={currentSession}
-                    .filter(Boolean)
+                  nextSession={nextSession}
-                    .join(' · ')}
+                  meeting={focusMeeting}
-                </div>
+                  now={nowDate}
-                <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>
-        </section>
-      )}
 
-      {focusMeeting && (
+          <div className="cc-actions-row" data-testid="cc-actions">
-        <div className="cc-actions-row" data-testid="cc-actions">
+            <Link
-          <Link
+              to="/live"
-            to="/live"
+              className={`cc-pri-action ui-card interactive ${liveActive ? 'is-live ui-cta-primary' : ''}`}
-            className={`cc-pri-action ${liveActive ? 'is-live' : ''}`}
+              data-testid="cc-action-live"
-            data-testid="cc-action-live"
-          >
-            <span className="cc-pri-label">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"
-            data-testid="cc-action-race-hub"
-          >
-            <span className="cc-pri-label">Open Analysis</span>
-            <span className="cc-pri-meta mono">
-              {analysisSession
-                ? `${analysisSession.session.session_name} · session ${analysisSession.session.session_key}`
-                : 'Pick a session'}
-            </span>
-          </Link>
-          {nextSession && sessionStartTime(nextSession) && (
-            <a
-              href="#cc-schedule"
-              className="cc-pri-action"
-              data-testid="cc-action-schedule"
-              onClick={(e) => {
-                e.preventDefault()
-                document.getElementById('cc-schedule')?.scrollIntoView({ behavior: 'smooth' })
-              }}
             >
-              <span className="cc-pri-label">Schedule</span>
+              <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">
-                next: {nextSession.session_name}
+                {actionSession
+                  ? `${actionSession.session_name} · session ${actionSession.session_key}`
+                  : 'Pick a session'}
               </span>
-            </a>
+            </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>
       )}
 
-      {focusWeekend && focusWeekend.sessions.length > 0 && (
+      <div className="cc-dashboard-grid">
-        <section className="cc-schedule" id="cc-schedule">
+        <div className="cc-dashboard-main">
-          <div className="sec-header">
+          <div 
-            <span className="sec-title">Weekend Schedule</span>
+            className="cc-ambient-aura" 
-            <span className="sec-meta mono">{focusWeekend.sessions.length} sessions</span>
+            aria-hidden="true" 
+            style={focusMeeting ? { '--aura-accent': countryAccent(focusMeeting) } as React.CSSProperties : undefined} 
+          />
+          <div className="cc-dashboard-panel">
+            {seasonMeetings.length > 0 && (
+              <section className="cc-season-calendar" data-testid="cc-season-calendar">
+              <div className="sec-header">
+                <span className="sec-title">Season Calendar</span>
+                <span className="sec-meta mono">
+                  {seasonMeetings.length} rounds · {meetingStats.full}/{meetingStats.total || 0} local
+                </span>
+              </div>
+              <div className="cc-calendar-grid" role="list">
+                {seasonMeetings.map((meeting, index) => {
+                  const weekend = weekendsByKey.get(meeting.meeting_key)
+                  const target = pickAnalysisSession(weekend)
+                  const targetKey = target?.session.session_key ?? weekend?.default_session_key
+                  const status = meetingStatus(meeting, focusMeeting?.meeting_key, nowDate)
+                  const cardAccent = countryAccent(meeting)
+                  return (
+                    <Link
+                      key={meeting.meeting_key}
+                      to="/race-hub"
+                      search={targetKey ? { session_key: targetKey } : {}}
+                      className={`cc-calendar-card cc-calendar-${status}`}
+                      data-testid={`cc-calendar-${meeting.meeting_key}`}
+                      role="listitem"
+                      style={{ '--gp-card-accent': cardAccent } as React.CSSProperties}
+                    >
+                      <div className="cc-calendar-accent" aria-hidden="true" />
+                      <div className="cc-calendar-top mono">
+                        <span className="cc-calendar-round">R{String(index + 1).padStart(2, '0')}</span>
+                        <span className={`cc-cov-dot cc-cov-${weekend?.source ?? 'none'}`} aria-hidden="true" />
+                      </div>
+                      <div className="cc-calendar-id">
+                        {countryFlag(meeting) && <span className="cc-calendar-flag">{countryFlag(meeting)}</span>}
+                      </div>
+                      <span className="cc-calendar-decal mono">{countryDecal(meeting)}</span>
+                      <div className="cc-calendar-copy">
+                        <div className="cc-calendar-name">{meeting.meeting_name}</div>
+                        <div className="cc-calendar-circuit mono">{meeting.circuit_short_name || meeting.location}</div>
+                        <div className="cc-calendar-date mono">{formatGpDateRange(meeting)}</div>
+                      </div>
+                    </Link>
+                  )
+                })}
+              </div>
+              {seasonMeetingsQuery.isError && (
+                <div className="cc-side-empty">Using local meetings because the full calendar could not load.</div>
+              )}
+            </section>
+            )}
           </div>
-          <div className="cc-session-strip" role="list">
+        </div>
-            {focusWeekend.sessions.map(({ session, source, datasets }) => {
-              const status = classifySessionStatus(session, nowDate)
-              const isNext = nextSession?.session_key === session.session_key
-              const isCurrent = currentSession?.session_key === session.session_key
-              return (
-                <Link
-                  key={session.session_key}
-                  to="/race-hub"
-                  search={{ session_key: session.session_key }}
-                  className={`cc-session-card cc-status-${status}${isNext ? ' is-next' : ''}${
-                    isCurrent ? ' is-current' : ''
-                  }`}
-                  data-testid={`cc-session-${session.session_key}`}
-                  role="listitem"
-                >
-                  <div className="cc-session-card-head">
-                    <span className="cc-session-abbrev mono">
-                      {sessionTypeAbbrev(session.session_type, session.session_name)}
-                    </span>
-                    <span className={`cc-session-status cc-status-pill-${status}`}>
-                      {isCurrent ? 'On track' : status === 'done' ? 'Done' : isNext ? 'Next' : 'Upcoming'}
-                    </span>
-                  </div>
-                  <div className="cc-session-name">{session.session_name}</div>
-                  <div className="cc-session-time mono">{formatSessionScheduleTime(session.date_start)}</div>
-                  <div className="cc-session-cov mono">
-                    <span className={`cc-cov-dot cc-cov-${source}`} aria-hidden="true" />
-                    {formatCoverageHint(datasets)}
-                  </div>
-                </Link>
-              )
-            })}
-          </div>
-        </section>
-      )}
 
-      {seasonMeetings.length > 0 && (
+        <div className="cc-dashboard-sidebar">
-        <section className="cc-season-calendar" data-testid="cc-season-calendar">
+          {champHub && (
-          <div className="sec-header">
+            <section className="cc-champ-snapshot glass-panel" data-testid="cc-champ-snapshot" style={{ padding: 'var(--s5)', borderRadius: '12px' }}>
-            <span className="sec-title">Season Calendar</span>
+              <div className="cc-champ-header">
-            <span className="sec-meta mono">
+                <span>Championship Leaders</span>
-              {seasonMeetings.length} rounds · {meetingStats.full}/{meetingStats.total || 0} local
+                <Link to="/championship" className="cc-champ-link">Full Standings →</Link>
-            </span>
+              </div>
-          </div>
+              <div className="cc-champ-group-label">Drivers</div>
-          <div className="cc-calendar-grid" role="list">
+              <div className="cc-champ-list">
-            {seasonMeetings.map((meeting, index) => {
+                {champHub.drivers.slice(0, 3).map((d) => (
-              const weekend = weekendsByKey.get(meeting.meeting_key)
+                  <div key={d.driver_number} className="cc-champ-row">
-              const target = pickAnalysisSession(weekend)
+                    <div className="cc-champ-left">
-              const targetKey = target?.session.session_key ?? weekend?.default_session_key
+                      <div className="cc-champ-color" style={{ color: `#${d.team_colour}`, background: 'currentColor' }} />
-              const status = meetingStatus(meeting, focusMeeting?.meeting_key, nowDate)
+                      <span className="cc-champ-name">{d.name_acronym}</span>
-              const cardAccent = countryAccent(meeting)
+                    </div>
-              return (
+                    <div className="cc-champ-form" title="Last 5 races">
-                <Link
+                      <FormSparkline form={d.form} color={`#${d.team_colour}`} />
-                  key={meeting.meeting_key}
+                    </div>
-                  to="/race-hub"
+                    <div className="cc-champ-right">
-                  search={targetKey ? { session_key: targetKey } : {}}
+                      <span className="cc-champ-gap">
-                  className={`cc-calendar-card cc-calendar-${status}`}
+                        {d.position === 1 ? '—' : `-${champHub.drivers[0].points - d.points}`}
-                  data-testid={`cc-calendar-${meeting.meeting_key}`}
+                      </span>
-                  role="listitem"
+                      <span className="cc-champ-pts">{d.points}</span>
-                  style={{ '--gp-card-accent': cardAccent } as React.CSSProperties}
+                    </div>
-                >
-                  <div className="cc-calendar-accent" aria-hidden="true" />
-                  <div className="cc-calendar-top mono">
-                    <span className="cc-calendar-round">R{String(index + 1).padStart(2, '0')}</span>
-                    <span className={`cc-cov-dot cc-cov-${weekend?.source ?? 'none'}`} aria-hidden="true" />
                   </div>
-                  <div className="cc-calendar-id">
+                ))}
-                    <span className="cc-calendar-decal mono">{countryDecal(meeting)}</span>
+              </div>
-                    {countryFlag(meeting) && <span className="cc-calendar-flag">{countryFlag(meeting)}</span>}
+              <div className="cc-champ-group-label">Constructors</div>
+              <div className="cc-champ-list">
+                {champHub.teams.slice(0, 3).map((t, i) => (
+                  <div key={t.team_name} className="cc-champ-row">
+                    <div className="cc-champ-left">
+                      <div className="cc-champ-color" style={{ color: `#${t.team_colour}`, background: 'currentColor' }} />
+                      <span className="cc-champ-name">{t.team_name}</span>
+                    </div>
+                    <div className="cc-champ-form" style={{ opacity: 0.4, fontSize: '11px', display: 'flex', gap: '4px', alignItems: 'center' }} title={`${t.wins} Wins`}>
+                      <Trophy size={12} /> {t.wins}
+                    </div>
+                    <div className="cc-champ-right">
+                      <span className="cc-champ-gap">
+                        {i === 0 ? '—' : `-${champHub.teams[0].points - t.points}`}
+                      </span>
+                      <span className="cc-champ-pts">{t.points}</span>
+                    </div>
                   </div>
-                  <div className="cc-calendar-copy">
+                ))}
-                    <div className="cc-calendar-name">{meeting.meeting_name}</div>
+              </div>
-                    <div className="cc-calendar-circuit mono">{meeting.circuit_short_name || meeting.location}</div>
+            </section>
-                    <div className="cc-calendar-date mono">{formatGpDateRange(meeting)}</div>
-                  </div>
-                </Link>
-              )
-            })}
-          </div>
-          {seasonMeetingsQuery.isError && (
-            <div className="cc-side-empty">Using local meetings because the full calendar could not load.</div>
           )}
-        </section>
-      )}
 
-      <PaddockBriefing />
+          {focusWeekendSessions.length > 0 && (
+            <section className="cc-schedule" data-testid="cc-schedule">
+              <div className="sec-header">
+                <span className="sec-title">Weekend Schedule</span>
+                <span className="sec-meta mono">{focusWeekendSessions.length} sessions</span>
+              </div>
+              <div className="cc-session-strip" role="list">
+                {focusWeekendSessions.map(({ session, source, datasets }) => {
+                  const status = classifySessionStatus(session, nowDate)
+                  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={`cc-session-card ui-card interactive cc-status-${status}${isNext ? ' is-next' : ''}${
+                        isLive ? ' is-live glass-panel' : ''
+                      }`}
+                      data-testid={`cc-session-${session.session_key}`}
+                      role="listitem"
+                    >
+                      <div className="cc-session-card-head">
+                        <span className="cc-session-abbrev mono">
+                          {sessionTypeAbbrev(session.session_type, session.session_name)}
+                        </span>
+                        <span className={`cc-session-status cc-status-pill-${status}`}>
+                          {isCurrent ? 'On track' : status === 'done' ? 'Done' : isNext ? 'Next' : 'Upcoming'}
+                        </span>
+                      </div>
+                      <div className="cc-session-name">{session.session_name}</div>
+                      <div className="cc-session-time mono">{formatSessionScheduleTime(session.date_start)}</div>
+                      <div className="cc-session-cov mono">
+                        <span className={`cc-cov-dot cc-cov-${source}`} aria-hidden="true" />
+                        {formatCoverageHint(datasets)}
+                      </div>
+                    </Link>
+                  )
+                })}
+              </div>
+            </section>
+          )}
+
+          <PaddockBriefing />
+        </div>
+      </div>
     </div>
   )
 }
 
+function FormSparkline({ form, color }: { form: number[], color: string }) {
+  if (!form || form.length === 0) return null
+  const max = Math.max(...form, 26) // 26 is standard max for a race win
+  const width = 45
+  const height = 14
+  const step = width / Math.max(form.length - 1, 1)
+
+  const points = form.map((val, i) => {
+    const x = i * step
+    const y = height - (val / max) * height
+    return `${x},${y}`
+  }).join(' ')
+
+  return (
+    <svg width={width} height={height} style={{ overflow: 'visible' }}>
+      <polyline
+        fill="none"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        points={points}
+      />
+    </svg>
+  )
+}
+
 function WeekendKindLabel({ kind }: { kind: WeekendStatusKind }) {
   switch (kind) {
     case 'live':

frontend/src/pages/LiveTimingPage.tsx

@@ -1,11 +1,24 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { fetchLiveState } from '../api'
 import type { LiveStreamData } from '../types'
-import { parseLiveStateEvent } from '../lib/live'
+import {
+  loadPinnedDrivers,
+  parseLiveStateEvent,
+  savePinnedDrivers,
+  sortLiveTimingRows,
+  togglePin,
+} from '../lib/live'
+import type { GapHistoryMap } from '../lib/gapHistory'
+import { recordGapSamples } from '../lib/gapHistory'
+import { battleNumbers, detectBattles } from '../lib/battles'
 import { SessionBanner } from '../components/live/SessionBanner'
+import { TrackStatusBanner } from '../components/live/TrackStatusBanner'
 import { TimingTower } from '../components/live/TimingTower'
+import { BattleChips } from '../components/live/BattleChips'
+import { PinnedDrivers } from '../components/live/PinnedDrivers'
 import { RaceControlFeed } from '../components/live/RaceControlFeed'
+import { Radio } from 'lucide-react'
 
 type StreamStatus = 'connecting' | 'connected' | 'disconnected' | 'error'
 
@@ -14,6 +27,8 @@ export function LiveTimingPage() {
   const [isLive, setIsLive] = useState(false)
   const [streamStatus, setStreamStatus] = useState<StreamStatus>('connecting')
   const [now, setNow] = useState(Date.now())
+  const [gapHistory, setGapHistory] = useState<GapHistoryMap>({})
+  const [pinned, setPinned] = useState<string[]>(() => loadPinnedDrivers())
 
   const { data, isLoading, isError, error } = useQuery({
     queryKey: ['live-state'],
@@ -68,6 +83,33 @@ export function LiveTimingPage() {
     }
   }, [])
 
+  const rows = useMemo(() => sortLiveTimingRows(snapshot), [snapshot])
+
+  // One interval sample per received snapshot, ring-buffered per driver.
+  useEffect(() => {
+    if (rows.length === 0) return
+    setGapHistory((prev) =>
+      recordGapSamples(
+        prev,
+        rows.map((row) => ({ racingNumber: row.RacingNumber, interval: row.Driver.Interval || '' })),
+      ),
+    )
+  }, [rows])
+
+  useEffect(() => {
+    savePinnedDrivers(pinned)
+  }, [pinned])
+
+  const battles = useMemo(
+    () => detectBattles(rows, snapshot?.Session?.SessionType),
+    [rows, snapshot?.Session?.SessionType],
+  )
+  const inBattle = useMemo(() => battleNumbers(battles), [battles])
+
+  const handleTogglePin = (racingNumber: string) => {
+    setPinned((prev) => togglePin(prev, racingNumber))
+  }
+
   return (
     <div className="page live-page" data-testid="live-page">
       {isError && (
@@ -87,29 +129,42 @@ export function LiveTimingPage() {
       )}
 
       {!isLoading && !snapshot && (
-        <div className="empty-state" data-testid="live-empty">
+        <div className="empty-state ui-card glass-panel" style={{ padding: '40px', textAlign: 'center', marginTop: '20vh', maxWidth: '400px', marginLeft: 'auto', marginRight: 'auto' }} data-testid="live-empty">
-          <div className="live-empty-status">
+          <div className="live-empty-status" style={{ marginBottom: '16px' }}>
             <span className={`live-conn live-conn-${streamStatus}`}>{streamStatus}</span>
           </div>
-          <div className="empty-state-title">No live session active</div>
+          <Radio size={48} style={{ color: 'var(--text-3)', margin: '0 auto 16px auto', display: 'block' }} />
-          <div className="empty-state-desc">
+          <h2 className="empty-state-title" style={{ fontSize: '20px', marginBottom: '8px' }}>No live session active</h2>
-            No timing data in the current snapshot. The feed will update automatically when an F1 session goes live.
+          <p className="empty-state-desc" style={{ color: 'var(--text-2)' }}>
-          </div>
+            The telemetry feed is currently offline. <br /><br /> Check the <a href="/" style={{ color: 'var(--red)', textDecoration: 'underline' }}>Command Center</a> for the weekend schedule or explore historical data in the <a href="/race-hub" style={{ color: 'var(--red)', textDecoration: 'underline' }}>Race Hub</a>.
+          </p>
         </div>
       )}
 
       {snapshot && (
         <>
           <SessionBanner isLive={isLive} snapshot={snapshot} connection={streamStatus} now={now} />
+          <TrackStatusBanner status={snapshot.TrackStatus} />
+          <PinnedDrivers rows={rows} history={gapHistory} pinned={pinned} onToggle={handleTogglePin} />
           <div className="live-columns">
             <div className="live-tower-col">
               <div className="sec-header">
                 <span className="sec-title">Timing Tower</span>
+                {pinned.length > 0 && <span className="sec-meta">{pinned.length}/3 pinned</span>}
               </div>
-              <TimingTower snapshot={snapshot} />
+              <BattleChips battles={battles} />
+              <TimingTower
+                rows={rows}
+                stints={snapshot.Stints}
+                history={gapHistory}
+                battleNumbers={inBattle}
+                pinned={pinned}
+                onTogglePin={handleTogglePin}
+                sessionType={snapshot.Session?.SessionType}
+              />
             </div>
             <div className="live-rc-col">
-              <RaceControlFeed messages={snapshot.RCMessages ?? []} />
+              <RaceControlFeed messages={snapshot.RCMessages ?? []} driverInfo={snapshot.DriverInfo} />
             </div>
           </div>
         </>

frontend/src/router.tsx

@@ -5,6 +5,7 @@ import { RaceHubPage } from './pages/RaceHubPage'
 import { DataLibraryPage } from './pages/DataLibraryPage'
 import { LiveTimingPage } from './pages/LiveTimingPage'
 import { BriefingPage } from './pages/BriefingPage'
+import { ChampionshipPage } from './pages/ChampionshipPage'
 
 type RaceHubSearch = {
   session_key?: number
@@ -57,6 +58,12 @@ export const liveTimingRoute = createRoute({
   component: LiveTimingPage,
 })
 
+export const championshipRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/championship',
+  component: ChampionshipPage,
+})
+
 export const briefingRoute = createRoute({
   getParentRoute: () => rootRoute,
   path: '/briefing',
@@ -69,6 +76,7 @@ const routeTree = rootRoute.addChildren([
   adminRoute,
   dataLibraryRoute,
   liveTimingRoute,
+  championshipRoute,
   briefingRoute,
 ])
 

frontend/src/test/ChampionshipPage.test.tsx

@@ -0,0 +1,152 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render, screen, waitFor, fireEvent } from '@testing-library/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { RouterProvider, createRouter, createRootRoute, createRoute } from '@tanstack/react-router'
+import { ChampionshipPage } from '../pages/ChampionshipPage'
+import type { ChampHubDriver, ChampHubTeam, ChampionshipHub } from '../types'
+
+vi.mock('../api', () => ({
+  fetchSeasons: vi.fn(),
+  fetchChampionshipHub: vi.fn(),
+}))
+
+import { fetchSeasons, fetchChampionshipHub } from '../api'
+
+const mockFetchSeasons = vi.mocked(fetchSeasons)
+const mockFetchHub = vi.mocked(fetchChampionshipHub)
+
+function driver(over: Partial<ChampHubDriver>): ChampHubDriver {
+  return {
+    driver_number: 1,
+    name_acronym: 'VER',
+    full_name: 'Max Verstappen',
+    team_name: 'Red Bull',
+    team_colour: '3671c6',
+    points: 200,
+    position: 1,
+    wins: 5,
+    podiums: 8,
+    poles: 4,
+    form: [25, 18, 25, 15, 25],
+    cumulative: [25, 43, 68, 83, 108, 200],
+    teammate_wins: 9,
+    teammate_losses: 1,
+    ...over,
+  }
+}
+
+const drivers: ChampHubDriver[] = [
+  driver({ driver_number: 1, name_acronym: 'VER', team_name: 'Red Bull', points: 200, position: 1 }),
+  driver({
+    driver_number: 4,
+    name_acronym: 'NOR',
+    full_name: 'Lando Norris',
+    team_name: 'McLaren',
+    team_colour: 'ff8000',
+    points: 160,
+    position: 2,
+    wins: 3,
+    cumulative: [18, 36, 54, 80, 120, 160],
+  }),
+  driver({
+    driver_number: 16,
+    name_acronym: 'LEC',
+    full_name: 'Charles Leclerc',
+    team_name: 'Ferrari',
+    team_colour: 'e8002d',
+    points: 120,
+    position: 3,
+    wins: 1,
+    cumulative: [15, 28, 40, 60, 90, 120],
+  }),
+]
+
+const teams: ChampHubTeam[] = [
+  { team_name: 'Red Bull', team_colour: '3671c6', points: 260, position: 1, wins: 6 },
+  { team_name: 'McLaren', team_colour: 'ff8000', points: 220, position: 2, wins: 3 },
+  { team_name: 'Ferrari', team_colour: 'e8002d', points: 180, position: 3, wins: 1 },
+]
+
+const hub: ChampionshipHub = {
+  season: 2025,
+  round: 6,
+  total_rounds: 10,
+  rounds_left: 4,
+  last_race: 'Monaco GP',
+  round_labels: ['R1', 'R2', 'R3', 'R4', 'R5', 'R6'],
+  drivers,
+  teams,
+}
+
+function renderPage() {
+  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } })
+  const rootRoute = createRootRoute({
+    component: () => (
+      <QueryClientProvider client={queryClient}>
+        <ChampionshipPage />
+      </QueryClientProvider>
+    ),
+  })
+  const indexRoute = createRoute({ getParentRoute: () => rootRoute, path: '/', component: ChampionshipPage })
+  const router = createRouter({ routeTree: rootRoute.addChildren([indexRoute]) })
+  return render(<RouterProvider router={router} />)
+}
+
+describe('ChampionshipPage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    window.localStorage.clear()
+    mockFetchSeasons.mockResolvedValue([2025])
+    mockFetchHub.mockResolvedValue(hub)
+  })
+
+  it('renders the drivers view with leader and title math', async () => {
+    renderPage()
+
+    await waitFor(() => {
+      expect(screen.getByTestId('championship')).toBeInTheDocument()
+    })
+
+    expect(screen.getByTestId('champ-view-drivers')).toBeInTheDocument()
+    // Leader code shows in the stat rail and the table.
+    expect(screen.getAllByText('VER').length).toBeGreaterThan(0)
+    expect(screen.getByText('Monaco GP', { exact: false })).toBeInTheDocument()
+    expect(screen.getByTestId('champ-titlemath')).toHaveTextContent('mathematically win the title')
+  })
+
+  it('switches to constructors and progression views', async () => {
+    renderPage()
+
+    await waitFor(() => expect(screen.getByTestId('championship')).toBeInTheDocument())
+
+    fireEvent.click(screen.getByTestId('champ-tab-constructors'))
+    expect(screen.getByTestId('champ-view-constructors')).toBeInTheDocument()
+    expect(screen.getAllByText('Red Bull', { exact: false }).length).toBeGreaterThan(0)
+
+    fireEvent.click(screen.getByTestId('champ-tab-progression'))
+    expect(screen.getByTestId('champ-view-progression')).toBeInTheDocument()
+    expect(screen.getByText('Cumulative points', { exact: false })).toBeInTheDocument()
+  })
+
+  it('switches to the simulator view and projects standings', async () => {
+    renderPage()
+
+    await waitFor(() => expect(screen.getByTestId('championship')).toBeInTheDocument())
+
+    fireEvent.click(screen.getByTestId('champ-tab-simulator'))
+    expect(screen.getByTestId('champ-view-simulator')).toBeInTheDocument()
+    expect(screen.getByTestId('sim-projected')).toBeInTheDocument()
+    // 4 rounds left, default scenario: VER projects to 200 + 4×25 = 300.
+    expect(screen.getByText('300')).toBeInTheDocument()
+  })
+
+  it('shows the empty state when no drivers are returned', async () => {
+    mockFetchHub.mockResolvedValue({ ...hub, drivers: [], teams: [] })
+    renderPage()
+
+    await waitFor(() => {
+      expect(screen.getByTestId('championship-empty')).toBeInTheDocument()
+    })
+    expect(screen.getByText('No championship data')).toBeInTheDocument()
+  })
+})

frontend/src/test/ChampionshipSimulator.test.tsx

@@ -0,0 +1,165 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { render, screen, fireEvent, within } from '@testing-library/react'
+import { ChampionshipSimulator } from '../components/ChampionshipSimulator'
+import type { ChampHubDriver, ChampionshipHub } from '../types'
+
+function driver(over: Partial<ChampHubDriver>): ChampHubDriver {
+  return {
+    driver_number: 1,
+    name_acronym: 'VER',
+    full_name: 'Max Verstappen',
+    team_name: 'Red Bull',
+    team_colour: '3671c6',
+    points: 0,
+    position: 1,
+    wins: 0,
+    podiums: 0,
+    poles: 0,
+    form: [],
+    cumulative: [],
+    teammate_wins: 0,
+    teammate_losses: 0,
+    ...over,
+  }
+}
+
+const drivers: ChampHubDriver[] = [
+  driver({ driver_number: 1, name_acronym: 'VER', points: 200, position: 1 }),
+  driver({
+    driver_number: 4,
+    name_acronym: 'NOR',
+    full_name: 'Lando Norris',
+    team_name: 'McLaren',
+    team_colour: 'ff8000',
+    points: 190,
+    position: 2,
+  }),
+  driver({
+    driver_number: 16,
+    name_acronym: 'LEC',
+    full_name: 'Charles Leclerc',
+    team_name: 'Ferrari',
+    team_colour: 'e8002d',
+    points: 120,
+    position: 3,
+  }),
+]
+
+const hub: ChampionshipHub = {
+  season: 2025,
+  round: 9,
+  total_rounds: 10,
+  rounds_left: 1,
+  last_race: 'Monaco GP',
+  round_labels: ['R1', 'R2', 'R3', 'R4', 'R5', 'R6', 'R7', 'R8', 'R9'],
+  drivers,
+  teams: [],
+}
+
+describe('ChampionshipSimulator', () => {
+  beforeEach(() => {
+    window.localStorage.clear()
+  })
+
+  it('seeds the round by championship order and projects the default scenario', () => {
+    render(<ChampionshipSimulator hub={hub} />)
+
+    expect(screen.getByTestId('champ-view-simulator')).toBeInTheDocument()
+    // Only 1 remaining round; label falls back to "Round 10" (no label yet).
+    expect(screen.getByTestId('sim-round-0')).toHaveTextContent('Round 10')
+    // P1 select seeded with the current leader.
+    expect(screen.getByTestId('sim-pos-1')).toHaveValue('1')
+    expect(screen.getByTestId('sim-pos-2')).toHaveValue('4')
+
+    // Default projection: VER 200+25=225 on top, delta arrows absent.
+    const verRow = screen.getByTestId('sim-row-1')
+    expect(within(verRow).getByText('225')).toBeInTheDocument()
+    expect(within(verRow).getByText('P1')).toBeInTheDocument()
+  })
+
+  it('updates the projected table when a win is reassigned', () => {
+    render(<ChampionshipSimulator hub={hub} />)
+
+    // Give NOR the win; VER (previous P1) is bumped out of the slot.
+    fireEvent.change(screen.getByTestId('sim-pos-1'), { target: { value: '4' } })
+
+    // NOR: 190 + 25 = 215 → P1 with an up arrow; VER stays on 200 → P2 down.
+    const norRow = screen.getByTestId('sim-row-4')
+    expect(within(norRow).getByText('215')).toBeInTheDocument()
+    expect(within(norRow).getByText('P1')).toBeInTheDocument()
+    expect(within(norRow).getByText('▲1')).toBeInTheDocument()
+
+    const verRow = screen.getByTestId('sim-row-1')
+    // "200" appears in both Now and Proj columns (no simulated points).
+    expect(within(verRow).getAllByText('200')).toHaveLength(2)
+    expect(within(verRow).getByText('+0')).toBeInTheDocument()
+    expect(within(verRow).getByText('P2')).toBeInTheDocument()
+    expect(within(verRow).getByText('▼1')).toBeInTheDocument()
+
+    // VER was removed from P1 and holds no slot now.
+    expect(screen.getByTestId('sim-pos-1')).toHaveValue('4')
+  })
+
+  it('shows title alive/eliminated states', () => {
+    render(<ChampionshipSimulator hub={hub} />)
+
+    // Default: VER projects to 225. NOR max = 190+25=215 < 225 → OUT.
+    expect(within(screen.getByTestId('sim-row-1')).getByText('ALIVE')).toBeInTheDocument()
+    expect(within(screen.getByTestId('sim-row-4')).getByText('OUT')).toBeInTheDocument()
+
+    // If VER scores nothing, NOR can still catch him: 190+25 ≥ 200 → ALIVE.
+    fireEvent.change(screen.getByTestId('sim-pos-1'), { target: { value: '4' } })
+    expect(within(screen.getByTestId('sim-row-4')).getByText('ALIVE')).toBeInTheDocument()
+  })
+
+  it('reset round and reset all restore the default order', () => {
+    render(<ChampionshipSimulator hub={hub} />)
+
+    fireEvent.change(screen.getByTestId('sim-pos-1'), { target: { value: '16' } })
+    expect(screen.getByTestId('sim-pos-1')).toHaveValue('16')
+
+    fireEvent.click(screen.getByTestId('sim-reset-round'))
+    expect(screen.getByTestId('sim-pos-1')).toHaveValue('1')
+
+    fireEvent.change(screen.getByTestId('sim-pos-1'), { target: { value: '16' } })
+    fireEvent.click(screen.getByTestId('sim-reset-all'))
+    expect(screen.getByTestId('sim-pos-1')).toHaveValue('1')
+  })
+
+  it('persists the scenario to localStorage keyed by season', () => {
+    const { unmount } = render(<ChampionshipSimulator hub={hub} />)
+    fireEvent.change(screen.getByTestId('sim-pos-1'), { target: { value: '4' } })
+    unmount()
+
+    const stored = window.localStorage.getItem('box-box.champ.sim.2025')
+    expect(stored).not.toBeNull()
+
+    render(<ChampionshipSimulator hub={hub} />)
+    expect(screen.getByTestId('sim-pos-1')).toHaveValue('4')
+  })
+
+  it('survives corrupt localStorage', () => {
+    window.localStorage.setItem('box-box.champ.sim.2025', '{not json')
+    render(<ChampionshipSimulator hub={hub} />)
+    expect(screen.getByTestId('sim-pos-1')).toHaveValue('1')
+  })
+
+  it('shows the season-complete empty state when no rounds remain', () => {
+    render(<ChampionshipSimulator hub={{ ...hub, round: 10, rounds_left: 0 }} />)
+    expect(screen.getByTestId('champ-view-simulator')).toHaveTextContent(
+      'Season complete — nothing left to simulate.',
+    )
+  })
+
+  it('uses round labels beyond the current round when available', () => {
+    const labelled: ChampionshipHub = {
+      ...hub,
+      round: 8,
+      rounds_left: 2,
+      round_labels: [...hub.round_labels, 'ABU'],
+    }
+    render(<ChampionshipSimulator hub={labelled} />)
+    expect(screen.getByTestId('sim-round-0')).toHaveTextContent('R9')
+    expect(screen.getByTestId('sim-round-1')).toHaveTextContent('ABU')
+  })
+})

frontend/src/test/CommandCenterPage.test.tsx

@@ -9,15 +9,17 @@ vi.mock('../api', () => ({
   fetchSeasons: vi.fn(),
   fetchLocalMeetings: vi.fn(),
   fetchSeasonMeetings: vi.fn(),
+  fetchSessions: vi.fn(),
   fetchWeekend: vi.fn(),
   fetchLiveState: vi.fn(),
 }))
 
-import { fetchSeasons, fetchLocalMeetings, fetchSeasonMeetings, fetchWeekend, fetchLiveState } from '../api'
+import { fetchSeasons, fetchLocalMeetings, fetchSeasonMeetings, fetchSessions, fetchWeekend, fetchLiveState } from '../api'
 
 const mockFetchSeasons = vi.mocked(fetchSeasons)
 const mockFetchLocalMeetings = vi.mocked(fetchLocalMeetings)
 const mockFetchSeasonMeetings = vi.mocked(fetchSeasonMeetings)
+const mockFetchSessions = vi.mocked(fetchSessions)
 const mockFetchWeekend = vi.mocked(fetchWeekend)
 const mockFetchLiveState = vi.mocked(fetchLiveState)
 
@@ -99,6 +101,7 @@ describe('CommandCenterPage', () => {
   beforeEach(() => {
     vi.clearAllMocks()
     mockFetchLiveState.mockResolvedValue({ is_live: false, data: null })
+    mockFetchSessions.mockResolvedValue([])
   })
 
   it('shows empty state when no seasons are ingested', async () => {
@@ -134,4 +137,54 @@ describe('CommandCenterPage', () => {
     expect(screen.getByText('No live session')).toBeInTheDocument()
     expect(screen.getByTestId('cc-action-race-hub')).toHaveTextContent('Race')
   })
+
+  it('uses OpenF1 calendar metadata to focus the current weekend when local ingest is behind', async () => {
+    const canada = {
+      ...meeting,
+      meeting_key: 1301,
+      meeting_name: 'Canada',
+      country_name: 'Canada',
+      country_code: 'CAN',
+      circuit_short_name: 'Montreal',
+      date_start: '2026-05-22T00:00:00+00:00',
+      date_end: '2026-05-24T23:59:59+00:00',
+      year: 2026,
+    }
+    const monaco = {
+      ...meeting,
+      meeting_key: 1302,
+      meeting_name: 'Monaco',
+      date_start: '2026-06-05T00:00:00+00:00',
+      date_end: '2026-06-07T23:59:59+00:00',
+      year: 2026,
+    }
+
+    vi.setSystemTime(new Date('2026-06-06T15:15:00Z'))
+    mockFetchSeasons.mockResolvedValue([2026])
+    mockFetchLocalMeetings.mockResolvedValue([canada])
+    mockFetchSeasonMeetings.mockResolvedValue([canada, monaco])
+    mockFetchWeekend.mockResolvedValue({ ...weekend, meeting: canada, meeting_key: canada.meeting_key })
+    mockFetchSessions.mockResolvedValue([
+      {
+        session_key: 9602,
+        session_name: 'Qualifying',
+        session_type: 'Qualifying',
+        meeting_key: monaco.meeting_key,
+        date_start: '2026-06-06T15:00:00+00:00',
+        date_end: '2026-06-06T16:00:00+00:00',
+        gmt_offset: '02:00:00',
+      },
+    ])
+
+    renderPage()
+
+    await waitFor(() => {
+      expect(screen.getByTestId('cc-focus')).toHaveTextContent('Monaco')
+    })
+    expect(screen.getByTestId('cc-focus')).toHaveTextContent('Current weekend')
+    expect(screen.getByTestId('cc-session-9602')).toHaveTextContent('On track')
+    expect(screen.getByTestId('cc-action-race-hub')).toHaveTextContent('Qualifying')
+
+    vi.useRealTimers()
+  })
 })

frontend/src/test/LiveComponents.test.tsx

@@ -0,0 +1,221 @@
+import { describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { TrackStatusBanner } from '../components/live/TrackStatusBanner'
+import { WeatherStrip } from '../components/live/WeatherStrip'
+import { StintHistory } from '../components/live/StintHistory'
+import { BattleChips } from '../components/live/BattleChips'
+import { GapSparkline } from '../components/live/GapSparkline'
+import { PinnedDrivers } from '../components/live/PinnedDrivers'
+import { TimingTower } from '../components/live/TimingTower'
+import { detectBattles } from '../lib/battles'
+import type { LiveTimingRow } from '../lib/live'
+import type { LiveDriverData, LiveWeatherData } from '../types'
+
+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:14.000',
+      BestLapTime: '1:13.500',
+      NumberOfLaps: 10,
+      InPit: false,
+      PitOut: false,
+      Retired: false,
+      ...driver,
+    } as LiveDriverData,
+    Info: {
+      RacingNumber: number,
+      BroadcastName: '',
+      Tla: tla,
+      TeamName: '',
+      TeamColour: '3671c6',
+      FirstName: '',
+      LastName: '',
+    },
+  }
+}
+
+describe('TrackStatusBanner', () => {
+  it('renders a safety car banner for status 4', () => {
+    render(<TrackStatusBanner status="4" />)
+    const banner = screen.getByTestId('track-banner')
+    expect(banner).toHaveClass('track-banner-sc')
+    expect(banner).toHaveTextContent('SAFETY CAR')
+  })
+
+  it('renders a neutral banner for unknown statuses', () => {
+    render(<TrackStatusBanner status="42" />)
+    const banner = screen.getByTestId('track-banner')
+    expect(banner).toHaveClass('track-banner-unknown')
+    expect(banner).toHaveTextContent('TRACK STATUS 42')
+  })
+
+  it('renders nothing without a status', () => {
+    render(<TrackStatusBanner status="" />)
+    expect(screen.queryByTestId('track-banner')).not.toBeInTheDocument()
+  })
+})
+
+describe('WeatherStrip', () => {
+  const weather: LiveWeatherData = {
+    AirTemp: 21.4,
+    TrackTemp: 34.8,
+    Humidity: 58,
+    WindSpeed: 2.3,
+    WindDir: 180,
+    Rainfall: true,
+  }
+
+  it('renders all populated weather fields', () => {
+    render(<WeatherStrip weather={weather} />)
+    const strip = screen.getByTestId('weather-strip')
+    expect(strip).toHaveTextContent('21°C')
+    expect(strip).toHaveTextContent('35°C')
+    expect(strip).toHaveTextContent('58%')
+    expect(strip).toHaveTextContent('2.3 m/s S')
+    expect(strip).toHaveTextContent('RAIN')
+  })
+
+  it('hides gracefully when the payload is empty', () => {
+    render(
+      <WeatherStrip
+        weather={{ AirTemp: 0, TrackTemp: 0, Humidity: 0, WindSpeed: 0, WindDir: 0, Rainfall: false }}
+      />,
+    )
+    expect(screen.queryByTestId('weather-strip')).not.toBeInTheDocument()
+  })
+
+  it('hides when weather is missing entirely', () => {
+    render(<WeatherStrip weather={undefined} />)
+    expect(screen.queryByTestId('weather-strip')).not.toBeInTheDocument()
+  })
+})
+
+describe('StintHistory', () => {
+  it('renders the compound sequence with lap counts', () => {
+    render(
+      <StintHistory
+        stints={[
+          { Compound: 'MEDIUM', New: true, Laps: 12 },
+          { Compound: 'HARD', New: false, Laps: 20 },
+        ]}
+      />,
+    )
+    const seq = screen.getByTestId('stint-seq')
+    expect(seq).toHaveTextContent('M')
+    expect(seq).toHaveTextContent('12')
+    expect(seq).toHaveTextContent('H')
+    expect(seq).toHaveTextContent('20')
+  })
+
+  it('renders a dash without stint data', () => {
+    render(<StintHistory stints={undefined} />)
+    expect(screen.getByText('-')).toBeInTheDocument()
+  })
+})
+
+describe('GapSparkline', () => {
+  it('shows a placeholder with too few samples', () => {
+    render(<GapSparkline samples={[1.0]} />)
+    expect(screen.queryByTestId('gap-spark')).not.toBeInTheDocument()
+  })
+
+  it('renders a closing indicator when the gap shrinks', () => {
+    render(<GapSparkline samples={[2.0, 1.8, 1.5, 1.2, 0.9, 0.6]} />)
+    expect(screen.getByTestId('gap-spark')).toHaveClass('trend-closing')
+    expect(screen.getByTitle('Gap closing')).toBeInTheDocument()
+  })
+})
+
+describe('BattleChips', () => {
+  it('renders chip labels for detected battles', () => {
+    const battles = detectBattles(
+      [makeRow('1', 1, 'VER'), makeRow('4', 2, 'NOR', { Interval: '+0.4' })],
+      'Race',
+    )
+    render(<BattleChips battles={battles} />)
+    expect(screen.getByTestId('battle-chips')).toHaveTextContent('VER ⚔ NOR +0.4')
+  })
+
+  it('renders nothing when there are no battles', () => {
+    render(<BattleChips battles={[]} />)
+    expect(screen.queryByTestId('battle-chips')).not.toBeInTheDocument()
+  })
+})
+
+describe('TimingTower', () => {
+  const rows = [
+    makeRow('1', 1, 'VER'),
+    makeRow('4', 2, 'NOR', { Interval: '+0.4', GapToLeader: '+0.4' }),
+    makeRow('16', 3, 'LEC', { Interval: '+3.2', GapToLeader: '+3.6' }),
+  ]
+
+  it('highlights battle rows and marks pinned drivers', () => {
+    render(
+      <TimingTower
+        rows={rows}
+        battleNumbers={new Set(['1', '4'])}
+        pinned={['16']}
+        onTogglePin={() => {}}
+      />,
+    )
+    expect(screen.getByText('VER').closest('tr')).toHaveClass('battle-row')
+    expect(screen.getByText('NOR').closest('tr')).toHaveClass('battle-row')
+    const lecRow = screen.getByText('LEC').closest('tr')
+    expect(lecRow).not.toHaveClass('battle-row')
+    expect(lecRow).toHaveClass('pinned-row')
+  })
+
+  it('toggles a pin when the pin button is clicked', () => {
+    const onTogglePin = vi.fn()
+    render(<TimingTower rows={rows} onTogglePin={onTogglePin} />)
+    fireEvent.click(screen.getByText('NOR').closest('tr')!.querySelector('.pin-btn')!)
+    expect(onTogglePin).toHaveBeenCalledWith('4')
+  })
+
+  it('shows an empty notice without rows', () => {
+    render(<TimingTower rows={[]} />)
+    expect(screen.getByText(/no driver timing rows/i)).toBeInTheDocument()
+  })
+})
+
+describe('PinnedDrivers', () => {
+  it('renders pinned cards with gap and unpins on click', () => {
+    const onToggle = vi.fn()
+    render(
+      <PinnedDrivers
+        rows={[makeRow('4', 2, 'NOR', { Interval: '+0.4' })]}
+        history={{ '4': [1.0, 0.8, 0.6, 0.4] }}
+        pinned={['4']}
+        onToggle={onToggle}
+      />,
+    )
+    const strip = screen.getByTestId('pinned-strip')
+    expect(strip).toHaveTextContent('NOR')
+    expect(strip).toHaveTextContent('+0.4')
+    fireEvent.click(screen.getByText('NOR').closest('button')!)
+    expect(onToggle).toHaveBeenCalledWith('4')
+  })
+
+  it('renders a fallback card when the driver is missing from the feed', () => {
+    render(
+      <PinnedDrivers rows={[]} history={{}} pinned={['44']} onToggle={() => {}} />,
+    )
+    expect(screen.getByTestId('pinned-strip')).toHaveTextContent('no data')
+  })
+
+  it('renders nothing without pins', () => {
+    render(<PinnedDrivers rows={[]} history={{}} pinned={[]} onToggle={() => {}} />)
+    expect(screen.queryByTestId('pinned-strip')).not.toBeInTheDocument()
+  })
+})

frontend/src/test/battles.test.ts

@@ -0,0 +1,118 @@
+import { describe, expect, it } from 'vitest'
+import { battleLabel, battleNumbers, detectBattles, isRaceSession } from '../lib/battles'
+import type { LiveTimingRow } from '../lib/live'
+import type { LiveDriverData } from '../types'
+
+function row(
+  number: string,
+  position: number,
+  interval: string,
+  tla: string,
+  overrides: Partial<LiveDriverData> = {},
+): LiveTimingRow {
+  return {
+    RacingNumber: number,
+    Position: position,
+    Driver: {
+      RacingNumber: number,
+      Position: position,
+      Interval: interval,
+      GapToLeader: interval,
+      InPit: false,
+      PitOut: false,
+      Retired: false,
+      ...overrides,
+    } as LiveDriverData,
+    Info: {
+      RacingNumber: number,
+      BroadcastName: '',
+      Tla: tla,
+      TeamName: '',
+      TeamColour: '',
+      FirstName: '',
+      LastName: '',
+    },
+  }
+}
+
+describe('isRaceSession', () => {
+  it('only treats race and sprint sessions as races', () => {
+    expect(isRaceSession('Race')).toBe(true)
+    expect(isRaceSession('Sprint')).toBe(true)
+    expect(isRaceSession('Qualifying')).toBe(false)
+    expect(isRaceSession('Practice')).toBe(false)
+    expect(isRaceSession('')).toBe(false)
+    expect(isRaceSession(undefined)).toBe(false)
+  })
+})
+
+describe('detectBattles', () => {
+  const rows = [
+    row('1', 1, '', 'VER'),
+    row('4', 2, '+0.4', 'NOR'),
+    row('81', 3, '+0.8', 'PIA'),
+    row('16', 4, '+5.0', 'LEC'),
+    row('44', 5, '+0.9', 'HAM'),
+    row('63', 6, '+12.2', 'RUS'),
+  ]
+
+  it('groups consecutive cars within 1.0s in race sessions', () => {
+    const battles = detectBattles(rows, 'Race')
+    expect(battles).toHaveLength(2)
+    expect(battles[0].drivers.map((d) => d.code)).toEqual(['VER', 'NOR', 'PIA'])
+    expect(battles[0].minGap).toBeCloseTo(0.4)
+    expect(battles[1].drivers.map((d) => d.code)).toEqual(['LEC', 'HAM'])
+    expect(battles[1].minGap).toBeCloseTo(0.9)
+  })
+
+  it('returns nothing outside race sessions', () => {
+    expect(detectBattles(rows, 'Qualifying')).toEqual([])
+    expect(detectBattles(rows, undefined)).toEqual([])
+  })
+
+  it('excludes cars in the pits or retired', () => {
+    const pitted = [
+      row('1', 1, '', 'VER'),
+      row('4', 2, '+0.4', 'NOR', { InPit: true }),
+      row('81', 3, '+0.6', 'PIA'),
+      row('16', 4, '+8.0', 'LEC'),
+      row('44', 5, '+0.5', 'HAM', { Retired: true }),
+    ]
+    const battles = detectBattles(pitted, 'Race')
+    expect(battles).toEqual([])
+  })
+
+  it('ignores lapped and missing intervals', () => {
+    const lapped = [
+      row('1', 1, '', 'VER'),
+      row('4', 2, '1L', 'NOR'),
+      row('81', 3, '', 'PIA'),
+    ]
+    expect(detectBattles(lapped, 'Race')).toEqual([])
+  })
+
+  it('handles empty and single-row input', () => {
+    expect(detectBattles([], 'Race')).toEqual([])
+    expect(detectBattles([row('1', 1, '', 'VER')], 'Race')).toEqual([])
+  })
+})
+
+describe('battleLabel / battleNumbers', () => {
+  it('formats a two-car chip label', () => {
+    const battles = detectBattles([row('1', 1, '', 'VER'), row('4', 2, '+0.4', 'NOR')], 'Race')
+    expect(battleLabel(battles[0])).toBe('VER ⚔ NOR +0.4')
+  })
+
+  it('collects racing numbers across all battles', () => {
+    const battles = detectBattles(
+      [
+        row('1', 1, '', 'VER'),
+        row('4', 2, '+0.4', 'NOR'),
+        row('16', 3, '+9.0', 'LEC'),
+        row('44', 4, '+0.7', 'HAM'),
+      ],
+      'Race',
+    )
+    expect(battleNumbers(battles)).toEqual(new Set(['1', '4', '16', '44']))
+  })
+})

frontend/src/test/gapHistory.test.ts

@@ -0,0 +1,117 @@
+import { describe, expect, it } from 'vitest'
+import {
+  MAX_GAP_SAMPLES,
+  gapTrend,
+  parseIntervalSeconds,
+  recordGapSamples,
+  sparklinePoints,
+} from '../lib/gapHistory'
+import type { GapHistoryMap } from '../lib/gapHistory'
+
+describe('parseIntervalSeconds', () => {
+  it('parses signed and unsigned decimal gaps', () => {
+    expect(parseIntervalSeconds('+1.234')).toBe(1.234)
+    expect(parseIntervalSeconds('1.234')).toBe(1.234)
+    expect(parseIntervalSeconds('+0.4')).toBe(0.4)
+    expect(parseIntervalSeconds('12')).toBe(12)
+    expect(parseIntervalSeconds('-0.5')).toBe(-0.5)
+  })
+
+  it('parses minute-form gaps', () => {
+    expect(parseIntervalSeconds('+1:05.234')).toBeCloseTo(65.234)
+  })
+
+  it('rejects leader, lapped, and garbage markers', () => {
+    expect(parseIntervalSeconds('')).toBeNull()
+    expect(parseIntervalSeconds('   ')).toBeNull()
+    expect(parseIntervalSeconds(undefined)).toBeNull()
+    expect(parseIntervalSeconds(null)).toBeNull()
+    expect(parseIntervalSeconds('LAP 12')).toBeNull()
+    expect(parseIntervalSeconds('1L')).toBeNull()
+    expect(parseIntervalSeconds('+1 LAP')).toBeNull()
+    expect(parseIntervalSeconds('2 LAPS')).toBeNull()
+    expect(parseIntervalSeconds('abc')).toBeNull()
+  })
+})
+
+describe('recordGapSamples', () => {
+  it('appends one sample per snapshot and does not mutate the input', () => {
+    const initial = { '1': [1.0] }
+    const next = recordGapSamples(initial, [
+      { racingNumber: '1', interval: '+0.9' },
+      { racingNumber: '4', interval: '+1.5' },
+    ])
+    expect(next['1']).toEqual([1.0, 0.9])
+    expect(next['4']).toEqual([1.5])
+    expect(initial['1']).toEqual([1.0])
+  })
+
+  it('keeps existing history when the interval is unparsable', () => {
+    const next = recordGapSamples({ '1': [1.2, 1.1] }, [{ racingNumber: '1', interval: '1L' }])
+    expect(next['1']).toEqual([1.2, 1.1])
+  })
+
+  it('prunes drivers missing from the snapshot', () => {
+    const next = recordGapSamples({ '99': [3.0] }, [{ racingNumber: '1', interval: '+0.5' }])
+    expect(next['99']).toBeUndefined()
+  })
+
+  it('caps the ring buffer', () => {
+    let history: GapHistoryMap = {}
+    for (let i = 0; i < 50; i++) {
+      history = recordGapSamples(history, [{ racingNumber: '1', interval: `+${i}.0` }])
+    }
+    expect(history['1']).toHaveLength(MAX_GAP_SAMPLES)
+    expect(history['1'][MAX_GAP_SAMPLES - 1]).toBe(49)
+    expect(history['1'][0]).toBe(50 - MAX_GAP_SAMPLES)
+  })
+
+  it('respects a custom cap', () => {
+    const next = recordGapSamples({ '1': [1, 2, 3] }, [{ racingNumber: '1', interval: '+4.0' }], 3)
+    expect(next['1']).toEqual([2, 3, 4])
+  })
+})
+
+describe('gapTrend', () => {
+  it('detects a closing gap', () => {
+    expect(gapTrend([2.0, 1.8, 1.6, 1.4, 1.2, 1.0])).toBe('closing')
+  })
+
+  it('detects an opening gap', () => {
+    expect(gapTrend([1.0, 1.2, 1.4, 1.6, 1.8, 2.0])).toBe('opening')
+  })
+
+  it('reports steady within the threshold', () => {
+    expect(gapTrend([1.0, 1.02, 0.98, 1.01, 1.0, 0.99])).toBe('steady')
+  })
+
+  it('needs at least three samples', () => {
+    expect(gapTrend([])).toBeNull()
+    expect(gapTrend([1.0])).toBeNull()
+    expect(gapTrend([1.0, 0.5])).toBeNull()
+  })
+})
+
+describe('sparklinePoints', () => {
+  it('returns empty for insufficient samples', () => {
+    expect(sparklinePoints([], 56, 14)).toBe('')
+    expect(sparklinePoints([1.0], 56, 14)).toBe('')
+  })
+
+  it('spans the full width and inverts the y axis (smaller gap = lower)', () => {
+    const points = sparklinePoints([0, 10], 56, 14).split(' ')
+    expect(points).toHaveLength(2)
+    const [x1, y1] = points[0].split(',').map(Number)
+    const [x2, y2] = points[1].split(',').map(Number)
+    expect(x1).toBe(0)
+    expect(x2).toBe(56)
+    expect(y1).toBeGreaterThan(y2) // larger gap plots higher (smaller y)
+  })
+
+  it('draws a mid line for flat data', () => {
+    const points = sparklinePoints([1, 1, 1], 56, 14).split(' ')
+    for (const point of points) {
+      expect(Number(point.split(',')[1])).toBe(7)
+    }
+  })
+})

frontend/src/test/live.test.ts

@@ -1,14 +1,21 @@
 import { describe, expect, it } from 'vitest'
 import {
+  compoundClass,
+  compoundLetter,
   extrapolateClock,
   latestRaceControl,
+  loadPinnedDrivers,
   positionDeltaClass,
   parseLiveStateEvent,
   rcFlagClass,
+  savePinnedDrivers,
   sortLiveTimingRows,
+  togglePin,
+  trackStatusInfo,
   trackStatusLabel,
   tyreClass,
   tyreLabel,
+  windDirectionLabel,
 } from '../lib/live'
 import type { LiveStreamData } from '../types'
 
@@ -137,3 +144,70 @@ describe('live transforms', () => {
     expect(extrapolateClock('01:20:00', '2026-05-25T12:00:00Z', true, Date.parse('2026-05-25T12:00:30Z'))).toBe('01:19:30')
   })
 })
+
+describe('track status mapping', () => {
+  it('maps all known raw statuses to banner info', () => {
+    expect(trackStatusInfo('1')).toMatchObject({ key: 'green', label: 'TRACK CLEAR' })
+    expect(trackStatusInfo('2')).toMatchObject({ key: 'yellow', label: 'YELLOW FLAG' })
+    expect(trackStatusInfo('4')).toMatchObject({ key: 'sc', label: 'SAFETY CAR' })
+    expect(trackStatusInfo('5')).toMatchObject({ key: 'red', label: 'RED FLAG' })
+    expect(trackStatusInfo('6')).toMatchObject({ key: 'vsc', label: 'VIRTUAL SAFETY CAR' })
+    expect(trackStatusInfo('7')).toMatchObject({ key: 'vsc', label: 'VSC ENDING' })
+  })
+
+  it('falls back to a neutral display for unknown values', () => {
+    expect(trackStatusInfo('9')).toMatchObject({ key: 'unknown', label: 'TRACK STATUS 9' })
+    expect(trackStatusInfo('')).toMatchObject({ key: 'unknown', label: 'TRACK STATUS UNKNOWN' })
+    expect(trackStatusInfo(undefined)).toMatchObject({ key: 'unknown' })
+  })
+
+  it('keeps the compact label helper defensive', () => {
+    expect(trackStatusLabel('7')).toBe('VSC ENDING')
+    expect(trackStatusLabel('99')).toBe('99')
+    expect(trackStatusLabel('')).toBe('UNKNOWN')
+  })
+})
+
+describe('weather and stint helpers', () => {
+  it('maps wind direction degrees to compass points', () => {
+    expect(windDirectionLabel(0)).toBe('N')
+    expect(windDirectionLabel(90)).toBe('E')
+    expect(windDirectionLabel(180)).toBe('S')
+    expect(windDirectionLabel(315)).toBe('NW')
+    expect(windDirectionLabel(359)).toBe('N')
+    expect(windDirectionLabel(null)).toBe('')
+  })
+
+  it('maps stint compounds to classes and letters', () => {
+    expect(compoundClass('SOFT')).toBe('tyre-soft')
+    expect(compoundClass('INTERMEDIATE')).toBe('tyre-inter')
+    expect(compoundClass('')).toBe('tyre-unknown')
+    expect(compoundLetter('MEDIUM')).toBe('M')
+    expect(compoundLetter(undefined)).toBe('?')
+  })
+})
+
+describe('pinned drivers', () => {
+  it('toggles pins with a max of three, dropping the oldest', () => {
+    expect(togglePin([], '1')).toEqual(['1'])
+    expect(togglePin(['1'], '1')).toEqual([])
+    expect(togglePin(['1', '4'], '16')).toEqual(['1', '4', '16'])
+    expect(togglePin(['1', '4', '16'], '44')).toEqual(['4', '16', '44'])
+    expect(togglePin(['1', '4', '16'], '4')).toEqual(['1', '16'])
+  })
+
+  it('round-trips pins through storage and survives corrupt data', () => {
+    const store = new Map<string, string>()
+    const storage = {
+      getItem: (key: string) => store.get(key) ?? null,
+      setItem: (key: string, value: string) => void store.set(key, value),
+    }
+    savePinnedDrivers(['1', '44'], storage)
+    expect(loadPinnedDrivers(storage)).toEqual(['1', '44'])
+
+    store.set('box-box.live.pins', 'not json {{')
+    expect(loadPinnedDrivers(storage)).toEqual([])
+    store.set('box-box.live.pins', '{"nope":true}')
+    expect(loadPinnedDrivers(storage)).toEqual([])
+  })
+})

frontend/src/test/setup.ts

@@ -4,3 +4,26 @@ Object.defineProperty(window, 'scrollTo', {
   value: () => {},
   writable: true,
 })
+
+// Node 22+ ships an experimental `localStorage` global that shadows jsdom's
+// implementation; without `--localstorage-file` it resolves to undefined in
+// the test environment. Back-fill a minimal in-memory Storage so components
+// that persist state (e.g. the championship simulator) are testable.
+if (typeof window !== 'undefined' && !window.localStorage) {
+  const store = new Map<string, string>()
+  const localStorageMock: Storage = {
+    get length() {
+      return store.size
+    },
+    clear: () => store.clear(),
+    getItem: (key) => (store.has(key) ? store.get(key)! : null),
+    key: (index) => [...store.keys()][index] ?? null,
+    removeItem: (key) => {
+      store.delete(key)
+    },
+    setItem: (key, value) => {
+      store.set(String(key), String(value))
+    },
+  }
+  Object.defineProperty(window, 'localStorage', { value: localStorageMock, writable: true })
+}

frontend/src/test/simulator.test.ts

@@ -0,0 +1,240 @@
+import { describe, expect, it } from 'vitest'
+import {
+  MAX_POINTS_PER_ROUND,
+  POINTS_BY_POSITION,
+  SCORING_POSITIONS,
+  assignPosition,
+  defaultRound,
+  defaultScenario,
+  emptyRound,
+  normalizeScenario,
+  pointsForPosition,
+  projectStandings,
+  simulatedPoints,
+} from '../lib/simulator'
+import type { Scenario } from '../lib/simulator'
+import type { ChampHubDriver } from '../types'
+
+function driver(over: Partial<ChampHubDriver>): ChampHubDriver {
+  return {
+    driver_number: 1,
+    name_acronym: 'VER',
+    full_name: 'Max Verstappen',
+    team_name: 'Red Bull',
+    team_colour: '3671c6',
+    points: 0,
+    position: 1,
+    wins: 0,
+    podiums: 0,
+    poles: 0,
+    form: [],
+    cumulative: [],
+    teammate_wins: 0,
+    teammate_losses: 0,
+    ...over,
+  }
+}
+
+const standings: ChampHubDriver[] = [
+  driver({ driver_number: 1, name_acronym: 'VER', points: 200, position: 1 }),
+  driver({ driver_number: 4, name_acronym: 'NOR', points: 190, position: 2 }),
+  driver({ driver_number: 16, name_acronym: 'LEC', points: 120, position: 3 }),
+  driver({ driver_number: 44, name_acronym: 'HAM', points: 40, position: 4 }),
+]
+
+describe('pointsForPosition', () => {
+  it('matches the current F1 points table for P1–P10', () => {
+    expect(POINTS_BY_POSITION).toEqual([25, 18, 15, 12, 10, 8, 6, 4, 2, 1])
+    expect(pointsForPosition(1)).toBe(25)
+    expect(pointsForPosition(2)).toBe(18)
+    expect(pointsForPosition(10)).toBe(1)
+  })
+
+  it('awards zero outside the top ten and for invalid positions', () => {
+    expect(pointsForPosition(0)).toBe(0)
+    expect(pointsForPosition(11)).toBe(0)
+    expect(pointsForPosition(-3)).toBe(0)
+    expect(pointsForPosition(2.5)).toBe(0)
+  })
+})
+
+describe('defaultRound / defaultScenario', () => {
+  it('seeds the round with the current championship order', () => {
+    const round = defaultRound(standings)
+    expect(round.length).toBe(SCORING_POSITIONS)
+    expect(round.slice(0, 4)).toEqual([1, 4, 16, 44])
+    expect(round.slice(4)).toEqual([null, null, null, null, null, null])
+  })
+
+  it('sorts by points even when position fields disagree', () => {
+    const shuffled = [
+      driver({ driver_number: 4, points: 190, position: 2 }),
+      driver({ driver_number: 1, points: 200, position: 1 }),
+    ]
+    expect(defaultRound(shuffled).slice(0, 2)).toEqual([1, 4])
+  })
+
+  it('builds one round per remaining round, and none for finished seasons', () => {
+    expect(defaultScenario(standings, 3)).toHaveLength(3)
+    expect(defaultScenario(standings, 0)).toHaveLength(0)
+    expect(defaultScenario(standings, -2)).toHaveLength(0)
+    expect(defaultScenario([], 2)[0]).toEqual(emptyRound())
+  })
+})
+
+describe('simulatedPoints', () => {
+  it('sums points across rounds per driver', () => {
+    const scenario: Scenario = [defaultRound(standings), defaultRound(standings)]
+    const totals = simulatedPoints(scenario)
+    expect(totals.get(1)).toBe(50)
+    expect(totals.get(4)).toBe(36)
+    expect(totals.get(16)).toBe(30)
+    expect(totals.get(44)).toBe(24)
+  })
+
+  it('ignores unassigned slots and empty scenarios', () => {
+    expect(simulatedPoints([]).size).toBe(0)
+    expect(simulatedPoints([emptyRound()]).size).toBe(0)
+  })
+})
+
+describe('projectStandings', () => {
+  it('returns an empty array for no drivers', () => {
+    expect(projectStandings([], [emptyRound()], 3)).toEqual([])
+  })
+
+  it('keeps order and zero deltas under the default (status quo) scenario', () => {
+    const rows = projectStandings(standings, defaultScenario(standings, 2), 2)
+    expect(rows.map((r) => r.driver.driver_number)).toEqual([1, 4, 16, 44])
+    expect(rows.every((r) => r.delta === 0)).toBe(true)
+    expect(rows[0].projectedPoints).toBe(200 + 50)
+  })
+
+  it('computes projected points, positions, and deltas when the order flips', () => {
+    // NOR wins both remaining rounds, VER scores nothing.
+    const win: (number | null)[] = [4, ...Array(9).fill(null)]
+    const rows = projectStandings(standings, [win, win], 2)
+
+    const nor = rows.find((r) => r.driver.driver_number === 4)!
+    const ver = rows.find((r) => r.driver.driver_number === 1)!
+    expect(nor.projectedPoints).toBe(190 + 50)
+    expect(nor.projectedPosition).toBe(1)
+    expect(nor.delta).toBe(1) // moved up one place
+    expect(ver.projectedPosition).toBe(2)
+    expect(ver.delta).toBe(-1) // dropped one place
+  })
+
+  it('breaks projected-points ties by current position', () => {
+    const pair = [
+      driver({ driver_number: 1, name_acronym: 'VER', points: 100, position: 1 }),
+      driver({ driver_number: 4, name_acronym: 'NOR', points: 90, position: 2 }),
+    ]
+    // NOR takes P5 (+10) → both project to 100. Better current position wins the tie.
+    const round: (number | null)[] = [null, null, null, null, 4, null, null, null, null, null]
+    const rows = projectStandings(pair, [round], 1)
+    expect(rows[0].driver.driver_number).toBe(1)
+    expect(rows[1].driver.driver_number).toBe(4)
+    expect(rows[0].projectedPoints).toBe(100)
+    expect(rows[1].projectedPoints).toBe(100)
+    expect(rows.every((r) => r.delta === 0)).toBe(true)
+  })
+})
+
+describe('title elimination math', () => {
+  it('marks drivers alive when max remaining points can match the leader projection', () => {
+    // Default scenario: leader VER projects to 200 + 2×25 = 250.
+    // HAM max = 40 + 2×25 = 90 < 250 → OUT. NOR max = 190 + 50 = 240 < 250 → OUT.
+    const rows = projectStandings(standings, defaultScenario(standings, 2), 2)
+    const byNum = new Map(rows.map((r) => [r.driver.driver_number, r]))
+    expect(byNum.get(1)!.titleAlive).toBe(true)
+    expect(byNum.get(4)!.titleAlive).toBe(false)
+    expect(byNum.get(44)!.titleAlive).toBe(false)
+  })
+
+  it('keeps close challengers alive when the leader scores nothing in the scenario', () => {
+    // Leader scores 0 in both remaining rounds → leader projected stays 200.
+    const scenario: Scenario = [emptyRound(), emptyRound()]
+    const rows = projectStandings(standings, scenario, 2)
+    const byNum = new Map(rows.map((r) => [r.driver.driver_number, r]))
+    expect(byNum.get(4)!.titleAlive).toBe(true) // 190 + 50 ≥ 200
+    expect(byNum.get(16)!.titleAlive).toBe(false) // 120 + 50 < 200
+    expect(byNum.get(44)!.titleAlive).toBe(false) // 40 + 50 < 200
+  })
+
+  it('always keeps the current leader alive', () => {
+    const scenario = defaultScenario(standings, 5)
+    const rows = projectStandings(standings, scenario, 5)
+    expect(rows.find((r) => r.driver.driver_number === 1)!.titleAlive).toBe(true)
+  })
+
+  it('handles zero rounds left: alive only means already matching the leader', () => {
+    const rows = projectStandings(standings, [], 0)
+    expect(rows[0].titleAlive).toBe(true)
+    expect(rows.slice(1).every((r) => !r.titleAlive)).toBe(true)
+  })
+
+  it('uses 25 as the max points per round', () => {
+    expect(MAX_POINTS_PER_ROUND).toBe(25)
+  })
+})
+
+describe('normalizeScenario', () => {
+  it('accepts a valid stored scenario', () => {
+    const stored: Scenario = [
+      [4, 1, null, null, null, null, null, null, null, null],
+      defaultRound(standings),
+    ]
+    const result = normalizeScenario(JSON.parse(JSON.stringify(stored)), standings, 2)
+    expect(result).toEqual(stored)
+  })
+
+  it('falls back to defaults for garbage input', () => {
+    const def = defaultScenario(standings, 2)
+    expect(normalizeScenario(undefined, standings, 2)).toEqual(def)
+    expect(normalizeScenario('nope', standings, 2)).toEqual(def)
+    expect(normalizeScenario({ a: 1 }, standings, 2)).toEqual(def)
+    expect(normalizeScenario(42, standings, 2)).toEqual(def)
+  })
+
+  it('rejects rounds with unknown drivers, duplicates, or the wrong shape', () => {
+    const def = defaultRound(standings)
+    const bad: unknown = [
+      [999, null, null, null, null, null, null, null, null, null], // unknown driver
+      [1, 1, null, null, null, null, null, null, null, null], // duplicate
+      [1, 4], // wrong length
+    ]
+    const result = normalizeScenario(bad, standings, 3)
+    expect(result).toEqual([def, def, def])
+  })
+
+  it('trims or pads to the current rounds_left', () => {
+    const one: Scenario = [[4, null, null, null, null, null, null, null, null, null]]
+    expect(normalizeScenario(one, standings, 3)).toHaveLength(3)
+    expect(normalizeScenario([...one, ...one, ...one], standings, 1)).toHaveLength(1)
+  })
+})
+
+describe('assignPosition', () => {
+  it('assigns a driver and removes it from its previous slot', () => {
+    const round = defaultRound(standings) // [1, 4, 16, 44, ...]
+    const next = assignPosition(round, 0, 4) // NOR to P1
+    expect(next[0]).toBe(4)
+    expect(next[1]).toBeNull() // NOR removed from P2
+    expect(next[2]).toBe(16)
+    expect(round[0]).toBe(1) // input not mutated
+  })
+
+  it('clears a slot when assigning null and ignores out-of-range positions', () => {
+    const round = defaultRound(standings)
+    expect(assignPosition(round, 0, null)[0]).toBeNull()
+    expect(assignPosition(round, 99, 4)).toEqual(round)
+    expect(assignPosition(round, -1, 4)).toEqual(round)
+  })
+
+  it('repairs short rounds to the full ten slots', () => {
+    const next = assignPosition([1], 3, 4)
+    expect(next).toHaveLength(SCORING_POSITIONS)
+    expect(next[0]).toBe(1)
+    expect(next[3]).toBe(4)
+  })
+})

frontend/src/types.ts

@@ -267,6 +267,42 @@ export interface LiveStreamData {
   Stints: Record<string, LiveStintData[]>
 }
 
+export interface ChampHubDriver {
+  driver_number: number
+  name_acronym: string
+  full_name: string
+  team_name: string
+  team_colour: string
+  points: number
+  position: number
+  wins: number
+  podiums: number
+  poles: number
+  form: number[]
+  cumulative: number[]
+  teammate_wins: number
+  teammate_losses: number
+}
+
+export interface ChampHubTeam {
+  team_name: string
+  team_colour: string
+  points: number
+  position: number
+  wins: number
+}
+
+export interface ChampionshipHub {
+  season: number
+  round: number
+  total_rounds: number
+  rounds_left: number
+  last_race: string
+  round_labels: string[]
+  drivers: ChampHubDriver[]
+  teams: ChampHubTeam[]
+}
+
 export interface NewsItem {
   source: string
   title: string

internal/api/client.go

@@ -2,15 +2,52 @@ package api
 
 import (
 	"net/http"
+	"sync"
 	"sync/atomic"
 	"time"
 )
 
+// Minimum spacing between live OpenF1 requests. The free tier throttles
+// bursts of more than ~3 requests/second, so anonymous clients are paced
+// conservatively; authenticated (paid tier) clients get a higher rate.
+const (
+	anonRequestInterval = 350 * time.Millisecond
+	authRequestInterval = 100 * time.Millisecond
+)
+
+// requestPacer spaces network requests evenly so concurrent callers
+// (e.g. the championship hub fan-out) cannot burst past the API rate limit.
+// Cache hits never touch the pacer.
+type requestPacer struct {
+	mu       sync.Mutex
+	interval time.Duration
+	next     time.Time
+}
+
+// wait blocks until this caller's reserved slot arrives.
+func (p *requestPacer) wait() {
+	if p == nil || p.interval <= 0 {
+		return
+	}
+	p.mu.Lock()
+	now := time.Now()
+	if p.next.Before(now) {
+		p.next = now
+	}
+	sleep := p.next.Sub(now)
+	p.next = p.next.Add(p.interval)
+	p.mu.Unlock()
+	if sleep > 0 {
+		time.Sleep(sleep)
+	}
+}
+
 type OpenF1Client struct {
 	url        string
 	apiKey     string
 	httpClient *http.Client
 	cache      *Cache
+	pacer      *requestPacer
 
 	// staleFlag is set to 1 atomically whenever a request falls back to stale
 	// cached data (e.g. because the API is locked during a live session).
@@ -24,6 +61,7 @@ func NewOpenF1Client(url string, timeout time.Duration) *OpenF1Client {
 		url:        url,
 		httpClient: &http.Client{Timeout: timeout},
 		cache:      NewCache(),
+		pacer:      &requestPacer{interval: anonRequestInterval},
 	}
 }
 
@@ -35,6 +73,7 @@ func NewOpenF1ClientWithKey(url string, timeout time.Duration, apiKey string) *O
 		apiKey:     apiKey,
 		httpClient: &http.Client{Timeout: timeout},
 		cache:      NewCache(),
+		pacer:      &requestPacer{interval: authRequestInterval},
 	}
 }
 

internal/api/openf1.go

@@ -35,6 +35,45 @@ func IsLiveSessionError(err error) bool {
 	return errors.Is(err, ErrLiveSessionLocked)
 }
 
+// max429Retries is how many times doPaced re-attempts a request that came
+// back 429 before giving up and letting the caller fall back to stale data.
+const max429Retries = 3
+
+// retryAfter429 extracts the server-requested backoff from a 429 response,
+// with a sane default and cap so a hostile header can't stall the app.
+func retryAfter429(resp *http.Response) time.Duration {
+	delay := time.Second
+	if header := resp.Header.Get("Retry-After"); header != "" {
+		if seconds, err := strconv.Atoi(header); err == nil && seconds > 0 {
+			delay = time.Duration(seconds) * time.Second
+		}
+	}
+	if delay > 10*time.Second {
+		delay = 10 * time.Second
+	}
+	return delay
+}
+
+// doPaced executes req through the client's request pacer and transparently
+// retries 429 responses (honouring Retry-After) up to max429Retries times.
+// Without this, concurrent fan-outs (championship hub, track prefetch) burst
+// past the free-tier limit and callers silently treat 429s as missing data.
+func (c *OpenF1Client) doPaced(req *http.Request) (*http.Response, error) {
+	for attempt := 0; ; attempt++ {
+		c.pacer.wait()
+		resp, err := c.httpClient.Do(req)
+		if err != nil {
+			return nil, err
+		}
+		if resp.StatusCode != http.StatusTooManyRequests || attempt >= max429Retries {
+			return resp, nil
+		}
+		delay := retryAfter429(resp)
+		resp.Body.Close()
+		time.Sleep(delay)
+	}
+}
+
 // get performs a GET request and returns the response body, or an error if the
 // status code is not 200 OK. It checks the SQLite cache before making a
 // network request.
@@ -59,7 +98,7 @@ func (c *OpenF1Client) get(url string) (io.ReadCloser, error) {
 		req.Header.Set("Authorization", "Bearer "+c.apiKey)
 	}
 
-	resp, err := c.httpClient.Do(req)
+	resp, err := c.doPaced(req)
 	if err != nil {
 		return c.tryStale(url, err)
 	}
@@ -114,20 +153,14 @@ func (c *OpenF1Client) FetchStrict(url string) ([]byte, error) {
 		req.Header.Set("Authorization", "Bearer "+c.apiKey)
 	}
 
-	resp, err := c.httpClient.Do(req)
+	resp, err := c.doPaced(req)
 	if err != nil {
 		return nil, err
 	}
 	defer resp.Body.Close()
 
 	if resp.StatusCode == http.StatusTooManyRequests {
-		retryAfterDur := 500 * time.Millisecond
+		return nil, &RateLimitError{RetryAfter: retryAfter429(resp)}
-		if retryAfterHeader := resp.Header.Get("Retry-After"); retryAfterHeader != "" {
-			if seconds, err := strconv.Atoi(retryAfterHeader); err == nil {
-				retryAfterDur = time.Duration(seconds) * time.Second
-			}
-		}
-		return nil, &RateLimitError{RetryAfter: retryAfterDur}
 	}
 
 	data, err := io.ReadAll(resp.Body)

internal/api/pacing_test.go

@@ -0,0 +1,107 @@
+package api
+
+import (
+	"encoding/json"
+	"io"
+	"net/http"
+	"net/http/httptest"
+	"sync"
+	"sync/atomic"
+	"testing"
+	"time"
+)
+
+// newPacedTestClient builds a client against a test server with an isolated cache
+// (HOME is pointed at a temp dir so the SQLite cache never touches the real one).
+func newPacedTestClient(t *testing.T, srvURL string, interval time.Duration) *OpenF1Client {
+	t.Helper()
+	t.Setenv("HOME", t.TempDir())
+	t.Setenv("XDG_CACHE_HOME", t.TempDir())
+	c := NewOpenF1Client(srvURL, 5*time.Second)
+	c.pacer = &requestPacer{interval: interval}
+	t.Cleanup(func() { _ = c.Close() })
+	return c
+}
+
+func TestRequestPacerSpacesConcurrentCallers(t *testing.T) {
+	p := &requestPacer{interval: 20 * time.Millisecond}
+	const callers = 5
+
+	start := time.Now()
+	var wg sync.WaitGroup
+	for i := 0; i < callers; i++ {
+		wg.Add(1)
+		go func() {
+			defer wg.Done()
+			p.wait()
+		}()
+	}
+	wg.Wait()
+
+	// 5 callers at 20ms spacing: the last slot is 80ms after the first.
+	if elapsed := time.Since(start); elapsed < 4*20*time.Millisecond {
+		t.Fatalf("pacer did not space callers: %d finished in %v", callers, elapsed)
+	}
+}
+
+func TestRequestPacerNilSafe(t *testing.T) {
+	var p *requestPacer
+	p.wait() // must not panic
+}
+
+func TestGetRetriesOn429(t *testing.T) {
+	var calls atomic.Int32
+	srv := httptest.NewServer(http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		if calls.Add(1) <= 2 {
+			w.Header().Set("Retry-After", "0")
+			w.WriteHeader(http.StatusTooManyRequests)
+			return
+		}
+		_ = json.NewEncoder(w).Encode([]map[string]any{{"meeting_key": 1}})
+	}))
+	defer srv.Close()
+
+	c := newPacedTestClient(t, srv.URL, time.Millisecond)
+	body, err := c.get(srv.URL + "/v1/meetings")
+	if err != nil {
+		t.Fatalf("get after 429s should succeed, got %v", err)
+	}
+	data, _ := io.ReadAll(body)
+	body.Close()
+	if len(data) == 0 {
+		t.Fatal("expected response body after retries")
+	}
+	if got := calls.Load(); got != 3 {
+		t.Fatalf("expected 3 attempts (2×429 + 1×200), got %d", got)
+	}
+}
+
+func TestGetGivesUpAfterMaxRetries(t *testing.T) {
+	var calls atomic.Int32
+	srv := httptest.NewServer(http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		calls.Add(1)
+		w.Header().Set("Retry-After", "0")
+		w.WriteHeader(http.StatusTooManyRequests)
+	}))
+	defer srv.Close()
+
+	c := newPacedTestClient(t, srv.URL, time.Millisecond)
+	_, err := c.get(srv.URL + "/v1/meetings")
+	if err == nil {
+		t.Fatal("expected error when server keeps returning 429")
+	}
+	if got := calls.Load(); got != int32(max429Retries)+1 {
+		t.Fatalf("expected %d attempts, got %d", max429Retries+1, got)
+	}
+}
+
+func TestRetryAfter429Cap(t *testing.T) {
+	resp := &http.Response{Header: http.Header{"Retry-After": []string{"3600"}}}
+	if got := retryAfter429(resp); got != 10*time.Second {
+		t.Fatalf("expected 10s cap, got %v", got)
+	}
+	resp = &http.Response{Header: http.Header{}}
+	if got := retryAfter429(resp); got != time.Second {
+		t.Fatalf("expected 1s default, got %v", got)
+	}
+}

internal/live/parser_test.go

@@ -77,6 +77,41 @@ func TestProcessMessageIncremental(t *testing.T) {
 	}
 }
 
+func TestProcessCoreMessageCompletionAndFeed(t *testing.T) {
+	state := live.NewState()
+	msg := []byte(`{"type":3,"invocationId":"1","result":{
+		"ExtrapolatedClock":{"Remaining":"00:04:23","Utc":"2026-06-06T14:42:36.0491737Z","Extrapolating":true},
+		"TimingData":{"Lines":{"12":{"Position":"1","RacingNumber":"12","Sectors":[{"Value":"22.430"},{"Value":"40.119"},{"Value":""}],"Speeds":{"ST":{"Value":"254"}},"BestLapTime":{"Value":"1:12.704","Lap":15}}}},
+		"DriverList":{"12":{"RacingNumber":"12","Tla":"ANT","TeamName":"Mercedes","TeamColour":"00D7B6"}}
+	}}` + "\x1e")
+
+	if !state.ProcessCoreMessage(msg) {
+		t.Fatal("expected SignalR Core completion to produce updates")
+	}
+
+	snap := state.Snapshot()
+	if snap.Clock != "00:04:23" || !snap.ClockExtrapolating {
+		t.Errorf("clock = %q extrapolating=%v", snap.Clock, snap.ClockExtrapolating)
+	}
+	if snap.Drivers["12"].Position != 1 || snap.Drivers["12"].BestLapTime != "1:12.704" {
+		t.Errorf("driver = %+v", snap.Drivers["12"])
+	}
+	if snap.Drivers["12"].Sectors[1].Value != "40.119" || snap.Drivers["12"].SpeedTrap != "254" {
+		t.Errorf("driver sectors/speed = %+v", snap.Drivers["12"])
+	}
+	if snap.DriverInfo["12"].Tla != "ANT" {
+		t.Errorf("driver info = %+v", snap.DriverInfo["12"])
+	}
+
+	feed := []byte(`{"type":1,"target":"feed","arguments":["TimingData",{"Lines":{"12":{"LastLapTime":{"Value":"1:13.000","PersonalFastest":true}}}},"2026-06-06T14:42:37Z"]}` + "\x1e")
+	if !state.ProcessCoreMessage(feed) {
+		t.Fatal("expected SignalR Core feed frame to produce updates")
+	}
+	if state.Snapshot().Drivers["12"].LastLapTime != "1:13.000" {
+		t.Errorf("last lap = %q", state.Snapshot().Drivers["12"].LastLapTime)
+	}
+}
+
 func TestProcessTopicTimingData(t *testing.T) {
 	state := live.NewState()
 	data := json.RawMessage(`{

internal/live/signalr.go

@@ -1,11 +1,14 @@
 package live
 
 import (
+	"bytes"
 	"encoding/json"
 	"fmt"
+	"io"
 	"log"
 	"net/http"
 	"net/url"
+	"os"
 
 	"github.com/gorilla/websocket"
 )
@@ -14,6 +17,132 @@ import (
 // to timing topics, and sends defensive snapshots on dataChan until the
 // connection closes.
 func ConnectToF1LiveTiming(dataChan chan LiveStreamData) error {
+	if err := connectToF1SignalRCore(dataChan); err == nil {
+		return nil
+	} else {
+		log.Printf("f1 signalrcore feed unavailable, trying legacy signalr: %v", err)
+	}
+	return connectToF1LegacySignalR(dataChan)
+}
+
+func connectToF1SignalRCore(dataChan chan LiveStreamData) error {
+	req, err := http.NewRequest("POST", "https://livetiming.formula1.com/signalrcore/negotiate?negotiateVersion=1", nil)
+	if err != nil {
+		return err
+	}
+	req.Header.Set("Origin", "https://www.formula1.com")
+	req.Header.Set("User-Agent", "Mozilla/5.0")
+	req.Header.Set("Content-Length", "0")
+
+	resp, err := http.DefaultClient.Do(req)
+	if err != nil {
+		return err
+	}
+	defer resp.Body.Close()
+	body, err := io.ReadAll(resp.Body)
+	if err != nil {
+		return err
+	}
+	if resp.StatusCode != http.StatusOK {
+		return fmt.Errorf("f1 signalrcore negotiate returned %s", resp.Status)
+	}
+
+	var neg struct {
+		ConnectionToken string `json:"connectionToken"`
+	}
+	if err := json.Unmarshal(body, &neg); err != nil {
+		return err
+	}
+	if neg.ConnectionToken == "" {
+		return fmt.Errorf("f1 signalrcore negotiate returned an empty connection token")
+	}
+
+	wsURL := "wss://livetiming.formula1.com/signalrcore?id=" + url.QueryEscape(neg.ConnectionToken)
+	header := http.Header{}
+	header.Set("Origin", "https://www.formula1.com")
+	header.Set("User-Agent", "Mozilla/5.0")
+	for _, cookie := range resp.Cookies() {
+		header.Add("Cookie", cookie.String())
+	}
+
+	c, _, err := websocket.DefaultDialer.Dial(wsURL, header)
+	if err != nil {
+		return err
+	}
+
+	writeCoreFrame := func(payload any) error {
+		body, err := json.Marshal(payload)
+		if err != nil {
+			return err
+		}
+		body = append(body, signalRRecordSeparator)
+		return c.WriteMessage(websocket.TextMessage, body)
+	}
+
+	if err := writeCoreFrame(map[string]any{"protocol": "json", "version": 1}); err != nil {
+		c.Close()
+		return err
+	}
+	_, handshake, err := c.ReadMessage()
+	if err != nil {
+		c.Close()
+		return err
+	}
+	if !bytes.Contains(handshake, []byte("{}")) {
+		c.Close()
+		return fmt.Errorf("f1 signalrcore handshake returned %q", string(handshake))
+	}
+
+	topics := []string{
+		"Heartbeat",
+		"TimingData",
+		"DriverList",
+		"LapCount",
+		"ExtrapolatedClock",
+		"TrackStatus",
+		"RaceControlMessages",
+		"WeatherData",
+		"SessionInfo",
+		"CurrentTyres",
+		"TimingAppData",
+		"TimingStats",
+		"SessionStatus",
+		"TopThree",
+	}
+	if err := writeCoreFrame(map[string]any{
+		"type":         1,
+		"target":       "subscribe",
+		"arguments":    []any{topics},
+		"invocationId": "1",
+	}); err != nil {
+		c.Close()
+		return err
+	}
+
+	go func() {
+		defer c.Close()
+		state := NewState()
+
+		for {
+			_, message, err := c.ReadMessage()
+			if err != nil {
+				log.Println("SignalR Core read error:", err)
+				return
+			}
+
+			if state.ProcessCoreMessage(message) {
+				select {
+				case dataChan <- state.Snapshot():
+				default:
+				}
+			}
+		}
+	}()
+
+	return nil
+}
+
+func connectToF1LegacySignalR(dataChan chan LiveStreamData) error {
 	hubName := `[{"name":"Streaming"}]`
 	negotiateURL := fmt.Sprintf("https://livetiming.formula1.com/signalr/negotiate?clientProtocol=1.5&connectionData=%s", url.QueryEscape(hubName))
 
@@ -21,20 +150,30 @@ func ConnectToF1LiveTiming(dataChan chan LiveStreamData) error {
 	if err != nil {
 		return err
 	}
+	req.Header.Set("User-Agent", "BestHTTP")
+	if token := f1LiveBearerToken(); token != "" {
+		req.Header.Set("Authorization", "Bearer "+token)
+	}
 	resp, err := http.DefaultClient.Do(req)
 	if err != nil {
 		return err
 	}
-
-	cookies := resp.Cookies()
 	defer resp.Body.Close()
 
+	if resp.StatusCode != http.StatusOK {
+		return fmt.Errorf("f1 signalr negotiate returned %s (auth=%s)", resp.Status, authState())
+	}
+
+	cookies := resp.Cookies()
 	var neg struct {
 		ConnectionToken string `json:"ConnectionToken"`
 	}
 	if err := json.NewDecoder(resp.Body).Decode(&neg); err != nil {
 		return err
 	}
+	if neg.ConnectionToken == "" {
+		return fmt.Errorf("f1 signalr negotiate returned an empty connection token")
+	}
 
 	wsURL := fmt.Sprintf("wss://livetiming.formula1.com/signalr/connect?clientProtocol=1.5&transport=webSockets&connectionToken=%s&connectionData=%s",
 		url.QueryEscape(neg.ConnectionToken),
@@ -46,6 +185,9 @@ func ConnectToF1LiveTiming(dataChan chan LiveStreamData) error {
 		header.Add("Cookie", cookie.String())
 	}
 	header.Add("User-Agent", "BestHTTP")
+	if token := f1LiveBearerToken(); token != "" {
+		header.Add("Authorization", "Bearer "+token)
+	}
 
 	c, _, err := websocket.DefaultDialer.Dial(wsURL, header)
 	if err != nil {
@@ -80,3 +222,17 @@ func ConnectToF1LiveTiming(dataChan chan LiveStreamData) error {
 
 	return nil
 }
+
+func f1LiveBearerToken() string {
+	if token := os.Getenv("BOXBOX_F1_LIVE_BEARER_TOKEN"); token != "" {
+		return token
+	}
+	return os.Getenv("F1_LIVE_BEARER_TOKEN")
+}
+
+func authState() string {
+	if f1LiveBearerToken() != "" {
+		return "bearer-configured"
+	}
+	return "no-bearer-token"
+}

internal/live/state.go

@@ -23,6 +23,8 @@ type State struct {
 	ClockExtrapolating bool
 }
 
+const signalRRecordSeparator = byte(0x1e)
+
 // NewState returns an empty live timing accumulator.
 func NewState() *State {
 	return &State{
@@ -106,6 +108,51 @@ func (s *State) ProcessMessage(message []byte) bool {
 	return updated
 }
 
+// ProcessCoreMessage parses one or more SignalR Core JSON frames and applies
+// completion snapshots and feed deltas from the current official F1 live timing hub.
+func (s *State) ProcessCoreMessage(message []byte) bool {
+	updated := false
+	for _, frame := range splitSignalRFrames(message) {
+		var envelope struct {
+			Type   int               `json:"type"`
+			Target string            `json:"target"`
+			Args   []json.RawMessage `json:"arguments"`
+			Result json.RawMessage   `json:"result"`
+		}
+		if err := json.Unmarshal(frame, &envelope); err != nil {
+			continue
+		}
+
+		switch envelope.Type {
+		case 1:
+			if envelope.Target != "feed" || len(envelope.Args) < 2 {
+				continue
+			}
+			var topic string
+			if err := json.Unmarshal(envelope.Args[0], &topic); err != nil {
+				continue
+			}
+			if s.ProcessTopic(topic, envelope.Args[1]) {
+				updated = true
+			}
+		case 3:
+			if len(envelope.Result) == 0 || string(envelope.Result) == "null" {
+				continue
+			}
+			var result map[string]json.RawMessage
+			if err := json.Unmarshal(envelope.Result, &result); err != nil {
+				continue
+			}
+			for topic, data := range result {
+				if s.ProcessTopic(topic, data) {
+					updated = true
+				}
+			}
+		}
+	}
+	return updated
+}
+
 // ProcessTopic applies a single topic payload to the accumulator.
 func (s *State) ProcessTopic(topic string, data json.RawMessage) bool {
 	updated := false
@@ -181,10 +228,10 @@ func (s *State) ProcessTopic(topic string, data json.RawMessage) bool {
 		}
 	case "RaceControlMessages":
 		var rcm struct {
-			Messages map[string]json.RawMessage `json:"Messages"`
+			Messages json.RawMessage `json:"Messages"`
 		}
 		if json.Unmarshal(data, &rcm) == nil {
-			for _, msgRaw := range rcm.Messages {
+			for _, msgRaw := range indexedRawValues(rcm.Messages) {
 				var msg struct {
 					Utc      string `json:"Utc"`
 					Category string `json:"Category"`
@@ -192,7 +239,7 @@ func (s *State) ProcessTopic(topic string, data json.RawMessage) bool {
 					Message  string `json:"Message"`
 					Lap      int    `json:"Lap"`
 				}
-				if json.Unmarshal(msgRaw, &msg) == nil && msg.Message != "" {
+				if json.Unmarshal(msgRaw.Raw, &msg) == nil && msg.Message != "" {
 					t := ""
 					if len(msg.Utc) >= 19 {
 						t = msg.Utc[11:16]
@@ -285,17 +332,17 @@ func (s *State) ProcessTopic(topic string, data json.RawMessage) bool {
 		if json.Unmarshal(data, &tad) == nil {
 			for num, lineRaw := range tad.Lines {
 				var line struct {
-					Stints map[string]json.RawMessage `json:"Stints"`
+					Stints json.RawMessage `json:"Stints"`
 				}
 				if json.Unmarshal(lineRaw, &line) == nil && line.Stints != nil {
 					var driverStints []LiveStintData
-					for _, sRaw := range line.Stints {
+					for _, sRaw := range indexedRawValues(line.Stints) {
 						var st struct {
 							Compound  string `json:"Compound"`
 							New       string `json:"New"`
 							TotalLaps int    `json:"TotalLaps"`
 						}
-						if json.Unmarshal(sRaw, &st) == nil && st.Compound != "" {
+						if json.Unmarshal(sRaw.Raw, &st) == nil && st.Compound != "" {
 							driverStints = append(driverStints, LiveStintData{
 								Compound: st.Compound,
 								New:      st.New == "true" || st.New == "True",
@@ -417,16 +464,15 @@ func updateDriver(drivers map[string]LiveDriverData, num string, line F1TimingLi
 		}
 	}
 
-	for idx, sRaw := range line.Sectors {
+	for _, sector := range indexedRawValues(line.Sectors) {
-		i := 0
+		i := sector.Index
-		fmt.Sscanf(idx, "%d", &i)
 		if i >= 0 && i < 3 {
 			var sec struct {
 				Value           string `json:"Value"`
 				PersonalFastest bool   `json:"PersonalFastest"`
 				OverallFastest  bool   `json:"OverallFastest"`
 			}
-			if json.Unmarshal(sRaw, &sec) == nil {
+			if json.Unmarshal(sector.Raw, &sec) == nil {
 				if sec.Value == "" {
 					d.Sectors[i] = LiveSectorData{}
 				} else {
@@ -493,3 +539,54 @@ func toInt(v interface{}) (int, bool) {
 	}
 	return 0, false
 }
+
+type indexedRaw struct {
+	Index int
+	Raw   json.RawMessage
+}
+
+func splitSignalRFrames(message []byte) []json.RawMessage {
+	parts := []json.RawMessage{}
+	start := 0
+	for i, b := range message {
+		if b != signalRRecordSeparator {
+			continue
+		}
+		if i > start {
+			parts = append(parts, json.RawMessage(message[start:i]))
+		}
+		start = i + 1
+	}
+	if start < len(message) {
+		parts = append(parts, json.RawMessage(message[start:]))
+	}
+	return parts
+}
+
+func indexedRawValues(raw json.RawMessage) []indexedRaw {
+	if len(raw) == 0 || string(raw) == "null" {
+		return nil
+	}
+
+	var arr []json.RawMessage
+	if err := json.Unmarshal(raw, &arr); err == nil {
+		values := make([]indexedRaw, 0, len(arr))
+		for i, v := range arr {
+			values = append(values, indexedRaw{Index: i, Raw: v})
+		}
+		return values
+	}
+
+	var obj map[string]json.RawMessage
+	if err := json.Unmarshal(raw, &obj); err == nil {
+		values := make([]indexedRaw, 0, len(obj))
+		for k, v := range obj {
+			i := 0
+			fmt.Sscanf(k, "%d", &i)
+			values = append(values, indexedRaw{Index: i, Raw: v})
+		}
+		return values
+	}
+
+	return nil
+}

internal/live/types.go

@@ -38,7 +38,7 @@ type F1TimingLine struct {
 	KnockedOut   interface{}                `json:"KnockedOut"`
 	Cutoff       interface{}                `json:"Cutoff"`
 	NumberOfLaps interface{}                `json:"NumberOfLaps"`
-	Sectors      map[string]json.RawMessage `json:"Sectors"`
+	Sectors      json.RawMessage            `json:"Sectors"`
 	Speeds       map[string]json.RawMessage `json:"Speeds"`
 }
 

internal/query/championship.go

@@ -0,0 +1,177 @@
+package query
+
+import (
+	"database/sql"
+	"errors"
+	"sort"
+	"strings"
+
+	"github.com/AmanTahiliani/box-box/internal/models"
+)
+
+// ChampionshipRace is the local data needed by the web championship hub for one GP.
+type ChampionshipRace struct {
+	Meeting        models.Meeting
+	RaceSessionKey int
+	Results        []models.SessionResult
+	Grid           []models.StartingGrid
+}
+
+// ChampionshipInputs are local-first inputs for the championship hub aggregation.
+type ChampionshipInputs struct {
+	Races     []ChampionshipRace
+	Champ     []models.ChampionshipDriver
+	Teams     []models.ChampionshipTeam
+	DriverMap map[int]models.Driver
+}
+
+// GetChampionshipInputs derives championship hub inputs from ingested season data.
+func (s *Service) GetChampionshipInputs(year int) (ChampionshipInputs, error) {
+	meetings, err := s.ListMeetingsByYear(year)
+	if err != nil {
+		return ChampionshipInputs{}, err
+	}
+
+	inputs := ChampionshipInputs{
+		Races:     []ChampionshipRace{},
+		Champ:     []models.ChampionshipDriver{},
+		Teams:     []models.ChampionshipTeam{},
+		DriverMap: map[int]models.Driver{},
+	}
+
+	pointsByDriver := map[int]float64{}
+	pointsByTeam := map[string]float64{}
+	latestSessionKey := 0
+	latestMeetingKey := 0
+
+	for _, meeting := range meetings {
+		sessions, err := s.ListSessionsByMeeting(int(meeting.MeetingKey))
+		if err != nil {
+			return ChampionshipInputs{}, err
+		}
+
+		raceKey := 0
+		for _, sess := range sessions {
+			if strings.EqualFold(sess.SessionName, "Race") {
+				raceKey = sess.SessionKey
+				break
+			}
+		}
+		if raceKey == 0 {
+			continue
+		}
+
+		results, err := s.store.ListSessionResults(raceKey)
+		if err != nil {
+			return ChampionshipInputs{}, err
+		}
+		grid, err := s.store.ListStartingGrid(raceKey)
+		if err != nil {
+			return ChampionshipInputs{}, err
+		}
+
+		race := ChampionshipRace{
+			Meeting:        meeting,
+			RaceSessionKey: raceKey,
+			Results:        make([]models.SessionResult, 0, len(results)),
+			Grid:           make([]models.StartingGrid, 0, len(grid)),
+		}
+		for _, result := range results {
+			race.Results = append(race.Results, resultToModel(result))
+		}
+		for _, entry := range grid {
+			race.Grid = append(race.Grid, gridToModel(entry))
+		}
+		inputs.Races = append(inputs.Races, race)
+
+		if len(results) == 0 {
+			continue
+		}
+
+		latestSessionKey = raceKey
+		latestMeetingKey = int(meeting.MeetingKey)
+		drivers, err := s.driversForSession(raceKey)
+		if err != nil {
+			return ChampionshipInputs{}, err
+		}
+		for _, d := range drivers {
+			inputs.DriverMap[d.DriverNumber] = d
+		}
+
+		for _, result := range results {
+			pointsByDriver[result.DriverNumber] += result.Points
+			team := inputs.DriverMap[result.DriverNumber].TeamName
+			if team != "" {
+				pointsByTeam[team] += result.Points
+			}
+		}
+	}
+
+	inputs.Champ = derivedDriverStandings(pointsByDriver, latestMeetingKey, latestSessionKey)
+	inputs.Teams = derivedTeamStandings(pointsByTeam, latestMeetingKey, latestSessionKey)
+	return inputs, nil
+}
+
+func (s *Service) driversForSession(sessionKey int) ([]models.Driver, error) {
+	sess, err := s.store.GetSession(sessionKey)
+	if err != nil {
+		return nil, err
+	}
+	links, err := s.store.ListSessionDrivers(sessionKey)
+	if err != nil {
+		return nil, err
+	}
+	drivers := make([]models.Driver, 0, len(links))
+	for _, link := range links {
+		d, err := s.store.GetDriver(link.DriverNumber)
+		if err != nil && !errors.Is(err, sql.ErrNoRows) {
+			return nil, err
+		}
+		drivers = append(drivers, driverToModel(sessionKey, sess.MeetingKey, link, d))
+	}
+	return drivers, nil
+}
+
+func derivedDriverStandings(points map[int]float64, meetingKey, sessionKey int) []models.ChampionshipDriver {
+	drivers := make([]models.ChampionshipDriver, 0, len(points))
+	for num, pts := range points {
+		drivers = append(drivers, models.ChampionshipDriver{
+			DriverNumber:  num,
+			MeetingKey:    meetingKey,
+			PointsCurrent: pts,
+			SessionKey:    sessionKey,
+		})
+	}
+	sort.Slice(drivers, func(i, j int) bool {
+		if drivers[i].PointsCurrent == drivers[j].PointsCurrent {
+			return drivers[i].DriverNumber < drivers[j].DriverNumber
+		}
+		return drivers[i].PointsCurrent > drivers[j].PointsCurrent
+	})
+	for i := range drivers {
+		drivers[i].PositionCurrent = i + 1
+	}
+	return drivers
+}
+
+func derivedTeamStandings(points map[string]float64, meetingKey, sessionKey int) []models.ChampionshipTeam {
+	teams := make([]models.ChampionshipTeam, 0, len(points))
+	for name, pts := range points {
+		teams = append(teams, models.ChampionshipTeam{
+			TeamName:      name,
+			MeetingKey:    meetingKey,
+			PointsCurrent: pts,
+			SessionKey:    sessionKey,
+		})
+	}
+	sort.Slice(teams, func(i, j int) bool {
+		if teams[i].PointsCurrent == teams[j].PointsCurrent {
+			return teams[i].TeamName < teams[j].TeamName
+		}
+		return teams[i].PointsCurrent > teams[j].PointsCurrent
+	})
+	for i := range teams {
+		teams[i].PositionCurrent = i + 1
+	}
+	return teams
+}

internal/query/query_test.go

@@ -166,6 +166,68 @@ func TestGetRaceHubCompleteData(t *testing.T) {
 	}
 }
 
+func TestGetChampionshipInputsDerivesLocalStandings(t *testing.T) {
+	svc := openTestService(t)
+	seedRaceHubData(t, svc.store)
+
+	if err := svc.store.UpsertDriver(store.Driver{
+		DriverNumber: 44,
+		FullName:     "Lewis Hamilton",
+		NameAcronym:  "HAM",
+		TeamName:     "Ferrari",
+		TeamColour:   "E8002D",
+	}); err != nil {
+		t.Fatalf("UpsertDriver() error = %v", err)
+	}
+	if err := svc.store.UpsertSessionDriver(store.SessionDriver{
+		SessionKey:   9472,
+		DriverNumber: 44,
+		MeetingKey:   1229,
+		TeamName:     "Ferrari",
+		TeamColour:   "E8002D",
+	}); err != nil {
+		t.Fatalf("UpsertSessionDriver() error = %v", err)
+	}
+	if err := svc.store.UpsertSessionResult(store.SessionResult{
+		SessionKey:   9472,
+		DriverNumber: 1,
+		MeetingKey:   1229,
+		Position:     1,
+		Points:       25,
+	}); err != nil {
+		t.Fatalf("UpsertSessionResult() error = %v", err)
+	}
+	if err := svc.store.UpsertSessionResult(store.SessionResult{
+		SessionKey:   9472,
+		DriverNumber: 44,
+		MeetingKey:   1229,
+		Position:     2,
+		Points:       18,
+	}); err != nil {
+		t.Fatalf("UpsertSessionResult() error = %v", err)
+	}
+
+	inputs, err := svc.GetChampionshipInputs(2025)
+	if err != nil {
+		t.Fatalf("GetChampionshipInputs() error = %v", err)
+	}
+	if len(inputs.Races) != 1 || inputs.Races[0].RaceSessionKey != 9472 {
+		t.Fatalf("Races = %+v, want Monaco race", inputs.Races)
+	}
+	if len(inputs.Champ) != 2 {
+		t.Fatalf("Champ len = %d, want 2", len(inputs.Champ))
+	}
+	if inputs.Champ[0].DriverNumber != 1 || inputs.Champ[0].PointsCurrent != 25 || inputs.Champ[0].PositionCurrent != 1 {
+		t.Fatalf("leader = %+v, want VER 25 P1", inputs.Champ[0])
+	}
+	if got := inputs.DriverMap[44]; got.NameAcronym != "HAM" || got.TeamName != "Ferrari" {
+		t.Fatalf("DriverMap[44] = %+v, want HAM Ferrari", got)
+	}
+	if len(inputs.Teams) != 2 || inputs.Teams[0].TeamName != "Red Bull Racing" || inputs.Teams[0].PointsCurrent != 25 {
+		t.Fatalf("Teams = %+v, want Red Bull Racing leading with 25", inputs.Teams)
+	}
+}
+
 func TestListMeetingsByYear(t *testing.T) {
 	svc := openTestService(t)
 	seedRaceHubData(t, svc.store)

internal/web/api.go

@@ -11,6 +11,7 @@ import (
 	"strconv"
 	"strings"
 	"sync"
+	"sync/atomic"
 	"time"
 
 	readability "codeberg.org/readeck/go-readability/v2"
@@ -597,6 +598,446 @@ func (s *Server) handleChampionshipTeams(w http.ResponseWriter, r *http.Request)
 	writeJSON(w, teams)
 }
 
+// --- /api/v1/championship/hub ---
+// Aggregated championship view: official points/positions enriched with derived
+// stats (wins, podiums, poles, recent form, teammate head-to-head) and a
+// per-round cumulative-points series, computed from season race results.
+
+type champHubDriver struct {
+	DriverNumber   int       `json:"driver_number"`
+	NameAcronym    string    `json:"name_acronym"`
+	FullName       string    `json:"full_name"`
+	TeamName       string    `json:"team_name"`
+	TeamColour     string    `json:"team_colour"`
+	Points         float64   `json:"points"`
+	Position       int       `json:"position"`
+	Wins           int       `json:"wins"`
+	Podiums        int       `json:"podiums"`
+	Poles          int       `json:"poles"`
+	Form           []float64 `json:"form"`       // last 5 races' points
+	Cumulative     []float64 `json:"cumulative"` // running total per completed round
+	TeammateWins   int       `json:"teammate_wins"`
+	TeammateLosses int       `json:"teammate_losses"`
+}
+
+type champHubTeam struct {
+	TeamName   string  `json:"team_name"`
+	TeamColour string  `json:"team_colour"`
+	Points     float64 `json:"points"`
+	Position   int     `json:"position"`
+	Wins       int     `json:"wins"`
+}
+
+type champHubResponse struct {
+	Season      int              `json:"season"`
+	Round       int              `json:"round"`
+	TotalRounds int              `json:"total_rounds"`
+	RoundsLeft  int              `json:"rounds_left"`
+	LastRace    string           `json:"last_race"`
+	RoundLabels []string         `json:"round_labels"`
+	Drivers     []champHubDriver `json:"drivers"`
+	Teams       []champHubTeam   `json:"teams"`
+}
+
+// meetingRace bundles a GP meeting with its (already-fetched) race results and grid.
+type meetingRace struct {
+	Meeting        models.Meeting
+	RaceSessionKey int
+	Results        []models.SessionResult
+	Grid           []models.StartingGrid
+}
+
+// champHubWorkers bounds the concurrent per-meeting fetches for the hub.
+const champHubWorkers = 5
+
+// champHubCurrentTTL / champHubPastTTL control how long an aggregated hub
+// response stays cached: short for the in-progress season, long for past
+// seasons whose results are final.
+const (
+	champHubCurrentTTL = 15 * time.Minute
+	champHubPastTTL    = 24 * time.Hour
+	// champHubIncompleteTTL keeps a partially-fetched aggregate around just
+	// long enough to absorb page-load bursts while retrying soon after.
+	champHubIncompleteTTL = 2 * time.Minute
+)
+
+// champHubTTL returns the in-memory cache TTL for a season's hub response.
+func champHubTTL(year int, now time.Time) time.Duration {
+	if year >= now.Year() {
+		return champHubCurrentTTL
+	}
+	return champHubPastTTL
+}
+
+type champHubEntry struct {
+	resp    champHubResponse
+	expires time.Time
+}
+
+// champHubCache is an in-memory cache of aggregated hub responses keyed by
+// year. The zero value is ready to use.
+type champHubCache struct {
+	mu      sync.Mutex
+	entries map[int]champHubEntry
+}
+
+func (c *champHubCache) get(year int, now time.Time) (champHubResponse, bool) {
+	c.mu.Lock()
+	defer c.mu.Unlock()
+	e, ok := c.entries[year]
+	if !ok || now.After(e.expires) {
+		return champHubResponse{}, false
+	}
+	return e.resp, true
+}
+
+func (c *champHubCache) put(year int, resp champHubResponse, now time.Time, ttl time.Duration) {
+	c.mu.Lock()
+	defer c.mu.Unlock()
+	if c.entries == nil {
+		c.entries = map[int]champHubEntry{}
+	}
+	c.entries[year] = champHubEntry{resp: resp, expires: now.Add(ttl)}
+}
+
+// fetchMeetingRaces fans fetch out across meetings with bounded concurrency.
+// The returned slice preserves the input meeting order regardless of
+// completion order; meetings for which fetch reports ok=false are skipped.
+func fetchMeetingRaces(meetings []models.Meeting, workers int, fetch func(models.Meeting) (meetingRace, bool)) []meetingRace {
+	if workers < 1 {
+		workers = 1
+	}
+	slots := make([]*meetingRace, len(meetings))
+	sem := make(chan struct{}, workers)
+	var wg sync.WaitGroup
+	for i, m := range meetings {
+		wg.Add(1)
+		go func() {
+			defer wg.Done()
+			sem <- struct{}{}
+			defer func() { <-sem }()
+			if mr, ok := fetch(m); ok {
+				slots[i] = &mr
+			}
+		}()
+	}
+	wg.Wait()
+
+	races := make([]meetingRace, 0, len(meetings))
+	for _, mr := range slots {
+		if mr != nil {
+			races = append(races, *mr)
+		}
+	}
+	return races
+}
+
+func (s *Server) handleChampionshipHub(w http.ResponseWriter, r *http.Request) {
+	year, _ := strconv.Atoi(r.URL.Query().Get("year"))
+	if year == 0 {
+		year = time.Now().Year()
+	}
+	mode := parseSourceMode(r)
+
+	if mode != sourceLocal {
+		if resp, ok := s.hubCache.get(year, time.Now()); ok {
+			writeJSON(w, resp)
+			return
+		}
+	}
+
+	if mode == sourceLocal || mode == sourceAuto {
+		resp, ok, err := s.localChampionshipHub(year)
+		if err != nil {
+			writeError(w, err, http.StatusInternalServerError, false)
+			return
+		}
+		if ok {
+			s.hubCache.put(year, resp, time.Now(), champHubTTL(year, time.Now()))
+			writeJSON(w, resp)
+			return
+		}
+		if mode == sourceLocal {
+			writeJSON(w, resp)
+			return
+		}
+	}
+
+	resp, err := s.openF1ChampionshipHub(year)
+	if err != nil {
+		writeError(w, err, http.StatusInternalServerError, s.client.LastResponseWasStale())
+		return
+	}
+	writeJSON(w, resp)
+}
+
+func (s *Server) localChampionshipHub(year int) (champHubResponse, bool, error) {
+	if !s.hasLocalQuery() {
+		return champHubResponse{Season: year, RoundLabels: []string{}, Drivers: []champHubDriver{}, Teams: []champHubTeam{}}, false, nil
+	}
+
+	inputs, err := s.query.GetChampionshipInputs(year)
+	if err != nil {
+		return champHubResponse{}, false, err
+	}
+	if len(inputs.Champ) == 0 {
+		return champHubResponse{Season: year, RoundLabels: []string{}, Drivers: []champHubDriver{}, Teams: []champHubTeam{}}, false, nil
+	}
+
+	races := make([]meetingRace, 0, len(inputs.Races))
+	for _, race := range inputs.Races {
+		races = append(races, meetingRace{
+			Meeting:        race.Meeting,
+			RaceSessionKey: race.RaceSessionKey,
+			Results:        race.Results,
+			Grid:           race.Grid,
+		})
+	}
+	return aggregateChampionshipHub(year, races, inputs.Champ, inputs.Teams, inputs.DriverMap), true, nil
+}
+
+func (s *Server) openF1ChampionshipHub(year int) (champHubResponse, error) {
+	meetings, err := s.client.GetMeetingsForYear(year)
+	if err != nil {
+		return champHubResponse{}, err
+	}
+
+	champ, err := s.client.GetDriverChampionshipForYear(year)
+	if err != nil {
+		return champHubResponse{}, err
+	}
+	if len(champ) == 0 {
+		return champHubResponse{Season: year, RoundLabels: []string{}, Drivers: []champHubDriver{}, Teams: []champHubTeam{}}, nil
+	}
+	teams, _ := s.client.GetTeamChampionshipForYear(year)
+
+	driverInfo := map[int]models.Driver{}
+	if ds, derr := s.client.GetDriversForSession(champ[0].SessionKey); derr == nil {
+		driverInfo = buildDriverMapFirst(ds)
+	}
+
+	sort.Slice(meetings, func(i, j int) bool { return meetings[i].DateStart < meetings[j].DateStart })
+
+	// Any per-meeting fetch failure (network, rate limit) yields an incomplete
+	// aggregate: serve it so the page still renders, but cache it only briefly
+	// so a partial view of the season doesn't stick around for the full TTL.
+	var incomplete atomic.Bool
+	races := fetchMeetingRaces(meetings, champHubWorkers, func(m models.Meeting) (meetingRace, bool) {
+		sessions, serr := s.client.GetSessionsForMeeting(int(m.MeetingKey))
+		if serr != nil {
+			incomplete.Store(true)
+			return meetingRace{}, false
+		}
+		raceKey := 0
+		for _, sess := range sessions {
+			if strings.EqualFold(sess.SessionName, "Race") {
+				raceKey = sess.SessionKey
+				break
+			}
+		}
+		if raceKey == 0 {
+			return meetingRace{}, false // not a GP meeting (e.g. pre-season testing)
+		}
+		results, rerr := s.client.GetSessionResult(raceKey)
+		grid, gerr := s.client.GetStartingGrid(raceKey)
+		if rerr != nil || gerr != nil {
+			incomplete.Store(true)
+		}
+		return meetingRace{Meeting: m, RaceSessionKey: raceKey, Results: results, Grid: grid}, true
+	})
+
+	resp := aggregateChampionshipHub(year, races, champ, teams, driverInfo)
+	ttl := champHubTTL(year, time.Now())
+	if incomplete.Load() {
+		ttl = champHubIncompleteTTL
+	}
+	s.hubCache.put(year, resp, time.Now(), ttl)
+	return resp, nil
+}
+
+// aggregateChampionshipHub is the pure aggregation core (no network) so it can be
+// unit-tested with synthetic data. races must be ordered ascending by date and
+// contain only GP meetings (those with a Race session).
+func aggregateChampionshipHub(
+	year int,
+	races []meetingRace,
+	champ []models.ChampionshipDriver,
+	teams []models.ChampionshipTeam,
+	driverInfo map[int]models.Driver,
+) champHubResponse {
+	type acc struct {
+		wins, podiums, poles int
+		form                 []float64
+		finishByRound        map[int]int
+	}
+	accs := map[int]*acc{}
+	getAcc := func(num int) *acc {
+		a := accs[num]
+		if a == nil {
+			a = &acc{finishByRound: map[int]int{}}
+			accs[num] = a
+		}
+		return a
+	}
+
+	completed := 0
+	lastRace := ""
+	roundPoints := []map[int]float64{} // per completed round: driver -> race points
+
+	for _, mr := range races {
+		if len(mr.Results) == 0 {
+			continue // round not completed yet
+		}
+		completed++
+		lastRace = mr.Meeting.MeetingName
+		for _, g := range mr.Grid {
+			if g.Position == 1 {
+				getAcc(g.DriverNumber).poles++
+			}
+		}
+		rp := map[int]float64{}
+		for _, res := range mr.Results {
+			a := getAcc(res.DriverNumber)
+			if res.Position == 1 {
+				a.wins++
+			}
+			if res.Position >= 1 && res.Position <= 3 {
+				a.podiums++
+			}
+			a.form = append(a.form, res.Points)
+			a.finishByRound[completed] = res.Position
+			rp[res.DriverNumber] += res.Points
+		}
+		roundPoints = append(roundPoints, rp)
+	}
+
+	roundLabels := make([]string, 0, completed)
+	for i := 1; i <= completed; i++ {
+		roundLabels = append(roundLabels, fmt.Sprintf("R%d", i))
+	}
+
+	// Official totals are authoritative; reconcile the cumulative endpoint to them.
+	champPts := map[int]float64{}
+	for _, c := range champ {
+		champPts[c.DriverNumber] = c.PointsCurrent
+	}
+
+	cumulative := map[int][]float64{}
+	for num := range accs {
+		running := 0.0
+		series := make([]float64, 0, completed)
+		for i := 0; i < completed; i++ {
+			running += roundPoints[i][num]
+			series = append(series, running)
+		}
+		if completed > 0 {
+			if off, ok := champPts[num]; ok {
+				series[completed-1] = off
+			}
+		}
+		cumulative[num] = series
+	}
+
+	// Teammate head-to-head: per round, the teammate finishing ahead wins.
+	teamOf := func(num int) string { return driverInfo[num].TeamName }
+	byTeam := map[string][]int{}
+	for num := range accs {
+		byTeam[teamOf(num)] = append(byTeam[teamOf(num)], num)
+	}
+	twins := map[int]int{}
+	tloss := map[int]int{}
+	for team, members := range byTeam {
+		if team == "" || len(members) < 2 {
+			continue
+		}
+		for round := 1; round <= completed; round++ {
+			for i := 0; i < len(members); i++ {
+				for j := i + 1; j < len(members); j++ {
+					p1, ok1 := accs[members[i]].finishByRound[round]
+					p2, ok2 := accs[members[j]].finishByRound[round]
+					if !ok1 || !ok2 {
+						continue
+					}
+					if p1 < p2 {
+						twins[members[i]]++
+						tloss[members[j]]++
+					} else if p2 < p1 {
+						twins[members[j]]++
+						tloss[members[i]]++
+					}
+				}
+			}
+		}
+	}
+
+	sortedChamp := make([]models.ChampionshipDriver, len(champ))
+	copy(sortedChamp, champ)
+	sort.Slice(sortedChamp, func(i, j int) bool { return sortedChamp[i].PositionCurrent < sortedChamp[j].PositionCurrent })
+
+	drivers := make([]champHubDriver, 0, len(sortedChamp))
+	for _, c := range sortedChamp {
+		a := accs[c.DriverNumber]
+		if a == nil {
+			a = &acc{}
+		}
+		form := a.form
+		if len(form) > 5 {
+			form = form[len(form)-5:]
+		}
+		info := driverInfo[c.DriverNumber]
+		drivers = append(drivers, champHubDriver{
+			DriverNumber:   c.DriverNumber,
+			NameAcronym:    info.NameAcronym,
+			FullName:       info.FullName,
+			TeamName:       info.TeamName,
+			TeamColour:     info.TeamColour,
+			Points:         c.PointsCurrent,
+			Position:       c.PositionCurrent,
+			Wins:           a.wins,
+			Podiums:        a.podiums,
+			Poles:          a.poles,
+			Form:           form,
+			Cumulative:     cumulative[c.DriverNumber],
+			TeammateWins:   twins[c.DriverNumber],
+			TeammateLosses: tloss[c.DriverNumber],
+		})
+	}
+
+	teamWins := map[string]int{}
+	teamColour := map[string]string{}
+	for num, a := range accs {
+		teamWins[teamOf(num)] += a.wins
+		if col := driverInfo[num].TeamColour; col != "" {
+			teamColour[teamOf(num)] = col
+		}
+	}
+	sortedTeams := make([]models.ChampionshipTeam, len(teams))
+	copy(sortedTeams, teams)
+	sort.Slice(sortedTeams, func(i, j int) bool { return sortedTeams[i].PositionCurrent < sortedTeams[j].PositionCurrent })
+	teamsOut := make([]champHubTeam, 0, len(sortedTeams))
+	for _, t := range sortedTeams {
+		teamsOut = append(teamsOut, champHubTeam{
+			TeamName:   t.TeamName,
+			TeamColour: teamColour[t.TeamName],
+			Points:     t.PointsCurrent,
+			Position:   t.PositionCurrent,
+			Wins:       teamWins[t.TeamName],
+		})
+	}
+
+	totalRounds := len(races)
+	return champHubResponse{
+		Season:      year,
+		Round:       completed,
+		TotalRounds: totalRounds,
+		RoundsLeft:  totalRounds - completed,
+		LastRace:    lastRace,
+		RoundLabels: roundLabels,
+		Drivers:     drivers,
+		Teams:       teamsOut,
+	}
+}
+
 // --- /api/v1/track-outline ---
 // Accepts circuit_key and year (the frontend has both from meeting+session data).
 

internal/web/championship_hub_test.go

@@ -0,0 +1,266 @@
+package web
+
+import (
+	"sync/atomic"
+	"testing"
+	"time"
+
+	"github.com/AmanTahiliani/box-box/internal/models"
+)
+
+func raceResult(num, pos int, pts float64) models.SessionResult {
+	return models.SessionResult{DriverNumber: num, Position: pos, Points: pts}
+}
+
+func TestAggregateChampionshipHub(t *testing.T) {
+	driverInfo := map[int]models.Driver{
+		1: {DriverNumber: 1, NameAcronym: "VER", FullName: "Max Verstappen", TeamName: "Red Bull", TeamColour: "3671c6"},
+		2: {DriverNumber: 2, NameAcronym: "PER", FullName: "Sergio Perez", TeamName: "Red Bull", TeamColour: "3671c6"},
+		3: {DriverNumber: 3, NameAcronym: "HAM", FullName: "Lewis Hamilton", TeamName: "Mercedes", TeamColour: "27f4d2"},
+	}
+
+	champ := []models.ChampionshipDriver{
+		{DriverNumber: 1, PointsCurrent: 50, PositionCurrent: 1, SessionKey: 99},
+		{DriverNumber: 3, PointsCurrent: 33, PositionCurrent: 2, SessionKey: 99},
+		{DriverNumber: 2, PointsCurrent: 30, PositionCurrent: 3, SessionKey: 99},
+	}
+	teams := []models.ChampionshipTeam{
+		{TeamName: "Red Bull", PointsCurrent: 80, PositionCurrent: 1},
+		{TeamName: "Mercedes", PointsCurrent: 33, PositionCurrent: 2},
+	}
+
+	// Round 1: VER P1(25), HAM P2(18), PER P3(15). Pole: VER.
+	// Round 2: VER P1(25), PER P2(18), HAM P3(15). Pole: HAM.
+	races := []meetingRace{
+		{
+			Meeting: models.Meeting{MeetingName: "Bahrain GP"},
+			Results: []models.SessionResult{raceResult(1, 1, 25), raceResult(3, 2, 18), raceResult(2, 3, 15)},
+			Grid:    []models.StartingGrid{{DriverNumber: 1, Position: 1}},
+		},
+		{
+			Meeting: models.Meeting{MeetingName: "Saudi GP"},
+			Results: []models.SessionResult{raceResult(1, 1, 25), raceResult(2, 2, 18), raceResult(3, 3, 15)},
+			Grid:    []models.StartingGrid{{DriverNumber: 3, Position: 1}},
+		},
+		// Round 3: not yet run (no results) — should not count as completed.
+		{Meeting: models.Meeting{MeetingName: "Australia GP"}},
+	}
+
+	resp := aggregateChampionshipHub(2025, races, champ, teams, driverInfo)
+
+	if resp.Season != 2025 {
+		t.Errorf("season = %d, want 2025", resp.Season)
+	}
+	if resp.Round != 2 {
+		t.Errorf("completed rounds = %d, want 2", resp.Round)
+	}
+	if resp.TotalRounds != 3 {
+		t.Errorf("total rounds = %d, want 3", resp.TotalRounds)
+	}
+	if resp.RoundsLeft != 1 {
+		t.Errorf("rounds left = %d, want 1", resp.RoundsLeft)
+	}
+	if resp.LastRace != "Saudi GP" {
+		t.Errorf("last race = %q, want Saudi GP", resp.LastRace)
+	}
+	if len(resp.RoundLabels) != 2 || resp.RoundLabels[0] != "R1" || resp.RoundLabels[1] != "R2" {
+		t.Errorf("round labels = %v, want [R1 R2]", resp.RoundLabels)
+	}
+
+	// Drivers are sorted by official position: VER, HAM, PER.
+	if len(resp.Drivers) != 3 {
+		t.Fatalf("drivers = %d, want 3", len(resp.Drivers))
+	}
+	ver := resp.Drivers[0]
+	if ver.NameAcronym != "VER" || ver.Position != 1 {
+		t.Errorf("first driver = %s P%d, want VER P1", ver.NameAcronym, ver.Position)
+	}
+	if ver.Wins != 2 {
+		t.Errorf("VER wins = %d, want 2", ver.Wins)
+	}
+	if ver.Podiums != 2 {
+		t.Errorf("VER podiums = %d, want 2", ver.Podiums)
+	}
+	if ver.Poles != 1 {
+		t.Errorf("VER poles = %d, want 1", ver.Poles)
+	}
+	if len(ver.Form) != 2 || ver.Form[0] != 25 || ver.Form[1] != 25 {
+		t.Errorf("VER form = %v, want [25 25]", ver.Form)
+	}
+	// Cumulative reconciles final value to official total (50).
+	if len(ver.Cumulative) != 2 || ver.Cumulative[0] != 25 || ver.Cumulative[1] != 50 {
+		t.Errorf("VER cumulative = %v, want [25 50]", ver.Cumulative)
+	}
+	// VER beat teammate PER in both rounds.
+	if ver.TeammateWins != 2 || ver.TeammateLosses != 0 {
+		t.Errorf("VER h2h = %d-%d, want 2-0", ver.TeammateWins, ver.TeammateLosses)
+	}
+
+	// PER lost both intra-team battles to VER.
+	var per champHubDriver
+	for _, d := range resp.Drivers {
+		if d.NameAcronym == "PER" {
+			per = d
+		}
+	}
+	if per.TeammateWins != 0 || per.TeammateLosses != 2 {
+		t.Errorf("PER h2h = %d-%d, want 0-2", per.TeammateWins, per.TeammateLosses)
+	}
+	if per.Poles != 0 {
+		t.Errorf("PER poles = %d, want 0", per.Poles)
+	}
+
+	// HAM has no teammate in the data — no h2h recorded.
+	var ham champHubDriver
+	for _, d := range resp.Drivers {
+		if d.NameAcronym == "HAM" {
+			ham = d
+		}
+	}
+	if ham.TeammateWins != 0 || ham.TeammateLosses != 0 {
+		t.Errorf("HAM h2h = %d-%d, want 0-0 (no teammate)", ham.TeammateWins, ham.TeammateLosses)
+	}
+	if ham.Poles != 1 {
+		t.Errorf("HAM poles = %d, want 1", ham.Poles)
+	}
+
+	// Teams sorted by position; Red Bull wins = VER(2) + PER(0) = 2.
+	if len(resp.Teams) != 2 {
+		t.Fatalf("teams = %d, want 2", len(resp.Teams))
+	}
+	if resp.Teams[0].TeamName != "Red Bull" || resp.Teams[0].Wins != 2 {
+		t.Errorf("top team = %s wins %d, want Red Bull wins 2", resp.Teams[0].TeamName, resp.Teams[0].Wins)
+	}
+	if resp.Teams[0].TeamColour != "3671c6" {
+		t.Errorf("Red Bull colour = %q, want 3671c6", resp.Teams[0].TeamColour)
+	}
+}
+
+func TestAggregateChampionshipHubEmpty(t *testing.T) {
+	resp := aggregateChampionshipHub(2025, nil, nil, nil, map[int]models.Driver{})
+	if resp.Round != 0 || resp.TotalRounds != 0 || len(resp.Drivers) != 0 {
+		t.Errorf("empty aggregation should be zero-valued, got %+v", resp)
+	}
+}
+
+func TestFetchMeetingRacesPreservesOrderAndSkips(t *testing.T) {
+	const n = 12
+	meetings := make([]models.Meeting, n)
+	for i := range meetings {
+		meetings[i] = models.Meeting{MeetingKey: int32(i + 1)}
+	}
+
+	races := fetchMeetingRaces(meetings, 5, func(m models.Meeting) (meetingRace, bool) {
+		// Later meetings finish first to shuffle completion order.
+		time.Sleep(time.Duration(n-int(m.MeetingKey)) * time.Millisecond)
+		if m.MeetingKey%3 == 0 {
+			return meetingRace{}, false // simulate skip (fetch error / no Race session)
+		}
+		return meetingRace{Meeting: m, RaceSessionKey: int(m.MeetingKey) * 100}, true
+	})
+
+	want := 0
+	for i := 1; i <= n; i++ {
+		if i%3 != 0 {
+			want++
+		}
+	}
+	if len(races) != want {
+		t.Fatalf("races = %d, want %d", len(races), want)
+	}
+	prev := int32(0)
+	for _, r := range races {
+		if r.Meeting.MeetingKey <= prev {
+			t.Fatalf("races out of input order: key %d after %d", r.Meeting.MeetingKey, prev)
+		}
+		if r.Meeting.MeetingKey%3 == 0 {
+			t.Fatalf("skipped meeting %d present in output", r.Meeting.MeetingKey)
+		}
+		if r.RaceSessionKey != int(r.Meeting.MeetingKey)*100 {
+			t.Fatalf("meeting %d has mismatched race key %d", r.Meeting.MeetingKey, r.RaceSessionKey)
+		}
+		prev = r.Meeting.MeetingKey
+	}
+}
+
+func TestFetchMeetingRacesBoundsConcurrency(t *testing.T) {
+	const workers = 3
+	var inFlight, peak atomic.Int32
+	meetings := make([]models.Meeting, 20)
+	for i := range meetings {
+		meetings[i] = models.Meeting{MeetingKey: int32(i + 1)}
+	}
+
+	fetchMeetingRaces(meetings, workers, func(m models.Meeting) (meetingRace, bool) {
+		cur := inFlight.Add(1)
+		for {
+			p := peak.Load()
+			if cur <= p || peak.CompareAndSwap(p, cur) {
+				break
+			}
+		}
+		time.Sleep(5 * time.Millisecond)
+		inFlight.Add(-1)
+		return meetingRace{Meeting: m, RaceSessionKey: 1}, true
+	})
+
+	if p := peak.Load(); p > workers {
+		t.Errorf("peak concurrent fetches = %d, want <= %d", p, workers)
+	}
+}
+
+func TestChampHubTTL(t *testing.T) {
+	now := time.Date(2026, 7, 3, 12, 0, 0, 0, time.UTC)
+	if got := champHubTTL(2026, now); got != champHubCurrentTTL {
+		t.Errorf("current year TTL = %v, want %v", got, champHubCurrentTTL)
+	}
+	if got := champHubTTL(2027, now); got != champHubCurrentTTL {
+		t.Errorf("future year TTL = %v, want %v", got, champHubCurrentTTL)
+	}
+	if got := champHubTTL(2024, now); got != champHubPastTTL {
+		t.Errorf("past year TTL = %v, want %v", got, champHubPastTTL)
+	}
+}
+
+func TestChampHubCache(t *testing.T) {
+	var c champHubCache
+	now := time.Date(2026, 7, 3, 12, 0, 0, 0, time.UTC)
+
+	if _, ok := c.get(2026, now); ok {
+		t.Fatal("empty cache should miss")
+	}
+
+	c.put(2026, champHubResponse{Season: 2026, Round: 10}, now, champHubTTL(2026, now))
+	c.put(2024, champHubResponse{Season: 2024, Round: 24}, now, champHubTTL(2024, now))
+
+	// Current-year entry: hit within 15 min, miss after.
+	if resp, ok := c.get(2026, now.Add(14*time.Minute)); !ok || resp.Round != 10 {
+		t.Errorf("current-year get within TTL = (%+v, %v), want hit with Round 10", resp, ok)
+	}
+	if _, ok := c.get(2026, now.Add(16*time.Minute)); ok {
+		t.Error("current-year entry should expire after 15 minutes")
+	}
+
+	// Past-year entry: hit well beyond 15 min, miss after 24 h.
+	if resp, ok := c.get(2024, now.Add(12*time.Hour)); !ok || resp.Round != 24 {
+		t.Errorf("past-year get within TTL = (%+v, %v), want hit with Round 24", resp, ok)
+	}
+	if _, ok := c.get(2024, now.Add(25*time.Hour)); ok {
+		t.Error("past-year entry should expire after 24 hours")
+	}
+
+	// Re-put refreshes the entry.
+	c.put(2026, champHubResponse{Season: 2026, Round: 11}, now.Add(20*time.Minute), champHubTTL(2026, now))
+	if resp, ok := c.get(2026, now.Add(30*time.Minute)); !ok || resp.Round != 11 {
+		t.Errorf("refreshed entry = (%+v, %v), want hit with Round 11", resp, ok)
+	}
+
+	// Incomplete aggregates get the short TTL: hit right away, gone in 3 min.
+	c.put(2023, champHubResponse{Season: 2023, Round: 5}, now, champHubIncompleteTTL)
+	if _, ok := c.get(2023, now.Add(time.Minute)); !ok {
+		t.Error("incomplete entry should hit within its short TTL")
+	}
+	if _, ok := c.get(2023, now.Add(3*time.Minute)); ok {
+		t.Error("incomplete entry should expire after champHubIncompleteTTL")
+	}
+}

internal/web/live.go

@@ -121,8 +121,13 @@ func (s *Server) signalRLoop() {
 
 		s.hub.mu.Lock()
 		s.hub.isLive = false
+		s.hub.lastSnapshot = nil
 		s.hub.mu.Unlock()
 
+		if payload, err := json.Marshal(map[string]any{"data": nil, "is_live": false}); err == nil {
+			s.hub.broadcast <- sseEvent{name: "snapshot", data: payload}
+		}
+
 		log.Printf("web: live feed reconnecting in %v", backoff)
 		time.Sleep(backoff)
 		if backoff < maxBackoff {

internal/web/server.go

@@ -20,10 +20,11 @@ var assetsFS embed.FS
 
 // Server is the box-box web companion HTTP server.
 type Server struct {
-	client *api.OpenF1Client
+	client   *api.OpenF1Client
-	query  *query.Service
+	query    *query.Service
-	hub    *SSEHub
+	hub      *SSEHub
-	addr   string
+	addr     string
+	hubCache champHubCache // aggregated championship hub responses, keyed by year
 }
 
 // NewServer creates a new Server. Call Start() to begin serving.
@@ -81,6 +82,7 @@ func (s *Server) routes() (http.Handler, error) {
 	mux.HandleFunc("/api/v1/team-radio", s.handleTeamRadio)
 	mux.HandleFunc("/api/v1/championship/drivers", s.handleChampionshipDrivers)
 	mux.HandleFunc("/api/v1/championship/teams", s.handleChampionshipTeams)
+	mux.HandleFunc("/api/v1/championship/hub", s.handleChampionshipHub)
 	mux.HandleFunc("/api/v1/track-outline", s.handleTrackOutline)
 	mux.HandleFunc("/api/v1/strategy", s.handleStrategy)
 	mux.HandleFunc("/api/v1/live/state", s.handleLiveState)

plan.md

@@ -28,12 +28,13 @@ New views that reconstruct the race narrative and make box-box indispensable dur
 
 ## Phase 3 — "Engineering Room" (Companion Web View)
 
-A lightweight local web UI for visualizations that need a proper canvas.
+Originally scoped as a lightweight canvas for visualizations, this has grown into a full companion web app: a React + Vite SPA (command center, race hub, live timing, championship, briefing, data library) served by the Go server in `internal/web/`, with a `/api/v1` REST surface, an SSE relay of the F1 live feed, and Playwright e2e/visual coverage.
 
 - [x] **`box-box --web` server** — Spawn a localhost SPA from Go embedded assets, sharing the same SQLite cache
 - [x] **SVG Track Map** — Animated car positions on a real circuit layout with team colors
 - [x] **Telemetry Overlay** — Interactive throttle/brake/speed graph through a lap (D3.js or Canvas)
 - [x] **Strategy Timeline** — Visual pit stop and stint timeline for the full field
+- [x] **Championship Hub** — `/championship` page backed by `/api/v1/championship/hub`: official standings aggregated with derived stats (wins, podiums, poles, last-5 form, teammate head-to-head) and per-round cumulative points progression
 
 ---
 
@@ -42,6 +43,6 @@ A lightweight local web UI for visualizations that need a proper canvas.
 Passive monitoring and historical analysis features.
 
 - [ ] **Daemon / Notification Mode** — `box-box --watch` sends OS notifications for key race events (flags, overtakes, pit stops)
-- [ ] **Championship Simulator** — "What if" scenarios: set finishing positions per driver and project championship standings forward
+- [x] **Championship Simulator** — "What if" scenarios: set finishing positions per driver and project championship standings forward (simulator view on the web `/championship` page)
 - [ ] **Multi-Year Driver Comparison** — Career arc and season-over-season stats with win/pole rates
 - [ ] **tmux / Status Bar Integration** — Compact race status output for shell prompts and status bars

playwright.config.ts

@@ -24,7 +24,9 @@ export default defineConfig({
   ],
   webServer: [
     {
-      command: `go run ./scripts/seed-e2e-db/main.go --db ${E2E_DB} && BOXBOX_DISABLE_LIVE=1 go run ./cmd/main.go --web --db ${E2E_DB} --port ${API_PORT}`,
+      // BOXBOX_OPENF1_BASE_URL points at an unreachable address so the e2e stack
+      // never depends on the live OpenF1 API (keeps runs hermetic + date-stable).
+      command: `go run ./scripts/seed-e2e-db/main.go --db ${E2E_DB} && BOXBOX_DISABLE_LIVE=1 BOXBOX_OPENF1_BASE_URL=http://127.0.0.1:9 go run ./cmd/main.go --web --db ${E2E_DB} --port ${API_PORT}`,
       url: `http://localhost:${API_PORT}/api/v1/race-hub?session_key=9472`,
       reuseExistingServer: false,
       timeout: 120_000,

playwright.visual.config.ts

@@ -49,7 +49,9 @@ export default defineConfig({
   ],
   webServer: [
     {
-      command: `go run ./scripts/seed-e2e-db/main.go --db ${E2E_DB} && BOXBOX_DISABLE_LIVE=1 go run ./cmd/main.go --web --db ${E2E_DB} --port ${API_PORT}`,
+      // BOXBOX_OPENF1_BASE_URL points at an unreachable address so the visual stack
+      // never depends on the live OpenF1 API (keeps runs hermetic + date-stable).
+      command: `go run ./scripts/seed-e2e-db/main.go --db ${E2E_DB} && BOXBOX_DISABLE_LIVE=1 BOXBOX_OPENF1_BASE_URL=http://127.0.0.1:9 go run ./cmd/main.go --web --db ${E2E_DB} --port ${API_PORT}`,
       url: `http://localhost:${API_PORT}/api/v1/race-hub?session_key=9472`,
       reuseExistingServer: false,
       timeout: 120_000,

tests/live-timing.spec.ts

@@ -0,0 +1,172 @@
+import { test, expect } from '@playwright/test'
+
+// The e2e server runs with BOXBOX_DISABLE_LIVE=1, so the real feed is silent.
+// These tests mock /api/v1/live/state with a race snapshot to exercise the
+// full timing page: flag banner, weather strip, battles, stints, and pinning.
+
+const driver = (
+  num: string,
+  pos: number,
+  interval: string,
+  gap: string,
+  overrides: Record<string, unknown> = {},
+) => ({
+  RacingNumber: num,
+  Position: pos,
+  PrevPosition: pos,
+  GapToLeader: gap,
+  Interval: interval,
+  LastLapTime: '1:21.345',
+  LastLapPB: false,
+  LastLapOB: false,
+  BestLapTime: '1:20.987',
+  BestLapPB: true,
+  BestLapOB: false,
+  BestLapNum: 22,
+  InPit: false,
+  PitOut: false,
+  Retired: false,
+  KnockedOut: false,
+  Cutoff: false,
+  OnFlyingLap: false,
+  NumberOfLaps: 30,
+  SpeedTrap: '312',
+  Sectors: [],
+  ...overrides,
+})
+
+const info = (num: string, tla: string, first: string, last: string, team: string, colour: string) => ({
+  RacingNumber: num,
+  BroadcastName: `${first[0]} ${last.toUpperCase()}`,
+  Tla: tla,
+  TeamName: team,
+  TeamColour: colour,
+  FirstName: first,
+  LastName: last,
+})
+
+const raceSnapshot = {
+  is_live: true,
+  data: {
+    Drivers: {
+      '1': driver('1', 1, '', '', { NumberOfLaps: 30 }),
+      '4': driver('4', 2, '+0.523', '+0.523'),
+      '44': driver('44', 3, '+3.214', '+3.737'),
+      '63': driver('63', 4, '+12.001', '+15.738', { InPit: true }),
+    },
+    DriverInfo: {
+      '1': info('1', 'VER', 'Max', 'Verstappen', 'Red Bull Racing', '3671C6'),
+      '4': info('4', 'NOR', 'Lando', 'Norris', 'McLaren', 'FF8000'),
+      '44': info('44', 'HAM', 'Lewis', 'Hamilton', 'Ferrari', 'E80020'),
+      '63': info('63', 'RUS', 'George', 'Russell', 'Mercedes', '27F4D2'),
+    },
+    Tyres: {
+      '1': { Compound: 'HARD', New: false, Age: 12 },
+      '4': { Compound: 'MEDIUM', New: false, Age: 8 },
+      '44': { Compound: 'MEDIUM', New: true, Age: 3 },
+      '63': { Compound: 'HARD', New: true, Age: 0 },
+    },
+    Stints: {
+      '1': [
+        { Compound: 'MEDIUM', New: true, Laps: 18 },
+        { Compound: 'HARD', New: false, Laps: 12 },
+      ],
+      '4': [
+        { Compound: 'SOFT', New: true, Laps: 14 },
+        { Compound: 'MEDIUM', New: true, Laps: 16 },
+      ],
+    },
+    RCMessages: [
+      { Time: '2026-07-03T14:05:00Z', Category: 'Flag', Flag: 'YELLOW', Message: 'YELLOW IN SECTOR 2', Lap: 29 },
+    ],
+    Weather: {
+      AirTemp: 22.5,
+      TrackTemp: 41.3,
+      Humidity: 58,
+      WindSpeed: 3.4,
+      WindDir: 180,
+      Rainfall: false,
+    },
+    Session: {
+      MeetingName: 'Testonia Grand Prix',
+      CircuitName: 'Testring',
+      SessionType: 'Race',
+      SessionName: 'Race',
+    },
+    TrackStatus: '2',
+    CurrentLap: 30,
+    TotalLaps: 57,
+    Clock: '',
+    ClockRefTime: '',
+    ClockExtrapolating: false,
+  },
+}
+
+test.describe('Live Timing (mocked snapshot)', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.route('**/api/v1/live/state', (route) =>
+      route.fulfill({ contentType: 'application/json', body: JSON.stringify(raceSnapshot) }),
+    )
+    // A single heartbeat then EOF; the page keeps the query snapshot either way.
+    await page.route('**/api/v1/live/stream', (route) =>
+      route.fulfill({
+        contentType: 'text/event-stream',
+        body: 'event: heartbeat\ndata: {}\n\n',
+      }),
+    )
+    await page.goto('/live')
+  })
+
+  test('renders timing tower with drivers from the snapshot', async ({ page }) => {
+    await expect(page.getByTestId('live-page')).toBeVisible()
+    const tower = page.locator('.live-tower')
+    await expect(tower).toBeVisible()
+    await expect(tower).toContainText('VER')
+    await expect(tower).toContainText('NOR')
+    await expect(tower).toContainText('HAM')
+    await expect(tower.locator('tr.in-pit')).toContainText('RUS')
+  })
+
+  test('shows yellow flag banner from TrackStatus', async ({ page }) => {
+    const banner = page.getByTestId('track-banner')
+    await expect(banner).toBeVisible()
+    await expect(banner).toContainText('YELLOW FLAG')
+  })
+
+  test('shows weather strip with track temperature', async ({ page }) => {
+    const weather = page.getByTestId('weather-strip')
+    await expect(weather).toBeVisible()
+    await expect(weather).toContainText('41°C')
+  })
+
+  test('detects the VER/NOR battle and highlights it', async ({ page }) => {
+    const chips = page.getByTestId('battle-chips')
+    await expect(chips).toBeVisible()
+    await expect(chips).toContainText('VER ⚔ NOR')
+    // The in-pit car must never be part of a battle group.
+    await expect(chips).not.toContainText('RUS')
+  })
+
+  test('renders stint history for drivers that have stints', async ({ page }) => {
+    await expect(page.getByTestId('stint-seq').first()).toBeVisible()
+  })
+
+  test('clicking a row pins the driver to the focus strip', async ({ page }) => {
+    await page.locator('.live-tower tbody tr', { hasText: 'VER' }).click()
+    const pinned = page.getByTestId('pinned-strip')
+    await expect(pinned).toBeVisible()
+    await expect(pinned).toContainText('VER')
+
+    // Unpin restores the empty strip.
+    await page.locator('.live-tower tbody tr', { hasText: 'VER' }).click()
+    await expect(page.getByTestId('pinned-strip')).toHaveCount(0)
+  })
+})
+
+test.describe('Live Timing (no session)', () => {
+  test('shows the empty state when the feed has no snapshot', async ({ page }) => {
+    await page.goto('/live')
+    await expect(page.getByTestId('live-empty')).toBeVisible()
+    await expect(page.getByTestId('live-page')).toContainText('No live session active')
+  })
+})

tests/race-hub.spec.ts

@@ -17,24 +17,29 @@ test.describe('Race Hub Weekend Workspace', () => {
     )
   })
 
-  test('shows final classification when switching to Race Story', async ({ page }) => {
+  test('shows final running order when switching to Race Story', async ({ page }) => {
     await page.goto(`/race-hub?session_key=${FULL_SESSION}`)
     await page.getByRole('tab', { name: 'Race Story' }).click()
 
-    await expect(page.getByText('Final Classification')).toBeVisible()
+    const verRow = page.locator('.rs-driver-row', {
-    await expect(page.locator('.drv-code', { hasText: 'VER' })).toBeVisible()
+      has: page.locator('.rs-driver-name', { hasText: 'VER' }),
-    await expect(page.locator('.drv-code', { hasText: 'HAM' })).toBeVisible()
+    })
+    const hamRow = page.locator('.rs-driver-row', {
+      has: page.locator('.rs-driver-name', { hasText: 'HAM' }),
+    })
+    await expect(verRow.locator('.rs-pos-col')).toHaveText('1')
+    await expect(hamRow.locator('.rs-pos-col')).toHaveText('2')
   })
 
-  test('Race Story exposes classification, grid, and positions sub-views', async ({ page }) => {
+  test('Race Story renders the position evolution chart for a full session', async ({ page }) => {
     await page.goto(`/race-hub?session_key=${FULL_SESSION}`)
     await page.getByRole('tab', { name: 'Race Story' }).click()
 
-    await page.getByRole('tab', { name: 'Starting Grid' }).click()
-    await expect(page.locator('.sec-title', { hasText: 'Starting Grid' })).toBeVisible()
-
-    await page.getByRole('tab', { name: 'Positions' }).click()
     await expect(page.locator('[data-testid="position-chart"]')).toBeVisible()
+    await expect(
+      page.getByRole('img', { name: 'Position evolution chart' }),
+    ).toBeVisible()
+    await expect(page.getByText('Lap-by-lap positions not available.')).not.toBeVisible()
   })
 
   test('strategy tab renders stint chart when stints are available', async ({ page }) => {
@@ -53,12 +58,11 @@ test.describe('Race Hub Weekend Workspace', () => {
     await expect(page.locator('[data-testid="strategy-chart"]')).not.toBeVisible()
   })
 
-  test('positions sub-view shows missing notice when positions are unavailable', async ({
+  test('Race Story shows missing notice when positions are unavailable', async ({
     page,
   }) => {
     await page.goto(`/race-hub?session_key=${CORE_ONLY_SESSION}`)
     await page.getByRole('tab', { name: 'Race Story' }).click()
-    await page.getByRole('tab', { name: 'Positions' }).click()
 
     await expect(page.getByText('Lap-by-lap positions not available.')).toBeVisible()
     await expect(page.locator('[data-testid="position-chart"]')).not.toBeVisible()

tests/visual/helpers.ts

@@ -19,6 +19,11 @@ export async function gotoCommandCenterReady(page: Page): Promise<void> {
   await expect(page.getByTestId('command-center')).toBeVisible()
   await expect(page.getByTestId('cc-focus')).toBeVisible()
   await expect(page.getByTestId('cc-session-9472')).toBeVisible()
+  // The e2e stack runs with an unreachable OpenF1 base URL, so wait for the
+  // season-calendar query to settle on its local fallback before screenshotting.
+  await expect(
+    page.getByText('Using local meetings because the full calendar could not load.'),
+  ).toBeVisible()
   await waitForScreenshotReady(page)
 }