feat(#15): Telemetry trace chart component

Implemented by claude via .agents/dev dispatch.

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

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

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

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