Upgrade live timing page for race weekends

- Track status flag banner (green/yellow/SC/VSC/red, defensive mapping)
- Weather strip: air/track temp, humidity, wind with compass, rain badge
- Gap trend sparklines from a per-driver interval ring buffer
- Battle detection: consecutive cars within 1.0s chained and highlighted
- Stint history column with compound sequence per driver
- Pinnable drivers (max 3) with focus cards, persisted to localStorage

Pure logic lives in lib/gapHistory.ts and lib/battles.ts with unit
tests; 137 frontend tests passing.

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

frontend/src/components/live/BattleChips.tsx

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

frontend/src/components/live/GapSparkline.tsx

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

frontend/src/components/live/PinnedDrivers.tsx

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

frontend/src/components/live/SessionBanner.tsx

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

frontend/src/components/live/StintHistory.tsx

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

frontend/src/components/live/TimingTower.tsx

@@ -1,16 +1,24 @@
 import { teamColor } from '../../utils'
-import type { LiveStreamData } from '../../types'
+import type { LiveStintData } from '../../types'
+import type { LiveTimingRow } from '../../lib/live'
 import {
   driverCode,
   positionDelta,
   positionDeltaClass,
-  sortLiveTimingRows,
   tyreClass,
   tyreLabel,
 } from '../../lib/live'
+import type { GapHistoryMap } from '../../lib/gapHistory'
+import { GapSparkline } from './GapSparkline'
+import { StintHistory } from './StintHistory'
 
 interface Props {
-  snapshot: LiveStreamData
+  rows: LiveTimingRow[]
+  stints?: Record<string, LiveStintData[]>
+  history?: GapHistoryMap
+  battleNumbers?: Set<string>
+  pinned?: string[]
+  onTogglePin?: (racingNumber: string) => void
 }
 
 function posClass(pos: number): string {
@@ -20,9 +28,14 @@ function posClass(pos: number): string {
   return 'pos-n'
 }
 
-export function TimingTower({ snapshot }: Props) {
-  const rows = sortLiveTimingRows(snapshot)
-
+export function TimingTower({
+  rows,
+  stints,
+  history,
+  battleNumbers,
+  pinned,
+  onTogglePin,
+}: Props) {
   if (rows.length === 0) {
     return (
       <div className="missing-notice">
@@ -33,7 +46,7 @@ export function TimingTower({ snapshot }: Props) {
 
   return (
     <div className="scroll-x">
-      <table className="data-table live-tower" style={{ minWidth: 480 }}>
+      <table className="data-table live-tower" style={{ minWidth: 620 }}>
         <thead>
           <tr>
             <th>Pos</th>
@@ -42,7 +55,9 @@ export function TimingTower({ snapshot }: Props) {
             <th>Tyre</th>
             <th>Last Lap</th>
             <th>Gap</th>
+            <th>Trend</th>
             <th className="hide-mobile">Best</th>
+            <th className="hide-mobile">Stints</th>
             <th className="hide-mobile r">Laps</th>
           </tr>
         </thead>
@@ -51,6 +66,8 @@ export function TimingTower({ snapshot }: Props) {
             const driver = row.Driver
             const delta = positionDelta(driver)
             const deltaClass = positionDeltaClass(driver)
+            const isPinned = pinned?.includes(row.RacingNumber) ?? false
+            const inBattle = battleNumbers?.has(row.RacingNumber) ?? false
             return (
               <tr
                 key={row.RacingNumber}
@@ -58,7 +75,12 @@ export function TimingTower({ snapshot }: Props) {
                   driver.InPit ? 'in-pit' : '',
                   driver.PitOut ? 'pit-out' : '',
                   driver.Retired ? 'retired' : '',
+                  inBattle ? 'battle-row' : '',
+                  isPinned ? 'pinned-row' : '',
+                  onTogglePin ? 'pinnable' : '',
                 ].filter(Boolean).join(' ')}
+                onClick={onTogglePin ? () => onTogglePin(row.RacingNumber) : undefined}
+                title={onTogglePin ? (isPinned ? 'Click to unpin' : 'Click to pin (max 3)') : undefined}
               >
                 <td className={`mono ${posClass(row.Position)}`}>{row.Position}</td>
                 <td className={`pos-delta${deltaClass ? ` ${deltaClass}` : ''}`}>{delta}</td>
@@ -67,6 +89,7 @@ export function TimingTower({ snapshot }: Props) {
                     <div className="drv-bar" style={{ background: teamColor(row.Info?.TeamColour) }} />
                     <span className="drv-code">{driverCode(row)}</span>
                     <span className="drv-num">{row.RacingNumber}</span>
+                    {isPinned && <span className="pin-mark" title="Pinned">◈</span>}
                     {driver.InPit && <span className="badge badge-pit">PIT</span>}
                     {driver.PitOut && !driver.InPit && <span className="badge badge-pit">OUT</span>}
                     {driver.Retired && <span className="badge badge-out">RET</span>}
@@ -82,9 +105,15 @@ export function TimingTower({ snapshot }: Props) {
                   {driver.LastLapTime || '-'}
                 </td>
                 <td className="mono">{driver.GapToLeader || driver.Interval || '-'}</td>
+                <td className="spark-cell">
+                  <GapSparkline samples={history?.[row.RacingNumber]} />
+                </td>
                 <td className={`hide-mobile ${driver.BestLapOB ? 'mono lap-ob' : 'mono'}`}>
                   {driver.BestLapTime || '-'}
                 </td>
+                <td className="hide-mobile">
+                  <StintHistory stints={stints?.[row.RacingNumber]} />
+                </td>
                 <td className="hide-mobile mono r">{driver.NumberOfLaps || '-'}</td>
               </tr>
             )

frontend/src/components/live/TrackStatusBanner.tsx

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

frontend/src/components/live/WeatherStrip.tsx

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