// Main App for F1 StratLab landing page const TWEAKS_DEFAULTS = /*EDITMODE-BEGIN*/{ "heroVariant": "agent_graph", "showMeta": true, "accentStyle": "purple_blue" }/*EDITMODE-END*/; const NAV_SECTIONS = [ { id: 'how', label: 'Architecture' }, { id: 'agents', label: 'Agents' }, { id: 'telemetry', label: 'Telemetry' }, { id: 'surfaces', label: 'Surfaces' }, { id: 'install', label: 'Install' }, ]; function App() { const [tweaks, setTweaks] = useState(() => { try { const saved = localStorage.getItem('f1sm_tweaks'); return saved ? { ...TWEAKS_DEFAULTS, ...JSON.parse(saved) } : TWEAKS_DEFAULTS; } catch { return TWEAKS_DEFAULTS; } }); const [tweaksOpen, setTweaksOpen] = useState(false); // ── Scrollspy: highlight nav link + animated underline bar ── const [activeSection, setActiveSection] = useState(null); const navLinksRef = useRef(null); const linkRefs = useRef({}); const [barStyle, setBarStyle] = useState({ left: 0, width: 0, opacity: 0 }); useEffect(() => { const io = new IntersectionObserver((entries) => { // Choose the entry whose midline is closest to the viewport midline const visible = entries.filter(e => e.isIntersecting); if (visible.length === 0) return; visible.sort((a, b) => Math.abs(a.boundingClientRect.top) - Math.abs(b.boundingClientRect.top)); setActiveSection(visible[0].target.id); }, { rootMargin: '-45% 0px -45% 0px', threshold: 0 }); NAV_SECTIONS.forEach(s => { const el = document.getElementById(s.id); if (el) io.observe(el); }); return () => io.disconnect(); }, []); useEffect(() => { const compute = () => { const link = activeSection ? linkRefs.current[activeSection] : null; if (link && navLinksRef.current) { const parentRect = navLinksRef.current.getBoundingClientRect(); const linkRect = link.getBoundingClientRect(); setBarStyle({ left: linkRect.left - parentRect.left, width: linkRect.width, opacity: 1 }); } else { setBarStyle(s => ({ ...s, opacity: 0 })); } }; compute(); window.addEventListener('resize', compute); return () => window.removeEventListener('resize', compute); }, [activeSection]); // Tweaks protocol useEffect(() => { const handler = (e) => { if (e.data?.type === '__activate_edit_mode') setTweaksOpen(true); if (e.data?.type === '__deactivate_edit_mode') setTweaksOpen(false); }; window.addEventListener('message', handler); // announce availability AFTER listener is live window.parent.postMessage({ type: '__edit_mode_available' }, '*'); return () => window.removeEventListener('message', handler); }, []); const updateTweak = (key, value) => { const next = { ...tweaks, [key]: value }; setTweaks(next); try { localStorage.setItem('f1sm_tweaks', JSON.stringify(next)); } catch {} window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [key]: value } }, '*'); }; // Scroll reveal useEffect(() => { const io = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); }); }, { threshold: 0.12, rootMargin: '-40px 0px' }); document.querySelectorAll('section').forEach(s => { s.classList.add('reveal'); io.observe(s); }); return () => io.disconnect(); }, []); // Auto-close the mobile hamburger when the user taps a link inside it. // Without this, tapping a section just updates the hash but leaves the // dropdown open, blocking the page content. useEffect(() => { const onClick = (e) => { const a = e.target.closest('.nav-mobile-panel a'); if (!a) return; const details = a.closest('details'); if (details) details.open = false; }; document.addEventListener('click', onClick); return () => document.removeEventListener('click', onClick); }, []); const HeroViz = tweaks.heroVariant === 'dashboard' ? DashboardViz : tweaks.heroVariant === 'cinematic' ? CinematicViz : AgentGraphViz; return (
{/* NAV */} {/* HERO */}
F1 StratLab · Multi-agent strategy · open source · v0.1.1

Race strategy,
decided by six agents.

F1 StratLab orchestrates seven ML models and a LangGraph multi-agent system to produce real-time Formula 1 strategy recommendations — from lap time prediction to tire degradation, radio NLP, and RAG over FIA regulations.

{tweaks.showMeta && (
7 ML models · 6 LangGraph sub-agents · 71 Grand Prix · 2023–25 · Open Source
)}
{/* HOW IT WORKS */} {/* AGENTS — one mini viz per sub-agent */} {/* TELEMETRY — actual (solid) vs predicted (dashed) */} {/* CIRCUIT — animated track */} {/* PINNED SCROLL NARRATIVE */} {/* MODELS */} {/* RAG DEMO */} {/* SURFACES — CLI / Arcade / Streamlit */} {/* CLI INSTALL */} {/* STACK */} {/* PAPER */} {/* CONTRIBUTING */} {/* MEET THE AUTHOR */} {/* FOOTER */}
); } ReactDOM.createRoot(document.getElementById('root')).render();