merge phase-2 (preview page, chapters) — resolve additive import conflicts

Implemented by claude via .agents/dev dispatch.

.agents/README.md

@@ -0,0 +1,58 @@
+# `.agents/` — harness-agnostic agentic dev toolkit
+
+Portable skills, prompts, and scripts that drive the box-box development lifecycle.
+Any harness (Claude, Codex, opencode, …) can read these — the canonical workflows
+live here, not in a tool-specific folder. The shared project context every harness
+reads is `AGENTS.md` (→ `CLAUDE.md`).
+
+## Layout
+
+```
+skills/          Codex/open agent skills: groom, write-spec, implement, review, lenses
+personas/        grill.md (base) + lens overlays (architect, …) — the interrogation voices
+prompts/         ready-spec.md (groomed spec), implement.md/review.md dispatch prompts
+lib/gh.sh        GitHub issue + Project (#2) state helpers: issue_*, set_stage/effort/priority
+lib/dispatch.sh  dispatch(): Ready issue → worktree → harness → gate → PR
+harnesses.sh     headless adapters (one fn per harness) + run_gate — the ONLY tool-specific code
+bin/dev          CLI: `dev implement <issue#> --harness <name> [--dry-run]`
+```
+
+## The lifecycle
+
+`Icebox → Research → Ready → In Progress → In Review → Done` (the Project `Stage` field).
+
+- **Groom** (interactive, Claude): `/groom <issue#>` runs a seeded grill-me → writes a
+  Ready spec into the issue body → sets Effort/Priority → leaves Stage at `Research`.
+  You review and flip to `Ready`.
+- **Implement** (recommended harnesses: `codex` or `cursor`): `.agents/bin/dev implement <issue#> --harness <name>`
+  (or `/implement …` in Claude to supervise) → isolated worktree → runs the harness
+  headless on the spec → build gate → opens a PR → sets Stage `In Review`.
+- **Review + merge**: use the `review` skill from a harness different from the
+  implementer to create a local review packet and PR comment, then you merge.
+
+## Skills and harnesses
+
+`.agents/skills` is the canonical home for reusable workflows. Codex discovers
+repo skills from that path directly, and Claude can use the same files through
+`.claude/skills -> ../.agents/skills`. Other harnesses can read the same
+`SKILL.md` files explicitly or enter the workflow through `.agents/bin/dev`.
+Do not put canonical workflow instructions under `.claude/`; that directory is
+local adapter state.
+
+## Adding / fixing a harness
+
+Edit one function in `harnesses.sh`: `harness_<name> <workdir> <promptfile>`, running the
+tool non-interactively in `<workdir>` on the prompt. For current implementation
+dispatch, prefer `codex` or `cursor`; `claude` and `opencode` remain available, and
+`pi` still needs flag verification before trusting.
+
+`agy` / Antigravity is deliberately disabled for non-dry-run dispatch as of
+2026-07-04. Phase 1 testing found the headless path unreliable: with
+`--new-project` it ignored the prompt and tried to scaffold, while without it the CLI
+could resume a stale conversation and hang past the print timeout. Keep using
+`.agents/bin/dev implement <issue#> --harness agy --dry-run` for prompt inspection
+only; real dispatch should use `codex` or `cursor` until a fresh Antigravity
+headless invocation is verified and documented.
+
+Always `--dry-run` a new harness first: it renders the exact prompt and plan, touching
+nothing (no worktree, PR, or state change).

.agents/bin/dev

@@ -0,0 +1,45 @@
+#!/usr/bin/env bash
+# .agents/bin/dev — box-box agentic dev CLI. Works from any harness's shell.
+#
+#   dev implement <issue#> --harness <codex|cursor|claude|opencode|pi|agy> [--dry-run] [--base <branch>]
+#
+# Grooming is driven interactively via the Claude Code /groom skill; this CLI covers
+# the implement lane (dispatch a Ready issue to a harness → worktree → gate → PR).
+
+set -o pipefail
+ROOT="$(cd "$(dirname "${BASH_SOURCE[0]:-$0}")/../.." && pwd)"
+
+usage() {
+  cat >&2 <<EOF
+box-box dev CLI
+
+  dev implement <issue#> --harness <name> [--dry-run] [--base <branch>]
+
+harnesses: codex, cursor (recommended) · claude, opencode (available) · agy (dry-run only, disabled for dispatch) · pi (verify flags)
+  --dry-run   render the prompt + plan, touch nothing (no worktree/PR/state change)
+  --base      base branch for the worktree/PR (default: main)
+EOF
+  exit 2
+}
+
+cmd="${1:-}"; shift 2>/dev/null || true
+case "$cmd" in
+  implement)
+    issue="${1:-}"; shift 2>/dev/null || true
+    harness=""; passthru=()
+    while [ $# -gt 0 ]; do
+      case "$1" in
+        --harness) harness="${2:-}"; shift 2 ;;
+        --dry-run) passthru+=(--dry-run); shift ;;
+        --base)    passthru+=(--base "${2:-}"); shift 2 ;;
+        *) echo "unknown arg: $1" >&2; usage ;;
+      esac
+    done
+    [ -n "$issue" ] && [ -n "$harness" ] || usage
+    # shellcheck source=/dev/null
+    source "$ROOT/.agents/lib/dispatch.sh"
+    dispatch "$issue" "$harness" ${passthru[@]+"${passthru[@]}"}
+    ;;
+  ""|-h|--help|help) usage ;;
+  *) echo "unknown command: $cmd" >&2; usage ;;
+esac

.agents/harnesses.sh

@@ -0,0 +1,71 @@
+#!/usr/bin/env bash
+# .agents/harnesses.sh — headless harness adapters.
+#
+# ONE function per harness:  harness_<name> <workdir> <promptfile>
+# Each runs the harness NON-INTERACTIVELY inside <workdir>, feeding it the rendered
+# prompt, expected to edit files (and ideally commit). This is the ONLY harness-specific
+# code in the toolkit — tune the exact flags here per tool/version.
+#
+# Autonomy note: these run unattended, so each uses the tool's "just do it" mode
+# (accept edits / full-auto). Only run harnesses you trust on code you can review via PR.
+
+# ---- MUST-HAVE ----
+
+harness_disabled_reason() {              # <name> -> reason on stdout; 0 means disabled
+  case "$1" in
+    agy)
+      cat <<'EOF'
+agy is disabled for implementation dispatch as of 2026-07-04: Antigravity headless mode was observed to ignore prompts with --new-project, resume stale conversations without it, and hang past print timeouts. Use codex or cursor until a fresh headless invocation is verified.
+EOF
+      return 0
+      ;;
+    *) return 1 ;;
+  esac
+}
+
+harness_claude() {                      # Claude Code — print mode, auto-accept edits
+  local dir="$1" prompt="$2"
+  ( cd "$dir" && claude -p "$(cat "$prompt")" --permission-mode acceptEdits )
+}
+
+harness_codex() {                       # OpenAI Codex CLI — non-interactive exec, full auto
+  local dir="$1" prompt="$2"
+  ( cd "$dir" && codex exec --full-auto "$(cat "$prompt")" )
+}
+
+harness_opencode() {                    # opencode — non-interactive run
+  local dir="$1" prompt="$2"
+  ( cd "$dir" && opencode run "$(cat "$prompt")" )
+}
+
+harness_cursor() {                      # Cursor CLI agent — composer-2.5, headless full-auto
+  local dir="$1" prompt="$2"
+  ( cd "$dir" && cursor-agent -p "$(cat "$prompt")" --model composer-2.5 --force --trust )
+}
+
+harness_agy() {                         # Antigravity CLI — disabled until headless is verified
+  local reason
+  reason="$(harness_disabled_reason agy)"
+  echo "harness_agy: $reason" >&2
+  return 2
+}
+
+# ---- NICE-TO-HAVE (verify the exact invocation for your version before trusting) ----
+
+harness_pi() {                          # pi — CONFIRM headless CLI + flags
+  local dir="$1" prompt="$2"
+  ( cd "$dir" && pi run "$(cat "$prompt")" )        # placeholder — verify
+}
+
+# ---- build/typecheck gate (fast, local) ----
+# Returns non-zero on failure. This is a smoke gate — CI runs the full suite. Tune freely.
+run_gate() {
+  local dir="$1"
+  ( cd "$dir" && go build ./... ) || return 1
+  if [ -d "$dir/frontend/node_modules" ]; then
+    ( cd "$dir/frontend" && npx tsc --noEmit ) || return 1
+  else
+    echo "  (gate: frontend deps absent in worktree — tsc/vitest deferred to CI)" >&2
+  fi
+  return 0
+}

.agents/lib/dispatch.sh

@@ -0,0 +1,130 @@
+#!/usr/bin/env bash
+# .agents/lib/dispatch.sh — implement a Ready issue with a chosen harness in an
+# isolated git worktree, run the build gate, and open a PR.
+#
+# Source it, then:  dispatch <issue#> <harness> [--dry-run] [--base <branch>]
+# (or use the CLI:  .agents/bin/dev implement <issue#> --harness <name> [--dry-run])
+
+_AGENTS_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)"
+# shellcheck source=/dev/null
+source "$_AGENTS_DIR/lib/gh.sh"
+# shellcheck source=/dev/null
+source "$_AGENTS_DIR/harnesses.sh"
+
+_slug() { echo "$1" | tr '[:upper:]' '[:lower:]' | sed -E 's/[^a-z0-9]+/-/g; s/^-+//; s/-+$//' | cut -c1-40; }
+
+_render_prompt() { # <issue#> <title> <body>
+  echo "# Implement: $2"
+  echo
+  cat "$_AGENTS_DIR/prompts/implement.md"
+  echo; echo "---"; echo
+  echo "## Spec — issue #$1"
+  echo
+  echo "$3"
+}
+
+_pr_body() { # <issue#> <harness> <gate>
+  cat <<EOF
+Implements #$1.
+
+- **Harness:** $2 (dispatched via \`.agents/bin/dev\`)
+- **Local gate** (\`go build\` + \`tsc --noEmit\`): **$3**
+- Full test suite + independent review run in CI / by a reviewer harness.
+
+See #$1 for the groomed spec, Test Plan, and Definition of Done.
+
+Closes #$1
+EOF
+}
+
+dispatch() { # <issue#> <harness> [--dry-run] [--base <branch>]
+  local issue="$1" harness="$2"; shift 2 || { echo "usage: dispatch <issue#> <harness> [--dry-run] [--base <branch>]"; return 2; }
+  local dry=0 base="main"
+  while [ $# -gt 0 ]; do
+    case "$1" in
+      --dry-run) dry=1 ;;
+      --base)    base="$2"; shift ;;
+      *) echo "dispatch: unknown flag '$1'" >&2; return 2 ;;
+    esac; shift
+  done
+
+  # adapter must exist
+  if ! declare -f "harness_$harness" >/dev/null 2>&1; then
+    echo "no adapter for harness '$harness' — add harness_$harness() to .agents/harnesses.sh" >&2; return 2
+  fi
+  if [ "$dry" != 1 ] && declare -f harness_disabled_reason >/dev/null 2>&1; then
+    local disabled_reason
+    if disabled_reason="$(harness_disabled_reason "$harness")"; then
+      echo "harness '$harness' is disabled for non-dry-run dispatch." >&2
+      echo "  $disabled_reason" >&2
+      echo "  Use --dry-run for prompt inspection, or dispatch with --harness codex/cursor." >&2
+      return 2
+    fi
+  fi
+
+  local repo_root title body slug branch wt prompt
+  repo_root="$(git rev-parse --show-toplevel)" || return 1
+  title="$(issue_title "$issue")" || { echo "issue #$issue not found on $REPO" >&2; return 1; }
+  body="$(issue_body "$issue")"
+  slug="$(_slug "$title")"
+  branch="feat/issue-${issue}-${slug}"
+  wt="$repo_root/.worktrees/issue-${issue}"
+  prompt="$(mktemp "${TMPDIR:-/tmp}/boxbox-prompt-${issue}.XXXX")"
+  _render_prompt "$issue" "$title" "$body" > "$prompt"
+
+  echo "── dispatch #$issue → $harness ──"
+  echo "  title    : $title"
+  echo "  branch   : $branch"
+  echo "  worktree : $wt"
+  echo "  base     : $base"
+  echo "  prompt   : $prompt"
+
+  if [ "$dry" = 1 ]; then
+    echo "  [dry-run] no worktree / harness / PR / state change. Prompt preview:"
+    sed 's/^/    | /' "$prompt"
+    return 0
+  fi
+
+  # preflight: warn (don't block) if not Ready
+  local stage; stage="$(get_field "$issue" Stage)"
+  [ "$stage" = "Ready" ] || echo "  ⚠ Stage is '$stage' (not Ready) — dispatching anyway"
+
+  # isolated worktree
+  if [ -d "$wt" ]; then
+    echo "  worktree exists — reusing"
+  else
+    git -C "$repo_root" worktree add -b "$branch" "$wt" "$base" || return 1
+  fi
+
+  set_stage "$issue" "In Progress"
+
+  echo "  running $harness (headless)…"
+  ( harness_"$harness" "$wt" "$prompt" ); local hrc=$?
+  echo "  $harness exited ($hrc)"
+
+  # fallback commit: guarantee a PR-able branch even if the harness didn't commit
+  if [ -n "$(git -C "$wt" status --porcelain)" ]; then
+    git -C "$wt" add -A
+    git -C "$wt" commit -q -m "feat(#$issue): $title
+
+Implemented by $harness via .agents/dev dispatch." && echo "  committed leftover changes"
+  fi
+
+  # gate
+  local gate="passed"
+  run_gate "$wt" || gate="FAILED"
+  echo "  gate: $gate"
+
+  # PR (only if there are commits ahead of base)
+  if [ -n "$(git -C "$wt" log "$base..$branch" --oneline 2>/dev/null)" ]; then
+    git -C "$wt" push -u origin "$branch" || { echo "  push failed — inspect $wt" >&2; return 1; }
+    local draft=""; [ "$gate" = "FAILED" ] && draft="--draft"
+    local pr
+    pr="$(gh pr create -R "$REPO" --head "$branch" --base "$base" $draft \
+      --title "$title (#$issue)" --body "$(_pr_body "$issue" "$harness" "$gate")")" || { echo "  gh pr create failed" >&2; return 1; }
+    echo "  PR: $pr${draft:+  (draft — gate failed)}"
+    set_stage "$issue" "In Review"
+  else
+    echo "  no commits on $branch — leaving Stage 'In Progress'. Inspect the worktree: $wt" >&2
+  fi
+}

.agents/lib/gh.sh

@@ -0,0 +1,68 @@
+#!/usr/bin/env bash
+# .agents/lib/gh.sh — harness-agnostic helpers for the box-box agentic dev lifecycle.
+#
+# Source it, then call the functions:
+#   source .agents/lib/gh.sh
+#   issue_json 9 ; set_stage 9 Research ; set_effort 9 M
+#
+# Requires: gh (authed, with `project` scope), jq.
+# Config is overridable via env vars.
+
+REPO="${BOXBOX_REPO:-AmanTahiliani/box-box}"
+PROJECT_OWNER="${BOXBOX_PROJECT_OWNER:-AmanTahiliani}"
+PROJECT_NUMBER="${BOXBOX_PROJECT_NUMBER:-2}"
+
+_BOXBOX_CACHE="${TMPDIR:-/tmp}/boxbox-agent"
+mkdir -p "$_BOXBOX_CACHE" 2>/dev/null
+
+# ---------- issues ----------
+issue_json()     { gh issue view "$1" -R "$REPO" --json number,title,body,labels,url,state; }
+issue_body()     { gh issue view "$1" -R "$REPO" --json body  -q .body; }
+issue_title()    { gh issue view "$1" -R "$REPO" --json title -q .title; }
+issue_url()      { gh issue view "$1" -R "$REPO" --json url   -q .url; }
+set_issue_body() { gh issue edit "$1" -R "$REPO" --body-file "$2"; }        # <issue#> <file>
+add_comment()    { gh issue comment "$1" -R "$REPO" --body-file "$2"; }     # <issue#> <file>
+
+# Native sub-issue children of an epic (issue numbers, one per line).
+sub_issues() {
+  gh api graphql -H "GraphQL-Features: sub_issues" -f query='
+    query($owner:String!,$repo:String!,$num:Int!){
+      repository(owner:$owner,name:$repo){
+        issue(number:$num){ subIssues(first:50){ nodes{ number } } } } }' \
+    -F owner="${REPO%/*}" -F repo="${REPO#*/}" -F num="$1" \
+    -q '.data.repository.issue.subIssues.nodes[].number'
+}
+
+# ---------- project fields (cached per shell invocation) ----------
+_fields_file="$_BOXBOX_CACHE/fields.json"
+_items_file="$_BOXBOX_CACHE/items.json"
+_pid_file="$_BOXBOX_CACHE/project_id"
+
+_refresh_fields() { gh project field-list "$PROJECT_NUMBER" --owner "$PROJECT_OWNER" --format json > "$_fields_file"; }
+_refresh_items()  { gh project item-list  "$PROJECT_NUMBER" --owner "$PROJECT_OWNER" --format json --limit 200 > "$_items_file"; }
+project_refresh() { _refresh_fields; _refresh_items; }   # call once at the start of a session to get fresh state
+
+_project_id() { [ -s "$_pid_file" ] || gh project view "$PROJECT_NUMBER" --owner "$PROJECT_OWNER" --format json | jq -r .id > "$_pid_file"; cat "$_pid_file"; }
+_field_id()   { [ -s "$_fields_file" ] || _refresh_fields; jq -r --arg n "$1" '.fields[]|select(.name==$n)|.id' "$_fields_file"; }
+_option_id()  { [ -s "$_fields_file" ] || _refresh_fields; jq -r --arg f "$1" --arg o "$2" '.fields[]|select(.name==$f)|.options[]?|select(.name==$o)|.id' "$_fields_file"; }
+_item_id()    { [ -s "$_items_file" ]  || _refresh_items;  jq -r --arg n "$1" '.items[]|select(.content.number==($n|tonumber))|.id' "$_items_file"; }
+
+# set_field <issue#> <FieldName> <OptionName>   (single-select fields: Stage/Priority/Effort/Phase)
+set_field() {
+  local item opt fld pid
+  item="$(_item_id "$1")"; fld="$(_field_id "$2")"; opt="$(_option_id "$2" "$3")"; pid="$(_project_id)"
+  if [ -z "$item" ] || [ -z "$fld" ] || [ -z "$opt" ]; then
+    echo "set_field: could not resolve issue=$1 field=$2 option=$3 (item=$item field=$fld opt=$opt)" >&2; return 1
+  fi
+  gh project item-edit --id "$item" --project-id "$pid" --field-id "$fld" --single-select-option-id "$opt" >/dev/null \
+    && echo "set #$1 $2=$3"
+}
+set_stage()    { set_field "$1" Stage    "$2"; }
+set_priority() { set_field "$1" Priority "$2"; }
+set_effort()   { set_field "$1" Effort   "$2"; }
+
+# get_field <issue#> <FieldName>  -> current value (single-word field names only)
+get_field() {
+  [ -s "$_items_file" ] || _refresh_items
+  jq -r --arg n "$1" --arg f "$2" '.items[]|select(.content.number==($n|tonumber))|.[($f|ascii_downcase)] // "-"' "$_items_file"
+}

.agents/personas/architect.md

@@ -0,0 +1,35 @@
+# Lens overlay: Architect
+
+Apply this **on top of** the base grill (`grill.md`). Bias every question toward
+technical soundness and fit with the existing box-box architecture.
+
+## box-box context to hold
+
+- **Backend (Go):** `internal/api` (OpenF1 client, cache, 37 endpoints), `internal/web`
+  (REST handlers + SSE hub, route table in `server.go`), `internal/store` (domain
+  SQLite), `internal/query` (read models over the domain DB), `internal/ingest`,
+  `internal/live` (SignalR).
+- **Frontend (React+Vite+TS):** TanStack Router/Query, `src/api.ts` (typed fetchers),
+  `src/types.ts` (payload mirrors), `src/lib` (client helpers), `src/pages`,
+  `src/components` (incl. `components/live`).
+- **Patterns to respect** (see CLAUDE.md "How To Extend"): ServeMux longest-prefix
+  route ordering in `server.go`, cache TTL tiers, `?source=openf1|local|auto`
+  resolution, two-phase standings load, lazy tab loads, stale-data fallback banner.
+
+## Grill especially on
+
+- **Reuse vs new:** does existing code already do this (a TUI equivalent in
+  `internal/ui/*.go`, a query model, an `api.ts` fetcher)? Port vs rebuild.
+- **Data flow & source:** OpenF1 live vs domain DB vs cache; payload size; rate
+  limits; how `?source` is handled.
+- **Seams:** which files/modules change; new endpoint (mind registration order!) vs
+  extend an existing one; new component vs extend; where shared logic lives
+  (`frontend/src/lib/*`).
+- **Testability:** how does this land in `go test` / `vitest` / hermetic Playwright?
+  What seam makes it testable without live OpenF1?
+- **Risk:** domain-DB migrations, perf on large sessions, backward compat, and
+  failure / stale-data behavior.
+
+Keep questions concrete and decision-shaped — e.g. *"port the GPS normalization from
+`internal/ui/trackmap.go`, or recompute in a shared `frontend/src/lib/trackmap.ts` so
+it's unit-testable?"* — each with your recommendation.

.agents/personas/grill.md

@@ -0,0 +1,51 @@
+# Persona: The Grill
+
+You run a **grill-me** session. Instead of the human prompting you, **you interrogate
+the human** until you share a design concept for one specific piece of work (a GitHub
+issue or epic). The shared understanding — not the document — is the real output.
+
+## Before you ask anything
+
+Load the full context of the target:
+
+- Read the issue title + body (and any notes already on it).
+- Read `CLAUDE.md`.
+- Explore the code paths the work implicates.
+
+## Rules
+
+1. **One question at a time.** Walk each branch of the design tree and resolve
+   dependencies in order — a later question often depends on an earlier answer.
+2. **Recommend, consequence-first.** Every question carries your recommended answer
+   and a short "why". **Calibrate to a technically fluent reader who does not know
+   *this project's* internals.** Assume general engineering literacy (APIs, streaming,
+   latency, front/back-end, caching, etc.) and don't explain those. **Do** unpack
+   anything project-specific: internal file/type/endpoint names, bespoke architecture
+   choices, and why they matter *here* — a few words is enough, no lectures. Above all,
+   lead each option with the **practical consequence** a decision can be made on
+   (effort, risk, what ships sooner, how it feels to use), so the reader can choose
+   without needing the implementation detail. Recommendation first, with why it's the
+   better call **for them**.
+   - *Example — keep the mechanism, but lead with the tradeoff:* "**A (recommended):**
+     reuse the existing SSE snapshot — cheapest to build, but cars jump a little
+     between updates. **B:** a dedicated ~4Hz position stream — more work now, but
+     motion is smooth and it sets up interpolation later." (Names the real mechanism;
+     the choice is still obvious from the consequences.)
+3. **Hybrid asking.**
+   - Decision with clear discrete options → present a **structured choice**, the
+     recommendation first. *(In Claude Code: use the AskUserQuestion tool; put the
+     recommended option first and end its label with "(Recommended)".)* Write each
+     option's description in the plain-language, consequence-first style from rule 2 —
+     the label can be terse, but the description must be understandable on its own.
+   - Genuinely open-ended → ask in **prose**.
+4. **Explore before you ask.** If the codebase or the issue already answers a
+   question, do **not** ask — state what you found and the assumption you're
+   proceeding with, then move on. Only ask about real forks the human must decide.
+5. **Stay in scope.** Grill the design of *this* work, not the whole app. Note
+   out-of-scope temptations instead of chasing them.
+
+## Termination
+
+Stop when no unresolved branches remain and you could write the spec yourself with no
+open questions. Summarize the shared design concept in 3–6 bullets, confirm it with
+the human, then hand off to `write-spec`.

.agents/prompts/implement.md

@@ -0,0 +1,21 @@
+You are an autonomous coding agent working in an **isolated git worktree** on the
+**box-box** repo. Implement the groomed spec below as a single, focused, story-sized
+change — then commit it.
+
+## Ground rules
+- Read `AGENTS.md` / `CLAUDE.md` first and follow the project's conventions exactly
+  (architecture, route-registration order in `server.go`, cache TTL tiers,
+  `api.ts`/`types.ts` mirrors, test layout).
+- Implement ONLY this story's scope. Honor the spec's **Out of Scope** — do not build
+  deferred items, even if tempting.
+- If the spec has an **early spike / risk** step, do that FIRST and note the result in
+  your commit message (and adjust the approach if the spike says to).
+- Add or extend tests per the **Test Plan**. Make the relevant suites pass:
+  `go build ./...`, `go test ./...`, and in `frontend/`: `npm run test`, `tsc --noEmit`.
+- Keep the change reviewable and story-sized. **Commit your work** with a clear,
+  conventional message when done (the dispatcher opens the PR).
+- Satisfy every item in the spec's **Definition of Done**.
+
+If something in the spec is ambiguous or turns out to be wrong once you're in the code,
+make the smallest reasonable decision, implement it, and call it out clearly in the
+commit message / PR so the reviewer can catch it — do not silently expand scope.

.agents/prompts/ready-spec.md

@@ -0,0 +1,27 @@
+## Context
+{one paragraph: the problem and why it matters, grounded in the grooming}
+
+## Acceptance Criteria
+- [ ] {observable behaviour 1}
+- [ ] {observable behaviour 2}
+
+## Technical Approach
+- **Files to touch:** {real paths}
+- **Data source:** {OpenF1 live | domain DB | cache | ...}
+- **Endpoints/components:** {new or extended — note route-registration order if new}
+- **Key decisions:** {the forks resolved during the grill}
+
+## Test Plan
+- {cases mapped to the real suites: go test · vitest · hermetic Playwright}
+
+## Out of Scope
+- {explicitly deferred}
+
+## Definition of Done
+- [ ] Tests added and green (`go test` · `vitest` · `tsc --noEmit` · hermetic Playwright as applicable)
+- [ ] Matches CLAUDE.md conventions (route order, cache TTLs, `api.ts`/`types.ts` mirrors)
+- [ ] No console / preview errors (UI verified in preview)
+- [ ] Story-sized PR, linked to this issue
+
+---
+_Groomed {date} · Effort {S|M|L} · Priority {P0|P1|P2} · via /groom_

.agents/prompts/review.md

@@ -0,0 +1,20 @@
+You are an independent reviewer for a box-box pull request. Review the PR against
+the linked GitHub issue spec, not against your own preferred scope.
+
+## Ground rules
+- Use a harness different from the implementer when possible.
+- Read `AGENTS.md` / `CLAUDE.md`, the PR body/diff, and the linked issue body.
+- Run the relevant local gates and capture logs under `.review/issue-<n>-pr-<pr>/logs`.
+- For UI changes, create a local visual packet under `.review/issue-<n>-pr-<pr>/`
+  with desktop and mobile screenshots for the affected routes.
+- If screenshots should appear inline on GitHub, publish only review artifacts to
+  a separate artifact branch, never to `main` or the product PR branch.
+- Post a PR comment with pass/fail status, acceptance-criteria alignment, local
+  artifact paths, screenshot links when available, and caveats.
+- Do not merge. The human owns the merge gate.
+
+## Output
+- A local packet with `summary.md`, optional `index.html`, screenshots, logs, and
+  any visual diffs.
+- A GitHub PR comment that makes the review visually scannable.
+- A clear recommendation: pass, pass with caveats, or needs changes.

.agents/skills/groom/SKILL.md

@@ -0,0 +1,42 @@
+---
+name: groom
+description: 'Groom a box-box GitHub issue into a Ready spec via a seeded grill-me interrogation. Use when the user asks to groom an issue, for example "/groom <issue-number>" or "$groom <issue-number>" with optional "--lens architect". Single-issue path: asks targeted questions, writes a structured spec into the issue body, sets Effort/Priority, and leaves Stage at Research for approval.'
+argument-hint: <issue-number> [--lens architect]
+---
+
+# /groom — refine one issue into a Ready spec
+
+Groom issue **$ARGUMENTS** on the box-box roadmap (Project #2): drive it from the
+backlog into a fully-specified Ready ticket through a grill-me session.
+
+## 0. Setup
+- Parse the first token of the arguments as the **issue number**. An optional
+  `--lens <name>` pulls in a lens overlay (currently: `architect`).
+- Run: `source .agents/lib/gh.sh && project_refresh` (fresh field/item state).
+- Load context **before asking anything**: `issue_json <n>`, read `CLAUDE.md`, and
+  explore the code paths the issue implicates.
+- Move it into grooming if it isn't already there: `set_stage <n> Research`.
+
+## 1. Grill
+- Read `.agents/personas/grill.md`. If `--lens <name>` was given, also read
+  `.agents/personas/<name>.md` and apply it on top.
+- Run the grill exactly per those rules: **one question at a time**, recommendation
+  first, **hybrid** asking (AskUserQuestion for discrete decisions with the
+  recommended option first and labelled "(Recommended)"; prose for open-ended), and
+  **explore the code to self-answer** wherever possible — only ask about genuine forks.
+- Track the resolved decisions as you go.
+
+## 2. Synthesize
+- When no open branches remain, summarize the shared design concept in 3–6 bullets and
+  confirm it with the user.
+- Then invoke the **write-spec** skill for issue `<n>`, handing it the resolved
+  decisions, so it renders `.agents/prompts/ready-spec.md` into the issue body and
+  sets Effort + Priority.
+
+## 3. Hand back (human gate)
+- Do **not** auto-advance to Ready — that's the user's call. Report that the spec is
+  written, Stage is `Research`, and they should review the issue and flip Stage →
+  `Ready` when satisfied (`set_stage <n> Ready`).
+- Print the issue URL (`issue_url <n>`).
+
+Stay focused on THIS issue's design throughout. Note but don't chase out-of-scope ideas.

.agents/skills/implement/SKILL.md

@@ -0,0 +1,32 @@
+---
+name: implement
+description: 'Dispatch a Ready box-box issue to a coding harness (claude/codex/opencode/pi/cursor) in an isolated git worktree, run the build gate, and open a PR. Use when supervising implementation via "/implement <issue-number> --harness <name> [--dry-run]" or from any harness terminal with .agents/bin/dev.'
+argument-hint: <issue-number> --harness <claude|codex|opencode|pi|cursor> [--dry-run]
+---
+
+# /implement — dispatch an issue to a harness (supervised)
+
+Supervise the implementation of issue **$ARGUMENTS**. You are SUPERVISING, not coding —
+a fresh harness does the work in its own isolated worktree with clean context. Do not
+edit project files yourself.
+
+## Steps
+1. Parse: `<issue-number> --harness <name> [--dry-run] [--base <branch>]`.
+2. **Preflight (report, don't hard-block):** `source .agents/lib/gh.sh` and check
+   `get_field <n> Stage` is `Ready` and the issue body has an "## Acceptance Criteria"
+   section (a groomed spec). If it's not Ready or has no spec, say so and recommend
+   `/groom <n>` first — proceed only if the user confirms.
+3. **Dispatch:** run `.agents/bin/dev implement <n> --harness <name> [flags]`. For a
+   first run against an unfamiliar harness, suggest `--dry-run` first so the user can
+   eyeball the prompt.
+4. **Report the outcome:** branch, worktree path, gate result (pass/FAILED → draft PR),
+   and the PR URL. On success, Stage will be `In Review`.
+5. If no PR was created (no changes, or push failed), surface exactly why and point at
+   the worktree (`.worktrees/issue-<n>`) so the user can inspect. Diagnose from the
+   dispatcher output; recommend a fix or re-run — don't silently take over the coding.
+
+## Notes
+- The harness adapters and the gate live in `.agents/harnesses.sh` — the single place
+  to tune per-tool flags.
+- From any harness shell, run the same thing directly:
+  `.agents/bin/dev implement <n> --harness <name>`.

.agents/skills/lens-architect/SKILL.md

@@ -0,0 +1,22 @@
+---
+name: lens-architect
+description: 'Grill/analyze a box-box issue or epic from a software-architecture perspective and post the findings as a comment. Use standalone as "/lens-architect <issue-number>" for an on-the-fly architecture review, or let /groom compose it via "--lens architect". Reads the base grill + architect persona and focuses on reuse, data flow, seams, testability, and risk.'
+argument-hint: <issue-number>
+---
+
+# /lens-architect — architecture lens
+
+Target: issue **$ARGUMENTS** (box-box, Project #2).
+
+1. `source .agents/lib/gh.sh`; load context (`issue_json <n>`, `CLAUDE.md`, and the
+   relevant code paths).
+2. Read `.agents/personas/grill.md` + `.agents/personas/architect.md` and run a focused
+   grill from the architecture lens: hybrid asking (AskUserQuestion for discrete
+   decisions, recommendation first; prose otherwise), recommend every answer, and
+   explore the code to self-answer before asking.
+3. When aligned, write an **"## Architecture review"** summary (decisions taken,
+   files/seams affected, risks, the test seam) to a temp file and `add_comment <n> <file>`.
+4. Print the issue URL.
+
+If invoked from **within /groom**, skip the comment — instead return the architecture
+decisions inline so groom can fold them into the spec.

.agents/skills/review/SKILL.md

@@ -0,0 +1,53 @@
+---
+name: review
+description: 'Locally review a box-box PR against its linked GitHub issue spec, run tests, capture visual screenshots when applicable, create a .review packet, and post a GitHub PR comment. Use when a ticket implementation is ready for independent local review before the human merge gate.'
+argument-hint: <pr-number> [--harness <name>] [--publish-screenshots]
+---
+
+# /review — local independent PR review
+
+Review PR **$ARGUMENTS** for box-box using the local-only lifecycle. You are
+reviewing, not implementing. Do not merge the PR.
+
+## 0. Setup
+- Parse the PR number. Optional `--harness <name>` records which reviewer harness is
+  acting; optional `--publish-screenshots` allows pushing visual artifacts to a
+  dedicated artifact branch.
+- Read `.agents/prompts/review.md`, `AGENTS.md`, the PR metadata/diff, and the linked
+  issue body.
+- Identify the implementer harness from the PR body when present. If it matches the
+  reviewer harness, call that out as a reduced independence caveat.
+- Create `.review/issue-<issue>-pr-<pr>/logs`, `screenshots`, and `artifacts`.
+
+## 1. Verify
+- Run the smallest meaningful gates first, then broaden based on risk:
+  `go test` for touched Go packages, `npm run test` and `npm run build` for frontend
+  changes, and hermetic Playwright when user-facing routes changed.
+- Save all command output to `.review/issue-<issue>-pr-<pr>/logs`.
+- Inspect the diff for spec conformance, scope leaks, missing tests, and known project
+  conventions from `AGENTS.md`.
+
+## 2. Visual Packet
+- If the PR changes UI, start a local seeded or mocked preview and capture desktop and
+  mobile screenshots for affected routes.
+- Prefer hermetic mocks/seeded data over live external state.
+- Save screenshots under `.review/issue-<issue>-pr-<pr>/screenshots`.
+- Create a concise `summary.md`; create `index.html` when screenshots exist.
+
+## 3. Publish
+- If `--publish-screenshots` is present, publish only review artifacts to a dedicated
+  branch such as `review-artifacts/pr-<pr>/` and use raw GitHub URLs in the comment.
+- Post a PR comment with:
+  - reviewer harness and implementer harness
+  - result: pass, pass with caveats, or needs changes
+  - local packet path
+  - gates run and results
+  - acceptance-criteria checklist
+  - screenshots or artifact links when available
+  - caveats that the human must inspect
+- If the result is pass/pass-with-caveats, set the linked issue's custom Project
+  `Stage` to `In Review` using `.agents/lib/gh.sh`. Do not set `Done`.
+
+## 4. Hand Back
+- Tell the human exactly what to open locally and what decision remains theirs.
+- Do not merge or delete worktrees.

.agents/skills/write-spec/SKILL.md

@@ -0,0 +1,30 @@
+---
+name: write-spec
+description: 'Render a groomed design into the box-box Ready-spec template and write it into a GitHub issue body, then set Effort and Priority. Called by /groom after a grill session, or run standalone as "/write-spec <issue-number>" to (re)write an issue''s spec from agreed decisions. Does not change Stage.'
+argument-hint: <issue-number>
+---
+
+# /write-spec — write the Ready spec into an issue
+
+Target issue: **$ARGUMENTS** (box-box, Project #2).
+
+## Steps
+1. `source .agents/lib/gh.sh`
+2. Gather the agreed design decisions: from the current grooming conversation if one
+   is in progress; otherwise ask the user for the key points, or read the issue and
+   explore the code to draft them and confirm.
+3. Read `.agents/prompts/ready-spec.md` and fill every placeholder:
+   - Concrete, **behavioural** acceptance criteria (checkboxes).
+   - Technical approach grounded in **real files/paths** and the chosen data source.
+   - Test plan mapped to the actual suites (`go test` · `vitest` · hermetic Playwright).
+   - Explicit out-of-scope.
+   - Keep the Definition of Done checklist verbatim.
+   - Stamp the footer: date (from the current-date context), Effort (S/M/L),
+     Priority (P0–P2).
+4. Write it into the issue body: save the filled template to a temp file under the
+   scratchpad and `set_issue_body <n> <file>`. The spec is the single source of truth —
+   only preserve prior body text that captures decisions the spec doesn't.
+5. Set fields: `set_effort <n> <S|M|L>` and `set_priority <n> <P0|P1|P2>`.
+6. Print the issue URL and a one-line summary of what was written.
+
+Do **not** change Stage — `/groom` owns state transitions.

.agents/test/dispatch_disabled_harness_test.sh

@@ -0,0 +1,59 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+ROOT="$(cd "$(dirname "${BASH_SOURCE[0]}")/../.." && pwd)"
+cd "$ROOT"
+
+# shellcheck source=/dev/null
+source "$ROOT/.agents/lib/dispatch.sh"
+
+issue_title() { echo "Disable agy harness smoke"; }
+issue_body() { echo "## Spec"; echo; echo "Smoke prompt body"; }
+get_field() { echo "Ready"; }
+set_stage() { echo "unexpected set_stage $*" >&2; return 99; }
+run_gate() { echo "unexpected run_gate $*" >&2; return 99; }
+
+unexpected_git_file="$(mktemp "${TMPDIR:-/tmp}/boxbox-agy-git.XXXX")"
+rm -f "$unexpected_git_file"
+git() {
+  if [ "${1:-}" = "rev-parse" ]; then
+    command git "$@"
+    return
+  fi
+  echo "unexpected git $*" >&2
+  touch "$unexpected_git_file"
+  return 99
+}
+
+set +e
+non_dry_output="$(dispatch 47 agy 2>&1)"
+non_dry_status=$?
+set -e
+
+[ "$non_dry_status" -eq 2 ] || {
+  echo "expected agy non-dry-run to exit 2, got $non_dry_status" >&2
+  echo "$non_dry_output" >&2
+  exit 1
+}
+[[ "$non_dry_output" == *"harness 'agy' is disabled"* ]] || {
+  echo "expected disabled-harness message" >&2
+  echo "$non_dry_output" >&2
+  exit 1
+}
+[ ! -e "$unexpected_git_file" ] || {
+  echo "agy non-dry-run reached git before failing" >&2
+  echo "$non_dry_output" >&2
+  exit 1
+}
+
+dry_output="$(dispatch 47 agy --dry-run 2>&1)"
+[[ "$dry_output" == *"[dry-run] no worktree / harness / PR / state change"* ]] || {
+  echo "expected agy dry-run to render dispatch preview" >&2
+  echo "$dry_output" >&2
+  exit 1
+}
+[[ "$dry_output" == *"Smoke prompt body"* ]] || {
+  echo "expected agy dry-run prompt body" >&2
+  echo "$dry_output" >&2
+  exit 1
+}

.claude/skills

@@ -0,0 +1 @@
+../.agents/skills

.gitignore

@@ -22,7 +22,8 @@ frontend/node_modules/
 frontend/dist/
 
 # Local Claude workspace settings
-.claude/
+.claude/*
+!.claude/skills
 
 # Playwright
 node_modules/
@@ -31,3 +32,9 @@ node_modules/
 /blob-report/
 /playwright/.cache/
 /playwright/.auth/
+
+# agentic dev: isolated implementation worktrees
+.worktrees/
+
+# agentic dev: local review packets
+.review/

README.md

@@ -1,228 +1,66 @@
 # box-box
 
-> "Box, box. Box, box." — Every F1 race engineer, ever.
+> "Box, box. Box, box." Every F1 race engineer, ever.
 
-**box-box** is a Formula 1 dashboard in Go with two surfaces:
+**box-box** is an unofficial F1 race-weekend command center: live timing, Race Hub analytics, championship context, paddock briefing feeds, and local historical data in one Go + React app, with a preserved Bubble Tea TUI.
 
-- **Web UI (primary)** — React + TypeScript SPA for Race Hub analytics, local data coverage, and live timing.
-- **TUI (preserved)** — Bubble Tea terminal app with standings, calendar, driver profiles, official live timing, track map, battles, pit window, and replay.
+Live demo: [box-box.amantahiliani.com](https://box-box.amantahiliani.com/)
 
-Historical Web data is **local-first** in a SQLite domain database (ingested from OpenF1). **Live timing** uses the official F1 SignalR feed via the Go server; the React app reads `/api/v1/live/*`, not OpenF1 directly.
+![box-box Command Center](docs/assets/command-center.jpg)
 
-For architecture, phase history, and design rationale, see [documentations/refactor/README.md](documentations/refactor/README.md).
+## What It Does
 
-## How it fits together
+- **Command Center**: current race-weekend home with GP identity, live status, schedule, championship leaders, and direct analysis links.
+- **Race Hub**: session workspace for overview, race story, strategy, laps, weather, race control, and dataset coverage.
+- **Live Timing**: official F1 SignalR feed bridged through the Go server to the browser via SSE.
+- **Championship View**: standings, form, teammate context, cumulative points, and a simulator.
+- **Paddock Briefing**: RSS/Atom news ingestion for a local race-weekend briefing surface.
+- **Local-first history**: OpenF1 data ingested into a SQLite domain database for fast historical browsing.
+- **Terminal Mode**: Bubble Tea TUI with standings, calendar, driver profiles, live timing, track map, battles, pit window, and replay.
 
-| Layer | Role |
-| --- | --- |
-| **OpenF1 REST** | Backfill and ingestion source; optional paid tier via `OPENF1_API_KEY`. Also powers the TUI’s on-demand reads and HTTP cache. |
-| **Domain SQLite** (`boxbox.db`) | Local store for meetings, sessions, Race Hub datasets, and navigation APIs used by the Web UI. |
-| **HTTP cache SQLite** (`cache.db`) | TTL cache for OpenF1 responses (TUI and legacy paths). Separate from the domain DB. |
-| **Official F1 SignalR** | Live timing bridge in `internal/live`, exposed to Web (SSE) and TUI. |
-| **Go server** | `cmd/main.go` — TUI, `--web` API + static SPA, or CLI ingestion. |
-| **React frontend** | `frontend/` — production build served from `frontend/dist` when present. |
-
-The Web UI should call **local-first Go APIs** (`/api/v1/...`). Do not add direct OpenF1 reads in the frontend.
-
-## Prerequisites
-
-- [Go](https://go.dev/doc/install) (see `go.mod` for the module version)
-- [Node.js](https://nodejs.org/) 18+ and npm (Web UI dev, unit tests, Playwright)
-- Internet for ingestion and TUI OpenF1 calls
-- For E2E / visual tests: `npx playwright install` (Chromium) after `npm install` at the repo root
-
-## Install
+## Quickstart
 
 ```bash
 git clone https://github.com/AmanTahiliani/box-box.git
 cd box-box
 
-npm install                    # Playwright and repo-level test scripts
-npm install --prefix frontend  # Vite + React app
-```
+npm install
+npm install --prefix frontend
 
-## Build
-
-```bash
-go build -o box-box ./cmd/main.go
-npm run build --prefix frontend   # writes frontend/dist (gitignored)
-```
-
-## Run — TUI (default)
-
-```bash
-go run ./cmd/main.go
-# or: ./box-box
-```
-
-Logs go to `box-box.log` in the project directory so the terminal stays clean.
-
-### TUI keybindings
-
-| Key | Action |
-| --- | --- |
-| `1`–`7` | Home, Standings, Calendar, Race Detail, Drivers, Live, Track Map |
-| `tab` / `shift+tab` | Next / previous tab |
-| `j`/`k`, `enter`, `b`/`esc` | Navigate, select, back |
-| `s`, `b`, `p` | Live: sectors, battles, pit window |
-| `r` | Race replay (Race Detail, race sessions) |
-| `y` | Cycle season year |
-| `q` / `ctrl+c` | Quit |
-
-## Run — Web (Go serves API + built React)
-
-Build the frontend first, then start web mode. Go walks up from the cwd to find `frontend/dist/index.html`; if missing, it serves embedded legacy assets.
-
-```bash
 npm run build --prefix frontend
 go run ./cmd/main.go --web
-# → http://localhost:8080
+# http://localhost:8080
 ```
 
-Use a specific domain database or port:
+For a local frontend development loop with seeded data, see [docs/getting-started.md](docs/getting-started.md).
 
-```bash
-go run ./cmd/main.go --web --db ~/.local/share/box-box/boxbox.db --port 8080
-```
+## Project Shape
 
-## Run — Web dev (Vite + Go API)
-
-Vite proxies `/api` to the Go server. Set `BOXBOX_API_PORT` to match the Go `--port`.
-
-**Terminal 1 — API (seeded DB is enough for UI work without ingesting):**
-
-```bash
-go run ./scripts/seed-e2e-db/main.go --db /tmp/boxbox-dev.db
-BOXBOX_DISABLE_LIVE=1 go run ./cmd/main.go --web --db /tmp/boxbox-dev.db --port 18080
-```
-
-**Terminal 2 — frontend:**
-
-```bash
-BOXBOX_API_PORT=18080 npm run dev --prefix frontend
-# default Vite port 5173 → http://localhost:5173
-```
-
-`BOXBOX_DISABLE_LIVE=1` skips starting the SignalR bridge (used in CI and local UI work).
-
-## Web routes
-
-| Route | Purpose |
+| Area | What lives there |
 | --- | --- |
-| `/` | **Command Center** — fan-facing race-weekend home with GP identity, live status, session schedule, and analysis links |
-| `/race-hub?session_key=<key>` | **Race Hub** — weekend workspace with session rail and Overview / Race Story / Strategy / Lap Data / Conditions / Race Control / Data Status tabs. Bare `/race-hub` auto-resolves to the focus session. |
-| `/admin` | **Admin / Data Health** — ingestion coverage, local data status, and suggested CLI commands |
-| `/data-library` | Legacy alias for Admin / Data Health |
-| `/live` | **Live Timing** — timing tower and race control via SSE when a session is live |
+| `cmd/main.go` | Entry point for TUI, web server, and ingestion CLI |
+| `internal/web/` | Go REST API, SSE live bridge, SPA serving |
+| `internal/live/` | Official F1 SignalR client shared by Web and TUI |
+| `internal/store/`, `internal/ingest/`, `internal/query/` | Local SQLite domain database, ingestion, and read models |
+| `internal/ui/` | Bubble Tea TUI |
+| `frontend/` | React + Vite + TypeScript web app |
+| `tests/` | Playwright e2e and visual coverage |
 
-Example after seeding: `http://localhost:5173/race-hub?session_key=9472`
+The Web UI is local-first and should call the Go APIs under `/api/v1/...`; it should not read OpenF1 directly.
 
-## Ingest historical data and briefing feeds
+## Documentation
 
-Ingestion is a **CLI mode** on the same binary. Only one of `--ingest-year`, `--ingest-meeting`, `--ingest-session`, or `--ingest-news` may be set per run.
+- [Getting Started](docs/getting-started.md): install, build, run modes, TUI keybindings, and web routes.
+- [Data and Operations](docs/data-and-operations.md): ingestion, environment variables, local files, and live timing notes.
+- [Testing](docs/testing.md): Go, frontend, e2e, and visual regression commands.
+- [Architecture Notes](documentations/refactor/README.md): deeper design rationale, data-source decisions, and phase history.
 
-```bash
-# Season: discover and store meeting metadata (2023+)
-go run ./cmd/main.go --ingest-year 2025
+## Status
 
-# Full race weekend: all sessions + Race Hub datasets
-go run ./cmd/main.go --ingest-meeting 1229
-
-# Single session only
-go run ./cmd/main.go --ingest-session 9472
-
-# Preview without writing
-go run ./cmd/main.go --dry-run --ingest-meeting 1229
-
-# Refresh Paddock Briefing RSS/Atom feeds
-go run ./cmd/main.go --ingest-news
-
-# Custom DB path (default: ~/.local/share/box-box/boxbox.db)
-go run ./cmd/main.go --ingest-meeting 1229 --db /tmp/boxbox.db
-```
-
-Use **`--ingest-meeting`** for a complete weekend. **`--ingest-year`** lists meetings for the season; ingest meetings individually or by weekend as needed. Optional analytics fetches may partially fail without aborting the whole run.
-
-## `OPENF1_API_KEY`
-
-```bash
-export OPENF1_API_KEY=your_key_here
-go run ./cmd/main.go --web
-```
-
-Without a key, the free OpenF1 tier is used. A key may be required for paid-tier behavior (e.g. live session access during API lockouts). Ingestion and TUI calls use the same client.
-
-## Local files
-
-| Path | Purpose |
-| --- | --- |
-| `~/.local/share/box-box/boxbox.db` | Domain database (default `--db`) |
-| `~/.cache/box-box/cache.db` | OpenF1 HTTP response cache (TUI / client) |
-| `box-box.log` | TUI application log (project root) |
-| `frontend/dist/` | Production React build (**gitignored** — build locally, do not commit) |
-| `.playwright/*.db` | Seeded DBs for automated tests |
-
-Web mode logs to **stderr**.
-
-## Tests and QA
-
-### Go (targeted packages)
-
-```bash
-go test ./internal/live ./internal/models ./internal/store ./internal/ingest ./internal/query ./internal/web
-```
-
-All packages: `go test ./...`
-
-OpenF1 integration tests (network, rate-limit aware): `go test -v ./internal/api`
-
-### Frontend unit tests and build
-
-```bash
-npm --prefix frontend test -- --run
-npm --prefix frontend run build
-```
-
-### E2E (Vite dev proxy + seeded API)
-
-Starts seeded Go on port `18080` and Vite on `15173` (see `playwright.config.ts`).
-
-```bash
-npx playwright install   # first time only
-npm run test:e2e
-```
-
-### E2E production (Go serves `frontend/dist`)
-
-```bash
-npm run test:e2e:prod
-```
-
-### Visual regression (screenshots)
-
-```bash
-npm run test:visual          # dev proxy stack
-npm run test:visual:prod     # production serving (canonical baselines)
-
-# after intentional UI changes
-npm run test:visual:update
-npm run test:visual:prod:update
-```
-
-Snapshots live under `tests/visual/__snapshots__/`.
-
-## Known limitations
-
-- **Live timing** only works when F1 is broadcasting timing data; there is no guaranteed live session for local dev.
-- **E2E / visual tests** use `BOXBOX_DISABLE_LIVE=1` and seeded SQLite — they do not exercise full SignalR live behavior.
-- **`frontend/dist`** is generated output; build before production web mode or `test:e2e:prod`.
-- **TUI historical views** still use OpenF1 on demand with the HTTP cache; the Web UI’s local-first model does not fully replace the TUI yet.
-- **`--ingest-year`** stores season meetings, not full session datasets — use `--ingest-meeting` or `--ingest-session` for Race Hub data.
+Pre-beta and actively developed. The Web UI is the primary surface; the TUI is preserved and still useful for terminal workflows. Live timing depends on F1 broadcasting timing data, so it is only fully active during live sessions.
 
 ## License
 
 MIT © [Aman Tahiliani](https://github.com/AmanTahiliani)
 
----
-
 *Unofficial project; not associated with Formula 1 or the FIA.*

cmd/main.go

@@ -27,6 +27,7 @@ func main() {
 	ingestMeeting := flag.Int("ingest-meeting", 0, "Ingest meeting metadata and Race Hub datasets for all sessions")
 	ingestSession := flag.Int("ingest-session", 0, "Ingest Race Hub datasets for a session key")
 	ingestNews := flag.Bool("ingest-news", false, "Refresh RSS/Atom paddock briefing feeds")
+	prefetchTrackOutlines := flag.Int("prefetch-track-outlines", 0, "Warm the web track-outline cache for a season year (for web-only hosts, run before --web so /api/v1/track-outline can serve live maps)")
 	dryRun := flag.Bool("dry-run", false, "Preview ingestion without writing domain rows")
 	force := flag.Bool("force", false, "Re-ingest datasets even if already tracked in the session_coverage table as completed")
 	coverageYear := flag.Int("coverage", 0, "Show season coverage report for the given year")
@@ -76,11 +77,21 @@ func main() {
 	if *ingestNews {
 		ingestFlags++
 	}
+	if *prefetchTrackOutlines != 0 {
+		ingestFlags++
+	}
 	if ingestFlags > 0 {
 		if ingestFlags > 1 {
-			fmt.Fprintln(os.Stderr, "box-box: only one of --ingest-year, --backfill-season, --ingest-meeting, --ingest-session, or --ingest-news may be set")
+			fmt.Fprintln(os.Stderr, "box-box: only one of --ingest-year, --backfill-season, --ingest-meeting, --ingest-session, --ingest-news, or --prefetch-track-outlines may be set")
 			os.Exit(1)
 		}
+		if *prefetchTrackOutlines != 0 {
+			if err := runTrackOutlinePrefetch(client, *prefetchTrackOutlines); err != nil {
+				fmt.Fprintf(os.Stderr, "box-box track outline prefetch error: %v\n", err)
+				os.Exit(1)
+			}
+			return
+		}
 		if *ingestNews {
 			if err := runNewsIngestion(*dryRun, *dbPath); err != nil {
 				fmt.Fprintf(os.Stderr, "box-box ingest error: %v\n", err)
@@ -88,7 +99,7 @@ func main() {
 			}
 			return
 		}
-		
+
 		yearVal := *ingestYear
 		if *backfillSeason != 0 {
 			yearVal = *backfillSeason
@@ -174,6 +185,35 @@ func runIngestion(client *api.OpenF1Client, year, meetingKey, sessionKey int, fo
 	return err
 }
 
+func runTrackOutlinePrefetch(client *api.OpenF1Client, year int) error {
+	log.SetOutput(os.Stderr)
+
+	fmt.Fprintf(os.Stderr, "track outlines: warming HTTP cache %s for %d\n", api.DefaultCacheDBPath(), year)
+
+	meetings, err := client.GetMeetingsForYear(year)
+	if err != nil {
+		return fmt.Errorf("fetch meetings for %d: %w", year, err)
+	}
+
+	result := client.PrefetchTrackOutlinesForYear(year, meetings)
+	fmt.Printf(
+		"track outlines %d: cached %d/%d unique circuit(s) before, %d/%d after; %d skipped, %d fetched, %d failed\n",
+		result.Year,
+		result.CachedBefore,
+		result.UniqueCircuits,
+		result.CachedAfter,
+		result.UniqueCircuits,
+		result.Skipped,
+		result.Fetched,
+		result.Failed,
+	)
+
+	if result.CachedAfter == 0 {
+		return fmt.Errorf("cached zero track outlines for %d", year)
+	}
+	return nil
+}
+
 func runNewsIngestion(dryRun bool, dbPath string) error {
 	log.SetOutput(os.Stderr)
 
@@ -275,7 +315,7 @@ func runCoverageReport(year int, dbPath string) error {
 	}
 
 	fmt.Printf("\n--- Season %d Coverage Report ---\n\n", year)
-	fmt.Printf("%-35s | %-5s | %-2s | %-2s | %-2s | %-2s | %-2s | %-2s | %-2s | %-2s | %-2s\n", 
+	fmt.Printf("%-35s | %-5s | %-2s | %-2s | %-2s | %-2s | %-2s | %-2s | %-2s | %-2s | %-2s\n",
 		"Meeting / Session (Key)", "ID", "DR", "SR", "SG", "ST", "PS", "PO", "RC", "WE", "LA")
 	fmt.Println(strings.Repeat("-", 82))
 

docs/PRODUCT_ROADMAP.md

@@ -0,0 +1,198 @@
+# box-box — Product & UX Roadmap
+
+> An F1-geek + product/UX analysis of box-box as an F1 companion, and a
+> prioritized plan to make it richer than "data in tables" — for both live race
+> weekends and the quiet stretch between rounds.
+
+## Where the app is today (honest read)
+
+box-box has a strong data layer with two front doors (TUI + web) and six web
+surfaces:
+
+| Surface | What it does today | Where it's thin |
+|---|---|---|
+| **Command Center** (`/`) | Hero weekend + countdown, season calendar, championship snapshot, weekend schedule, news | Strong launcher, but tells you *when*, rarely *what to care about*. It's a menu, not a companion |
+| **Race Hub** (`/race-hub`) | Per-session tabs: Overview, Race Story (position-evolution scrubber), Strategy (stints), Laps, Conditions, Race Control | `RaceStoryCanvas` is the best "beyond tables" work in the app. Everything else is still tables |
+| **Live Timing** (`/live`) | SSE timing tower, battle chips, gap sparklines, pinned drivers, RC feed | Solid tower, but it's "a spreadsheet that updates" — no track map, no telemetry, no "what just happened" |
+| **Championship** (`/championship`) | Standings + hub stats (wins/poles/form) + points simulator | Good; the simulator is a genuine differentiator |
+| **Briefing** (`/briefing`) | 7 RSS feeds (FIA, BBC, Autosport, RaceFans, Guardian, RACER, F1 YouTube) + readability extraction | Passive reading list, not tied to the season narrative |
+| **Data Library** (`/admin`) | Ingestion / coverage admin | Fine as-is |
+
+**Biggest finding:** the app already *pulls* the richest data in F1 — GPS
+`Location`, full car telemetry (throttle / brake / DRS / gear / rpm / speed),
+team-radio audio, mini-sector `Segments`, speed traps, overtakes — and the web
+app visualizes almost none of it. The **track map exists only in the TUI**
+(`internal/ui/trackmap.go`); telemetry is fetched and shown to nobody. This is a
+large latent asset.
+
+## Core product thesis
+
+An F1 companion serves two different jobs; the app currently treats them the same
+(data, in tables, per session):
+
+1. **On a race weekend — the "second screen."** The user is watching the
+   broadcast (or can't, and wants to *feel* it). They want: what's happening now,
+   why it matters, what to watch next. The broadcast supplies emotion; box-box
+   should supply **the data the broadcast doesn't show** — the delta the director
+   cut away from, the undercut developing, the tyre cliff approaching.
+
+2. **Between races — "understand the season."** No live action. The user wants to
+   make sense of what happened and anticipate what's next: rewatch the story of
+   the last race, argue strategy, track the title fight, get smart before the next
+   round.
+
+Everything below makes each job *feel* like a companion instead of a database.
+
+---
+
+## Race-weekend experience ("second screen")
+
+### 1. Live Track Map — highest-leverage missing feature
+Port the TUI's GPS outline (`trackmap.go`, `GetLocation`) to a web SVG dot-map:
+cars as team-colored dots on the circuit outline, DRS zones highlighted, sectors
+tinted by status. Turn mini-sectors purple/green live using the `Segments` data
+already fetched. Tap a car → mini-telemetry readout. This is what turns "updating
+spreadsheet" into "I'm watching the race."
+
+### 2. "What just happened" synthesized event rail — the companion voice
+Combine Race Control + overtakes + pit stops + position deltas into plain-English
+beats: *"LAP 34 — VER pits (2.4s), rejoins P4 behind NOR — undercut on RUS is
+live."* The inputs all exist; this is a synthesis layer, not new data. It's the
+difference between *data* and *commentary*.
+
+### 3. Telemetry compare overlay
+On the tower / a driver panel, pick two drivers → overlaid speed/throttle/brake
+traces + delta-time graph for their last comparable lap. *The* tifosi feature —
+"where did Leclerc lose the lap." `/api/v1/laps/comparison` + car data already
+exist; this needs a chart, not a table.
+
+### 4. Live strategy / tyre-degradation view
+Stints + tyre age + pit-lane times → live pit window and tyre-cliff panel, with
+**undercut/overcut threat** indicators from gap-to-car-behind vs. pit-loss time.
+The pit-window calculator exists in the TUI (`pitwindow.go`); bring it to the web
+and make it live.
+
+### 5. Team radio, surfaced
+`GetTeamRadio` returns audio clips. Add a "Radio" ticker on the live page — play
+button + driver + timestamp. Peak emotional content, and no rival dashboard has it
+inline.
+
+### 6. Session-aware Command Center
+When a session is live, the home hero should pull the top battles, leader gap, and
+last RC flag onto the front page instead of only saying "LIVE." Make the front
+page reactive to the moment.
+
+---
+
+## Between-races experience ("understand the season")
+
+### 7. Race replay as a first-class story
+Grow `RaceStoryCanvas` from a scrubber into a narrative replay: auto-generated
+"chapters" (start, first pit phase, VSC, decisive overtake, finish) with a
+headline each (derived from RC + position swings), and scrub the position graph
+and track map together. The "watch the race in 90 seconds" mode that makes people
+open the app on a Tuesday.
+
+### 8. Driver pages + rivalry view (a real gap)
+No driver profile exists in the web app. Add a **driver page** (season form,
+teammate H2H — already computed in the champ hub — quali vs. race pace, tyre
+management, track-by-track) and a **rivalry view** (two drivers → cumulative
+points, H2H, gap-over-season). Feeds the argument every fan has.
+
+### 9. Next-race preview / "get smart" page
+Between races the app goes quiet. Fill it: circuit characteristics, last year's
+result (2023/24 is cached), typical strategy (1 vs 2 stop), DRS zones, weather
+outlook, and the storylines (title-fight math to watch). Turn dead air into
+anticipation.
+
+### 10. Championship scenario narratives
+Extend the simulator from "drag points around" to narrative permutations:
+*"VER clinches if he outscores NOR by 9 this weekend"* / *"first race McLaren can
+seal constructors'."* The stuff fans actually search for.
+
+### 11. Briefing → calendar-aware season digest
+Reframe the news reader into a paddock digest tied to the calendar: group by GP,
+tag by team/driver, surface a "since last race" summary. Optionally an
+LLM-generated weekly briefing (a `claude-haiku` summarization pass over ingested
+RSS — cheap and on-brand).
+
+---
+
+## New / better data sources
+
+- **Jolpica (Ergast successor, `api.jolpi.ca`)** — free historical results back to
+  1950: qualifying, pit stops, lap times, circuit metadata. Unlocks all-time
+  records, "best-ever at this track," and career stats OpenF1 (2023+) can't give.
+  High value for driver pages and the "get smart" preview.
+- **OpenF1 weather timeseries** — already fetched; plot it as a session-long strip
+  (track temp / rain / wind) instead of a table. Weather narrates strategy.
+- **Circuit metadata / DRS zones / corner names** — enriches the track map and
+  previews. Some is in OpenF1 circuit info; curate the rest once as static data.
+- **Static per-race context** — a tiny curated JSON per round (tyre allocation,
+  notable stats) goes a long way for previews.
+
+---
+
+## Cross-cutting UX principles
+
+1. **Replace tables with a shape wherever a shape carries the meaning.** Lap times
+   → a trace with fastest lap marked. Stints → a horizontal tyre timeline. Gaps →
+   the sparkline already shipped. Keep tables only where data is genuinely tabular
+   (standings) — but annotate them.
+2. **Always answer "so what?"** Every number sits next to its meaning (a gap next
+   to "undercut live," a tyre age next to "5 laps from the cliff").
+3. **One primary "moment" per screen.** The Command Center should always have a
+   single obvious "here's what to watch/do now."
+4. **Make between-races feel alive.** The app currently rewards you only on
+   Sundays. Previews, digests, replays, and rivalries give a reason to open it
+   midweek.
+
+---
+
+## Suggested sequencing (impact × effort)
+
+**Phase 1 — turn live into a companion (highest impact; data already in hand)**
+1. Web track map (SVG + GPS + mini-sectors)
+2. Telemetry compare overlay (speed/throttle/brake + delta)
+3. "What just happened" synthesized event rail
+4. Team radio ticker
+
+**Phase 2 — own the between-races window**
+5. Narrative race replay (grow `RaceStoryCanvas`)
+6. Driver pages + rivalry view
+7. Next-race preview page
+
+**Phase 3 — depth & reach**
+8. Jolpica/Ergast historical integration + all-time records
+9. Championship scenario narratives
+10. Calendar-aware briefing digest (optional LLM summaries)
+
+---
+
+## Execution tracking (GitHub)
+
+This roadmap is tracked on GitHub:
+
+- **Project board:** https://github.com/users/AmanTahiliani/projects/2 ("box-box Roadmap")
+- **Epics:** issues #2–#8 (label `epic`), one per epic above, on Phase milestones
+- **Stories:** issues #9–#31, wired as native **sub-issues** under their epic (progress rolls up automatically)
+- **Labels:** `epic`, `enabler`, `research`, `area:{live,viz,between-races,championship,data,ux}`
+- **Milestones:** `Phase 1 — Live Companion`, `Phase 2 — Between-Races`, `Phase 3 — Depth & Reach`
+
+**Board fields:** `Stage` (Icebox → Research → Ready → In Progress → In Review → Done),
+`Priority` (P0–P2), `Effort` (S/M/L), `Phase` (1–3).
+
+**Working model — active vs. bank:**
+- Only **1–2 epics active** at a time (currently **E1 Live Race Companion** + **E2 Viz
+  Primitives**); the other five epics are the theme-level idea bank.
+- `Stage = Icebox` is the story-level bank. The 10 E1/E2 stories are seeded to
+  `Ready`; everything else is `Icebox`. Promote a handful to `Ready`/`In Progress`
+  per cycle; use `Research` to scope a vague idea before it's `Ready`.
+**Board views** (built):
+- **Backlog** — Table, all epics with expandable sub-issues: the full bank.
+- **Board** — grouped by `Stage`, filtered `-stage:Icebox`: the active-WIP wall.
+- **Roadmap** — Table grouped by `Phase` (Phase 1/2/3). Note: this is a
+  phase-grouped table, not a timeline. A true timeline roadmap needs a date or
+  iteration field (GitHub won't draw/persist a roadmap layout without one); add a
+  `Target date` field and populate it once phases have real target dates, then
+  switch this view to the Roadmap layout.

docs/data-and-operations.md

@@ -0,0 +1,75 @@
+# Data and Operations
+
+## Data Flow
+
+| Layer | Role |
+| --- | --- |
+| OpenF1 REST | Backfill and ingestion source; optional paid tier via `OPENF1_API_KEY`. Also powers the TUI's on-demand reads and HTTP cache. |
+| Domain SQLite (`boxbox.db`) | Local store for meetings, sessions, Race Hub datasets, and navigation APIs used by the Web UI. |
+| HTTP cache SQLite (`cache.db`) | TTL cache for OpenF1 responses used by the TUI and legacy paths. Separate from the domain DB. |
+| Official F1 SignalR | Live timing bridge in `internal/live`, exposed to Web via SSE and to the TUI. |
+| Go server | `cmd/main.go`: TUI, `--web` API + static SPA, or CLI ingestion. |
+| React frontend | `frontend/`: production build served from `frontend/dist` when present. |
+
+The Web UI should call local-first Go APIs under `/api/v1/...`; do not add direct OpenF1 reads in the frontend.
+
+## Ingest Historical Data and Briefing Feeds
+
+Ingestion is a CLI mode on the same binary. Only one of `--ingest-year`, `--ingest-meeting`, `--ingest-session`, or `--ingest-news` may be set per run.
+
+```bash
+# Season: discover and store meeting metadata for 2023+
+go run ./cmd/main.go --ingest-year 2025
+
+# Full race weekend: all sessions + Race Hub datasets
+go run ./cmd/main.go --ingest-meeting 1229
+
+# Single session only
+go run ./cmd/main.go --ingest-session 9472
+
+# Preview without writing
+go run ./cmd/main.go --dry-run --ingest-meeting 1229
+
+# Refresh Paddock Briefing RSS/Atom feeds
+go run ./cmd/main.go --ingest-news
+
+# Custom DB path
+go run ./cmd/main.go --ingest-meeting 1229 --db /tmp/boxbox.db
+```
+
+Use `--ingest-meeting` for a complete weekend. `--ingest-year` stores season meetings, not full session datasets. Optional analytics fetches may partially fail without aborting the whole run.
+
+## Environment Variables
+
+| Variable | Purpose |
+| --- | --- |
+| `OPENF1_API_KEY` | Optional Bearer token for paid OpenF1 behavior. |
+| `BOXBOX_DISABLE_LIVE=1` | Skip the background SignalR live feed in web mode. Used by CI and local seeded UI work. |
+| `BOXBOX_OPENF1_BASE_URL` | Override the OpenF1 API root. Defaults to `https://api.openf1.org`. |
+| `BOXBOX_API_PORT` | Go API port used by the Vite dev proxy. Defaults to `8080`. |
+
+Example:
+
+```bash
+export OPENF1_API_KEY=your_key_here
+go run ./cmd/main.go --web
+```
+
+## Local Files
+
+| Path | Purpose |
+| --- | --- |
+| `~/.local/share/box-box/boxbox.db` | Domain database, default `--db`. |
+| `~/.cache/box-box/cache.db` | OpenF1 HTTP response cache for the TUI and client. |
+| `box-box.log` | TUI application log in the project root. |
+| `frontend/dist/` | Production React build. Generated output, do not commit. |
+| `.playwright/*.db` | Seeded databases for automated tests. |
+
+Web mode logs to stderr.
+
+## Known Limitations
+
+- Live timing only works when F1 is broadcasting timing data; there is no guaranteed live session for local development.
+- E2E and visual tests use `BOXBOX_DISABLE_LIVE=1` and seeded SQLite, so they do not exercise full SignalR live behavior.
+- `frontend/dist` is generated output; build before production web mode or `test:e2e:prod`.
+- TUI historical views still use OpenF1 on demand with the HTTP cache; the Web UI's local-first model does not fully replace the TUI yet.

docs/getting-started.md

@@ -0,0 +1,94 @@
+# Getting Started
+
+## Prerequisites
+
+- [Go](https://go.dev/doc/install), using the module version in `go.mod`.
+- [Node.js](https://nodejs.org/) 18+ and npm.
+- Internet access for ingestion and TUI OpenF1 calls.
+- For e2e and visual tests: `npx playwright install` after `npm install` at the repo root.
+
+## Install
+
+```bash
+git clone https://github.com/AmanTahiliani/box-box.git
+cd box-box
+
+npm install                    # Playwright and repo-level test scripts
+npm install --prefix frontend  # Vite + React app
+```
+
+## Build
+
+```bash
+go build -o box-box ./cmd/main.go
+npm run build --prefix frontend   # writes frontend/dist
+```
+
+## Run: Web
+
+Build the frontend first, then start web mode. Go walks up from the current directory to find `frontend/dist/index.html`; if missing, it serves embedded legacy assets.
+
+```bash
+npm run build --prefix frontend
+go run ./cmd/main.go --web
+# http://localhost:8080
+```
+
+Use a specific domain database or port:
+
+```bash
+go run ./cmd/main.go --web --db ~/.local/share/box-box/boxbox.db --port 8080
+```
+
+## Run: Web Dev
+
+Vite proxies `/api` to the Go server. Set `BOXBOX_API_PORT` to match the Go `--port`.
+
+Terminal 1: API with a seeded database:
+
+```bash
+go run ./scripts/seed-e2e-db/main.go --db /tmp/boxbox-dev.db
+BOXBOX_DISABLE_LIVE=1 go run ./cmd/main.go --web --db /tmp/boxbox-dev.db --port 18080
+```
+
+Terminal 2: frontend:
+
+```bash
+BOXBOX_API_PORT=18080 npm run dev --prefix frontend
+# http://localhost:5173
+```
+
+`BOXBOX_DISABLE_LIVE=1` skips starting the SignalR bridge, which is useful for CI and local UI work.
+
+## Run: TUI
+
+```bash
+go run ./cmd/main.go
+# or: ./box-box
+```
+
+Logs go to `box-box.log` in the project directory so the terminal stays clean.
+
+## TUI Keybindings
+
+| Key | Action |
+| --- | --- |
+| `1`-`7` | Home, Standings, Calendar, Race Detail, Drivers, Live, Track Map |
+| `tab` / `shift+tab` | Next / previous tab |
+| `j`/`k`, `enter`, `b`/`esc` | Navigate, select, back |
+| `s`, `b`, `p` | Live: sectors, battles, pit window |
+| `r` | Race replay in Race Detail race sessions |
+| `y` | Cycle season year |
+| `q` / `ctrl+c` | Quit |
+
+## Web Routes
+
+| Route | Purpose |
+| --- | --- |
+| `/` | Command Center: race-weekend home with GP identity, live status, schedule, and analysis links |
+| `/race-hub?session_key=<key>` | Race Hub: session workspace with Overview, Race Story, Strategy, Lap Data, Conditions, Race Control, and Data Status tabs |
+| `/admin` | Admin / Data Health: ingestion coverage, local data status, and suggested CLI commands |
+| `/data-library` | Legacy alias for Admin / Data Health |
+| `/live` | Live Timing: timing tower and race control via SSE when a session is live |
+
+Example after seeding: `http://localhost:5173/race-hub?session_key=9472`.

docs/testing.md

@@ -0,0 +1,59 @@
+# Testing
+
+## Go
+
+Targeted offline-ish packages:
+
+```bash
+go test ./internal/live ./internal/models ./internal/store ./internal/ingest ./internal/query ./internal/web
+```
+
+All packages:
+
+```bash
+go test ./...
+```
+
+OpenF1 integration tests require network access and are rate-limit aware:
+
+```bash
+go test -v ./internal/api
+```
+
+## Frontend Unit Tests and Build
+
+```bash
+npm --prefix frontend test -- --run
+npm --prefix frontend run build
+```
+
+## E2E
+
+The default Playwright config starts a seeded Go server on port `18080` and Vite on `15173`.
+
+```bash
+npx playwright install   # first time only
+npm run test:e2e
+```
+
+Production serving mode builds around Go serving `frontend/dist`:
+
+```bash
+npm run test:e2e:prod
+```
+
+## Visual Regression
+
+```bash
+npm run test:visual
+npm run test:visual:prod
+```
+
+After intentional UI changes:
+
+```bash
+npm run test:visual:update
+npm run test:visual:prod:update
+```
+
+Snapshots live under `tests/visual/__snapshots__/`.

frontend/src/api.ts

@@ -1,11 +1,18 @@
 import type {
   ArticleContent,
+  CarDataSample,
   ChampionshipHub,
+  DriverSummary,
+  EnrichedGrid,
+  EnrichedResult,
+  LapsComparisonResponse,
   LiveStateResponse,
+  LiveSessionMeta,
   Meeting,
   NewsItem,
   RaceHub,
   Session,
+  TrackOutline,
   Weekend,
 } from './types'
 
@@ -36,7 +43,11 @@ export async function fetchLocalMeetings(year: number): Promise<Meeting[]> {
 }
 
 export async function fetchSeasonMeetings(year: number): Promise<Meeting[]> {
-  const res = await fetch(`/api/v1/meetings?year=${year}&source=openf1`)
+  return fetchMeetings(year, 'openf1')
+}
+
+export async function fetchMeetings(year: number, source = 'auto'): Promise<Meeting[]> {
+  const res = await fetch(`/api/v1/meetings?year=${year}&source=${source}`)
   if (!res.ok) {
     throw new Error(`API ${res.status}: ${res.statusText}`)
   }
@@ -44,6 +55,32 @@ export async function fetchSeasonMeetings(year: number): Promise<Meeting[]> {
   return Array.isArray(meetings) ? meetings : []
 }
 
+export async function fetchResults(sessionKey: number, source = 'auto'): Promise<EnrichedResult[]> {
+  const res = await fetch(`/api/v1/results?session_key=${sessionKey}&source=${source}`)
+  if (!res.ok) {
+    throw new Error(`API ${res.status}: ${res.statusText}`)
+  }
+  const results = await res.json()
+  return Array.isArray(results) ? results : []
+}
+
+export async function fetchStartingGrid(sessionKey: number, source = 'auto'): Promise<EnrichedGrid[]> {
+  const res = await fetch(`/api/v1/grid?session_key=${sessionKey}&source=${source}`)
+  if (!res.ok) {
+    throw new Error(`API ${res.status}: ${res.statusText}`)
+  }
+  const grid = await res.json()
+  return Array.isArray(grid) ? grid : []
+}
+
+export async function fetchTrackOutline(circuitKey: number, year: number): Promise<TrackOutline | null> {
+  const res = await fetch(`/api/v1/track-outline?circuit_key=${circuitKey}&year=${year}`)
+  if (!res.ok) return null
+  const data = await res.json()
+  if (data?.error || !Array.isArray(data?.points) || data.points.length < 2) return null
+  return data as TrackOutline
+}
+
 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) {
@@ -72,6 +109,19 @@ export async function fetchChampionshipHub(year?: number): Promise<ChampionshipH
   return res.json()
 }
 
+export async function fetchDriverSummary(
+  driverNumber: number,
+  year?: number,
+): Promise<DriverSummary> {
+  const params = new URLSearchParams({ driver_number: String(driverNumber) })
+  if (year) params.set('year', String(year))
+  const res = await fetch(`/api/v1/driver/summary?${params.toString()}`)
+  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) {
@@ -80,6 +130,20 @@ export async function fetchLiveState(): Promise<LiveStateResponse> {
   return res.json()
 }
 
+export async function fetchLiveTrackOutline(
+  session: LiveSessionMeta,
+  year = new Date().getFullYear(),
+): Promise<TrackOutline> {
+  const params = new URLSearchParams({ year: year.toString() })
+  if (session.MeetingName) params.set('meeting_name', session.MeetingName)
+  if (session.CircuitName) params.set('circuit_name', session.CircuitName)
+  const res = await fetch(`/api/v1/track-outline?${params.toString()}`)
+  if (!res.ok) {
+    throw new Error(`API ${res.status}: ${res.statusText}`)
+  }
+  return res.json()
+}
+
 export async function fetchNews(limit?: number, source?: string): Promise<NewsItem[]> {
   const params = new URLSearchParams()
   if (limit) params.set('limit', limit.toString())
@@ -110,3 +174,32 @@ export async function markNewsRead(articleUrl: string): Promise<void> {
     body: JSON.stringify({ url: articleUrl }),
   })
 }
+
+export async function fetchTelemetry(
+  sessionKey: number,
+  driverNumber: number,
+): Promise<CarDataSample[]> {
+  const res = await fetch(
+    `/api/v1/telemetry?session_key=${sessionKey}&driver_number=${driverNumber}`,
+  )
+  if (!res.ok) {
+    throw new Error(`API ${res.status}: ${res.statusText}`)
+  }
+  const data = await res.json()
+  return Array.isArray(data) ? data : []
+}
+
+export async function fetchLapsComparison(
+  sessionKey: number,
+  drivers?: number[],
+): Promise<LapsComparisonResponse> {
+  const params = new URLSearchParams({ session_key: String(sessionKey) })
+  if (drivers?.length) {
+    params.set('drivers', drivers.join(','))
+  }
+  const res = await fetch(`/api/v1/laps/comparison?${params}`)
+  if (!res.ok) {
+    throw new Error(`API ${res.status}: ${res.statusText}`)
+  }
+  return res.json()
+}

frontend/src/components/CommandCenterHero.tsx

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

frontend/src/components/CompareView.tsx

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

frontend/src/components/Meaning.tsx

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

frontend/src/components/Nav.tsx

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

frontend/src/components/RaceHubHeader.tsx

@@ -10,6 +10,7 @@ interface Props {
 function SourceBadge({ source }: { source: RaceHub['source'] }) {
   if (source === 'local') return <span className="badge badge-local">Local</span>
   if (source === 'partial') return <span className="badge badge-partial">Partial</span>
+  if (source === 'cancelled') return <span className="badge badge-cancelled">Cancelled</span>
   return <span className="badge badge-none">No data</span>
 }
 

frontend/src/components/SourceBadge.tsx

@@ -1,4 +1,4 @@
-type Source = 'local' | 'partial' | 'none'
+type Source = 'local' | 'partial' | 'none' | 'cancelled'
 
 interface Props {
   source: Source
@@ -11,6 +11,8 @@ export function SourceBadge({ source, label }: Props) {
       return <span className="badge badge-local">{label ?? 'Local'}</span>
     case 'partial':
       return <span className="badge badge-partial">{label ?? 'Partial'}</span>
+    case 'cancelled':
+      return <span className="badge badge-cancelled">{label ?? 'Cancelled'}</span>
     default:
       return <span className="badge badge-none">{label ?? 'None'}</span>
   }
@@ -22,6 +24,8 @@ export function weekendStatusLabel(source: Source): string {
       return 'Full'
     case 'partial':
       return 'Partial'
+    case 'cancelled':
+      return 'Cancelled'
     default:
       return 'Missing'
   }

frontend/src/components/StrategyView.tsx

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

frontend/src/components/TabBar.tsx

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

frontend/src/components/charts/DeltaTimeGraph.tsx

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

frontend/src/components/charts/TelemetryTraceChart.tsx

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

frontend/src/components/charts/TyreStintTimeline.tsx

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

frontend/src/components/live/EventRail.tsx

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

frontend/src/components/live/SessionBanner.tsx

@@ -1,17 +1,24 @@
 import type { LiveStreamData } from '../../types'
-import { extrapolateClock } from '../../lib/live'
+import type { LiveTimingRow } from '../../lib/live'
+import { extrapolateClock, liveSessionDisplay } from '../../lib/live'
 import { WeatherStrip } from './WeatherStrip'
 
 interface Props {
   isLive: boolean
+  isArchive?: boolean
   snapshot: LiveStreamData
+  rows: LiveTimingRow[]
   connection: 'connected' | 'connecting' | 'disconnected' | 'error'
   now: number
 }
 
-export function SessionBanner({ isLive, snapshot, connection, now }: Props) {
+export function SessionBanner({ isLive, isArchive = false, snapshot, rows, connection, now }: Props) {
   const session = snapshot.Session
   const clock = extrapolateClock(snapshot.Clock, snapshot.ClockRefTime, snapshot.ClockExtrapolating, now)
+  const display = liveSessionDisplay(session, rows)
+  const atRiskLabel =
+    display.atRiskStart && display.atRiskEnd ? `P${display.atRiskStart}-P${display.atRiskEnd} at risk` : ''
+  const stateLabel = isLive ? 'live' : isArchive ? 'archive' : 'stale'
 
   return (
     <section className="live-banner">
@@ -25,12 +32,17 @@ export function SessionBanner({ isLive, snapshot, connection, now }: Props) {
             </p>
           </div>
         </div>
-        <div className="live-banner-meta">
-          <span className="mono">
-            L<strong>{snapshot.CurrentLap || '-'}</strong>/<strong>{snapshot.TotalLaps || '-'}</strong>
-          </span>
-          {clock && <span className="mono">{clock}</span>}
-          <span className={isLive ? 'live-state live-state-on' : 'live-state'}>{isLive ? 'live' : 'stale'}</span>
+        <div className="live-session-board">
+          {display.phaseLabel && <span className="live-phase-pill mono">{display.phaseLabel}</span>}
+          <div className="live-clock mono" data-testid="live-clock">{clock || '--:--:--'}</div>
+          <div className="live-banner-meta">
+            {display.advanceCount && <span>{display.advanceCount} advance</span>}
+            {atRiskLabel && <span>{atRiskLabel}</span>}
+            <span>
+              L<strong>{snapshot.CurrentLap || '-'}</strong>/<strong>{snapshot.TotalLaps || '-'}</strong>
+            </span>
+            <span className={isLive ? 'live-state live-state-on' : 'live-state'}>{stateLabel}</span>
+          </div>
         </div>
       </div>
       <WeatherStrip weather={snapshot.Weather} />

frontend/src/components/live/TeamRadioTicker.tsx

@@ -0,0 +1,108 @@
+import { useMemo, useRef, useState } from 'react'
+import { Pause, Play } from 'lucide-react'
+import type { LiveDriverInfo, LiveRadioCapture, LiveSessionMeta } from '../../types'
+import { radioCaptureKey, radioClipUrl } from '../../lib/radio'
+import { teamColor } from '../../utils'
+import '../../styles/team-radio.css'
+
+interface Props {
+  captures?: LiveRadioCapture[]
+  driverInfo?: Record<string, LiveDriverInfo>
+  session?: LiveSessionMeta
+}
+
+function relativeTime(utc: string): string {
+  const timestamp = new Date(utc).getTime()
+  if (!utc || Number.isNaN(timestamp)) return '--'
+
+  const diffSeconds = Math.max(0, Math.floor((Date.now() - timestamp) / 1000))
+  if (diffSeconds < 60) return `${diffSeconds}s ago`
+  const minutes = Math.floor(diffSeconds / 60)
+  if (minutes < 60) return `${minutes}m ago`
+  const hours = Math.floor(minutes / 60)
+  if (hours < 24) return `${hours}h ago`
+  return new Date(utc).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+}
+
+function driverLabel(info: LiveDriverInfo | undefined, racingNumber: string): string {
+  return info?.Tla || racingNumber
+}
+
+export function TeamRadioTicker({ captures = [], driverInfo = {}, session }: Props) {
+  const audioRef = useRef<HTMLAudioElement | null>(null)
+  const [playingKey, setPlayingKey] = useState<string | null>(null)
+
+  const newestFirst = useMemo(() => [...captures].reverse(), [captures])
+
+  const toggleCapture = (capture: LiveRadioCapture) => {
+    const key = radioCaptureKey(capture)
+    const audio = audioRef.current
+    const url = radioClipUrl(session, capture)
+    if (!audio || !url) return
+
+    if (playingKey === key) {
+      audio.pause()
+      setPlayingKey(null)
+      return
+    }
+
+    audio.pause()
+    audio.src = url
+    setPlayingKey(key)
+    const play = audio.play()
+    if (play) {
+      play.catch(() => setPlayingKey(null))
+    }
+  }
+
+  return (
+    <section className="team-radio panel-glass" data-testid="team-radio-ticker">
+      <div className="sec-header sticky-header">
+        <span className="sec-title">Team Radio</span>
+        {captures.length > 0 && <span className="sec-meta">{captures.length} clips</span>}
+      </div>
+
+      <audio
+        ref={audioRef}
+        className="team-radio-audio"
+        onEnded={() => setPlayingKey(null)}
+      />
+
+      {newestFirst.length === 0 ? (
+        <div className="missing-notice">No team radio clips in the current live snapshot.</div>
+      ) : (
+        <div className="team-radio-list">
+          {newestFirst.map((capture) => {
+            const key = radioCaptureKey(capture)
+            const info = driverInfo[capture.RacingNumber]
+            const label = driverLabel(info, capture.RacingNumber)
+            const isPlaying = playingKey === key
+            const url = radioClipUrl(session, capture)
+
+            return (
+              <div className="team-radio-row" key={key}>
+                <button
+                  className="team-radio-play"
+                  type="button"
+                  aria-label={`${isPlaying ? 'Pause' : 'Play'} ${label} radio`}
+                  disabled={!url}
+                  onClick={() => toggleCapture(capture)}
+                >
+                  {isPlaying ? <Pause size={14} /> : <Play size={14} />}
+                </button>
+                <span
+                  className="team-radio-driver"
+                  style={{ borderColor: teamColor(info?.TeamColour) }}
+                  title={info?.TeamName || undefined}
+                >
+                  {label}
+                </span>
+                <span className="team-radio-time">{relativeTime(capture.Utc)}</span>
+              </div>
+            )
+          })}
+        </div>
+      )}
+    </section>
+  )
+}

frontend/src/components/live/TimingTower.tsx

@@ -1,16 +1,20 @@
 import { useState, Fragment } from 'react'
 import { teamColor } from '../../utils'
 import { useAutoAnimate } from '@formkit/auto-animate/react'
-import type { LiveStintData } from '../../types'
+import type { LiveSessionMeta, LiveStintData } from '../../types'
 import type { LiveTimingRow } from '../../lib/live'
 import {
   driverCode,
+  liveSessionDisplay,
   positionDelta,
   positionDeltaClass,
   tyreClass,
   tyreLabel,
 } from '../../lib/live'
 import type { GapHistoryMap } from '../../lib/gapHistory'
+import { parseIntervalSeconds } from '../../lib/gapHistory'
+import { intervalMeaning } from '../../lib/meaning'
+import { Meaning } from '../Meaning'
 import { GapSparkline } from './GapSparkline'
 import { StintHistory } from './StintHistory'
 import { Pin } from 'lucide-react'
@@ -22,7 +26,7 @@ interface Props {
   battleNumbers?: Set<string>
   pinned?: string[]
   onTogglePin?: (racingNumber: string) => void
-  sessionType?: string
+  session?: LiveSessionMeta
 }
 
 function posClass(pos: number): string {
@@ -39,7 +43,7 @@ export function TimingTower({
   battleNumbers,
   pinned,
   onTogglePin,
-  sessionType = '',
+  session,
 }: Props) {
   const [expandedRow, setExpandedRow] = useState<string | null>(null)
   const [gapMode, setGapMode] = useState<'interval' | 'leader'>('interval')
@@ -53,16 +57,14 @@ export function TimingTower({
     )
   }
 
-  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')
+  const sessionDisplay = liveSessionDisplay(session, rows)
+  const isRace = sessionDisplay.isRace
+  const isQuali = sessionDisplay.isQualifying || !isRace
+  const columnCount = 7 + (isRace ? 3 : 0) + (isQuali ? 3 : 0)
 
   return (
     <div className="scroll-x">
-      <table className="data-table live-tower" style={{ minWidth: 620 }}>
+      <table className="data-table live-tower" style={{ minWidth: 760 }}>
         <thead>
           <tr>
             <th>Pos</th>
@@ -95,27 +97,24 @@ export function TimingTower({
             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 isAtRisk =
+              Boolean(sessionDisplay.cutoffPosition && row.Position > sessionDisplay.cutoffPosition) ||
+              driver.Cutoff
+            const showCutoffAfter = row.Position === sessionDisplay.cutoffPosition
 
             const gapText = gapMode === 'interval' && isRace ? (driver.Interval || driver.GapToLeader) : driver.GapToLeader
-            
-            // Render micro sectors
+            const intervalAnnotation =
+              gapMode === 'interval' && isRace && row.Position > 1
+                ? intervalMeaning(parseIntervalSeconds(gapText))
+                : null
+
             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'
+              let sClass = 'sector-time mono'
+              if (sec.OverallFastest) sClass += ' sector-overall txt-purple'
+              else if (sec.PersonalFastest) sClass += ' sector-personal txt-green'
+              else if (sec.Value) sClass += ' sector-active txt-yellow'
               return <span className={sClass}>{sec.Value || '-'}</span>
             }
 
@@ -128,7 +127,8 @@ export function TimingTower({
                     driver.Retired ? 'retired' : '',
                     inBattle ? 'battle-row' : '',
                     isPinned ? 'pinned-row' : '',
-                    koClass,
+                    isAtRisk && !driver.KnockedOut ? 'danger-row' : '',
+                    driver.OnFlyingLap ? 'flying-row' : '',
                     'interactive-row'
                   ].filter(Boolean).join(' ')}
                   onClick={() => setExpandedRow(isExpanded ? null : row.RacingNumber)}
@@ -146,6 +146,7 @@ export function TimingTower({
                       {driver.Retired && <span className="badge badge-out">RET</span>}
                       {driver.KnockedOut && <span className="badge badge-knocked">KO</span>}
                       {driver.Cutoff && !driver.KnockedOut && <span className="badge badge-cutoff">CUT</span>}
+                      {!driver.Cutoff && isAtRisk && !driver.KnockedOut && <span className="badge badge-risk">RISK</span>}
                       {driver.OnFlyingLap && <span className="badge badge-flying">FL</span>}
                     </div>
                   </td>
@@ -155,7 +156,14 @@ export function TimingTower({
                   <td className={driver.LastLapOB ? 'mono lap-ob' : driver.LastLapPB ? 'mono lap-pb' : 'mono'}>
                     {driver.LastLapTime || '-'}
                   </td>
-                  <td className="mono">{gapText || '-'}</td>
+                  <td className="mono">
+                    <Meaning
+                      value={gapText || '-'}
+                      meaning={intervalAnnotation?.caption}
+                      title={intervalAnnotation?.title}
+                      tone={intervalAnnotation?.tone}
+                    />
+                  </td>
                   
                   {isRace && (
                     <td className="spark-cell">
@@ -188,7 +196,7 @@ export function TimingTower({
                 </tr>
                 {isExpanded && (
                    <tr className="expanded-row">
-                      <td colSpan={12} style={{ padding: '16px', background: 'rgba(255,255,255,0.02)', borderBottom: '1px solid var(--border)' }}>
+                      <td colSpan={columnCount} 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>
@@ -210,6 +218,17 @@ export function TimingTower({
                       </td>
                    </tr>
                 )}
+                {showCutoffAfter && (
+                  <tr className="cutoff-separator" data-testid="qualifying-cutoff">
+                    <td colSpan={columnCount}>
+                      <span>{sessionDisplay.phaseLabel || 'Q'} cutoff</span>
+                      <strong>P{sessionDisplay.cutoffPosition} advance</strong>
+                      {sessionDisplay.atRiskStart && sessionDisplay.atRiskEnd && (
+                        <em>P{sessionDisplay.atRiskStart}-P{sessionDisplay.atRiskEnd} at risk</em>
+                      )}
+                    </td>
+                  </tr>
+                )}
               </Fragment>
             )
           })}

frontend/src/components/live/TrackMap.tsx

@@ -0,0 +1,145 @@
+import { useMemo, useState } from 'react'
+import type {
+  LiveDriverData,
+  LiveDriverInfo,
+  LivePosition,
+  LiveTelemetry,
+  TrackOutline,
+} from '../../types'
+import {
+  buildOutlinePath,
+  canvasToSvg,
+  isOnTrack,
+  normalizeRawPoint,
+} from '../../lib/trackmap'
+
+interface Props {
+  outline?: TrackOutline | null
+  positions: Record<string, LivePosition>
+  telemetry?: Record<string, LiveTelemetry>
+  drivers?: Record<string, LiveDriverData>
+  driverInfo?: Record<string, LiveDriverInfo>
+  loading?: boolean
+}
+
+export function TrackMap({
+  outline,
+  positions,
+  telemetry = {},
+  drivers = {},
+  driverInfo = {},
+  loading = false,
+}: Props) {
+  const [selected, setSelected] = useState<string | null>(null)
+  const outlinePath = useMemo(() => buildOutlinePath(outline?.points ?? []), [outline])
+  const cars = useMemo(() => {
+    if (!outline?.bounds) return []
+    return Object.entries(positions)
+      .map(([number, position]) => {
+        const canvas = normalizeRawPoint(position, outline.bounds)
+        return {
+          number,
+          position,
+          svg: canvasToSvg(canvas),
+          info: driverInfo[number],
+          driver: drivers[number],
+          telemetry: telemetry[number],
+          active: isOnTrack(position.status) && !drivers[number]?.Retired,
+        }
+      })
+      .sort((a, b) => Number(a.number) - Number(b.number))
+  }, [driverInfo, drivers, outline?.bounds, positions, telemetry])
+
+  const selectedCar = selected ? cars.find((car) => car.number === selected) : null
+
+  if (loading) {
+    return (
+      <section className="live-track-panel" data-testid="track-map">
+        <div className="sec-header">
+          <span className="sec-title">Track Map</span>
+        </div>
+        <div className="track-map-empty">loading cached circuit outline...</div>
+      </section>
+    )
+  }
+
+  if (!outline || !outlinePath) {
+    return (
+      <section className="live-track-panel" data-testid="track-map">
+        <div className="sec-header">
+          <span className="sec-title">Track Map</span>
+        </div>
+        <div className="track-map-empty">track outline unavailable for this live session</div>
+      </section>
+    )
+  }
+
+  return (
+    <section className="live-track-panel" data-testid="track-map">
+      <div className="sec-header">
+        <span className="sec-title">Track Map</span>
+        <span className="sec-meta">{cars.length ? `${cars.length} cars` : 'waiting for GPS'}</span>
+      </div>
+      <div className="track-map-stage">
+        <svg className="track-map-svg" viewBox="0 0 100 100" role="img" aria-label="Live track map">
+          <path className="track-map-outline-shadow" d={outlinePath} />
+          <path className="track-map-outline" d={outlinePath} />
+          {cars.map((car) => {
+            const label = car.info?.Tla || car.number
+            return (
+              <g
+                key={car.number}
+                role="button"
+                tabIndex={0}
+                aria-label={`${label} telemetry`}
+                className={`track-car ${car.active ? 'track-car-active' : 'track-car-inactive'} ${selected === car.number ? 'track-car-selected' : ''}`}
+                transform={`translate(${car.svg.x.toFixed(2)} ${car.svg.y.toFixed(2)})`}
+                onClick={() => setSelected(car.number)}
+                onKeyDown={(event) => {
+                  if (event.key === 'Enter' || event.key === ' ') {
+                    event.preventDefault()
+                    setSelected(car.number)
+                  }
+                }}
+              >
+                <circle r="2.8" fill={teamColor(car.info)} />
+                <text y="0.85">{label}</text>
+              </g>
+            )
+          })}
+        </svg>
+        {cars.length === 0 && <div className="track-map-empty track-map-overlay">waiting for live GPS</div>}
+        {selectedCar && (
+          <div className="track-telemetry" data-testid="track-telemetry">
+            <div className="track-telemetry-head">
+              <span className="track-driver-code">{selectedCar.info?.Tla || selectedCar.number}</span>
+              <span>{selectedCar.position.status || 'OnTrack'}</span>
+            </div>
+            <dl>
+              <Metric label="SPD" value={selectedCar.telemetry?.Speed} suffix="km/h" />
+              <Metric label="THR" value={selectedCar.telemetry?.Throttle} suffix="%" />
+              <Metric label="BRK" value={selectedCar.telemetry?.Brake} suffix="%" />
+              <Metric label="DRS" value={selectedCar.telemetry?.DRS} />
+              <Metric label="GEAR" value={selectedCar.telemetry?.NGear} />
+            </dl>
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}
+
+function Metric({ label, value, suffix = '' }: { label: string; value: number | undefined; suffix?: string }) {
+  return (
+    <>
+      <dt>{label}</dt>
+      <dd>{value === undefined ? '-' : `${value}${suffix}`}</dd>
+    </>
+  )
+}
+
+function teamColor(info: LiveDriverInfo | undefined): string {
+  const raw = info?.TeamColour?.trim()
+  if (!raw) return '#777777'
+  return raw.startsWith('#') ? raw : `#${raw}`
+}

frontend/src/components/live/TyreDegPanel.tsx

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

frontend/src/lib/battles.ts

@@ -25,7 +25,8 @@ export interface Battle {
 export function isRaceSession(sessionType: string | null | undefined): boolean {
   if (!sessionType) return false
   const type = sessionType.toLowerCase()
-  return type.includes('race') || type.includes('sprint')
+  const isQualifying = type.includes('qualifying') || type.includes('shootout') || /\bsq\s*[123]\b/.test(type)
+  return !isQualifying && (type.includes('race') || /\bsprint\b/.test(type))
 }
 
 function isEligible(row: LiveTimingRow): boolean {

frontend/src/lib/compare.ts

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

frontend/src/lib/coverage.ts

@@ -51,6 +51,7 @@ export function countWeekendStats(weekends: (Weekend | undefined)[]) {
   let full = 0
   let partial = 0
   let missing = 0
+  let cancelled = 0
 
   for (const weekend of weekends) {
     if (!weekend || weekend.sessions.length === 0) {
@@ -64,15 +65,19 @@ export function countWeekendStats(weekends: (Weekend | undefined)[]) {
       case 'partial':
         partial++
         break
+      case 'cancelled':
+        cancelled++
+        break
       default:
         missing++
     }
   }
 
-  return { full, partial, missing, total: weekends.length }
+  return { full, partial, cancelled, missing, total: weekends.length }
 }
 
 export function sessionIconClass(session: WeekendSession): string {
+  if (session.source === 'cancelled') return 'si-cancelled'
   if (session.source === 'none') return 'si-missing'
   if (isSessionComplete(session.datasets)) return 'si-full'
   return 'si-partial'

frontend/src/lib/delta.ts

@@ -0,0 +1,127 @@
+// Cumulative lap-time delta math for driver comparison charts.
+// Pure functions only — no React — so everything is unit-testable.
+
+export interface DeltaSeries {
+  label: string
+  color: string
+  /** Lap duration in seconds; null = no time (pit/out lap). */
+  lapTimes: (number | null)[]
+}
+
+export interface DriverDeltaResult {
+  label: string
+  color: string
+  /** Cumulative delta vs reference (seconds); null when that lap has no time. */
+  deltas: (number | null)[]
+}
+
+/** Format a delta value for axis labels and tooltips (e.g. "+2.5s", "-1.2s"). */
+export function formatDeltaSeconds(delta: number): string {
+  const sign = delta >= 0 ? '+' : ''
+  return `${sign}${delta.toFixed(1)}s`
+}
+
+/**
+ * Cumulative lap time aligned to reference-valid laps only.
+ * Laps where the reference is null are skipped for every series so later deltas
+ * do not compare against a frozen baseline while challengers keep accumulating.
+ */
+function buildAlignedCumulative(
+  lapTimes: ReadonlyArray<number | null>,
+  referenceLapTimes: ReadonlyArray<number | null>,
+): number[] {
+  const cumulative: number[] = []
+  let running = 0
+  const length = Math.max(lapTimes.length, referenceLapTimes.length)
+
+  for (let i = 0; i < length; i++) {
+    if (referenceLapTimes[i] == null) {
+      cumulative.push(running)
+      continue
+    }
+    const lap = lapTimes[i]
+    if (lap != null) {
+      running += lap
+    }
+    cumulative.push(running)
+  }
+
+  return cumulative
+}
+
+function resolveReference(
+  series: ReadonlyArray<DeltaSeries>,
+  referenceLabel?: string,
+): DeltaSeries | null {
+  if (series.length === 0) return null
+  if (referenceLabel) {
+    return series.find((s) => s.label === referenceLabel) ?? series[0]
+  }
+  return series[0]
+}
+
+/**
+ * Compute per-lap cumulative time delta for each non-reference driver.
+ * Positive = behind reference; negative = ahead.
+ * Deltas are only emitted where the reference lap is valid; reference-null laps
+ * gap every series. Challenger-null laps gap only that driver's line.
+ */
+export function computeCumulativeDeltas(
+  series: ReadonlyArray<DeltaSeries>,
+  referenceLabel?: string,
+): DriverDeltaResult[] {
+  const reference = resolveReference(series, referenceLabel)
+  if (!reference) return []
+
+  const refLapTimes = reference.lapTimes
+  const refCumulative = buildAlignedCumulative(refLapTimes, refLapTimes)
+
+  return series
+    .filter((s) => s.label !== reference.label)
+    .map((driver) => {
+      const driverCumulative = buildAlignedCumulative(driver.lapTimes, refLapTimes)
+      const lapCount = Math.max(driver.lapTimes.length, refCumulative.length)
+      const deltas: (number | null)[] = []
+
+      for (let i = 0; i < lapCount; i++) {
+        if (refLapTimes[i] == null || driver.lapTimes[i] == null) {
+          deltas.push(null)
+          continue
+        }
+        deltas.push(driverCumulative[i] - refCumulative[i])
+      }
+
+      return {
+        label: driver.label,
+        color: driver.color,
+        deltas,
+      }
+    })
+}
+
+/** Split delta samples into contiguous SVG polyline point strings (gaps at null laps). */
+export function deltaPolylineSegments(
+  deltas: ReadonlyArray<number | null>,
+  toPoint: (lapIndex: number, delta: number) => string,
+): string[] {
+  const segments: string[] = []
+  let current: string[] = []
+
+  for (let i = 0; i < deltas.length; i++) {
+    const value = deltas[i]
+    if (value === null) {
+      if (current.length > 0) {
+        segments.push(current.join(' '))
+        current = []
+      }
+      continue
+    }
+    current.push(toPoint(i, value))
+  }
+
+  if (current.length > 0) {
+    segments.push(current.join(' '))
+  }
+
+  return segments
+}

frontend/src/lib/driverProfile.ts

@@ -0,0 +1,69 @@
+import type { DriverSummaryRound } from '../types'
+
+/** One round mapped for the grid-vs-finish chart and results table. */
+export interface RoundDelta {
+  round: number // 1-based round index within the completed season
+  label: string // short GP label, e.g. "Bahrain"
+  grid: number | null
+  finish: number | null
+  /** grid − finish: positive = places gained on Sunday, null when unknowable. */
+  delta: number | null
+  points: number
+  status: 'classified' | 'dnf' | 'dns' | 'dsq' | 'absent'
+}
+
+/** Strip the "Grand Prix" boilerplate so round labels fit chart axes. */
+export function shortGpLabel(meetingName: string): string {
+  const short = meetingName
+    .replace(/\s*grand prix\s*/i, ' ')
+    .replace(/\s+gp\s*$/i, ' ')
+    .trim()
+  return short || meetingName
+}
+
+function roundStatus(r: DriverSummaryRound): RoundDelta['status'] {
+  if (r.dns) return 'dns'
+  if (r.dsq) return 'dsq'
+  if (r.dnf) return 'dnf'
+  if (r.race_position <= 0 && r.grid_position <= 0) return 'absent'
+  return 'classified'
+}
+
+/**
+ * Map summary rounds to grid-vs-finish deltas. Positions of 0 mean "no data"
+ * (driver absent, pit-lane start, …) and become null; a delta is only computed
+ * when both ends are known and the driver actually started the race.
+ */
+export function gridFinishDeltas(rounds: DriverSummaryRound[]): RoundDelta[] {
+  return rounds.map((r, i) => {
+    const status = roundStatus(r)
+    const grid = r.grid_position > 0 ? r.grid_position : null
+    const finish = r.race_position > 0 ? r.race_position : null
+    const delta =
+      grid != null && finish != null && status !== 'dns' && status !== 'absent'
+        ? grid - finish
+        : null
+    return {
+      round: i + 1,
+      label: shortGpLabel(r.meeting_name),
+      grid,
+      finish,
+      delta,
+      points: r.points,
+      status,
+    }
+  })
+}
+
+/** 'P4' for known positions, '—' when unknown. */
+export function formatPosition(pos: number | null): string {
+  return pos != null && pos > 0 ? `P${pos}` : '—'
+}
+
+/** '+3' (gained), '−2' (lost), '=' (held), '—' (unknown). */
+export function formatDelta(delta: number | null): string {
+  if (delta == null) return '—'
+  if (delta > 0) return `+${delta}`
+  if (delta < 0) return `−${Math.abs(delta)}`
+  return '='
+}

frontend/src/lib/events.ts

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

frontend/src/lib/gpIdentity.ts

@@ -47,7 +47,9 @@ export function countryDecal(meeting: Meeting | undefined | null): string {
   return name.slice(0, 3).toUpperCase() || '—'
 }
 
-export function countryFlag(meeting: Meeting | undefined | null): string {
+export function countryFlag(
+  meeting: Pick<Meeting, 'country_code' | 'country_flag'> | undefined | null,
+): string {
   if (meeting?.country_flag && !/^https?:\/\//i.test(meeting.country_flag)) return meeting.country_flag
   const code = meeting?.country_code?.toUpperCase()
   const iso2 = code ? CODE3_TO_2[code] : ''

frontend/src/lib/hero.ts

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

frontend/src/lib/live.ts

@@ -2,6 +2,8 @@ import type {
   LiveDriverData,
   LiveDriverInfo,
   LiveRCMessage,
+  LiveSectorData,
+  LiveSessionMeta,
   LiveStateResponse,
   LiveStreamData,
   LiveTyreData,
@@ -15,6 +17,27 @@ export interface LiveTimingRow {
   Tyre?: LiveTyreData
 }
 
+export interface LiveSessionDisplay {
+  isRace: boolean
+  isQualifying: boolean
+  isSprintQualifying: boolean
+  phase: 1 | 2 | 3 | null
+  phaseLabel: string
+  cutoffPosition: number | null
+  advanceCount: number | null
+  atRiskStart: number | null
+  atRiskEnd: number | null
+}
+
+export interface VisibleSectorEntry {
+  lap: number
+  lastLapTime: string
+  completed: boolean
+  sectors: LiveSectorData[]
+}
+
+export type VisibleSectorState = Record<string, VisibleSectorEntry>
+
 const TRACK_STATUS_LABELS: Record<string, string> = {
   '1': 'GREEN',
   '2': 'YELLOW',
@@ -111,6 +134,136 @@ export function sortLiveTimingRows(snapshot: LiveStreamData | null | undefined):
   }))
 }
 
+export function liveSessionDisplay(
+  session: LiveSessionMeta | null | undefined,
+  rows: ReadonlyArray<LiveTimingRow>,
+): LiveSessionDisplay {
+  const text = [session?.SessionName, session?.SessionType].filter(Boolean).join(' ').toLowerCase()
+  const isQualifying =
+    /\bs?q\s*[123]\b/i.test(text) ||
+    text.includes('qualifying') ||
+    text.includes('shootout')
+  const isSprintQualifying =
+    /\bsq\s*[123]\b/i.test(text) ||
+    text.includes('sprint qualifying') ||
+    text.includes('sprint shootout')
+  const isRace = !isQualifying && (text.includes('race') || /\bsprint\b/i.test(text))
+  const phase = isQualifying ? explicitQualifyingPhase(text) ?? inferredQualifyingPhase(rows) : null
+  const prefix = isSprintQualifying ? 'SQ' : 'Q'
+  const cutoffPosition = qualifyingCutoffPosition(rows.length, phase)
+  const atRiskStart = cutoffPosition === null ? null : cutoffPosition + 1
+
+  return {
+    isRace,
+    isQualifying,
+    isSprintQualifying,
+    phase,
+    phaseLabel: phase ? `${prefix}${phase}` : isQualifying ? prefix : '',
+    cutoffPosition,
+    advanceCount: cutoffPosition,
+    atRiskStart,
+    atRiskEnd: cutoffPosition === null ? null : rows.length,
+  }
+}
+
+function explicitQualifyingPhase(text: string): 1 | 2 | 3 | null {
+  const match = text.match(/\b(?:s?q|qualifying)\s*([123])\b/i)
+  if (!match) return null
+  const phase = Number(match[1])
+  return phase === 1 || phase === 2 || phase === 3 ? phase : null
+}
+
+function inferredQualifyingPhase(rows: ReadonlyArray<LiveTimingRow>): 1 | 2 | 3 {
+  if (rows.length === 0) return 1
+  const knockedOut = rows.filter((row) => row.Driver.KnockedOut).length
+  if (knockedOut >= Math.max(0, rows.length - 10)) return 3
+  if (knockedOut >= 5) return 2
+  if (rows.length <= 10) return 3
+  if (rows.length <= 18) return 2
+  return 1
+}
+
+export function qualifyingCutoffPosition(totalRows: number, phase: 1 | 2 | 3 | null): number | null {
+  if (phase === 1 && totalRows > 5) return totalRows - 5
+  if (phase === 2 && totalRows > 10) return 10
+  return null
+}
+
+function emptySector(): LiveSectorData {
+  return { Value: '', PersonalFastest: false, OverallFastest: false }
+}
+
+function sectorHasValue(sector: LiveSectorData | undefined): boolean {
+  return Boolean(sector?.Value)
+}
+
+function normalizeSectors(sectors: ReadonlyArray<LiveSectorData> | undefined): LiveSectorData[] {
+  return [0, 1, 2].map((index) => sectors?.[index] ?? emptySector())
+}
+
+export function mergeVisibleSectors(
+  previous: VisibleSectorState,
+  rows: ReadonlyArray<LiveTimingRow>,
+): VisibleSectorState {
+  const next: VisibleSectorState = {}
+
+  for (const row of rows) {
+    const driver = row.Driver
+    const prior = previous[row.RacingNumber]
+    const incoming = normalizeSectors(driver.Sectors)
+    const hasIncoming = incoming.some(sectorHasValue)
+    const lap = driver.NumberOfLaps || prior?.lap || 0
+    const lapAdvanced = Boolean(prior && driver.NumberOfLaps > prior.lap)
+    const lastLapChanged = Boolean(
+      prior &&
+        driver.LastLapTime &&
+        driver.LastLapTime !== prior.lastLapTime,
+    )
+
+    if ((lapAdvanced || lastLapChanged || prior?.completed) && !hasIncoming) {
+      continue
+    }
+
+    if (!prior && !hasIncoming) continue
+
+    const merged = lapAdvanced || lastLapChanged ? normalizeSectors(undefined) : normalizeSectors(prior?.sectors)
+    for (let index = 0; index < 3; index += 1) {
+      if (sectorHasValue(incoming[index])) {
+        merged[index] = incoming[index]
+      }
+    }
+
+    const hasMerged = merged.some(sectorHasValue)
+    if (!hasMerged) continue
+
+    next[row.RacingNumber] = {
+      lap,
+      lastLapTime: driver.LastLapTime || prior?.lastLapTime || '',
+      completed: sectorHasValue(merged[2]) || (!driver.OnFlyingLap && lastLapChanged),
+      sectors: merged,
+    }
+  }
+
+  return next
+}
+
+export function rowsWithVisibleSectors(
+  rows: ReadonlyArray<LiveTimingRow>,
+  visibleSectors: VisibleSectorState,
+): LiveTimingRow[] {
+  return rows.map((row) => {
+    const sectors = visibleSectors[row.RacingNumber]?.sectors
+    if (!sectors) return row
+    return {
+      ...row,
+      Driver: {
+        ...row.Driver,
+        Sectors: sectors,
+      },
+    }
+  })
+}
+
 export function driverCode(row: LiveTimingRow): string {
   return row.Info?.Tla || row.RacingNumber
 }

frontend/src/lib/meaning.ts

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

frontend/src/lib/preview.ts

@@ -0,0 +1,123 @@
+import type { ChampionshipHub, EnrichedGrid, EnrichedResult, Meeting, Session } from '../types'
+import {
+  currentAndNextSession,
+  nextUpcomingMeeting,
+  sessionStartTime,
+  sortSessionsByStart,
+} from './schedule'
+
+export const RACE_WIN_POINTS = 25
+export const SPRINT_WIN_POINTS = 8
+export const SPRINT_WEEKEND_MAX_POINTS = RACE_WIN_POINTS + SPRINT_WIN_POINTS
+
+export function pickPreviewMeeting(meetings: Meeting[], now: Date): Meeting | null {
+  const active = meetings.filter((m) => !m.is_cancelled)
+  return nextUpcomingMeeting(active, now)
+}
+
+export function findPriorYearMeetingByCircuit(
+  priorYearMeetings: Meeting[],
+  circuitKey: number | undefined,
+): Meeting | null {
+  if (!circuitKey) return null
+  return priorYearMeetings.find((m) => m.circuit_key === circuitKey && !m.is_cancelled) ?? null
+}
+
+export function findRaceSession(sessions: Session[]): Session | null {
+  const sorted = sortSessionsByStart(sessions)
+  return (
+    sorted.find((s) => {
+      const type = s.session_type?.toLowerCase() ?? ''
+      return type.includes('race') && !type.includes('sprint')
+    }) ?? null
+  )
+}
+
+export function isSprintWeekend(sessions: Session[]): boolean {
+  return sessions.some((s) => {
+    const label = `${s.session_type} ${s.session_name}`.toLowerCase()
+    return /\bsprint\b/.test(label) && !label.includes('sprint qualifying') && !label.includes('sprint shootout')
+  })
+}
+
+export interface PodiumPlace {
+  position: number
+  name_acronym: string
+  full_name: string
+  team_name: string
+  team_colour: string
+}
+
+export interface PolePosition {
+  name_acronym: string
+  full_name: string
+  team_name: string
+  team_colour: string
+}
+
+export function extractPodium(results: EnrichedResult[]): PodiumPlace[] {
+  return results
+    .filter((r) => r.position >= 1 && r.position <= 3 && !r.dns && !r.dsq)
+    .sort((a, b) => a.position - b.position)
+    .map((r) => ({
+      position: r.position,
+      name_acronym: r.name_acronym,
+      full_name: r.full_name,
+      team_name: r.team_name,
+      team_colour: r.team_colour,
+    }))
+}
+
+export function extractPole(grid: EnrichedGrid[]): PolePosition | null {
+  const pole = grid.find((g) => g.position === 1)
+  if (!pole) return null
+  return {
+    name_acronym: pole.name_acronym,
+    full_name: pole.full_name,
+    team_name: pole.team_name,
+    team_colour: pole.team_colour,
+  }
+}
+
+export interface TitleFightDriver {
+  name_acronym: string
+  full_name: string
+  team_colour: string
+  points: number
+  position: number
+  gapToLeader: number
+  gapAfterRaceWin: number
+  gapAfterSprintWeekendMax: number
+}
+
+export function buildTitleFightContext(hub: ChampionshipHub): TitleFightDriver[] {
+  if (hub.drivers.length === 0) return []
+  const leader = hub.drivers[0]
+  return hub.drivers.slice(0, 3).map((d) => ({
+    name_acronym: d.name_acronym,
+    full_name: d.full_name,
+    team_colour: d.team_colour,
+    points: d.points,
+    position: d.position,
+    gapToLeader: leader.points - d.points,
+    gapAfterRaceWin: leader.points - (d.points + RACE_WIN_POINTS),
+    gapAfterSprintWeekendMax: leader.points - (d.points + SPRINT_WEEKEND_MAX_POINTS),
+  }))
+}
+
+export function countdownTargetSession(sessions: Session[], now: Date): Session | null {
+  const sorted = sortSessionsByStart(sessions)
+  const { next } = currentAndNextSession(sorted, now)
+  if (next) return next
+  for (const session of sorted) {
+    const start = sessionStartTime(session)
+    if (start && start > now) return session
+  }
+  return null
+}
+
+export function formatPointsGap(gap: number): string {
+  if (gap === 0) return 'LEADER'
+  const sign = gap > 0 ? '+' : ''
+  return `${sign}${Number.isInteger(gap) ? gap : gap.toFixed(1)}`
+}

frontend/src/lib/radio.ts

@@ -0,0 +1,22 @@
+import type { LiveRadioCapture, LiveSessionMeta } from '../types'
+
+export const LIVE_TIMING_STATIC_BASE = 'https://livetiming.formula1.com/static/'
+
+export function radioClipUrl(
+  session: Pick<LiveSessionMeta, 'Path'> | null | undefined,
+  capture: Pick<LiveRadioCapture, 'Path'> | null | undefined,
+): string {
+  const sessionPath = session?.Path?.trim()
+  const capturePath = capture?.Path?.trim()
+  if (!sessionPath || !capturePath) return ''
+  if (/^https?:\/\//i.test(capturePath)) return capturePath
+
+  const base = LIVE_TIMING_STATIC_BASE.replace(/\/+$/, '')
+  const normalizedSession = sessionPath.replace(/^\/+|\/+$/g, '')
+  const normalizedCapture = capturePath.replace(/^\/+/g, '')
+  return `${base}/${normalizedSession}/${normalizedCapture}`
+}
+
+export function radioCaptureKey(capture: LiveRadioCapture): string {
+  return `${capture.Utc}-${capture.RacingNumber}-${capture.Path}`
+}

frontend/src/lib/trackmap.ts

@@ -0,0 +1,66 @@
+import type { LivePosition, TrackBounds, TrackPoint } from '../types'
+
+export interface CanvasPoint {
+  x: number
+  y: number
+}
+
+const VIEWBOX_SIZE = 100
+
+export function normalizeRawPoint(
+  point: Pick<LivePosition, 'x' | 'y'>,
+  bounds: TrackBounds,
+): CanvasPoint {
+  return {
+    x: normalizeAxis(point.x, bounds.minX, bounds.maxX),
+    y: 1 - normalizeAxis(point.y, bounds.minY, bounds.maxY),
+  }
+}
+
+export function outlinePointToCanvas(point: TrackPoint): CanvasPoint {
+  return {
+    x: clamp01(point.x),
+    y: 1 - clamp01(point.y),
+  }
+}
+
+export function buildOutlinePath(points: ReadonlyArray<TrackPoint>): string {
+  if (points.length < 2) return ''
+
+  return points
+    .map((point, index) => {
+      const canvas = outlinePointToCanvas(point)
+      const command = index === 0 ? 'M' : 'L'
+      return `${command} ${formatSvgCoord(canvas.x)} ${formatSvgCoord(canvas.y)}`
+    })
+    .join(' ')
+}
+
+export function canvasToSvg(point: CanvasPoint): CanvasPoint {
+  return {
+    x: clamp01(point.x) * VIEWBOX_SIZE,
+    y: clamp01(point.y) * VIEWBOX_SIZE,
+  }
+}
+
+export function isOnTrack(status: string | null | undefined): boolean {
+  if (!status) return true
+  const normalized = status.toLowerCase()
+  return normalized === 'ontrack' || normalized === 'on-track' || normalized === 'on_track'
+}
+
+function normalizeAxis(value: number, min: number, max: number): number {
+  const range = max - min
+  if (!Number.isFinite(value) || !Number.isFinite(min) || !Number.isFinite(max)) return 0.5
+  if (range === 0) return 0.5
+  return clamp01((value - min) / range)
+}
+
+function clamp01(value: number): number {
+  if (!Number.isFinite(value)) return 0.5
+  return Math.min(1, Math.max(0, value))
+}
+
+function formatSvgCoord(value: number): string {
+  return (value * VIEWBOX_SIZE).toFixed(2)
+}

frontend/src/lib/tyredeg.ts

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

frontend/src/pages/ChampionshipPage.tsx

@@ -1,9 +1,12 @@
 import { useMemo, useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
+import { Link } from '@tanstack/react-router'
 import { fetchChampionshipHub, fetchSeasons } from '../api'
 import { teamColor } from '../utils'
 import type { ChampHubDriver, ChampionshipHub } from '../types'
 import { ChampionshipSimulator } from '../components/ChampionshipSimulator'
+import { Meaning } from '../components/Meaning'
+import { pointsGapMeaning } from '../lib/meaning'
 
 type View = 'drivers' | 'constructors' | 'progression' | 'simulator'
 
@@ -138,6 +141,8 @@ function ChampionshipBody({ hub, view, setView }: BodyProps) {
           color: teamColor(d.team_colour),
           gapLeader: i === 0 ? 'LEADER' : `+${fmtPts(gapLeaderNum)}`,
           gapAhead: gapAheadNum == null ? '—' : `+${fmtPts(gapAheadNum)}`,
+          gapAheadNum,
+          driverAhead: i === 0 ? null : drivers[i - 1].name_acronym,
           spark: sparkPoints(d.form),
           h2h: `${d.teammate_wins}–${d.teammate_losses}`,
           h2hWin: d.teammate_wins >= d.teammate_losses,
@@ -233,7 +238,13 @@ function ChampionshipBody({ hub, view, setView }: BodyProps) {
       </div>
 
       {view === 'drivers' && (
-        <DriversView enriched={enriched} leaderPoints={leader.points} titleMath={titleMath} />
+        <DriversView
+          enriched={enriched}
+          leaderPoints={leader.points}
+          titleMath={titleMath}
+          roundsLeft={hub.rounds_left}
+          season={hub.season}
+        />
       )}
       {view === 'constructors' && <ConstructorsView hub={hub} />}
       {view === 'progression' && <ProgressionView hub={hub} />}
@@ -248,6 +259,8 @@ interface EnrichedDriver {
   color: string
   gapLeader: string
   gapAhead: string
+  gapAheadNum: number | null
+  driverAhead: string | null
   spark: string
   h2h: string
   h2hWin: boolean
@@ -259,10 +272,14 @@ function DriversView({
   enriched,
   leaderPoints,
   titleMath,
+  roundsLeft,
+  season,
 }: {
   enriched: EnrichedDriver[]
   leaderPoints: number
   titleMath: string
+  roundsLeft: number
+  season: number
 }) {
   const podium = enriched.slice(0, 3)
   return (
@@ -347,17 +364,36 @@ function DriversView({
                   P{e.pos}
                 </td>
                 <td>
-                  <div className="champ-drv">
+                  <Link
+                    to="/drivers/$driverNumber"
+                    params={{ driverNumber: String(e.d.driver_number) }}
+                    search={{ year: season }}
+                    className="champ-drv"
+                    style={{ color: 'inherit', textDecoration: 'none' }}
+                    data-testid={`champ-driver-link-${e.d.driver_number}`}
+                  >
                     <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>
+                  </Link>
                 </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="r mono champ-td-dim">
+                  {(() => {
+                    const gapAnnotation = pointsGapMeaning(e.gapAheadNum, roundsLeft, e.driverAhead)
+                    return (
+                      <Meaning
+                        value={e.gapAhead}
+                        meaning={gapAnnotation?.caption}
+                        title={gapAnnotation?.title}
+                        tone={gapAnnotation?.tone}
+                      />
+                    )
+                  })()}
+                </td>
                 <td className="c mono" style={{ color: e.d.wins > 0 ? 'var(--text)' : 'var(--text-3)' }}>
                   {e.d.wins}
                 </td>

frontend/src/pages/CommandCenterPage.tsx

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

frontend/src/pages/DataLibraryPage.tsx

@@ -137,6 +137,9 @@ export function DataLibraryPage() {
           <span>
             <em className="dl-stat-partial">{stats.partial}</em> partial
           </span>
+          <span>
+            <em className="dl-stat-cancelled">{stats.cancelled}</em> cancelled
+          </span>
           <span>
             <em>{stats.missing}</em> missing
           </span>
@@ -177,6 +180,10 @@ export function DataLibraryPage() {
                 <span className="dl-stat-label">Partial</span>
                 <span className="dl-stat-val dl-stat-partial">{stats.partial}</span>
               </div>
+              <div className="dl-stat">
+                <span className="dl-stat-label">Cancelled</span>
+                <span className="dl-stat-val dl-stat-cancelled">{stats.cancelled}</span>
+              </div>
               <div className="dl-stat">
                 <span className="dl-stat-label">Missing</span>
                 <span className="dl-stat-val">{stats.missing}</span>
@@ -294,7 +301,9 @@ export function DataLibraryPage() {
                             )}
                           </td>
                           <td className="hide-mobile mono" style={{ color: 'var(--text-2)' }}>
-                            {weekend && weekend.sessions.length > 0
+                            {weekend?.source === 'cancelled'
+                              ? 'cancelled'
+                              : weekend && weekend.sessions.length > 0
                               ? `${weekend.sessions.filter((s) => s.source === 'local').length}/${weekend.sessions.length} full`
                               : '—'}
                           </td>

frontend/src/pages/DriverProfilePage.tsx

@@ -0,0 +1,369 @@
+import { useQuery } from '@tanstack/react-query'
+import { Link } from '@tanstack/react-router'
+import { fetchDriverSummary, fetchSeasons } from '../api'
+import { teamColor } from '../utils'
+import { countryFlag } from '../lib/gpIdentity'
+import {
+  formatDelta,
+  formatPosition,
+  gridFinishDeltas,
+  type RoundDelta,
+} from '../lib/driverProfile'
+import type { DriverSummary } from '../types'
+import '../styles/driver-profile.css'
+
+interface Props {
+  driverNumber: number
+  year?: number
+}
+
+function fmtPts(n: number): string {
+  return Number.isInteger(n) ? String(n) : n.toFixed(1)
+}
+
+export function DriverProfilePage({ driverNumber, year }: Props) {
+  // Without an explicit ?year=, default to the latest ingested season; if the
+  // seasons list is empty/unavailable the backend falls back to the current year.
+  const seasonsQuery = useQuery({
+    queryKey: ['seasons'],
+    queryFn: fetchSeasons,
+    enabled: year == null,
+  })
+  const resolvedYear = year ?? seasonsQuery.data?.[0]
+  const seasonsSettled = year != null || !seasonsQuery.isLoading
+
+  const summaryQuery = useQuery({
+    queryKey: ['driver-summary', driverNumber, resolvedYear ?? 'latest'],
+    queryFn: () => fetchDriverSummary(driverNumber, resolvedYear),
+    enabled: seasonsSettled && driverNumber > 0,
+    staleTime: 5 * 60_000,
+  })
+
+  if (driverNumber <= 0) {
+    return <div className="page error-box">Invalid driver number</div>
+  }
+  if (!seasonsSettled || summaryQuery.isLoading) {
+    return <div className="page loading-state">loading driver profile…</div>
+  }
+  if (summaryQuery.isError) {
+    return (
+      <div className="page error-box">
+        {summaryQuery.error instanceof Error
+          ? summaryQuery.error.message
+          : 'Failed to load driver profile'}
+      </div>
+    )
+  }
+  const summary = summaryQuery.data
+  if (!summary) {
+    return <div className="page error-box">No driver data</div>
+  }
+  return <DriverProfileBody summary={summary} />
+}
+
+function DriverProfileBody({ summary }: { summary: DriverSummary }) {
+  const color = teamColor(summary.team_colour)
+  const deltas = gridFinishDeltas(summary.rounds)
+
+  return (
+    <div className="dp-page" data-testid="driver-profile">
+      <header className="dp-header" data-testid="dp-header" style={{ borderLeftColor: color }}>
+        <div className="dp-identity">
+          <div className="dp-title-row">
+            <span className="dp-code mono">{summary.name_acronym || `#${summary.driver_number}`}</span>
+            <span className="dp-num mono" style={{ color }}>
+              #{summary.driver_number}
+            </span>
+          </div>
+          <h1 className="dp-name">{summary.full_name || `Driver ${summary.driver_number}`}</h1>
+          <div className="dp-team">
+            <span className="dp-team-swatch" style={{ background: color }} />
+            {summary.team_name || 'Unknown team'}
+            <span className="dp-season mono">{summary.season}</span>
+          </div>
+        </div>
+        <div className="dp-stat-rail">
+          <div className="dp-stat">
+            <div className="dp-stat-value mono">{summary.position > 0 ? `P${summary.position}` : '—'}</div>
+            <div className="dp-stat-label">Championship</div>
+          </div>
+          <div className="dp-stat">
+            <div className="dp-stat-value mono">{fmtPts(summary.points)}</div>
+            <div className="dp-stat-label">Points</div>
+          </div>
+          <div className="dp-stat">
+            <div className="dp-stat-value mono">{summary.wins}</div>
+            <div className="dp-stat-label">Wins</div>
+          </div>
+          <div className="dp-stat">
+            <div className="dp-stat-value mono">{summary.podiums}</div>
+            <div className="dp-stat-label">Podiums</div>
+          </div>
+          <div className="dp-stat">
+            <div className="dp-stat-value mono">{summary.poles}</div>
+            <div className="dp-stat-label">Poles</div>
+          </div>
+        </div>
+        <Link to="/championship" className="dp-back mono">
+          ← Championship
+        </Link>
+      </header>
+
+      <section className="dp-section" data-testid="dp-form">
+        <h2 className="dp-section-title mono">Season form</h2>
+        {summary.cumulative.length > 0 ? (
+          <div className="dp-form-grid">
+            <CumulativeLine
+              cumulative={summary.cumulative}
+              labels={summary.round_labels}
+              color={color}
+            />
+            <FormStrip form={summary.form} color={color} />
+          </div>
+        ) : (
+          <div className="dp-empty">No completed rounds yet.</div>
+        )}
+      </section>
+
+      <section className="dp-section" data-testid="dp-quali-race">
+        <h2 className="dp-section-title mono">Quali vs race</h2>
+        {deltas.some((d) => d.delta != null) ? (
+          <GridVsRaceChart deltas={deltas} color={color} />
+        ) : (
+          <div className="dp-empty">No grid-vs-finish data yet.</div>
+        )}
+      </section>
+
+      <section className="dp-section" data-testid="dp-rounds">
+        <h2 className="dp-section-title mono">Track by track</h2>
+        {summary.rounds.length > 0 ? (
+          <RoundsTable summary={summary} deltas={deltas} />
+        ) : (
+          <div className="dp-empty">No completed rounds yet.</div>
+        )}
+      </section>
+    </div>
+  )
+}
+
+const LINE_W = 640
+const LINE_H = 180
+const LINE_PL = 44
+const LINE_PR = 16
+const LINE_PT = 12
+const LINE_PB = 24
+
+function CumulativeLine({
+  cumulative,
+  labels,
+  color,
+}: {
+  cumulative: number[]
+  labels: string[]
+  color: string
+}) {
+  const n = cumulative.length
+  const maxY = Math.max(25, ...cumulative)
+  const plotW = LINE_W - LINE_PL - LINE_PR
+  const plotH = LINE_H - LINE_PT - LINE_PB
+  const x = (i: number) => (n <= 1 ? LINE_PL + plotW / 2 : LINE_PL + (i * plotW) / (n - 1))
+  const y = (v: number) => LINE_PT + plotH - (v / maxY) * plotH
+  const points = cumulative.map((v, i) => `${x(i).toFixed(1)},${y(v).toFixed(1)}`).join(' ')
+
+  const tickStep = Math.max(1, Math.ceil(n / 8))
+  const ticks: { x: number; label: string }[] = []
+  for (let i = 0; i < n; i += tickStep) {
+    ticks.push({ x: x(i), label: labels[i] ?? `R${i + 1}` })
+  }
+
+  return (
+    <figure className="dp-chart">
+      <figcaption className="dp-chart-caption mono">Cumulative points</figcaption>
+      <svg viewBox={`0 0 ${LINE_W} ${LINE_H}`} className="dp-chart-svg" role="img" aria-label="Cumulative points per round">
+        {[0, 0.5, 1].map((f) => {
+          const v = Math.round(maxY * f)
+          return (
+            <g key={f}>
+              <line x1={LINE_PL} y1={y(v)} x2={LINE_W - LINE_PR} y2={y(v)} className="dp-gridline" />
+              <text x={LINE_PL - 6} y={y(v) + 3} textAnchor="end" className="dp-axis">
+                {v}
+              </text>
+            </g>
+          )
+        })}
+        {ticks.map((t) => (
+          <text key={t.label} x={t.x} y={LINE_H - 8} textAnchor="middle" className="dp-axis">
+            {t.label}
+          </text>
+        ))}
+        <polyline
+          points={points}
+          fill="none"
+          stroke={color}
+          strokeWidth="2.2"
+          strokeLinejoin="round"
+          strokeLinecap="round"
+        />
+        <circle cx={x(n - 1)} cy={y(cumulative[n - 1])} r="3.2" fill={color} />
+      </svg>
+    </figure>
+  )
+}
+
+function FormStrip({ form, color }: { form: number[]; color: string }) {
+  const max = Math.max(25, ...form)
+  return (
+    <div className="dp-form-strip">
+      <div className="dp-chart-caption mono">Last {form.length} races</div>
+      <div className="dp-form-bars">
+        {form.map((pts, i) => (
+          <div className="dp-form-bar" key={i} title={`${fmtPts(pts)} pts`}>
+            <div
+              className="dp-form-bar-fill"
+              style={{ height: `${Math.max(4, (pts / max) * 100)}%`, background: color }}
+            />
+            <span className="dp-form-bar-val mono">{fmtPts(pts)}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+const DELTA_H = 190
+const DELTA_PT = 14
+const DELTA_PB = 30
+
+function GridVsRaceChart({ deltas, color }: { deltas: RoundDelta[]; color: string }) {
+  const maxAbs = Math.max(1, ...deltas.map((d) => Math.abs(d.delta ?? 0)))
+  const colW = 34
+  const w = Math.max(240, deltas.length * colW)
+  const plotH = DELTA_H - DELTA_PT - DELTA_PB
+  const zeroY = DELTA_PT + plotH / 2
+  const scale = plotH / 2 / maxAbs
+
+  return (
+    <figure className="dp-chart">
+      <figcaption className="dp-chart-caption mono">
+        Positions gained (▲) / lost (▼) from grid to flag, per round
+      </figcaption>
+      <div className="dp-chart-scroll">
+        <svg
+          viewBox={`0 0 ${w} ${DELTA_H}`}
+          width={w}
+          height={DELTA_H}
+          className="dp-delta-svg"
+          role="img"
+          aria-label="Positions gained or lost per round"
+        >
+          <line x1={0} y1={zeroY} x2={w} y2={zeroY} className="dp-zeroline" />
+          {deltas.map((d, i) => {
+            const cx = i * colW + colW / 2
+            if (d.delta == null) {
+              return (
+                <g key={d.round}>
+                  <text x={cx} y={zeroY - 6} textAnchor="middle" className="dp-axis">
+                    ·
+                  </text>
+                  <text x={cx} y={DELTA_H - 8} textAnchor="middle" className="dp-axis">
+                    R{d.round}
+                  </text>
+                </g>
+              )
+            }
+            const h = Math.abs(d.delta) * scale
+            const yTop = d.delta >= 0 ? zeroY - h : zeroY
+            return (
+              <g key={d.round}>
+                <title>{`${d.label}: ${formatPosition(d.grid)} → ${formatPosition(d.finish)} (${formatDelta(d.delta)})`}</title>
+                <rect
+                  x={cx - 8}
+                  y={yTop}
+                  width={16}
+                  height={Math.max(1.5, h)}
+                  rx={2}
+                  fill={color}
+                  opacity={d.delta >= 0 ? 0.95 : 0.45}
+                />
+                <text
+                  x={cx}
+                  y={d.delta >= 0 ? yTop - 4 : yTop + h + 11}
+                  textAnchor="middle"
+                  className="dp-delta-val mono"
+                >
+                  {formatDelta(d.delta)}
+                </text>
+                <text x={cx} y={DELTA_H - 8} textAnchor="middle" className="dp-axis">
+                  R{d.round}
+                </text>
+              </g>
+            )
+          })}
+        </svg>
+      </div>
+    </figure>
+  )
+}
+
+function statusNote(d: RoundDelta): string {
+  if (d.status === 'dnf') return 'DNF'
+  if (d.status === 'dns') return 'DNS'
+  if (d.status === 'dsq') return 'DSQ'
+  if (d.status === 'absent') return '—'
+  return ''
+}
+
+function RoundsTable({ summary, deltas }: { summary: DriverSummary; deltas: RoundDelta[] }) {
+  return (
+    <div className="dp-scroll">
+      <table className="dp-table">
+        <thead>
+          <tr>
+            <th className="l">Rnd</th>
+            <th className="l">Grand Prix</th>
+            <th className="r">Grid</th>
+            <th className="r">Race</th>
+            <th className="r">Δ</th>
+            <th className="r">Pts</th>
+            <th className="l"></th>
+          </tr>
+        </thead>
+        <tbody>
+          {summary.rounds.map((r, i) => {
+            const d = deltas[i]
+            return (
+              <tr key={r.meeting_key}>
+                <td className="mono dp-td-dim">R{i + 1}</td>
+                <td>
+                  <span className="dp-flag" aria-hidden="true">
+                    {countryFlag({ country_code: r.country_code, country_flag: '' })}
+                  </span>
+                  {r.meeting_name}
+                </td>
+                <td className="r mono">{formatPosition(d.grid)}</td>
+                <td className="r mono">{formatPosition(d.finish)}</td>
+                <td
+                  className="r mono"
+                  style={{
+                    color:
+                      d.delta == null
+                        ? 'var(--text-3)'
+                        : d.delta > 0
+                          ? 'var(--green)'
+                          : d.delta < 0
+                            ? 'var(--red)'
+                            : 'var(--text-2)',
+                  }}
+                >
+                  {formatDelta(d.delta)}
+                </td>
+                <td className="r mono">{fmtPts(r.points)}</td>
+                <td className="dp-td-dim mono">{statusNote(d)}</td>
+              </tr>
+            )
+          })}
+        </tbody>
+      </table>
+    </div>
+  )
+}

frontend/src/pages/LiveTimingPage.tsx

@@ -1,34 +1,55 @@
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { fetchLiveState } from '../api'
-import type { LiveStreamData } from '../types'
+import type { LivePosition, LiveStreamData } from '../types'
 import {
   loadPinnedDrivers,
+  mergeVisibleSectors,
   parseLiveStateEvent,
+  rowsWithVisibleSectors,
   savePinnedDrivers,
   sortLiveTimingRows,
   togglePin,
 } from '../lib/live'
+import type { VisibleSectorState } from '../lib/live'
 import type { GapHistoryMap } from '../lib/gapHistory'
 import { recordGapSamples } from '../lib/gapHistory'
 import { battleNumbers, detectBattles } from '../lib/battles'
+import type { LiveEvent } from '../lib/events'
+import { appendEvents, diffSnapshots, sessionSignature } from '../lib/events'
 import { SessionBanner } from '../components/live/SessionBanner'
 import { TrackStatusBanner } from '../components/live/TrackStatusBanner'
 import { TimingTower } from '../components/live/TimingTower'
 import { BattleChips } from '../components/live/BattleChips'
 import { PinnedDrivers } from '../components/live/PinnedDrivers'
 import { RaceControlFeed } from '../components/live/RaceControlFeed'
-import { Radio } from 'lucide-react'
+import { EventRail } from '../components/live/EventRail'
+import { TeamRadioTicker } from '../components/live/TeamRadioTicker'
+import { TyreDegPanel } from '../components/live/TyreDegPanel'
+import { Archive, Radio } from 'lucide-react'
 
 type StreamStatus = 'connecting' | 'connected' | 'disconnected' | 'error'
 
 export function LiveTimingPage() {
-  const [snapshot, setSnapshot] = useState<LiveStreamData | null>(null)
+  const [activeSnapshot, setActiveSnapshot] = useState<LiveStreamData | null>(null)
+  const [archiveSnapshot, setArchiveSnapshot] = useState<LiveStreamData | null>(null)
+  const [archivePositions, setArchivePositions] = useState<Record<string, LivePosition>>({})
+  const [archiveSnapshotAt, setArchiveSnapshotAt] = useState<string | null>(null)
+  const [archiveMode, setArchiveMode] = useState(false)
   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 [visibleSectors, setVisibleSectors] = useState<VisibleSectorState>({})
+  const [positions, setPositions] = useState<Record<string, LivePosition>>({})
+  const [events, setEvents] = useState<LiveEvent[]>([])
+  const prevSnapshotRef = useRef<LiveStreamData | null>(null)
+  const sessionSigRef = useRef('')
+  const isLiveRef = useRef(false)
+  const archiveModeRef = useRef(false)
+  const snapshot = isLive ? activeSnapshot : archiveMode ? archiveSnapshot : null
+  const hasArchive = Boolean(archiveSnapshot)
 
   const { data, isLoading, isError, error } = useQuery({
     queryKey: ['live-state'],
@@ -38,10 +59,29 @@ export function LiveTimingPage() {
 
   useEffect(() => {
     if (!data) return
-    setIsLive(data.is_live)
-    setSnapshot(data.data)
+    const nextLive = data.is_live && Boolean(data.data)
+    setIsLive(nextLive)
+    isLiveRef.current = nextLive
+    if (nextLive && data.data) {
+      setActiveSnapshot(data.data)
+      setArchiveMode(false)
+      return
+    }
+
+    setActiveSnapshot(null)
+    setArchiveSnapshot(data.last_snapshot ?? null)
+    setArchivePositions(data.last_positions ?? {})
+    setArchiveSnapshotAt(data.last_snapshot_at ?? null)
+    setArchiveMode((current) => current && Boolean(data.last_snapshot))
   }, [data])
 
+  useEffect(() => {
+    archiveModeRef.current = archiveMode
+    if (archiveMode) {
+      setPositions(archivePositions)
+    }
+  }, [archiveMode, archivePositions])
+
   useEffect(() => {
     const timer = window.setInterval(() => setNow(Date.now()), 1000)
     return () => window.clearInterval(timer)
@@ -64,8 +104,23 @@ export function LiveTimingPage() {
     events.addEventListener('snapshot', (event) => {
       const state = parseLiveStateEvent(event.data)
       if (!state || cancelled) return
-      setIsLive(state.is_live)
-      setSnapshot(state.data)
+      const nextLive = state.is_live && Boolean(state.data)
+      setIsLive(nextLive)
+      if (nextLive && state.data) {
+        if (!isLiveRef.current || archiveModeRef.current) {
+          setPositions({})
+        }
+        isLiveRef.current = true
+        setActiveSnapshot(state.data)
+        setArchiveMode(false)
+      } else {
+        isLiveRef.current = false
+        setActiveSnapshot(null)
+        setArchiveSnapshot(state.last_snapshot ?? null)
+        setArchivePositions(state.last_positions ?? {})
+        setArchiveSnapshotAt(state.last_snapshot_at ?? null)
+        setArchiveMode((current) => current && Boolean(state.last_snapshot))
+      }
       setStreamStatus('connected')
     })
 
@@ -73,6 +128,17 @@ export function LiveTimingPage() {
       if (!cancelled) setStreamStatus('connected')
     })
 
+    events.addEventListener('positions', (event) => {
+      if (cancelled) return
+      try {
+        const parsed = JSON.parse(event.data) as Record<string, LivePosition>
+        setPositions(parsed && typeof parsed === 'object' ? parsed : {})
+        setStreamStatus('connected')
+      } catch {
+        // Ignore malformed transient frames; the next 4Hz update will replace it.
+      }
+    })
+
     events.onerror = () => {
       if (!cancelled) setStreamStatus('disconnected')
     }
@@ -83,7 +149,34 @@ export function LiveTimingPage() {
     }
   }, [])
 
-  const rows = useMemo(() => sortLiveTimingRows(snapshot), [snapshot])
+  // Synthesize "what just happened" events from successive snapshots; the
+  // buffer resets whenever a different session starts streaming.
+  useEffect(() => {
+    if (!snapshot) return
+    const signature = sessionSignature(snapshot.Session)
+    const prev = prevSnapshotRef.current
+    prevSnapshotRef.current = snapshot
+    if (signature !== sessionSigRef.current) {
+      sessionSigRef.current = signature
+      setEvents([])
+      return
+    }
+    if (!prev || prev === snapshot) return
+    const fresh = diffSnapshots(prev, snapshot)
+    if (fresh.length > 0) setEvents((current) => appendEvents(current, fresh))
+  }, [snapshot])
+
+  const rawRows = useMemo(() => sortLiveTimingRows(snapshot), [snapshot])
+
+  useEffect(() => {
+    if (rawRows.length === 0) {
+      setVisibleSectors({})
+      return
+    }
+    setVisibleSectors((prev) => mergeVisibleSectors(prev, rawRows))
+  }, [rawRows])
+
+  const rows = useMemo(() => rowsWithVisibleSectors(rawRows, visibleSectors), [rawRows, visibleSectors])
 
   // One interval sample per received snapshot, ring-buffered per driver.
   useEffect(() => {
@@ -110,6 +203,19 @@ export function LiveTimingPage() {
     setPinned((prev) => togglePin(prev, racingNumber))
   }
 
+  const handleViewArchive = () => {
+    if (!archiveSnapshot) return
+    setIsLive(false)
+    setArchiveMode(true)
+    setPositions(archivePositions)
+  }
+
+  const archiveTimestamp = archiveSnapshotAt ? new Date(archiveSnapshotAt) : null
+  const archiveLabel =
+    archiveTimestamp && !Number.isNaN(archiveTimestamp.getTime())
+      ? `Archived snapshot from ${archiveTimestamp.toLocaleString()}`
+      : 'Archived live timing snapshot'
+
   return (
     <div className="page live-page" data-testid="live-page">
       {isError && (
@@ -118,12 +224,18 @@ export function LiveTimingPage() {
         </div>
       )}
 
-      {streamStatus === 'disconnected' && snapshot && (
+      {streamStatus === 'disconnected' && snapshot && !archiveMode && (
         <div className="live-status-strip live-status-warn">
           Stream disconnected — showing last received snapshot
         </div>
       )}
 
+      {archiveMode && snapshot && (
+        <div className="live-status-strip live-status-archive" data-testid="live-archive-strip">
+          {archiveLabel} — live updates are paused for this archive view
+        </div>
+      )}
+
       {isLoading && !snapshot && (
         <div className="loading-state">connecting to live timing…</div>
       )}
@@ -138,14 +250,28 @@ export function LiveTimingPage() {
           <p className="empty-state-desc" style={{ color: 'var(--text-2)' }}>
             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>
+          {hasArchive && (
+            <button type="button" className="live-archive-btn" onClick={handleViewArchive}>
+              <Archive size={15} />
+              View Last Session
+            </button>
+          )}
         </div>
       )}
 
       {snapshot && (
         <>
-          <SessionBanner isLive={isLive} snapshot={snapshot} connection={streamStatus} now={now} />
+          <SessionBanner
+            isLive={isLive}
+            isArchive={archiveMode}
+            snapshot={snapshot}
+            rows={rows}
+            connection={streamStatus}
+            now={now}
+          />
           <TrackStatusBanner status={snapshot.TrackStatus} />
           <PinnedDrivers rows={rows} history={gapHistory} pinned={pinned} onToggle={handleTogglePin} />
+          <TyreDegPanel rows={rows} sessionType={snapshot.Session?.SessionType} pinned={pinned} />
           <div className="live-columns">
             <div className="live-tower-col">
               <div className="sec-header">
@@ -160,11 +286,17 @@ export function LiveTimingPage() {
                 battleNumbers={inBattle}
                 pinned={pinned}
                 onTogglePin={handleTogglePin}
-                sessionType={snapshot.Session?.SessionType}
+                session={snapshot.Session}
               />
             </div>
             <div className="live-rc-col">
+              <TeamRadioTicker
+                captures={snapshot.TeamRadio ?? []}
+                driverInfo={snapshot.DriverInfo}
+                session={snapshot.Session}
+              />
               <RaceControlFeed messages={snapshot.RCMessages ?? []} driverInfo={snapshot.DriverInfo} />
+              <EventRail events={events} driverInfo={snapshot.DriverInfo} />
             </div>
           </div>
         </>

frontend/src/pages/RaceHubPage.tsx

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

frontend/src/pages/RacePreviewPage.tsx

@@ -0,0 +1,442 @@
+import { useEffect, useMemo, useState, type ReactNode } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import {
+  fetchChampionshipHub,
+  fetchMeetings,
+  fetchResults,
+  fetchSeasons,
+  fetchSessions,
+  fetchStartingGrid,
+  fetchTrackOutline,
+} from '../api'
+import { countryAccent, countryFlag, formatGpDateRange } from '../lib/gpIdentity'
+import {
+  buildTitleFightContext,
+  countdownTargetSession,
+  extractPodium,
+  extractPole,
+  findPriorYearMeetingByCircuit,
+  findRaceSession,
+  formatPointsGap,
+  isSprintWeekend,
+  pickPreviewMeeting,
+  RACE_WIN_POINTS,
+  SPRINT_WEEKEND_MAX_POINTS,
+} from '../lib/preview'
+import { formatCountdown, formatSessionScheduleTime, sessionStartTime, sortSessionsByStart } from '../lib/schedule'
+import { buildOutlinePath } from '../lib/trackmap'
+import { teamColor } from '../utils'
+import type { Meeting, Session, TrackOutline } from '../types'
+import '../styles/preview.css'
+
+function SectionState({
+  loading,
+  error,
+  empty,
+  emptyMessage,
+  children,
+}: {
+  loading?: boolean
+  error?: Error | null
+  empty?: boolean
+  emptyMessage?: string
+  children: ReactNode
+}) {
+  if (loading) {
+    return <div className="preview-section-state">Loading…</div>
+  }
+  if (error) {
+    return (
+      <div className="preview-section-state error">
+        {error instanceof Error ? error.message : 'Failed to load'}
+      </div>
+    )
+  }
+  if (empty) {
+    return <div className="preview-section-state">{emptyMessage ?? 'No data available'}</div>
+  }
+  return <>{children}</>
+}
+
+function TrackOutlineCard({
+  outline,
+  loading,
+  error,
+  accent,
+}: {
+  outline: TrackOutline | null | undefined
+  loading: boolean
+  error: Error | null
+  accent: string
+}) {
+  const outlinePath = useMemo(() => buildOutlinePath(outline?.points ?? []), [outline])
+
+  return (
+    <section className="preview-card" data-testid="preview-track-card">
+      <h2 className="preview-card-title">Circuit</h2>
+      <SectionState
+        loading={loading}
+        error={error}
+        empty={!outline || !outlinePath}
+        emptyMessage="Track outline unavailable for this circuit"
+      >
+        <div className="preview-track-stage" style={{ ['--preview-accent' as string]: accent }}>
+          <svg className="preview-track-svg" viewBox="0 0 100 100" role="img" aria-label="Circuit outline">
+            <path className="preview-track-shadow" d={outlinePath} />
+            <path className="preview-track-outline" d={outlinePath} />
+          </svg>
+        </div>
+      </SectionState>
+    </section>
+  )
+}
+
+function LastYearCard({
+  year,
+  loading,
+  error,
+  podium,
+  pole,
+  isFirstTime,
+}: {
+  year: number | null
+  loading: boolean
+  error: Error | null
+  podium: ReturnType<typeof extractPodium>
+  pole: ReturnType<typeof extractPole>
+  isFirstTime: boolean
+}) {
+  return (
+    <section className="preview-card" data-testid="preview-last-year-card">
+      <h2 className="preview-card-title">Last year here</h2>
+      {year != null && !isFirstTime && <p className="preview-card-sub">{year} race weekend</p>}
+      <SectionState
+        loading={loading}
+        error={error}
+        empty={isFirstTime || podium.length === 0}
+        emptyMessage={
+          isFirstTime
+            ? 'First time on the calendar — no prior race at this circuit'
+            : 'No race results available for the previous visit'
+        }
+      >
+        <div className="preview-podium">
+          {podium.map((place) => (
+            <div key={place.position} className="preview-podium-row">
+              <span className="preview-podium-pos">P{place.position}</span>
+              <span className="preview-podium-code" style={{ color: teamColor(place.team_colour) }}>
+                {place.name_acronym}
+              </span>
+              <span className="preview-podium-team">{place.team_name}</span>
+            </div>
+          ))}
+        </div>
+        {pole && (
+          <p className="preview-pole">
+            Pole: <strong style={{ color: teamColor(pole.team_colour) }}>{pole.name_acronym}</strong>{' '}
+            ({pole.team_name})
+          </p>
+        )}
+      </SectionState>
+    </section>
+  )
+}
+
+function TitleFightCard({
+  loading,
+  error,
+  drivers,
+  sprintWeekend,
+  season,
+}: {
+  loading: boolean
+  error: Error | null
+  drivers: ReturnType<typeof buildTitleFightContext>
+  sprintWeekend: boolean
+  season: number | null
+}) {
+  return (
+    <section className="preview-card preview-card--wide" data-testid="preview-title-fight-card">
+      <h2 className="preview-card-title">Title fight context</h2>
+      {season != null && <p className="preview-card-sub">{season} drivers&apos; championship · top 3</p>}
+      <SectionState
+        loading={loading}
+        error={error}
+        empty={drivers.length === 0}
+        emptyMessage="Championship standings not available"
+      >
+        <table className="preview-title-table">
+          <thead>
+            <tr>
+              <th>Driver</th>
+              <th>Pts</th>
+              <th>Gap</th>
+              <th>If win (+{RACE_WIN_POINTS})</th>
+            </tr>
+          </thead>
+          <tbody>
+            {drivers.map((d) => (
+              <tr key={d.name_acronym}>
+                <td>
+                  <span style={{ color: teamColor(d.team_colour), fontWeight: 600 }}>{d.name_acronym}</span>
+                </td>
+                <td className="mono">{d.points}</td>
+                <td className="mono">{formatPointsGap(d.gapToLeader)}</td>
+                <td className="mono">
+                  {d.position === 1 ? 'LEADER' : formatPointsGap(d.gapAfterRaceWin)}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+        {sprintWeekend && (
+          <p className="preview-sprint-note" data-testid="preview-sprint-note">
+            Sprint weekend: up to {SPRINT_WEEKEND_MAX_POINTS} pts available (race win {RACE_WIN_POINTS} + sprint win
+            8). Max gain would reduce gaps by {SPRINT_WEEKEND_MAX_POINTS} vs a standard race win.
+          </p>
+        )}
+      </SectionState>
+    </section>
+  )
+}
+
+function PreviewHeader({
+  meeting,
+  sessions,
+  countdownSession,
+  now,
+  accent,
+}: {
+  meeting: Meeting
+  sessions: Session[]
+  countdownSession: Session | null
+  now: Date
+  accent: string
+}) {
+  const countdownTarget = countdownSession ? sessionStartTime(countdownSession) : null
+
+  return (
+    <header
+      className="preview-header"
+      data-testid="preview-header"
+      style={{ ['--preview-accent' as string]: accent }}
+    >
+      <div className="preview-header-accent" />
+      <div className="preview-header-body">
+        <div className="preview-header-top">
+          <div>
+            <h1 className="preview-gp-name">
+              {countryFlag(meeting) && <span className="preview-gp-flag">{countryFlag(meeting)}</span>}
+              {meeting.meeting_name}
+            </h1>
+            <p className="preview-circuit">
+              {meeting.circuit_short_name}
+              {meeting.location ? ` · ${meeting.location}` : ''}
+              {formatGpDateRange(meeting) ? ` · ${formatGpDateRange(meeting)}` : ''}
+            </p>
+          </div>
+          {countdownTarget && (
+            <div className="preview-countdown" data-testid="preview-countdown">
+              <span className="preview-countdown-label">
+                {countdownSession?.session_name ?? 'Next session'}
+              </span>
+              <span className="preview-countdown-value">{formatCountdown(countdownTarget, now)}</span>
+            </div>
+          )}
+        </div>
+        {sessions.length > 0 && (
+          <div className="preview-schedule" data-testid="preview-schedule">
+            {sessions.map((session) => (
+              <div key={session.session_key} className="preview-schedule-item">
+                <span className="preview-schedule-name">{session.session_name}</span>
+                <span className="preview-schedule-time">{formatSessionScheduleTime(session.date_start)}</span>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </header>
+  )
+}
+
+export function RacePreviewPage() {
+  const [now, setNow] = useState(() => Date.now())
+
+  useEffect(() => {
+    const timer = window.setInterval(() => setNow(Date.now()), 1000)
+    return () => window.clearInterval(timer)
+  }, [])
+
+  const nowDate = useMemo(() => new Date(now), [now])
+
+  const seasonsQuery = useQuery({
+    queryKey: ['seasons'],
+    queryFn: fetchSeasons,
+  })
+
+  const latestSeason = seasonsQuery.data?.[0] ?? null
+
+  const meetingsQuery = useQuery({
+    queryKey: ['meetings', latestSeason, 'auto'],
+    queryFn: () => fetchMeetings(latestSeason!, 'auto'),
+    enabled: latestSeason != null,
+  })
+
+  const previewMeeting = useMemo(
+    () => pickPreviewMeeting(meetingsQuery.data ?? [], nowDate),
+    [meetingsQuery.data, nowDate],
+  )
+
+  const sessionsQuery = useQuery({
+    queryKey: ['sessions', previewMeeting?.meeting_key, 'auto'],
+    queryFn: () => fetchSessions(previewMeeting!.meeting_key, 'auto'),
+    enabled: previewMeeting != null,
+  })
+
+  const sessions = useMemo(
+    () => sortSessionsByStart(sessionsQuery.data ?? []),
+    [sessionsQuery.data],
+  )
+
+  const countdownSession = useMemo(() => countdownTargetSession(sessions, nowDate), [sessions, nowDate])
+  const sprintWeekend = useMemo(() => isSprintWeekend(sessions), [sessions])
+
+  const priorYear = previewMeeting ? previewMeeting.year - 1 : null
+
+  const priorMeetingsQuery = useQuery({
+    queryKey: ['meetings', priorYear, 'auto'],
+    queryFn: () => fetchMeetings(priorYear!, 'auto'),
+    enabled: priorYear != null && previewMeeting != null,
+  })
+
+  const priorMeeting = useMemo(
+    () => findPriorYearMeetingByCircuit(priorMeetingsQuery.data ?? [], previewMeeting?.circuit_key),
+    [priorMeetingsQuery.data, previewMeeting?.circuit_key],
+  )
+
+  const priorSessionsQuery = useQuery({
+    queryKey: ['sessions', priorMeeting?.meeting_key, 'auto'],
+    queryFn: () => fetchSessions(priorMeeting!.meeting_key, 'auto'),
+    enabled: priorMeeting != null,
+  })
+
+  const priorRaceSession = useMemo(
+    () => findRaceSession(priorSessionsQuery.data ?? []),
+    [priorSessionsQuery.data],
+  )
+
+  const priorResultsQuery = useQuery({
+    queryKey: ['results', priorRaceSession?.session_key, 'auto'],
+    queryFn: () => fetchResults(priorRaceSession!.session_key, 'auto'),
+    enabled: priorRaceSession != null,
+  })
+
+  const priorGridQuery = useQuery({
+    queryKey: ['grid', priorRaceSession?.session_key, 'auto'],
+    queryFn: () => fetchStartingGrid(priorRaceSession!.session_key, 'auto'),
+    enabled: priorRaceSession != null,
+  })
+
+  const trackOutlineQuery = useQuery({
+    queryKey: ['track-outline', previewMeeting?.circuit_key, previewMeeting?.year],
+    queryFn: () => fetchTrackOutline(previewMeeting!.circuit_key!, previewMeeting!.year),
+    enabled: previewMeeting?.circuit_key != null && previewMeeting.circuit_key > 0,
+  })
+
+  const championshipQuery = useQuery({
+    queryKey: ['championship-hub', latestSeason],
+    queryFn: () => fetchChampionshipHub(latestSeason!),
+    enabled: latestSeason != null,
+  })
+
+  const podium = useMemo(() => extractPodium(priorResultsQuery.data ?? []), [priorResultsQuery.data])
+  const pole = useMemo(() => extractPole(priorGridQuery.data ?? []), [priorGridQuery.data])
+  const titleFight = useMemo(
+    () => (championshipQuery.data ? buildTitleFightContext(championshipQuery.data) : []),
+    [championshipQuery.data],
+  )
+
+  const accent = countryAccent(previewMeeting)
+  const isFirstTimeCircuit = priorMeeting == null && priorYear != null && !priorMeetingsQuery.isLoading
+
+  if (seasonsQuery.isLoading || meetingsQuery.isLoading) {
+    return <div className="page loading-state" data-testid="preview-loading">loading preview…</div>
+  }
+
+  if (seasonsQuery.isError || meetingsQuery.isError) {
+    const err = seasonsQuery.error ?? meetingsQuery.error
+    return (
+      <div className="page error-box" data-testid="preview-error">
+        {err instanceof Error ? err.message : 'Failed to load preview'}
+      </div>
+    )
+  }
+
+  if (!previewMeeting) {
+    return (
+      <div className="preview-page" data-testid="preview-season-over">
+        <div className="preview-empty">
+          <span className="preview-empty-eyebrow mono">box-box · race preview</span>
+          <h1 className="preview-empty-title">Season complete</h1>
+          <p className="preview-empty-sub">
+            No upcoming races on the {latestSeason ?? 'current'} calendar. Check back when the next season schedule is
+            published.
+          </p>
+        </div>
+        {titleFight.length > 0 && (
+          <TitleFightCard
+            loading={championshipQuery.isLoading}
+            error={championshipQuery.isError ? (championshipQuery.error as Error) : null}
+            drivers={titleFight}
+            sprintWeekend={false}
+            season={latestSeason}
+          />
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <div className="preview-page" data-testid="preview-page">
+      <PreviewHeader
+        meeting={previewMeeting}
+        sessions={sessions}
+        countdownSession={countdownSession}
+        now={nowDate}
+        accent={accent}
+      />
+
+      <div className="preview-grid">
+        <TrackOutlineCard
+          outline={trackOutlineQuery.data}
+          loading={trackOutlineQuery.isLoading}
+          error={trackOutlineQuery.isError ? (trackOutlineQuery.error as Error) : null}
+          accent={accent}
+        />
+
+        <LastYearCard
+          year={priorMeeting?.year ?? priorYear}
+          loading={priorMeetingsQuery.isLoading || priorSessionsQuery.isLoading || priorResultsQuery.isLoading}
+          error={
+            priorMeetingsQuery.isError
+              ? (priorMeetingsQuery.error as Error)
+              : priorResultsQuery.isError
+                ? (priorResultsQuery.error as Error)
+                : null
+          }
+          podium={podium}
+          pole={pole}
+          isFirstTime={isFirstTimeCircuit}
+        />
+      </div>
+
+      <TitleFightCard
+        loading={championshipQuery.isLoading}
+        error={championshipQuery.isError ? (championshipQuery.error as Error) : null}
+        drivers={titleFight}
+        sprintWeekend={sprintWeekend}
+        season={latestSeason}
+      />
+    </div>
+  )
+}

frontend/src/router.tsx

@@ -6,11 +6,17 @@ import { DataLibraryPage } from './pages/DataLibraryPage'
 import { LiveTimingPage } from './pages/LiveTimingPage'
 import { BriefingPage } from './pages/BriefingPage'
 import { ChampionshipPage } from './pages/ChampionshipPage'
+import { DriverProfilePage } from './pages/DriverProfilePage'
+import { RacePreviewPage } from './pages/RacePreviewPage'
 
 type RaceHubSearch = {
   session_key?: number
 }
 
+type DriverProfileSearch = {
+  year?: number
+}
+
 const rootRoute = createRootRoute({
   component: () => (
     <>
@@ -64,12 +70,32 @@ export const championshipRoute = createRoute({
   component: ChampionshipPage,
 })
 
+export const driverProfileRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/drivers/$driverNumber',
+  validateSearch: (search: Record<string, unknown>): DriverProfileSearch => {
+    const year = Number(search.year)
+    return Number.isFinite(year) && year > 0 ? { year } : {}
+  },
+  component: function DriverProfileRoute() {
+    const { driverNumber } = driverProfileRoute.useParams()
+    const { year } = driverProfileRoute.useSearch()
+    return <DriverProfilePage driverNumber={Number(driverNumber) || 0} year={year} />
+  },
+})
+
 export const briefingRoute = createRoute({
   getParentRoute: () => rootRoute,
   path: '/briefing',
   component: BriefingPage,
 })
 
+export const previewRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/preview',
+  component: RacePreviewPage,
+})
+
 const routeTree = rootRoute.addChildren([
   commandCenterRoute,
   raceHubRoute,
@@ -77,7 +103,9 @@ const routeTree = rootRoute.addChildren([
   dataLibraryRoute,
   liveTimingRoute,
   championshipRoute,
+  driverProfileRoute,
   briefingRoute,
+  previewRoute,
 ])
 
 export const router = createRouter({ routeTree })

frontend/src/styles/app.css

@@ -361,6 +361,7 @@ a { color: inherit; text-decoration: none; }
 }
 .badge-local   { background: rgba(57,199,58,.12); color: var(--green); border: 1px solid rgba(57,199,58,.25); }
 .badge-partial { background: rgba(255,214,0,.12); color: var(--yellow); border: 1px solid rgba(255,214,0,.25); }
+.badge-cancelled { background: rgba(255,107,53,.12); color: #ff8a5c; border: 1px solid rgba(255,107,53,.28); }
 .badge-none    { background: rgba(80,80,80,.12); color: var(--text-3); border: 1px solid var(--border); }
 
 /* ── Dataset strip ── */
@@ -538,12 +539,17 @@ a { color: inherit; text-decoration: none; }
 }
 
 /* ── Live timing ── */
-.live-page { max-width: 1120px; }
+.live-page { max-width: 1320px; }
 
 .live-banner {
-  padding-bottom: var(--s4);
-  border-bottom: 1px solid var(--border);
+  padding: var(--s4) var(--s5);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-left: 3px solid var(--red);
+  border-radius: 8px;
   margin-bottom: var(--s5);
+  background:
+    linear-gradient(90deg, rgba(225, 6, 0, 0.12), transparent 28%),
+    rgba(255, 255, 255, 0.025);
 }
 
 .live-banner-row {
@@ -561,7 +567,7 @@ a { color: inherit; text-decoration: none; }
 }
 
 .live-banner h1 {
-  font-size: 18px;
+  font-size: 24px;
   line-height: 1.2;
 }
 
@@ -570,12 +576,51 @@ a { color: inherit; text-decoration: none; }
   font-size: 12px;
 }
 
+.live-session-board {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--s4);
+  flex-wrap: wrap;
+  text-align: right;
+}
+
+.live-clock {
+  min-width: 148px;
+  color: var(--text);
+  font-size: 32px;
+  font-weight: 800;
+  line-height: 1;
+  letter-spacing: 0;
+  text-align: right;
+}
+
+.live-phase-pill {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 54px;
+  height: 44px;
+  padding: 0 var(--s3);
+  border: 1px solid rgba(255, 214, 0, 0.36);
+  border-radius: 4px;
+  background: rgba(255, 214, 0, 0.14);
+  color: var(--yellow);
+  font-size: 18px;
+  font-weight: 900;
+}
+
 .live-banner-meta {
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  gap: var(--s3);
+  gap: var(--s2);
   flex-wrap: wrap;
+  max-width: 280px;
+  color: var(--text-2);
+  font-size: 11px;
+  font-family: var(--f-mono);
+  text-transform: uppercase;
 }
 
 .live-weather-strip {
@@ -604,10 +649,145 @@ a { color: inherit; text-decoration: none; }
   gap: var(--s5);
 }
 
+.live-track-panel {
+  margin-bottom: var(--s5);
+}
+
+.track-map-stage {
+  position: relative;
+  min-height: 360px;
+  border: 1px solid var(--border);
+  background: var(--surface);
+  overflow: hidden;
+}
+
+.track-map-svg {
+  display: block;
+  width: 100%;
+  height: 360px;
+}
+
+.track-map-outline-shadow,
+.track-map-outline {
+  fill: none;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.track-map-outline-shadow {
+  stroke: rgba(255, 255, 255, 0.08);
+  stroke-width: 5;
+}
+
+.track-map-outline {
+  stroke: var(--surface-3);
+  stroke-width: 2.4;
+}
+
+.track-car {
+  cursor: pointer;
+  outline: none;
+}
+
+.track-car circle {
+  stroke: #050505;
+  stroke-width: 0.7;
+  transition: r 0.12s, opacity 0.12s, stroke 0.12s;
+}
+
+.track-car text {
+  fill: #fff;
+  font-family: var(--f-mono);
+  font-size: 2.1px;
+  font-weight: 800;
+  pointer-events: none;
+  text-anchor: middle;
+  paint-order: stroke;
+  stroke: rgba(0, 0, 0, 0.85);
+  stroke-width: 0.7;
+}
+
+.track-car:hover circle,
+.track-car:focus-visible circle,
+.track-car-selected circle {
+  r: 3.7;
+  stroke: #fff;
+}
+
+.track-car-inactive {
+  opacity: 0.35;
+  filter: grayscale(0.8);
+}
+
+.track-map-empty {
+  display: grid;
+  min-height: 160px;
+  place-items: center;
+  color: var(--text-3);
+  font-family: var(--f-mono);
+  font-size: 11px;
+  text-transform: uppercase;
+}
+
+.track-map-overlay {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.track-telemetry {
+  position: absolute;
+  right: var(--s5);
+  bottom: var(--s5);
+  width: min(260px, calc(100% - 32px));
+  padding: var(--s4);
+  border: 1px solid var(--border-2);
+  background: rgba(10, 10, 10, 0.88);
+  backdrop-filter: blur(10px);
+}
+
+.track-telemetry-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--s4);
+  margin-bottom: var(--s3);
+  color: var(--text-3);
+  font-family: var(--f-mono);
+  font-size: 10px;
+  text-transform: uppercase;
+}
+
+.track-driver-code {
+  color: var(--text);
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.track-telemetry dl {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: var(--s3);
+}
+
+.track-telemetry dt {
+  color: var(--text-3);
+  font-family: var(--f-mono);
+  font-size: 9px;
+}
+
+.track-telemetry dd {
+  color: var(--text);
+  font-family: var(--f-mono);
+  font-size: 12px;
+  font-weight: 700;
+  min-width: 0;
+}
+
 @media (min-width: 900px) {
   .live-columns {
     display: grid;
-    grid-template-columns: minmax(0, 1fr) 340px;
+    grid-template-columns: minmax(0, 1fr) 318px;
     gap: var(--s5);
     align-items: start;
   }
@@ -628,6 +808,12 @@ a { color: inherit; text-decoration: none; }
   color: var(--yellow);
 }
 
+.live-status-archive {
+  background: rgba(70, 140, 255, 0.08);
+  border: 1px solid rgba(70, 140, 255, 0.24);
+  color: #8bb7ff;
+}
+
 /* ── Live empty state ── */
 .live-empty-status {
   display: flex;
@@ -635,6 +821,29 @@ a { color: inherit; text-decoration: none; }
   margin-bottom: var(--s4);
 }
 
+.live-archive-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--s2);
+  margin-top: var(--s5);
+  min-height: 36px;
+  padding: 0 var(--s4);
+  border: 1px solid rgba(255, 255, 255, 0.16);
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.06);
+  color: var(--text);
+  font-family: var(--f-mono);
+  font-size: 11px;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+.live-archive-btn:hover {
+  border-color: rgba(255, 255, 255, 0.28);
+  background: rgba(255, 255, 255, 0.1);
+}
+
 .mono { font-family: var(--f-mono); }
 
 .live-conn,
@@ -668,7 +877,7 @@ a { color: inherit; text-decoration: none; }
 .live-tower { 
   font-variant-numeric: tabular-nums; 
   border-collapse: separate;
-  border-spacing: 0 4px;
+  border-spacing: 0 3px;
 }
 .live-tower th {
   border-bottom: none !important;
@@ -698,12 +907,55 @@ a { color: inherit; text-decoration: none; }
 .live-tower .in-pit td { background: rgba(0, 80, 160, 0.2) !important; }
 .live-tower .pit-out td { background: rgba(57, 199, 58, 0.15) !important; }
 .live-tower .retired td { opacity: 0.5; filter: grayscale(80%); }
+.live-tower .danger-row td {
+  background: rgba(225, 6, 0, 0.095);
+}
+.live-tower .danger-row td:first-child {
+  box-shadow: inset 3px 0 0 rgba(225, 6, 0, 0.78);
+}
+.live-tower .flying-row td {
+  background: rgba(194, 120, 255, 0.055);
+}
+.live-tower .flying-row td:first-child {
+  box-shadow: inset 3px 0 0 rgba(194, 120, 255, 0.68);
+}
+.live-tower .danger-row.flying-row td:first-child {
+  box-shadow: inset 3px 0 0 rgba(225, 6, 0, 0.78), inset 6px 0 0 rgba(194, 120, 255, 0.68);
+}
+
+.cutoff-separator td {
+  padding: 6px var(--s3) !important;
+  background: transparent !important;
+  border-radius: 0 !important;
+  border-top: 1px dashed rgba(225, 6, 0, 0.78) !important;
+  border-bottom: none !important;
+  color: #ff8a8a;
+  font-size: 10px;
+  font-family: var(--f-mono);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.cutoff-separator span,
+.cutoff-separator strong,
+.cutoff-separator em {
+  margin-right: var(--s4);
+  font-style: normal;
+}
+
+.cutoff-separator strong {
+  color: var(--text);
+}
+
+.cutoff-separator em {
+  color: #ffb0b0;
+}
 
 /* Race Control Panel & Animations */
 .panel-glass {
   background: rgba(20, 20, 20, 0.6);
   border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 12px;
+  border-radius: 8px;
   padding: 16px;
   backdrop-filter: blur(12px);
   max-height: calc(100vh - 120px);
@@ -788,6 +1040,7 @@ a { color: inherit; text-decoration: none; }
 .badge-flying  { background: rgba(194,120,255,.14); color: var(--purple); border: 1px solid rgba(194,120,255,.26); }
 .badge-knocked { background: rgba(225,6,0,.12);   color: #ff6b6b;        border: 1px solid rgba(225,6,0,.24); }
 .badge-cutoff  { background: rgba(255,214,0,.12); color: var(--yellow);  border: 1px solid rgba(255,214,0,.25); }
+.badge-risk    { background: rgba(225,6,0,.14);   color: #ff8a8a;        border: 1px solid rgba(225,6,0,.28); }
 
 .tyre-soft { background: var(--tyre-soft); color: #fff; }
 .tyre-medium { background: var(--tyre-medium); color: #111; }
@@ -866,6 +1119,24 @@ a { color: inherit; text-decoration: none; }
 
 .spark-cell { line-height: 0; }
 
+.sector-time {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  min-width: 58px;
+  padding: 2px 5px;
+  border-radius: 3px;
+}
+.sector-active {
+  background: rgba(255, 214, 0, 0.08);
+}
+.sector-personal {
+  background: rgba(57, 199, 58, 0.1);
+}
+.sector-overall {
+  background: rgba(194, 120, 255, 0.12);
+}
+
 /* ── Battle highlighting ── */
 .live-tower tr.battle-row td { background: rgba(255,214,0,.045); }
 .live-tower tr.battle-row td:first-child { box-shadow: inset 2px 0 0 rgba(255,214,0,.55); }
@@ -1178,6 +1449,7 @@ a { color: inherit; text-decoration: none; }
 }
 .dl-banner-stats em.dl-stat-full { color: var(--green); }
 .dl-banner-stats em.dl-stat-partial { color: var(--yellow); }
+.dl-banner-stats em.dl-stat-cancelled { color: #ff8a5c; }
 
 .dl-footer-link {
   display: flex;
@@ -1259,6 +1531,7 @@ a { color: inherit; text-decoration: none; }
 }
 .dl-stat-full { color: var(--green); }
 .dl-stat-partial { color: var(--yellow); }
+.dl-stat-cancelled { color: #ff8a5c; }
 
 .dl-content {
   display: flex;
@@ -1328,6 +1601,7 @@ a { color: inherit; text-decoration: none; }
 }
 .session-icon.si-full { background: rgba(57,199,58,0.2); color: var(--green); }
 .session-icon.si-partial { background: rgba(255,214,0,0.2); color: var(--yellow); }
+.session-icon.si-cancelled { background: rgba(255,107,53,0.18); color: #ff8a5c; }
 .session-icon.si-missing { background: rgba(50,50,50,0.5); color: var(--text-3); }
 
 .dl-detail-wrap {
@@ -2967,11 +3241,27 @@ a { color: inherit; text-decoration: none; }
     align-items: flex-start;
     gap: var(--s3);
   }
-  .live-banner-meta {
+  .live-session-board {
     justify-content: flex-start;
+    text-align: left;
     width: 100%;
   }
-  .live-banner h1 { font-size: 16px; }
+  .live-clock {
+    min-width: 0;
+    font-size: 26px;
+    text-align: left;
+  }
+  .live-phase-pill {
+    min-width: 48px;
+    height: 38px;
+    font-size: 16px;
+  }
+  .live-banner-meta {
+    justify-content: flex-start;
+    max-width: none;
+    width: 100%;
+  }
+  .live-banner h1 { font-size: 19px; }
   .live-weather-strip { gap: var(--s3); }
   .live-rc-scroll { max-height: 220px; }
 
@@ -4440,4 +4730,3 @@ a { color: inherit; text-decoration: none; }
   background: #f82f34;
   transform: translateY(-1px);
 }
-

frontend/src/styles/compare-view.css

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

frontend/src/styles/delta-graph.css

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

frontend/src/styles/driver-profile.css

@@ -0,0 +1,289 @@
+/* Driver profile page (/drivers/$driverNumber) */
+
+.dp-page {
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: var(--s6) var(--s5);
+  display: flex;
+  flex-direction: column;
+  gap: var(--s6);
+}
+
+/* --- header --- */
+
+.dp-header {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: var(--s5);
+  padding: var(--s5);
+  padding-left: var(--s6);
+  border: 1px solid var(--border);
+  border-left: 4px solid var(--red);
+  border-radius: var(--r2);
+  background: var(--surface);
+}
+
+.dp-title-row {
+  display: flex;
+  align-items: baseline;
+  gap: var(--s3);
+}
+
+.dp-code {
+  font-size: 13px;
+  letter-spacing: 0.12em;
+  color: var(--text-2);
+  text-transform: uppercase;
+}
+
+.dp-num {
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.dp-name {
+  margin: var(--s2) 0;
+  font-size: 30px;
+  line-height: 1.1;
+  letter-spacing: -0.01em;
+}
+
+.dp-team {
+  display: flex;
+  align-items: center;
+  gap: var(--s3);
+  font-size: 13px;
+  color: var(--text-2);
+}
+
+.dp-team-swatch {
+  width: 10px;
+  height: 10px;
+  border-radius: 2px;
+}
+
+.dp-season {
+  color: var(--text-3);
+}
+
+.dp-stat-rail {
+  display: flex;
+  gap: var(--s5);
+}
+
+.dp-stat {
+  min-width: 72px;
+}
+
+.dp-stat-value {
+  font-size: 22px;
+  font-weight: 700;
+}
+
+.dp-stat-label {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-3);
+}
+
+.dp-back {
+  position: absolute;
+  top: var(--s4);
+  right: var(--s5);
+  font-size: 12px;
+  color: var(--text-3);
+  text-decoration: none;
+}
+
+.dp-back:hover {
+  color: var(--text);
+}
+
+/* --- sections --- */
+
+.dp-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s4);
+}
+
+.dp-section-title {
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--text-2);
+}
+
+.dp-empty {
+  padding: var(--s5);
+  border: 1px dashed var(--border);
+  border-radius: var(--r2);
+  color: var(--text-3);
+  font-size: 13px;
+}
+
+/* --- charts --- */
+
+.dp-form-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 2fr) minmax(200px, 1fr);
+  gap: var(--s5);
+  align-items: stretch;
+}
+
+@media (max-width: 760px) {
+  .dp-form-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.dp-chart {
+  margin: 0;
+  padding: var(--s4);
+  border: 1px solid var(--border);
+  border-radius: var(--r2);
+  background: var(--surface);
+  min-width: 0;
+}
+
+.dp-chart-caption {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-3);
+  margin-bottom: var(--s3);
+}
+
+.dp-chart-svg {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
+.dp-chart-scroll {
+  overflow-x: auto;
+}
+
+.dp-gridline {
+  stroke: var(--border);
+  stroke-width: 1;
+}
+
+.dp-zeroline {
+  stroke: var(--text-3);
+  stroke-width: 1;
+  stroke-dasharray: 3 3;
+}
+
+.dp-axis {
+  fill: var(--text-3);
+  font-family: var(--f-mono);
+  font-size: 10px;
+}
+
+.dp-delta-svg {
+  display: block;
+}
+
+.dp-delta-val {
+  fill: var(--text-2);
+  font-size: 10px;
+}
+
+/* --- form strip --- */
+
+.dp-form-strip {
+  padding: var(--s4);
+  border: 1px solid var(--border);
+  border-radius: var(--r2);
+  background: var(--surface);
+  display: flex;
+  flex-direction: column;
+}
+
+.dp-form-bars {
+  flex: 1;
+  display: flex;
+  align-items: flex-end;
+  gap: var(--s3);
+  min-height: 110px;
+}
+
+.dp-form-bar {
+  flex: 1;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: center;
+  gap: var(--s2);
+}
+
+.dp-form-bar-fill {
+  width: 100%;
+  max-width: 34px;
+  border-radius: 2px 2px 0 0;
+  opacity: 0.9;
+}
+
+.dp-form-bar-val {
+  font-size: 11px;
+  color: var(--text-2);
+}
+
+/* --- rounds table --- */
+
+.dp-scroll {
+  overflow-x: auto;
+  border: 1px solid var(--border);
+  border-radius: var(--r2);
+  background: var(--surface);
+}
+
+.dp-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+
+.dp-table th {
+  padding: var(--s3) var(--s4);
+  font-family: var(--f-mono);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-3);
+  border-bottom: 1px solid var(--border);
+}
+
+.dp-table td {
+  padding: var(--s3) var(--s4);
+  border-bottom: 1px solid var(--border);
+  white-space: nowrap;
+}
+
+.dp-table tbody tr:last-child td {
+  border-bottom: none;
+}
+
+.dp-table th.l,
+.dp-table td.l {
+  text-align: left;
+}
+
+.dp-table th.r,
+.dp-table td.r {
+  text-align: right;
+}
+
+.dp-td-dim {
+  color: var(--text-3);
+}
+
+.dp-flag {
+  margin-right: var(--s3);
+}

frontend/src/styles/event-rail.css

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

frontend/src/styles/hero.css

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

frontend/src/styles/meaning.css

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

frontend/src/styles/preview.css

@@ -0,0 +1,309 @@
+.preview-page {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s6);
+  padding: var(--s6);
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.preview-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--s4);
+  min-height: 320px;
+  text-align: center;
+  padding: var(--s8);
+  background: var(--surface);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 8px;
+}
+
+.preview-empty-eyebrow {
+  font-size: 0.7rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--text-3);
+}
+
+.preview-empty-title {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin: 0;
+}
+
+.preview-empty-sub {
+  color: var(--text-2);
+  max-width: 36rem;
+  margin: 0;
+}
+
+.preview-header {
+  display: flex;
+  background: var(--surface);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 8px;
+  overflow: hidden;
+  min-height: 140px;
+}
+
+.preview-header-accent {
+  width: 4px;
+  flex-shrink: 0;
+  background: var(--preview-accent, var(--gp-accent));
+  box-shadow: 0 0 12px var(--preview-accent, var(--gp-accent));
+}
+
+.preview-header-body {
+  flex: 1;
+  padding: var(--s5);
+  display: flex;
+  flex-direction: column;
+  gap: var(--s4);
+  min-width: 0;
+}
+
+.preview-header-top {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--s4);
+}
+
+.preview-gp-name {
+  font-size: 1.4rem;
+  font-weight: 600;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--s3);
+}
+
+.preview-gp-flag {
+  font-size: 1.5rem;
+  line-height: 1;
+}
+
+.preview-circuit {
+  color: var(--text-2);
+  font-size: 0.9rem;
+  margin: 0;
+}
+
+.preview-countdown {
+  text-align: right;
+}
+
+.preview-countdown-label {
+  display: block;
+  font-size: 0.7rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--text-3);
+  margin-bottom: var(--s1);
+}
+
+.preview-countdown-value {
+  font-family: var(--mono);
+  font-size: 1.1rem;
+  font-variant-numeric: tabular-nums;
+  color: var(--text-1);
+}
+
+.preview-schedule {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  gap: var(--s2);
+}
+
+.preview-schedule-item {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: var(--s2) var(--s3);
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 4px;
+  font-size: 0.8rem;
+}
+
+.preview-schedule-name {
+  font-weight: 600;
+  color: var(--text-1);
+}
+
+.preview-schedule-time {
+  font-family: var(--mono);
+  font-size: 0.75rem;
+  color: var(--text-2);
+}
+
+.preview-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: var(--s5);
+}
+
+.preview-card {
+  background: var(--surface);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 8px;
+  padding: var(--s5);
+  display: flex;
+  flex-direction: column;
+  gap: var(--s4);
+  min-height: 200px;
+}
+
+.preview-card-title {
+  font-size: 0.75rem;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--text-3);
+  margin: 0;
+}
+
+.preview-card-sub {
+  font-size: 0.85rem;
+  color: var(--text-2);
+  margin: calc(-1 * var(--s2)) 0 0;
+}
+
+.preview-track-stage {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  min-height: 180px;
+  padding: var(--s4);
+}
+
+.preview-track-svg {
+  width: 100%;
+  max-width: 280px;
+  height: auto;
+}
+
+.preview-track-outline {
+  fill: none;
+  stroke: var(--preview-accent, var(--gp-accent));
+  stroke-width: 1.8;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  opacity: 0.9;
+}
+
+.preview-track-shadow {
+  fill: none;
+  stroke: rgba(0, 0, 0, 0.5);
+  stroke-width: 3;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.preview-podium {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s3);
+}
+
+.preview-podium-row {
+  display: flex;
+  align-items: center;
+  gap: var(--s3);
+  font-size: 0.9rem;
+}
+
+.preview-podium-pos {
+  width: 1.5rem;
+  font-family: var(--mono);
+  font-weight: 600;
+  color: var(--text-3);
+}
+
+.preview-podium-code {
+  font-weight: 600;
+  min-width: 2.5rem;
+}
+
+.preview-podium-team {
+  color: var(--text-2);
+  font-size: 0.8rem;
+}
+
+.preview-pole {
+  padding-top: var(--s3);
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+  font-size: 0.85rem;
+  color: var(--text-2);
+}
+
+.preview-pole strong {
+  color: var(--text-1);
+}
+
+.preview-title-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.85rem;
+}
+
+.preview-title-table th,
+.preview-title-table td {
+  padding: var(--s2) var(--s3);
+  text-align: left;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.preview-title-table th {
+  font-size: 0.7rem;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--text-3);
+  font-weight: 500;
+}
+
+.preview-title-table td.mono {
+  font-family: var(--mono);
+  font-variant-numeric: tabular-nums;
+}
+
+.preview-sprint-note {
+  font-size: 0.8rem;
+  color: var(--text-2);
+  margin: 0;
+  padding: var(--s3);
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 4px;
+}
+
+.preview-section-state {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-3);
+  font-size: 0.85rem;
+  text-align: center;
+  padding: var(--s5);
+}
+
+.preview-section-state.error {
+  color: var(--red, #e74c3c);
+}
+
+@media (max-width: 640px) {
+  .preview-page {
+    padding: var(--s4);
+  }
+
+  .preview-header-top {
+    flex-direction: column;
+  }
+
+  .preview-countdown {
+    text-align: left;
+  }
+}

frontend/src/styles/stint-timeline.css

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

frontend/src/styles/team-radio.css

@@ -0,0 +1,82 @@
+.team-radio {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.team-radio-audio {
+  display: none;
+}
+
+.team-radio-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  max-height: 260px;
+  overflow-y: auto;
+  padding-right: 2px;
+}
+
+.team-radio-row {
+  display: grid;
+  grid-template-columns: 28px minmax(44px, 56px) minmax(68px, 1fr);
+  align-items: center;
+  gap: 8px;
+  min-height: 34px;
+  padding: 6px 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.team-radio-row:last-child {
+  border-bottom: 0;
+}
+
+.team-radio-play {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  border-radius: 50%;
+  color: var(--text-1);
+  background: rgba(255, 255, 255, 0.06);
+  cursor: pointer;
+}
+
+.team-radio-play:hover:not(:disabled),
+.team-radio-play:focus-visible:not(:disabled) {
+  border-color: rgba(255, 255, 255, 0.36);
+  background: rgba(255, 255, 255, 0.12);
+}
+
+.team-radio-play:disabled {
+  color: var(--text-3);
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.team-radio-driver {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 44px;
+  height: 24px;
+  border-left: 3px solid var(--text-3);
+  color: var(--text-1);
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0;
+}
+
+.team-radio-time {
+  min-width: 0;
+  color: var(--text-2);
+  font-family: var(--font-mono);
+  font-size: 12px;
+  text-align: right;
+  white-space: nowrap;
+}

frontend/src/styles/telemetry-trace.css

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

frontend/src/styles/tyredeg.css

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

frontend/src/test/ChampionshipPage.test.tsx

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

frontend/src/test/CommandCenterPage.test.tsx

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

frontend/src/test/DriverProfilePage.test.tsx

@@ -0,0 +1,160 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render, screen, waitFor } from '@testing-library/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { RouterProvider, createRouter, createRootRoute, createRoute } from '@tanstack/react-router'
+import { DriverProfilePage } from '../pages/DriverProfilePage'
+import type { DriverSummary } from '../types'
+
+vi.mock('../api', () => ({
+  fetchSeasons: vi.fn(),
+  fetchDriverSummary: vi.fn(),
+}))
+
+import { fetchSeasons, fetchDriverSummary } from '../api'
+
+const mockFetchSeasons = vi.mocked(fetchSeasons)
+const mockFetchSummary = vi.mocked(fetchDriverSummary)
+
+const summary: DriverSummary = {
+  season: 2025,
+  driver_number: 1,
+  name_acronym: 'VER',
+  full_name: 'Max Verstappen',
+  team_name: 'Red Bull',
+  team_colour: '3671c6',
+  headshot_url: '',
+  points: 50,
+  position: 1,
+  wins: 2,
+  podiums: 2,
+  poles: 1,
+  form: [25, 25],
+  cumulative: [25, 50],
+  round_labels: ['R1', 'R2'],
+  rounds: [
+    {
+      meeting_key: 1201,
+      meeting_name: 'Bahrain Grand Prix',
+      country_code: 'BHR',
+      country_name: 'Bahrain',
+      race_position: 1,
+      grid_position: 1,
+      quali_position: 1,
+      points: 25,
+      dnf: false,
+      dns: false,
+      dsq: false,
+    },
+    {
+      meeting_key: 1202,
+      meeting_name: 'Saudi Arabian Grand Prix',
+      country_code: 'SAU',
+      country_name: 'Saudi Arabia',
+      race_position: 1,
+      grid_position: 4,
+      quali_position: 4,
+      points: 25,
+      dnf: false,
+      dns: false,
+      dsq: false,
+    },
+  ],
+}
+
+function renderPage(props: { driverNumber: number; year?: number }) {
+  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } })
+  const rootRoute = createRootRoute({
+    component: () => (
+      <QueryClientProvider client={queryClient}>
+        <DriverProfilePage driverNumber={props.driverNumber} year={props.year} />
+      </QueryClientProvider>
+    ),
+  })
+  const indexRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/',
+    component: () => null,
+  })
+  const router = createRouter({ routeTree: rootRoute.addChildren([indexRoute]) })
+  return render(<RouterProvider router={router} />)
+}
+
+describe('DriverProfilePage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockFetchSeasons.mockResolvedValue([2025])
+    mockFetchSummary.mockResolvedValue(summary)
+  })
+
+  it('renders header, form, quali-vs-race, and rounds sections', async () => {
+    renderPage({ driverNumber: 1, year: 2025 })
+
+    await waitFor(() => {
+      expect(screen.getByTestId('driver-profile')).toBeInTheDocument()
+    })
+
+    // Header: identity + season stats.
+    expect(screen.getByTestId('dp-header')).toBeInTheDocument()
+    expect(screen.getByText('Max Verstappen')).toBeInTheDocument()
+    expect(screen.getByText('#1')).toBeInTheDocument()
+    expect(screen.getByText('Red Bull', { exact: false })).toBeInTheDocument()
+    // 'P1' / '50' also appear in the rounds table and chart axis.
+    expect(screen.getAllByText('P1').length).toBeGreaterThan(0)
+    expect(screen.getAllByText('50').length).toBeGreaterThan(0)
+
+    // Season form strip.
+    expect(screen.getByTestId('dp-form')).toBeInTheDocument()
+    expect(screen.getByText('Cumulative points')).toBeInTheDocument()
+
+    // Quali-vs-race chart shows the delta from the Saudi round (P4 → P1 = +3).
+    expect(screen.getByTestId('dp-quali-race')).toBeInTheDocument()
+    expect(screen.getAllByText('+3').length).toBeGreaterThan(0)
+
+    // Track-by-track table rows with flags.
+    const rounds = screen.getByTestId('dp-rounds')
+    expect(rounds).toBeInTheDocument()
+    expect(screen.getByText('Bahrain Grand Prix')).toBeInTheDocument()
+    expect(screen.getByText('Saudi Arabian Grand Prix')).toBeInTheDocument()
+    expect(rounds.textContent).toContain('🇧🇭')
+    expect(rounds.textContent).toContain('🇸🇦')
+
+    // With an explicit year, the seasons list is not needed.
+    expect(mockFetchSeasons).not.toHaveBeenCalled()
+    expect(mockFetchSummary).toHaveBeenCalledWith(1, 2025)
+  })
+
+  it('defaults to the latest season when no year is given', async () => {
+    renderPage({ driverNumber: 1 })
+
+    await waitFor(() => {
+      expect(screen.getByTestId('driver-profile')).toBeInTheDocument()
+    })
+    expect(mockFetchSummary).toHaveBeenCalledWith(1, 2025)
+  })
+
+  it('shows the API error message on failure', async () => {
+    mockFetchSummary.mockRejectedValue(new Error('API 404: Not Found'))
+    renderPage({ driverNumber: 99, year: 2025 })
+
+    await waitFor(() => {
+      expect(screen.getByText('API 404: Not Found')).toBeInTheDocument()
+    })
+  })
+
+  it('shows empty states when no rounds are completed', async () => {
+    mockFetchSummary.mockResolvedValue({
+      ...summary,
+      form: [],
+      cumulative: [],
+      round_labels: [],
+      rounds: [],
+    })
+    renderPage({ driverNumber: 1, year: 2025 })
+
+    await waitFor(() => {
+      expect(screen.getByTestId('driver-profile')).toBeInTheDocument()
+    })
+    expect(screen.getAllByText('No completed rounds yet.').length).toBe(2)
+    expect(screen.getByText('No grid-vs-finish data yet.')).toBeInTheDocument()
+  })
+})

frontend/src/test/LiveComponents.test.tsx

@@ -7,9 +7,10 @@ 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 { TrackMap } from '../components/live/TrackMap'
 import { detectBattles } from '../lib/battles'
 import type { LiveTimingRow } from '../lib/live'
-import type { LiveDriverData, LiveWeatherData } from '../types'
+import type { LiveDriverData, LiveWeatherData, TrackOutline } from '../types'
 
 function makeRow(
   number: string,
@@ -187,6 +188,49 @@ describe('TimingTower', () => {
     render(<TimingTower rows={[]} />)
     expect(screen.getByText(/no driver timing rows/i)).toBeInTheDocument()
   })
+
+  it('annotates DRS-range intervals in race mode', () => {
+    const raceRows = [
+      makeRow('1', 1, 'VER'),
+      makeRow('4', 2, 'NOR', { Interval: '+0.4', GapToLeader: '+0.4' }),
+    ]
+    render(
+      <TimingTower
+        rows={raceRows}
+        session={{
+          MeetingName: 'Monaco Grand Prix',
+          CircuitName: 'Monaco',
+          SessionType: 'Race',
+          SessionName: 'Race',
+          Path: '',
+        }}
+      />,
+    )
+    expect(screen.getByText('DRS range')).toBeInTheDocument()
+  })
+
+  it('renders the SQ1 cutoff after P17 and marks rows below as at risk', () => {
+    const sprintRows = Array.from({ length: 22 }, (_, index) =>
+      makeRow(String(index + 1), index + 1, `D${index + 1}`),
+    )
+    render(
+      <TimingTower
+        rows={sprintRows}
+        session={{
+          MeetingName: 'British Grand Prix',
+          CircuitName: 'Silverstone',
+          SessionType: 'Sprint Qualifying',
+          SessionName: 'Sprint Qualifying',
+          Path: '',
+        }}
+      />,
+    )
+
+    expect(screen.getByTestId('qualifying-cutoff')).toHaveTextContent('SQ1 cutoff')
+    expect(screen.getByTestId('qualifying-cutoff')).toHaveTextContent('P17 advance')
+    expect(screen.getByText('D18').closest('tr')).toHaveClass('danger-row')
+    expect(screen.getByText('D17').closest('tr')).not.toHaveClass('danger-row')
+  })
 })
 
 describe('PinnedDrivers', () => {
@@ -219,3 +263,66 @@ describe('PinnedDrivers', () => {
     expect(screen.queryByTestId('pinned-strip')).not.toBeInTheDocument()
   })
 })
+
+describe('TrackMap', () => {
+  const outline: TrackOutline = {
+    circuit_key: 9,
+    bounds: { minX: 0, maxX: 100, minY: 0, maxY: 100 },
+    points: [
+      { x: 0, y: 0 },
+      { x: 1, y: 0 },
+      { x: 1, y: 1 },
+      { x: 0, y: 1 },
+    ],
+  }
+
+  it('renders car dots and opens mini telemetry on tap', () => {
+    render(
+      <TrackMap
+        outline={outline}
+        positions={{
+          '4': { x: 50, y: 25, z: 0, status: 'OnTrack' },
+          '81': { x: 25, y: 75, z: 0, status: 'OffTrack' },
+        }}
+        telemetry={{
+          '4': { Speed: 302, Throttle: 88, Brake: 0, DRS: 10, NGear: 8, RPM: 11111 },
+        }}
+        driverInfo={{
+          '4': {
+            RacingNumber: '4',
+            BroadcastName: 'L NORRIS',
+            Tla: 'NOR',
+            TeamName: 'McLaren',
+            TeamColour: 'ff8000',
+            FirstName: 'Lando',
+            LastName: 'Norris',
+          },
+          '81': {
+            RacingNumber: '81',
+            BroadcastName: 'O PIASTRI',
+            Tla: 'PIA',
+            TeamName: 'McLaren',
+            TeamColour: 'ff8000',
+            FirstName: 'Oscar',
+            LastName: 'Piastri',
+          },
+        }}
+      />,
+    )
+
+    expect(screen.getByTestId('track-map')).toHaveTextContent('2 cars')
+    fireEvent.click(screen.getByRole('button', { name: /NOR telemetry/i }))
+    const readout = screen.getByTestId('track-telemetry')
+    expect(readout).toHaveTextContent('NOR')
+    expect(readout).toHaveTextContent('302km/h')
+    expect(readout).toHaveTextContent('88%')
+    expect(readout).toHaveTextContent('DRS')
+    expect(readout).toHaveTextContent('10')
+    expect(screen.getByRole('button', { name: /PIA telemetry/i })).toHaveClass('track-car-inactive')
+  })
+
+  it('renders an empty state without outline data', () => {
+    render(<TrackMap outline={null} positions={{}} />)
+    expect(screen.getByTestId('track-map')).toHaveTextContent(/track outline unavailable/i)
+  })
+})

frontend/src/test/LiveTimingPage.test.tsx

@@ -0,0 +1,166 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { LiveTimingPage } from '../pages/LiveTimingPage'
+import type { LiveStateResponse, LiveStreamData } from '../types'
+
+vi.mock('../api', () => ({
+  fetchLiveState: vi.fn(),
+  fetchLiveTrackOutline: vi.fn(),
+}))
+
+import { fetchLiveState, fetchLiveTrackOutline } from '../api'
+
+const mockFetchLiveState = vi.mocked(fetchLiveState)
+const mockFetchLiveTrackOutline = vi.mocked(fetchLiveTrackOutline)
+
+class MockEventSource {
+  onopen: (() => void) | null = null
+  onerror: (() => void) | null = null
+
+  constructor() {
+    setTimeout(() => this.onopen?.(), 0)
+  }
+
+  addEventListener() {}
+  close() {}
+}
+
+const archivedSnapshot: LiveStreamData = {
+  Drivers: {
+    '1': {
+      RacingNumber: '1',
+      Position: 1,
+      PrevPosition: 1,
+      GapToLeader: '',
+      Interval: '',
+      LastLapTime: '1:21.345',
+      LastLapPB: false,
+      LastLapOB: false,
+      BestLapTime: '1:20.987',
+      BestLapPB: false,
+      BestLapOB: false,
+      BestLapNum: 22,
+      InPit: false,
+      PitOut: false,
+      Retired: false,
+      KnockedOut: false,
+      Cutoff: false,
+      OnFlyingLap: false,
+      NumberOfLaps: 30,
+      SpeedTrap: '',
+      Sectors: [],
+    },
+  },
+  DriverInfo: {
+    '1': {
+      RacingNumber: '1',
+      BroadcastName: 'M VERSTAPPEN',
+      Tla: 'VER',
+      TeamName: 'Red Bull Racing',
+      TeamColour: '3671C6',
+      FirstName: 'Max',
+      LastName: 'Verstappen',
+    },
+  },
+  Tyres: {
+    '1': { Compound: 'HARD', New: false, Age: 12 },
+  },
+  Telemetry: {},
+  RCMessages: [],
+  Weather: {
+    AirTemp: 22,
+    TrackTemp: 41,
+    Humidity: 58,
+    WindSpeed: 3,
+    WindDir: 180,
+    Rainfall: false,
+  },
+  Session: {
+    MeetingName: 'Testonia Grand Prix',
+    CircuitName: 'Testring',
+    SessionType: 'Race',
+    SessionName: 'Race',
+    Path: '',
+  },
+  TeamRadio: [],
+  SessionStatus: 'Finished',
+  TrackStatus: '1',
+  CurrentLap: 57,
+  TotalLaps: 57,
+  Clock: '',
+  ClockRefTime: '',
+  ClockExtrapolating: false,
+  Stints: {},
+}
+
+function renderPage(response: LiveStateResponse) {
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  })
+  mockFetchLiveState.mockResolvedValue(response)
+  mockFetchLiveTrackOutline.mockResolvedValue({
+    circuit_key: 1,
+    points: [],
+    bounds: { minX: 0, maxX: 1, minY: 0, maxY: 1 },
+  })
+
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <LiveTimingPage />
+    </QueryClientProvider>,
+  )
+}
+
+describe('LiveTimingPage archive mode', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    Object.defineProperty(window, 'EventSource', {
+      value: MockEventSource,
+      writable: true,
+      configurable: true,
+    })
+  })
+
+  it('keeps archived snapshots behind the View Last Session action', async () => {
+    renderPage({
+      is_live: false,
+      data: null,
+      last_snapshot: archivedSnapshot,
+      last_positions: {
+        '1': { x: 10, y: 20, z: 0, status: 'OnTrack' },
+      },
+      last_snapshot_at: '2026-07-04T14:00:00Z',
+    })
+
+    expect(await screen.findByTestId('live-empty')).toHaveTextContent('No live session active')
+    expect(screen.queryByText('Timing Tower')).not.toBeInTheDocument()
+
+    fireEvent.click(screen.getByRole('button', { name: /view last session/i }))
+
+    await waitFor(() => {
+      expect(screen.getByTestId('live-archive-strip')).toHaveTextContent('Archived snapshot')
+    })
+    expect(screen.getByText('Timing Tower')).toBeInTheDocument()
+    expect(screen.getAllByText('VER').length).toBeGreaterThan(0)
+    expect(screen.getByText('archive')).toBeInTheDocument()
+  })
+
+  it('does not show the archive action when no snapshot is retained', async () => {
+    renderPage({ is_live: false, data: null })
+
+    expect(await screen.findByTestId('live-empty')).toHaveTextContent('No live session active')
+    expect(screen.queryByRole('button', { name: /view last session/i })).not.toBeInTheDocument()
+  })
+
+  it('temporarily omits the track map while live GPS is unavailable', async () => {
+    renderPage({
+      is_live: true,
+      data: { ...archivedSnapshot, SessionStatus: 'Started' },
+    })
+
+    expect(await screen.findByText('Timing Tower')).toBeInTheDocument()
+    expect(screen.queryByText('Track Map')).not.toBeInTheDocument()
+    expect(mockFetchLiveTrackOutline).not.toHaveBeenCalled()
+  })
+})

frontend/src/test/Meaning.test.tsx

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

frontend/src/test/RaceHubPage.test.tsx

@@ -155,6 +155,7 @@ const raceHub: RaceHub = {
       is_pit_out_lap: false,
     },
   ],
+  chapters: [],
 }
 
 const weekend: Weekend = {

frontend/src/test/RacePreviewPage.test.tsx

@@ -0,0 +1,276 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render, screen, waitFor } from '@testing-library/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { RouterProvider, createRouter, createRootRoute, createRoute } from '@tanstack/react-router'
+import { RacePreviewPage } from '../pages/RacePreviewPage'
+import type { ChampHubDriver, ChampionshipHub, EnrichedGrid, EnrichedResult, Meeting, Session, TrackOutline } from '../types'
+
+vi.mock('../api', () => ({
+  fetchSeasons: vi.fn(),
+  fetchMeetings: vi.fn(),
+  fetchSessions: vi.fn(),
+  fetchResults: vi.fn(),
+  fetchStartingGrid: vi.fn(),
+  fetchTrackOutline: vi.fn(),
+  fetchChampionshipHub: vi.fn(),
+}))
+
+import {
+  fetchSeasons,
+  fetchMeetings,
+  fetchSessions,
+  fetchResults,
+  fetchStartingGrid,
+  fetchTrackOutline,
+  fetchChampionshipHub,
+} from '../api'
+
+const mockFetchSeasons = vi.mocked(fetchSeasons)
+const mockFetchMeetings = vi.mocked(fetchMeetings)
+const mockFetchSessions = vi.mocked(fetchSessions)
+const mockFetchResults = vi.mocked(fetchResults)
+const mockFetchStartingGrid = vi.mocked(fetchStartingGrid)
+const mockFetchTrackOutline = vi.mocked(fetchTrackOutline)
+const mockFetchChampionshipHub = vi.mocked(fetchChampionshipHub)
+
+const upcomingMeeting: Meeting = {
+  meeting_key: 100,
+  meeting_name: 'Monaco',
+  meeting_official_name: 'Monaco GP',
+  location: 'Monaco',
+  country_name: 'Monaco',
+  country_code: 'MON',
+  country_flag: '',
+  circuit_key: 10,
+  circuit_short_name: 'Monaco',
+  date_start: '2099-05-22T00:00:00+00:00',
+  date_end: '2099-05-24T23:59:59+00:00',
+  year: 2099,
+}
+
+const priorMeeting: Meeting = {
+  ...upcomingMeeting,
+  meeting_key: 90,
+  year: 2098,
+  date_start: '2098-05-22T00:00:00+00:00',
+  date_end: '2098-05-24T23:59:59+00:00',
+}
+
+const sessions: Session[] = [
+  {
+    session_key: 1,
+    session_name: 'FP1',
+    session_type: 'Practice',
+    meeting_key: 100,
+    date_start: '2099-05-22T10:00:00+00:00',
+    date_end: '2099-05-22T11:00:00+00:00',
+    gmt_offset: '02:00:00',
+  },
+  {
+    session_key: 2,
+    session_name: 'Sprint',
+    session_type: 'Sprint',
+    meeting_key: 100,
+    date_start: '2099-05-23T10:00:00+00:00',
+    date_end: '2099-05-23T11:00:00+00:00',
+    gmt_offset: '02:00:00',
+  },
+  {
+    session_key: 3,
+    session_name: 'Race',
+    session_type: 'Race',
+    meeting_key: 100,
+    date_start: '2099-05-24T13:00:00+00:00',
+    date_end: '2099-05-24T15:00:00+00:00',
+    gmt_offset: '02:00:00',
+  },
+]
+
+const priorRaceSession: Session = {
+  session_key: 50,
+  session_name: 'Race',
+  session_type: 'Race',
+  meeting_key: 90,
+  date_start: '2098-05-24T13:00:00+00:00',
+  date_end: '2098-05-24T15:00:00+00:00',
+  gmt_offset: '02:00:00',
+}
+
+const hubDriver = (over: Partial<ChampHubDriver>): ChampHubDriver => ({
+  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],
+  cumulative: [200],
+  teammate_wins: 9,
+  teammate_losses: 1,
+  ...over,
+})
+
+const hub: ChampionshipHub = {
+  season: 2099,
+  round: 5,
+  total_rounds: 24,
+  rounds_left: 19,
+  last_race: 'Monaco GP',
+  round_labels: ['R1'],
+  drivers: [
+    hubDriver({}),
+    hubDriver({ driver_number: 4, name_acronym: 'NOR', points: 160, position: 2 }),
+    hubDriver({ driver_number: 16, name_acronym: 'LEC', points: 120, position: 3 }),
+  ],
+  teams: [],
+}
+
+const results: EnrichedResult[] = [
+  {
+    driver_number: 1,
+    position: 1,
+    name_acronym: 'VER',
+    full_name: 'Max Verstappen',
+    team_name: 'Red Bull',
+    team_colour: '3671c6',
+    dnf: false,
+    dns: false,
+    dsq: false,
+    duration: 100,
+    gap_to_leader: 0,
+    number_of_laps: 78,
+    points: 25,
+    session_key: 50,
+    meeting_key: 90,
+  },
+]
+
+const grid: EnrichedGrid[] = [
+  {
+    driver_number: 4,
+    position: 1,
+    name_acronym: 'NOR',
+    full_name: 'Lando Norris',
+    team_name: 'McLaren',
+    team_colour: 'ff8000',
+    session_key: 50,
+    meeting_key: 90,
+    lap_duration: 70,
+  },
+]
+
+const outline: TrackOutline = {
+  circuit_key: 10,
+  points: [
+    { x: 0.1, y: 0.2 },
+    { x: 0.5, y: 0.5 },
+    { x: 0.9, y: 0.8 },
+  ],
+  bounds: { minX: 0, maxX: 1, minY: 0, maxY: 1 },
+}
+
+function renderPage() {
+  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } })
+  const rootRoute = createRootRoute({
+    component: () => (
+      <QueryClientProvider client={queryClient}>
+        <RacePreviewPage />
+      </QueryClientProvider>
+    ),
+  })
+  const indexRoute = createRoute({ getParentRoute: () => rootRoute, path: '/', component: RacePreviewPage })
+  const router = createRouter({ routeTree: rootRoute.addChildren([indexRoute]) })
+  return render(<RouterProvider router={router} />)
+}
+
+describe('RacePreviewPage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockFetchSeasons.mockResolvedValue([2099])
+    mockFetchChampionshipHub.mockResolvedValue(hub)
+    mockFetchTrackOutline.mockResolvedValue(outline)
+    mockFetchResults.mockResolvedValue(results)
+    mockFetchStartingGrid.mockResolvedValue(grid)
+  })
+
+  it('renders upcoming race preview with sections', async () => {
+    mockFetchMeetings.mockImplementation(async (year: number) => {
+      if (year === 2099) return [upcomingMeeting]
+      if (year === 2098) return [priorMeeting]
+      return []
+    })
+    mockFetchSessions.mockImplementation(async (meetingKey: number) => {
+      if (meetingKey === 100) return sessions
+      if (meetingKey === 90) return [priorRaceSession]
+      return []
+    })
+
+    renderPage()
+
+    await waitFor(() => {
+      expect(screen.getByTestId('preview-page')).toBeInTheDocument()
+    })
+
+    await waitFor(() => {
+      expect(screen.getByTestId('preview-countdown')).toBeInTheDocument()
+    })
+
+    expect(screen.getByTestId('preview-header')).toHaveTextContent('Monaco')
+    expect(screen.getByTestId('preview-schedule')).toHaveTextContent('FP1')
+    expect(screen.getByTestId('preview-track-card')).toBeInTheDocument()
+
+    await waitFor(() => {
+      expect(screen.getByTestId('preview-last-year-card')).toHaveTextContent('VER')
+    })
+
+    expect(screen.getByTestId('preview-title-fight-card')).toHaveTextContent('NOR')
+    expect(screen.getByTestId('preview-sprint-note')).toBeInTheDocument()
+  })
+
+  it('renders season-over state when no upcoming meeting', async () => {
+    mockFetchMeetings.mockResolvedValue([
+      {
+        ...upcomingMeeting,
+        date_start: '2020-05-22T00:00:00+00:00',
+        date_end: '2020-05-24T23:59:59+00:00',
+      },
+    ])
+
+    renderPage()
+
+    await waitFor(() => {
+      expect(screen.getByTestId('preview-season-over')).toBeInTheDocument()
+    })
+
+    expect(screen.getByText('Season complete')).toBeInTheDocument()
+    expect(screen.getByTestId('preview-title-fight-card')).toBeInTheDocument()
+    expect(screen.queryByTestId('preview-header')).not.toBeInTheDocument()
+  })
+
+  it('shows first-time circuit empty state', async () => {
+    const newCircuit: Meeting = {
+      ...upcomingMeeting,
+      meeting_key: 200,
+      circuit_key: 999,
+      meeting_name: 'New GP',
+    }
+
+    mockFetchMeetings.mockImplementation(async (year: number) => {
+      if (year === 2099) return [newCircuit]
+      if (year === 2098) return [priorMeeting]
+      return []
+    })
+    mockFetchSessions.mockResolvedValue(sessions)
+    mockFetchTrackOutline.mockResolvedValue(null)
+
+    renderPage()
+
+    await waitFor(() => {
+      expect(screen.getByTestId('preview-last-year-card')).toHaveTextContent('First time on the calendar')
+    })
+  })
+})

frontend/src/test/StrategyView.test.tsx

@@ -106,6 +106,17 @@ describe('StrategyView — stints available', () => {
     )
     expect(screen.queryByText(/Stints not available/i)).not.toBeInTheDocument()
   })
+
+  it('maps pit_stops into timeline pit markers for the matching driver', () => {
+    const { container } = render(
+      <StrategyView results={results} stints={stints} pit_stops={pitStops} hasStints={true} />
+    )
+    const markers = container.querySelectorAll('[data-testid="pit-marker"]')
+    expect(markers).toHaveLength(1)
+    expect(markers[0]).toHaveAttribute('data-lap', '19')
+    const titles = [...container.querySelectorAll('title')].map((t) => t.textContent)
+    expect(titles).toContain('HAM pit stop · L19')
+  })
 })
 
 describe('StrategyView — stints missing', () => {

frontend/src/test/TabBar.test.tsx

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

frontend/src/test/TeamRadioTicker.test.tsx

@@ -0,0 +1,87 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { TeamRadioTicker } from '../components/live/TeamRadioTicker'
+import { radioClipUrl } from '../lib/radio'
+import type { LiveDriverInfo, LiveRadioCapture, LiveSessionMeta } from '../types'
+
+const session: LiveSessionMeta = {
+  MeetingName: 'British Grand Prix',
+  CircuitName: 'Silverstone',
+  SessionType: 'Race',
+  SessionName: 'Race',
+  Path: '/2026/2026-07-05_British_Grand_Prix/2026-07-05_Race/',
+}
+
+const driverInfo: Record<string, LiveDriverInfo> = {
+  '4': {
+    RacingNumber: '4',
+    BroadcastName: 'L NORRIS',
+    Tla: 'NOR',
+    TeamName: 'McLaren',
+    TeamColour: 'ff8000',
+    FirstName: 'Lando',
+    LastName: 'Norris',
+  },
+  '16': {
+    RacingNumber: '16',
+    BroadcastName: 'C LECLERC',
+    Tla: 'LEC',
+    TeamName: 'Ferrari',
+    TeamColour: 'e8002d',
+    FirstName: 'Charles',
+    LastName: 'Leclerc',
+  },
+}
+
+const captures: LiveRadioCapture[] = [
+  { Utc: '2026-07-05T14:05:00Z', RacingNumber: '16', Path: '/TeamRadio/LEC-1.mp3' },
+  { Utc: '2026-07-05T14:07:00Z', RacingNumber: '4', Path: 'TeamRadio/NOR-1.mp3' },
+]
+
+afterEach(() => {
+  vi.restoreAllMocks()
+})
+
+describe('radioClipUrl', () => {
+  it('builds static CDN URLs from the session path and capture path', () => {
+    expect(radioClipUrl(session, captures[0])).toBe(
+      'https://livetiming.formula1.com/static/2026/2026-07-05_British_Grand_Prix/2026-07-05_Race/TeamRadio/LEC-1.mp3',
+    )
+  })
+
+  it('returns an empty URL without path data', () => {
+    expect(radioClipUrl({ ...session, Path: '' }, captures[0])).toBe('')
+    expect(radioClipUrl(session, { ...captures[0], Path: '' })).toBe('')
+  })
+})
+
+describe('TeamRadioTicker', () => {
+  it('renders captures newest first with driver labels', () => {
+    vi.spyOn(Date, 'now').mockReturnValue(Date.parse('2026-07-05T14:10:00Z'))
+
+    render(<TeamRadioTicker captures={captures} driverInfo={driverInfo} session={session} />)
+
+    const rows = screen.getAllByRole('button')
+    expect(rows).toHaveLength(2)
+    expect(screen.getByText('NOR')).toBeInTheDocument()
+    expect(screen.getByText('LEC')).toBeInTheDocument()
+    expect(screen.getAllByText(/m ago/).map((node) => node.textContent)).toEqual(['3m ago', '5m ago'])
+  })
+
+  it('uses one audio element and toggles play/pause per clip', () => {
+    const play = vi.spyOn(window.HTMLMediaElement.prototype, 'play').mockResolvedValue()
+    const pause = vi.spyOn(window.HTMLMediaElement.prototype, 'pause').mockImplementation(() => {})
+
+    render(<TeamRadioTicker captures={captures} driverInfo={driverInfo} session={session} />)
+
+    fireEvent.click(screen.getByLabelText('Play NOR radio'))
+    expect(play).toHaveBeenCalledTimes(1)
+    expect(document.querySelectorAll('audio')).toHaveLength(1)
+    expect(document.querySelector('audio')?.getAttribute('src')).toBe(
+      'https://livetiming.formula1.com/static/2026/2026-07-05_British_Grand_Prix/2026-07-05_Race/TeamRadio/NOR-1.mp3',
+    )
+
+    fireEvent.click(screen.getByLabelText('Pause NOR radio'))
+    expect(pause).toHaveBeenCalled()
+  })
+})

frontend/src/test/TyreDegPanel.test.tsx

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

frontend/src/test/battles.test.ts

@@ -39,6 +39,7 @@ describe('isRaceSession', () => {
   it('only treats race and sprint sessions as races', () => {
     expect(isRaceSession('Race')).toBe(true)
     expect(isRaceSession('Sprint')).toBe(true)
+    expect(isRaceSession('Sprint Qualifying')).toBe(false)
     expect(isRaceSession('Qualifying')).toBe(false)
     expect(isRaceSession('Practice')).toBe(false)
     expect(isRaceSession('')).toBe(false)

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

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

frontend/src/test/coverage.test.ts

@@ -59,11 +59,18 @@ describe('coverage helpers', () => {
       meeting: {} as Weekend['meeting'],
       sessions: [{ session: {} as Weekend['sessions'][0]['session'], source: 'partial', datasets: {} }],
     }
-    expect(countWeekendStats([local, partial, undefined])).toEqual({
+    const cancelled: Weekend = {
+      source: 'cancelled',
+      meeting_key: 3,
+      meeting: {} as Weekend['meeting'],
+      sessions: [{ session: {} as Weekend['sessions'][0]['session'], source: 'cancelled', datasets: {} }],
+    }
+    expect(countWeekendStats([local, partial, cancelled, undefined])).toEqual({
       full: 1,
       partial: 1,
+      cancelled: 1,
       missing: 1,
-      total: 3,
+      total: 4,
     })
   })
 })

frontend/src/test/delta-time-graph.test.tsx

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

frontend/src/test/driverProfile.test.ts

@@ -0,0 +1,104 @@
+import { describe, it, expect } from 'vitest'
+import {
+  formatDelta,
+  formatPosition,
+  gridFinishDeltas,
+  shortGpLabel,
+} from '../lib/driverProfile'
+import type { DriverSummaryRound } from '../types'
+
+function round(over: Partial<DriverSummaryRound>): DriverSummaryRound {
+  return {
+    meeting_key: 1201,
+    meeting_name: 'Bahrain Grand Prix',
+    country_code: 'BHR',
+    country_name: 'Bahrain',
+    race_position: 1,
+    grid_position: 1,
+    quali_position: 1,
+    points: 25,
+    dnf: false,
+    dns: false,
+    dsq: false,
+    ...over,
+  }
+}
+
+describe('gridFinishDeltas', () => {
+  it('computes positive delta for places gained', () => {
+    const [d] = gridFinishDeltas([round({ grid_position: 5, race_position: 2, points: 18 })])
+    expect(d.grid).toBe(5)
+    expect(d.finish).toBe(2)
+    expect(d.delta).toBe(3)
+    expect(d.points).toBe(18)
+    expect(d.status).toBe('classified')
+    expect(d.round).toBe(1)
+  })
+
+  it('computes negative delta for places lost', () => {
+    const [d] = gridFinishDeltas([round({ grid_position: 1, race_position: 4 })])
+    expect(d.delta).toBe(-3)
+  })
+
+  it('returns null delta when the grid slot is unknown (position 0)', () => {
+    const [d] = gridFinishDeltas([round({ grid_position: 0, race_position: 6 })])
+    expect(d.grid).toBeNull()
+    expect(d.finish).toBe(6)
+    expect(d.delta).toBeNull()
+  })
+
+  it('flags DNS rounds and never computes a delta for them', () => {
+    const [d] = gridFinishDeltas([round({ dns: true, grid_position: 8, race_position: 0 })])
+    expect(d.status).toBe('dns')
+    expect(d.delta).toBeNull()
+  })
+
+  it('marks rounds the driver did not enter as absent', () => {
+    const [d] = gridFinishDeltas([round({ grid_position: 0, race_position: 0, points: 0 })])
+    expect(d.status).toBe('absent')
+    expect(d.grid).toBeNull()
+    expect(d.finish).toBeNull()
+    expect(d.delta).toBeNull()
+  })
+
+  it('still computes the delta for a classified DNF with known positions', () => {
+    const [d] = gridFinishDeltas([round({ dnf: true, grid_position: 3, race_position: 15 })])
+    expect(d.status).toBe('dnf')
+    expect(d.delta).toBe(-12)
+  })
+
+  it('numbers rounds sequentially and shortens labels', () => {
+    const ds = gridFinishDeltas([
+      round({}),
+      round({ meeting_name: 'Saudi Arabian Grand Prix', meeting_key: 1202 }),
+    ])
+    expect(ds.map((d) => d.round)).toEqual([1, 2])
+    expect(ds[1].label).toBe('Saudi Arabian')
+  })
+})
+
+describe('shortGpLabel', () => {
+  it('strips "Grand Prix" wherever it appears', () => {
+    expect(shortGpLabel('Bahrain Grand Prix')).toBe('Bahrain')
+    expect(shortGpLabel('Grand Prix of Monaco')).toBe('of Monaco')
+  })
+
+  it('falls back to the original name when stripping empties it', () => {
+    expect(shortGpLabel('Grand Prix')).toBe('Grand Prix')
+  })
+})
+
+describe('formatPosition / formatDelta', () => {
+  it('formats positions', () => {
+    expect(formatPosition(4)).toBe('P4')
+    expect(formatPosition(null)).toBe('—')
+    expect(formatPosition(0)).toBe('—')
+  })
+
+  it('formats deltas', () => {
+    expect(formatDelta(3)).toBe('+3')
+    expect(formatDelta(-2)).toBe('−2')
+    expect(formatDelta(0)).toBe('=')
+    expect(formatDelta(null)).toBe('—')
+  })
+})

frontend/src/test/events.test.ts

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

frontend/src/test/hero.test.ts

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