feat: wire frontend buttons to API + fix HF Spaces config

- Wire all desktop.html buttons to FastAPI endpoints (predict, health, docs)
- Wire all mobile.html buttons with same API integration
- Add interactive terminal: editable input, POST /predict/f1, render results
- Add health indicator polling GET /health every 30s
- Add smooth-scroll navigation with section anchors
- Add toast notification system for success/error feedback
- Add mobile viewport detection in index.html
- Add HF Spaces YAML frontmatter to README.md (fixes config error)
- Update CORS to support file:// protocol for local dev
- Remove deleted ui/ folder references from Dockerfiles
- Remove Streamlit service from docker-compose and nginx
- Update drift report output path to data_output/

Dockerfile

@@ -29,7 +29,6 @@ COPY --chown=1000:1000 api/ ./api/
 COPY --chown=1000:1000 ml/ ./ml/
 COPY --chown=1000:1000 data/ ./data/
 COPY --chown=1000:1000 scripts/ ./scripts/
-COPY --chown=1000:1000 ui/ ./ui/
 COPY --chown=1000:1000 run_api.py run_all.py ./
 
 # Copy pre-trained model artifacts and data

Dockerfile.hf

@@ -30,7 +30,6 @@ COPY --chown=1000:1000 api/ ./api/
 COPY --chown=1000:1000 ml/ ./ml/
 COPY --chown=1000:1000 data/ ./data/
 COPY --chown=1000:1000 scripts/ ./scripts/
-COPY --chown=1000:1000 ui/ ./ui/
 COPY --chown=1000:1000 run_api.py run_all.py ./
 
 # Copy pre-trained model artifacts and data

README.md

@@ -1,3 +1,13 @@
+---
+title: Kronector
+emoji: 🏎️
+colorFrom: red
+colorTo: gray
+sdk: docker
+app_port: 7860
+pinned: false
+---
+
 <div align="center">
 
 # Kronector: F1 Race Outcome Prediction & MLOps System
@@ -58,11 +68,7 @@ To prove the model captures complex non-linear relationships rather than just pr
 | Pole Position Wins | ~42% |
 
 ### Feature Importance & ROC Proofs
-*Mathematical proof that the model relies on logical racing factors.*
-<div align="center">
-  <img src="frontend/public/metrics/feature_importance.svg" width="48%">
-  <img src="frontend/public/metrics/roc_curve.svg" width="48%">
-</div>
+*Mathematical proof that the model relies on logical racing factors can be regenerated with `python -m scripts.generate_model_proofs`.*
 
 ---
 
@@ -87,7 +93,6 @@ graph TD
     subgraph Serving
         E --> G[FastAPI Backend]
         G --> H[Multi-Agent LLM]
-        H --> I[React Frontend]
     end
 ```
 
@@ -125,17 +130,12 @@ python -m data.build_driver_map
 python -m scripts.auto_retrain_pipeline
 ```
 
-### 3. Run the API & Frontend
+### 3. Run the API
 Create a `.env` file with `GROQ_API_KEY=your_key` and the `KRONECTOR_MODEL_RUN_ID` outputted by the training script.
 
 ```bash
 # Start backend
 python -m uvicorn api.main:app --reload
-
-# Start frontend (in a new terminal)
-cd frontend
-npm install
-npm run dev
 ```
 
 ---

api/main.py

@@ -185,7 +185,7 @@ import os
 
 _cors_origins = os.getenv(
     "CORS_ORIGINS",
-    "http://localhost:3000,http://localhost:8501,http://localhost:5173",
+    "http://localhost:3000,http://localhost:8501,http://localhost:5173,http://localhost:8080,http://localhost:8000,null",
 ).split(",")
 
 app.add_middleware(

docker-compose.yml

@@ -3,7 +3,6 @@
 # ============================================================================
 # Services:
 #   api       — FastAPI prediction server (port 8000)
-#   streamlit — Drift monitoring dashboard (port 8501)
 #   mlflow    — MLflow tracking server (port 5000)
 #   nginx     — Reverse proxy (ports 80/443)
 #
@@ -39,31 +38,6 @@ services:
     networks:
       - kronector-net
 
-  # --------------------------------------------------------------------------
-  # Streamlit — Drift monitoring dashboard
-  # --------------------------------------------------------------------------
-  streamlit:
-    build:
-      context: .
-      target: production
-    container_name: kronector-dashboard
-    command: >
-      streamlit run ui/monitoring_dashboard.py
-      --server.port=8501
-      --server.address=0.0.0.0
-      --server.headless=true
-      --browser.gatherUsageStats=false
-    ports:
-      - "8501:8501"
-    env_file:
-      - .env
-    volumes:
-      - model_data:/app/mlruns
-      - app_data:/app/data_output
-    restart: unless-stopped
-    networks:
-      - kronector-net
-
   # --------------------------------------------------------------------------
   # MLflow — Experiment tracking & model registry
   # --------------------------------------------------------------------------

frontend/.gitignore

@@ -1,41 +0,0 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.*
-.yarn/*
-!.yarn/patches
-!.yarn/plugins
-!.yarn/releases
-!.yarn/versions
-
-# testing
-/coverage
-
-# next.js
-/.next/
-/out/
-
-# production
-/build
-
-# misc
-.DS_Store
-*.pem
-
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-.pnpm-debug.log*
-
-# env files (can opt-in for committing if needed)
-.env*
-
-# vercel
-.vercel
-
-# typescript
-*.tsbuildinfo
-next-env.d.ts

frontend/AGENTS.md

@@ -1,5 +0,0 @@
-<!-- BEGIN:nextjs-agent-rules -->
-# This is NOT the Next.js you know
-
-This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices.
-<!-- END:nextjs-agent-rules -->

frontend/CLAUDE.md

@@ -1 +0,0 @@
-@AGENTS.md

frontend/README.md

@@ -1,36 +0,0 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
-
-## Getting Started
-
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
-
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

frontend/app/globals.css

@@ -1,76 +0,0 @@
-@import "tailwindcss";
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');
-
-@theme {
-  --color-saas-bg: #000000;
-  --color-saas-surface: #0A0A0A;
-  --color-saas-card: #111111;
-  --color-saas-border: #222222;
-  --color-saas-border-hover: #333333;
-  --color-saas-text-primary: #EDEDED;
-  --color-saas-text-secondary: #888888;
-  --color-saas-accent: #FFFFFF;
-  --color-saas-blue: #0070F3;
-  --color-saas-red: #E00000;
-  --color-saas-green: #00D084;
-
-  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-  --font-mono: 'Geist Mono', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-}
-
-@layer base {
-  :root {
-    --background: 0 0% 0%;
-    --foreground: 0 0% 93%;
-    --card: 0 0% 7%;
-    --card-foreground: 0 0% 93%;
-    --popover: 0 0% 7%;
-    --popover-foreground: 0 0% 93%;
-    --primary: 0 0% 100%;
-    --primary-foreground: 0 0% 0%;
-    --secondary: 0 0% 13%;
-    --secondary-foreground: 0 0% 93%;
-    --muted: 0 0% 13%;
-    --muted-foreground: 0 0% 53%;
-    --accent: 0 0% 13%;
-    --accent-foreground: 0 0% 93%;
-    --destructive: 0 100% 44%;
-    --destructive-foreground: 0 0% 100%;
-    --border: 0 0% 13%;
-    --input: 0 0% 13%;
-    --ring: 0 0% 100%;
-    --radius: 0.5rem;
-  }
-}
-
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-body {
-  background-color: var(--color-saas-bg);
-  color: var(--color-saas-text-primary);
-  font-family: var(--font-sans);
-  min-height: 100vh;
-  overflow-x: hidden;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-/* Elegant minimalist scrollbar */
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-::-webkit-scrollbar-thumb {
-  background: var(--color-saas-border);
-  border-radius: 4px;
-}
-::-webkit-scrollbar-thumb:hover {
-  background: var(--color-saas-border-hover);
-}

frontend/app/layout.js

@@ -1,14 +0,0 @@
-import "./globals.css";
-
-export const metadata = {
-  title: "KRONECTOR F1 Intelligence",
-  description: "Predict F1 race outcomes using natural language queries powered by Hugging Face and MLflow.",
-};
-
-export default function RootLayout({ children }) {
-  return (
-    <html lang="en">
-      <body>{children}</body>
-    </html>
-  );
-}

frontend/app/page.js

@@ -1,33 +0,0 @@
-import Navbar from "@/components/saas/Navbar";
-import Hero from "@/components/saas/Hero";
-import PrimaryActions from "@/components/saas/PrimaryActions";
-import UpcomingGP from "@/components/saas/UpcomingGP";
-import ShapExplanation from "@/components/saas/ShapExplanation";
-import DriverComparison from "@/components/saas/DriverComparison";
-import Telemetry from "@/components/saas/Telemetry";
-import Metrics from "@/components/saas/Metrics";
-
-export default function SaaSPage() {
-  return (
-    <div className="bg-[#000000] min-h-screen text-[#EDEDED] font-sans selection:bg-[#0070F3]/30">
-      <Navbar />
-      
-      <main className="flex flex-col items-center w-full">
-        <Hero />
-        <PrimaryActions />
-        
-        {/* Everything below the fold */}
-        <div className="w-full bg-[#0A0A0A] border-t border-[#222222]">
-          <UpcomingGP />
-          <ShapExplanation />
-        </div>
-        
-        <div className="w-full">
-          <DriverComparison />
-          <Telemetry />
-          <Metrics />
-        </div>
-      </main>
-    </div>
-  );
-}

frontend/app/page.module.css

@@ -1,365 +0,0 @@
-.main {
-  min-height: 100vh;
-  padding: 4rem 2rem;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.header {
-  text-align: center;
-  margin-bottom: 4rem;
-}
-
-.title {
-  font-size: 4rem;
-  margin-bottom: 1rem;
-  line-height: 1.1;
-  text-shadow: var(--shadow-glow);
-}
-
-.subtitle {
-  font-size: 1.2rem;
-  color: var(--text-secondary);
-  max-width: 600px;
-  margin: 0 auto;
-}
-
-/* Query Input Component */
-.queryContainer {
-  width: 100%;
-  max-width: 800px;
-  position: relative;
-  margin-bottom: 3rem;
-  z-index: 10;
-}
-
-.inputWrapper {
-  position: relative;
-  width: 100%;
-  border-radius: var(--border-radius-lg);
-  background: var(--bg-glass);
-  backdrop-filter: blur(20px);
-  border: 1px solid rgba(0, 240, 255, 0.3);
-  box-shadow: var(--shadow-glow);
-  transition: var(--transition-smooth);
-}
-
-.inputWrapper:focus-within {
-  box-shadow: 0 0 30px rgba(0, 240, 255, 0.5);
-  border-color: var(--neon-cyan);
-}
-
-.input {
-  width: 100%;
-  background: transparent;
-  border: none;
-  padding: 1.5rem 4rem 1.5rem 2rem;
-  color: var(--text-primary);
-  font-size: 1.2rem;
-  font-family: inherit;
-  outline: none;
-}
-
-.input::placeholder {
-  color: var(--text-muted);
-}
-
-.submitBtn {
-  position: absolute;
-  right: 1rem;
-  top: 50%;
-  transform: translateY(-50%);
-  background: transparent;
-  border: none;
-  color: var(--neon-cyan);
-  cursor: pointer;
-  padding: 0.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: var(--transition-fast);
-  border-radius: 50%;
-}
-
-.submitBtn:hover {
-  background: rgba(0, 240, 255, 0.1);
-  box-shadow: var(--shadow-glow);
-}
-
-.submitBtn:disabled {
-  color: var(--text-muted);
-  cursor: not-allowed;
-  background: transparent;
-  box-shadow: none;
-}
-
-/* Loader */
-.loader {
-  border: 3px solid rgba(0, 240, 255, 0.1);
-  border-left-color: var(--neon-cyan);
-  border-radius: 50%;
-  width: 24px;
-  height: 24px;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-
-/* Dashboard */
-.dashboardGrid {
-  display: grid;
-  grid-template-columns: 1fr 2fr;
-  gap: 2rem;
-  width: 100%;
-  max-width: 1200px;
-}
-
-@media (max-width: 800px) {
-  .dashboardGrid {
-    grid-template-columns: 1fr;
-  }
-}
-
-.panel {
-  padding: 2rem;
-  display: flex;
-  flex-direction: column;
-}
-
-.panelTitle {
-  font-size: 1.2rem;
-  margin-bottom: 1.5rem;
-  color: var(--neon-cyan);
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  text-transform: uppercase;
-  letter-spacing: 2px;
-}
-
-/* Gauge */
-.gaugeContainer {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 2rem 0;
-}
-
-.gaugeCircle {
-  position: relative;
-  width: 200px;
-  height: 200px;
-  border-radius: 50%;
-  background: conic-gradient(var(--neon-cyan) var(--prob), var(--bg-secondary) 0deg);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: var(--shadow-glow);
-  margin-bottom: 1.5rem;
-}
-
-.gaugeCircle::before {
-  content: "";
-  position: absolute;
-  inset: 15px;
-  background: var(--bg-primary);
-  border-radius: 50%;
-  border: 1px solid rgba(0, 240, 255, 0.2);
-}
-
-.gaugeText {
-  position: relative;
-  font-size: 3.5rem;
-  font-weight: 800;
-  color: var(--text-primary);
-}
-
-.gaugeLabel {
-  color: var(--text-secondary);
-  font-size: 1.1rem;
-  text-align: center;
-}
-
-.rating {
-  margin-top: 1rem;
-  padding: 0.25rem 1rem;
-  border-radius: 20px;
-  font-size: 0.9rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-}
-
-.ratingGood {
-  background: rgba(0, 255, 136, 0.1);
-  color: var(--neon-green);
-  border: 1px solid var(--neon-green);
-}
-
-.ratingBad {
-  background: rgba(255, 42, 42, 0.1);
-  color: var(--neon-red);
-  border: 1px solid var(--neon-red);
-}
-
-/* Insight */
-.insightText {
-  line-height: 1.8;
-  font-size: 1.1rem;
-  color: var(--text-primary);
-}
-
-.insightHighlight {
-  color: var(--neon-cyan);
-  font-weight: 600;
-}
-
-/* SHAP Bars */
-.shapContainer {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.shapRow {
-  display: grid;
-  grid-template-columns: 150px 1fr 60px;
-  align-items: center;
-  gap: 1rem;
-}
-
-.shapLabel {
-  font-size: 0.9rem;
-  color: var(--text-secondary);
-  text-align: right;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.barTrack {
-  height: 12px;
-  background: rgba(255,255,255,0.05);
-  border-radius: 6px;
-  position: relative;
-  overflow: hidden;
-}
-
-.barFill {
-  height: 100%;
-  position: absolute;
-  top: 0;
-  border-radius: 6px;
-  transition: width 1s cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-.barPositive {
-  background: linear-gradient(90deg, transparent, var(--neon-cyan));
-  left: 50%;
-  box-shadow: var(--shadow-glow);
-}
-
-.barNegative {
-  background: linear-gradient(270deg, transparent, var(--neon-red));
-  right: 50%;
-  box-shadow: var(--shadow-glow-red);
-}
-
-.shapValue {
-  font-size: 0.85rem;
-  font-family: var(--font-geist-mono), monospace;
-}
-
-/* Tabs */
-.tabsContainer {
-  display: flex;
-  gap: 1rem;
-  margin-bottom: 2rem;
-  z-index: 10;
-}
-
-.tabBtn {
-  background: rgba(0, 0, 0, 0.3);
-  border: 1px solid rgba(0, 240, 255, 0.3);
-  color: var(--text-muted);
-  padding: 0.75rem 2rem;
-  border-radius: 20px;
-  cursor: pointer;
-  transition: var(--transition-fast);
-  font-family: inherit;
-  font-size: 1rem;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-}
-
-.tabBtn:hover {
-  background: rgba(0, 240, 255, 0.1);
-  color: var(--neon-cyan);
-}
-
-.tabActive {
-  background: rgba(0, 240, 255, 0.15);
-  border-color: var(--neon-cyan);
-  color: var(--neon-cyan);
-  box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
-}
-
-/* Compare Form */
-.compareForm {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-  width: 100%;
-}
-
-.compareInputsRow {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-}
-
-.vsText {
-  font-size: 1.5rem;
-  font-weight: 800;
-  color: var(--text-muted);
-  font-style: italic;
-}
-
-.compareInputsRowSmall {
-  display: flex;
-  gap: 1rem;
-  justify-content: center;
-}
-
-.compareSubmitBtn {
-  background: linear-gradient(90deg, rgba(0, 240, 255, 0.2), rgba(0, 240, 255, 0.05));
-  border: 1px solid var(--neon-cyan);
-  color: var(--neon-cyan);
-  padding: 1rem 2rem;
-  border-radius: var(--border-radius-lg);
-  cursor: pointer;
-  font-family: inherit;
-  font-size: 1.1rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 2px;
-  transition: var(--transition-fast);
-}
-
-.compareSubmitBtn:hover:not(:disabled) {
-  background: rgba(0, 240, 255, 0.2);
-  box-shadow: var(--shadow-glow);
-}
-
-.compareSubmitBtn:disabled {
-  border-color: rgba(0, 240, 255, 0.1);
-  color: var(--text-muted);
-  cursor: not-allowed;
-  background: transparent;
-}

frontend/components/saas/DriverComparison.tsx

@@ -1,40 +0,0 @@
-"use client";
-
-import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from 'recharts';
-
-export default function DriverComparison() {
-  const data = [
-    { metric: 'Qualifying Pace', Norris: 98, Verstappen: 95 },
-    { metric: 'Race Pace', Norris: 95, Verstappen: 97 },
-    { metric: 'Win Rate', Norris: 45, Verstappen: 52 },
-    { metric: 'Avg Finish', Norris: 2.1, Verstappen: 1.8 },
-  ];
-
-  return (
-    <section id="driver-comparison" className="px-6 max-w-6xl mx-auto mb-24 pt-16">
-      <div className="flex items-center gap-2 mb-8">
-        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-white"><path d="M16 3h5v5M4 20L21 3M21 16v5h-5M15 15l6 6M4 4l5 5"/></svg>
-        <h2 className="text-2xl font-semibold text-white tracking-tight">Driver Comparison Results</h2>
-      </div>
-
-      <div className="bg-[#111111] border border-[#222222] rounded-xl p-8">
-        <div className="h-[300px] w-full text-sm">
-          <ResponsiveContainer width="100%" height="100%">
-            <BarChart data={data} layout="vertical" margin={{ top: 0, right: 0, left: 20, bottom: 0 }}>
-              <CartesianGrid strokeDasharray="3 3" stroke="#222222" horizontal={false} />
-              <XAxis type="number" stroke="#888888" tick={{ fill: '#888888' }} />
-              <YAxis dataKey="metric" type="category" stroke="#888888" tick={{ fill: '#888888' }} width={100} />
-              <Tooltip 
-                cursor={{fill: '#222222', opacity: 0.4}}
-                contentStyle={{ backgroundColor: '#000000', border: '1px solid #333333', color: '#fff', borderRadius: '8px' }}
-              />
-              <Legend wrapperStyle={{ paddingTop: '20px' }} />
-              <Bar dataKey="Norris" fill="#FF8700" radius={[0, 4, 4, 0]} barSize={20} />
-              <Bar dataKey="Verstappen" fill="#0070F3" radius={[0, 4, 4, 0]} barSize={20} />
-            </BarChart>
-          </ResponsiveContainer>
-        </div>
-      </div>
-    </section>
-  );
-}

frontend/components/saas/Hero.tsx

@@ -1,21 +0,0 @@
-"use client";
-
-export default function Hero() {
-  return (
-    <section className="pt-24 pb-12 px-6 max-w-5xl mx-auto text-center">
-      <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[#111111] border border-[#222222] text-xs font-medium text-[#888888] mb-8">
-        <span className="w-2 h-2 rounded-full bg-[#0070F3]"></span>
-        LightGBM Model v2.1 Deployed
-      </div>
-      
-      <h1 className="text-5xl md:text-7xl font-bold tracking-tighter text-white mb-6">
-        Formula 1 <br className="hidden md:block" />
-        <span className="text-[#888888]">Intelligence Platform</span>
-      </h1>
-      
-      <p className="text-lg md:text-xl text-[#888888] max-w-2xl mx-auto leading-relaxed">
-        Predict race outcomes, compare drivers, analyze telemetry, and understand every prediction with mathematically-backed explainable AI.
-      </p>
-    </section>
-  );
-}

frontend/components/saas/Metrics.tsx

@@ -1,30 +0,0 @@
-"use client";
-
-import { Database, ShieldCheck, Cpu } from "lucide-react";
-
-export default function Metrics() {
-  const metrics = [
-    { label: "Model Accuracy", value: "71.8%", icon: Cpu, sub: "Out of sample (2023-2025)" },
-    { label: "Data Coverage", value: "8.2M", icon: Database, sub: "Rows of F1 Telemetry" },
-    { label: "System Status", value: "Healthy", icon: ShieldCheck, sub: "No data drift detected" },
-  ];
-
-  return (
-    <section className="px-6 max-w-6xl mx-auto pb-24 border-t border-[#222222] pt-16 mt-16">
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-        {metrics.map((m, i) => (
-          <div key={i} className="flex items-start gap-4">
-            <div className="p-3 bg-[#111111] border border-[#222222] rounded-lg">
-              <m.icon className="w-5 h-5 text-white" />
-            </div>
-            <div>
-              <div className="text-sm text-[#888888]">{m.label}</div>
-              <div className="text-xl font-semibold text-white mt-1">{m.value}</div>
-              <div className="text-xs text-[#666666] mt-1">{m.sub}</div>
-            </div>
-          </div>
-        ))}
-      </div>
-    </section>
-  );
-}

frontend/components/saas/Navbar.tsx

@@ -1,42 +0,0 @@
-"use client";
-
-import { Activity } from "lucide-react";
-import Link from "next/link";
-
-export default function Navbar() {
-  return (
-    <nav className="sticky top-0 z-50 w-full border-b border-[#222222] bg-[#000000]/80 backdrop-blur-md">
-      <div className="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
-        <div className="flex items-center gap-8">
-          <Link href="/" className="flex items-center gap-2">
-            <div className="w-6 h-6 bg-white text-black flex items-center justify-center rounded-sm font-bold text-sm">
-              K
-            </div>
-            <span className="font-semibold tracking-tight text-white">Kronector</span>
-          </Link>
-          
-          <div className="hidden md:flex items-center gap-6 text-sm font-medium text-[#888888]">
-            <Link href="#dashboard" className="hover:text-white transition-colors">Dashboard</Link>
-            <Link href="#predictions" className="text-white">Predictions</Link>
-            <Link href="#compare" className="hover:text-white transition-colors">Compare</Link>
-            <Link href="#telemetry" className="hover:text-white transition-colors">Telemetry</Link>
-            <Link href="#metrics" className="hover:text-white transition-colors">Metrics</Link>
-          </div>
-        </div>
-
-        <div className="flex items-center gap-6">
-          <div className="hidden sm:flex items-center gap-2 text-xs font-mono text-[#888888] bg-[#111111] px-3 py-1.5 rounded-full border border-[#222222]">
-            <span>Season 2026</span>
-          </div>
-          <div className="flex items-center gap-2 text-sm text-[#00D084] font-medium">
-            <span className="relative flex h-2 w-2">
-              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#00D084] opacity-75"></span>
-              <span className="relative inline-flex rounded-full h-2 w-2 bg-[#00D084]"></span>
-            </span>
-            Live
-          </div>
-        </div>
-      </div>
-    </nav>
-  );
-}

frontend/components/saas/PrimaryActions.tsx

@@ -1,93 +0,0 @@
-"use client";
-
-import { ArrowRight, Search, Zap } from "lucide-react";
-import { useState } from "react";
-
-export default function PrimaryActions() {
-  const [query, setQuery] = useState("");
-
-  const handlePredict = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (query) {
-      document.getElementById('upcoming-gp')?.scrollIntoView({ behavior: 'smooth' });
-    }
-  };
-
-  const handleCompare = (e: React.FormEvent) => {
-    e.preventDefault();
-    document.getElementById('driver-comparison')?.scrollIntoView({ behavior: 'smooth' });
-  };
-
-  return (
-    <section className="px-6 max-w-6xl mx-auto mb-24">
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-        
-        {/* Predict Card */}
-        <div className="bg-[#111111] border border-[#222222] hover:border-[#333333] transition-colors rounded-xl p-8 flex flex-col justify-between h-[320px]">
-          <div>
-            <div className="flex items-center gap-2 text-white font-medium mb-2">
-              <Zap className="w-5 h-5 text-[#0070F3]" />
-              Predict a Race Outcome
-            </div>
-            <p className="text-[#888888] text-sm mb-6">Ask any natural language question about an upcoming race.</p>
-          </div>
-
-          <form onSubmit={handlePredict} className="mt-auto">
-            <div className="relative mb-4">
-              <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-[#888888]" />
-              <input 
-                type="text" 
-                value={query}
-                onChange={(e) => setQuery(e.target.value)}
-                placeholder="Who will win the Canadian GP?"
-                className="w-full bg-[#000000] border border-[#222222] rounded-lg py-4 pl-12 pr-4 text-white placeholder:text-[#444444] focus:outline-none focus:border-[#0070F3] focus:ring-1 focus:ring-[#0070F3] transition-all text-lg"
-              />
-            </div>
-            <button type="submit" className="w-full bg-white text-black hover:bg-gray-200 font-medium py-3 rounded-lg flex items-center justify-center gap-2 transition-colors">
-              Predict Outcome <ArrowRight className="w-4 h-4" />
-            </button>
-            <div className="flex gap-3 mt-4 text-xs text-[#666666]">
-              <span className="hover:text-[#888888] cursor-pointer">Who wins Monaco?</span>
-              <span className="hover:text-[#888888] cursor-pointer">Predict Silverstone podium</span>
-            </div>
-          </form>
-        </div>
-
-        {/* Compare Card */}
-        <div className="bg-[#111111] border border-[#222222] hover:border-[#333333] transition-colors rounded-xl p-8 flex flex-col justify-between h-[320px]">
-          <div>
-            <div className="flex items-center gap-2 text-white font-medium mb-2">
-              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-[#00D084]"><path d="M16 3h5v5M4 20L21 3M21 16v5h-5M15 15l6 6M4 4l5 5"/></svg>
-              Compare Drivers
-            </div>
-            <p className="text-[#888888] text-sm mb-6">Analyze head-to-head performance across metrics.</p>
-          </div>
-
-          <form onSubmit={handleCompare} className="mt-auto">
-            <div className="flex items-center gap-4 mb-6">
-              <div className="flex-1">
-                <select className="w-full bg-[#000000] border border-[#222222] rounded-lg p-4 text-white focus:outline-none focus:border-[#00D084] appearance-none cursor-pointer">
-                  <option>Norris</option>
-                  <option>Verstappen</option>
-                  <option>Leclerc</option>
-                </select>
-              </div>
-              <div className="text-[#888888] font-mono text-sm">VS</div>
-              <div className="flex-1">
-                <select className="w-full bg-[#000000] border border-[#222222] rounded-lg p-4 text-white focus:outline-none focus:border-[#00D084] appearance-none cursor-pointer">
-                  <option>Verstappen</option>
-                  <option>Norris</option>
-                  <option>Leclerc</option>
-                </select>
-              </div>
-            </div>
-            <button type="submit" className="w-full bg-[#222222] text-white hover:bg-[#333333] border border-[#333333] font-medium py-3 rounded-lg flex items-center justify-center gap-2 transition-colors">
-              Compare Stats
-            </button>
-          </form>
-        </div>
-
-      </div>
-    </section>
-  );
-}

frontend/components/saas/ShapExplanation.tsx

@@ -1,52 +0,0 @@
-"use client";
-
-import { Brain } from "lucide-react";
-
-export default function ShapExplanation() {
-  const factors = [
-    { name: "Grid Position", value: "+3.18", type: "positive" },
-    { name: "Driver Form (Last 3)", value: "+1.39", type: "positive" },
-    { name: "Team Perf Index", value: "+1.01", type: "positive" },
-    { name: "Wet Weather Risk", value: "-0.85", type: "negative" },
-    { name: "Reliability Concerns", value: "-1.22", type: "negative" },
-  ];
-
-  return (
-    <section className="px-6 max-w-6xl mx-auto mb-24">
-      <div className="flex items-center gap-2 mb-8">
-        <Brain className="w-5 h-5 text-white" />
-        <h2 className="text-2xl font-semibold text-white tracking-tight">Why The Model Thinks This</h2>
-      </div>
-
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-        <div className="bg-[#111111] border border-[#222222] rounded-xl p-8 flex flex-col justify-center items-center text-center">
-          <div className="text-sm text-[#888888] mb-2 uppercase tracking-wider">Prediction Confidence</div>
-          <div className="text-5xl font-mono font-medium text-white">92%</div>
-          <div className="text-xs text-[#00D084] mt-2 bg-[#00D084]/10 px-2 py-1 rounded">MATHEMATICALLY SOUND</div>
-        </div>
-
-        <div className="md:col-span-2 bg-[#111111] border border-[#222222] rounded-xl p-8">
-          <div className="text-sm text-[#888888] mb-6 uppercase tracking-wider">Feature Contributions (SHAP)</div>
-          
-          <div className="space-y-4">
-            {factors.map((f, i) => (
-              <div key={i} className="flex justify-between items-center text-sm">
-                <span className="text-[#EDEDED]">{f.name}</span>
-                <div className="flex items-center gap-3">
-                  <span className={`font-mono ${f.type === 'positive' ? 'text-[#00D084]' : 'text-[#E00000]'}`}>{f.value}</span>
-                  <div className="w-32 h-1.5 bg-[#222222] rounded-full overflow-hidden flex justify-end">
-                    {f.type === 'positive' ? (
-                      <div className="h-full bg-[#00D084] w-full" />
-                    ) : (
-                      <div className="h-full bg-[#E00000] w-[40%]" />
-                    )}
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}

frontend/components/saas/Telemetry.tsx

@@ -1,46 +0,0 @@
-"use client";
-
-import { Activity } from "lucide-react";
-import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
-
-export default function Telemetry() {
-  const data = Array.from({ length: 50 }).map((_, i) => ({
-    lap: i + 1,
-    ver: 80 + Math.random() * 2 + (i * 0.05), // Verstappen lap times
-    nor: 80.5 + Math.random() * 1.5 + (i * 0.04), // Norris lap times
-  }));
-
-  return (
-    <section className="px-6 max-w-6xl mx-auto mb-24">
-      <div className="flex items-center gap-2 mb-8">
-        <Activity className="w-5 h-5 text-white" />
-        <h2 className="text-2xl font-semibold text-white tracking-tight">Telemetry Analysis</h2>
-      </div>
-
-      <div className="bg-[#111111] border border-[#222222] rounded-xl p-8">
-        <div className="flex items-center justify-between mb-8">
-          <div className="text-sm text-[#888888]">Simulated Race Pace & Tire Degradation</div>
-          <div className="flex gap-4 text-sm font-medium">
-            <div className="flex items-center gap-2"><div className="w-3 h-3 rounded-full bg-[#0070F3]" /> Verstappen</div>
-            <div className="flex items-center gap-2"><div className="w-3 h-3 rounded-full bg-[#FF8700]" /> Norris</div>
-          </div>
-        </div>
-
-        <div className="h-[300px] w-full text-sm">
-          <ResponsiveContainer width="100%" height="100%">
-            <LineChart data={data} margin={{ top: 5, right: 0, left: -20, bottom: 0 }}>
-              <CartesianGrid strokeDasharray="3 3" stroke="#222222" vertical={false} />
-              <XAxis dataKey="lap" stroke="#888888" tick={{ fill: '#888888' }} />
-              <YAxis domain={['auto', 'auto']} stroke="#888888" tick={{ fill: '#888888' }} />
-              <Tooltip 
-                contentStyle={{ backgroundColor: '#000000', border: '1px solid #333333', color: '#fff', borderRadius: '8px' }}
-              />
-              <Line type="monotone" dataKey="ver" name="Verstappen (s)" stroke="#0070F3" strokeWidth={2} dot={false} />
-              <Line type="monotone" dataKey="nor" name="Norris (s)" stroke="#FF8700" strokeWidth={2} dot={false} />
-            </LineChart>
-          </ResponsiveContainer>
-        </div>
-      </div>
-    </section>
-  );
-}

frontend/components/saas/UpcomingGP.tsx

@@ -1,40 +0,0 @@
-"use client";
-
-import { CloudRain, MapPin, Trophy } from "lucide-react";
-
-export default function UpcomingGP() {
-  const predictions = [
-    { name: "Norris", prob: 42, color: "bg-[#FF8700]" },
-    { name: "Verstappen", prob: 31, color: "bg-[#0070F3]" },
-    { name: "Leclerc", prob: 17, color: "bg-[#E00000]" },
-    { name: "Piastri", prob: 10, color: "bg-[#FF8700]" },
-  ];
-
-  return (
-    <section id="upcoming-gp" className="px-6 max-w-6xl mx-auto mb-16 pt-16">
-      <div className="flex items-center gap-2 mb-8">
-        <Trophy className="w-5 h-5 text-white" />
-        <h2 className="text-2xl font-semibold text-white tracking-tight">Predicted Podium</h2>
-      </div>
-
-      <div className="bg-[#111111] border border-[#222222] rounded-xl p-8">
-        <div className="flex items-center gap-6 mb-8 text-sm text-[#888888] border-b border-[#222222] pb-6">
-          <span className="flex items-center gap-2"><MapPin className="w-4 h-4" /> Montreal, Canada</span>
-          <span className="flex items-center gap-2"><CloudRain className="w-4 h-4" /> 40% Rain Probability</span>
-        </div>
-
-        <div className="space-y-6">
-          {predictions.map((p, i) => (
-            <div key={i} className="flex items-center gap-6">
-              <div className="w-24 text-sm font-medium text-white">{p.name}</div>
-              <div className="flex-1 h-3 bg-[#222222] rounded-full overflow-hidden">
-                <div className={`h-full ${p.color} transition-all duration-1000 ease-out`} style={{ width: `${p.prob}%` }} />
-              </div>
-              <div className="w-12 text-right text-sm font-mono text-[#888888]">{p.prob}%</div>
-            </div>
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-}

frontend/components/ui/button.tsx

@@ -1,52 +0,0 @@
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium transition-colors outline-offset-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring/70 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground shadow-sm shadow-black/5 hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-destructive-foreground shadow-sm shadow-black/5 hover:bg-destructive/90",
-        outline:
-          "border border-input bg-background shadow-sm shadow-black/5 hover:bg-accent hover:text-accent-foreground",
-        secondary:
-          "bg-secondary text-secondary-foreground shadow-sm shadow-black/5 hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-lg px-3 text-xs",
-        lg: "h-10 rounded-lg px-8",
-        icon: "h-9 w-9",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
-);
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean;
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button";
-    return (
-      <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
-    );
-  },
-);
-Button.displayName = "Button";
-
-export { Button, buttonVariants };

frontend/components/ui/popover.tsx

@@ -1,40 +0,0 @@
-"use client";
-
-import * as PopoverPrimitive from "@radix-ui/react-popover";
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-const Popover = PopoverPrimitive.Root;
-
-const PopoverTrigger = PopoverPrimitive.Trigger;
-
-const PopoverAnchor = PopoverPrimitive.Anchor;
-
-const PopoverContent = React.forwardRef<
-  React.ElementRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {
-    showArrow?: boolean;
-  }
->(({ className, align = "center", sideOffset = 4, showArrow = false, ...props }, ref) => (
-  <PopoverPrimitive.Portal>
-    <PopoverPrimitive.Content
-      ref={ref}
-      align={align}
-      sideOffset={sideOffset}
-      className={cn(
-        "z-50 max-h-[var(--radix-popover-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-lg border border-border bg-popover p-4 text-popover-foreground shadow-lg shadow-black/5 outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className,
-      )}
-      {...props}
-    >
-      {props.children}
-      {showArrow && (
-        <PopoverPrimitive.Arrow className="-my-px fill-popover drop-shadow-[0_1px_0_hsl(var(--border))]" />
-      )}
-    </PopoverPrimitive.Content>
-  </PopoverPrimitive.Portal>
-));
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
-
-export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };

frontend/components/ui/ruixen-query-box.tsx

@@ -1,80 +0,0 @@
-"use client";
-
-import { SendHorizonal } from "lucide-react";
-import { useState } from "react";
-import { cn } from "@/lib/utils";
-import { Textarea } from "@/components/ui/textarea";
-import { useAutoResizeTextarea } from "@/hooks/use-auto-resize-textarea";
-
-export default function RuixenQueryBox({ onSubmit }: { onSubmit: (query: string) => void }) {
-  const { textareaRef, adjustHeight } = useAutoResizeTextarea({
-    minHeight: 56,
-    maxHeight: 220,
-  });
-
-  const [inputValue, setInputValue] = useState("");
-
-  const handleSend = () => {
-    if (!inputValue.trim()) return;
-    // Call the parent's submit handler instead of just console.log
-    onSubmit(inputValue);
-    setInputValue("");
-    adjustHeight(true);
-  };
-
-  return (
-    <div className="w-full py-6">
-      <div
-        className="relative w-full mx-auto bg-white rounded-2xl border shadow-sm overflow-hidden"
-        style={{
-          backgroundImage:
-            "url('https://pub-940ccf6255b54fa799a9b01050e6c227.r2.dev/ruixen_chat_gradient.png')",
-          backgroundSize: "cover",
-          backgroundPosition: "center",
-          borderColor: "var(--border-glass)"
-        }}
-      >
-        <Textarea
-          id="ai-textarea"
-          ref={textareaRef}
-          placeholder="Ask KRONECTOR about F1 stats, predictions, or telemetry..."
-          className={cn(
-            "w-full resize-none border-none bg-transparent",
-            "text-base text-white placeholder:text-gray-400",
-            "px-5 py-4 pr-14 rounded-2xl leading-[1.4]",
-            "transition-all focus-visible:ring-0 focus-visible:ring-offset-0",
-            "min-h-[56px]"
-          )}
-          value={inputValue}
-          onChange={(e) => {
-            setInputValue(e.target.value);
-            adjustHeight();
-          }}
-          onKeyDown={(e) => {
-            if (e.key === "Enter" && !e.shiftKey) {
-              e.preventDefault();
-              handleSend();
-            }
-          }}
-        />
-
-        {/* Icon Buttons */}
-        <div className="absolute bottom-3 right-3 flex items-center gap-2">
-          <button
-            type="button"
-            onClick={handleSend}
-            disabled={!inputValue.trim()}
-            className={cn(
-              "p-2 rounded-full transition-all duration-200 border",
-              inputValue.trim()
-                ? "bg-cyan-500 hover:bg-cyan-400 text-black border-transparent shadow-[0_0_15px_rgba(0,240,255,0.4)]"
-                : "bg-black/20 text-gray-500 border-white/5 cursor-not-allowed"
-            )}
-          >
-            <SendHorizonal className="w-4 h-4" />
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}

frontend/components/ui/textarea.tsx

@@ -1,21 +0,0 @@
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-const Textarea = React.forwardRef<HTMLTextAreaElement, React.ComponentProps<"textarea">>(
-  ({ className, ...props }, ref) => {
-    return (
-      <textarea
-        className={cn(
-          "flex w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground shadow-sm shadow-black/5 transition-shadow placeholder:text-muted-foreground/70 focus-visible:border-ring focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/20 disabled:cursor-not-allowed disabled:opacity-50",
-          className,
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  },
-);
-Textarea.displayName = "Textarea";
-
-export { Textarea };

frontend/desktop.html

@@ -0,0 +1,550 @@
+<!DOCTYPE html>
+
+<html class="dark" lang="en"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<title>Kronector | Formula 1 Intelligence</title>
+<!-- Fonts -->
+<link href="https://fonts.googleapis.com" rel="preconnect"/>
+<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;800&amp;family=JetBrains+Mono:wght@400;700&amp;display=swap" rel="stylesheet"/>
+<!-- Material Symbols -->
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<!-- Tailwind Config -->
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<script id="tailwind-config">
+        tailwind.config = {
+            darkMode: "class",
+            theme: {
+                extend: {
+                    "colors": {
+                        "surface-dim": "#131313",
+                        "on-primary-fixed": "#400200",
+                        "secondary": "#ddfcff",
+                        "primary": "#ffb4a7",
+                        "on-error-container": "#ffdad6",
+                        "surface-container": "#201f1f",
+                        "on-secondary-fixed": "#002022",
+                        "on-secondary-fixed-variant": "#004f54",
+                        "tertiary-container": "#909191",
+                        "inverse-on-surface": "#313030",
+                        "primary-fixed-dim": "#ffb4a7",
+                        "inverse-primary": "#be0e00",
+                        "on-tertiary-container": "#282a2a",
+                        "on-secondary-container": "#006a70",
+                        "tertiary-fixed-dim": "#c6c6c7",
+                        "outline": "#b08780",
+                        "outline-variant": "#5f3e39",
+                        "primary-container": "#ff553d",
+                        "on-primary-fixed-variant": "#910900",
+                        "secondary-fixed": "#74f5ff",
+                        "surface-container-lowest": "#0e0e0e",
+                        "on-surface-variant": "#eabcb4",
+                        "tertiary-fixed": "#e2e2e2",
+                        "surface-container-high": "#2a2a2a",
+                        "on-tertiary-fixed-variant": "#454747",
+                        "on-tertiary": "#2f3131",
+                        "on-tertiary-fixed": "#1a1c1c",
+                        "background": "#131313",
+                        "on-error": "#690005",
+                        "surface-variant": "#353534",
+                        "surface-bright": "#3a3939",
+                        "on-surface": "#e5e2e1",
+                        "surface-container-low": "#1c1b1b",
+                        "on-secondary": "#00363a",
+                        "primary-fixed": "#ffdad4",
+                        "on-primary-container": "#5b0300",
+                        "on-primary": "#670400",
+                        "surface": "#131313",
+                        "secondary-container": "#00f1fe",
+                        "on-background": "#e5e2e1",
+                        "inverse-surface": "#e5e2e1",
+                        "secondary-fixed-dim": "#00dbe7",
+                        "error-container": "#93000a",
+                        "surface-tint": "#ffb4a7",
+                        "tertiary": "#c6c6c7",
+                        "surface-container-highest": "#353534",
+                        "error": "#ffb4ab"
+                    },
+                    "borderRadius": {
+                        "DEFAULT": "0.25rem",
+                        "lg": "0.5rem",
+                        "xl": "0.75rem",
+                        "full": "9999px"
+                    },
+                    "spacing": {
+                        "margin-mobile": "16px",
+                        "container-max": "1440px",
+                        "margin-desktop": "32px",
+                        "gutter": "16px",
+                        "unit": "4px"
+                    },
+                    "fontFamily": {
+                        "headline-md": ["Inter"],
+                        "body-main": ["Inter"],
+                        "label-caps": ["JetBrains Mono"],
+                        "display-lg-mobile": ["Inter"],
+                        "body-fixed": ["JetBrains Mono"],
+                        "display-lg": ["Inter"]
+                    },
+                    "fontSize": {
+                        "headline-md": ["24px", { "lineHeight": "1.3", "letterSpacing": "-0.01em", "fontWeight": "700" }],
+                        "body-main": ["16px", { "lineHeight": "1.6", "letterSpacing": "0em", "fontWeight": "400" }],
+                        "label-caps": ["11px", { "lineHeight": "1", "letterSpacing": "0.1em", "fontWeight": "700" }],
+                        "display-lg-mobile": ["32px", { "lineHeight": "1.2", "letterSpacing": "-0.02em", "fontWeight": "800" }],
+                        "body-fixed": ["14px", { "lineHeight": "1.5", "letterSpacing": "0em", "fontWeight": "400" }],
+                        "display-lg": ["48px", { "lineHeight": "1.1", "letterSpacing": "-0.04em", "fontWeight": "800" }]
+                    }
+                }
+            }
+        }
+    </script>
+<style>
+        /* Custom Carbon UI Grid Pattern */
+        .bg-grid-pattern {
+            background-image: 
+                linear-gradient(to right, rgba(95, 62, 57, 0.05) 1px, transparent 1px),
+                linear-gradient(to bottom, rgba(95, 62, 57, 0.05) 1px, transparent 1px);
+            background-size: 32px 32px;
+        }
+        
+        /* Terminal Glow Effects */
+        .terminal-glow {
+            box-shadow: 0 0 15px rgba(0, 241, 254, 0.1);
+        }
+        
+        /* SHAP Bar Animation (Simulated) */
+        @keyframes shapExpand {
+            from { width: 0; }
+            to { width: var(--target-width); }
+        }
+        .shap-bar {
+            animation: shapExpand 1.5s ease-out forwards;
+        }
+        
+        /* Flow Diagram Pulse */
+        @keyframes linePulse {
+            0% { opacity: 0.3; }
+            50% { opacity: 1; }
+            100% { opacity: 0.3; }
+        }
+        .flow-line {
+            animation: linePulse 2s infinite;
+        }
+    </style>
+</head>
+<body class="bg-surface-dim text-on-surface font-body-main antialiased min-h-screen flex flex-col selection:bg-secondary-container selection:text-on-secondary-container">
+<!-- 1. TopNavBar -->
+<header class="bg-surface-dim/80 backdrop-blur-xl w-full flex justify-between items-center px-margin-desktop h-16 z-50 border-b border-outline-variant/30 sticky top-0">
+<div class="flex items-center gap-gutter">
+<span class="font-display-lg text-display-lg-mobile md:text-[24px] font-extrabold uppercase tracking-tighter text-on-surface">KRONECTOR</span>
+<div id="health-indicator" class="hidden md:flex items-center gap-2 px-3 py-1 bg-surface-container rounded-full border border-surface-variant cursor-pointer" title="Click to check API health">
+<span id="health-dot" class="w-2 h-2 rounded-full bg-secondary-fixed-dim animate-pulse"></span>
+<span id="health-label" class="font-label-caps text-label-caps text-secondary-fixed-dim uppercase">Checking...</span>
+</div>
+</div>
+<nav class="hidden md:flex gap-8">
+<a class="text-primary font-bold border-b-2 border-primary pb-1 font-label-caps text-label-caps hover:text-secondary-fixed transition-colors duration-200" href="#section-predictions">Predictions</a>
+<a class="text-on-surface-variant font-medium font-label-caps text-label-caps hover:text-secondary-fixed transition-colors duration-200" href="#section-features">Model Proof</a>
+<a class="text-on-surface-variant font-medium font-label-caps text-label-caps hover:text-secondary-fixed transition-colors duration-200" href="#section-architecture">Architecture</a>
+<a class="text-on-surface-variant font-medium font-label-caps text-label-caps hover:text-secondary-fixed transition-colors duration-200" href="#section-cta">API</a>
+</nav>
+<button id="nav-run-btn" class="bg-primary-container text-on-primary-container hover:bg-primary-container/80 transition-colors px-4 py-2 rounded font-label-caps text-label-caps hidden md:block active:scale-95">Run Prediction</button>
+<!-- Mobile Menu Icon (Placeholder) -->
+<button class="md:hidden text-on-surface">
+<span class="material-symbols-outlined">menu</span>
+</button>
+</header>
+<main class="flex-grow">
+<!-- 2. Hero Section -->
+<section id="section-predictions" class="relative pt-20 pb-16 px-margin-mobile md:px-margin-desktop max-w-container-max mx-auto overflow-hidden scroll-mt-20">
+<div class="absolute inset-0 bg-grid-pattern pointer-events-none"></div>
+<div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center relative z-10">
+<!-- Text Content -->
+<div class="lg:col-span-5 flex flex-col gap-6">
+<div class="inline-flex items-center gap-2 px-3 py-1 bg-surface-container border border-surface-variant rounded-full w-max">
+<span class="material-symbols-outlined text-secondary-fixed-dim text-sm" style="font-variation-settings: 'FILL' 1;">speed</span>
+<span class="font-label-caps text-label-caps text-on-surface-variant">Telemetry Ingestion Active</span>
+</div>
+<h1 class="font-display-lg text-display-lg-mobile md:text-display-lg text-on-surface leading-tight">Predict the race before lights out</h1>
+<p class="font-body-main text-body-main text-on-surface-variant">Kronector turns Formula 1 telemetry, qualifying pace, driver form, and model explainability into race-winning predictions before the grid forms.</p>
+<div class="flex flex-wrap gap-4 pt-4">
+<button id="hero-run-btn" class="bg-primary-container text-on-primary-container px-6 py-3 rounded hover:bg-primary/90 transition-colors font-headline-md text-[16px]">Run prediction</button>
+<button id="hero-proof-btn" class="border border-secondary-container text-secondary-fixed-dim px-6 py-3 rounded hover:bg-secondary-container/10 transition-colors font-body-fixed text-body-fixed flex items-center gap-2">
+                            View model proof
+                            <span class="material-symbols-outlined text-sm">arrow_forward</span>
+</button>
+</div>
+</div>
+<!-- Product Mock (Terminal) -->
+<div id="terminal" class="lg:col-span-7 bg-[#000000] border border-secondary-container rounded-lg terminal-glow flex flex-col overflow-hidden shadow-2xl">
+<!-- Terminal Header -->
+<div class="h-8 bg-surface-container flex items-center px-4 border-b border-surface-variant gap-2">
+<div class="w-3 h-3 rounded-full bg-surface-variant"></div>
+<div class="w-3 h-3 rounded-full bg-surface-variant"></div>
+<div class="w-3 h-3 rounded-full bg-surface-variant"></div>
+<span class="ml-4 font-body-fixed text-[10px] text-on-surface-variant">kronector-inference-node-01 — zsh</span>
+<span id="terminal-confidence" class="mr-4 font-label-caps text-[10px] text-secondary-fixed-dim">Confidence Interval: —</span><span id="terminal-gp-label" class="ml-auto font-label-caps text-[10px] text-primary-container">Ready for Query</span>
+</div>
+<div class="p-4 grid grid-cols-1 md:grid-cols-2 gap-px bg-surface-variant">
+<!-- Win Probability Pane -->
+<div id="pane-prediction" class="bg-[#000000] p-4 col-span-1 md:col-span-2 flex flex-col gap-2 overflow-x-auto custom-scrollbar">
+<h3 class="font-label-caps text-label-caps text-secondary-fixed-dim mb-2 uppercase border-b border-surface-variant pb-1">Win Probability Model</h3>
+<div id="prediction-content">
+<p class="font-body-fixed text-[12px] text-on-surface-variant/60 italic">Enter a query below to get a live prediction...</p>
+</div>
+</div>
+<!-- SHAP Pane -->
+<div id="pane-shap" class="bg-[#000000] p-4 flex flex-col gap-2 border-t border-surface-variant md:border-t-0 md:border-l">
+<h3 class="font-label-caps text-label-caps text-secondary-fixed-dim mb-2 uppercase border-b border-surface-variant pb-1">SHAP Features</h3>
+<div id="shap-content" class="flex flex-col gap-2 font-body-fixed text-[11px]">
+<p class="text-on-surface-variant/60 italic text-[11px]">Awaiting prediction...</p>
+</div>
+</div>
+<!-- Race Radio Pane -->
+<div id="pane-radio" class="bg-[#000000] p-4 col-span-1 md:col-span-2 border-t border-surface-variant">
+<h3 class="font-label-caps text-label-caps text-secondary-fixed-dim mb-2 uppercase">Agentic Race-Radio</h3>
+<div id="radio-content" class="font-body-fixed text-[12px] text-tertiary-fixed-dim flex flex-col gap-1 opacity-80">
+<div><span class="text-on-surface-variant/50">—</span> Waiting for agentic synthesis...</div>
+</div>
+</div>
+</div>
+<!-- Prompt Input -->
+<div class="bg-surface-container border-t border-surface-variant p-3 flex items-center gap-3">
+<span class="font-body-fixed text-secondary-fixed-dim">❯</span>
+<input id="terminal-input" class="bg-transparent border-none text-on-surface font-body-fixed text-[13px] flex-grow focus:ring-0 p-0" type="text" placeholder="Who wins the 2026 Canadian GP?" autocomplete="off"/>
+<button id="terminal-send" class="text-on-surface-variant hover:text-secondary-fixed-dim transition-colors">
+<span class="material-symbols-outlined text-sm">send</span>
+</button>
+</div>
+</div>
+</div>
+</section>
+<!-- 3. Metrics Strip -->
+<section id="section-metrics" class="border-y border-outline-variant/30 bg-surface-dim/50 py-8 px-margin-mobile md:px-margin-desktop">
+<div class="max-w-container-max mx-auto grid grid-cols-2 md:grid-cols-4 gap-8 divide-x divide-outline-variant/30">
+<div class="pl-4 border-l-2 border-secondary-fixed-dim flex flex-col gap-1">
+<span class="font-headline-md text-headline-md text-on-surface">71%</span>
+<span class="font-label-caps text-label-caps text-on-surface-variant uppercase">Winner Accuracy</span>
+</div>
+<div class="pl-4 md:pl-8 border-l-2 border-primary-container flex flex-col gap-1">
+<span class="font-headline-md text-headline-md text-on-surface">0.94</span>
+<span class="font-label-caps text-label-caps text-on-surface-variant uppercase">ROC AUC</span>
+</div>
+<div class="pl-4 md:pl-8 border-l-2 border-secondary-fixed-dim flex flex-col gap-1">
+<span class="font-headline-md text-headline-md text-on-surface">4-Agent</span>
+<span class="font-label-caps text-label-caps text-on-surface-variant uppercase">Pipeline</span>
+</div>
+<div class="pl-4 md:pl-8 border-l-2 border-primary-container flex flex-col gap-1">
+<span class="font-headline-md text-headline-md text-on-surface">&lt; 1s</span>
+<span class="font-label-caps text-label-caps text-on-surface-variant uppercase">Inference</span>
+</div>
+</div>
+</section>
+<!-- 4. Features Bento Grid -->
+<section id="section-features" class="py-20 px-margin-mobile md:px-margin-desktop max-w-container-max mx-auto scroll-mt-20">
+<div class="mb-12">
+<h2 class="font-headline-md text-[28px] text-on-surface mb-2">Technical Capabilities</h2>
+<p class="font-body-main text-on-surface-variant">Built for precision telemetry analysis and race strategy formulation.</p>
+</div>
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+<div class="bg-surface-container border border-surface-variant rounded-lg p-6 hover:border-secondary-container transition-colors group">
+<span class="material-symbols-outlined text-secondary-fixed-dim mb-4 text-[32px] group-hover:scale-110 transition-transform">monitoring</span>
+<h3 class="font-body-fixed text-[16px] text-on-surface mb-2 font-bold">Race Prediction</h3>
+<p class="font-body-main text-[14px] text-on-surface-variant leading-relaxed">Real-time probability updates as track conditions shift.</p>
+</div>
+<div class="bg-surface-container border border-surface-variant rounded-lg p-6 hover:border-primary-container transition-colors group">
+<span class="material-symbols-outlined text-primary-container mb-4 text-[32px] group-hover:scale-110 transition-transform">insights</span>
+<h3 class="font-body-fixed text-[16px] text-on-surface mb-2 font-bold">SHAP Explainability</h3>
+<p class="font-body-main text-[14px] text-on-surface-variant leading-relaxed">Understand the 'why' behind every model output.</p>
+</div>
+<div class="bg-surface-container border border-surface-variant rounded-lg p-6 hover:border-secondary-container transition-colors group">
+<span class="material-symbols-outlined text-secondary-fixed-dim mb-4 text-[32px] group-hover:scale-110 transition-transform">track_changes</span>
+<h3 class="font-body-fixed text-[16px] text-on-surface mb-2 font-bold">Drift Monitoring</h3>
+<p class="font-body-main text-[14px] text-on-surface-variant leading-relaxed">Live validation of model performance against track telemetry.</p>
+</div>
+<div class="bg-surface-container border border-surface-variant rounded-lg p-6 hover:border-primary-container transition-colors group">
+<span class="material-symbols-outlined text-primary-container mb-4 text-[32px] group-hover:scale-110 transition-transform">record_voice_over</span>
+<h3 class="font-body-fixed text-[16px] text-on-surface mb-2 font-bold">Agentic Race Radio</h3>
+<p class="font-body-main text-[14px] text-on-surface-variant leading-relaxed">LLM-synthesized strategic insights from multi-agent consensus.</p>
+</div>
+</div>
+</section>
+<!-- 5. Architecture Band -->
+<section id="section-architecture" class="py-16 bg-surface-container-lowest border-y border-outline-variant/20 overflow-x-auto custom-scrollbar scroll-mt-20">
+<div class="px-margin-mobile md:px-margin-desktop min-w-[800px] max-w-container-max mx-auto flex flex-col items-center">
+<h2 class="font-label-caps text-label-caps text-on-surface-variant uppercase mb-12 tracking-[0.2em]">Inference Architecture</h2>
+<div class="flex items-center gap-2"><div class="group flex flex-col items-center gap-2"><div class="px-4 py-3 bg-surface-container-high border border-outline-variant rounded-lg flex flex-col items-center justify-center min-w-[160px] hover:border-secondary-fixed-dim transition-colors cursor-default"><span class="text-[9px] font-label-caps text-secondary-fixed-dim mb-1 uppercase tracking-widest">Ingesting</span><span class="font-body-fixed text-[12px] text-on-surface text-center">FastF1 + Jolpica</span></div></div><div class="flex items-center"><div class="h-px w-4 bg-secondary-fixed-dim/30"></div><div class="h-px w-8 bg-secondary-fixed-dim flow-line"></div><span class="material-symbols-outlined text-secondary-fixed-dim text-[16px]">chevron_right</span></div><div class="group flex flex-col items-center gap-2"><div class="px-4 py-3 bg-surface-container-high border border-outline-variant rounded-lg flex flex-col items-center justify-center min-w-[160px] hover:border-secondary-fixed-dim transition-colors cursor-default"><span class="text-[9px] font-label-caps text-secondary-fixed-dim mb-1 uppercase tracking-widest">Normalized</span><span class="font-body-fixed text-[12px] text-on-surface text-center">25+ features</span></div></div><div class="flex items-center"><div class="h-px w-4 bg-secondary-fixed-dim/30"></div><div class="h-px w-8 bg-secondary-fixed-dim flow-line" style="animation-delay: 0.5s"></div><span class="material-symbols-outlined text-secondary-fixed-dim text-[16px]">chevron_right</span></div><div class="group flex flex-col items-center gap-2"><div class="px-4 py-3 bg-surface-container-high border border-primary-container rounded-lg flex flex-col items-center justify-center min-w-[160px] shadow-[0_0_10px_rgba(255,85,61,0.2)] hover:border-primary transition-colors cursor-default"><span class="text-[9px] font-label-caps text-primary-container mb-1 uppercase tracking-widest">Trained</span><span class="font-body-fixed text-[12px] text-primary-container font-bold text-center">LightGBM + SHAP</span></div></div><div class="flex items-center"><div class="h-px w-4 bg-secondary-fixed-dim/30"></div><div class="h-px w-8 bg-secondary-fixed-dim flow-line" style="animation-delay: 1s"></div><span class="material-symbols-outlined text-secondary-fixed-dim text-[16px]">chevron_right</span></div><div class="group flex flex-col items-center gap-2"><div class="px-4 py-3 bg-surface-container-high border border-outline-variant rounded-lg flex flex-col items-center justify-center min-w-[160px] hover:border-secondary-fixed-dim transition-colors cursor-default"><span class="text-[9px] font-label-caps text-secondary-fixed-dim mb-1 uppercase tracking-widest">Serving</span><span class="font-body-fixed text-[12px] text-on-surface text-center">FastAPI p95 &lt; 1s</span></div></div><div class="flex items-center"><div class="h-px w-4 bg-secondary-fixed-dim/30"></div><div class="h-px w-8 bg-secondary-fixed-dim flow-line" style="animation-delay: 1.5s"></div><span class="material-symbols-outlined text-secondary-fixed-dim text-[16px]">chevron_right</span></div><div class="group flex flex-col items-center gap-2"><div class="px-4 py-3 bg-surface-container-high border border-outline-variant rounded-lg flex flex-col items-center justify-center min-w-[160px] hover:border-secondary-fixed-dim transition-colors cursor-default"><span class="text-[9px] font-label-caps text-secondary-fixed-dim mb-1 uppercase tracking-widest">Synthesized</span><span class="font-body-fixed text-[12px] text-on-surface text-center">4-agent chain</span></div></div></div>
+</div>
+</section>
+<!-- 6. Final CTA -->
+<section id="section-cta" class="py-24 px-margin-mobile md:px-margin-desktop text-center relative scroll-mt-20">
+<div class="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-surface-container-high/30 via-surface-dim to-surface-dim pointer-events-none"></div>
+<div class="relative z-10 max-w-2xl mx-auto flex flex-col items-center">
+<span class="material-symbols-outlined text-secondary-fixed-dim text-[48px] mb-6">flag</span>
+<h2 class="font-display-lg text-display-lg-mobile md:text-[40px] text-on-surface mb-8">Ask the pit wall before race day</h2>
+<div class="flex flex-col sm:flex-row gap-4 justify-center">
+<button id="cta-launch-btn" class="bg-primary-container text-on-primary-container px-8 py-3 rounded hover:bg-primary/90 transition-colors font-headline-md text-[16px]">Launch predictor</button>
+<button id="cta-docs-btn" class="border border-outline-variant text-on-surface px-8 py-3 rounded hover:bg-surface-container transition-colors font-body-fixed text-[14px]">Read API docs</button>
+</div>
+</div>
+</section>
+</main>
+<!-- 7. Footer -->
+<footer class="bg-surface-container-lowest full-width py-12 px-margin-desktop border-t border-outline-variant/20 flex flex-col md:flex-row justify-between items-start gap-gutter mt-auto">
+<div class="flex flex-col gap-2">
+<span class="font-display-lg text-display-lg-mobile uppercase text-on-surface-variant opacity-50 md:text-[24px]">KRONECTOR</span>
+<p class="font-label-caps text-label-caps text-secondary-fixed-dim">KRONECTOR INTELLIGENCE. ALL SYSTEMS OPERATIONAL. © 2024</p>
+</div>
+<nav class="flex flex-wrap gap-6 mt-6 md:mt-0">
+<a id="footer-api-ref" class="font-body-fixed text-body-fixed text-on-surface-variant hover:text-primary transition-opacity cursor-pointer">API Reference</a>
+<a id="footer-docs" class="font-body-fixed text-body-fixed text-on-surface-variant hover:text-primary transition-opacity cursor-pointer">Documentation</a>
+<a id="footer-status" class="font-body-fixed text-body-fixed text-on-surface-variant hover:text-primary transition-opacity cursor-pointer">Status</a>
+<a class="font-body-fixed text-body-fixed text-on-surface-variant hover:text-primary transition-opacity" href="#">Terms</a>
+</nav>
+</footer>
+<!-- Toast Notification -->
+<div id="toast" class="fixed bottom-6 right-6 z-[100] px-5 py-3 rounded-lg font-body-fixed text-[13px] shadow-2xl border transition-all duration-300 opacity-0 translate-y-4 pointer-events-none" style="background:#201f1f;border-color:#5f3e39;color:#e5e2e1;"></div>
+
+<script>
+// ============================================================================
+// KRONECTOR Frontend — API Integration
+// ============================================================================
+
+const API_BASE = 'http://localhost:8000';
+
+// --- Utility ---
+function $(id) { return document.getElementById(id); }
+
+function showToast(msg, type = 'info') {
+    const t = $('toast');
+    t.textContent = msg;
+    t.style.borderColor = type === 'error' ? '#93000a' : type === 'success' ? '#00dbe7' : '#5f3e39';
+    t.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
+    t.classList.add('opacity-100', 'translate-y-0');
+    clearTimeout(t._timer);
+    t._timer = setTimeout(() => {
+        t.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
+        t.classList.remove('opacity-100', 'translate-y-0');
+    }, 4000);
+}
+
+function scrollToInput() {
+    const input = $('terminal-input');
+    input.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    setTimeout(() => input.focus(), 400);
+}
+
+// --- Smooth Scroll for nav links ---
+document.querySelectorAll('a[href^="#section-"]').forEach(a => {
+    a.addEventListener('click', e => {
+        e.preventDefault();
+        const target = document.querySelector(a.getAttribute('href'));
+        if (target) target.scrollIntoView({ behavior: 'smooth' });
+    });
+});
+
+// --- Health Check ---
+async function checkHealth() {
+    const dot = $('health-dot');
+    const label = $('health-label');
+    try {
+        const res = await fetch(`${API_BASE}/health`);
+        const data = await res.json();
+        if (data.status === 'healthy') {
+            dot.className = 'w-2 h-2 rounded-full bg-secondary-fixed-dim animate-pulse';
+            label.textContent = 'Live';
+            label.className = 'font-label-caps text-label-caps text-secondary-fixed-dim uppercase';
+        } else {
+            dot.className = 'w-2 h-2 rounded-full bg-primary-container animate-pulse';
+            label.textContent = 'Degraded';
+            label.className = 'font-label-caps text-label-caps text-primary-container uppercase';
+        }
+    } catch {
+        dot.className = 'w-2 h-2 rounded-full bg-error';
+        dot.classList.remove('animate-pulse');
+        label.textContent = 'Offline';
+        label.className = 'font-label-caps text-label-caps text-error uppercase';
+    }
+}
+
+// --- Prediction API ---
+let _isLoading = false;
+
+async function runPrediction(query) {
+    if (_isLoading) return;
+    if (!query || query.trim().length < 3) {
+        showToast('Query too short. Try something like: "Who wins the 2024 Monaco GP?"', 'error');
+        return;
+    }
+    _isLoading = true;
+    const sendBtn = $('terminal-send');
+    sendBtn.disabled = true;
+
+    // Show loading state in terminal
+    $('terminal-gp-label').textContent = 'Processing...';
+    $('terminal-confidence').textContent = 'Inference Running';
+    $('prediction-content').innerHTML = '<p class="font-body-fixed text-[12px] text-secondary-fixed-dim animate-pulse">⏳ Querying model pipeline...</p>';
+    $('shap-content').innerHTML = '<p class="text-on-surface-variant/60 italic text-[11px] animate-pulse">Computing SHAP values...</p>';
+    $('radio-content').innerHTML = '<div class="animate-pulse"><span class="text-secondary-container">[STRAT_AGENT]</span> Synthesizing response...</div>';
+
+    try {
+        const res = await fetch(`${API_BASE}/predict/f1`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ query: query.trim() })
+        });
+
+        if (!res.ok) {
+            const err = await res.json().catch(() => ({ detail: res.statusText }));
+            throw new Error(err.detail || `API Error ${res.status}`);
+        }
+
+        const data = await res.json();
+        renderPrediction(data);
+        showToast('Prediction complete ✓', 'success');
+    } catch (err) {
+        $('prediction-content').innerHTML = `<p class="font-body-fixed text-[12px] text-error">❌ ${err.message}</p>`;
+        $('shap-content').innerHTML = '<p class="text-error text-[11px]">Error</p>';
+        $('radio-content').innerHTML = `<div><span class="text-error">[ERROR]</span> ${err.message}</div>`;
+        $('terminal-gp-label').textContent = 'Error';
+        $('terminal-confidence').textContent = '';
+        showToast(err.message, 'error');
+    } finally {
+        _isLoading = false;
+        sendBtn.disabled = false;
+    }
+}
+
+function renderPrediction(data) {
+    const m = data.metadata;
+
+    // Terminal header
+    $('terminal-confidence').textContent = data.confidence_rating
+        ? `Confidence: ${data.confidence_rating}`
+        : `Win: ${data.win_probability}%`;
+    $('terminal-gp-label').textContent = `${m.season} Round ${m.round} — ${m.driver_name}`;
+
+    // Prediction pane — single driver result card
+    const probColor = data.win_probability > 50 ? 'text-primary-container' : data.win_probability > 20 ? 'text-secondary-fixed-dim' : 'text-on-surface-variant';
+    $('prediction-content').innerHTML = `
+        <table class="w-full text-left font-body-fixed text-[11px] border-separate border-spacing-y-1">
+            <thead class="text-on-surface-variant uppercase text-[9px] tracking-wider">
+                <tr>
+                    <th class="px-2 py-1">Driver</th>
+                    <th class="px-2 py-1">Team</th>
+                    <th class="px-2 py-1">Grid</th>
+                    <th class="px-2 py-1">Season</th>
+                    <th class="px-2 py-1">Round</th>
+                    <th class="px-2 py-1 text-right">Win %</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr class="bg-surface-container-low rounded">
+                    <td class="px-2 py-1.5 text-on-surface font-bold">${m.driver_name}</td>
+                    <td class="px-2 py-1.5">${m.team}</td>
+                    <td class="px-2 py-1.5">P${m.grid_position}</td>
+                    <td class="px-2 py-1.5">${m.season}</td>
+                    <td class="px-2 py-1.5">${m.round}</td>
+                    <td class="px-2 py-1.5 text-right ${probColor} font-bold text-[14px]">${data.win_probability}%</td>
+                </tr>
+            </tbody>
+        </table>
+    `;
+
+    // SHAP pane — top features as horizontal bars
+    const shapEl = $('shap-content');
+    if (data.shap_values && Object.keys(data.shap_values).length > 0) {
+        const entries = Object.entries(data.shap_values)
+            .map(([k, v]) => [k, parseFloat(v)])
+            .sort((a, b) => Math.abs(b[1]) - Math.abs(a[1]))
+            .slice(0, 6);
+        const maxAbs = Math.max(...entries.map(e => Math.abs(e[1])), 0.001);
+
+        shapEl.innerHTML = entries.map(([feat, val]) => {
+            const pct = Math.min(Math.abs(val) / maxAbs * 100, 100).toFixed(0);
+            const color = val >= 0 ? 'bg-primary-container' : 'bg-secondary-fixed-dim';
+            const textColor = val >= 0 ? 'text-primary-container' : 'text-secondary-fixed-dim';
+            const dir = val >= 0 ? 'right-0' : 'left-0';
+            return `
+                <div class="flex items-center gap-3">
+                    <span class="font-label-caps text-[9px] w-24 text-on-surface-variant/80 truncate" title="${feat}">${feat.replace(/_/g, ' ').toUpperCase()}</span>
+                    <div class="flex-1 h-2 bg-surface-variant rounded-sm relative">
+                        <div class="absolute ${dir} top-0 h-full ${color} rounded-sm shap-bar" style="--target-width:${pct}%;width:${pct}%"></div>
+                    </div>
+                    <span class="font-label-caps text-[9px] ${textColor} w-12 text-right">${val >= 0 ? '+' : ''}${val.toFixed(3)}</span>
+                </div>
+            `;
+        }).join('');
+    } else {
+        shapEl.innerHTML = '<p class="text-on-surface-variant/60 italic text-[11px]">No SHAP data available</p>';
+    }
+
+    // Race Radio pane — LLM explanation
+    const radioEl = $('radio-content');
+    if (data.llm_explanation) {
+        const now = new Date();
+        const ts = `${now.getHours().toString().padStart(2,'0')}:${now.getMinutes().toString().padStart(2,'0')}:${now.getSeconds().toString().padStart(2,'0')}`;
+        // Split explanation into lines for radio-style formatting
+        const lines = data.llm_explanation.split(/\n+/).filter(l => l.trim());
+        radioEl.innerHTML = lines.map((line, i) => {
+            const tag = i === 0 ? '[SYNTHESIS]' : '[STRAT_AGENT]';
+            const tagColor = i === 0 ? 'text-secondary-container' : 'text-secondary-fixed-dim';
+            return `<div><span class="text-on-surface-variant">${ts}</span> <span class="${tagColor}">${tag}</span> ${line.trim()}</div>`;
+        }).join('');
+    } else {
+        radioEl.innerHTML = '<div><span class="text-on-surface-variant/50">—</span> No synthesis available</div>';
+    }
+}
+
+// --- Button Wiring ---
+
+// "Run Prediction" buttons → scroll to terminal input
+$('nav-run-btn').addEventListener('click', scrollToInput);
+$('hero-run-btn').addEventListener('click', scrollToInput);
+$('cta-launch-btn').addEventListener('click', scrollToInput);
+
+// "View model proof" → scroll to features section
+$('hero-proof-btn').addEventListener('click', () => {
+    document.querySelector('#section-features').scrollIntoView({ behavior: 'smooth' });
+});
+
+// "Read API docs" → open Swagger
+$('cta-docs-btn').addEventListener('click', () => {
+    window.open(`${API_BASE}/docs`, '_blank');
+});
+
+// Terminal send button + Enter key
+$('terminal-send').addEventListener('click', () => {
+    runPrediction($('terminal-input').value);
+});
+$('terminal-input').addEventListener('keydown', (e) => {
+    if (e.key === 'Enter') runPrediction($('terminal-input').value);
+});
+
+// Health indicator click → re-check
+$('health-indicator').addEventListener('click', () => {
+    checkHealth();
+    showToast('Health check triggered', 'info');
+});
+
+// Footer links
+$('footer-api-ref').addEventListener('click', () => window.open(`${API_BASE}/docs`, '_blank'));
+$('footer-docs').addEventListener('click', () => window.open(`${API_BASE}/redoc`, '_blank'));
+$('footer-status').addEventListener('click', async () => {
+    try {
+        const res = await fetch(`${API_BASE}/health`);
+        const data = await res.json();
+        showToast(`Status: ${data.status} | Model: ${data.model_loaded ? '✓' : '✗'} | Data: ${data.data_available ? '✓' : '✗'}`, data.status === 'healthy' ? 'success' : 'error');
+    } catch {
+        showToast('API unreachable', 'error');
+    }
+});
+
+// --- Init ---
+checkHealth();
+// Re-check health every 30s
+setInterval(checkHealth, 30000);
+</script>
+</body></html>

frontend/eslint.config.mjs

@@ -1,16 +0,0 @@
-import { defineConfig, globalIgnores } from "eslint/config";
-import nextVitals from "eslint-config-next/core-web-vitals";
-
-const eslintConfig = defineConfig([
-  ...nextVitals,
-  // Override default ignores of eslint-config-next.
-  globalIgnores([
-    // Default ignores of eslint-config-next:
-    ".next/**",
-    "out/**",
-    "build/**",
-    "next-env.d.ts",
-  ]),
-]);
-
-export default eslintConfig;

frontend/hooks/use-auto-resize-textarea.ts

@@ -1,57 +0,0 @@
-import { useEffect, useRef, useCallback } from "react";
-
-interface UseAutoResizeTextareaProps {
-    minHeight: number;
-    maxHeight?: number;
-}
-
-export function useAutoResizeTextarea({
-    minHeight,
-    maxHeight,
-}: UseAutoResizeTextareaProps) {
-    const textareaRef = useRef<HTMLTextAreaElement>(null);
-
-    const adjustHeight = useCallback(
-        (reset?: boolean) => {
-            const textarea = textareaRef.current;
-            if (!textarea) return;
-
-            if (reset) {
-                textarea.style.height = `${minHeight}px`;
-                return;
-            }
-
-            // Temporarily shrink to get the right scrollHeight
-            textarea.style.height = `${minHeight}px`;
-
-            // Calculate new height
-            const newHeight = Math.max(
-                minHeight,
-                Math.min(
-                    textarea.scrollHeight,
-                    maxHeight ?? Number.POSITIVE_INFINITY
-                )
-            );
-
-            textarea.style.height = `${newHeight}px`;
-        },
-        [minHeight, maxHeight]
-    );
-
-    useEffect(() => {
-        // Set initial height
-        const textarea = textareaRef.current;
-        if (textarea) {
-            textarea.style.height = `${minHeight}px`;
-        }
-    }, [minHeight]);
-
-    // Adjust height on window resize
-    useEffect(() => {
-        const handleResize = () => adjustHeight();
-        window.addEventListener("resize", handleResize);
-        return () => window.removeEventListener("resize", handleResize);
-    }, [adjustHeight]);
-
-    return { textareaRef, adjustHeight };
-}

frontend/index.html

@@ -0,0 +1,33 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Kronector | F1 Intelligence</title>
+    <style>
+      body {
+        margin: 0;
+        min-height: 100vh;
+        display: grid;
+        place-items: center;
+        background: #0a0a0a;
+        color: #f4f4f4;
+        font-family: 'Inter', Arial, sans-serif;
+      }
+      a { color: #00f2ff; }
+    </style>
+    <script>
+      // Auto-redirect based on viewport width
+      (function() {
+        var target = window.innerWidth <= 768 ? 'mobile.html' : 'desktop.html';
+        window.location.replace(target);
+      })();
+    </script>
+  </head>
+  <body>
+    <main>
+      <p>Opening Kronector...</p>
+      <p><a href="desktop.html">Desktop</a> · <a href="mobile.html">Mobile</a></p>
+    </main>
+  </body>
+</html>

frontend/jsconfig.json

@@ -1,7 +0,0 @@
-{
-  "compilerOptions": {
-    "paths": {
-      "@/*": ["./*"]
-    }
-  }
-}

frontend/lib/utils.ts

@@ -1,6 +0,0 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}

frontend/mobile.html

@@ -0,0 +1,541 @@
+<!DOCTYPE html>
+
+<html class="dark" lang="en"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0, viewport-fit=cover" name="viewport"/>
+<title>KRONECTOR | F1 Intelligence</title>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;800&amp;family=JetBrains+Mono:wght@400;700&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<script id="tailwind-config">
+        tailwind.config = {
+            darkMode: "class",
+            theme: {
+                extend: {
+                    "colors": {
+                        "surface": "#131313",
+                        "primary": "#ffb4a7",
+                        "on-surface-variant": "#eabcb4",
+                        "on-primary-container": "#5b0300",
+                        "secondary-fixed": "#74f5ff",
+                        "primary-fixed-dim": "#ffb4a7",
+                        "surface-tint": "#ffb4a7",
+                        "secondary": "#ddfcff",
+                        "secondary-fixed-dim": "#00dbe7",
+                        "on-tertiary-container": "#282a2a",
+                        "on-surface": "#e5e2e1",
+                        "surface-container-lowest": "#0e0e0e",
+                        "on-secondary-container": "#006a70",
+                        "inverse-primary": "#be0e00",
+                        "on-tertiary-fixed-variant": "#454747",
+                        "on-secondary-fixed": "#002022",
+                        "background": "#131313",
+                        "secondary-container": "#00f1fe",
+                        "on-primary-fixed": "#400200",
+                        "surface-container-high": "#2a2a2a",
+                        "surface-container-highest": "#353534",
+                        "tertiary-fixed-dim": "#c6c6c7",
+                        "primary-container": "#ff553d",
+                        "on-background": "#e5e2e1",
+                        "surface-container": "#201f1f",
+                        "error": "#ffb4ab",
+                        "surface-dim": "#131313",
+                        "surface-bright": "#3a3939",
+                        "on-primary": "#670400",
+                        "on-secondary-fixed-variant": "#004f54",
+                        "tertiary-fixed": "#e2e2e2",
+                        "tertiary": "#c6c6c7",
+                        "surface-variant": "#353534",
+                        "on-tertiary-fixed": "#1a1c1c",
+                        "on-primary-fixed-variant": "#910900",
+                        "surface-container-low": "#1c1b1b",
+                        "primary-fixed": "#ffdad4",
+                        "outline-variant": "#5f3e39",
+                        "error-container": "#93000a",
+                        "tertiary-container": "#909191",
+                        "on-tertiary": "#2f3131",
+                        "inverse-surface": "#e5e2e1",
+                        "inverse-on-surface": "#313030",
+                        "outline": "#b08780",
+                        "on-error": "#690005",
+                        "on-error-container": "#ffdad6",
+                        "on-secondary": "#00363a",
+                        "race-red": "#ff1801",
+                        "neon-cyan": "#00dbe7"
+                    },
+                    "borderRadius": {
+                        "DEFAULT": "0.25rem",
+                        "lg": "0.5rem",
+                        "xl": "0.75rem",
+                        "full": "9999px"
+                    },
+                    "spacing": {
+                        "container-max": "1440px",
+                        "unit": "4px",
+                        "margin-desktop": "32px",
+                        "margin-mobile": "16px",
+                        "gutter": "16px"
+                    },
+                    "fontFamily": {
+                        "headline-md": ["Inter"],
+                        "label-caps": ["JetBrains Mono"],
+                        "display-lg-mobile": ["Inter"],
+                        "body-fixed": ["JetBrains Mono"],
+                        "display-lg": ["Inter"],
+                        "body-main": ["Inter"]
+                    },
+                    "fontSize": {
+                        "headline-md": ["24px", {"lineHeight": "1.3", "letterSpacing": "-0.01em", "fontWeight": "700"}],
+                        "label-caps": ["11px", {"lineHeight": "1", "letterSpacing": "0.1em", "fontWeight": "700"}],
+                        "display-lg-mobile": ["32px", {"lineHeight": "1.2", "letterSpacing": "-0.02em", "fontWeight": "800"}],
+                        "body-fixed": ["14px", {"lineHeight": "1.5", "letterSpacing": "0em", "fontWeight": "400"}],
+                        "display-lg": ["48px", {"lineHeight": "1.1", "letterSpacing": "-0.04em", "fontWeight": "800"}],
+                        "body-main": ["16px", {"lineHeight": "1.6", "letterSpacing": "0em", "fontWeight": "400"}]
+                    }
+                },
+            },
+        }
+    </script>
+<style>
+        body { background-color: #0A0A0A; color: #e5e2e1; }
+        .carbon-border { border: 1px solid #2D2D2D; }
+        .metric-accent-red { border-left: 2px solid #ff1801; }
+        .metric-accent-cyan { border-left: 2px solid #00dbe7; }
+        .terminal-header { background: linear-gradient(to bottom, #1A1A1A, #111111); }
+        .zebra-list div:nth-child(even) { background-color: #151515; }
+        .pulse-node { animation: pulse 2s infinite; }
+        @keyframes pulse { 0% { opacity: 0.5; } 50% { opacity: 1; } 100% { opacity: 0.5; } }
+    </style>
+<style>
+    body {
+      min-height: max(884px, 100dvh);
+    }
+  </style>
+  </head>
+<body class="font-body-main selection:bg-race-red selection:text-white overflow-x-hidden">
+<!-- TopAppBar -->
+<header class="fixed top-0 w-full z-50 backdrop-blur-md bg-surface/80 border-b border-outline-variant flex justify-between items-center px-margin-mobile h-14 w-full">
+<div class="flex items-center gap-3">
+<span class="material-symbols-outlined text-primary" data-icon="menu">menu</span>
+<span class="font-headline-md text-headline-md-mobile font-black tracking-tighter text-primary">KRONECTOR</span>
+</div>
+<div class="w-8 h-8 rounded-full overflow-hidden border border-outline-variant">
+<img alt="Engineer Profile" class="w-full h-full object-cover" data-alt="A professional headshot of a technical Formula 1 race engineer wearing high-end headphones in a dark, data-driven pit wall environment. The lighting is dominated by glowing cyan telemetry screens reflecting off their glasses, creating a sharp, high-performance motorsport atmosphere with a focus on deep blacks and vibrant technical accents." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDdxk5F6y5JOwsj3vJFZHGg2ZIMdMP5AxXvxwGJhvFasyBsskV0kwijwXRDP9uIJGM4j_RLw-gxyg_3JVGPtd6ajb3-RhxilueEqcohiFz4dlFkeudrBbfZSsCrIHVyym6UUDf-9fYc4f1xuCRZD5mzdJKRwrJW128xlvWZaJ5Gc_-oM8ZsFJR0iedjp17YpWlMghL-7gr8sIKG6dZc8KknBJG3ZkiLE37hUyoCjHcRAAl6ZSJne9nMJADed0fFMCrTlk6bGdUsSqi8"/>
+</div>
+</header>
+<main class="pt-20 pb-24 px-margin-mobile flex flex-col gap-10">
+<!-- Hero Section -->
+<section id="m-section-hero" class="flex flex-col gap-6">
+<div class="space-y-4">
+<h1 class="font-display-lg-mobile text-display-lg-mobile leading-tight">
+                    Predict the race before <span class="text-race-red">lights out</span>
+</h1>
+<p class="font-body-main text-on-surface-variant leading-relaxed">
+                    Kronector turns Formula 1 telemetry, qualifying pace, driver form, and model explainability into race-winning predictions before the grid forms.
+                </p>
+</div>
+<div class="flex flex-col gap-3">
+<button id="m-hero-run-btn" class="bg-race-red text-white font-headline-md py-4 rounded-lg flex items-center justify-center gap-2 active:scale-95 transition-transform">
+                    Run prediction
+                </button>
+<button id="m-hero-proof-btn" class="border border-neon-cyan text-neon-cyan font-label-caps py-4 rounded-lg flex items-center justify-center gap-2 uppercase tracking-widest active:scale-95 transition-transform">
+                    View model proof
+                </button>
+</div>
+</section>
+<!-- Prediction Terminal -->
+<section id="m-section-terminal" class="carbon-border rounded-lg bg-[#111111] overflow-hidden flex flex-col scroll-mt-20">
+<div class="terminal-header p-3 border-b border-[#2D2D2D] flex justify-between items-center">
+<div class="flex gap-1.5">
+<div class="w-2.5 h-2.5 rounded-full bg-[#333]"></div>
+<div class="w-2.5 h-2.5 rounded-full bg-[#333]"></div>
+<div class="w-2.5 h-2.5 rounded-full bg-[#333]"></div>
+</div>
+<span id="m-terminal-label" class="font-label-caps text-[10px] text-on-surface-variant/60 uppercase">READY FOR QUERY</span>
+</div>
+<!-- Conditions Bar -->
+<div id="m-conditions-bar" class="grid grid-cols-3 divide-x divide-[#2D2D2D] border-b border-[#2D2D2D]">
+<div class="p-3 flex flex-col gap-1">
+<span class="font-label-caps text-[9px] text-on-surface-variant/50">DRIVER</span>
+<span id="m-cond-driver" class="font-body-fixed text-neon-cyan">—</span>
+</div>
+<div class="p-3 flex flex-col gap-1">
+<span class="font-label-caps text-[9px] text-on-surface-variant/50">TEAM</span>
+<span id="m-cond-team" class="font-body-fixed text-on-surface">—</span>
+</div>
+<div class="p-3 flex flex-col gap-1">
+<span class="font-label-caps text-[9px] text-on-surface-variant/50">WIN %</span>
+<span id="m-cond-prob" class="font-body-fixed text-race-red">—</span>
+</div>
+</div>
+<!-- Driver List -->
+<div id="m-driver-list" class="zebra-list flex flex-col">
+<div class="p-4 flex items-center justify-center">
+<p class="font-body-fixed text-[12px] text-on-surface-variant/60 italic">Submit a query to see predictions...</p>
+</div>
+</div>
+<!-- SHAP Bars -->
+<div id="m-shap-pane" class="p-4 bg-[#0D0D0D] border-t border-[#2D2D2D] flex flex-col gap-3">
+<span class="font-label-caps text-[10px] text-on-surface-variant/60">SHAP FEATURE INFLUENCE</span>
+<div id="m-shap-content" class="space-y-2">
+<p class="font-body-fixed text-[11px] text-on-surface-variant/50 italic">Awaiting prediction...</p>
+</div>
+</div>
+<!-- Radio Feed -->
+<div id="m-radio-pane" class="p-4 bg-[#080808] border-t border-[#2D2D2D]">
+<div class="flex items-center gap-2 mb-2">
+<span class="material-symbols-outlined text-[14px] text-race-red" data-icon="settings_input_antenna">settings_input_antenna</span>
+<span class="font-label-caps text-[10px] text-race-red">LATEST SYNTHESIS</span>
+</div>
+<p id="m-radio-content" class="font-body-fixed text-[12px] text-on-surface/90 italic leading-relaxed">
+                    Waiting for agentic synthesis...
+                </p>
+</div>
+<!-- Input Bar -->
+<div class="p-3 bg-[#1A1A1A] border-t border-[#2D2D2D] flex gap-2 items-center">
+<input id="m-terminal-input" class="flex-1 bg-black border border-[#2D2D2D] rounded-lg px-3 py-2 text-xs font-body-fixed focus:border-neon-cyan focus:ring-0" placeholder="Who wins the 2026 Canadian GP?" type="text" autocomplete="off"/>
+<button id="m-terminal-send" class="w-8 h-8 flex items-center justify-center bg-race-red rounded-lg">
+<span class="material-symbols-outlined text-white text-sm" data-icon="send">send</span>
+</button>
+</div>
+</section>
+<!-- Metrics Grid -->
+<section id="m-section-metrics" class="grid grid-cols-2 gap-4 scroll-mt-20">
+<div class="carbon-border rounded-lg p-4 metric-accent-cyan flex flex-col gap-1">
+<span class="font-body-fixed font-bold text-lg">71%</span>
+<span class="font-label-caps text-[9px] text-on-surface-variant/60 uppercase">Winner Accuracy</span>
+</div>
+<div class="carbon-border rounded-lg p-4 metric-accent-red flex flex-col gap-1">
+<span class="font-body-fixed font-bold text-lg">0.94</span>
+<span class="font-label-caps text-[9px] text-on-surface-variant/60 uppercase">ROC AUC</span>
+</div>
+<div class="carbon-border rounded-lg p-4 metric-accent-cyan flex flex-col gap-1">
+<span class="font-body-fixed font-bold text-lg">4-Agent</span>
+<span class="font-label-caps text-[9px] text-on-surface-variant/60 uppercase">Pipeline</span>
+</div>
+<div class="carbon-border rounded-lg p-4 metric-accent-red flex flex-col gap-1">
+<span class="font-body-fixed font-bold text-lg">&lt; 1s</span>
+<span class="font-label-caps text-[9px] text-on-surface-variant/60 uppercase">Inference</span>
+</div>
+</section>
+<!-- Technical Capabilities -->
+<section id="m-section-capabilities" class="flex flex-col gap-4 scroll-mt-20">
+<h2 class="font-label-caps text-on-surface-variant/50 uppercase tracking-widest text-[10px]">Technical Core</h2>
+<div class="space-y-3">
+<div class="carbon-border rounded-lg p-5 flex gap-4 items-start">
+<span class="material-symbols-outlined text-race-red" data-icon="query_stats">query_stats</span>
+<div class="space-y-1">
+<h3 class="font-headline-md text-sm text-on-surface">Race Prediction</h3>
+<p class="font-body-fixed text-xs text-on-surface-variant leading-normal">XGBoost &amp; LSTM hybrid ensemble trained on 20 years of historical race data and live lap telemetry.</p>
+</div>
+</div>
+<div class="carbon-border rounded-lg p-5 flex gap-4 items-start">
+<span class="material-symbols-outlined text-neon-cyan" data-icon="explain">expand</span>
+<div class="space-y-1">
+<h3 class="font-headline-md text-sm text-on-surface">SHAP Explainability</h3>
+<p class="font-body-fixed text-xs text-on-surface-variant leading-normal">Deep-dive into every prediction. Understand exactly how tire age or air pressure influenced the model's output.</p>
+</div>
+</div>
+<div class="carbon-border rounded-lg p-5 flex gap-4 items-start">
+<span class="material-symbols-outlined text-race-red" data-icon="monitoring">monitoring</span>
+<div class="space-y-1">
+<h3 class="font-headline-md text-sm text-on-surface">Drift Monitoring</h3>
+<p class="font-body-fixed text-xs text-on-surface-variant leading-normal">Real-time detection of concept drift as track conditions evolve beyond the initial training baseline.</p>
+</div>
+</div>
+<div class="carbon-border rounded-lg p-5 flex gap-4 items-start">
+<span class="material-symbols-outlined text-neon-cyan" data-icon="speaker_group">speaker_group</span>
+<div class="space-y-1">
+<h3 class="font-headline-md text-sm text-on-surface">Agentic Race Radio</h3>
+<p class="font-body-fixed text-xs text-on-surface-variant leading-normal">LLM-powered reasoning agents synthesize raw model outputs into strategic audio/text directives.</p>
+</div>
+</div>
+</div>
+</section>
+<!-- Architecture Flow -->
+<section id="m-section-architecture" class="flex flex-col gap-6 py-4 scroll-mt-20">
+<h2 class="font-label-caps text-on-surface-variant/50 uppercase tracking-widest text-[10px] text-center">Pipeline Architecture</h2>
+<div class="relative flex flex-col items-center gap-12">
+<!-- Vertical Line Background -->
+<div class="absolute h-full w-[1.5px] bg-gradient-to-b from-race-red via-neon-cyan to-race-red opacity-30 z-0"></div>
+<!-- Node 1 -->
+<div class="z-10 bg-surface carbon-border p-4 rounded-lg w-full flex items-center justify-between">
+<div class="flex items-center gap-3">
+<div class="w-2 h-2 rounded-full bg-neon-cyan pulse-node"></div>
+<span class="font-label-caps text-xs">FASTF1 + JOLPICA</span>
+</div>
+<span class="bg-on-secondary-fixed-variant text-secondary-fixed text-[9px] px-2 py-0.5 rounded font-label-caps">INGESTING</span>
+</div>
+<!-- Node 2 -->
+<div class="z-10 bg-surface carbon-border p-4 rounded-lg w-full flex items-center justify-between">
+<div class="flex items-center gap-3">
+<div class="w-2 h-2 rounded-full bg-white/20"></div>
+<span class="font-label-caps text-xs">25+ FEATURE VECTOR</span>
+</div>
+<span class="bg-surface-container-highest text-on-surface-variant text-[9px] px-2 py-0.5 rounded font-label-caps">NORMALIZED</span>
+</div>
+<!-- Node 3 -->
+<div class="z-10 bg-surface carbon-border p-4 rounded-lg w-full flex items-center justify-between">
+<div class="flex items-center gap-3">
+<div class="w-2 h-2 rounded-full bg-race-red pulse-node"></div>
+<span class="font-label-caps text-xs">ENSEMBLE BACKBONE</span>
+</div>
+<span class="bg-error-container text-error text-[9px] px-2 py-0.5 rounded font-label-caps">TRAINED</span>
+</div>
+<!-- Node 4 -->
+<div class="z-10 bg-surface carbon-border p-4 rounded-lg w-full flex items-center justify-between">
+<div class="flex items-center gap-3">
+<div class="w-2 h-2 rounded-full bg-neon-cyan"></div>
+<span class="font-label-caps text-xs">TRITON INFERENCE</span>
+</div>
+<span class="bg-on-secondary-container text-secondary-container text-[9px] px-2 py-0.5 rounded font-label-caps">SERVING</span>
+</div>
+<!-- Node 5 -->
+<div class="z-10 bg-surface carbon-border p-4 rounded-lg w-full flex items-center justify-between">
+<div class="flex items-center gap-3">
+<div class="w-2 h-2 rounded-full bg-white/50"></div>
+<span class="font-label-caps text-xs">LLM PIT-WALL</span>
+</div>
+<span class="bg-surface-container-high text-on-surface text-[9px] px-2 py-0.5 rounded font-label-caps">SYNTHESIZED</span>
+</div>
+</div>
+</section>
+<!-- Final CTA -->
+<section id="m-section-cta" class="bg-surface-container-low rounded-lg p-8 text-center flex flex-col gap-6 border border-outline-variant scroll-mt-20">
+<div class="space-y-2">
+<h2 class="font-headline-md text-display-lg-mobile">Ask the pit wall before race day</h2>
+<p class="font-body-main text-on-surface-variant text-sm">Deploy the most advanced prediction suite in open-source motorsport intelligence.</p>
+</div>
+<div class="flex flex-col gap-3">
+<button id="m-cta-launch-btn" class="bg-race-red text-white font-headline-md py-4 rounded-lg active:scale-95 transition-transform">Launch predictor</button>
+<button id="m-cta-docs-btn" class="text-neon-cyan font-label-caps py-2 hover:underline">Read API docs</button>
+</div>
+</section>
+</main>
+<!-- Footer -->
+<footer class="w-full py-8 mb-16 bg-surface-container-low border-t border-outline-variant flex flex-col items-center gap-4 px-margin-mobile text-center">
+<span class="font-label-caps text-label-caps text-primary">KRONECTOR INTEL</span>
+<div class="flex gap-6">
+<a class="text-on-tertiary-container hover:text-on-surface font-body-fixed text-[11px] uppercase tracking-tighter" href="#">Terms</a>
+<a class="text-on-tertiary-container hover:text-on-surface font-body-fixed text-[11px] uppercase tracking-tighter" href="#">Privacy</a>
+<a id="m-footer-status" class="text-on-tertiary-container hover:text-on-surface font-body-fixed text-[11px] uppercase tracking-tighter cursor-pointer">API_Status</a>
+<a id="m-footer-docs" class="text-on-tertiary-container hover:text-on-surface font-body-fixed text-[11px] uppercase tracking-tighter cursor-pointer">System_Log</a>
+</div>
+<p class="font-body-fixed text-[10px] text-on-surface-variant opacity-60">© 2024 KRONECTOR INTEL. ALL SYSTEMS NOMINAL.</p>
+</footer>
+<!-- BottomNavBar -->
+<nav class="fixed bottom-0 w-full z-50 backdrop-blur-lg bg-surface/90 border-t border-outline-variant flex justify-around items-center h-16 px-4 pb-safe md:hidden">
+<div id="m-nav-dashboard" class="flex flex-col items-center justify-center text-secondary-fixed-dim bg-secondary-container/20 rounded-xl p-2 active:scale-90 duration-150 cursor-pointer">
+<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
+</div>
+<div id="m-nav-analytics" class="flex flex-col items-center justify-center text-on-surface-variant p-2 hover:text-primary transition-colors active:scale-90 duration-150 cursor-pointer">
+<span class="material-symbols-outlined" data-icon="analytics">analytics</span>
+</div>
+<div id="m-nav-radio" class="flex flex-col items-center justify-center text-on-surface-variant p-2 hover:text-primary transition-colors active:scale-90 duration-150 cursor-pointer">
+<span class="material-symbols-outlined" data-icon="vibration">vibration</span>
+</div>
+<div id="m-nav-api" class="flex flex-col items-center justify-center text-on-surface-variant p-2 hover:text-primary transition-colors active:scale-90 duration-150 cursor-pointer">
+<span class="material-symbols-outlined" data-icon="account_circle">account_circle</span>
+</div>
+</nav>
+<!-- Toast Notification -->
+<div id="m-toast" class="fixed bottom-20 left-4 right-4 z-[100] px-4 py-3 rounded-lg font-body-fixed text-[12px] shadow-2xl border transition-all duration-300 opacity-0 translate-y-4 pointer-events-none text-center" style="background:#201f1f;border-color:#5f3e39;color:#e5e2e1;"></div>
+
+<script>
+// ============================================================================
+// KRONECTOR Mobile — API Integration
+// ============================================================================
+
+const API_BASE = 'http://localhost:8000';
+
+// --- Utility ---
+function $(id) { return document.getElementById(id); }
+
+function showToast(msg, type = 'info') {
+    const t = $('m-toast');
+    t.textContent = msg;
+    t.style.borderColor = type === 'error' ? '#93000a' : type === 'success' ? '#00dbe7' : '#5f3e39';
+    t.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
+    t.classList.add('opacity-100', 'translate-y-0');
+    clearTimeout(t._timer);
+    t._timer = setTimeout(() => {
+        t.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
+        t.classList.remove('opacity-100', 'translate-y-0');
+    }, 4000);
+}
+
+function scrollToInput() {
+    const input = $('m-terminal-input');
+    input.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    setTimeout(() => input.focus(), 400);
+}
+
+// --- Prediction API ---
+let _isLoading = false;
+
+async function runPrediction(query) {
+    if (_isLoading) return;
+    if (!query || query.trim().length < 3) {
+        showToast('Query too short — try a full question', 'error');
+        return;
+    }
+    _isLoading = true;
+    $('m-terminal-send').disabled = true;
+
+    // Loading state
+    $('m-terminal-label').textContent = 'PROCESSING...';
+    $('m-cond-driver').textContent = '...';
+    $('m-cond-team').textContent = '...';
+    $('m-cond-prob').textContent = '...';
+    $('m-driver-list').innerHTML = '<div class="p-4 flex items-center justify-center"><p class="font-body-fixed text-[12px] text-neon-cyan animate-pulse">⏳ Querying pipeline...</p></div>';
+    $('m-shap-content').innerHTML = '<p class="font-body-fixed text-[11px] text-on-surface-variant/50 animate-pulse">Computing...</p>';
+    $('m-radio-content').textContent = 'Synthesizing response...';
+
+    try {
+        const res = await fetch(`${API_BASE}/predict/f1`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ query: query.trim() })
+        });
+
+        if (!res.ok) {
+            const err = await res.json().catch(() => ({ detail: res.statusText }));
+            throw new Error(err.detail || `API Error ${res.status}`);
+        }
+
+        const data = await res.json();
+        renderMobilePrediction(data);
+        showToast('Prediction complete ✓', 'success');
+    } catch (err) {
+        $('m-terminal-label').textContent = 'ERROR';
+        $('m-driver-list').innerHTML = `<div class="p-4"><p class="font-body-fixed text-[12px] text-race-red">❌ ${err.message}</p></div>`;
+        $('m-shap-content').innerHTML = '<p class="text-race-red text-[11px]">Error</p>';
+        $('m-radio-content').textContent = err.message;
+        showToast(err.message, 'error');
+    } finally {
+        _isLoading = false;
+        $('m-terminal-send').disabled = false;
+    }
+}
+
+function renderMobilePrediction(data) {
+    const m = data.metadata;
+
+    // Header label
+    $('m-terminal-label').textContent = `${m.season} R${m.round} // ${m.driver_name.toUpperCase()}`;
+
+    // Conditions bar
+    $('m-cond-driver').textContent = m.driver_name;
+    $('m-cond-team').textContent = m.team;
+    $('m-cond-prob').textContent = `${data.win_probability}%`;
+
+    // Driver card in list
+    const prob = data.win_probability;
+    const barColor = prob > 40 ? 'bg-race-red' : prob > 15 ? 'bg-neon-cyan' : 'bg-white/40';
+    const textColor = prob > 40 ? 'text-race-red' : prob > 15 ? 'text-neon-cyan' : 'text-on-surface';
+    const borderColor = prob > 40 ? 'border-race-red' : prob > 15 ? 'border-neon-cyan' : 'border-[#555]';
+
+    $('m-driver-list').innerHTML = `
+        <div class="p-3 flex justify-between items-center border-l-2 ${borderColor}">
+            <div class="flex flex-col">
+                <span class="font-label-caps text-on-surface">${m.driver_name.toUpperCase()}</span>
+                <span class="font-label-caps text-[10px] text-on-surface-variant/50">${m.team.toUpperCase()}</span>
+            </div>
+            <div class="text-right">
+                <span class="font-body-fixed font-bold ${textColor} text-lg">${prob}%</span>
+                <div class="h-1 w-24 bg-[#2D2D2D] rounded-full mt-1 overflow-hidden">
+                    <div class="h-full ${barColor}" style="width:${Math.min(prob, 100)}%"></div>
+                </div>
+            </div>
+        </div>
+        <div class="p-3 flex justify-between items-center text-on-surface-variant/60 border-l-2 border-[#333]">
+            <span class="font-label-caps text-[10px]">GRID POSITION</span>
+            <span class="font-body-fixed">P${m.grid_position}</span>
+        </div>
+        ${data.confidence_rating ? `
+        <div class="p-3 flex justify-between items-center text-on-surface-variant/60 border-l-2 border-[#333]">
+            <span class="font-label-caps text-[10px]">CONFIDENCE</span>
+            <span class="font-body-fixed text-neon-cyan">${data.confidence_rating}</span>
+        </div>` : ''}
+    `;
+
+    // SHAP bars
+    const shapEl = $('m-shap-content');
+    if (data.shap_values && Object.keys(data.shap_values).length > 0) {
+        const entries = Object.entries(data.shap_values)
+            .map(([k, v]) => [k, parseFloat(v)])
+            .sort((a, b) => Math.abs(b[1]) - Math.abs(a[1]))
+            .slice(0, 4);
+        const maxAbs = Math.max(...entries.map(e => Math.abs(e[1])), 0.001);
+
+        shapEl.innerHTML = entries.map(([feat, val]) => {
+            const pct = Math.min(Math.abs(val) / maxAbs * 100, 100).toFixed(0);
+            const isPositive = val >= 0;
+            const barBg = isPositive ? 'bg-race-red/20' : 'bg-neon-cyan/20';
+            const barFill = isPositive ? 'bg-race-red' : 'bg-neon-cyan';
+            const textCol = isPositive ? 'text-race-red' : 'text-neon-cyan';
+            const dir = isPositive ? 'right-0' : 'left-0';
+            return `
+                <div class="flex items-center gap-3">
+                    <span class="font-label-caps text-[10px] w-20 text-on-surface-variant/80">${feat.replace(/_/g, ' ').toUpperCase().slice(0, 10)}</span>
+                    <div class="flex-1 h-2 ${barBg} rounded-sm relative">
+                        <div class="absolute ${dir} top-0 h-full w-[${pct}%] ${barFill}"></div>
+                    </div>
+                    <span class="font-label-caps text-[10px] ${textCol}">${val >= 0 ? '+' : ''}${val.toFixed(2)}</span>
+                </div>
+            `;
+        }).join('');
+    } else {
+        shapEl.innerHTML = '<p class="font-body-fixed text-[11px] text-on-surface-variant/50 italic">No SHAP data</p>';
+    }
+
+    // Radio synthesis
+    $('m-radio-content').textContent = data.llm_explanation || 'No synthesis available.';
+}
+
+// --- Button Wiring ---
+
+// Hero buttons
+$('m-hero-run-btn').addEventListener('click', scrollToInput);
+$('m-hero-proof-btn').addEventListener('click', () => {
+    $('m-shap-pane').scrollIntoView({ behavior: 'smooth' });
+});
+
+// CTA buttons
+$('m-cta-launch-btn').addEventListener('click', scrollToInput);
+$('m-cta-docs-btn').addEventListener('click', () => window.open(`${API_BASE}/docs`, '_blank'));
+
+// Terminal send + Enter
+$('m-terminal-send').addEventListener('click', () => runPrediction($('m-terminal-input').value));
+$('m-terminal-input').addEventListener('keydown', (e) => {
+    if (e.key === 'Enter') runPrediction($('m-terminal-input').value);
+});
+
+// Terminal input focus glow
+$('m-terminal-input').addEventListener('focus', () => {
+    $('m-terminal-input').parentElement.classList.add('border-neon-cyan');
+});
+$('m-terminal-input').addEventListener('blur', () => {
+    $('m-terminal-input').parentElement.classList.remove('border-neon-cyan');
+});
+
+// Bottom nav bar
+$('m-nav-dashboard').addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' }));
+$('m-nav-analytics').addEventListener('click', () => $('m-shap-pane').scrollIntoView({ behavior: 'smooth' }));
+$('m-nav-radio').addEventListener('click', () => $('m-radio-pane').scrollIntoView({ behavior: 'smooth' }));
+$('m-nav-api').addEventListener('click', () => window.open(`${API_BASE}/docs`, '_blank'));
+
+// Footer links
+$('m-footer-status').addEventListener('click', async () => {
+    try {
+        const res = await fetch(`${API_BASE}/health`);
+        const data = await res.json();
+        showToast(`${data.status} | Model: ${data.model_loaded ? '✓' : '✗'} | Data: ${data.data_available ? '✓' : '✗'}`, data.status === 'healthy' ? 'success' : 'error');
+    } catch {
+        showToast('API unreachable', 'error');
+    }
+});
+$('m-footer-docs').addEventListener('click', () => window.open(`${API_BASE}/docs`, '_blank'));
+</script>
+</body></html>

frontend/next.config.mjs

@@ -1,6 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  /* config options here */
-};
-
-export default nextConfig;

frontend/package.json

@@ -1,32 +0,0 @@
-{
-  "name": "frontend",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "eslint"
-  },
-  "dependencies": {
-    "@radix-ui/react-popover": "^1.1.16",
-    "@radix-ui/react-slot": "^1.2.5",
-    "@types/node": "^25.9.2",
-    "@types/react": "^19.2.17",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "lucide-react": "^1.17.0",
-    "next": "16.2.7",
-    "react": "19.2.4",
-    "react-dom": "19.2.4",
-    "recharts": "^3.8.1",
-    "tailwind-merge": "^3.6.0",
-    "typescript": "^6.0.3"
-  },
-  "devDependencies": {
-    "@tailwindcss/postcss": "^4",
-    "eslint": "^9",
-    "eslint-config-next": "16.2.7",
-    "tailwindcss": "^4"
-  }
-}

frontend/postcss.config.mjs

@@ -1,7 +0,0 @@
-const config = {
-  plugins: {
-    "@tailwindcss/postcss": {},
-  },
-};
-
-export default config;

frontend/tsconfig.json

@@ -1,26 +0,0 @@
-{
-  "compilerOptions": {
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true,
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
-    "paths": {
-      "@/*": ["./*"]
-    }
-  },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
-}

ml/drift_detection.py

@@ -17,7 +17,7 @@ logging.basicConfig(level=logging.INFO, format="%(asctime)s | %(name)s | %(level
 def detect_drift(
     data_path: str = "data_output/fastf1_races.parquet",
     current_season: int = 2026,
-    report_output_path: str = "ui/drift_report.html"
+    report_output_path: str = "data_output/drift_report.html"
 ) -> bool:
     """
     Detects drift between the reference dataset (historical) and the current dataset.

mlruns/models/kronector-f1-lgbm/version-1/meta.yaml

@@ -1,3 +1,11 @@
+
+
+
+
+
+
+
+
 creation_timestamp: 1780335714328
 current_stage: None
 deployment_job_state: null