feat(frontend): add reusable TyreStintTimeline component (#16 )

Extract stint timeline SVG from StrategyView into a data-source-agnostic chart primitive with compound legend, lap-axis ticks, and hover titles. StrategyView maps race-hub stint data into the new props contract. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-07 19:56:18 -04:00 · 2026-07-03 23:48:09 -04:00
16 changed files with 453 additions and 629 deletions
--- a/frontend/src/components/StrategyView.tsx
+++ b/frontend/src/components/StrategyView.tsx
@@ -1,28 +1,9 @@
 import type { EnrichedResult, Stint, PitStop } from '../types'
 import { compareFinishPosition } from '../utils'
-
-const COMPOUND_COLORS: Record<string, string> = {
-  SOFT: '#e8002d',
-  MEDIUM: '#ffd600',
-  HARD: '#e8e8e4',
-  INTERMEDIATE: '#39b54a',
-  WET: '#0067ff',
-}
-
-function compoundColor(c: string): string {
-  return COMPOUND_COLORS[c.toUpperCase()] ?? '#666'
-}
-
-function compoundInitial(c: string): string {
-  const abbr: Record<string, string> = {
-    SOFT: 'S',
-    MEDIUM: 'M',
-    HARD: 'H',
-    INTERMEDIATE: 'I',
-    WET: 'W',
-  }
-  return abbr[c.toUpperCase()] ?? c[0] ?? '?'
-}
+import {
+  TyreStintTimeline,
+  type StintTimelineRow,
+} from './charts/TyreStintTimeline'

 interface Props {
  results: EnrichedResult[]
@@ -31,7 +12,7 @@ interface Props {
  hasStints: boolean
 }

-export function StrategyView({ results, stints, pit_stops, hasStints }: Props) {
+export function StrategyView({ results, stints, pit_stops: _pitStops, hasStints }: Props) {
  if (!hasStints) {
    return (
      <div>
@@ -89,147 +70,29 @@ export function StrategyView({ results, stints, pit_stops, hasStints }: Props) {
    const cmp = compareFinishPosition(a.position, b.position)
    return cmp !== 0 ? cmp : a.driver_number - b.driver_number
  })
+
  const totalLaps = Math.max(
    ...stints.map((s) => s.lap_end),
    ...results.map((r) => r.number_of_laps),
-    1
+    1,
  )

-  const SVG_W = 640
-  const LEFT = 48
-  const RIGHT = 12
-  const ROW_H = 28
-  const BAR_H = 14
-  const BAR_Y = 7
-  const BAR_W = SVG_W - LEFT - RIGHT
-  const SVG_H = sortedDrivers.length * ROW_H + 8
-
-  const lapX = (lap: number) => LEFT + ((lap - 1) / totalLaps) * BAR_W
-  const stintW = (s: Stint) =>
-    Math.max(2, ((s.lap_end - s.lap_start + 1) / totalLaps) * BAR_W)
-
-  const usedCompounds = [...new Set(stints.map((s) => s.compound.toUpperCase()))].filter(
-    (c) => c in COMPOUND_COLORS
-  )
+  const timelineRows: StintTimelineRow[] = sortedDrivers.map((driver) => ({
+    label: driver.name_acronym || String(driver.driver_number),
+    color: driver.team_colour ? `#${driver.team_colour}` : '#888',
+    stints: stints
+      .filter((s) => s.driver_number === driver.driver_number)
+      .map((s) => ({
+        compound: s.compound,
+        lapStart: s.lap_start,
+        lapEnd: s.lap_end,
+        isNew: s.tyre_age_at_start === 0,
+      })),
+  }))

  return (
    <div data-testid="strategy-chart">
-      <div className="scroll-x">
-        <svg
-          viewBox={`0 0 ${SVG_W} ${SVG_H}`}
-          style={{ width: '100%', minWidth: 280, maxWidth: SVG_W, display: 'block' }}
-          role="img"
-          aria-label="Race strategy stint chart"
-        >
-          {sortedDrivers.map((driver, i) => {
-            const rowY = i * ROW_H
-            const color = driver.team_colour ? `#${driver.team_colour}` : '#888'
-            const dStints = stints.filter((s) => s.driver_number === driver.driver_number)
-            const dPits = pit_stops.filter((p) => p.driver_number === driver.driver_number)
-
-            return (
-              <g key={driver.driver_number} transform={`translate(0,${rowY})`}>
-                <text
-                  x={LEFT - 5}
-                  y={BAR_Y + BAR_H / 2 + 4}
-                  textAnchor="end"
-                  fill={color}
-                  fontFamily="var(--f-mono)"
-                  fontWeight={700}
-                  fontSize={10}
-                >
-                  {driver.name_acronym}
-                </text>
-
-                {dStints.map((stint, si) => {
-                  const x = lapX(stint.lap_start)
-                  const w = stintW(stint)
-                  const fill = compoundColor(stint.compound)
-                  return (
-                    <g key={si}>
-                      <rect x={x} y={BAR_Y} width={w} height={BAR_H} fill={fill} rx={1.5} />
-                      {w > 18 && (
-                        <text
-                          x={x + w / 2}
-                          y={BAR_Y + BAR_H / 2 + 4}
-                          textAnchor="middle"
-                          fill="#111"
-                          fontFamily="var(--f-mono)"
-                          fontWeight={700}
-                          fontSize={8}
-                        >
-                          {compoundInitial(stint.compound)}
-                        </text>
-                      )}
-                    </g>
-                  )
-                })}
-
-                {dPits.map((pit, pi) => {
-                  const x = lapX(pit.lap_number)
-                  return (
-                    <line
-                      key={pi}
-                      x1={x}
-                      x2={x}
-                      y1={BAR_Y - 3}
-                      y2={BAR_Y + BAR_H + 3}
-                      stroke="var(--text)"
-                      strokeWidth={1.5}
-                      opacity={0.7}
-                    />
-                  )
-                })}
-              </g>
-            )
-          })}
-        </svg>
-      </div>
-
-      <div
-        style={{
-          display: 'flex',
-          gap: 'var(--s4)',
-          flexWrap: 'wrap',
-          marginTop: 'var(--s4)',
-          fontSize: 11,
-          color: 'var(--text-3)',
-          alignItems: 'center',
-        }}
-      >
-        {usedCompounds.map((c) => (
-          <span key={c} style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
-            <span
-              style={{
-                width: 10,
-                height: 10,
-                background: COMPOUND_COLORS[c],
-                borderRadius: 2,
-                display: 'inline-block',
-                border: c === 'HARD' ? '1px solid #555' : undefined,
-              }}
-            />
-            {c.charAt(0) + c.slice(1).toLowerCase()}
-          </span>
-        ))}
-        {pit_stops.length > 0 && (
-          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, marginLeft: 4 }}>
-            <span
-              style={{
-                width: 1,
-                height: 12,
-                background: 'var(--text)',
-                display: 'inline-block',
-                opacity: 0.7,
-              }}
-            />
-            Pit stop
-          </span>
-        )}
-        <span style={{ marginLeft: 'auto', fontFamily: 'var(--f-mono)', fontSize: 10 }}>
-          {totalLaps} laps
-        </span>
-      </div>
+      <TyreStintTimeline rows={timelineRows} totalLaps={totalLaps} />
    </div>
  )
 }
--- a/frontend/src/components/charts/TyreStintTimeline.tsx
+++ b/frontend/src/components/charts/TyreStintTimeline.tsx
@@ -0,0 +1,182 @@
+import { compoundClass } from '../../lib/live'
+import '../../styles/stint-timeline.css'
+
+export interface StintTimelineStint {
+  compound: string
+  lapStart: number
+  lapEnd: number
+  isNew?: boolean
+}
+
+export interface StintTimelineRow {
+  label: string
+  color: string
+  stints: StintTimelineStint[]
+}
+
+interface TyreStintTimelineProps {
+  rows: StintTimelineRow[]
+  totalLaps: number
+}
+
+const SVG_W = 640
+const LEFT = 48
+const RIGHT = 12
+const ROW_H = 28
+const BAR_H = 14
+const BAR_Y = 7
+const AXIS_H = 20
+const BAR_W = SVG_W - LEFT - RIGHT
+
+const COMPOUND_ORDER = ['SOFT', 'MEDIUM', 'HARD', 'INTERMEDIATE', 'WET'] as const
+
+function compoundLabel(compound: string): string {
+  const upper = compound.toUpperCase()
+  if (upper === 'INTERMEDIATE') return 'Intermediate'
+  return upper.charAt(0) + upper.slice(1).toLowerCase()
+}
+
+function stintLength(stint: StintTimelineStint): number {
+  return stint.lapEnd - stint.lapStart + 1
+}
+
+function stintTitle(stint: StintTimelineStint): string {
+  const length = stintLength(stint)
+  return `${compoundLabel(stint.compound)} · L${stint.lapStart}–${stint.lapEnd} · ${length} lap${length === 1 ? '' : 's'}`
+}
+
+function lapX(lap: number, totalLaps: number): number {
+  return LEFT + (lap / totalLaps) * BAR_W
+}
+
+function stintBarX(stint: StintTimelineStint, totalLaps: number): number {
+  return LEFT + ((stint.lapStart - 1) / totalLaps) * BAR_W
+}
+
+function stintBarW(stint: StintTimelineStint, totalLaps: number): number {
+  return Math.max(2, (stintLength(stint) / totalLaps) * BAR_W)
+}
+
+function axisTicks(totalLaps: number): number[] {
+  const ticks: number[] = []
+  for (let lap = 0; lap <= totalLaps; lap += 10) {
+    ticks.push(lap)
+  }
+  return ticks
+}
+
+function collectUsedCompounds(rows: StintTimelineRow[]): string[] {
+  const seen = new Set<string>()
+  for (const row of rows) {
+    for (const stint of row.stints) {
+      seen.add(stint.compound.toUpperCase())
+    }
+  }
+  const ordered = COMPOUND_ORDER.filter((c) => seen.has(c))
+  const extras = [...seen]
+    .filter((c) => !COMPOUND_ORDER.includes(c as (typeof COMPOUND_ORDER)[number]))
+    .sort()
+  return [...ordered, ...extras]
+}
+
+export function TyreStintTimeline({ rows, totalLaps }: TyreStintTimelineProps) {
+  const safeTotal = Math.max(totalLaps, 1)
+  const usedCompounds = collectUsedCompounds(rows)
+  const ticks = axisTicks(safeTotal)
+  const chartH = rows.length * ROW_H
+  const svgH = chartH + AXIS_H + 4
+
+  if (rows.length === 0) {
+    return (
+      <div className="stint-timeline" data-testid="stint-timeline-empty">
+        <div className="stint-timeline__empty">No stint data to display.</div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="stint-timeline" data-testid="stint-timeline">
+      <div className="stint-timeline__scroll">
+        <svg
+          viewBox={`0 0 ${SVG_W} ${svgH}`}
+          className="stint-timeline__svg"
+          role="img"
+          aria-label="Tyre stint timeline"
+        >
+          {rows.map((row, i) => {
+            const rowY = i * ROW_H
+            return (
+              <g key={`${row.label}-${i}`} transform={`translate(0,${rowY})`}>
+                <text
+                  x={LEFT - 5}
+                  y={BAR_Y + BAR_H / 2 + 4}
+                  textAnchor="end"
+                  fill={row.color}
+                  className="stint-timeline__label"
+                >
+                  {row.label}
+                </text>
+
+                {row.stints.map((stint, si) => (
+                  <rect
+                    key={si}
+                    x={stintBarX(stint, safeTotal)}
+                    y={BAR_Y}
+                    width={stintBarW(stint, safeTotal)}
+                    height={BAR_H}
+                    rx={3}
+                    className={`stint-timeline__bar ${compoundClass(stint.compound)}${stint.isNew ? ' stint-timeline__bar--new' : ''}`}
+                  >
+                    <title>{stintTitle(stint)}</title>
+                  </rect>
+                ))}
+              </g>
+            )
+          })}
+
+          <g transform={`translate(0,${chartH})`}>
+            <line
+              x1={LEFT}
+              x2={LEFT + BAR_W}
+              y1={0}
+              y2={0}
+              className="stint-timeline__axis-line"
+            />
+            {ticks.map((lap) => (
+              <g key={lap}>
+                <line
+                  x1={lapX(lap, safeTotal)}
+                  x2={lapX(lap, safeTotal)}
+                  y1={0}
+                  y2={4}
+                  className="stint-timeline__axis-line"
+                />
+                <text
+                  x={lapX(lap, safeTotal)}
+                  y={14}
+                  textAnchor="middle"
+                  className="stint-timeline__axis-tick"
+                >
+                  {lap}
+                </text>
+              </g>
+            ))}
+          </g>
+        </svg>
+      </div>
+
+      <div className="stint-timeline__legend">
+        {usedCompounds.map((compound) => (
+          <span key={compound} className="stint-timeline__legend-item">
+            <span
+              className={`stint-timeline__legend-swatch ${compoundClass(compound)}`}
+              data-testid={`legend-${compound.toLowerCase()}`}
+            />
+            {compoundLabel(compound)}
+          </span>
+        ))}
+        <span className="stint-timeline__meta">{safeTotal} laps</span>
+      </div>
+    </div>
+  )
+}
--- a/frontend/src/components/live/TeamRadioTicker.tsx
+++ b/frontend/src/components/live/TeamRadioTicker.tsx
@@ -1,108 +0,0 @@
-import { useMemo, useRef, useState } from 'react'
-import { Pause, Play } from 'lucide-react'
-import type { LiveDriverInfo, LiveRadioCapture, LiveSessionMeta } from '../../types'
-import { radioCaptureKey, radioClipUrl } from '../../lib/radio'
-import { teamColor } from '../../utils'
-import '../../styles/team-radio.css'
-
-interface Props {
-  captures?: LiveRadioCapture[]
-  driverInfo?: Record<string, LiveDriverInfo>
-  session?: LiveSessionMeta
-}
-
-function relativeTime(utc: string): string {
-  const timestamp = new Date(utc).getTime()
-  if (!utc || Number.isNaN(timestamp)) return '--'
-
-  const diffSeconds = Math.max(0, Math.floor((Date.now() - timestamp) / 1000))
-  if (diffSeconds < 60) return `${diffSeconds}s ago`
-  const minutes = Math.floor(diffSeconds / 60)
-  if (minutes < 60) return `${minutes}m ago`
-  const hours = Math.floor(minutes / 60)
-  if (hours < 24) return `${hours}h ago`
-  return new Date(utc).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
-}
-
-function driverLabel(info: LiveDriverInfo | undefined, racingNumber: string): string {
-  return info?.Tla || racingNumber
-}
-
-export function TeamRadioTicker({ captures = [], driverInfo = {}, session }: Props) {
-  const audioRef = useRef<HTMLAudioElement | null>(null)
-  const [playingKey, setPlayingKey] = useState<string | null>(null)
-
-  const newestFirst = useMemo(() => [...captures].reverse(), [captures])
-
-  const toggleCapture = (capture: LiveRadioCapture) => {
-    const key = radioCaptureKey(capture)
-    const audio = audioRef.current
-    const url = radioClipUrl(session, capture)
-    if (!audio || !url) return
-
-    if (playingKey === key) {
-      audio.pause()
-      setPlayingKey(null)
-      return
-    }
-
-    audio.pause()
-    audio.src = url
-    setPlayingKey(key)
-    const play = audio.play()
-    if (play) {
-      play.catch(() => setPlayingKey(null))
-    }
-  }
-
-  return (
-    <section className="team-radio panel-glass" data-testid="team-radio-ticker">
-      <div className="sec-header sticky-header">
-        <span className="sec-title">Team Radio</span>
-        {captures.length > 0 && <span className="sec-meta">{captures.length} clips</span>}
-      </div>
-
-      <audio
-        ref={audioRef}
-        className="team-radio-audio"
-        onEnded={() => setPlayingKey(null)}
-      />
-
-      {newestFirst.length === 0 ? (
-        <div className="missing-notice">No team radio clips in the current live snapshot.</div>
-      ) : (
-        <div className="team-radio-list">
-          {newestFirst.map((capture) => {
-            const key = radioCaptureKey(capture)
-            const info = driverInfo[capture.RacingNumber]
-            const label = driverLabel(info, capture.RacingNumber)
-            const isPlaying = playingKey === key
-            const url = radioClipUrl(session, capture)
-
-            return (
-              <div className="team-radio-row" key={key}>
-                <button
-                  className="team-radio-play"
-                  type="button"
-                  aria-label={`${isPlaying ? 'Pause' : 'Play'} ${label} radio`}
-                  disabled={!url}
-                  onClick={() => toggleCapture(capture)}
-                >
-                  {isPlaying ? <Pause size={14} /> : <Play size={14} />}
-                </button>
-                <span
-                  className="team-radio-driver"
-                  style={{ borderColor: teamColor(info?.TeamColour) }}
-                  title={info?.TeamName || undefined}
-                >
-                  {label}
-                </span>
-                <span className="team-radio-time">{relativeTime(capture.Utc)}</span>
-              </div>
-            )
-          })}
-        </div>
-      )}
-    </section>
-  )
-}
--- a/frontend/src/lib/radio.ts
+++ b/frontend/src/lib/radio.ts
@@ -1,22 +0,0 @@
-import type { LiveRadioCapture, LiveSessionMeta } from '../types'
-
-export const LIVE_TIMING_STATIC_BASE = 'https://livetiming.formula1.com/static/'
-
-export function radioClipUrl(
-  session: Pick<LiveSessionMeta, 'Path'> | null | undefined,
-  capture: Pick<LiveRadioCapture, 'Path'> | null | undefined,
-): string {
-  const sessionPath = session?.Path?.trim()
-  const capturePath = capture?.Path?.trim()
-  if (!sessionPath || !capturePath) return ''
-  if (/^https?:\/\//i.test(capturePath)) return capturePath
-
-  const base = LIVE_TIMING_STATIC_BASE.replace(/\/+$/, '')
-  const normalizedSession = sessionPath.replace(/^\/+|\/+$/g, '')
-  const normalizedCapture = capturePath.replace(/^\/+/g, '')
-  return `${base}/${normalizedSession}/${normalizedCapture}`
-}
-
-export function radioCaptureKey(capture: LiveRadioCapture): string {
-  return `${capture.Utc}-${capture.RacingNumber}-${capture.Path}`
-}
--- a/frontend/src/pages/LiveTimingPage.tsx
+++ b/frontend/src/pages/LiveTimingPage.tsx
@@ -21,7 +21,6 @@ import { TimingTower } from '../components/live/TimingTower'
 import { BattleChips } from '../components/live/BattleChips'
 import { PinnedDrivers } from '../components/live/PinnedDrivers'
 import { RaceControlFeed } from '../components/live/RaceControlFeed'
-import { TeamRadioTicker } from '../components/live/TeamRadioTicker'
 import { TrackMap } from '../components/live/TrackMap'
 import { Radio } from 'lucide-react'

@@ -212,11 +211,6 @@ export function LiveTimingPage() {
              />
            </div>
            <div className="live-rc-col">
-              <TeamRadioTicker
-                captures={snapshot.TeamRadio ?? []}
-                driverInfo={snapshot.DriverInfo}
-                session={snapshot.Session}
-              />
              <RaceControlFeed messages={snapshot.RCMessages ?? []} driverInfo={snapshot.DriverInfo} />
            </div>
          </div>
--- a/frontend/src/styles/stint-timeline.css
+++ b/frontend/src/styles/stint-timeline.css
@@ -0,0 +1,94 @@
+.stint-timeline {
+  --stint-left: 48px;
+  --stint-right: 12px;
+  --stint-row-h: 28px;
+  --stint-bar-h: 14px;
+  --stint-axis-h: 20px;
+}
+
+.stint-timeline__scroll {
+  overflow-x: auto;
+}
+
+.stint-timeline__svg {
+  width: 100%;
+  min-width: 280px;
+  max-width: 640px;
+  display: block;
+}
+
+.stint-timeline__label {
+  font-family: var(--f-mono);
+  font-weight: 700;
+  font-size: 10px;
+}
+
+.stint-timeline__bar {
+  stroke: none;
+}
+
+.stint-timeline__bar.tyre-soft { fill: var(--tyre-soft); }
+.stint-timeline__bar.tyre-medium { fill: var(--tyre-medium); }
+.stint-timeline__bar.tyre-hard { fill: var(--tyre-hard); stroke: #555; stroke-width: 0.5; }
+.stint-timeline__bar.tyre-inter { fill: var(--tyre-inter); }
+.stint-timeline__bar.tyre-wet { fill: var(--tyre-wet); }
+.stint-timeline__bar.tyre-unknown { fill: var(--surface-2); stroke: var(--border-2); stroke-width: 0.5; }
+
+.stint-timeline__bar--new {
+  stroke: var(--text);
+  stroke-width: 1;
+  stroke-dasharray: 2 1;
+}
+
+.stint-timeline__axis-tick {
+  font-family: var(--f-mono);
+  font-size: 9px;
+  fill: var(--text-3);
+}
+
+.stint-timeline__axis-line {
+  stroke: var(--border-2);
+  stroke-width: 1;
+}
+
+.stint-timeline__legend {
+  display: flex;
+  gap: var(--s4);
+  flex-wrap: wrap;
+  margin-top: var(--s4);
+  font-size: 11px;
+  color: var(--text-3);
+  align-items: center;
+}
+
+.stint-timeline__legend-swatch {
+  width: 10px;
+  height: 10px;
+  border-radius: 2px;
+  display: inline-block;
+}
+
+.stint-timeline__legend-swatch.tyre-hard {
+  border: 1px solid #555;
+}
+
+.stint-timeline__legend-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.stint-timeline__meta {
+  margin-left: auto;
+  font-family: var(--f-mono);
+  font-size: 10px;
+}
+
+.stint-timeline__empty {
+  padding: var(--s5);
+  color: var(--text-3);
+  font-size: 13px;
+  text-align: center;
+  border: 1px dashed var(--border-2);
+  border-radius: var(--r2);
+}
--- a/frontend/src/styles/team-radio.css
+++ b/frontend/src/styles/team-radio.css
@@ -1,82 +0,0 @@
-.team-radio {
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  overflow: hidden;
-}
-
-.team-radio-audio {
-  display: none;
-}
-
-.team-radio-list {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  max-height: 260px;
-  overflow-y: auto;
-  padding-right: 2px;
-}
-
-.team-radio-row {
-  display: grid;
-  grid-template-columns: 28px minmax(44px, 56px) minmax(68px, 1fr);
-  align-items: center;
-  gap: 8px;
-  min-height: 34px;
-  padding: 6px 0;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-}
-
-.team-radio-row:last-child {
-  border-bottom: 0;
-}
-
-.team-radio-play {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  padding: 0;
-  border: 1px solid rgba(255, 255, 255, 0.18);
-  border-radius: 50%;
-  color: var(--text-1);
-  background: rgba(255, 255, 255, 0.06);
-  cursor: pointer;
-}
-
-.team-radio-play:hover:not(:disabled),
-.team-radio-play:focus-visible:not(:disabled) {
-  border-color: rgba(255, 255, 255, 0.36);
-  background: rgba(255, 255, 255, 0.12);
-}
-
-.team-radio-play:disabled {
-  color: var(--text-3);
-  cursor: not-allowed;
-  opacity: 0.55;
-}
-
-.team-radio-driver {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 44px;
-  height: 24px;
-  border-left: 3px solid var(--text-3);
-  color: var(--text-1);
-  font-family: var(--font-mono);
-  font-size: 12px;
-  font-weight: 700;
-  letter-spacing: 0;
-}
-
-.team-radio-time {
-  min-width: 0;
-  color: var(--text-2);
-  font-family: var(--font-mono);
-  font-size: 12px;
-  text-align: right;
-  white-space: nowrap;
-}
--- a/frontend/src/test/LiveComponents.test.tsx
+++ b/frontend/src/test/LiveComponents.test.tsx
@@ -201,7 +201,6 @@ describe('TimingTower', () => {
          CircuitName: 'Silverstone',
          SessionType: 'Sprint Qualifying',
          SessionName: 'Sprint Qualifying',
-          Path: '',
        }}
      />,
    )
--- a/frontend/src/test/TeamRadioTicker.test.tsx
+++ b/frontend/src/test/TeamRadioTicker.test.tsx
@@ -1,87 +0,0 @@
-import { afterEach, describe, expect, it, vi } from 'vitest'
-import { fireEvent, render, screen } from '@testing-library/react'
-import { TeamRadioTicker } from '../components/live/TeamRadioTicker'
-import { radioClipUrl } from '../lib/radio'
-import type { LiveDriverInfo, LiveRadioCapture, LiveSessionMeta } from '../types'
-
-const session: LiveSessionMeta = {
-  MeetingName: 'British Grand Prix',
-  CircuitName: 'Silverstone',
-  SessionType: 'Race',
-  SessionName: 'Race',
-  Path: '/2026/2026-07-05_British_Grand_Prix/2026-07-05_Race/',
-}
-
-const driverInfo: Record<string, LiveDriverInfo> = {
-  '4': {
-    RacingNumber: '4',
-    BroadcastName: 'L NORRIS',
-    Tla: 'NOR',
-    TeamName: 'McLaren',
-    TeamColour: 'ff8000',
-    FirstName: 'Lando',
-    LastName: 'Norris',
-  },
-  '16': {
-    RacingNumber: '16',
-    BroadcastName: 'C LECLERC',
-    Tla: 'LEC',
-    TeamName: 'Ferrari',
-    TeamColour: 'e8002d',
-    FirstName: 'Charles',
-    LastName: 'Leclerc',
-  },
-}
-
-const captures: LiveRadioCapture[] = [
-  { Utc: '2026-07-05T14:05:00Z', RacingNumber: '16', Path: '/TeamRadio/LEC-1.mp3' },
-  { Utc: '2026-07-05T14:07:00Z', RacingNumber: '4', Path: 'TeamRadio/NOR-1.mp3' },
-]
-
-afterEach(() => {
-  vi.restoreAllMocks()
-})
-
-describe('radioClipUrl', () => {
-  it('builds static CDN URLs from the session path and capture path', () => {
-    expect(radioClipUrl(session, captures[0])).toBe(
-      'https://livetiming.formula1.com/static/2026/2026-07-05_British_Grand_Prix/2026-07-05_Race/TeamRadio/LEC-1.mp3',
-    )
-  })
-
-  it('returns an empty URL without path data', () => {
-    expect(radioClipUrl({ ...session, Path: '' }, captures[0])).toBe('')
-    expect(radioClipUrl(session, { ...captures[0], Path: '' })).toBe('')
-  })
-})
-
-describe('TeamRadioTicker', () => {
-  it('renders captures newest first with driver labels', () => {
-    vi.spyOn(Date, 'now').mockReturnValue(Date.parse('2026-07-05T14:10:00Z'))
-
-    render(<TeamRadioTicker captures={captures} driverInfo={driverInfo} session={session} />)
-
-    const rows = screen.getAllByRole('button')
-    expect(rows).toHaveLength(2)
-    expect(screen.getByText('NOR')).toBeInTheDocument()
-    expect(screen.getByText('LEC')).toBeInTheDocument()
-    expect(screen.getAllByText(/m ago/).map((node) => node.textContent)).toEqual(['3m ago', '5m ago'])
-  })
-
-  it('uses one audio element and toggles play/pause per clip', () => {
-    const play = vi.spyOn(window.HTMLMediaElement.prototype, 'play').mockResolvedValue()
-    const pause = vi.spyOn(window.HTMLMediaElement.prototype, 'pause').mockImplementation(() => {})
-
-    render(<TeamRadioTicker captures={captures} driverInfo={driverInfo} session={session} />)
-
-    fireEvent.click(screen.getByLabelText('Play NOR radio'))
-    expect(play).toHaveBeenCalledTimes(1)
-    expect(document.querySelectorAll('audio')).toHaveLength(1)
-    expect(document.querySelector('audio')?.getAttribute('src')).toBe(
-      'https://livetiming.formula1.com/static/2026/2026-07-05_British_Grand_Prix/2026-07-05_Race/TeamRadio/NOR-1.mp3',
-    )
-
-    fireEvent.click(screen.getByLabelText('Pause NOR radio'))
-    expect(pause).toHaveBeenCalled()
-  })
-})
--- a/frontend/src/test/live.test.ts
+++ b/frontend/src/test/live.test.ts
@@ -100,8 +100,7 @@ const snapshot: LiveStreamData = {
    { Time: '14:08', Category: 'Drs', Flag: '', Message: 'DRS ENABLED', Lap: 3 },
  ],
  Weather: { AirTemp: 20, TrackTemp: 31, Humidity: 55, WindSpeed: 2, WindDir: 180, Rainfall: false },
-  Session: { MeetingName: 'Monaco Grand Prix', CircuitName: 'Monaco', SessionType: 'Race', SessionName: 'Race', Path: '2026/Monaco/Race' },
-  TeamRadio: [],
+  Session: { MeetingName: 'Monaco Grand Prix', CircuitName: 'Monaco', SessionType: 'Race', SessionName: 'Race' },
  TrackStatus: '1',
  CurrentLap: 21,
  TotalLaps: 78,
@@ -221,7 +220,7 @@ describe('track status mapping', () => {
 describe('live qualifying display', () => {
  it('puts the SQ1 cutoff after P17 for a 22-car sprint qualifying session', () => {
    const display = liveSessionDisplay(
-      { MeetingName: 'British Grand Prix', CircuitName: 'Silverstone', SessionType: 'Sprint Qualifying', SessionName: 'Sprint Qualifying', Path: '' },
+      { MeetingName: 'British Grand Prix', CircuitName: 'Silverstone', SessionType: 'Sprint Qualifying', SessionName: 'Sprint Qualifying' },
      rows(22),
    )
    expect(display.phaseLabel).toBe('SQ1')
@@ -233,7 +232,7 @@ describe('live qualifying display', () => {

  it('keeps the normal Q1 cutoff after P15 for a 20-car qualifying session', () => {
    const display = liveSessionDisplay(
-      { MeetingName: 'Monaco Grand Prix', CircuitName: 'Monaco', SessionType: 'Qualifying', SessionName: 'Qualifying', Path: '' },
+      { MeetingName: 'Monaco Grand Prix', CircuitName: 'Monaco', SessionType: 'Qualifying', SessionName: 'Qualifying' },
      rows(20),
    )
    expect(display.phaseLabel).toBe('Q1')
@@ -242,7 +241,7 @@ describe('live qualifying display', () => {

  it('moves phase 2 cutoff after P10 once five cars are knocked out', () => {
    const display = liveSessionDisplay(
-      { MeetingName: 'Monaco Grand Prix', CircuitName: 'Monaco', SessionType: 'Qualifying', SessionName: 'Qualifying', Path: '' },
+      { MeetingName: 'Monaco Grand Prix', CircuitName: 'Monaco', SessionType: 'Qualifying', SessionName: 'Qualifying' },
      rows(20, 5),
    )
    expect(display.phaseLabel).toBe('Q2')
@@ -252,13 +251,13 @@ describe('live qualifying display', () => {
  it('shows no cutoff for race sessions or Q3', () => {
    expect(
      liveSessionDisplay(
-        { MeetingName: 'Monaco Grand Prix', CircuitName: 'Monaco', SessionType: 'Race', SessionName: 'Race', Path: '' },
+        { MeetingName: 'Monaco Grand Prix', CircuitName: 'Monaco', SessionType: 'Race', SessionName: 'Race' },
        rows(20),
      ).cutoffPosition,
    ).toBeNull()
    expect(
      liveSessionDisplay(
-        { MeetingName: 'Monaco Grand Prix', CircuitName: 'Monaco', SessionType: 'Qualifying', SessionName: 'Q3', Path: '' },
+        { MeetingName: 'Monaco Grand Prix', CircuitName: 'Monaco', SessionType: 'Qualifying', SessionName: 'Q3' },
        rows(10),
      ).cutoffPosition,
    ).toBeNull()
--- a/frontend/src/test/tyre-stint-timeline.test.tsx
+++ b/frontend/src/test/tyre-stint-timeline.test.tsx
@@ -0,0 +1,149 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { TyreStintTimeline, type StintTimelineRow } from '../components/charts/TyreStintTimeline'
+import { StrategyView } from '../components/StrategyView'
+import type { EnrichedResult, Stint, PitStop } from '../types'
+
+const sampleRows: StintTimelineRow[] = [
+  {
+    label: 'VER',
+    color: '#3671C6',
+    stints: [
+      { compound: 'MEDIUM', lapStart: 1, lapEnd: 30 },
+      { compound: 'SOFT', lapStart: 31, lapEnd: 78 },
+    ],
+  },
+  {
+    label: 'HAM',
+    color: '#E8002D',
+    stints: [{ compound: 'SOFT', lapStart: 1, lapEnd: 18 }],
+  },
+]
+
+describe('TyreStintTimeline', () => {
+  it('renders one rect per stint', () => {
+    const { container } = render(
+      <TyreStintTimeline rows={sampleRows} totalLaps={78} />,
+    )
+    expect(container.querySelectorAll('.stint-timeline__bar')).toHaveLength(3)
+  })
+
+  it('maps compounds to color classes', () => {
+    const { container } = render(
+      <TyreStintTimeline rows={sampleRows} totalLaps={78} />,
+    )
+    const bars = container.querySelectorAll('.stint-timeline__bar')
+    expect(bars[0]).toHaveClass('tyre-medium')
+    expect(bars[1]).toHaveClass('tyre-soft')
+    expect(bars[2]).toHaveClass('tyre-soft')
+  })
+
+  it('shows native title with compound, lap range, and stint length', () => {
+    const { container } = render(
+      <TyreStintTimeline rows={sampleRows} totalLaps={78} />,
+    )
+    const titles = [...container.querySelectorAll('title')].map((t) => t.textContent)
+    expect(titles).toContain('Medium · L1–30 · 30 laps')
+    expect(titles).toContain('Soft · L31–78 · 48 laps')
+    expect(titles).toContain('Soft · L1–18 · 18 laps')
+  })
+
+  it('renders lap-axis ticks every 10 laps', () => {
+    render(<TyreStintTimeline rows={sampleRows} totalLaps={78} />)
+    expect(screen.getByText('0')).toBeInTheDocument()
+    expect(screen.getByText('10')).toBeInTheDocument()
+    expect(screen.getByText('20')).toBeInTheDocument()
+    expect(screen.getByText('70')).toBeInTheDocument()
+  })
+
+  it('shows legend only for used compounds', () => {
+    render(<TyreStintTimeline rows={sampleRows} totalLaps={78} />)
+    expect(screen.getByTestId('legend-soft')).toBeInTheDocument()
+    expect(screen.getByTestId('legend-medium')).toBeInTheDocument()
+    expect(screen.queryByTestId('legend-hard')).not.toBeInTheDocument()
+    expect(screen.queryByTestId('legend-wet')).not.toBeInTheDocument()
+    expect(screen.getByText('Soft')).toBeInTheDocument()
+    expect(screen.getByText('Medium')).toBeInTheDocument()
+  })
+
+  it('renders empty state when rows are empty', () => {
+    render(<TyreStintTimeline rows={[]} totalLaps={50} />)
+    expect(screen.getByTestId('stint-timeline-empty')).toBeInTheDocument()
+    expect(screen.getByText(/No stint data/i)).toBeInTheDocument()
+  })
+})
+
+const results: EnrichedResult[] = [
+  {
+    driver_number: 1,
+    position: 1,
+    name_acronym: 'VER',
+    full_name: 'Max Verstappen',
+    team_name: 'Red Bull Racing',
+    team_colour: '3671C6',
+    dnf: false,
+    dns: false,
+    dsq: false,
+    duration: null,
+    gap_to_leader: null,
+    number_of_laps: 78,
+    points: 25,
+    session_key: 9472,
+    meeting_key: 1229,
+  },
+  {
+    driver_number: 44,
+    position: 2,
+    name_acronym: 'HAM',
+    full_name: 'Lewis Hamilton',
+    team_name: 'Ferrari',
+    team_colour: 'E8002D',
+    dnf: false,
+    dns: false,
+    dsq: false,
+    duration: null,
+    gap_to_leader: 5.1,
+    number_of_laps: 78,
+    points: 18,
+    session_key: 9472,
+    meeting_key: 1229,
+  },
+]
+
+const stints: Stint[] = [
+  {
+    session_key: 9472,
+    driver_number: 1,
+    meeting_key: 1229,
+    stint_number: 1,
+    compound: 'MEDIUM',
+    lap_start: 1,
+    lap_end: 30,
+    tyre_age_at_start: 0,
+  },
+  {
+    session_key: 9472,
+    driver_number: 44,
+    meeting_key: 1229,
+    stint_number: 1,
+    compound: 'SOFT',
+    lap_start: 1,
+    lap_end: 18,
+    tyre_age_at_start: 0,
+  },
+]
+
+const pitStops: PitStop[] = []
+
+describe('StrategyView integration', () => {
+  it('renders timeline when stints exist', () => {
+    const { container } = render(
+      <StrategyView results={results} stints={stints} pit_stops={pitStops} hasStints={true} />,
+    )
+    expect(container.querySelector('[data-testid="strategy-chart"]')).toBeInTheDocument()
+    expect(screen.getByTestId('stint-timeline')).toBeInTheDocument()
+    expect(screen.getByText('VER')).toBeInTheDocument()
+    expect(screen.getByText('HAM')).toBeInTheDocument()
+    expect(container.querySelectorAll('.stint-timeline__bar')).toHaveLength(2)
+  })
+})
--- a/frontend/src/types.ts
+++ b/frontend/src/types.ts
@@ -261,7 +261,6 @@ export interface LiveSessionMeta {
  CircuitName: string
  SessionType: string
  SessionName: string
-  Path: string
 }

 export interface LiveStintData {
@@ -270,12 +269,6 @@ export interface LiveStintData {
  Laps: number
 }

-export interface LiveRadioCapture {
-  Utc: string
-  RacingNumber: string
-  Path: string
-}
-
 export interface LiveStreamData {
  Drivers: Record<string, LiveDriverData>
  DriverInfo: Record<string, LiveDriverInfo>
@@ -284,7 +277,6 @@ export interface LiveStreamData {
  RCMessages: LiveRCMessage[]
  Weather: LiveWeatherData
  Session: LiveSessionMeta
-  TeamRadio: LiveRadioCapture[]
  TrackStatus: string
  CurrentLap: number
  TotalLaps: number
--- a/internal/live/parser_test.go
+++ b/internal/live/parser_test.go
@@ -5,7 +5,6 @@ import (
 	"compress/flate"
 	"encoding/base64"
 	"encoding/json"
-	"fmt"
 	"testing"
 	"time"

@@ -212,16 +211,12 @@ func TestProcessTopicSessionInfoCircuitName(t *testing.T) {
 	state.ProcessTopic("SessionInfo", json.RawMessage(`{
 		"Meeting": {"Name": "British Grand Prix", "Circuit": {"ShortName": "Silverstone"}},
 		"Name": "Race",
-		"Type": "Race",
-		"Path": "2026/2026-07-05_British_Grand_Prix/2026-07-05_Race/"
+		"Type": "Race"
 	}`))
 	s := state.Snapshot().Session
 	if s.MeetingName != "British Grand Prix" || s.CircuitName != "Silverstone" {
 		t.Fatalf("session = %+v", s)
 	}
-	if s.Path != "2026/2026-07-05_British_Grand_Prix/2026-07-05_Race/" {
-		t.Fatalf("session path = %q", s.Path)
-	}
 }

 func TestProcessTopicDriverList(t *testing.T) {
@@ -290,68 +285,6 @@ func TestProcessTopicRaceControlMessages(t *testing.T) {
 	}
 }

-func TestProcessTopicTeamRadioSnapshotAndPatch(t *testing.T) {
-	state := live.NewState()
-	snapshot := json.RawMessage(`{
-		"Captures": [
-			{"Utc": "2026-07-05T14:05:30Z", "RacingNumber": "4", "Path": "TeamRadio/NOR-1.mp3"},
-			{"Utc": "2026-07-05T14:04:10Z", "RacingNumber": "16", "Path": "TeamRadio/LEC-1.mp3"}
-		]
-	}`)
-
-	if !state.ProcessTopic("TeamRadio", snapshot) {
-		t.Fatal("TeamRadio snapshot should update state")
-	}
-
-	patch := json.RawMessage(`{
-		"Captures": {
-			"2": {"Utc": "2026-07-05T14:06:00Z", "RacingNumber": "44", "Path": "TeamRadio/HAM-1.mp3"}
-		}
-	}`)
-	if !state.ProcessTopic("TeamRadio", patch) {
-		t.Fatal("TeamRadio keyed patch should update state")
-	}
-
-	radio := state.Snapshot().TeamRadio
-	if len(radio) != 3 {
-		t.Fatalf("radio captures = %d, want 3", len(radio))
-	}
-	if radio[0].RacingNumber != "16" || radio[1].RacingNumber != "4" || radio[2].RacingNumber != "44" {
-		t.Fatalf("radio order = %+v", radio)
-	}
-}
-
-func TestProcessTopicTeamRadioMalformed(t *testing.T) {
-	state := live.NewState()
-	if state.ProcessTopic("TeamRadio", json.RawMessage(`{"Captures": {"1": {"Utc": "2026-07-05T14:06:00Z", "Path": "missing-driver.mp3"}}}`)) {
-		t.Fatal("incomplete TeamRadio capture should not update state")
-	}
-	if state.ProcessTopic("TeamRadio", json.RawMessage(`{"Captures": "not-a-list"}`)) {
-		t.Fatal("unexpected TeamRadio captures shape should not update state")
-	}
-	if len(state.Snapshot().TeamRadio) != 0 {
-		t.Fatalf("malformed captures mutated state: %+v", state.Snapshot().TeamRadio)
-	}
-}
-
-func TestProcessTopicTeamRadioCapsAtTwenty(t *testing.T) {
-	state := live.NewState()
-	for i := 0; i < 25; i++ {
-		payload := json.RawMessage([]byte(fmt.Sprintf(`{
-			"Captures": [{"Utc": "2026-07-05T14:%02d:00Z", "RacingNumber": "%d", "Path": "TeamRadio/%02d.mp3"}]
-		}`, i, i, i)))
-		state.ProcessTopic("TeamRadio", payload)
-	}
-
-	radio := state.Snapshot().TeamRadio
-	if len(radio) != 20 {
-		t.Fatalf("radio captures = %d, want 20", len(radio))
-	}
-	if radio[0].Utc != "2026-07-05T14:05:00Z" || radio[19].Utc != "2026-07-05T14:24:00Z" {
-		t.Fatalf("radio cap kept wrong captures: first=%+v last=%+v", radio[0], radio[19])
-	}
-}
-
 func TestProcessTopicWeatherData(t *testing.T) {
 	state := live.NewState()
 	state.ProcessTopic("WeatherData", json.RawMessage(`{
--- a/internal/live/signalr.go
+++ b/internal/live/signalr.go
@@ -105,7 +105,6 @@ func connectToF1SignalRCore(dataChan chan LiveStreamData) error {
 		"RaceControlMessages",
 		"WeatherData",
 		"SessionInfo",
-		"TeamRadio",
 		"CurrentTyres",
 		"TimingAppData",
 		"TimingStats",
@@ -197,7 +196,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","CurrentTyres","TimingAppData","TimingStats"]],"I":1}`)
 	err = c.WriteMessage(websocket.TextMessage, subscribeMsg)
 	if err != nil {
 		return err
--- a/internal/live/state.go
+++ b/internal/live/state.go
@@ -8,8 +8,6 @@ import (
 	"encoding/json"
 	"fmt"
 	"io"
-	"log"
-	"sort"
 	"strings"
 	"time"
 )
@@ -25,7 +23,6 @@ type State struct {
 	RCMessages         []LiveRCMessage
 	Weather            LiveWeatherData
 	Session            LiveSessionMeta
-	TeamRadio          []LiveRadioCapture
 	TrackStatus        string
 	CurrentLap         int
 	TotalLaps          int
@@ -37,7 +34,6 @@ type State struct {
 }

 const signalRRecordSeparator = byte(0x1e)
-const maxTeamRadioCaptures = 20

 // NewState returns an empty live timing accumulator.
 func NewState() *State {
@@ -75,8 +71,6 @@ func (s *State) Snapshot() LiveStreamData {
 	}
 	cpyRC := make([]LiveRCMessage, len(s.RCMessages))
 	copy(cpyRC, s.RCMessages)
-	cpyRadio := make([]LiveRadioCapture, len(s.TeamRadio))
-	copy(cpyRadio, s.TeamRadio)
 	cpyStints := make(map[string][]LiveStintData, len(s.Stints))
 	for k, v := range s.Stints {
 		st := make([]LiveStintData, len(v))
@@ -92,7 +86,6 @@ func (s *State) Snapshot() LiveStreamData {
 		RCMessages:         cpyRC,
 		Weather:            s.Weather,
 		Session:            s.Session,
-		TeamRadio:          cpyRadio,
 		TrackStatus:        s.TrackStatus,
 		CurrentLap:         s.CurrentLap,
 		TotalLaps:          s.TotalLaps,
@@ -342,7 +335,6 @@ func (s *State) ProcessTopic(topic string, data json.RawMessage) bool {
 			} `json:"Meeting"`
 			Name string `json:"Name"`
 			Type string `json:"Type"`
-			Path string `json:"Path"`
 		}
 		if json.Unmarshal(data, &si) == nil {
 			if si.Meeting.Name != "" {
@@ -357,13 +349,8 @@ func (s *State) ProcessTopic(topic string, data json.RawMessage) bool {
 			if si.Type != "" {
 				s.Session.SessionType = si.Type
 			}
-			if si.Path != "" {
-				s.Session.Path = si.Path
-			}
 			updated = true
 		}
-	case "TeamRadio":
-		updated = s.updateTeamRadio(data)
 	case "CurrentTyres":
 		var ct map[string]json.RawMessage
 		if json.Unmarshal(data, &ct) == nil {
@@ -496,62 +483,6 @@ func readCompressed(r io.ReadCloser, err error) ([]byte, bool) {
 	return out, err == nil
 }

-func (s *State) updateTeamRadio(data json.RawMessage) bool {
-	var payload struct {
-		Captures json.RawMessage `json:"Captures"`
-	}
-	if err := json.Unmarshal(data, &payload); err != nil {
-		log.Printf("live: skipping malformed TeamRadio payload: %v", err)
-		return false
-	}
-	if len(payload.Captures) == 0 || string(payload.Captures) == "null" {
-		log.Printf("live: skipping TeamRadio payload without Captures")
-		return false
-	}
-
-	captures := indexedRawValues(payload.Captures)
-	if len(captures) == 0 {
-		log.Printf("live: skipping TeamRadio payload with unexpected Captures shape")
-		return false
-	}
-
-	updated := false
-	for _, captureRaw := range captures {
-		var capture LiveRadioCapture
-		if err := json.Unmarshal(captureRaw.Raw, &capture); err != nil {
-			log.Printf("live: skipping malformed TeamRadio capture: %v", err)
-			continue
-		}
-		if capture.Utc == "" || capture.RacingNumber == "" || capture.Path == "" {
-			log.Printf("live: skipping incomplete TeamRadio capture: utc=%q racing_number=%q path=%q", capture.Utc, capture.RacingNumber, capture.Path)
-			continue
-		}
-		if s.hasTeamRadioCapture(capture) {
-			continue
-		}
-		s.TeamRadio = append(s.TeamRadio, capture)
-		updated = true
-	}
-	if updated {
-		sort.SliceStable(s.TeamRadio, func(i, j int) bool {
-			return s.TeamRadio[i].Utc < s.TeamRadio[j].Utc
-		})
-		if len(s.TeamRadio) > maxTeamRadioCaptures {
-			s.TeamRadio = append([]LiveRadioCapture(nil), s.TeamRadio[len(s.TeamRadio)-maxTeamRadioCaptures:]...)
-		}
-	}
-	return updated
-}
-
-func (s *State) hasTeamRadioCapture(capture LiveRadioCapture) bool {
-	for _, existing := range s.TeamRadio {
-		if existing.Utc == capture.Utc && existing.RacingNumber == capture.RacingNumber && existing.Path == capture.Path {
-			return true
-		}
-	}
-	return false
-}
-
 func (s *State) updatePositions(data json.RawMessage) bool {
 	var payload struct {
 		Position json.RawMessage `json:"Position"`
@@ -868,9 +799,6 @@ func indexedRawValues(raw json.RawMessage) []indexedRaw {
 			fmt.Sscanf(k, "%d", &i)
 			values = append(values, indexedRaw{Index: i, Raw: v})
 		}
-		sort.Slice(values, func(i, j int) bool {
-			return values[i].Index < values[j].Index
-		})
 		return values
 	}

--- a/internal/live/types.go
+++ b/internal/live/types.go
@@ -85,7 +85,6 @@ type LiveSessionMeta struct {
 	CircuitName string
 	SessionType string
 	SessionName string
-	Path        string
 }

 // LivePositionData is the latest raw F1 GPS position for one driver.
@@ -145,13 +144,6 @@ type LiveStintData struct {
 	Laps     int
 }

-// LiveRadioCapture is one team radio audio clip from the live timing feed.
-type LiveRadioCapture struct {
-	Utc          string
-	RacingNumber string
-	Path         string
-}
-
 // LiveStreamData is an immutable snapshot of all live timing state.
 type LiveStreamData struct {
 	Drivers            map[string]LiveDriverData
@@ -161,7 +153,6 @@ type LiveStreamData struct {
 	RCMessages         []LiveRCMessage
 	Weather            LiveWeatherData
 	Session            LiveSessionMeta
-	TeamRadio          []LiveRadioCapture
 	TrackStatus        string // "1"=green "2"=yellow "4"=SC "5"=red "6"=VSC
 	CurrentLap         int
 	TotalLaps          int