chore: add F1 live socket probe

Fix stale Live tab sessions and add last-session archive view (#52)

.agents/README.md

@@ -24,7 +24,7 @@ bin/dev          CLI: `dev implement <issue#> --harness <name> [--dry-run]`
 - **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** (any harness): `.agents/bin/dev implement <issue#> --harness <name>`
+- **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
@@ -42,8 +42,17 @@ 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. `claude`/`codex`/`opencode` are
-wired; `pi`/`cursor` are stubs — confirm their headless flags before trusting.
+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

@@ -1,7 +1,7 @@
 #!/usr/bin/env bash
 # .agents/bin/dev — box-box agentic dev CLI. Works from any harness's shell.
 #
-#   dev implement <issue#> --harness <claude|codex|opencode|pi|cursor> [--dry-run] [--base <branch>]
+#   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).
@@ -15,7 +15,7 @@ box-box dev CLI
 
   dev implement <issue#> --harness <name> [--dry-run] [--base <branch>]
 
-harnesses: claude, codex, opencode (supported) · pi, cursor (verify flags in .agents/harnesses.sh)
+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

.agents/harnesses.sh

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

.agents/lib/dispatch.sh

@@ -52,6 +52,15 @@ dispatch() { # <issue#> <harness> [--dry-run] [--base <branch>]
   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

.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
+}

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))
 

frontend/src/api.ts

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

frontend/src/components/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/StrategyView.tsx

@@ -12,7 +12,7 @@ interface Props {
   hasStints: boolean
 }
 
-export function StrategyView({ results, stints, pit_stops: _pitStops, hasStints }: Props) {
+export function StrategyView({ results, stints, pit_stops, hasStints }: Props) {
   if (!hasStints) {
     return (
       <div>
@@ -88,6 +88,10 @@ export function StrategyView({ results, stints, pit_stops: _pitStops, hasStints
         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 (

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

@@ -12,6 +12,8 @@ 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 {
@@ -57,6 +59,14 @@ 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) {
@@ -130,6 +140,21 @@ export function TyreStintTimeline({ rows, totalLaps }: TyreStintTimelineProps) {
                     <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>
             )
           })}

frontend/src/components/live/SessionBanner.tsx

@@ -5,18 +5,20 @@ 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, rows, 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">
@@ -39,7 +41,7 @@ export function SessionBanner({ isLive, snapshot, rows, connection, now }: Props
             <span>
               L<strong>{snapshot.CurrentLap || '-'}</strong>/<strong>{snapshot.TotalLaps || '-'}</strong>
             </span>
-            <span className={isLive ? 'live-state live-state-on' : 'live-state'}>{isLive ? 'live' : 'stale'}</span>
+            <span className={isLive ? 'live-state live-state-on' : 'live-state'}>{stateLabel}</span>
           </div>
         </div>
       </div>

frontend/src/components/live/TimingTower.tsx

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

frontend/src/components/live/TyreDegPanel.tsx

@@ -13,6 +13,8 @@ import {
   recordStintSamples,
   stintInputFromRow,
 } from '../../lib/tyredeg'
+import { tyreAgeMeaning } from '../../lib/meaning'
+import { Meaning } from '../Meaning'
 import '../../styles/tyredeg.css'
 
 const TOP_DRIVER_COUNT = 10
@@ -92,12 +94,20 @@ export function TyreDegPanel({ rows, sessionType, pinned }: Props) {
           {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)}`}>{tyreLabel(row.Tyre)}</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}`}>

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/delta.ts

@@ -21,15 +21,31 @@ export function formatDeltaSeconds(delta: number): string {
   return `${sign}${delta.toFixed(1)}s`
 }
 
-function buildCumulative(lapTimes: ReadonlyArray<number | null>): number[] {
+/**
+ * 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
-  for (const lap of lapTimes) {
-    if (lap !== null) {
+  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
 }
 
@@ -47,7 +63,8 @@ function resolveReference(
 /**
  * Compute per-lap cumulative time delta for each non-reference driver.
  * Positive = behind reference; negative = ahead.
- * Null laps carry cumulative forward but emit null in deltas (skip when plotting).
+ * 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>,
@@ -56,24 +73,22 @@ export function computeCumulativeDeltas(
   const reference = resolveReference(series, referenceLabel)
   if (!reference) return []
 
-  const refCumulative = buildCumulative(reference.lapTimes)
+  const refLapTimes = reference.lapTimes
+  const refCumulative = buildAlignedCumulative(refLapTimes, refLapTimes)
 
   return series
     .filter((s) => s.label !== reference.label)
     .map((driver) => {
-      const driverCumulative = buildCumulative(driver.lapTimes)
+      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 (driver.lapTimes[i] === null) {
+        if (refLapTimes[i] == null || driver.lapTimes[i] == null) {
           deltas.push(null)
           continue
         }
-        const refValue = refCumulative[i] ?? refCumulative[refCumulative.length - 1] ?? 0
-        const driverValue =
-          driverCumulative[i] ?? driverCumulative[driverCumulative.length - 1] ?? 0
-        deltas.push(driverValue - refValue)
+        deltas.push(driverCumulative[i] - refCumulative[i])
       }
 
       return {

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/pages/ChampionshipPage.tsx

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

frontend/src/pages/LiveTimingPage.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
-import { fetchLiveState, fetchLiveTrackOutline } from '../api'
+import { fetchLiveState } from '../api'
 import type { LivePosition, LiveStreamData } from '../types'
 import {
   loadPinnedDrivers,
@@ -25,14 +25,17 @@ import { PinnedDrivers } from '../components/live/PinnedDrivers'
 import { RaceControlFeed } from '../components/live/RaceControlFeed'
 import { EventRail } from '../components/live/EventRail'
 import { TeamRadioTicker } from '../components/live/TeamRadioTicker'
-import { TrackMap } from '../components/live/TrackMap'
 import { TyreDegPanel } from '../components/live/TyreDegPanel'
-import { Radio } from 'lucide-react'
+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())
@@ -43,6 +46,10 @@ export function LiveTimingPage() {
   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'],
@@ -50,24 +57,31 @@ export function LiveTimingPage() {
     staleTime: 5_000,
   })
 
-  const trackOutlineQuery = useQuery({
-    queryKey: [
-      'live-track-outline',
-      snapshot?.Session?.MeetingName ?? '',
-      snapshot?.Session?.CircuitName ?? '',
-    ],
-    queryFn: () => fetchLiveTrackOutline(snapshot!.Session),
-    enabled: Boolean(snapshot?.Session?.MeetingName || snapshot?.Session?.CircuitName),
-    staleTime: Infinity,
-    retry: false,
-  })
-
   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)
@@ -90,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')
     })
 
@@ -174,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 && (
@@ -182,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>
       )}
@@ -202,22 +250,27 @@ 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} rows={rows} 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} />
-          <TrackMap
-            outline={trackOutlineQuery.data}
-            positions={positions}
-            telemetry={snapshot.Telemetry}
-            drivers={snapshot.Drivers}
-            driverInfo={snapshot.DriverInfo}
-            loading={trackOutlineQuery.isLoading}
-          />
           <TyreDegPanel rows={rows} sessionType={snapshot.Session?.SessionType} pinned={pinned} />
           <div className="live-columns">
             <div className="live-tower-col">

frontend/src/pages/RaceHubPage.tsx

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

frontend/src/styles/app.css

@@ -808,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;
@@ -815,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,

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

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

frontend/src/styles/stint-timeline.css

@@ -40,6 +40,13 @@
   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;

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

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

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

@@ -52,9 +52,18 @@ describe('TyreDegPanel', () => {
     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={[]} />,

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/delta-time-graph.test.tsx

@@ -47,7 +47,7 @@ describe('computeCumulativeDeltas', () => {
     expect(result[0].deltas[2]).toBeCloseTo(2)
   })
 
-  it('emits null for missing lap times while carrying cumulative forward', () => {
+  it('emits null for challenger missing lap times while carrying cumulative forward', () => {
     const withNull: DeltaSeries = {
       label: 'NOR',
       color: '#FF8000',
@@ -60,6 +60,41 @@ describe('computeCumulativeDeltas', () => {
     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([])
   })
@@ -97,6 +132,19 @@ describe('DeltaTimeGraph', () => {
     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,
@@ -118,4 +166,31 @@ describe('DeltaTimeGraph', () => {
     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/live.test.ts

@@ -163,6 +163,20 @@ describe('live transforms', () => {
     expect(parsed?.data?.Drivers['16'].RacingNumber).toBe('16')
   })
 
+  it('parses archived EventSource snapshots separately from active data', () => {
+    const parsed = parseLiveStateEvent(JSON.stringify({
+      is_live: false,
+      data: null,
+      last_snapshot: snapshot,
+      last_positions: { '16': { x: 1, y: 2, z: 3, status: 'OnTrack' } },
+      last_snapshot_at: '2026-07-04T14:00:00Z',
+    }))
+    expect(parsed?.is_live).toBe(false)
+    expect(parsed?.data).toBeNull()
+    expect(parsed?.last_snapshot?.Drivers['16'].RacingNumber).toBe('16')
+    expect(parsed?.last_positions?.['16'].status).toBe('OnTrack')
+  })
+
   it('sorts timing rows by live position and includes drivers with metadata only', () => {
     const rows = sortLiveTimingRows(snapshot)
     expect(rows.map((row) => row.RacingNumber)).toEqual(['16', '1', '44'])

frontend/src/test/meaning.test.ts

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

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

@@ -71,6 +71,61 @@ describe('TyreStintTimeline', () => {
     expect(screen.getByTestId('stint-timeline-empty')).toBeInTheDocument()
     expect(screen.getByText(/No stint data/i)).toBeInTheDocument()
   })
+
+  it('renders one pit marker per stop at the correct lap position', () => {
+    const rowsWithPits: StintTimelineRow[] = [
+      {
+        label: 'HAM',
+        color: '#E8002D',
+        stints: [{ compound: 'SOFT', lapStart: 1, lapEnd: 18 }],
+        pitStops: [19],
+      },
+      {
+        label: 'VER',
+        color: '#3671C6',
+        stints: [
+          { compound: 'MEDIUM', lapStart: 1, lapEnd: 30 },
+          { compound: 'SOFT', lapStart: 31, lapEnd: 78 },
+        ],
+        pitStops: [31, 52],
+      },
+    ]
+    const { container } = render(
+      <TyreStintTimeline rows={rowsWithPits} totalLaps={78} />,
+    )
+    const markers = container.querySelectorAll('[data-testid="pit-marker"]')
+    expect(markers).toHaveLength(3)
+    expect(markers[0]).toHaveAttribute('data-lap', '19')
+    expect(markers[1]).toHaveAttribute('data-lap', '31')
+    expect(markers[2]).toHaveAttribute('data-lap', '52')
+    expect(container.querySelectorAll('.stint-timeline__bar')).toHaveLength(3)
+  })
+
+  it('positions pit markers using lap_number and includes driver in tooltip', () => {
+    const rows: StintTimelineRow[] = [
+      {
+        label: 'HAM',
+        color: '#E8002D',
+        stints: [{ compound: 'SOFT', lapStart: 1, lapEnd: 18 }],
+        pitStops: [19],
+      },
+    ]
+    const { container } = render(<TyreStintTimeline rows={rows} totalLaps={78} />)
+    const marker = container.querySelector('[data-testid="pit-marker"]') as SVGLineElement
+    expect(marker).toBeTruthy()
+    // lap 19 → x = 48 + (18/78) * 580 ≈ 181.85
+    expect(Number(marker.getAttribute('x1'))).toBeCloseTo(181.85, 1)
+    const titles = [...container.querySelectorAll('title')].map((t) => t.textContent)
+    expect(titles).toContain('HAM pit stop · L19')
+  })
+
+  it('leaves rows without pit data unchanged', () => {
+    const { container } = render(
+      <TyreStintTimeline rows={sampleRows} totalLaps={78} />,
+    )
+    expect(container.querySelectorAll('[data-testid="pit-marker"]')).toHaveLength(0)
+    expect(container.querySelectorAll('.stint-timeline__bar')).toHaveLength(3)
+  })
 })
 
 const results: EnrichedResult[] = [

frontend/src/types.ts

@@ -158,6 +158,37 @@ export interface Lap {
   is_pit_out_lap: boolean
 }
 
+export interface CarDataSample {
+  brake: number
+  date: string
+  driver_number: number
+  drs: number
+  meeting_key: number
+  n_gear: number
+  rpm: number
+  session_key: number
+  speed: number
+  throttle: number
+}
+
+export interface ComparisonLap extends Lap {
+  compound?: string
+}
+
+export interface ComparisonDriver {
+  driver_number: number
+  name_acronym: string
+  team_colour: string
+  laps: ComparisonLap[]
+}
+
+export interface LapsComparisonResponse {
+  session_key: number
+  sc_periods: unknown[]
+  pit_laps: Record<string, number[]>
+  drivers: ComparisonDriver[]
+}
+
 export interface WeekendSession {
   session: Session
   source: 'local' | 'partial' | 'none' | 'cancelled'
@@ -175,6 +206,9 @@ export interface Weekend {
 export interface LiveStateResponse {
   is_live: boolean
   data: LiveStreamData | null
+  last_snapshot?: LiveStreamData | null
+  last_positions?: Record<string, LivePosition> | null
+  last_snapshot_at?: string
 }
 
 export interface LivePosition {
@@ -285,6 +319,7 @@ export interface LiveStreamData {
   Weather: LiveWeatherData
   Session: LiveSessionMeta
   TeamRadio: LiveRadioCapture[]
+  SessionStatus?: string
   TrackStatus: string
   CurrentLap: number
   TotalLaps: number

internal/api/cache.go

@@ -94,6 +94,12 @@ func cacheDBPath() string {
 	return filepath.Join(".cache", "box-box", "cache.db")
 }
 
+// DefaultCacheDBPath returns the HTTP cache database path used by the OpenF1
+// client in both TUI and web modes.
+func DefaultCacheDBPath() string {
+	return cacheDBPath()
+}
+
 // ttlForURL determines the appropriate TTL based on the URL pattern.
 // Returns 0 (CacheTTLForever) for historical data that will never change.
 func ttlForURL(url string) time.Duration {

internal/api/openf1.go

@@ -623,6 +623,19 @@ func (c *OpenF1Client) GetTeamRadio(sessionKey, driverNumber int) ([]models.Team
 // to maximise the chance of finding data quickly.
 var candidateDrivers = []int{1, 11, 44, 16, 55, 4, 14, 63, 81, 24}
 
+// TrackOutlinePrefetchResult summarizes a season track-outline cache warming
+// run. Counts are scoped to the unique non-zero circuit keys in the provided
+// meeting list.
+type TrackOutlinePrefetchResult struct {
+	Year           int
+	UniqueCircuits int
+	CachedBefore   int
+	CachedAfter    int
+	Skipped        int
+	Fetched        int
+	Failed         int
+}
+
 // PrefetchTrackOutlines fetches GPS location data for every circuit in the
 // provided meeting list and stores it in the cache so the track map tab can
 // render during live sessions when the free-tier API is locked.
@@ -632,28 +645,58 @@ var candidateDrivers = []int{1, 11, 44, 16, 55, 4, 14, 63, 81, 24}
 // Errors per-circuit are silently ignored — this is a best-effort operation
 // and must never block or crash the main UI.
 func (c *OpenF1Client) PrefetchTrackOutlines(meetings []models.Meeting) {
+	year := time.Now().Year()
+	for _, m := range meetings {
+		if m.Year != 0 {
+			year = m.Year
+			break
+		}
+	}
+	_ = c.PrefetchTrackOutlinesForYear(year, meetings)
+}
+
+// PrefetchTrackOutlinesForYear fetches and caches track outlines for unique
+// circuits in the provided meeting list, storing them under the explicit season
+// year. Unlike PrefetchTrackOutlines, it returns accounting suitable for CLI
+// cache-warming workflows.
+func (c *OpenF1Client) PrefetchTrackOutlinesForYear(year int, meetings []models.Meeting) TrackOutlinePrefetchResult {
 	const maxWorkers = 3
 
-	year := time.Now().Year()
-
-	// Filter to meetings that need fetching.
-	var pending []models.Meeting
+	result := TrackOutlinePrefetchResult{Year: year}
+	uniqueByCircuit := make(map[int]models.Meeting)
+	var unique []models.Meeting
 	for _, m := range meetings {
 		if m.CircuitKey == 0 {
 			continue
 		}
+		if _, exists := uniqueByCircuit[m.CircuitKey]; exists {
+			continue
+		}
+		uniqueByCircuit[m.CircuitKey] = m
+		unique = append(unique, m)
+	}
+
+	result.UniqueCircuits = len(unique)
+
+	// Filter to meetings that need fetching.
+	var pending []models.Meeting
+	for _, m := range unique {
 		if _, ok := c.cache.GetTrackOutline(m.CircuitKey, year); ok {
+			result.CachedBefore++
+			result.Skipped++
 			continue // already cached for this season
 		}
 		pending = append(pending, m)
 	}
 
 	if len(pending) == 0 {
-		return
+		result.CachedAfter = result.CachedBefore
+		return result
 	}
 
 	sem := make(chan struct{}, maxWorkers)
 	var wg sync.WaitGroup
+	var mu sync.Mutex
 
 	for _, mtg := range pending {
 		mtg := mtg // capture
@@ -662,19 +705,34 @@ func (c *OpenF1Client) PrefetchTrackOutlines(meetings []models.Meeting) {
 		go func() {
 			defer wg.Done()
 			defer func() { <-sem }()
-			c.prefetchCircuit(mtg, year)
+			ok := c.prefetchCircuit(mtg, year)
+			mu.Lock()
+			if ok {
+				result.Fetched++
+			} else {
+				result.Failed++
+			}
+			mu.Unlock()
 		}()
 	}
 
 	wg.Wait()
+
+	for _, m := range unique {
+		if _, ok := c.cache.GetTrackOutline(m.CircuitKey, year); ok {
+			result.CachedAfter++
+		}
+	}
+
+	return result
 }
 
 // prefetchCircuit fetches the track outline for a single meeting and stores it.
 // It prefers completed sessions (past date_end) so the data is full and stable.
-func (c *OpenF1Client) prefetchCircuit(mtg models.Meeting, year int) {
+func (c *OpenF1Client) prefetchCircuit(mtg models.Meeting, year int) bool {
 	sessions, err := c.GetSessionsForMeeting(int(mtg.MeetingKey))
 	if err != nil || len(sessions) == 0 {
-		return
+		return false
 	}
 
 	// Pick the best session: prefer a completed race, then any session with
@@ -696,7 +754,7 @@ func (c *OpenF1Client) prefetchCircuit(mtg models.Meeting, year int) {
 		}
 	}
 	if bestSession == nil {
-		return
+		return false
 	}
 
 	// Try candidate drivers in order until we find one with enough points.
@@ -706,7 +764,7 @@ func (c *OpenF1Client) prefetchCircuit(mtg models.Meeting, year int) {
 			continue
 		}
 		// Store under the circuit key for this year and stop.
-		_ = c.cache.SetTrackOutline(mtg.CircuitKey, year, locs)
-		return
+		return c.cache.SetTrackOutline(mtg.CircuitKey, year, locs) == nil
 	}
+	return false
 }

internal/api/track_outline_prefetch_test.go

@@ -0,0 +1,109 @@
+package api
+
+import (
+	"encoding/json"
+	"net/http"
+	"net/http/httptest"
+	"strconv"
+	"testing"
+	"time"
+
+	"github.com/AmanTahiliani/box-box/internal/models"
+)
+
+func newTrackOutlineTestClient(t *testing.T, srvURL string) *OpenF1Client {
+	t.Helper()
+	t.Setenv("HOME", t.TempDir())
+	t.Setenv("XDG_CACHE_HOME", t.TempDir())
+
+	c := NewOpenF1Client(srvURL, 5*time.Second)
+	c.pacer = &requestPacer{}
+	t.Cleanup(func() { _ = c.Close() })
+	return c
+}
+
+func TestPrefetchTrackOutlinesForYearSkipsCachedAndWritesLocations(t *testing.T) {
+	var sessionsByMeeting = map[string][]models.Session{
+		"202": {
+			{
+				SessionKey:  9002,
+				SessionName: "Race",
+				MeetingKey:  202,
+				CircuitKey:  2,
+				DateEnd:     "2026-01-01T12:00:00+00:00",
+			},
+		},
+	}
+	var sessionsRequested []string
+	var locationsRequested []string
+
+	srv := httptest.NewServer(http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		switch r.URL.Path {
+		case "/v1/sessions":
+			meetingKey := r.URL.Query().Get("meeting_key")
+			sessionsRequested = append(sessionsRequested, meetingKey)
+			_ = json.NewEncoder(w).Encode(sessionsByMeeting[meetingKey])
+		case "/v1/location":
+			sessionKey := r.URL.Query().Get("session_key")
+			driverNumber := r.URL.Query().Get("driver_number")
+			locationsRequested = append(locationsRequested, sessionKey+"/"+driverNumber)
+			_ = json.NewEncoder(w).Encode(testLocations(9002, 1, 51))
+		default:
+			t.Fatalf("unexpected request path %s", r.URL.Path)
+		}
+	}))
+	defer srv.Close()
+
+	client := newTrackOutlineTestClient(t, srv.URL)
+	if err := client.Cache().SetTrackOutline(1, 2026, testLocations(9001, 1, 51)); err != nil {
+		t.Fatalf("SetTrackOutline() error = %v", err)
+	}
+
+	result := client.PrefetchTrackOutlinesForYear(2026, []models.Meeting{
+		{MeetingKey: 101, Year: 2026, Circuit: models.Circuit{CircuitKey: 1}},
+		{MeetingKey: 202, Year: 2026, Circuit: models.Circuit{CircuitKey: 2}},
+		{MeetingKey: 303, Year: 2026, Circuit: models.Circuit{CircuitKey: 2}},
+	})
+
+	if result.UniqueCircuits != 2 {
+		t.Fatalf("UniqueCircuits = %d, want 2", result.UniqueCircuits)
+	}
+	if result.CachedBefore != 1 || result.Skipped != 1 || result.Fetched != 1 || result.Failed != 0 || result.CachedAfter != 2 {
+		t.Fatalf("unexpected result: %+v", result)
+	}
+	if got, want := len(sessionsRequested), 1; got != want {
+		t.Fatalf("sessions requested %d time(s), want %d: %v", got, want, sessionsRequested)
+	}
+	if sessionsRequested[0] != "202" {
+		t.Fatalf("requested meeting %s, want 202", sessionsRequested[0])
+	}
+	if got, want := len(locationsRequested), 1; got != want {
+		t.Fatalf("locations requested %d time(s), want %d: %v", got, want, locationsRequested)
+	}
+	if locationsRequested[0] != "9002/1" {
+		t.Fatalf("requested location %s, want 9002/1", locationsRequested[0])
+	}
+
+	locs, ok := client.Cache().GetTrackOutline(2, 2026)
+	if !ok {
+		t.Fatal("expected circuit 2 outline to be cached")
+	}
+	if len(locs) != 51 {
+		t.Fatalf("cached %d locations, want 51", len(locs))
+	}
+}
+
+func testLocations(sessionKey, driverNumber, count int) []models.Location {
+	locs := make([]models.Location, count)
+	for i := range locs {
+		locs[i] = models.Location{
+			Date:         "2026-01-01T12:00:" + strconv.Itoa(i%60) + "+00:00",
+			DriverNumber: driverNumber,
+			MeetingKey:   202,
+			SessionKey:   sessionKey,
+			X:            float64(i),
+			Y:            float64(i * 2),
+		}
+	}
+	return locs
+}

internal/live/parser_test.go

@@ -273,6 +273,40 @@ func TestProcessTopicTrackStatus(t *testing.T) {
 	}
 }
 
+func TestProcessTopicSessionStatus(t *testing.T) {
+	state := live.NewState()
+	if !state.ProcessTopic("SessionStatus", json.RawMessage(`{"Status": "Finished"}`)) {
+		t.Fatal("SessionStatus should update state")
+	}
+	snap := state.Snapshot()
+	if snap.SessionStatus != "Finished" {
+		t.Fatalf("session status = %q, want Finished", snap.SessionStatus)
+	}
+	if !snap.SnapshotUpdated {
+		t.Fatal("SessionStatus should mark snapshot updated")
+	}
+}
+
+func TestSessionStatusIsActive(t *testing.T) {
+	tests := []struct {
+		status string
+		want   bool
+	}{
+		{"Started", true},
+		{"Resumed", true},
+		{"Finished", false},
+		{"Finalised", false},
+		{"Ends", false},
+		{"Aborted", false},
+		{"", false},
+	}
+	for _, tt := range tests {
+		if got := live.SessionStatusIsActive(tt.status); got != tt.want {
+			t.Errorf("SessionStatusIsActive(%q) = %v, want %v", tt.status, got, tt.want)
+		}
+	}
+}
+
 func TestProcessTopicRaceControlMessages(t *testing.T) {
 	state := live.NewState()
 	data := json.RawMessage(`{

internal/live/signalr.go

@@ -197,7 +197,7 @@ func connectToF1LegacySignalR(dataChan chan LiveStreamData) error {
 		return err
 	}
 
-	subscribeMsg := []byte(`{"H":"Streaming","M":"Subscribe","A":[["Heartbeat","TimingData","Position.z","CarData.z","DriverList","LapCount","ExtrapolatedClock","TrackStatus","RaceControlMessages","WeatherData","SessionInfo","TeamRadio","CurrentTyres","TimingAppData","TimingStats"]],"I":1}`)
+	subscribeMsg := []byte(`{"H":"Streaming","M":"Subscribe","A":[["Heartbeat","TimingData","Position.z","CarData.z","DriverList","LapCount","ExtrapolatedClock","TrackStatus","RaceControlMessages","WeatherData","SessionInfo","TeamRadio","CurrentTyres","TimingAppData","TimingStats","SessionStatus"]],"I":1}`)
 	err = c.WriteMessage(websocket.TextMessage, subscribeMsg)
 	if err != nil {
 		return err

internal/live/state.go

@@ -26,6 +26,7 @@ type State struct {
 	Weather            LiveWeatherData
 	Session            LiveSessionMeta
 	TeamRadio          []LiveRadioCapture
+	SessionStatus      string
 	TrackStatus        string
 	CurrentLap         int
 	TotalLaps          int
@@ -93,6 +94,7 @@ func (s *State) Snapshot() LiveStreamData {
 		Weather:            s.Weather,
 		Session:            s.Session,
 		TeamRadio:          cpyRadio,
+		SessionStatus:      s.SessionStatus,
 		TrackStatus:        s.TrackStatus,
 		CurrentLap:         s.CurrentLap,
 		TotalLaps:          s.TotalLaps,
@@ -273,6 +275,14 @@ func (s *State) ProcessTopic(topic string, data json.RawMessage) bool {
 			s.TrackStatus = ts.Status
 			updated = true
 		}
+	case "SessionStatus":
+		var ss struct {
+			Status string `json:"Status"`
+		}
+		if json.Unmarshal(data, &ss) == nil && ss.Status != "" {
+			s.SessionStatus = ss.Status
+			updated = true
+		}
 	case "RaceControlMessages":
 		var rcm struct {
 			Messages json.RawMessage `json:"Messages"`

internal/live/types.go

@@ -162,6 +162,7 @@ type LiveStreamData struct {
 	Weather            LiveWeatherData
 	Session            LiveSessionMeta
 	TeamRadio          []LiveRadioCapture
+	SessionStatus      string
 	TrackStatus        string // "1"=green "2"=yellow "4"=SC "5"=red "6"=VSC
 	CurrentLap         int
 	TotalLaps          int
@@ -173,3 +174,27 @@ type LiveStreamData struct {
 	PositionUpdated    bool                        `json:"-"`
 	SnapshotUpdated    bool                        `json:"-"`
 }
+
+// SessionStatusIsActive reports whether a raw F1 live timing SessionStatus
+// value represents an actively running session.
+func SessionStatusIsActive(status string) bool {
+	switch normalizeSessionStatus(status) {
+	case "started", "resumed":
+		return true
+	default:
+		return false
+	}
+}
+
+func normalizeSessionStatus(status string) string {
+	out := make([]rune, 0, len(status))
+	for _, r := range status {
+		switch {
+		case r >= 'A' && r <= 'Z':
+			out = append(out, r+'a'-'A')
+		case r >= 'a' && r <= 'z', r >= '0' && r <= '9':
+			out = append(out, r)
+		}
+	}
+	return string(out)
+}

internal/web/live.go

@@ -29,10 +29,21 @@ type SSEHub struct {
 	deregister chan *sseClient
 	broadcast  chan sseEvent
 
-	mu            sync.RWMutex
-	lastSnapshot  *live.LiveStreamData
-	lastPositions map[string]live.LivePositionData
-	isLive        bool
+	mu              sync.RWMutex
+	activeSnapshot  *live.LiveStreamData
+	activePositions map[string]live.LivePositionData
+	lastSnapshot    *live.LiveStreamData
+	lastPositions   map[string]live.LivePositionData
+	lastSnapshotAt  time.Time
+	isLive          bool
+}
+
+type liveStatePayload struct {
+	IsLive         bool                             `json:"is_live"`
+	Data           *live.LiveStreamData             `json:"data"`
+	LastSnapshot   *live.LiveStreamData             `json:"last_snapshot,omitempty"`
+	LastPositions  map[string]live.LivePositionData `json:"last_positions,omitempty"`
+	LastSnapshotAt *time.Time                       `json:"last_snapshot_at,omitempty"`
 }
 
 func newSSEHub() *SSEHub {
@@ -51,19 +62,16 @@ func (h *SSEHub) run() {
 		case c := <-h.register:
 			clients[c] = true
 			// Send catch-up snapshot so new clients see current state immediately.
-			h.mu.RLock()
-			snap := h.lastSnapshot
-			positions := cloneLivePositions(h.lastPositions)
-			live := h.isLive
-			h.mu.RUnlock()
-			if snap != nil {
-				if data, err := json.Marshal(map[string]any{"data": snap, "is_live": live}); err == nil {
+			state := h.State()
+			if state.Data != nil || state.LastSnapshot != nil {
+				if data, err := json.Marshal(state); err == nil {
 					select {
 					case c.ch <- formatSSEFrame("snapshot", data):
 					default:
 					}
 				}
 			}
+			positions := h.ActivePositions()
 			if len(positions) > 0 {
 				if data, err := json.Marshal(positions); err == nil {
 					select {
@@ -96,11 +104,125 @@ func formatSSEFrame(event string, data []byte) []byte {
 	return []byte(fmt.Sprintf("event: %s\ndata: %s\n\n", event, data))
 }
 
-// Snapshot returns the latest live data snapshot and whether a session is active.
-func (h *SSEHub) Snapshot() (*live.LiveStreamData, bool) {
+// State returns the active live snapshot and the retained in-memory archive.
+func (h *SSEHub) State() liveStatePayload {
 	h.mu.RLock()
 	defer h.mu.RUnlock()
-	return h.lastSnapshot, h.isLive
+	payload := liveStatePayload{
+		IsLive: h.isLive,
+	}
+	if h.isLive {
+		payload.Data = h.activeSnapshot
+	} else if h.lastSnapshot != nil {
+		payload.LastSnapshot = h.lastSnapshot
+		payload.LastPositions = cloneLivePositions(h.lastPositions)
+		if !h.lastSnapshotAt.IsZero() {
+			at := h.lastSnapshotAt
+			payload.LastSnapshotAt = &at
+		}
+	}
+	return payload
+}
+
+func (h *SSEHub) ActivePositions() map[string]live.LivePositionData {
+	h.mu.RLock()
+	defer h.mu.RUnlock()
+	return cloneLivePositions(h.activePositions)
+}
+
+func (h *SSEHub) applySnapshot(data live.LiveStreamData, now time.Time) liveStatePayload {
+	h.mu.Lock()
+	defer h.mu.Unlock()
+
+	if live.SessionStatusIsActive(data.SessionStatus) {
+		h.isLive = true
+		h.activeSnapshot = &data
+		if data.PositionUpdated && len(data.Positions) > 0 {
+			h.activePositions = cloneLivePositions(data.Positions)
+		}
+		return liveStatePayload{IsLive: true, Data: h.activeSnapshot}
+	}
+
+	archivePositions := cloneLivePositions(h.activePositions)
+	if data.PositionUpdated && len(data.Positions) > 0 {
+		archivePositions = cloneLivePositions(data.Positions)
+	}
+	h.isLive = false
+	h.activeSnapshot = nil
+	h.activePositions = nil
+	if hasLiveSnapshotData(data) {
+		h.lastSnapshot = &data
+		h.lastSnapshotAt = now
+		h.lastPositions = archivePositions
+	}
+	return h.stateLocked()
+}
+
+func (h *SSEHub) applyPositions(data live.LiveStreamData) map[string]live.LivePositionData {
+	h.mu.Lock()
+	defer h.mu.Unlock()
+
+	if len(data.Positions) == 0 {
+		return nil
+	}
+	positions := cloneLivePositions(data.Positions)
+	if h.isLive {
+		h.activePositions = positions
+		return positions
+	}
+	if h.lastSnapshot != nil {
+		h.lastPositions = positions
+	}
+	return nil
+}
+
+func (h *SSEHub) deactivate(now time.Time) liveStatePayload {
+	h.mu.Lock()
+	defer h.mu.Unlock()
+
+	if h.activeSnapshot != nil {
+		h.lastSnapshot = h.activeSnapshot
+		h.lastPositions = cloneLivePositions(h.activePositions)
+		h.lastSnapshotAt = now
+	}
+	h.isLive = false
+	h.activeSnapshot = nil
+	h.activePositions = nil
+	return h.stateLocked()
+}
+
+func (h *SSEHub) stateLocked() liveStatePayload {
+	payload := liveStatePayload{IsLive: h.isLive}
+	if h.isLive {
+		payload.Data = h.activeSnapshot
+		return payload
+	}
+	if h.lastSnapshot != nil {
+		payload.LastSnapshot = h.lastSnapshot
+		payload.LastPositions = cloneLivePositions(h.lastPositions)
+		if !h.lastSnapshotAt.IsZero() {
+			at := h.lastSnapshotAt
+			payload.LastSnapshotAt = &at
+		}
+	}
+	return payload
+}
+
+func hasLiveSnapshotData(data live.LiveStreamData) bool {
+	return len(data.Drivers) > 0 ||
+		len(data.DriverInfo) > 0 ||
+		len(data.Tyres) > 0 ||
+		len(data.Telemetry) > 0 ||
+		len(data.RCMessages) > 0 ||
+		len(data.TeamRadio) > 0 ||
+		len(data.Stints) > 0 ||
+		data.Session.MeetingName != "" ||
+		data.Session.SessionName != "" ||
+		data.Session.SessionType != "" ||
+		data.TrackStatus != "" ||
+		data.CurrentLap != 0 ||
+		data.TotalLaps != 0 ||
+		data.Clock != ""
 }
 
 // runLiveFeeds launches background goroutines for the F1 SignalR feed and keepalive.
@@ -129,13 +251,8 @@ func (s *Server) signalRLoop() {
 			log.Printf("web: live feed ended: %v", err)
 		}
 
-		s.hub.mu.Lock()
-		s.hub.isLive = false
-		s.hub.lastSnapshot = nil
-		s.hub.lastPositions = nil
-		s.hub.mu.Unlock()
-
-		if payload, err := json.Marshal(map[string]any{"data": nil, "is_live": false}); err == nil {
+		state := s.hub.deactivate(time.Now())
+		if payload, err := json.Marshal(state); err == nil {
 			s.hub.broadcast <- sseEvent{name: "snapshot", data: payload}
 		}
 
@@ -167,24 +284,20 @@ func (s *Server) connectAndDrain() error {
 		select {
 		case data := <-dataChan:
 			now := time.Now()
-			s.hub.mu.Lock()
 			if data.SnapshotUpdated {
-				s.hub.lastSnapshot = &data
-			}
-			if data.PositionUpdated && len(data.Positions) > 0 {
-				s.hub.lastPositions = cloneLivePositions(data.Positions)
-			}
-			s.hub.isLive = true
-			s.hub.mu.Unlock()
-
-			if data.SnapshotUpdated {
-				if payload, err := json.Marshal(map[string]any{"data": data, "is_live": true}); err == nil {
+				state := s.hub.applySnapshot(data, now)
+				if payload, err := json.Marshal(state); err == nil {
 					s.hub.broadcast <- sseEvent{name: "snapshot", data: payload}
 				}
 			}
 
 			if data.PositionUpdated && len(data.Positions) > 0 && now.Sub(lastPositionBroadcast) >= 250*time.Millisecond {
-				if payload, err := json.Marshal(data.Positions); err == nil {
+				positions := s.hub.applyPositions(data)
+				if len(positions) > 0 {
+					payload, err := json.Marshal(positions)
+					if err != nil {
+						continue
+					}
 					s.hub.broadcast <- sseEvent{name: "positions", data: payload}
 					lastPositionBroadcast = now
 				}
@@ -217,11 +330,7 @@ func cloneLivePositions(in map[string]live.LivePositionData) map[string]live.Liv
 
 // handleLiveState returns the current live data snapshot as JSON.
 func (s *Server) handleLiveState(w http.ResponseWriter, r *http.Request) {
-	snap, isLive := s.hub.Snapshot()
-	writeJSON(w, map[string]any{
-		"is_live": isLive,
-		"data":    snap,
-	})
+	writeJSON(w, s.hub.State())
 }
 
 // handleSSEStream is the persistent SSE endpoint for live data.

internal/web/live_archive_test.go

@@ -0,0 +1,90 @@
+package web
+
+import (
+	"encoding/json"
+	"net/http"
+	"net/http/httptest"
+	"testing"
+	"time"
+
+	"github.com/AmanTahiliani/box-box/internal/live"
+)
+
+func TestSSEHubArchivesTerminalSessionSnapshot(t *testing.T) {
+	hub := newSSEHub()
+	now := time.Date(2026, 7, 4, 14, 0, 0, 0, time.UTC)
+	active := live.LiveStreamData{
+		SessionStatus: "Started",
+		Drivers: map[string]live.LiveDriverData{
+			"1": {RacingNumber: "1", Position: 1},
+		},
+		Positions: map[string]live.LivePositionData{
+			"1": {X: 100, Y: -50, Z: 2, Status: "OnTrack"},
+		},
+		PositionUpdated: true,
+		SnapshotUpdated: true,
+	}
+	if state := hub.applySnapshot(active, now); !state.IsLive || state.Data == nil {
+		t.Fatalf("active state = %+v, want live data", state)
+	}
+
+	terminal := active
+	terminal.SessionStatus = "Finished"
+	terminal.Positions = nil
+	terminal.PositionUpdated = false
+	state := hub.applySnapshot(terminal, now.Add(time.Minute))
+
+	if state.IsLive {
+		t.Fatal("terminal SessionStatus should not be live")
+	}
+	if state.Data != nil {
+		t.Fatalf("inactive state data = %+v, want nil", state.Data)
+	}
+	if state.LastSnapshot == nil || state.LastSnapshot.SessionStatus != "Finished" {
+		t.Fatalf("last snapshot = %+v, want terminal snapshot", state.LastSnapshot)
+	}
+	if got := state.LastPositions["1"]; got.X != 100 || got.Status != "OnTrack" {
+		t.Fatalf("last positions = %+v, want carried active positions", state.LastPositions)
+	}
+	if state.LastSnapshotAt == nil || !state.LastSnapshotAt.Equal(now.Add(time.Minute)) {
+		t.Fatalf("last snapshot time = %v, want %v", state.LastSnapshotAt, now.Add(time.Minute))
+	}
+}
+
+func TestHandleLiveStateKeepsArchiveOutOfActiveData(t *testing.T) {
+	hub := newSSEHub()
+	now := time.Date(2026, 7, 4, 14, 0, 0, 0, time.UTC)
+	hub.applySnapshot(live.LiveStreamData{
+		SessionStatus: "Finished",
+		Session:       live.LiveSessionMeta{MeetingName: "British Grand Prix", SessionName: "Race"},
+		Drivers: map[string]live.LiveDriverData{
+			"44": {RacingNumber: "44", Position: 1},
+		},
+		SnapshotUpdated: true,
+	}, now)
+
+	srv := &Server{hub: hub}
+	req := httptest.NewRequest(http.MethodGet, "/api/v1/live/state", nil)
+	rec := httptest.NewRecorder()
+	srv.handleLiveState(rec, req)
+
+	if rec.Code != http.StatusOK {
+		t.Fatalf("status = %d, want 200", rec.Code)
+	}
+	var resp liveStatePayload
+	if err := json.Unmarshal(rec.Body.Bytes(), &resp); err != nil {
+		t.Fatalf("decode response: %v", err)
+	}
+	if resp.IsLive {
+		t.Fatal("archived snapshot should report is_live=false")
+	}
+	if resp.Data != nil {
+		t.Fatalf("archived snapshot leaked into data: %+v", resp.Data)
+	}
+	if resp.LastSnapshot == nil || resp.LastSnapshot.Session.MeetingName != "British Grand Prix" {
+		t.Fatalf("last snapshot = %+v, want archived race", resp.LastSnapshot)
+	}
+	if resp.LastSnapshotAt == nil {
+		t.Fatal("last_snapshot_at should be present for archived snapshots")
+	}
+}

scripts/debug/f1_live_socket_probe.py

@@ -0,0 +1,264 @@
+#!/usr/bin/env python3
+"""Probe the official F1 live timing sockets for GPS position topics.
+
+This intentionally does not call OpenF1 REST. It connects directly to the F1
+SignalR endpoints used by the app and reports which topics arrive.
+"""
+
+from __future__ import annotations
+
+import argparse
+import base64
+import json
+import os
+import random
+import socket
+import ssl
+import struct
+import sys
+import time
+import urllib.parse
+import urllib.request
+
+
+RS = b"\x1e"
+CORE_NEGOTIATE = "https://livetiming.formula1.com/signalrcore/negotiate?negotiateVersion=1"
+CORE_WS_HOST = "livetiming.formula1.com"
+LEGACY_HUB = '[{"name":"Streaming"}]'
+TOPICS = [
+    "Heartbeat",
+    "TimingData",
+    "Position",
+    "Position.z",
+    "CarData",
+    "CarData.z",
+    "DriverList",
+    "LapCount",
+    "ExtrapolatedClock",
+    "TrackStatus",
+    "RaceControlMessages",
+    "WeatherData",
+    "SessionInfo",
+    "TeamRadio",
+    "CurrentTyres",
+    "TimingAppData",
+    "TimingStats",
+    "SessionStatus",
+    "TopThree",
+]
+
+
+class WebSocket:
+    def __init__(self, host: str, path: str, headers: dict[str, str] | None = None):
+        self.host = host
+        self.sock = ssl.create_default_context().wrap_socket(
+            socket.create_connection((host, 443), timeout=10),
+            server_hostname=host,
+        )
+        key = base64.b64encode(os.urandom(16)).decode("ascii")
+        request_headers = {
+            "Host": host,
+            "Upgrade": "websocket",
+            "Connection": "Upgrade",
+            "Sec-WebSocket-Key": key,
+            "Sec-WebSocket-Version": "13",
+            "Origin": "https://www.formula1.com",
+            "User-Agent": "Mozilla/5.0",
+        }
+        request_headers.update(headers or {})
+        lines = [f"GET {path} HTTP/1.1", *[f"{k}: {v}" for k, v in request_headers.items()], "", ""]
+        self.sock.sendall("\r\n".join(lines).encode("utf-8"))
+        response = self._read_http_response()
+        if b" 101 " not in response.split(b"\r\n", 1)[0]:
+            raise RuntimeError(response.decode("utf-8", "replace"))
+
+    def _read_http_response(self) -> bytes:
+        data = b""
+        while b"\r\n\r\n" not in data:
+            data += self.sock.recv(4096)
+        return data
+
+    def send_text(self, text: str) -> None:
+        payload = text.encode("utf-8")
+        header = bytearray([0x81])
+        if len(payload) < 126:
+            header.append(0x80 | len(payload))
+        elif len(payload) < 65536:
+            header.append(0x80 | 126)
+            header.extend(struct.pack("!H", len(payload)))
+        else:
+            header.append(0x80 | 127)
+            header.extend(struct.pack("!Q", len(payload)))
+        mask = random.randbytes(4) if hasattr(random, "randbytes") else os.urandom(4)
+        masked = bytes(b ^ mask[i % 4] for i, b in enumerate(payload))
+        self.sock.sendall(bytes(header) + mask + masked)
+
+    def recv_text(self, timeout: float = 5.0) -> str | None:
+        self.sock.settimeout(timeout)
+        while True:
+            first = self.sock.recv(2)
+            if not first:
+                return None
+            opcode = first[0] & 0x0F
+            masked = bool(first[1] & 0x80)
+            length = first[1] & 0x7F
+            if length == 126:
+                length = struct.unpack("!H", self._read_exact(2))[0]
+            elif length == 127:
+                length = struct.unpack("!Q", self._read_exact(8))[0]
+            mask = self._read_exact(4) if masked else b""
+            payload = self._read_exact(length)
+            if masked:
+                payload = bytes(b ^ mask[i % 4] for i, b in enumerate(payload))
+            if opcode == 0x8:
+                return None
+            if opcode == 0x9:
+                self._send_pong(payload)
+                continue
+            if opcode == 0x1:
+                return payload.decode("utf-8", "replace")
+
+    def _send_pong(self, payload: bytes) -> None:
+        self.sock.sendall(bytes([0x8A, len(payload)]) + payload)
+
+    def _read_exact(self, n: int) -> bytes:
+        chunks = []
+        remaining = n
+        while remaining:
+            chunk = self.sock.recv(remaining)
+            if not chunk:
+                raise EOFError("socket closed")
+            chunks.append(chunk)
+            remaining -= len(chunk)
+        return b"".join(chunks)
+
+    def close(self) -> None:
+        self.sock.close()
+
+
+def http_json(url: str, method: str = "GET", headers: dict[str, str] | None = None) -> tuple[dict, list[str]]:
+    req = urllib.request.Request(url, method=method, headers=headers or {})
+    with urllib.request.urlopen(req, timeout=15) as resp:
+        cookies = resp.headers.get_all("Set-Cookie") or []
+        return json.loads(resp.read()), cookies
+
+
+def core_probe(seconds: int) -> None:
+    print("== SignalR Core ==")
+    neg, cookies = http_json(
+        CORE_NEGOTIATE,
+        method="POST",
+        headers={"Origin": "https://www.formula1.com", "User-Agent": "Mozilla/5.0", "Content-Length": "0"},
+    )
+    token = urllib.parse.quote(neg["connectionToken"], safe="")
+    ws = WebSocket(
+        CORE_WS_HOST,
+        f"/signalrcore?id={token}",
+        {"Cookie": "; ".join(cookies)} if cookies else None,
+    )
+    try:
+        ws.send_text(json.dumps({"protocol": "json", "version": 1}, separators=(",", ":")) + RS.decode())
+        print("handshake:", repr(ws.recv_text()))
+        ws.send_text(
+            json.dumps(
+                {"type": 1, "target": "subscribe", "arguments": [TOPICS], "invocationId": "1"},
+                separators=(",", ":"),
+            )
+            + RS.decode()
+        )
+        collect(ws, seconds)
+    finally:
+        ws.close()
+
+
+def legacy_probe(seconds: int, bearer: str | None) -> None:
+    print("\n== Legacy SignalR ==")
+    query = urllib.parse.quote(LEGACY_HUB, safe="")
+    headers = {"User-Agent": "BestHTTP"}
+    if bearer:
+        headers["Authorization"] = f"Bearer {bearer}"
+    neg_url = f"https://livetiming.formula1.com/signalr/negotiate?clientProtocol=1.5&connectionData={query}"
+    try:
+        neg, cookies = http_json(neg_url, headers=headers)
+    except Exception as exc:
+        print("negotiate failed:", exc)
+        return
+    token = urllib.parse.quote(neg["ConnectionToken"], safe="")
+    path = f"/signalr/connect?clientProtocol=1.5&transport=webSockets&connectionToken={token}&connectionData={query}"
+    ws_headers = {"User-Agent": "BestHTTP"}
+    if cookies:
+        ws_headers["Cookie"] = "; ".join(cookies)
+    if bearer:
+        ws_headers["Authorization"] = f"Bearer {bearer}"
+    ws = WebSocket(CORE_WS_HOST, path, ws_headers)
+    try:
+        ws.send_text(json.dumps({"H": "Streaming", "M": "Subscribe", "A": [TOPICS], "I": 1}, separators=(",", ":")))
+        collect(ws, seconds)
+    finally:
+        ws.close()
+
+
+def collect(ws: WebSocket, seconds: int) -> None:
+    deadline = time.time() + seconds
+    seen: dict[str, int] = {}
+    while time.time() < deadline:
+        try:
+            message = ws.recv_text(timeout=min(5, max(1, deadline - time.time())))
+        except TimeoutError:
+            continue
+        if not message:
+            break
+        for frame in message.split(RS.decode()):
+            if not frame:
+                continue
+            try:
+                payload = json.loads(frame)
+            except json.JSONDecodeError:
+                continue
+            record_topics(payload, seen)
+    print("seen topics:")
+    for topic in sorted(seen):
+        print(f"  {topic}: {seen[topic]}")
+    if not any(topic.startswith("Position") for topic in seen):
+        print("  (no Position / Position.z topics observed)")
+
+
+def record_topics(payload: dict, seen: dict[str, int]) -> None:
+    result = payload.get("result") or payload.get("R")
+    if isinstance(result, dict):
+        for topic, data in result.items():
+            seen[topic] = seen.get(topic, 0) + 1
+            maybe_print_position(topic, data)
+    for message in payload.get("M") or []:
+        args = message.get("A") or []
+        if len(args) >= 2:
+            topic = args[0]
+            seen[topic] = seen.get(topic, 0) + 1
+            maybe_print_position(topic, args[1])
+    if payload.get("target") == "feed":
+        args = payload.get("arguments") or []
+        if len(args) >= 2:
+            topic = args[0]
+            seen[topic] = seen.get(topic, 0) + 1
+            maybe_print_position(topic, args[1])
+
+
+def maybe_print_position(topic: str, data) -> None:
+    if topic in {"Position", "Position.z"}:
+        text = json.dumps(data)[:600] if not isinstance(data, str) else data[:600]
+        print(f"POSITION TOPIC {topic}: {text}")
+
+
+def main() -> int:
+    parser = argparse.ArgumentParser()
+    parser.add_argument("--seconds", type=int, default=20)
+    parser.add_argument("--legacy", action="store_true", help="also probe legacy SignalR")
+    args = parser.parse_args()
+    core_probe(args.seconds)
+    if args.legacy:
+        legacy_probe(args.seconds, os.environ.get("BOXBOX_F1_LIVE_BEARER_TOKEN") or os.environ.get("F1_LIVE_BEARER_TOKEN"))
+    return 0
+
+
+if __name__ == "__main__":
+    raise SystemExit(main())

tests/command-center.spec.ts

@@ -28,6 +28,41 @@ test.describe('Command Center', () => {
     await expect(page.getByTestId(`rh-session-${FULL_SESSION}`)).toBeVisible()
   })
 
+  test('archived live snapshot does not mark command center live', async ({ page }) => {
+    await page.route('**/api/v1/live/state', (route) =>
+      route.fulfill({
+        contentType: 'application/json',
+        body: JSON.stringify({
+          is_live: false,
+          data: null,
+          last_snapshot: {
+            Drivers: { '1': { RacingNumber: '1', Position: 1 } },
+            DriverInfo: { '1': { RacingNumber: '1', Tla: 'VER', TeamColour: '3671C6' } },
+            Tyres: {},
+            RCMessages: [],
+            Weather: {},
+            Session: { MeetingName: 'Archived GP', SessionName: 'Race', SessionType: 'Race' },
+            TeamRadio: [],
+            SessionStatus: 'Finished',
+            TrackStatus: '1',
+            CurrentLap: 57,
+            TotalLaps: 57,
+            Clock: '',
+            ClockRefTime: '',
+            ClockExtrapolating: false,
+            Stints: {},
+          },
+          last_snapshot_at: '2026-07-04T14:00:00Z',
+        }),
+      }),
+    )
+
+    await page.goto('/')
+    await expect(page.getByTestId('command-center')).toBeVisible()
+    await expect(page.getByTestId('cc-live-status')).toContainText('No live session')
+    await expect(page.getByTestId('cc-live-status')).not.toContainText('Live session active')
+  })
+
   test('existing routes continue to work', async ({ page }) => {
     await page.goto(`/race-hub?session_key=${FULL_SESSION}`)
     await expect(page.getByTestId('race-hub')).toBeVisible()

tests/live-timing.spec.ts

@@ -239,4 +239,39 @@ test.describe('Live Timing (no session)', () => {
     await expect(page.getByTestId('live-empty')).toBeVisible()
     await expect(page.getByTestId('live-page')).toContainText('No live session active')
   })
+
+  test('renders an archived snapshot only after View Last Session', async ({ page }) => {
+    await page.route('**/api/v1/live/state', (route) =>
+      route.fulfill({
+        contentType: 'application/json',
+        body: JSON.stringify({
+          is_live: false,
+          data: null,
+          last_snapshot: {
+            ...raceSnapshot.data,
+            SessionStatus: 'Finished',
+          },
+          last_positions: {
+            '1': { x: 100, y: -50, z: 2, status: 'OnTrack' },
+          },
+          last_snapshot_at: '2026-07-04T14:00:00Z',
+        }),
+      }),
+    )
+    await page.route('**/api/v1/live/stream', (route) =>
+      route.fulfill({
+        contentType: 'text/event-stream',
+        body: 'event: heartbeat\ndata: {}\n\n',
+      }),
+    )
+
+    await page.goto('/live')
+    await expect(page.getByTestId('live-empty')).toContainText('No live session active')
+    await expect(page.getByText('Timing Tower')).toHaveCount(0)
+
+    await page.getByRole('button', { name: 'View Last Session' }).click()
+    await expect(page.getByTestId('live-archive-strip')).toContainText('Archived snapshot')
+    await expect(page.getByText('Timing Tower')).toBeVisible()
+    await expect(page.locator('.live-state')).toContainText('archive')
+  })
 })