feat(live): add team radio ticker

Subscribe to TeamRadio on the F1 live feed, parse defensive capture snapshots and patches, and relay capped captures through live snapshots with the SessionInfo static path. Add the frontend CDN URL helper and ticker using one shared audio element.
2026-08-08 12:07:23 -04:00 · 2026-07-03 23:56:19 -04:00
16 changed files with 629 additions and 453 deletions
--- a/frontend/src/components/StrategyView.tsx
+++ b/frontend/src/components/StrategyView.tsx
@@ -1,9 +1,28 @@
 import type { EnrichedResult, Stint, PitStop } from '../types'
 import { compareFinishPosition } from '../utils'
-import {
-  TyreStintTimeline,
-  type StintTimelineRow,
-} from './charts/TyreStintTimeline'
+
+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] ?? '?'
+}

 interface Props {
  results: EnrichedResult[]
@@ -12,7 +31,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>
@@ -70,29 +89,147 @@ export function StrategyView({ results, stints, pit_stops: _pitStops, hasStints
    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 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,
-      })),
-  }))
+  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
+  )

  return (
    <div data-testid="strategy-chart">
-      <TyreStintTimeline rows={timelineRows} totalLaps={totalLaps} />
+      <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>
    </div>
  )
 }
--- a/frontend/src/components/charts/TyreStintTimeline.tsx
+++ b/frontend/src/components/charts/TyreStintTimeline.tsx
@@ -1,182 +0,0 @@
-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
@@ -0,0 +1,108 @@
+import { useMemo, useRef, useState } from 'react'
+import { Pause, Play } from 'lucide-react'
+import type { LiveDriverInfo, LiveRadioCapture, LiveSessionMeta } from '../../types'
+import { radioCaptureKey, radioClipUrl } from '../../lib/radio'
+import { teamColor } from '../../utils'
+import '../../styles/team-radio.css'
+
+interface Props {
+  captures?: LiveRadioCapture[]
+  driverInfo?: Record<string, LiveDriverInfo>
+  session?: LiveSessionMeta
+}
+
+function relativeTime(utc: string): string {
+  const timestamp = new Date(utc).getTime()
+  if (!utc || Number.isNaN(timestamp)) return '--'
+
+  const diffSeconds = Math.max(0, Math.floor((Date.now() - timestamp) / 1000))
+  if (diffSeconds < 60) return `${diffSeconds}s ago`
+  const minutes = Math.floor(diffSeconds / 60)
+  if (minutes < 60) return `${minutes}m ago`
+  const hours = Math.floor(minutes / 60)
+  if (hours < 24) return `${hours}h ago`
+  return new Date(utc).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+}
+
+function driverLabel(info: LiveDriverInfo | undefined, racingNumber: string): string {
+  return info?.Tla || racingNumber
+}
+
+export function TeamRadioTicker({ captures = [], driverInfo = {}, session }: Props) {
+  const audioRef = useRef<HTMLAudioElement | null>(null)
+  const [playingKey, setPlayingKey] = useState<string | null>(null)
+
+  const newestFirst = useMemo(() => [...captures].reverse(), [captures])
+
+  const toggleCapture = (capture: LiveRadioCapture) => {
+    const key = radioCaptureKey(capture)
+    const audio = audioRef.current
+    const url = radioClipUrl(session, capture)
+    if (!audio || !url) return
+
+    if (playingKey === key) {
+      audio.pause()
+      setPlayingKey(null)
+      return
+    }
+
+    audio.pause()
+    audio.src = url
+    setPlayingKey(key)
+    const play = audio.play()
+    if (play) {
+      play.catch(() => setPlayingKey(null))
+    }
+  }
+
+  return (
+    <section className="team-radio panel-glass" data-testid="team-radio-ticker">
+      <div className="sec-header sticky-header">
+        <span className="sec-title">Team Radio</span>
+        {captures.length > 0 && <span className="sec-meta">{captures.length} clips</span>}
+      </div>
+
+      <audio
+        ref={audioRef}
+        className="team-radio-audio"
+        onEnded={() => setPlayingKey(null)}
+      />
+
+      {newestFirst.length === 0 ? (
+        <div className="missing-notice">No team radio clips in the current live snapshot.</div>
+      ) : (
+        <div className="team-radio-list">
+          {newestFirst.map((capture) => {
+            const key = radioCaptureKey(capture)
+            const info = driverInfo[capture.RacingNumber]
+            const label = driverLabel(info, capture.RacingNumber)
+            const isPlaying = playingKey === key
+            const url = radioClipUrl(session, capture)
+
+            return (
+              <div className="team-radio-row" key={key}>
+                <button
+                  className="team-radio-play"
+                  type="button"
+                  aria-label={`${isPlaying ? 'Pause' : 'Play'} ${label} radio`}
+                  disabled={!url}
+                  onClick={() => toggleCapture(capture)}
+                >
+                  {isPlaying ? <Pause size={14} /> : <Play size={14} />}
+                </button>
+                <span
+                  className="team-radio-driver"
+                  style={{ borderColor: teamColor(info?.TeamColour) }}
+                  title={info?.TeamName || undefined}
+                >
+                  {label}
+                </span>
+                <span className="team-radio-time">{relativeTime(capture.Utc)}</span>
+              </div>
+            )
+          })}
+        </div>
+      )}
+    </section>
+  )
+}
--- a/frontend/src/lib/radio.ts
+++ b/frontend/src/lib/radio.ts
@@ -0,0 +1,22 @@
+import type { LiveRadioCapture, LiveSessionMeta } from '../types'
+
+export const LIVE_TIMING_STATIC_BASE = 'https://livetiming.formula1.com/static/'
+
+export function radioClipUrl(
+  session: Pick<LiveSessionMeta, 'Path'> | null | undefined,
+  capture: Pick<LiveRadioCapture, 'Path'> | null | undefined,
+): string {
+  const sessionPath = session?.Path?.trim()
+  const capturePath = capture?.Path?.trim()
+  if (!sessionPath || !capturePath) return ''
+  if (/^https?:\/\//i.test(capturePath)) return capturePath
+
+  const base = LIVE_TIMING_STATIC_BASE.replace(/\/+$/, '')
+  const normalizedSession = sessionPath.replace(/^\/+|\/+$/g, '')
+  const normalizedCapture = capturePath.replace(/^\/+/g, '')
+  return `${base}/${normalizedSession}/${normalizedCapture}`
+}
+
+export function radioCaptureKey(capture: LiveRadioCapture): string {
+  return `${capture.Utc}-${capture.RacingNumber}-${capture.Path}`
+}
--- a/frontend/src/pages/LiveTimingPage.tsx
+++ b/frontend/src/pages/LiveTimingPage.tsx
@@ -21,6 +21,7 @@ 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'

@@ -211,6 +212,11 @@ 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
@@ -1,94 +0,0 @@
-.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
@@ -0,0 +1,82 @@
+.team-radio {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.team-radio-audio {
+  display: none;
+}
+
+.team-radio-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  max-height: 260px;
+  overflow-y: auto;
+  padding-right: 2px;
+}
+
+.team-radio-row {
+  display: grid;
+  grid-template-columns: 28px minmax(44px, 56px) minmax(68px, 1fr);
+  align-items: center;
+  gap: 8px;
+  min-height: 34px;
+  padding: 6px 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.team-radio-row:last-child {
+  border-bottom: 0;
+}
+
+.team-radio-play {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  border-radius: 50%;
+  color: var(--text-1);
+  background: rgba(255, 255, 255, 0.06);
+  cursor: pointer;
+}
+
+.team-radio-play:hover:not(:disabled),
+.team-radio-play:focus-visible:not(:disabled) {
+  border-color: rgba(255, 255, 255, 0.36);
+  background: rgba(255, 255, 255, 0.12);
+}
+
+.team-radio-play:disabled {
+  color: var(--text-3);
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.team-radio-driver {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 44px;
+  height: 24px;
+  border-left: 3px solid var(--text-3);
+  color: var(--text-1);
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0;
+}
+
+.team-radio-time {
+  min-width: 0;
+  color: var(--text-2);
+  font-family: var(--font-mono);
+  font-size: 12px;
+  text-align: right;
+  white-space: nowrap;
+}
--- a/frontend/src/test/LiveComponents.test.tsx
+++ b/frontend/src/test/LiveComponents.test.tsx
@@ -201,6 +201,7 @@ 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
@@ -0,0 +1,87 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { TeamRadioTicker } from '../components/live/TeamRadioTicker'
+import { radioClipUrl } from '../lib/radio'
+import type { LiveDriverInfo, LiveRadioCapture, LiveSessionMeta } from '../types'
+
+const session: LiveSessionMeta = {
+  MeetingName: 'British Grand Prix',
+  CircuitName: 'Silverstone',
+  SessionType: 'Race',
+  SessionName: 'Race',
+  Path: '/2026/2026-07-05_British_Grand_Prix/2026-07-05_Race/',
+}
+
+const driverInfo: Record<string, LiveDriverInfo> = {
+  '4': {
+    RacingNumber: '4',
+    BroadcastName: 'L NORRIS',
+    Tla: 'NOR',
+    TeamName: 'McLaren',
+    TeamColour: 'ff8000',
+    FirstName: 'Lando',
+    LastName: 'Norris',
+  },
+  '16': {
+    RacingNumber: '16',
+    BroadcastName: 'C LECLERC',
+    Tla: 'LEC',
+    TeamName: 'Ferrari',
+    TeamColour: 'e8002d',
+    FirstName: 'Charles',
+    LastName: 'Leclerc',
+  },
+}
+
+const captures: LiveRadioCapture[] = [
+  { Utc: '2026-07-05T14:05:00Z', RacingNumber: '16', Path: '/TeamRadio/LEC-1.mp3' },
+  { Utc: '2026-07-05T14:07:00Z', RacingNumber: '4', Path: 'TeamRadio/NOR-1.mp3' },
+]
+
+afterEach(() => {
+  vi.restoreAllMocks()
+})
+
+describe('radioClipUrl', () => {
+  it('builds static CDN URLs from the session path and capture path', () => {
+    expect(radioClipUrl(session, captures[0])).toBe(
+      'https://livetiming.formula1.com/static/2026/2026-07-05_British_Grand_Prix/2026-07-05_Race/TeamRadio/LEC-1.mp3',
+    )
+  })
+
+  it('returns an empty URL without path data', () => {
+    expect(radioClipUrl({ ...session, Path: '' }, captures[0])).toBe('')
+    expect(radioClipUrl(session, { ...captures[0], Path: '' })).toBe('')
+  })
+})
+
+describe('TeamRadioTicker', () => {
+  it('renders captures newest first with driver labels', () => {
+    vi.spyOn(Date, 'now').mockReturnValue(Date.parse('2026-07-05T14:10:00Z'))
+
+    render(<TeamRadioTicker captures={captures} driverInfo={driverInfo} session={session} />)
+
+    const rows = screen.getAllByRole('button')
+    expect(rows).toHaveLength(2)
+    expect(screen.getByText('NOR')).toBeInTheDocument()
+    expect(screen.getByText('LEC')).toBeInTheDocument()
+    expect(screen.getAllByText(/m ago/).map((node) => node.textContent)).toEqual(['3m ago', '5m ago'])
+  })
+
+  it('uses one audio element and toggles play/pause per clip', () => {
+    const play = vi.spyOn(window.HTMLMediaElement.prototype, 'play').mockResolvedValue()
+    const pause = vi.spyOn(window.HTMLMediaElement.prototype, 'pause').mockImplementation(() => {})
+
+    render(<TeamRadioTicker captures={captures} driverInfo={driverInfo} session={session} />)
+
+    fireEvent.click(screen.getByLabelText('Play NOR radio'))
+    expect(play).toHaveBeenCalledTimes(1)
+    expect(document.querySelectorAll('audio')).toHaveLength(1)
+    expect(document.querySelector('audio')?.getAttribute('src')).toBe(
+      'https://livetiming.formula1.com/static/2026/2026-07-05_British_Grand_Prix/2026-07-05_Race/TeamRadio/NOR-1.mp3',
+    )
+
+    fireEvent.click(screen.getByLabelText('Pause NOR radio'))
+    expect(pause).toHaveBeenCalled()
+  })
+})
--- a/frontend/src/test/live.test.ts
+++ b/frontend/src/test/live.test.ts
@@ -100,7 +100,8 @@ 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' },
+  Session: { MeetingName: 'Monaco Grand Prix', CircuitName: 'Monaco', SessionType: 'Race', SessionName: 'Race', Path: '2026/Monaco/Race' },
+  TeamRadio: [],
  TrackStatus: '1',
  CurrentLap: 21,
  TotalLaps: 78,
@@ -220,7 +221,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' },
+      { MeetingName: 'British Grand Prix', CircuitName: 'Silverstone', SessionType: 'Sprint Qualifying', SessionName: 'Sprint Qualifying', Path: '' },
      rows(22),
    )
    expect(display.phaseLabel).toBe('SQ1')
@@ -232,7 +233,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' },
+      { MeetingName: 'Monaco Grand Prix', CircuitName: 'Monaco', SessionType: 'Qualifying', SessionName: 'Qualifying', Path: '' },
      rows(20),
    )
    expect(display.phaseLabel).toBe('Q1')
@@ -241,7 +242,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' },
+      { MeetingName: 'Monaco Grand Prix', CircuitName: 'Monaco', SessionType: 'Qualifying', SessionName: 'Qualifying', Path: '' },
      rows(20, 5),
    )
    expect(display.phaseLabel).toBe('Q2')
@@ -251,13 +252,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' },
+        { MeetingName: 'Monaco Grand Prix', CircuitName: 'Monaco', SessionType: 'Race', SessionName: 'Race', Path: '' },
        rows(20),
      ).cutoffPosition,
    ).toBeNull()
    expect(
      liveSessionDisplay(
-        { MeetingName: 'Monaco Grand Prix', CircuitName: 'Monaco', SessionType: 'Qualifying', SessionName: 'Q3' },
+        { MeetingName: 'Monaco Grand Prix', CircuitName: 'Monaco', SessionType: 'Qualifying', SessionName: 'Q3', Path: '' },
        rows(10),
      ).cutoffPosition,
    ).toBeNull()
--- a/frontend/src/test/tyre-stint-timeline.test.tsx
+++ b/frontend/src/test/tyre-stint-timeline.test.tsx
@@ -1,149 +0,0 @@
-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,6 +261,7 @@ export interface LiveSessionMeta {
  CircuitName: string
  SessionType: string
  SessionName: string
+  Path: string
 }

 export interface LiveStintData {
@@ -269,6 +270,12 @@ 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>
@@ -277,6 +284,7 @@ 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,6 +5,7 @@ import (
 	"compress/flate"
 	"encoding/base64"
 	"encoding/json"
+	"fmt"
 	"testing"
 	"time"

@@ -211,12 +212,16 @@ func TestProcessTopicSessionInfoCircuitName(t *testing.T) {
 	state.ProcessTopic("SessionInfo", json.RawMessage(`{
 		"Meeting": {"Name": "British Grand Prix", "Circuit": {"ShortName": "Silverstone"}},
 		"Name": "Race",
-		"Type": "Race"
+		"Type": "Race",
+		"Path": "2026/2026-07-05_British_Grand_Prix/2026-07-05_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) {
@@ -285,6 +290,68 @@ 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,6 +105,7 @@ func connectToF1SignalRCore(dataChan chan LiveStreamData) error {
 		"RaceControlMessages",
 		"WeatherData",
 		"SessionInfo",
+		"TeamRadio",
 		"CurrentTyres",
 		"TimingAppData",
 		"TimingStats",
@@ -196,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","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"]],"I":1}`)
 	err = c.WriteMessage(websocket.TextMessage, subscribeMsg)
 	if err != nil {
 		return err
--- a/internal/live/state.go
+++ b/internal/live/state.go
@@ -8,6 +8,8 @@ import (
 	"encoding/json"
 	"fmt"
 	"io"
+	"log"
+	"sort"
 	"strings"
 	"time"
 )
@@ -23,6 +25,7 @@ type State struct {
 	RCMessages         []LiveRCMessage
 	Weather            LiveWeatherData
 	Session            LiveSessionMeta
+	TeamRadio          []LiveRadioCapture
 	TrackStatus        string
 	CurrentLap         int
 	TotalLaps          int
@@ -34,6 +37,7 @@ type State struct {
 }

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

 // NewState returns an empty live timing accumulator.
 func NewState() *State {
@@ -71,6 +75,8 @@ 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))
@@ -86,6 +92,7 @@ func (s *State) Snapshot() LiveStreamData {
 		RCMessages:         cpyRC,
 		Weather:            s.Weather,
 		Session:            s.Session,
+		TeamRadio:          cpyRadio,
 		TrackStatus:        s.TrackStatus,
 		CurrentLap:         s.CurrentLap,
 		TotalLaps:          s.TotalLaps,
@@ -335,6 +342,7 @@ 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 != "" {
@@ -349,8 +357,13 @@ 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 {
@@ -483,6 +496,62 @@ 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"`
@@ -799,6 +868,9 @@ 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,6 +85,7 @@ type LiveSessionMeta struct {
 	CircuitName string
 	SessionType string
 	SessionName string
+	Path        string
 }

 // LivePositionData is the latest raw F1 GPS position for one driver.
@@ -144,6 +145,13 @@ 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
@@ -153,6 +161,7 @@ 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