Upload folder using huggingface_hub

ARCHITECTURE.md

@@ -1,100 +1,58 @@
-# HEARTFLOW_OS // System Architecture & Engineering Topography
+# HeartFlow OS Architecture
 
-## 📌 Executive Summary
+HeartFlow OS is a distributed Edge AI platform. It bridges the gap between high-level Python MLOps and low-level embedded systems (ESP32/Arduino) by orchestrating live telemetry, automated model training, and zero-dependency C transpilation.
 
-HeartFlow OS is a distributed, edge-optimized telemetry pipeline designed for clinical-grade cardiovascular inference. The architecture addresses the inherent tension between heavy-compute machine learning paradigms and the constrained environments of low-power microcontrollers (TinyML).
-
-By aggressively decoupling the presentation layer (Client), the orchestration and modeling engine (Core), and the physical target execution (Edge), the system achieves strict separation of concerns, high-throughput asynchronous concurrency, and near-zero downtime deployment of predictive models.
-
----
-
-## 🏗 High-Level Architecture Diagram
+## System Topology
 
 ```mermaid
 graph TD
-    %% Define styles
-    classDef frontend fill:#111,stroke:#111,stroke-width:2px,color:#fff,font-family:monospace;
-    classDef backend fill:#fff,stroke:#111,stroke-width:2px,color:#111,font-family:monospace;
-    classDef ml_node fill:#e61919,stroke:#e61919,stroke-width:2px,color:#fff,font-family:monospace;
-    classDef edge_tech fill:#f3f3f2,stroke:#111,stroke-width:2px,color:#111,font-family:monospace;
-    classDef data fill:#94a3b8,stroke:#475569,stroke-width:2px,color:#fff,font-family:monospace;
-
-    subgraph Client [Client Application / Next.js 16]
-        direction TB
-        UI["Views<br/>(page.tsx)"]:::frontend
-        WS_Client["WebSocket<br/>(TelemetryContext.tsx)"]:::frontend
-        HTTP_Client["HTTP Fetch"]:::frontend
-    end
-
-    subgraph Core [FastAPI Core / Python 3.10+]
-        direction TB
-        WS_Server["WebSocket Broker<br/>(main.py)"]:::backend
-        REST_API["REST API Router<br/>(main.py)"]:::backend
-        Simulator["Vitals Simulator<br/>(simulator.py)"]:::backend
-        DB["SQLite & aiosqlite<br/>(database.py)"]:::backend
-    end
-
-    subgraph ML_Layer [Intelligence Pipeline / Scikit-Learn]
-        direction TB
-        Inference["Inference<br/>(inference.py)"]:::ml_node
-        Ensemble["Soft-Voting<br/>(ensemble.py)"]:::ml_node
-        Training["Model Training<br/>(models.py)"]:::ml_node
-        EdgeCompiler["C-Code Exporter<br/>(export.py)"]:::ml_node
-    end
-
-    subgraph Storage [Persistence & Hardware]
-        direction TB
-        ModelWeights["Model Artifacts<br/>(model/)"]:::data
-        CSV["Patient Dataset<br/>(patient_dataset.csv)"]:::data
-        MCU["Edge Silicon<br/>(tinyml_model.h)"]:::edge_tech
-    end
-
-    %% Flows
-    UI --> WS_Client
-    UI --> HTTP_Client
-    
-    WS_Client <--> WS_Server
-    HTTP_Client --> REST_API
+    A[Patient Sensors / Simulator] -->|WebSocket: 60Hz| B(FastAPI Backend)
+    B <-->|Logs & State| C[(SQLite DB)]
+    B <-->|Inference| D[Scikit-Learn Ensemble]
+    B -->|Transpilation| E{AST Compiler}
+    E -->|Generates model.h| F[PlatformIO Firmware]
+    F -->|Flashed to| G[ESP32 Edge Device]
     
-    WS_Server --> Inference
-    Simulator --> WS_Server
-    REST_API --> DB
-    REST_API --> Training
-    REST_API --> EdgeCompiler
+    H[React / Next.js UI] <-->|WebSocket Stream| B
+    H <-->|REST API| B
     
-    Inference --> Ensemble
-    Training --> ModelWeights
-    Training --> CSV
-    Ensemble --> ModelWeights
-    EdgeCompiler --> Ensemble
-    EdgeCompiler -.-> MCU
+    I[CSV Dataset] -->|Upload| H
+    H -->|/retrain endpoint| B
+    B -->|Train & Evaluate F1| D
 ```
 
----
-
-## 1. The Presentation Layer (Client Plane)
-Engineered using **Next.js 16 (App Router)** and **React 19**.
-
-- **Rendering Strategy:** Heavily leverages React Server Components (RSC) where applicable, while isolating stateful, high-frequency telemetry updates to optimized Client Components.
-- **WebSocket Triage:** Bypasses standard HTTP overhead by multiplexing telemetry streams via native WebSockets (`ws://`). The stream is mapped into a React Context provider, aggressively memoized using `useMemo` and `useCallback` to prevent unnecessary DOM re-renders and React thrashing at 60Hz.
-- **Visual Engineering:** Implements an Industrial Brutalist design language. All animations and Layout Transitions are hardware-accelerated (`transform`/`opacity` driven) utilizing `framer-motion` to maintain 60fps even under heavy CPU charting loads.
-
-## 2. The Orchestration Engine (Core Plane)
-Built entirely asynchronously on top of **FastAPI** (Python 3.10+).
-
-- **Asynchronous Throughput:** Utilizing the `asyncio` event loop and `uvicorn`, the backend comfortably supports multiple concurrent clinical WebSocket connections. I/O-bound operations (database writes) are completely non-blocking.
-- **Stateful Preprocessing:** Live data must match the exact multi-dimensional space the models were trained on. The backend retains a persistent `SimpleImputer` and `StandardScaler`, ensuring live inference vectors are identical in scale to the offline batch data without runtime data leakage.
-- **Event-Driven Database:** Implements `aiosqlite` for non-blocking audit logging of predictions, ensuring the primary telemetry event loop is never stalled by disk I/O.
-
-## 3. Intelligence Pipeline & MLOps
-Designed for precision and zero-downtime deployment.
-
-- **Distributed Soft-Voting:** Rather than relying on a monolithic architecture, inference is distributed across five orthogonal models (`RandomForest`, `SVM`, `KNN`, `LogisticRegression`, `MLPClassifier`). A soft-voting aggregator calculates the weighted probability distribution, offering a confidence interval rather than a binary black-box output.
-- **Live Background Retraining:** The `/retrain` pipeline exposes an API for ingesting new clinical datasets. Upon payload validation, it spins up a `fastapi.BackgroundTasks` thread. The system dynamically updates imputers, recalculates decision boundaries across all 5 models, serializes the updated weights to disk (`.pkl`), and critically—hot-swaps the active `EnsembleModel` object in RAM. This ensures active patient telemetry sessions are never dropped during model redeployments.
-
-## 4. The Edge Compilation Pipeline (TinyML)
-The most critical engineering bottleneck in telemetry is getting heavy Python models onto $2 silicon.
-
-- **AST-Based C-Transpilation:** Instead of running a heavyweight Python interpreter (like MicroPython) on the edge device, the backend parses the scikit-learn model's internal Abstract Syntax Trees (AST) and transpiles them directly into pure, statically typed `C` functions.
-- **Zero-Dependency Guarantee:** The resulting `tinyml_model.h` file requires no external libraries. It bypasses `malloc()` completely, relying entirely on static stack allocation, eliminating the risk of heap fragmentation or memory leaks in long-running embedded nodes.
-- **INT8 Quantization:** 64-bit floating point weights are mathematically clamped and scaled into 8-bit integers (`int8_t`). This quantization dramatically reduces flash storage requirements by up to ~75% and massively accelerates inference execution time on ALU architectures lacking dedicated floating-point hardware (FPU).
+## Directory Structure
+
+| Directory / File | Purpose |
+| :--- | :--- |
+| **`backend/`** | Python FastAPI application. |
+| `backend/main.py` | WebSocket router, dependency injection, and REST endpoints. |
+| `backend/models.py` | MLOps script: Loads dataset, trains ensemble, checks F1 score against `registry.json`, and saves `.pkl` files on success. |
+| `backend/export.py` | AST Compiler: Parses Python decision trees into `if/else` C logic. Applies INT8 quantization. |
+| `backend/ensemble.py` | Soft-voting runtime inference engine. |
+| `backend/test_c_export.py` | Cross-language integrity test ensuring Python models and C-code outputs match. |
+| **`frontend/`** | Next.js 16 Application. |
+| `frontend/src/app/layout.tsx`| Root layout containing the global telemetry socket context and universal footer. |
+| `frontend/src/context/` | Contains `TelemetryContext.tsx` which manages the WebSocket stream with exponential backoff. |
+| **`firmware/`** | PlatformIO C++ Project for edge microcontrollers. |
+| `firmware/platformio.ini` | Build configuration for `esp32dev` with `-O3` optimization flags. |
+| `firmware/src/main.cpp` | Main Arduino wrapper that includes the generated `model.h` and executes `predict()`. |
+| **`docker-compose.yml`** | Full-stack orchestration configuration. |
+
+## Data Flow: Background Retraining (MLOps)
+
+1. User uploads a CSV via the **MLOps UI**.
+2. FastAPI validates the schema and appends it to `patient_dataset.csv`.
+3. A background task invokes `train_models()`.
+4. A new Random Forest is trained. Its F1-score is evaluated against a test set.
+5. If the new score is $\ge$ the `active_version` score in `registry.json`, the `.pkl` files are overwritten and the live Ensemble model is hot-reloaded.
+6. If the new score degrades, the model is rejected (Automatic Rollback).
+
+## Data Flow: Edge Compilation (TinyML)
+
+1. User requests an export via the **Edge Compiler UI** (`/export_tinyml`).
+2. `export.py` loads the active `.pkl` models.
+3. The Scikit-Learn tree object is recursively traversed.
+4. Leaf nodes are identified and converted into raw `printf` or standard `return` C-strings.
+5. If `quantize=True`, 64-bit float thresholds are mapped to 8-bit integers.
+6. A self-contained `model.h` file is returned, containing a single `int predict(float features[])` function. No dynamic memory (`malloc`/`free`) is used, guaranteeing memory safety on embedded controllers.

README.md

@@ -9,73 +9,78 @@ pinned: false
 
 <div align="center">
   <h1>HeartFlow OS</h1>
-  <p><strong>Cardiovascular Telemetry & MLOps Engine</strong></p>
+  <p><strong>Cardiovascular Telemetry & Edge MLOps Engine</strong></p>
   
   <p>
     <img src="https://img.shields.io/badge/Next.js-16+-black.svg?style=for-the-badge&logo=next.js" alt="Next.js" />
     <img src="https://img.shields.io/badge/React-19-61DAFB.svg?style=for-the-badge&logo=react&logoColor=black" alt="React" />
     <img src="https://img.shields.io/badge/FastAPI-0.111.0+-009688.svg?style=for-the-badge&logo=fastapi" alt="FastAPI" />
-    <img src="https://img.shields.io/badge/Scikit--Learn-1.5.1+-F7931E.svg?style=for-the-badge&logo=scikit-learn&logoColor=white" alt="Scikit-Learn" />
+    <img src="https://img.shields.io/badge/PlatformIO-Edge-orange.svg?style=for-the-badge&logo=platformio&logoColor=white" alt="PlatformIO" />
     <img src="https://img.shields.io/badge/License-MIT-green.svg?style=for-the-badge" alt="License" />
   </p>
 </div>
 
 ---
 
-HeartFlow OS takes real-time patient vitals via WebSockets, runs them through an scikit-learn ensemble, and outputs probability distributions for cardiovascular conditions. It also transpiles these models into standalone C headers you can flash directly to constrained edge devices like an ESP32.
+HeartFlow OS is an end-to-end telemetry and inference platform designed to stream cardiovascular vitals, predict anomalies using a soft-voting ensemble model, and export those models to highly-constrained edge devices (like ESP32/Arduino).
 
-## Components
+## System Architecture
 
 | Domain | Tech | Details |
 | :--- | :--- | :--- |
-| **Frontend** | Next.js 16, React 19 | Renders 60Hz telemetry streams using WebSockets and SVG |
-| **Backend** | FastAPI, Python 3.10 | Handles WebSocket routing and MLOps API endpoints |
-| **ML** | Scikit-Learn | Soft-voting ensemble (RF, SVM, KNN, LogReg, MLP) |
-| **Database** | SQLite, `aiosqlite` | Non-blocking telemetry and prediction logging |
-| **Compiler** | Custom AST Transpiler | Generates INT8 quantized, `malloc`-free C code |
+| **Frontend** | Next.js 16, Framer Motion | Industrial Brutalist UI with auto-healing WebSocket reconnections. |
+| **Backend** | FastAPI, Python 3.10 | Real-time WebSocket routing, Telemetry simulator, and SHAP Explainability. |
+| **MLOps Pipeline** | Scikit-Learn | Automated training pipelines with F1-Score evaluation and rollback protection. |
+| **Edge Compiler** | Custom AST Transpiler | Exports trained ensembles to zero-dependency, INT8 quantized C headers. |
+| **Firmware** | PlatformIO, C++ | Ready-to-deploy hardware wrapper for ESP32/Arduino execution. |
 
-## Features
+## Core Features
 
-- **Live Telemetry**: Streams data at 60Hz via WebSockets to a React 19 dashboard.
-- **Edge Compilation**: Converts trained scikit-learn models into C headers. The generated code requires no dependencies and does not use dynamic memory allocation.
-- **Quantization**: Scales 64-bit float weights down to 8-bit integers, reducing flash memory usage by ~75%.
-- **Soft-Voting**: Combines predictions from 5 different models to output a probability distribution.
-- **Background Retraining**: Upload new CSV data to `/retrain` and the backend will impute missing values, retrain the models in a background thread, and update the live ensemble without dropping active socket connections.
+- **Fault-Tolerant Telemetry**: Streams data via WebSockets to the React dashboard with exponential backoff and UI-level auto-reconnection.
+- **Automated MLOps Registry**: Upload batch CSV data to `/retrain`. The system evaluates the new models against a test set and will automatically roll back if performance (F1-score) degrades.
+- **Edge Compilation (TinyML)**: Converts trained models into standalone C code (`model.h`). The generated code requires no dynamic memory allocation (`malloc`-free) and uses integer quantization to cut memory footprint by 75%.
+- **Cross-Language Assurance**: Built-in test pipelines verify that the exported C logic perfectly matches the Python models before flashing to hardware.
 
-## Architecture
+## Quickstart
 
-See [ARCHITECTURE.md](./ARCHITECTURE.md) for data flow diagrams and the file map.
+### Option 1: Docker Compose (Recommended)
 
-## Quickstart
+Run the entire full-stack platform (Frontend + Backend) with a single command:
 
-### 1. Backend
+```bash
+docker compose up --build
+```
+- UI available at: `http://localhost:3000`
+- API Docs available at: `http://localhost:8000/docs`
 
-Requires Python 3.10+.
+### Option 2: Manual Local Setup
 
+**Backend (Python)**
 ```bash
 cd backend
 python -m venv .venv
 source .venv/bin/activate  # Windows: .\.venv\Scripts\activate
 pip install -r requirements.txt
-
-# Train initial models and seed the DB
-python models.py
-
-# Start the server
+python models.py           # Seed initial models
 uvicorn main:app --reload --port 8000
 ```
 
-### 2. Frontend
-
-Requires Node.js 18+.
-
+**Frontend (Node)**
 ```bash
 cd frontend
 npm install
 npm run dev
 ```
 
-Open `http://localhost:3000` to view the dashboard, upload new data, or export C headers.
+### Option 3: Hardware Firmware (Edge Deployment)
+
+Once you export your `model.h` from the UI or API, deploy to your microcontroller:
+
+```bash
+cd firmware
+# Copy your exported model.h to firmware/src/model.h
+pio run -t upload
+```
 
 ## License
 

frontend/src/app/analytics/page.tsx

@@ -32,16 +32,6 @@ export default function Analytics() {
 
   return (
     <main className="min-h-[100dvh] relative overflow-hidden bg-canvas">
-      <nav className="h-16 flex items-center px-8 border-b border-hairline bg-canvas/80 backdrop-blur-md sticky top-0 z-50">
-        <div className="max-w-[1200px] mx-auto w-full flex justify-between items-center">
-          <Link href="/" className="font-display text-xl text-ink font-light tracking-[-0.02em]">TinyML Core</Link>
-          <div className="flex gap-6 items-center text-[15px] font-medium tracking-tight">
-            <Link href="/dashboard" className="text-muted hover:text-ink transition-colors">Live Monitor</Link>
-            <Link href="/history" className="text-muted hover:text-ink transition-colors">History</Link>
-            <Link href="/mlops" className="text-muted hover:text-ink transition-colors">MLOps</Link>
-          </div>
-        </div>
-      </nav>
 
       <div className="max-w-[1200px] mx-auto px-8 py-24 relative">
         <div className="absolute top-0 right-1/4 w-[30vw] h-[30vw] rounded-full bg-gradient-sky opacity-20 blur-[80px] -z-10" />

frontend/src/app/architecture/page.tsx

@@ -1,87 +1,78 @@
 "use client";
 
-import Link from "next/link";
+import { motion } from "framer-motion";
+
+const easeFluid: [number, number, number, number] = [0.16, 1, 0.3, 1];
+
+const staggerContainer = {
+  hidden: { opacity: 0 },
+  show: {
+    opacity: 1,
+    transition: { staggerChildren: 0.1, delayChildren: 0.1 }
+  }
+};
+
+const fadeUp = {
+  hidden: { opacity: 0, y: 20 },
+  show: { opacity: 1, y: 0, transition: { duration: 0.8, ease: easeFluid } }
+};
 
 export default function Architecture() {
   return (
-    <main className="min-h-[100dvh] bg-canvas-cream flex flex-col font-mono selection:bg-hazard selection:text-white">
-      {/* Top Nav (Mechanical) */}
-      <nav className="h-16 flex items-center px-8 border-b-2 border-ink bg-canvas-cream sticky top-0 z-50">
-        <div className="max-w-[1400px] mx-auto w-full flex justify-between items-center">
-          <Link href="/" className="font-sans text-[18px] font-black tracking-[-0.04em] uppercase">
-            [ HEARTFLOW_OS ]
-          </Link>
-          <div className="flex gap-8 items-center text-[13px] font-bold tracking-[0.05em] uppercase hidden md:flex">
-            <Link href="/dashboard" className="text-ink hover:text-hazard transition-colors">SYS.MONITOR</Link>
-            <Link href="/simulator" className="text-ink hover:text-hazard transition-colors">AI.SIMULATOR</Link>
-            <Link href="/history" className="text-ink hover:text-hazard transition-colors">DATA.LOG</Link>
-            <Link href="/mlops" className="text-ink hover:text-hazard transition-colors">ML.OPS</Link>
-            <Link href="/edge" className="text-ink hover:text-hazard transition-colors">EDGE.COMPILER</Link>
-          </div>
-        </div>
-      </nav>
-
-      <div className="max-w-[1000px] mx-auto w-full px-8 py-16 flex-1 flex flex-col">
-        <header className="mb-12 border-b-4 border-ink pb-8 flex justify-between items-end">
+    <main className="min-h-[100dvh] bg-canvas-cream flex flex-col font-mono selection:bg-hazard selection:text-white pb-16">
+      <motion.div 
+        variants={staggerContainer}
+        initial="hidden"
+        animate="show"
+        className="max-w-[1000px] mx-auto w-full px-4 md:px-8 py-8 md:py-16 flex-1 flex flex-col"
+      >
+        <motion.header variants={fadeUp} className="mb-8 md:mb-12 border-b-4 border-ink pb-8 flex justify-between items-end">
           <div>
             <div className="text-[12px] text-hazard font-bold tracking-[0.1em] mb-4">
               /// DOCS_AND_SPECS
             </div>
-            <h1 className="text-[clamp(3rem,6vw,6rem)]">
+            <h1 className="text-[clamp(2.5rem,6vw,6rem)] leading-tight">
               SYSTEM<br />ARCHITECTURE
             </h1>
           </div>
-        </header>
+        </motion.header>
 
-        <div className="border-2 border-ink bg-white p-8 mb-8">
-          <h2 className="text-[18px] font-sans font-black tracking-[-0.02em] uppercase text-ink mb-6 border-b-2 border-ink pb-4">
+        <motion.div variants={fadeUp} className="border-2 border-ink bg-white p-6 md:p-8 mb-8 hover:border-hazard transition-colors">
+          <h2 className="text-[16px] md:text-[18px] font-sans font-black tracking-[-0.02em] uppercase text-ink mb-6 border-b-2 border-ink pb-4">
             [ 01 ] Client Plane (Frontend)
           </h2>
-          <p className="text-[14px] text-slate uppercase leading-relaxed mb-4">
-            Engineered using Next.js 16 (App Router) and React 19. The UI adheres strictly to an Industrial Brutalist aesthetic utilizing hard grids, monochromatic blueprints, and high-contrast hazard states. Native WebSockets handle high-frequency telemetry without HTTP overhead, rendered via hardware-accelerated SVG paths in framer-motion.
+          <p className="text-[13px] md:text-[14px] text-slate uppercase leading-relaxed mb-4">
+            Engineered using Next.js 16 (App Router). The UI adheres to an Industrial Brutalist aesthetic utilizing hard grids, monochromatic blueprints, and high-contrast hazard states. A global Telemetry Provider manages native WebSocket streams with exponential backoff and UI-level auto-reconnection, rendered via hardware-accelerated SVG paths.
           </p>
-        </div>
+        </motion.div>
 
-        <div className="border-2 border-ink bg-white p-8 mb-8">
-          <h2 className="text-[18px] font-sans font-black tracking-[-0.02em] uppercase text-ink mb-6 border-b-2 border-ink pb-4">
+        <motion.div variants={fadeUp} className="border-2 border-ink bg-white p-6 md:p-8 mb-8 hover:border-hazard transition-colors">
+          <h2 className="text-[16px] md:text-[18px] font-sans font-black tracking-[-0.02em] uppercase text-ink mb-6 border-b-2 border-ink pb-4">
             [ 02 ] Core Plane (Backend)
           </h2>
-          <p className="text-[14px] text-slate uppercase leading-relaxed mb-4">
-            Built on FastAPI (Python 3.10+) maximizing async throughput. A state-machine driven data simulator generates correlated, volatile telemetry streams representing clinical episodes. Storage employs aiosqlite for non-blocking database writes to track historical classifications without stalling the event loop.
+          <p className="text-[13px] md:text-[14px] text-slate uppercase leading-relaxed mb-4">
+            Built on FastAPI (Python 3.10+) maximizing async throughput. Full-stack orchestration is containerized via Docker Compose. A state-machine driven data simulator generates correlated, volatile telemetry streams. Storage employs aiosqlite for non-blocking database writes to track historical classifications without stalling the event loop.
           </p>
-        </div>
+        </motion.div>
 
-        <div className="border-2 border-ink bg-white p-8 mb-8">
-          <h2 className="text-[18px] font-sans font-black tracking-[-0.02em] uppercase text-ink mb-6 border-b-2 border-ink pb-4">
+        <motion.div variants={fadeUp} className="border-2 border-ink bg-white p-6 md:p-8 mb-8 hover:border-hazard transition-colors">
+          <h2 className="text-[16px] md:text-[18px] font-sans font-black tracking-[-0.02em] uppercase text-ink mb-6 border-b-2 border-ink pb-4">
             [ 03 ] Intelligence Pipeline (MLOps)
           </h2>
-          <p className="text-[14px] text-slate uppercase leading-relaxed mb-4">
-            Live patient data is standardized and imputed using a persistent SimpleImputer and StandardScaler. Clinical precision is achieved via a 5-model soft-voting ensemble. The `/retrain` pipeline allows dynamic CSV uploads, imputes missing data, trains models in background threads, and hot-swaps the EnsembleModel globally with zero downtime.
+          <p className="text-[13px] md:text-[14px] text-slate uppercase leading-relaxed mb-4">
+            Clinical precision is achieved via a 5-model soft-voting ensemble (RF, KNN, SVM, LogReg, MLP). The `/retrain` pipeline implements a strict CI/CD gate: it evaluates newly uploaded datasets against a test holdout, and automatically rolls back if the F1-score degrades. Winning models are logged to a JSON registry and hot-swapped globally.
           </p>
-        </div>
+        </motion.div>
 
-        <div className="border-2 border-ink bg-white p-8 mb-8">
-          <h2 className="text-[18px] font-sans font-black tracking-[-0.02em] uppercase text-ink mb-6 border-b-2 border-ink pb-4">
+        <motion.div variants={fadeUp} className="border-2 border-ink bg-white p-6 md:p-8 mb-8 hover:border-hazard transition-colors">
+          <h2 className="text-[16px] md:text-[18px] font-sans font-black tracking-[-0.02em] uppercase text-ink mb-6 border-b-2 border-ink pb-4">
             [ 04 ] Edge Compilation (TinyML)
           </h2>
-          <p className="text-[14px] text-slate uppercase leading-relaxed mb-4">
-            The backend transpiles trained SciKit-Learn tree models directly into standalone zero-dependency C-headers. Floating-point thresholds are mathematically quantized to INT8, effectively shrinking the flashed payload by ~75%. Designed to execute directly on MCU SRAM without dynamic memory allocation.
+          <p className="text-[13px] md:text-[14px] text-slate uppercase leading-relaxed mb-4">
+            The backend transpiles trained SciKit-Learn tree models directly into standalone zero-dependency C-headers (`model.h`). Floating-point thresholds are quantized to INT8, shrinking payload footprints by ~75%. A PlatformIO firmware wrapper handles deployment to ESP32/Arduino, guaranteed by an automated structural integrity testing script.
           </p>
-        </div>
-      </div>
-      
-      <footer className="w-full border-t-2 border-ink bg-white py-6 px-8 mt-auto">
-        <div className="max-w-[1400px] mx-auto flex flex-col md:flex-row items-center justify-between gap-4">
-          <div className="text-[12px] font-bold tracking-[0.05em] uppercase text-ink">
-            © 2026 HEARTFLOW_OS. TELEMETRY_SYS.
-          </div>
-          <div className="flex items-center gap-8">
-            <Link href="/architecture" className="text-[12px] font-bold tracking-[0.05em] uppercase text-hazard border-b border-hazard">ARCHITECTURE.MD</Link>
-            <a href={`${process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000"}/docs`} target="_blank" rel="noopener noreferrer" className="text-[12px] font-bold tracking-[0.05em] uppercase text-ink hover:text-hazard transition-colors">API_DOCS</a>
-            <a href="https://github.com/IDKHowToCodeFR/HEARTFLOW_OS" target="_blank" rel="noopener noreferrer" className="text-[12px] font-bold tracking-[0.05em] uppercase text-ink hover:text-hazard transition-colors">GITHUB_REPO</a>
-          </div>
-        </div>
-      </footer>
+        </motion.div>
+      </motion.div>
     </main>
   );
 }

frontend/src/app/dashboard/page.tsx

@@ -25,25 +25,6 @@ export default function Dashboard() {
   return (
     <main className="min-h-[100dvh] bg-canvas-cream flex flex-col font-mono selection:bg-hazard selection:text-white pb-16">
       {/* Top Nav (Mechanical) */}
-      <motion.nav 
-        initial={{ y: "-100%" }}
-        animate={{ y: 0 }}
-        transition={{ duration: 0.8, ease: easeFluid }}
-        className="h-16 flex items-center px-8 border-b-2 border-ink bg-canvas-cream sticky top-0 z-50"
-      >
-        <div className="max-w-[1400px] mx-auto w-full flex justify-between items-center">
-          <Link href="/" className="font-sans text-[18px] font-black tracking-[-0.04em] uppercase hover:text-hazard transition-colors">
-            [ HEARTFLOW_OS ]
-          </Link>
-          <div className="flex gap-8 items-center text-[13px] font-bold tracking-[0.05em] uppercase hidden md:flex">
-            <Link href="/dashboard" className="text-hazard border-b-2 border-hazard pb-1">SYS.MONITOR</Link>
-            <Link href="/simulator" className="text-ink hover:text-hazard transition-colors">AI.SIMULATOR</Link>
-            <Link href="/history" className="text-ink hover:text-hazard transition-colors">DATA.LOG</Link>
-            <Link href="/mlops" className="text-ink hover:text-hazard transition-colors">ML.OPS</Link>
-            <Link href="/edge" className="text-ink hover:text-hazard transition-colors">EDGE.COMPILER</Link>
-          </div>
-        </div>
-      </motion.nav>
 
       <motion.div 
         variants={staggerContainer}

frontend/src/app/edge/page.tsx

@@ -45,20 +45,6 @@ export default function EdgeDeployment() {
   return (
     <main className="min-h-[100dvh] bg-canvas-cream flex flex-col font-mono selection:bg-hazard selection:text-white">
       {/* Top Nav (Mechanical) */}
-      <nav className="h-16 flex items-center px-8 border-b-2 border-ink bg-canvas-cream sticky top-0 z-50">
-        <div className="max-w-[1400px] mx-auto w-full flex justify-between items-center">
-          <Link href="/" className="font-sans text-[18px] font-black tracking-[-0.04em] uppercase">
-            [ HEARTFLOW_OS ]
-          </Link>
-          <div className="flex gap-8 items-center text-[13px] font-bold tracking-[0.05em] uppercase">
-            <Link href="/dashboard" className="text-ink hover:text-hazard transition-colors">SYS.MONITOR</Link>
-            <Link href="/simulator" className="text-ink hover:text-hazard transition-colors">AI.SIMULATOR</Link>
-            <Link href="/history" className="text-ink hover:text-hazard transition-colors">DATA.LOG</Link>
-            <Link href="/mlops" className="text-ink hover:text-hazard transition-colors">ML.OPS</Link>
-            <Link href="/edge" className="text-hazard border-b-2 border-hazard pb-1">EDGE.COMPILER</Link>
-          </div>
-        </div>
-      </nav>
 
       <div className="max-w-[1400px] mx-auto w-full px-8 py-16 flex-1 flex flex-col">
         <header className="mb-12 border-b-4 border-ink pb-8 flex justify-between items-end">

frontend/src/app/history/page.tsx

@@ -37,20 +37,6 @@ export default function PatientHistory() {
   return (
     <main className="min-h-[100dvh] bg-canvas-cream flex flex-col font-mono selection:bg-hazard selection:text-white">
       {/* Top Nav (Mechanical) */}
-      <nav className="h-16 flex items-center px-8 border-b-2 border-ink bg-canvas-cream sticky top-0 z-50">
-        <div className="max-w-[1400px] mx-auto w-full flex justify-between items-center">
-          <Link href="/" className="font-sans text-[18px] font-black tracking-[-0.04em] uppercase">
-            [ HEARTFLOW_OS ]
-          </Link>
-          <div className="flex gap-8 items-center text-[13px] font-bold tracking-[0.05em] uppercase">
-            <Link href="/dashboard" className="text-ink hover:text-hazard transition-colors">SYS.MONITOR</Link>
-            <Link href="/simulator" className="text-ink hover:text-hazard transition-colors">AI.SIMULATOR</Link>
-            <Link href="/history" className="text-hazard border-b-2 border-hazard pb-1">DATA.LOG</Link>
-            <Link href="/mlops" className="text-ink hover:text-hazard transition-colors">ML.OPS</Link>
-            <Link href="/edge" className="text-ink hover:text-hazard transition-colors">EDGE.COMPILER</Link>
-          </div>
-        </div>
-      </nav>
 
       <div className="max-w-[1400px] mx-auto w-full px-8 py-16 flex-1 flex flex-col">
         <header className="mb-12 border-b-4 border-ink pb-8 flex justify-between items-end">

frontend/src/app/layout.tsx

@@ -13,6 +13,8 @@ const geistMono = Geist_Mono({
   subsets: ["latin"],
 });
 
+import Link from "next/link";
+
 export const metadata: Metadata = {
   title: "TinyML Heart Health",
   description: "Cardiovascular monitoring dashboard",
@@ -24,10 +26,42 @@ export default function RootLayout({ children }: { children: React.ReactNode })
       lang="en"
       className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
     >
-      <body className="min-h-full flex flex-col">
+      <body className="min-h-full flex flex-col font-mono selection:bg-hazard selection:text-white bg-canvas-cream">
         <TelemetryProvider>
-          {children}
+          {/* Universal Nav */}
+          <nav className="flex items-center px-4 md:px-8 py-4 border-b-2 border-ink bg-canvas-cream sticky top-0 z-50 overflow-x-auto">
+            <div className="max-w-[1400px] mx-auto w-full flex flex-col md:flex-row justify-between items-center gap-4 md:gap-0">
+              <Link href="/" className="font-sans text-[18px] font-black tracking-[-0.04em] uppercase hover:text-hazard transition-colors">
+                [ HEARTFLOW_OS ]
+              </Link>
+              <div className="flex gap-4 md:gap-8 items-center text-[12px] md:text-[13px] font-bold tracking-[0.05em] uppercase flex-wrap justify-center">
+                <Link href="/dashboard" className="text-ink hover:text-hazard transition-colors">SYS.MONITOR</Link>
+                <Link href="/simulator" className="text-ink hover:text-hazard transition-colors">AI.SIMULATOR</Link>
+                <Link href="/history" className="text-ink hover:text-hazard transition-colors">DATA.LOG</Link>
+                <Link href="/mlops" className="text-ink hover:text-hazard transition-colors">ML.OPS</Link>
+                <Link href="/edge" className="text-ink hover:text-hazard transition-colors">EDGE.COMPILER</Link>
+              </div>
+            </div>
+          </nav>
+          
+          <div className="flex-1 flex flex-col">
+            {children}
+          </div>
         </TelemetryProvider>
+        
+        {/* Universal Footer */}
+        <footer className="w-full border-t-2 border-ink bg-white py-6 px-8 mt-auto z-50">
+          <div className="max-w-[1400px] mx-auto flex flex-col md:flex-row items-center justify-between gap-4">
+            <div className="text-[12px] font-bold tracking-[0.05em] uppercase text-ink text-center md:text-left">
+              © 2026 HEARTFLOW_OS. TELEMETRY_SYS.
+            </div>
+            <div className="flex flex-wrap items-center justify-center gap-4 md:gap-8">
+              <Link href="/architecture" className="text-[12px] font-bold tracking-[0.05em] uppercase text-ink hover:text-hazard transition-colors">ARCHITECTURE.MD</Link>
+              <a href={`${process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000"}/docs`} target="_blank" rel="noopener noreferrer" className="text-[12px] font-bold tracking-[0.05em] uppercase text-ink hover:text-hazard transition-colors">API_DOCS</a>
+              <a href="https://github.com/IDKHowToCodeFR/HEARTFLOW_OS" target="_blank" rel="noopener noreferrer" className="text-[12px] font-bold tracking-[0.05em] uppercase text-ink hover:text-hazard transition-colors">GITHUB_REPO</a>
+            </div>
+          </div>
+        </footer>
       </body>
     </html>
   );

frontend/src/app/mlops/page.tsx

@@ -54,25 +54,6 @@ export default function MLOps() {
   return (
     <main className="min-h-[100dvh] bg-canvas-cream flex flex-col font-mono selection:bg-hazard selection:text-white">
       {/* Top Nav (Mechanical) */}
-      <motion.nav 
-        initial={{ y: "-100%" }}
-        animate={{ y: 0 }}
-        transition={{ duration: 0.8, ease: easeFluid }}
-        className="h-16 flex items-center px-8 border-b-2 border-ink bg-canvas-cream sticky top-0 z-50"
-      >
-        <div className="max-w-[1400px] mx-auto w-full flex justify-between items-center">
-          <Link href="/" className="font-sans text-[18px] font-black tracking-[-0.04em] uppercase hover:text-hazard transition-colors">
-            [ HEARTFLOW_OS ]
-          </Link>
-          <div className="flex gap-8 items-center text-[13px] font-bold tracking-[0.05em] uppercase">
-            <Link href="/dashboard" className="text-ink hover:text-hazard transition-colors">SYS.MONITOR</Link>
-            <Link href="/simulator" className="text-ink hover:text-hazard transition-colors">AI.SIMULATOR</Link>
-            <Link href="/history" className="text-ink hover:text-hazard transition-colors">DATA.LOG</Link>
-            <Link href="/mlops" className="text-hazard border-b-2 border-hazard pb-1">ML.OPS</Link>
-            <Link href="/edge" className="text-ink hover:text-hazard transition-colors">EDGE.COMPILER</Link>
-          </div>
-        </div>
-      </motion.nav>
 
       <motion.div 
         variants={staggerContainer}

frontend/src/app/page.tsx

@@ -21,29 +21,8 @@ export default function Home() {
 
   return (
     <main className="min-h-[100dvh] bg-canvas-cream flex flex-col font-mono selection:bg-hazard selection:text-white">
-      {/* Top Nav (Mechanical) */}
-      <motion.nav 
-        initial={{ y: "-100%" }}
-        animate={{ y: 0 }}
-        transition={{ duration: 0.8, ease: easeFluid }}
-        className="h-16 flex items-center px-8 border-b-2 border-ink bg-canvas-cream sticky top-0 z-50"
-      >
-        <div className="max-w-[1400px] mx-auto w-full flex justify-between items-center">
-          <Link href="/" className="font-sans text-[18px] font-black tracking-[-0.04em] uppercase hover:text-hazard transition-colors">
-            [ HEARTFLOW_OS ]
-          </Link>
-          <div className="flex gap-8 items-center text-[13px] font-bold tracking-[0.05em] uppercase hidden md:flex">
-            <Link href="/dashboard" className="text-ink hover:text-hazard transition-colors">SYS.MONITOR</Link>
-            <Link href="/simulator" className="text-ink hover:text-hazard transition-colors">AI.SIMULATOR</Link>
-            <Link href="/history" className="text-ink hover:text-hazard transition-colors">DATA.LOG</Link>
-            <Link href="/mlops" className="text-ink hover:text-hazard transition-colors">ML.OPS</Link>
-            <Link href="/edge" className="text-ink hover:text-hazard transition-colors">EDGE.COMPILER</Link>
-          </div>
-        </div>
-      </motion.nav>
-
       {/* Hero Section */}
-      <section className="max-w-[1400px] mx-auto w-full px-8 pt-32 pb-24 grid grid-cols-1 lg:grid-cols-12 gap-16 flex-1 overflow-hidden">
+      <section className="max-w-[1400px] mx-auto w-full px-8 pt-16 md:pt-32 pb-24 grid grid-cols-1 lg:grid-cols-12 gap-16 flex-1 overflow-hidden">
         <motion.div 
           variants={staggerContainer}
           initial="hidden"
@@ -61,13 +40,13 @@ export default function Home() {
             <span>INT8_QUANTIZED</span>
           </motion.div>
           
-          <motion.h1 variants={fadeUp} className="text-[clamp(4rem,8vw,8rem)] mb-8">
+          <motion.h1 variants={fadeUp} className="text-[clamp(3rem,8vw,8rem)] mb-8 leading-tight">
             CLINICAL<br />
             INFERENCE<br />
             <span className="text-hazard">AT THE EDGE.</span>
           </motion.h1>
 
-          <motion.p variants={fadeUp} className="text-[16px] text-ink max-w-lg leading-relaxed uppercase tracking-[0.02em] font-bold border-l-4 border-hazard pl-6 mb-12">
+          <motion.p variants={fadeUp} className="text-[14px] md:text-[16px] text-ink max-w-lg leading-relaxed uppercase tracking-[0.02em] font-bold border-l-4 border-hazard pl-6 mb-12">
             An ensemble intelligence pipeline engineered for resource-constrained microcontrollers. Deploy robust cardiovascular telemetry analysis directly to the silicon.
           </motion.p>
 
@@ -77,7 +56,7 @@ export default function Home() {
                 whileHover={{ scale: 1.02, backgroundColor: "var(--color-hazard)", borderColor: "var(--color-hazard)" }}
                 whileTap={{ scale: 0.98 }}
                 transition={{ duration: 0.2, ease: "easeOut" }}
-                className="inline-flex items-center justify-center h-12 px-8 bg-ink text-white text-[14px] font-bold uppercase tracking-[0.1em] border-2 border-ink"
+                className="inline-flex items-center justify-center h-12 px-8 bg-ink text-white text-[14px] font-bold uppercase tracking-[0.1em] border-2 border-ink w-full md:w-auto"
               >
                 [ INITIATE_STREAM ]
               </motion.a>
@@ -87,7 +66,7 @@ export default function Home() {
                 whileHover={{ scale: 1.02, backgroundColor: "var(--color-ink)", color: "var(--color-canvas-cream)" }}
                 whileTap={{ scale: 0.98 }}
                 transition={{ duration: 0.2, ease: "easeOut" }}
-                className="inline-flex items-center justify-center h-12 px-8 bg-transparent text-ink text-[14px] font-bold uppercase tracking-[0.1em] border-2 border-ink"
+                className="inline-flex items-center justify-center h-12 px-8 bg-transparent text-ink text-[14px] font-bold uppercase tracking-[0.1em] border-2 border-ink w-full md:w-auto mt-2 md:mt-0"
               >
                 C_COMPILER &gt;&gt;
               </motion.a>
@@ -105,10 +84,10 @@ export default function Home() {
           <motion.div variants={fadeUp} className="bg-white p-8 flex flex-col justify-between group cursor-default">
             <div className="text-[10px] text-slate font-bold tracking-[0.15em] mb-4 group-hover:text-hazard transition-colors duration-300">FEAT.01</div>
             <div>
-              <h3 className="font-sans text-[24px] font-black uppercase tracking-[-0.02em] mb-2 text-ink">
+              <h3 className="font-sans text-[20px] md:text-[24px] font-black uppercase tracking-[-0.02em] mb-2 text-ink">
                 INT8 Quantization
               </h3>
-              <p className="text-[13px] text-slate leading-relaxed uppercase">
+              <p className="text-[12px] md:text-[13px] text-slate leading-relaxed uppercase">
                 Weights scaled to 8-bit integers. 75% payload reduction for ESP32 constraint matrices.
               </p>
             </div>
@@ -117,10 +96,10 @@ export default function Home() {
           <motion.div variants={fadeUp} className="bg-canvas-cream p-8 flex flex-col justify-between group cursor-default">
             <div className="text-[10px] text-slate font-bold tracking-[0.15em] mb-4 group-hover:text-hazard transition-colors duration-300">FEAT.02</div>
             <div>
-              <h3 className="font-sans text-[24px] font-black uppercase tracking-[-0.02em] mb-2 text-ink">
+              <h3 className="font-sans text-[20px] md:text-[24px] font-black uppercase tracking-[-0.02em] mb-2 text-ink">
                 Ensemble Architecture
               </h3>
-              <p className="text-[13px] text-slate leading-relaxed uppercase">
+              <p className="text-[12px] md:text-[13px] text-slate leading-relaxed uppercase">
                 RF, KNN, and SVM combined with a meta-classifier for clinical-grade precision.
               </p>
             </div>
@@ -129,35 +108,16 @@ export default function Home() {
           <motion.div variants={fadeUp} className="bg-white p-8 flex flex-col justify-between group cursor-default">
             <div className="text-[10px] text-slate font-bold tracking-[0.15em] mb-4 group-hover:text-hazard transition-colors duration-300">FEAT.03</div>
             <div>
-              <h3 className="font-sans text-[24px] font-black uppercase tracking-[-0.02em] mb-2 text-ink">
+              <h3 className="font-sans text-[20px] md:text-[24px] font-black uppercase tracking-[-0.02em] mb-2 text-ink">
                 Zero-Dep Export
               </h3>
-              <p className="text-[13px] text-slate leading-relaxed uppercase">
+              <p className="text-[12px] md:text-[13px] text-slate leading-relaxed uppercase">
                 Compile trained models directly to standalone C headers. Zero dynamic allocation.
               </p>
             </div>
           </motion.div>
         </motion.div>
       </section>
-
-      {/* Minimal Footer */}
-      <motion.footer 
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        transition={{ duration: 1, delay: 0.8 }}
-        className="w-full border-t-2 border-ink bg-white py-6 px-8"
-      >
-        <div className="max-w-[1400px] mx-auto flex flex-col md:flex-row items-center justify-between gap-4">
-          <div className="text-[12px] font-bold tracking-[0.05em] uppercase text-ink">
-            © 2026 HEARTFLOW_OS. TELEMETRY_SYS.
-          </div>
-          <div className="flex items-center gap-8">
-            <Link href="/architecture" className="text-[12px] font-bold tracking-[0.05em] uppercase text-ink hover:text-hazard transition-colors">ARCHITECTURE.MD</Link>
-            <a href={`${process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000"}/docs`} target="_blank" rel="noopener noreferrer" className="text-[12px] font-bold tracking-[0.05em] uppercase text-ink hover:text-hazard transition-colors">API_DOCS</a>
-            <a href="https://github.com/IDKHowToCodeFR/HEARTFLOW_OS" target="_blank" rel="noopener noreferrer" className="text-[12px] font-bold tracking-[0.05em] uppercase text-ink hover:text-hazard transition-colors">GITHUB_REPO</a>
-          </div>
-        </div>
-      </motion.footer>
     </main>
   );
 }

frontend/src/app/simulator/page.tsx

@@ -67,25 +67,6 @@ export default function Analysis() {
   return (
     <main className="min-h-[100dvh] bg-canvas-cream flex flex-col font-mono selection:bg-hazard selection:text-white pb-16">
       {/* Top Nav (Mechanical) */}
-      <motion.nav 
-        initial={{ y: "-100%" }}
-        animate={{ y: 0 }}
-        transition={{ duration: 0.8, ease: easeFluid }}
-        className="h-16 flex items-center px-8 border-b-2 border-ink bg-canvas-cream sticky top-0 z-50"
-      >
-        <div className="max-w-[1400px] mx-auto w-full flex justify-between items-center">
-          <Link href="/" className="font-sans text-[18px] font-black tracking-[-0.04em] uppercase hover:text-hazard transition-colors">
-            [ HEARTFLOW_OS ]
-          </Link>
-          <div className="flex gap-8 items-center text-[13px] font-bold tracking-[0.05em] uppercase">
-            <Link href="/dashboard" className="text-ink hover:text-hazard transition-colors">SYS.MONITOR</Link>
-            <Link href="/simulator" className="text-hazard border-b-2 border-hazard pb-1">AI.SIMULATOR</Link>
-            <Link href="/history" className="text-ink hover:text-hazard transition-colors">DATA.LOG</Link>
-            <Link href="/mlops" className="text-ink hover:text-hazard transition-colors">ML.OPS</Link>
-            <Link href="/edge" className="text-ink hover:text-hazard transition-colors">EDGE.COMPILER</Link>
-          </div>
-        </div>
-      </motion.nav>
 
       <motion.div 
         variants={staggerContainer}