feat(#15): Telemetry trace chart component

Implemented by claude via .agents/dev dispatch.

frontend/src/components/charts/TelemetryTraceChart.tsx

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

frontend/src/components/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>
-  )
-}

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}`
-}

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>

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;
-}

frontend/src/styles/telemetry-trace.css

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

frontend/src/test/LiveComponents.test.tsx

@@ -201,7 +201,6 @@ describe('TimingTower', () => {
           CircuitName: 'Silverstone',
           SessionType: 'Sprint Qualifying',
           SessionName: 'Sprint Qualifying',
-          Path: '',
         }}
       />,
     )

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

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

frontend/src/test/telemetry-trace-chart.test.tsx

@@ -0,0 +1,118 @@
+import { describe, expect, it } from 'vitest'
+import { fireEvent, render, screen } from '@testing-library/react'
+import {
+  TelemetryTraceChart,
+  type TelemetryTraceSeries,
+} from '../components/charts/TelemetryTraceChart'
+
+function makeSeries(label: string, color: string, speeds: number[]): TelemetryTraceSeries {
+  return {
+    label,
+    color,
+    samples: speeds.map((speed, i) => ({
+      speed,
+      throttle: (i * 25) % 101,
+      brake: i % 2 === 0 ? 100 : 0,
+    })),
+  }
+}
+
+const VER = makeSeries('VER', '#2563eb', [280, 310, 190, 90, 240])
+const LEC = makeSeries('LEC', '#dc2626', [275, 305, 200, 95, 235])
+
+describe('TelemetryTraceChart', () => {
+  it('renders one polyline per series per channel', () => {
+    const { container } = render(<TelemetryTraceChart series={[VER, LEC]} />)
+    const lines = container.querySelectorAll('polyline.telemetry-trace-line')
+    expect(lines).toHaveLength(2 * 3)
+    for (const channel of ['speed', 'throttle', 'brake']) {
+      expect(
+        container.querySelectorAll(`polyline.telemetry-trace-line[data-channel="${channel}"]`),
+      ).toHaveLength(2)
+    }
+    expect(
+      container.querySelectorAll('polyline.telemetry-trace-line[data-series="VER"]'),
+    ).toHaveLength(3)
+  })
+
+  it('respects the channels prop', () => {
+    const { container } = render(<TelemetryTraceChart series={[VER]} channels={['speed']} />)
+    expect(container.querySelectorAll('polyline.telemetry-trace-line')).toHaveLength(1)
+    expect(container.querySelectorAll('.telemetry-trace-panel')).toHaveLength(1)
+  })
+
+  it('renders an empty state for no series', () => {
+    render(<TelemetryTraceChart series={[]} />)
+    expect(screen.getByText('No telemetry data')).toBeInTheDocument()
+  })
+
+  it('renders an empty state when a series has no samples', () => {
+    render(<TelemetryTraceChart series={[makeSeries('VER', '#2563eb', [])]} />)
+    expect(screen.getByText('No telemetry data')).toBeInTheDocument()
+  })
+
+  it('survives a single sample and mismatched series lengths', () => {
+    const short = makeSeries('VER', '#2563eb', [300])
+    const long = makeSeries('LEC', '#dc2626', [280, 290, 300])
+    const { container } = render(<TelemetryTraceChart series={[short, long]} />)
+    // Clamped to the shortest series: every polyline has exactly one point.
+    const lines = container.querySelectorAll('polyline.telemetry-trace-line')
+    expect(lines).toHaveLength(6)
+    for (const line of lines) {
+      expect(line.getAttribute('points')!.trim().split(' ')).toHaveLength(1)
+    }
+  })
+
+  it('clamps throttle values to 0-100 within the panel', () => {
+    const wild: TelemetryTraceSeries = {
+      label: 'VER',
+      color: '#2563eb',
+      samples: [
+        { speed: 100, throttle: 150, brake: 0 },
+        { speed: 100, throttle: -20, brake: 0 },
+        { speed: 100, throttle: 50, brake: 0 },
+      ],
+    }
+    const { container } = render(
+      <TelemetryTraceChart series={[wild]} channels={['throttle']} height={110} />,
+    )
+    const line = container.querySelector('polyline.telemetry-trace-line[data-channel="throttle"]')!
+    const ys = line
+      .getAttribute('points')!
+      .split(' ')
+      .map((p) => Number(p.split(',')[1]))
+    // Panel occupies y 0..110 with 6px padding; clamped values pin to the edges.
+    expect(ys[0]).toBeCloseTo(6, 1) // 150% -> 100% -> panel top
+    expect(ys[1]).toBeCloseTo(104, 1) // -20% -> 0% -> panel bottom
+    expect(ys[2]).toBeCloseTo(55, 1) // 50% -> middle
+  })
+
+  it('shows the speed axis max in km/h', () => {
+    render(<TelemetryTraceChart series={[VER]} channels={['speed']} />)
+    expect(screen.getByText('310 km/h')).toBeInTheDocument()
+  })
+
+  it('lists every series in the legend with a color swatch', () => {
+    const { container } = render(<TelemetryTraceChart series={[VER, LEC]} />)
+    const legend = container.querySelector('.telemetry-trace-legend')!
+    expect(legend.textContent).toContain('VER')
+    expect(legend.textContent).toContain('LEC')
+    expect(legend.querySelectorAll('.telemetry-trace-swatch')).toHaveLength(2)
+  })
+
+  it('shows a crosshair and per-driver readout on hover, hides on leave', () => {
+    const { container } = render(<TelemetryTraceChart series={[VER, LEC]} />)
+    const svg = container.querySelector('svg.telemetry-trace-svg')!
+    expect(screen.queryByTestId('telemetry-trace-crosshair')).not.toBeInTheDocument()
+
+    fireEvent.mouseMove(svg, { clientX: 0, clientY: 10 })
+    expect(screen.getByTestId('telemetry-trace-crosshair')).toBeInTheDocument()
+    const readout = screen.getByTestId('telemetry-trace-readout')
+    expect(readout.textContent).toContain('VER')
+    expect(readout.textContent).toContain('LEC')
+    expect(readout.textContent).toContain('km/h')
+
+    fireEvent.mouseLeave(svg)
+    expect(screen.queryByTestId('telemetry-trace-crosshair')).not.toBeInTheDocument()
+  })
+})

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

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(`{

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

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
 	}
 

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