// Telemetry + Circuit + Surfaces sections — F1-authentic visuals // ============================================================== // TELEMETRY SECTION — actual (solid) vs predicted (dashed) // ============================================================== function TelemetrySection() { const [channel, setChannel] = useState('pace'); const [hover, setHover] = useState(null); const [drawn, setDrawn] = useState(false); const svgRef = useRef(null); const sectionRef = useRef(null); useEffect(() => { if (drawn) return; const el = sectionRef.current; if (!el) return; const obs = new IntersectionObserver((entries) => { for (const e of entries) { if (e.isIntersecting) { setDrawn(true); obs.disconnect(); return; } } }, { threshold: 0.3 }); obs.observe(el); return () => obs.disconnect(); }, [drawn]); const channels = { pace: { label: 'Pace · lap time', unit: 's', yMin: 86.4, yMax: 90.2, color: '#a29bfe', domain: 'Lap', xTicks: [1, 10, 20, 30, 40, 50, 60], // actual series (48 laps) + predicted future (laps 49..66) actual: Array.from({ length: 48 }, (_, i) => { const n = i + 1; let t = 87.2; if (n <= 21) t += (n - 1) * 0.08; else if (n <= 37) t += 0.35 + (n - 22) * 0.07; else t += 0.2 + (n - 38) * 0.05; t += Math.sin(n * 0.6) * 0.15 + Math.cos(n * 1.3) * 0.08; return { x: n, y: t }; }), predicted: Array.from({ length: 66 - 48 + 1 }, (_, i) => { const n = 48 + i; return { x: n, y: 88.1 + Math.sin(n * 0.4) * 0.12 + (n - 48) * 0.03 }; }), band: 0.25, }, tire: { label: 'Tire degradation · wear', unit: '%', yMin: 0, yMax: 100, color: '#ff2d3a', domain: 'Lap', xTicks: [1, 10, 20, 30, 40, 50, 60], actual: Array.from({ length: 48 }, (_, i) => { const n = i + 1; // resets at pit stops lap 21, 37 let base = n <= 21 ? (n - 1) * 4.2 : n <= 37 ? (n - 22) * 3.3 : (n - 38) * 3.0; return { x: n, y: Math.min(98, base + Math.sin(n * 0.7) * 1.2) }; }), predicted: Array.from({ length: 66 - 48 + 1 }, (_, i) => { const n = 48 + i; const base = (n - 38) * 3.0; return { x: n, y: Math.min(100, base + i * 0.5) }; }), band: 4.5, }, }; const ch = channels[channel]; const W = 900, H = 320, pad = { l: 48, r: 32, t: 24, b: 40 }; const iw = W - pad.l - pad.r, ih = H - pad.t - pad.b; const allX = [...ch.actual, ...ch.predicted]; const xMin = Math.min(...allX.map(p => p.x)); const xMax = Math.max(...allX.map(p => p.x)); const xs = x => pad.l + ((x - xMin) / (xMax - xMin)) * iw; const ys = y => pad.t + (1 - (y - ch.yMin) / (ch.yMax - ch.yMin)) * ih; const pathOf = (pts) => pts.map((p, i) => `${i === 0 ? 'M' : 'L'}${xs(p.x).toFixed(1)},${ys(p.y).toFixed(1)}`).join(' '); const bandPath = (pts, b) => { const up = pts.map(p => `${xs(p.x).toFixed(1)},${ys(p.y + b).toFixed(1)}`); const dn = pts.slice().reverse().map(p => `${xs(p.x).toFixed(1)},${ys(p.y - b).toFixed(1)}`); return `M${up.join('L')}L${dn.join('L')}Z`; }; const onMove = (e) => { const rect = svgRef.current.getBoundingClientRect(); const mx = ((e.clientX - rect.left) / rect.width) * W; if (mx < pad.l || mx > W - pad.r) { setHover(null); return; } const xv = xMin + ((mx - pad.l) / iw) * (xMax - xMin); // nearest point const all = [...ch.actual, ...ch.predicted]; let best = all[0], bd = Infinity; for (const p of all) { const d = Math.abs(p.x - xv); if (d < bd) { bd = d; best = p; } } const isPred = ch.predicted.includes(best); setHover({ ...best, isPred }); }; return (
Telemetry

What happened. What's next.

{[['pace', 'Pace'], ['tire', 'Tire']].map(([k, l]) => ( ))}
{/* header */}
{ch.label} lap 48/66
actual {ch.predicted.length > 0 && ( predicted )} {ch.band > 0 && ( P10/P90 )}
{/* chart */}
setHover(null)}> {/* gridlines */} {[0, 0.25, 0.5, 0.75, 1].map((p, i) => ( ))} {/* y labels */} {[0, 0.25, 0.5, 0.75, 1].map((p, i) => { const v = ch.yMin + (1 - p) * (ch.yMax - ch.yMin); return ( {v.toFixed(channel === 'pace' ? 1 : 0)} ); })} {/* x ticks */} {ch.xTicks.map(t => ( {t} ))} {ch.domain.toUpperCase()} {/* stint dividers for pace/tire */} {[21, 37].map(lap => ( PIT ))} {/* area under actual */} {(() => { const area = ch.actual.map((p, i) => `${i === 0 ? 'M' : 'L'}${xs(p.x).toFixed(1)},${ys(p.y).toFixed(1)}`).join(' ') + ` L${xs(ch.actual[ch.actual.length - 1].x).toFixed(1)},${(pad.t + ih).toFixed(1)} L${xs(ch.actual[0].x).toFixed(1)},${(pad.t + ih).toFixed(1)} Z`; return ; })()} {/* prediction uncertainty band — uses fillOpacity so the CSS reveal animation (which sets the element's opacity 0→1) doesn't clobber the 12% band transparency. */} {ch.band > 0 && ch.predicted.length > 0 && ( )} {/* actual line (continuous) */} {/* predicted line (dashed) — starts from the NOW point so the dash pattern is continuous from last-actual into the forecast. No drop-shadow here: a same-color glow bleeds into the 4-5 px gaps between dashes and makes the line read as solid. */} {ch.predicted.length > 0 && ( )} {/* "now" marker */} NOW {/* hover crosshair */} {hover && (() => { const hx = xs(hover.x), hy = ys(hover.y); return ( {ch.domain} {hover.x.toFixed(0)}{hover.isPred ? ' · PRED' : ''} {hover.y.toFixed(channel === 'pace' ? 3 : 1)}{ch.unit} ); })()}
{/* readout strip */}
{[ ['Compound', 'Hard'], ['Lap', '48 / 66'], ['Delta', channel === 'pace' ? '+0.284s' : '33.0%'], ['Model conf.', '0.87'], ].map(([k, v], i) => (
0 ? '1px solid var(--hairline)' : 'none' }}>
{k}
{v}
))}
); } // ============================================================== // CIRCUIT SECTION — animated track + moving cars // ============================================================== // Albert Park — Australian GP, Melbourne (official 2022 layout). // Paths extracted from Wikimedia SVG (assets/albert-park-2022.svg). // Original viewBox: 0 0 607.8 385.1. // The st0 path is drawn in RACING DIRECTION: it starts at (455.8, 309.4) // on the bottom straight just past T14, heads left through T1 (226.5, // 328.5), up through T2 (237.8, 275.1), T3 (39.9, 273.6), T4 (96.1, // 230.5), T5 (16.7, 195.9), up and right through T6/T7/T8 at the top, // down through T9/T10 to the right, around the T11 hairpin, back through // T12/T13/T14 and closes to the start. Increasing f = racing direction. const TRACK_PATH = "M455.8,309.4c-7.8,0.6-207.3,5.5-209.8,5.7c-2.5,0.2-5.5-0.5-6.2-1.4c-0.7-0.9-2.1-5.3-2.7-8.2c-0.7-3-5.7-11.2-12.1-14.9c-6.4-3.7-14.9-6.6-29-4.8c-14.2,1.8-48.9,1.6-62.4,0.2c-13.5-1.4-38.6-5.9-46.9-8c-8.2-2.1-18.1-4.6-20.3-5.7c-2.3-1.1-5.7-1.6-6.4-5.9c-0.7-4.3,0.9-5,2.5-7.8c1.6-2.7,11.4-16.2,12.8-18.3c1.4-2.1,1.8-3.2,1.8-5.7s-0.7-4.1-3-6.2c-2.3-2.1-31.7-28.8-34.3-31.5c-3-3.2-5.3-5.7-4.8-12.6c0.5-6.9,2.5-18.3,3-23.8c0.5-5.5,1.8-13.3,3.4-18.1c1.6-4.8,3.9-9.4,7.3-17.6c3.4-8.2,7.5-17.1,8.7-21.7c1.1-4.6,3.2-14.2,3.7-17.6c0.5-3.4,1.6-7.3,7.5-6.9c5.9,0.5,16.9-0.5,24.5-6.4c7.5-5.9,20.6-22.2,42.3-22.2s33.6,9.8,41.4,15.1s21.5,15.3,26.5,20.3c5,5,12.8,12.3,26.3,45.5c10.6,26.1,19.3,38.9,40.7,53.2c26.3,17.6,43.2,15.1,71.1,13.7c9.4-0.5,20.8-1.6,25.6-2.1s7.1-2.3,9.4-5.5c2.3-3.2,12.3-16.9,13.7-19c1.4-2.1,2.5-4.1,9.1-4.6c6.6-0.5,53.5-4.8,60.3-5c6.9-0.2,18.7-0.2,33.4,6.6c14.6,6.9,62.4,32.2,66.3,34.3c3.9,2.1,10.3,6.4,11.7,7.8c1.4,1.4,3.2,3.7,1.4,7.3c-1.8,3.7-16.5,26.7-18.7,32.5c-2.3,5.7-5.7,12.1-8.5,16.5c-2.7,4.3-9.1,13-21.3,10.1c-12.1-3-43-11-45.7-11.4c-2.7-0.5-7.1-1.1-7.1,3.9c0,5,1.4,18.5,1.6,25.4C472.7,301.7,465.4,308.7,455.8,309.4z"; // Official F1 sector breakdown (from the Wikimedia SVG overlays): // S1 (red, st3): S/F → T1 → T2 → T3 → T4 → T5 → part of T6 approach // S2 (blue, st2): from end of S1 up through T6/T7/T8 to just before T9 // S3 (yellow, st1): T9 → T10 → T11 → T12 → T13 → T14 → S/F const SECTOR_PATHS = { s1: "M344.5,312.5c-49.6,1.3-97.3,2.5-98.5,2.6c-2.5,0.2-5.5-0.5-6.2-1.4c-0.7-0.9-2.1-5.3-2.7-8.2c-0.7-3-5.7-11.2-12.1-14.9c-6.4-3.7-14.9-6.6-29-4.8c-14.2,1.8-48.9,1.6-62.4,0.2c-13.5-1.4-38.6-5.9-46.9-8c-8.2-2.1-18.1-4.6-20.3-5.7c-2.3-1.1-5.7-1.6-6.4-5.9c-0.7-4.3,0.9-5,2.5-7.8c1.6-2.7,11.4-16.2,12.8-18.3c1.4-2.1,1.8-3.2,1.8-5.7s-0.7-4.1-3-6.2c-2.3-2.1-31.7-28.8-34.3-31.5c-3-3.2-5.3-5.7-4.8-12.6c0.5-6.9,2.5-18.3,3-23.8c0.5-5.5,1.8-13.3,3.4-18.1c1.6-4.8,3.9-9.4,7.3-17.6c3.4-8.2,7.5-17.1,8.7-21.7", s2: "M57.4,103.3c1.1-4.6,3.2-14.2,3.7-17.6c0.5-3.4,1.6-7.3,7.5-6.9c5.9,0.5,16.9-0.5,24.5-6.4c7.5-5.9,20.6-22.2,42.3-22.2s33.6,9.8,41.4,15.1s21.5,15.3,26.5,20.3c5,5,12.8,12.3,26.3,45.5c10.6,26.1,19.3,38.9,40.7,53.2c26.3,17.6,43.2,15.1,71.1,13.7", s3: "M341.3,198.1c9.4-0.5,20.8-1.6,25.6-2.1s7.1-2.3,9.4-5.5c2.3-3.2,12.3-16.9,13.7-19c1.4-2.1,2.5-4.1,9.1-4.6c6.6-0.5,53.5-4.8,60.3-5c6.9-0.2,18.7-0.2,33.4,6.6c14.6,6.9,62.4,32.2,66.3,34.3c3.9,2.1,10.3,6.4,11.7,7.8c1.4,1.4,3.2,3.7,1.4,7.3c-1.8,3.7-16.5,26.7-18.7,32.5c-2.3,5.7-5.7,12.1-8.5,16.5c-2.7,4.3-9.1,13-21.3,10.1c-12.1-3-43-11-45.7-11.4c-2.7-0.5-7.1-1.1-7.1,3.9c0,5,1.4,18.5,1.6,25.4c0.2,6.9-7.1,13.9-16.7,14.6c-4,0.3-58.7,1.7-111.3,3.1", }; // Official Albert Park 2022 corner positions in SVG natural coords // (extracted from circles in the source SVG). const CORNERS = [ { n: 1, x: 226.5, y: 328.5 }, { n: 2, x: 237.8, y: 275.1 }, { n: 3, x: 39.9, y: 273.6 }, { n: 4, x: 96.1, y: 230.5 }, { n: 5, x: 16.7, y: 195.9 }, { n: 6, x: 49.2, y: 66.7 }, { n: 7, x: 106.3, y: 89.0 }, { n: 8, x: 141.8, y: 30.8 }, { n: 9, x: 380.6, y: 212.5 }, { n: 10, x: 380.5, y: 154.4 }, { n: 11, x: 591.1, y: 210.0 }, { n: 12, x: 540.3, y: 295.3 }, { n: 13, x: 458.8, y: 252.8 }, { n: 14, x: 479.0, y: 320.9 }, ]; // Fit 607.8 × 385.1 into 1020 × 520 with 4% padding. const TRACK_NAT_W = 607.8, TRACK_NAT_H = 385.1; const FIT = Math.min(1020 / TRACK_NAT_W, 520 / TRACK_NAT_H) * 0.96; const TRACK_TX = (1020 - TRACK_NAT_W * FIT) / 2; const TRACK_TY = (520 - TRACK_NAT_H * FIT) / 2; const TRACK_TRANSFORM = `translate(${TRACK_TX}, ${TRACK_TY}) scale(${FIT})`; // Helper to transform natural corner coords into 1020×520 viewBox coords. const toViewBox = (x, y) => ({ x: TRACK_TX + x * FIT, y: TRACK_TY + y * FIT }); function CircuitSection() { const pathRef = useRef(null); const [len, setLen] = useState(0); const [t, setT] = useState(0); const [focus, setFocus] = useState('LEC'); const rafRef = useRef(); useEffect(() => { if (pathRef.current) setLen(pathRef.current.getTotalLength()); }, []); useEffect(() => { let last = performance.now(); const loop = (now) => { const dt = (now - last) / 1000; last = now; // The official Albert Park path is drawn in racing direction, so // INCREASING t follows the racing line (T14 → T1 → T2 → ...). setT(x => (x + dt * 0.06) % 1); // ~17s lap rafRef.current = requestAnimationFrame(loop); }; rafRef.current = requestAnimationFrame(loop); return () => cancelAnimationFrame(rafRef.current); }, []); const cars = [ { code: 'VER', team: 'Red Bull', color: '#1e5bc6', gap: 0.00, label: 'P1' }, { code: 'HAM', team: 'Mercedes', color: '#00d7b5', gap: 0.04, label: 'P2' }, { code: 'LEC', team: 'Ferrari', color: '#ff2d3a', gap: 0.075, label: 'P3', highlight: true }, { code: 'SAI', team: 'Ferrari', color: '#ff2d3a', gap: 0.092, label: 'P4' }, { code: 'NOR', team: 'McLaren', color: '#ff8000', gap: 0.12, label: 'P5' }, { code: 'RUS', team: 'Mercedes', color: '#00d7b5', gap: 0.15, label: 'P6' }, ]; const pointAt = (frac) => { if (!pathRef.current || !len) return { x: 0, y: 0, angle: 0 }; const p1 = pathRef.current.getPointAtLength(frac * len); const p2 = pathRef.current.getPointAtLength(((frac + 0.001) % 1) * len); const angle = Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180 / Math.PI; return { x: p1.x, y: p1.y, angle }; }; // Sector colors (match the Wikimedia reference: red S1, blue S2, yellow S3). const SECTOR_COLORS = { s1: '#ff2d3a', s2: '#2d8fff', s3: '#ffcf2d' }; return (
Track model

The field, in real time.

The orchestrator sees every car's sector pace, gap delta, and compound — and recomputes every lap.

{/* TRACK CANVAS */}
Melbourne · Albert Park
Lap 32 / 58
live replay
{/* Track outline — dark base that receives the sector overlays. */} {/* Hidden reference copy used for measuring car positions. */} {/* Sector 3 — yellow (T9 → S/F) */} {/* Sector 2 — blue (T6 → T9) */} {/* Sector 1 — red (S/F → T6) */} {/* Start/finish line — midpoint between T14 and T1, drawn in viewBox coords so stroke width is not distorted by the scale. */} {(() => { const c1 = CORNERS.find(c => c.n === 1); const c14 = CORNERS.find(c => c.n === 14); const midX = (c1.x + c14.x) / 2, midY = (c1.y + c14.y) / 2; const p = toViewBox(midX, midY); return ( S/F ); })()} {/* Corner markers — official positions from the 2022 layout. */} {CORNERS.map(c => { const p = toViewBox(c.x, c.y); return ( {String(c.n).padStart(2, '0')} ); })} {/* cars */} {len > 0 && cars.map(c => { const frac = (t + 1 - c.gap) % 1; const p = pointAt(frac); const isFocus = focus === c.code; return ( setFocus(c.code)}> {/* trail — sits at lower raw-frac because cars advance with increasing t along the new racing-direction path. */} {[0.012, 0.024, 0.036].map((back, i) => { const pp = pointAt((frac - back + 1) % 1); return ( ); })} {isFocus && ( )} {c.code.slice(0,1)} {isFocus && ( {c.code} )} ); })}
{/* SIDE: standings */}
Timing tower
{cars.map((c, i) => { const gap = i === 0 ? 'LEADER' : '+' + (c.gap * 80).toFixed(1) + 's'; const isFocus = focus === c.code; return ( ); })}
Focus · {focus}
Last lap
1:27.482
Best
1:26.991
Compound
MED
Tire age
14 laps
); } // ============================================================== // SURFACES SECTION — CLI / Arcade / Streamlit // ============================================================== function SurfacesSection() { const [surface, setSurface] = useState('cli'); const surfaces = { cli: { title: 'Command line', tag: 'Terminal first', desc: 'Three console scripts ship with the package. f1-strat is a Rich interactive launcher that walks you through mode, race, driver, lap range and LLM provider. f1-sim is the headless runner that iterates the race lap-by-lap and streams a live per-lap table with action, confidence and MC scores. f1-arcade opens the 2D replay window.', cmd: 'uv run f1-strat', feature: }, arcade: { title: 'Arcade', tag: 'Desktop replay', desc: 'A three-window desktop app: a pyglet race replay with track, car icons, DRS zones, weather and leaderboard; a PySide6 strategy dashboard with orchestrator card, six agent cards and reasoning tabs; and a pyqtgraph live-telemetry window. Playback runs at 25 FPS with 0.25×–8× scrubbing.', cmd: 'python -m src.arcade.main', feature: }, streamlit: { title: 'Streamlit', tag: 'Analysis workbench', desc: 'A six-page browser workbench for post-race analysis. Dashboard renders speed, throttle, brake, RPM, gear, DRS and delta telemetry; Comparison aligns two drivers\' fastest laps; Race Analysis groups degradation, gaps, radio and regulations; Model Lab runs each sub-agent in isolation; Strategy runs the full orchestrator. Chat is the multimodal LLM Q&A layer on top of all of it.', cmd: 'streamlit run src/telemetry/frontend/app/main.py', feature: } }; const s = surfaces[surface]; return (
Three surfaces · one brain

Use it how you race.

Same orchestrator. Same models. Pick the front-end that matches the moment — pit wall, lab, or Twitch stream.

{Object.entries(surfaces).map(([k, v]) => ( ))}

{s.title}

{s.desc}

zsh 
$ {s.cmd}
↵ live reload · OPENAI_API_KEY optional
{s.feature}
); } function CliPreview() { // Progressive-reveal of the real f1-strat CLI boot + run. // Driven by a step counter set by a chain of setTimeouts, kicked off // once the preview enters the viewport. Holds 30s at the end, then loops. const [step, setStep] = useState(0); const [promptTyped, setPromptTyped] = useState([0, 0, 0]); // chars typed per prompt const [initTyped, setInitTyped] = useState([0, 0]); // chars typed per loading line const frameRef = useRef(null); const startedRef = useRef(false); const timersRef = useRef([]); const PROMPTS = [ { label: 'Available races (2025):', select: 'Melbourne' }, { label: 'Driver code (e.g. NOR):', value: 'NOR' }, { label: 'Lap range (e.g. 15-40, or Enter for all) (all):', value: '15-40' }, ]; const INIT_LINES = [ 'Initializing engine — NLP models loading, this may take a few seconds…', 'radio corpus : 14 radios + 90 rcms loaded for australia', ]; const ROWS = [ { lap: 15, tyre: 'INTE', age: 15, pos: 1, lapS: '90.226', dec: 'STAY_OUT·MNGR·BAL', conf: '0.86', stay: '0.000', pit: '-1.089', ucut: '-0.776', ocut: '0.537' }, { lap: 16, tyre: 'INTE', age: 16, pos: 1, lapS: '89.952', dec: 'STAY_OUT·MNGR·DEF', conf: '0.82', stay: '0.000', pit: '-1.084', ucut: '-0.771', ocut: '0.543' }, { lap: 17, tyre: 'INTE', age: 17, pos: 1, lapS: '90.003', dec: 'STAY_OUT·MNGR·BAL', conf: '0.84', stay: '0.000', pit: '-1.090', ucut: '-0.778', ocut: '0.541' }, ]; const AGENTS = [ { dot: '●', name: 'Pace', state: 'Δnext -0.008s', detail: 'pred 90.26s · ±2.55s · CI [87.9–93.1s]', color: '#4ade80' }, { dot: '●', name: 'Tire', state: 'cliff in ~30 laps', detail: 'range 20–40 · deg 0.030s/lap · OK', color: '#eab308' }, { dot: '●', name: 'Situation', state: 'threat LOW', detail: 'overtake 0% · safety car 9%', color: '#4ade80' }, { dot: '●', name: 'Radio', state: 'no alerts', detail: '0 radios · 1 rcm', color: '#4ade80' }, ]; useEffect(() => { const clearAll = () => { timersRef.current.forEach(t => clearTimeout(t)); timersRef.current = []; }; const schedule = (fn, ms) => { const t = setTimeout(fn, ms); timersRef.current.push(t); }; const typePrompt = (idx, text, baseDelay) => { for (let i = 1; i <= text.length; i++) { schedule(() => setPromptTyped(p => { const n = [...p]; n[idx] = i; return n; }), baseDelay + i * 35); } return baseDelay + text.length * 35; }; const typeInit = (idx, text, baseDelay) => { for (let i = 1; i <= text.length; i++) { schedule(() => setInitTyped(p => { const n = [...p]; n[idx] = i; return n; }), baseDelay + i * 10); } return baseDelay + text.length * 10; }; const run = () => { setStep(0); setPromptTyped([0, 0, 0]); setInitTyped([0, 0]); // 1 — banner schedule(() => setStep(1), 300); // 2 — prompts schedule(() => setStep(2), 1400); let t = 1600; t = typePrompt(0, PROMPTS[0].select, t) + 250; schedule(() => setStep(3), t); t = typePrompt(1, PROMPTS[1].value, t) + 200; schedule(() => setStep(4), t); t = typePrompt(2, PROMPTS[2].value, t) + 400; // 3 — LLM menu schedule(() => setStep(5), t); t += 1800; // 4 — red separator + init logs schedule(() => setStep(6), t); t += 400; t = typeInit(0, INIT_LINES[0], t) + 500; t = typeInit(1, INIT_LINES[1], t) + 400; // 5 — table header schedule(() => setStep(7), t); t += 800; // 6..8 — table rows for (let i = 0; i < ROWS.length; i++) { schedule(() => setStep(7 + i + 1), t); t += 700; } t += 300; // 9..12 — Lap 17 agent bullets for (let i = 0; i < AGENTS.length; i++) { schedule(() => setStep(10 + i + 1), t); t += 550; } t += 300; schedule(() => setStep(15), t); // hold 30s, then restart schedule(run, t + 30000); }; const io = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting && !startedRef.current) { startedRef.current = true; run(); } }); }, { threshold: 0.2 }); if (frameRef.current) io.observe(frameRef.current); return () => { io.disconnect(); clearAll(); }; }, []); // Color tokens that mirror Rich's default terminal theme in the real CLI const C = { red: '#ff3a3a', cyan: '#5ec4e6', orange:'#ff8c38', green: '#4ade80', yellow:'#eab308', gray: 'rgba(255,255,255,0.4)', dim: 'rgba(255,255,255,0.55)', text: '#e5e7eb', }; // ─── Helpers ─── const Cursor = () => ▍; const line = (content) =>
{content}
; return (
f1-strat · interactive
{/* 1. Banner */} {step >= 1 && ( 
              {' _____ _  '}{'    _____ _____ ____      _  _____'}{'\n'}
              {'|  ___| |  '}{'  / ____|_   _|  _ \\    / \\|_   _|'}{'\n'}
              {'| |_  | |  '}{'  \\___ \\  | | | |_) |  / _ \\ | |  '}{'\n'}
              {'|  _| | |  '}{'   ___) | | | |  _ <  / ___ \\| |  '}{'\n'}
              {'|_|   |_|  '}{'  |____/  |_| |_| \\_\\/_/   \\_\\_|  '}
Formula 1 Strategy Manager{' '} Multi-Agent Race Intelligence System · v0.9
)} {/* 2a. Race select */} {step >= 2 && (
{PROMPTS[0].label}
❯{' '} {PROMPTS[0].select.slice(0, promptTyped[0])} {step === 2 && promptTyped[0] < PROMPTS[0].select.length && }
)} {/* 2b. Driver code */} {step >= 3 && (
›{' '} {PROMPTS[1].label}{' '} {PROMPTS[1].value.slice(0, promptTyped[1])} {step === 3 && promptTyped[1] < PROMPTS[1].value.length && }
)} {/* 2c. Lap range */} {step >= 4 && (
›{' '} {PROMPTS[2].label}{' '} {PROMPTS[2].value.slice(0, promptTyped[2])} {step === 4 && promptTyped[2] < PROMPTS[2].value.length && }
)} {/* 3. LLM mode */} {step >= 5 && (
LLM mode:
No LLM Fast · ML models only, no synthesis [recommended]
❯{' '} OpenAI{' '} GPT-4.1-mini{' · '} needs OPENAI_API_KEY in .env
LM Studio Local model at localhost:1234
)} {/* 4. Red separator + init lines */} {step >= 6 && ( <>
{INIT_LINES[0].slice(0, initTyped[0])} {step === 6 && initTyped[0] < INIT_LINES[0].length && }
{initTyped[1] > 0 && ( <> radio corpus : 14 radios + 90 rcms loaded for australia {step === 6 && initTyped[1] < INIT_LINES[1].length && } )}
)} {/* 5. Header panel */} {step >= 7 && (
F1 Strategy Manager
GP Melbourne
Mode LLM · openai · radios=14
Driver NOR{' '}McLaren
Laps 15–40 / 57 total
Actions STAY_OUT · PIT_NOW · UNDERCUT · OVERCUT · ALERT
)} {/* 6. Table rows */} {step >= 7 && (
{'Lap Tyre Age Pos Lap(s) Decision Conf Stay Pit Ucut Ocut'}
{ROWS.map((r, i) => ( step >= 8 + i && (
{String(r.lap).padEnd(5)} {r.tyre.padEnd(6)} {String(r.age).padEnd(5)} {String(r.pos).padEnd(5)} {r.lapS.padEnd(10)} {r.dec.padEnd(22)} {r.conf.padEnd(6)} {r.stay.padEnd(7)} {r.pit.padEnd(8)} {r.ucut.padEnd(8)} {r.ocut}
) ))}
)} {/* 7. Lap 17 agent panel */} {step >= 11 && (
── Lap 17 ──
{AGENTS.map((a, i) => ( step >= 11 + i && (
{a.dot} {a.name} {a.state} {a.detail}
) ))}
)} {/* Footer tick */} {step >= 15 && (
.: lap 18 / 40 — running agents…
)}
); } function ArcadePreview() { // Animation loop const [t, setT] = useState(0); // 0..1 lap fraction, loops useEffect(() => { let raf, start = performance.now(); const loop = (now) => { setT(((now - start) / 1000 / 12) % 1); // 12s lap raf = requestAnimationFrame(loop); }; raf = requestAnimationFrame(loop); return () => cancelAnimationFrame(raf); }, []); // Closed-loop track path as a parametric curve so we can animate cars smoothly. // Uses an SVG path with ref to measure total length. const outerPathRef = useRef(null); const [trackLen, setTrackLen] = useState(0); useEffect(() => { if (outerPathRef.current) setTrackLen(outerPathRef.current.getTotalLength()); }, []); const pointAt = (frac) => { if (!outerPathRef.current || !trackLen) return { x: 0, y: 0 }; return outerPathRef.current.getPointAtLength(((frac % 1) + 1) % 1 * trackLen); }; // Per-car phase offsets (fraction of lap). NOR ahead of LEC by ~0.012. const norFrac = t; const lecFrac = (t - 0.012 + 1) % 1; // Slight field of other cars spread around the lap const fieldCars = [ { code: 'SAI', color: '#ff2d3a', off: 0.18 }, { code: 'VER', color: '#1e5bc6', off: 0.30 }, { code: 'PIA', color: '#ff8c38', off: 0.46 }, { code: 'RUS', color: '#00d7b5', off: 0.62 }, { code: 'PER', color: '#1e5bc6', off: 0.78 }, ]; // Speed profile around the lap — slower in corners (near t ≈ 0.15/0.35/0.55/0.75/0.92) const corners = [0.15, 0.35, 0.55, 0.75, 0.92]; const speedAt = (frac, base) => { let penalty = 0; for (const c of corners) { let d = Math.min(Math.abs(frac - c), 1 - Math.abs(frac - c)); if (d < 0.05) penalty += Math.exp(-(d * d) * 900) * 150; } return Math.round(Math.max(80, base - penalty)); }; const gearAt = (spd) => spd < 120 ? 3 : spd < 170 ? 5 : spd < 220 ? 6 : spd < 260 ? 7 : 8; const drsAt = (frac) => { // DRS on along 5 straights (mid-segment between corners) const straights = [0.03, 0.24, 0.44, 0.65, 0.84]; return straights.some(s => Math.abs(frac - s) < 0.04) ? 'ON' : 'OFF'; }; const norSpeed = speedAt(norFrac, 305); const lecSpeed = speedAt(lecFrac, 308); const norGear = gearAt(norSpeed); const lecGear = gearAt(lecSpeed); const norDRS = drsAt(norFrac); const lecDRS = drsAt(lecFrac); // Gap between NOR ahead and LEC behind = ~0.5-0.9s, sinusoidal const norLecGap = (0.51 + 0.25 * Math.sin(t * Math.PI * 2 * 3)).toFixed(2); const verNorGap = (0.71 + 0.15 * Math.sin(t * Math.PI * 2 * 2 + 1)).toFixed(2); const piaLecGap = (0.95 + 0.2 * Math.sin(t * Math.PI * 2 * 2.3 + 2)).toFixed(2); // Lap counter — advances slowly so we can see it tick const currentLap = 4 + Math.floor(t * 2); // 4 → 5 across the lap const simTime = 4 * 60 + 44 + t * 90; // grows with t const fmtClock = (s) => `00:${String(Math.floor(s / 60)).padStart(2, '0')}:${String(Math.floor(s % 60)).padStart(2, '0')}`; const leaderboard = [ { pos: 1, code: 'SAI', tire: 'M', tireColor: '#e6e6e6', teamColor: '#ff2d3a' }, { pos: 2, code: 'VER', tire: 'M', tireColor: '#e6e6e6', teamColor: '#1e5bc6' }, { pos: 3, code: 'NOR', tire: 'M', tireColor: '#e6e6e6', teamColor: '#ff8c38', active: true }, { pos: 4, code: 'LEC', tire: 'M', tireColor: '#e6e6e6', teamColor: '#ff2d3a' }, { pos: 5, code: 'PIA', tire: 'M', tireColor: '#e6e6e6', teamColor: '#ff8c38' }, { pos: 6, code: 'RUS', tire: 'M', tireColor: '#e6e6e6', teamColor: '#00d7b5' }, { pos: 7, code: 'PER', tire: 'M', tireColor: '#e6e6e6', teamColor: '#1e5bc6' }, { pos: 8, code: 'TSU', tire: 'M', tireColor: '#e6e6e6', teamColor: '#2d8fff' }, { pos: 9, code: 'BOT', tire: 'M', tireColor: '#e6e6e6', teamColor: '#0abf7b' }, { pos: 10, code: 'STR', tire: 'M', tireColor: '#e6e6e6', teamColor: '#0abf7b' }, { pos: 11, code: 'MAG', tire: 'M', tireColor: '#e6e6e6', teamColor: '#ffffff' }, { pos: 12, code: 'OCO', tire: 'M', tireColor: '#e6e6e6', teamColor: '#ff70a0' }, { pos: 13, code: 'HUL', tire: 'H', tireColor: '#ffffff', teamColor: '#ffffff' }, { pos: 14, code: 'ALB', tire: 'M', tireColor: '#e6e6e6', teamColor: '#2d8fff' }, { pos: 15, code: 'GAS', tire: 'M', tireColor: '#e6e6e6', teamColor: '#ff70a0' }, { pos: 16, code: 'RIC', tire: 'S', tireColor: '#ff2d3a', teamColor: '#2d8fff' }, { pos: 17, code: 'HAM', tire: 'S', tireColor: '#ff2d3a', teamColor: '#00d7b5' }, { pos: 18, code: 'ZHO', tire: 'S', tireColor: '#ff2d3a', teamColor: '#0abf7b' }, { pos: 19, code: 'ALO', tire: 'H', tireColor: '#ffffff', teamColor: '#0abf7b' }, ]; const norP = pointAt(norFrac); const lecP = pointAt(lecFrac); return (
arcade · 60 fps
{/* LAP */} LAP {currentLap}/58 {fmtClock(simTime)}   x8.0  LIVE {/* WEATHER */} WEATHER {[ ['Track', (45.0 + 0.8 * Math.sin(t * 6.28)).toFixed(1) + ' C'], ['Air', (18.0 + 0.3 * Math.sin(t * 6.28 + 1)).toFixed(1) + ' C'], ['Humidity', '55%'], ['Wind', '12.0 km/h S'], ['Rain', 'DRY'], ].map(([k, v], i) => ( {k} {v} ))} {/* NOR driver card */} NOR DRIVER {[ ['Speed', `${norSpeed} km/h`], ['Gear', `${norGear}`], ['DRS', norDRS], ['Compound', 'M'], ['Ahead', `VER +${verNorGap}s`], ['Behind', `LEC -${norLecGap}s`], ].map(([k, v], i) => ( {k} {v} ))} {/* LEC driver card */} LEC DRIVER {[ ['Speed', `${lecSpeed} km/h`], ['Gear', `${lecGear}`], ['DRS', lecDRS], ['Compound', 'M'], ['Ahead', `NOR +${norLecGap}s`], ['Behind', `PIA -${piaLecGap}s`], ].map(([k, v], i) => ( {k} {v} ))} {/* CONTROLS */} CONTROLS {[ ['SPACE', 'Pause / Resume'], ['< / >', 'Rewind / Fast-Forward'], ['Up / Down', 'Speed +/-'], ['1 - 4', '0.5 / 1 / 2 / 4 x'], ['R', 'Restart'], ['D', 'Toggle DRS zones'], ['B', 'Toggle progress bar'], ['ESC', 'Close'], ].map(([k, v], i) => ( {k} {v} ))} {/* TRACK — Albert Park 2022 official layout (natural 607.8 × 385.1). Fit into the arcade's centre panel (approx 460 × 360). */} {(() => { const ARCADE_REGION_W = 470, ARCADE_REGION_H = 360; const ARCADE_FIT = Math.min(ARCADE_REGION_W / 607.8, ARCADE_REGION_H / 385.1) * 0.94; const ARCADE_TX = 195 + (ARCADE_REGION_W - 607.8 * ARCADE_FIT) / 2; const ARCADE_TY = 55 + (ARCADE_REGION_H - 385.1 * ARCADE_FIT) / 2; return ( {/* Outer track — measured path for car positions. */} {/* Sector overlays */} {/* Inner hairline */} {/* Field cars (smaller, no labels, looped offsets) */} {trackLen > 0 && fieldCars.map(c => { const p = pointAt((t + c.off) % 1); return ( ); })} {/* NOR */} {trackLen > 0 && ( NOR )} {/* LEC */} {trackLen > 0 && ( LEC )} ); })()} {/* Start/finish line — midpoint between T14 and T1 in viewBox coords. */} {(() => { const ARCADE_REGION_W = 470, ARCADE_REGION_H = 360; const ARCADE_FIT = Math.min(ARCADE_REGION_W / 607.8, ARCADE_REGION_H / 385.1) * 0.94; const ARCADE_TX = 195 + (ARCADE_REGION_W - 607.8 * ARCADE_FIT) / 2; const ARCADE_TY = 55 + (ARCADE_REGION_H - 385.1 * ARCADE_FIT) / 2; const c1 = CORNERS.find(c => c.n === 1); const c14 = CORNERS.find(c => c.n === 14); const x = ARCADE_TX + ((c1.x + c14.x) / 2) * ARCADE_FIT; const y = ARCADE_TY + ((c1.y + c14.y) / 2) * ARCADE_FIT; return ( ); })()} {/* LEADERBOARD */} LEADERBOARD {leaderboard.map((d, i) => ( {d.active && } {String(d.pos).padStart(2, ' ')} {d.code} {d.tire} ))} {/* FOOTER — LAP PROGRESS */} {Array.from({ length: 58 }).map((_, i) => ( ))} {/* moving play-head within current lap */} {[1, 10, 20, 30, 40, 50, 58].map(n => ( {n} ))}
); } function StreamlitPreview() { // Timing (ms) const TYPE_MS = 3500; // message streams in const BTN_DELAY = 400; // pause after message before button const BTN_HOLD = 700; // then chart appears const SWEEP_MS = 4500; // crosshair auto-sweep const HOLD_MS = 2500; // hold at end before restart const TOTAL = TYPE_MS + BTN_DELAY + BTN_HOLD + SWEEP_MS + HOLD_MS; const fullMessage = "LEC's lap 30 telemetry at Monza shows a long, high-speed lap profile with repeated heavy-braking zones and short acceleration bursts, which is exactly where tyre performance and brake stability matter most. The key strategic insight is that Monza rewards track position heavily, so if Leclerc is on a tyre age cliff, the undercut window is likely more valuable than waiting for an overcut. Recommended action: pit only if the tyre delta is clearly fading versus the car ahead/behind; otherwise protect track position and avoid losing time in traffic, since clean-air pace is critical here."; const [elapsed, setElapsed] = useState(0); const [hoverX, setHoverX] = useState(null); // user-driven crosshair (normalized 0..1) or null useEffect(() => { let raf, start = performance.now(); const loop = (now) => { setElapsed((now - start) % TOTAL); raf = requestAnimationFrame(loop); }; raf = requestAnimationFrame(loop); return () => cancelAnimationFrame(raf); }, []); // Derived phase values const charsShown = Math.min(fullMessage.length, Math.round((elapsed / TYPE_MS) * fullMessage.length)); const messageText = fullMessage.slice(0, charsShown); const showTypingCursor = elapsed < TYPE_MS; const showBtn = elapsed > TYPE_MS + BTN_DELAY; const btnActive = elapsed > TYPE_MS + BTN_DELAY && elapsed < TYPE_MS + BTN_DELAY + 250; const showChart = elapsed > TYPE_MS + BTN_DELAY + BTN_HOLD; // Auto-sweep only when chart has appeared and user not hovering const sweepStart = TYPE_MS + BTN_DELAY + BTN_HOLD; const autoX = elapsed > sweepStart ? Math.max(0, Math.min(1, (elapsed - sweepStart) / SWEEP_MS)) : null; const crosshairX = hoverX != null ? hoverX : (elapsed > sweepStart && elapsed < sweepStart + SWEEP_MS ? autoX : null); const W = 780; const H = 340; // Generate telemetry const N = 240; const brakeZones = [0.08, 0.22, 0.40, 0.55, 0.70, 0.88]; const speedPts = [], throttlePts = [], brakePts = []; for (let i = 0; i < N; i++) { const x = i / (N - 1); let speed = 305; for (const bz of brakeZones) { const d = Math.abs(x - bz); if (d < 0.05) speed -= Math.exp(-(d * d) * 1400) * (160 + 30 * Math.sin(bz * 20)); } speed = Math.max(70, Math.min(310, speed + Math.sin(x * 60) * 2)); speedPts.push([x, speed]); let thr = 100; for (const bz of brakeZones) { const d = Math.abs(x - bz); if (d < 0.04) thr = Math.min(thr, 0 + d * 400); else if (d < 0.06) thr = Math.min(thr, 30 + (d - 0.04) * 3500); } throttlePts.push([x, Math.max(0, Math.min(100, thr))]); let br = 0; for (const bz of brakeZones) { const d = Math.abs(x - bz); if (d < 0.015) br = 100; else if (d < 0.025) br = 100 - (d - 0.015) * 8000; } brakePts.push([x, Math.max(0, Math.min(100, br))]); } const chartL = 56, chartR = W - 24, chartW = chartR - chartL; const chartBands = [ { y: 24, h: 54, label: 'Speed (km/h)', min: 0, max: 350, ticks: [100, 200, 300], color: '#ff3a5a', fill: 'rgba(255,58,90,0.06)' }, { y: 102, h: 54, label: 'Throttle (%)', min: 0, max: 100, ticks: [0, 50, 100], color: '#00d7b5', fill: 'rgba(0,215,181,0.15)' }, { y: 180, h: 36, label: 'Brake (%)', min: 0, max: 100, ticks: ['false', 'true'], color: '#ff3a5a', fill: 'rgba(255,58,90,0.18)' }, ]; const toPath = (pts, band) => pts.map(([x, v], i) => { const px = chartL + x * chartW; const py = band.y + band.h - ((v - band.min) / (band.max - band.min)) * band.h; return `${i === 0 ? 'M' : 'L'}${px.toFixed(1)},${py.toFixed(1)}`; }).join(' '); const toAreaPath = (pts, band) => { const base = band.y + band.h; return `M${chartL},${base} ` + pts.map(([x, v]) => { const px = chartL + x * chartW; const py = band.y + band.h - ((v - band.min) / (band.max - band.min)) * band.h; return `L${px.toFixed(1)},${py.toFixed(1)}`; }).join(' ') + ` L${chartR},${base} Z`; }; // Lookup value at fraction const valueAt = (pts, frac) => { const i = Math.max(0, Math.min(pts.length - 1, Math.round(frac * (pts.length - 1)))); return pts[i][1]; }; const crossPx = crosshairX != null ? chartL + crosshairX * chartW : null; const crossDist = crosshairX != null ? Math.round(crosshairX * 5000) : null; const crossSpeed = crosshairX != null ? Math.round(valueAt(speedPts, crosshairX)) : null; const crossThr = crosshairX != null ? Math.round(valueAt(throttlePts, crosshairX)) : null; const crossBr = crosshairX != null ? Math.round(valueAt(brakePts, crosshairX)) : null; const handleMove = (e) => { const svg = e.currentTarget; const rect = svg.getBoundingClientRect(); const svgX = ((e.clientX - rect.left) / rect.width) * W; const frac = (svgX - chartL) / chartW; if (frac >= 0 && frac <= 1) setHoverX(frac); else setHoverX(null); }; // Tooltip positioning (avoid right edge overflow) let tipX = 0, tipAnchor = 'start'; if (crossPx != null) { if (crossPx > chartR - 110) { tipX = crossPx - 6; tipAnchor = 'end'; } else { tipX = crossPx + 6; tipAnchor = 'start'; } } return (
localhost:8501 · f1-strat post-race analysis
{/* Chat bubble — streams in */}
F1
{messageText} {showTypingCursor && ▍}
{/* Button — fades in */}
{/* Chart card — fades in, with hover crosshair */}
LEC — lap 30 telemetry
setHoverX(null)}> {chartBands.map((band, bi) => ( {band.ticks.map((t, ti) => { const v = typeof t === 'number' ? t : (ti === 0 ? band.min : band.max); const py = band.y + band.h - ((v - band.min) / (band.max - band.min)) * band.h; return ( {t} ); })} {band.label} ))} {[0, 1000, 2000, 3000, 4000, 5000].map((d) => { const px = chartL + (d / 5000) * chartW; return ( {d} ); })} Distance (m) {/* Crosshair + markers + tooltip */} {crossPx != null && ( {/* dot on each band */} {chartBands.map((band, bi) => { const pts = [speedPts, throttlePts, brakePts][bi]; const v = valueAt(pts, crosshairX); const py = band.y + band.h - ((v - band.min) / (band.max - band.min)) * band.h; return ; })} {/* tooltip */} dist {crossDist} m speed {crossSpeed} km/h thr {crossThr}% brake {crossBr}% )}
{/* Attach image */}
▸ Attach image
{/* Input */}
Ask me anything about F1…
); } Object.assign(window, { TelemetrySection, CircuitSection, SurfacesSection });