// Per-agent showcase — one mini visualization per sub-agent function AgentsSection() { const [active, setActive] = useState('pace'); const [paused, setPaused] = useState(false); const agents = [ { id: 'pace', code: '01', name: 'Pace', color: '#a29bfe', summary: 'XGBoost lap-time + P10/P90 bootstrap CI', Viz: PaceAgentViz }, { id: 'tire', code: '02', name: 'Tire', color: '#ff2d3a', summary: 'TCN + MC Dropout · laps-to-cliff with P10/P50/P90', Viz: TireAgentViz }, { id: 'race', code: '03', name: 'Race Situation', color: '#ffbd33', summary: 'LightGBM overtake prob. + 3-lap safety-car prior', Viz: RaceAgentViz }, { id: 'pit', code: '04', name: 'Pit Strategy', color: '#3385ff', summary: 'Pit-duration quantiles + undercut probability', Viz: PitAgentViz }, { id: 'radio', code: '05', name: 'Radio', color: '#43ff64', summary: 'RoBERTa sentiment + SetFit intent + BERT-large NER', Viz: RadioAgentViz }, { id: 'rag', code: '06', name: 'RAG', color: '#6c5ce7', summary: 'Qdrant + BGE-M3 over FIA Sporting Regs 2023–25', Viz: RagAgentViz }, ]; const a = agents.find(x => x.id === active); useEffect(() => { if (paused) return; const id = setInterval(() => { setActive(cur => { const i = agents.findIndex(x => x.id === cur); return agents[(i + 1) % agents.length].id; }); }, 6000); return () => clearInterval(id); }, [paused]); return (
Sub-agents

Six specialists. One table.

Each sub-agent reasons in its own head, outputs structured Pydantic predictions, and hands them to the orchestrator.

setPaused(true)} onMouseLeave={() => setPaused(false)}>
{agents.map(ag => ( ))}
); } // ---------- Pace agent — sparkline with confidence ---------- function PaceAgentViz() { const data = Array.from({ length: 20 }, (_, i) => ({ x: i, actual: 87.4 + Math.sin(i * 0.7) * 0.3 + i * 0.03, pred: 87.6 + Math.sin((i + 2) * 0.6) * 0.25 + i * 0.035 })); return (
Lap time — last 20
{(() => { const W = 360, H = 140, pad = 16; const min = 86.8, max = 89; const xs = x => pad + (x / 19) * (W - pad * 2); const ys = y => pad + (1 - (y - min) / (max - min)) * (H - pad * 2 - 12); const actualP = data.map((p, i) => `${i === 0 ? 'M' : 'L'}${xs(p.x)},${ys(p.actual)}`).join(' '); const predP = data.map((p, i) => `${i === 0 ? 'M' : 'L'}${xs(p.x)},${ys(p.pred)}`).join(' '); const area = actualP + ` L${xs(19)},${H - pad} L${xs(0)},${H - pad} Z`; return ( <> {data.map((p, i) => i === data.length - 1 && ( ))} ); })()}
Feature importance
{[ ['Tire age', 0.28], ['Fuel load', 0.22], ['Track evo', 0.18], ['Compound', 0.15], ['Traffic', 0.10], ['Weather', 0.07], ].map(([k, v]) => (
{k} {v.toFixed(2)}
))}
); } // ---------- Tire agent — compound degradation curves ---------- function TireAgentViz() { return (
Degradation curve · per compound
SOFT MED HARD
{(() => { const W = 560, H = 260, pad = { l: 36, r: 20, t: 10, b: 28 }; const xs = x => pad.l + (x / 30) * (W - pad.l - pad.r); const ys = y => pad.t + (1 - y / 2.5) * (H - pad.t - pad.b); const compounds = [ { c: '#ff2d3a', rate: 0.12, peakAt: 14 }, { c: '#ffcf2d', rate: 0.065, peakAt: 22 }, { c: '#e6e6e6', rate: 0.038, peakAt: 30 }, ]; return ( <> {/* grid */} {[0, 0.25, 0.5, 0.75, 1].map((p, i) => ( ))} {/* y labels */} {[0, 0.5, 1, 1.5, 2].map(v => ( +{v.toFixed(1)}s ))} {/* x labels */} {[0, 10, 20, 30].map(v => ( {v} ))} {/* compound curves with uncertainty bands */} {compounds.map((comp, idx) => { const pts = Array.from({ length: 30 }, (_, i) => { const accel = i > comp.peakAt ? (i - comp.peakAt) * 0.1 : 0; return { x: i, y: comp.rate * i + accel * accel * 0.04 }; }); const band = pts.map(p => ({ x: p.x, lo: Math.max(0, p.y - 0.15 - p.y * 0.1), hi: p.y + 0.15 + p.y * 0.12 })); const up = band.map(p => `${xs(p.x)},${ys(p.hi)}`); const dn = band.slice().reverse().map(p => `${xs(p.x)},${ys(p.lo)}`); const pathD = pts.map((p, i) => `${i === 0 ? 'M' : 'L'}${xs(p.x)},${ys(p.y)}`).join(' '); return ( ); })} {/* "now" vertical */} NOW L14 ); })()}
); } // ---------- Race situation — radial gauges ---------- function RaceAgentViz() { return (
Race control feed
{[ ['L46', 'Yellow flag cleared', '#43ff64'], ['L47', 'DRS enabled', '#a29bfe'], ['L48', 'Track limits · T9 warning #2', '#ffbd33'], ].map(([lap, msg, c]) => (
{lap} {msg}
))}
); } function Gauge({ label, value, color, sub }) { const R = 60, C = 2 * Math.PI * R; const dash = C * 0.75; // only 270 deg used const filled = dash * value; return (
{label}
{Math.round(value * 100)}% {sub.toUpperCase()}
); } // ---------- Pit strategy — scenario tree ---------- function PitAgentViz() { return (
Scenario tree · P(win position)
{(() => { const nodes = [ { id: 'root', x: 40, y: 130, label: 'Now · L34', sub: 'P3' }, { id: 'A', x: 200, y: 60, label: 'Pit L35 · MED', p: 0.72, sub: '+1 pos · 72%' }, { id: 'B', x: 200, y: 130, label: 'Pit L35 · HARD', p: 0.58, sub: 'even · 58%' }, { id: 'C', x: 200, y: 200, label: 'Extend to L40', p: 0.42, sub: '−1 pos · 42%' }, { id: 'A1', x: 380, y: 40, label: 'No SC', p: 0.71, sub: '+1 pos' }, { id: 'A2', x: 380, y: 90, label: 'SC L38', p: 0.48, sub: 'even' }, { id: 'B1', x: 380, y: 140, label: 'No SC', p: 0.60, sub: 'even' }, { id: 'C1', x: 380, y: 200, label: 'SC L40+', p: 0.78, sub: 'saved' }, ]; const edges = [ ['root','A',0.4],['root','B',0.3],['root','C',0.3], ['A','A1',0.82],['A','A2',0.18],['B','B1',0.6],['C','C1',0.25] ]; const find = id => nodes.find(n => n.id === id); const colorFor = p => p >= 0.65 ? '#43ff64' : p >= 0.5 ? '#3385ff' : '#ff5733'; return ( <> {edges.map(([a, b, w], i) => { const from = find(a), to = find(b); return ( ); })} {nodes.map((n, i) => { const isRoot = n.id === 'root'; const c = isRoot ? '#3385ff' : colorFor(n.p); return ( {n.label} {n.sub} ); })} ); })()}
); } // ---------- Radio agent — waveform + classification ---------- function RadioAgentViz() { const bars = Array.from({ length: 80 }, (_, i) => { return 0.2 + Math.abs(Math.sin(i * 0.5)) * 0.6 + Math.random() * 0.15; }); return (
L33 · LEC → BOX
"Tyres are gone, mate."
negative
{bars.map((b, i) => (
))}
{[ ['Intent', 'PROBLEM', 0.91], ['Sentiment', 'negative', 0.87], ['Entity', 'tyres', 0.95], ['RCM', 'tire_stress', 0.88], ].map(([k, v, c]) => (
{k}
{v}
{c.toFixed(2)}
))}
); } // ---------- RAG agent — retrieval trail ---------- function RagAgentViz() { return (
Retrieval trail
"Can a driver overtake under VSC?"
{[ { src: 'FIA SR 55.2', score: 0.82, snippet: 'Under VSC, overtaking is prohibited except...' }, { src: 'FIA SR 55.3', score: 0.79, snippet: 'Drivers must respect a delta time proportional...' }, { src: 'FIA SR 55.5', score: 0.64, snippet: 'Lap times set during the VSC period may be...' }, { src: 'FIA SR 41.6', score: 0.41, snippet: 'A Safety Car is used when competitors cannot safely...' }, { src: 'FIA SR 55.1', score: 0.33, snippet: 'The Virtual Safety Car may be deployed by the FIA...' }, ].map((r, i) => (
{r.src} {r.snippet}
{r.score.toFixed(2)}
))}
); } // ---------- Shared frame used by each agent viz ---------- function AgentStage({ agentName, color, reasoning, prediction, children }) { return (
Sub-agent · live

{agentName}

{prediction.label}
{prediction.value}
conf {prediction.conf.toFixed(2)}
{children}
Reasoning trace
{reasoning.map((r, i) => (
{i + 1} {r}
))}
); } Object.assign(window, { AgentsSection });