diff --git a/README.md b/README.md
index 97839cb7..522f3270 100644
--- a/README.md
+++ b/README.md
@@ -670,6 +670,108 @@ asyncio.run(stream())
 
 </details>
 
+<details>
+<summary><strong>Running on macOS</strong> — Live WiFi sensing with CoreWLAN (no ESP32 needed)</summary>
+
+macOS can capture real RSSI, noise floor, and TX rate from your Mac's WiFi hardware via CoreWLAN. A Swift helper + Python bridge repackages these readings as ESP32-format CSI frames, feeding them to the sensing server over UDP.
+
+### Prerequisites
+
+- **macOS** 10.15+ (Catalina or later)
+- **Rust** 1.70+ (`curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh`)
+- **Python 3** (pre-installed on macOS)
+- **Xcode Command Line Tools** (`xcode-select --install`)
+- **WiFi Location Services** must be enabled (System Settings → Privacy & Security → Location Services → enable for Terminal)
+
+### Step 1: Build the Rust sensing server
+
+```bash
+cd rust-port/wifi-densepose-rs
+cargo build --release -p wifi-densepose-sensing-server
+```
+
+### Step 2: Compile the macOS WiFi helper
+
+```bash
+swiftc -O -framework CoreWLAN -framework Foundation \
+  v1/src/sensing/mac_wifi.swift -o mac_wifi
+```
+
+This produces a `mac_wifi` binary that reads RSSI, noise, and TX rate from your Mac's WiFi interface at ~100 Hz and outputs JSON lines.
+
+### Step 3: Start the sensing server
+
+```bash
+cd rust-port/wifi-densepose-rs
+cargo run --release -p wifi-densepose-sensing-server
+```
+
+The server starts in **auto** mode: it listens on UDP port 5005 for live data and falls back to simulation if nothing arrives within 2 seconds. Once running you'll see:
+
+```
+HTTP server listening on 0.0.0.0:8080
+WebSocket server listening on 0.0.0.0:8765
+UDP listening on 0.0.0.0:5005 for ESP32 CSI frames
+```
+
+### Step 4: Start the WiFi bridge (separate terminal)
+
+```bash
+python3 scripts/macos_wifi_bridge.py --mac-wifi ./mac_wifi --port 5005
+```
+
+The bridge captures live WiFi readings and sends them to the sensing server. You should see:
+
+```
+[bridge] Starting mac_wifi helper: ./mac_wifi
+[bridge] Sending ESP32 frames to 127.0.0.1:5005
+[bridge] #    1  RSSI= -30 dBm  noise= -72 dBm  tx_rate= 144.0 Mbps  frame=132 bytes
+```
+
+The sensing server **hot-plugs** automatically — it switches from simulation to live data as soon as UDP frames arrive.
+
+### Step 5: Open the UI
+
+Open http://localhost:8080/ui/index.html in your browser.
+
+### One-command startup
+
+To start everything at once from the repo root:
+
+```bash
+bash run_all.sh &
+sleep 10  # wait for build + server startup
+python3 scripts/macos_wifi_bridge.py --mac-wifi ./mac_wifi --port 5005
+```
+
+### What macOS WiFi provides vs ESP32
+
+| Capability | macOS CoreWLAN | ESP32-S3 CSI |
+|------------|---------------|--------------|
+| RSSI (signal strength) | Yes | Yes |
+| Noise floor | Yes | Yes |
+| TX rate | Yes | Yes |
+| Per-subcarrier amplitude | No | Yes (56-192 subcarriers) |
+| Per-subcarrier phase | No | Yes |
+| Pose estimation | No (RSSI-only) | Yes (full CSI) |
+| Breathing detection | Coarse (RSSI variance) | Yes (sub-Hz phase) |
+| Heart rate | No | Yes (micro-Doppler) |
+| Presence / motion | Yes | Yes |
+
+macOS provides RSSI-level sensing — good for presence detection, coarse motion, and environment monitoring. For full pose estimation and vital signs, ESP32-S3 hardware is required.
+
+### Troubleshooting
+
+| Issue | Fix |
+|-------|-----|
+| `No WiFi interface found` | Enable WiFi; grant Location Services permission to Terminal |
+| Server stays in simulation mode | Start the bridge *after* the server is listening on port 5005 |
+| `Permission denied` on `mac_wifi` | Run `chmod +x mac_wifi` |
+| Bridge shows no output | Ensure `mac_wifi` binary exists and is compiled for your architecture (`file mac_wifi`) |
+| Port 8080 already in use | Kill previous server: `lsof -ti:8080 \| xargs kill` |
+
+</details>
+
 ---
 
 ## 📋 Table of Contents
diff --git a/mac_wifi b/mac_wifi
new file mode 100755
index 00000000..22cddf6c
Binary files /dev/null and b/mac_wifi differ
diff --git a/run_all.sh b/run_all.sh
new file mode 100755
index 00000000..f50d06c2
--- /dev/null
+++ b/run_all.sh
@@ -0,0 +1,16 @@
+#!/usr/bin/env bash
+set -e
+
+# Build the sensing server (wifi-densepose-api is a lib stub, no binary)
+cd rust-port/wifi-densepose-rs
+cargo build --release -p wifi-densepose-sensing-server
+
+# Start sensing server (serves REST + WebSocket + UI)
+cargo run --release -p wifi-densepose-sensing-server &
+SENSE_PID=$!
+
+echo "Sensing server PID=$SENSE_PID"
+echo "Open: http://localhost:8080/ui/index.html"
+
+# Keep shell alive
+wait $SENSE_PID
diff --git a/rust-port/wifi-densepose-rs/crates/wifi-densepose-sensing-server/src/main.rs b/rust-port/wifi-densepose-rs/crates/wifi-densepose-sensing-server/src/main.rs
index 3da1a23e..29a1532e 100644
--- a/rust-port/wifi-densepose-rs/crates/wifi-densepose-sensing-server/src/main.rs
+++ b/rust-port/wifi-densepose-rs/crates/wifi-densepose-sensing-server/src/main.rs
@@ -324,6 +324,9 @@ struct AppStateInner {
     training_status: String,
     /// Training configuration, if any.
     training_config: Option<serde_json::Value>,
+    /// Set to true when real ESP32/bridge frames arrive on UDP — simulation task
+    /// will stop generating data so the real source takes over.
+    real_data_active: bool,
 }
 
 /// Number of frames retained in `frame_history` for temporal analysis.
@@ -2482,6 +2485,10 @@ async fn udp_receiver_task(state: SharedState, udp_port: u16) {
                            frame.node_id, frame.n_subcarriers, frame.sequence);
 
                     let mut s = state.write().await;
+                    if !s.real_data_active {
+                        info!("Real ESP32/bridge data detected — overriding simulation");
+                        s.real_data_active = true;
+                    }
                     s.source = "esp32".to_string();
 
                     // Append current amplitudes to history before extracting features so
@@ -2582,6 +2589,14 @@ async fn simulated_data_task(state: SharedState, tick_ms: u64) {
     loop {
         interval.tick().await;
 
+        // Yield to real data when available
+        {
+            let s = state.read().await;
+            if s.real_data_active {
+                continue;
+            }
+        }
+
         let mut s = state.write().await;
         s.tick += 1;
         let tick = s.tick;
@@ -3278,6 +3293,7 @@ async fn main() {
         // Training
         training_status: "idle".to_string(),
         training_config: None,
+        real_data_active: false,
     }));
 
     // Start background tasks based on source
@@ -3290,7 +3306,11 @@ async fn main() {
             tokio::spawn(windows_wifi_task(state.clone(), args.tick_ms));
         }
         _ => {
+            // Run simulation as fallback, but ALSO listen on UDP so that if
+            // real ESP32/bridge frames arrive later they override simulated data.
             tokio::spawn(simulated_data_task(state.clone(), args.tick_ms));
+            tokio::spawn(udp_receiver_task(state.clone(), args.udp_port));
+            info!("UDP listener also started — real frames will override simulation");
         }
     }
 
diff --git a/scripts/macos_wifi_bridge.py b/scripts/macos_wifi_bridge.py
new file mode 100644
index 00000000..e4ee6b6c
--- /dev/null
+++ b/scripts/macos_wifi_bridge.py
@@ -0,0 +1,148 @@
+#!/usr/bin/env python3
+"""
+macOS WiFi → UDP bridge for the WiFi-DensePose sensing server.
+
+Reads real RSSI/noise/tx_rate from the compiled mac_wifi Swift helper and
+packs each reading into the ESP32 binary frame format expected by the
+sensing server's UDP listener on port 5005.
+
+The server auto-detects these frames and switches from simulation to live
+WiFi data (hot-plug).
+
+Usage:
+    python3 scripts/macos_wifi_bridge.py [--mac-wifi ./mac_wifi] [--port 5005]
+"""
+
+import argparse
+import json
+import math
+import socket
+import struct
+import subprocess
+import sys
+import time
+
+
+MAGIC = 0xC511_0001
+NODE_ID = 1
+N_ANTENNAS = 1
+N_SUBCARRIERS = 56  # match simulated frame size
+
+UDP_HOST = "127.0.0.1"
+
+
+def build_esp32_frame(seq: int, rssi: float, noise: float, tx_rate: float) -> bytes:
+    """Pack a WiFi reading into the binary ESP32 frame format.
+
+    Layout (little-endian):
+        [0:4]   u32  magic        0xC5110001
+        [4]     u8   node_id
+        [5]     u8   n_antennas
+        [6]     u8   n_subcarriers
+        [7]     u8   (reserved)
+        [8:10]  u16  freq_mhz
+        [10:14] u32  sequence
+        [14]    i8   rssi
+        [15]    i8   noise_floor
+        [16:20] (reserved / padding)
+        [20..]  i8 pairs (I, Q) × n_antennas × n_subcarriers
+
+    We synthesize per-subcarrier I/Q values from the RSSI + noise so the
+    server's feature extractor has plausible amplitude/phase distributions.
+    """
+    rssi_i8 = max(-128, min(127, int(rssi)))
+    noise_i8 = max(-128, min(127, int(noise)))
+
+    # Derive a base amplitude from RSSI (higher RSSI → larger amplitude)
+    snr = max(rssi - noise, 1.0)
+    base_amp = snr / 2.0  # scale into a reasonable I/Q range
+
+    # 20-byte header matching parse_esp32_frame() layout exactly:
+    #   [0:4]  u32 LE magic, [4] node_id, [5] n_antennas, [6] n_subcarriers,
+    #   [7] reserved, [8:10] u16 LE freq_mhz, [10:14] u32 LE sequence,
+    #   [14] i8 rssi, [15] i8 noise_floor, [16:20] reserved
+    header = struct.pack(
+        "<IBBBBHIbb4x",
+        MAGIC,
+        NODE_ID,
+        N_ANTENNAS,
+        N_SUBCARRIERS,
+        0,              # reserved
+        2437,           # freq_mhz (channel 6, 2.4 GHz)
+        seq,
+        rssi_i8,
+        noise_i8,
+    )
+
+    t = time.time()
+    rate_factor = tx_rate / 400.0 if tx_rate > 0 else 0.5
+
+    iq_data = bytearray()
+    for i in range(N_SUBCARRIERS):
+        phase = math.sin(i * 0.2 + t * 0.5) * math.pi
+        amp = base_amp * (0.8 + 0.4 * math.sin(i * 0.15 + t * 0.3)) * rate_factor
+        amp = max(1.0, min(127.0, amp))
+        i_val = int(amp * math.cos(phase))
+        q_val = int(amp * math.sin(phase))
+        i_val = max(-128, min(127, i_val))
+        q_val = max(-128, min(127, q_val))
+        iq_data.append(i_val & 0xFF)
+        iq_data.append(q_val & 0xFF)
+
+    return header + bytes(iq_data)
+
+
+def main():
+    parser = argparse.ArgumentParser(description="macOS WiFi → sensing server bridge")
+    parser.add_argument("--mac-wifi", default="./mac_wifi", help="Path to mac_wifi binary")
+    parser.add_argument("--port", type=int, default=5005, help="UDP port for sensing server")
+    args = parser.parse_args()
+
+    sock = socket.socket(socket.AF_INET, socket.SOCK_DGRAM)
+    print(f"[bridge] Starting mac_wifi helper: {args.mac_wifi}")
+    print(f"[bridge] Sending ESP32 frames to {UDP_HOST}:{args.port}")
+
+    proc = subprocess.Popen(
+        [args.mac_wifi],
+        stdout=subprocess.PIPE,
+        stderr=subprocess.PIPE,
+        text=True,
+        bufsize=1,
+        env={**__import__("os").environ, "NSUnbufferedIO": "YES"},
+    )
+
+    sys.stdout.reconfigure(line_buffering=True) if hasattr(sys.stdout, "reconfigure") else None
+
+    seq = 0
+    try:
+        for line in proc.stdout:
+            line = line.strip()
+            if not line or not line.startswith("{"):
+                continue
+            try:
+                data = json.loads(line)
+            except json.JSONDecodeError:
+                continue
+
+            rssi = data.get("rssi", -70)
+            noise = data.get("noise", -90)
+            tx_rate = data.get("tx_rate", 0.0)
+            seq += 1
+
+            frame = build_esp32_frame(seq, rssi, noise, tx_rate)
+            sock.sendto(frame, (UDP_HOST, args.port))
+
+            if seq % 10 == 1:
+                print(f"[bridge] #{seq:>5d}  RSSI={rssi:>4d} dBm  noise={noise:>4d} dBm  "
+                      f"tx_rate={tx_rate:>6.1f} Mbps  frame={len(frame)} bytes")
+
+    except KeyboardInterrupt:
+        print("\n[bridge] Stopped.")
+    finally:
+        proc.terminate()
+        proc.wait()
+        sock.close()
+
+
+if __name__ == "__main__":
+    main()
diff --git a/ui/README.md b/ui/README.md
index e337ad5a..d7fb6827 100644
--- a/ui/README.md
+++ b/ui/README.md
@@ -1,96 +1,138 @@
 # WiFi DensePose UI
 
-A modular, modern web interface for the WiFi DensePose human tracking system. Provides real-time monitoring, WiFi sensing visualization, and pose estimation from CSI (Channel State Information).
+A modular, modern web interface for the WiFi DensePose human tracking system. Provides real-time monitoring, WiFi sensing visualization, 3D pose estimation, vital sign tracking, and model training — all driven by live CSI (Channel State Information) from ESP32 hardware or the macOS WiFi bridge.
 
 ## Architecture
 
-The UI follows a modular architecture with clear separation of concerns:
-
 ```
 ui/
 ├── app.js                    # Main application entry point
-├── index.html                # HTML shell with tab structure
+├── index.html                # HTML shell with tab structure (System dashboard)
+├── home.html                 # Consumer-friendly home page (presence, vitals, signal quality)
+├── viz.html                  # 3D pose visualization (Three.js + WebSocket integration)
+├── sensing-dashboard.html    # Technical sensing dashboard (spectrum, waterfall, heatmap)
 ├── style.css                 # Complete CSS design system
+├── start-ui.sh               # Quick-start shell script
 ├── config/
 │   └── api.config.js         # API endpoints and configuration
 ├── services/
-│   ├── api.service.js        # HTTP API client
-│   ├── websocket.service.js  # WebSocket connection manager
-│   ├── websocket-client.js   # Low-level WebSocket client
-│   ├── pose.service.js       # Pose estimation API wrapper
-│   ├── sensing.service.js    # WiFi sensing data service (live + simulation fallback)
-│   ├── health.service.js     # Health monitoring API wrapper
-│   ├── stream.service.js     # Streaming API wrapper
-│   └── data-processor.js     # Signal data processing utilities
+│   ├── api.service.js         # HTTP API client
+│   ├── websocket.service.js   # WebSocket connection manager (sensing tab)
+│   ├── websocket-client.js    # WebSocket client for 3D viz (pose stream, source tracking)
+│   ├── pose.service.js        # Pose estimation API wrapper
+│   ├── sensing.service.js     # WiFi sensing data service (live + simulation fallback)
+│   ├── health.service.js      # Health monitoring API wrapper
+│   ├── stream.service.js      # Streaming API wrapper
+│   ├── data-processor.js      # Signal data processing (keypoint normalization, heatmaps)
+│   ├── model.service.js       # RVF model management (load, list, LoRA profiles)
+│   └── training.service.js    # Training lifecycle, CSI recording, progress streaming
 ├── components/
-│   ├── TabManager.js         # Tab navigation component
-│   ├── DashboardTab.js       # Dashboard with live system metrics
-│   ├── SensingTab.js         # WiFi sensing visualization (3D signal field, metrics)
-│   ├── LiveDemoTab.js        # Live pose detection with setup guide
-│   ├── HardwareTab.js        # Hardware configuration
-│   ├── SettingsPanel.js      # Settings panel
+│   ├── TabManager.js          # Tab navigation component
+│   ├── DashboardTab.js        # Dashboard with live system metrics
+│   ├── SensingTab.js          # WiFi sensing visualization (3D signal field, metrics)
+│   ├── LiveDemoTab.js         # Live pose detection with setup guide
+│   ├── HardwareTab.js         # Hardware configuration
+│   ├── SettingsPanel.js       # Settings panel
+│   ├── ModelPanel.js          # Model management panel (list, load, LoRA profiles)
+│   ├── TrainingPanel.js       # Training panel (record CSI, train, progress charts)
 │   ├── PoseDetectionCanvas.js # Canvas-based pose skeleton renderer
-│   ├── gaussian-splats.js    # 3D Gaussian splat signal field renderer (Three.js)
-│   ├── body-model.js         # 3D body model
-│   ├── scene.js              # Three.js scene management
-│   ├── signal-viz.js         # Signal visualization utilities
-│   ├── environment.js        # Environment/room visualization
-│   └── dashboard-hud.js      # Dashboard heads-up display
+│   ├── gaussian-splats.js     # 3D Gaussian splat signal field renderer (Three.js)
+│   ├── body-model.js          # 3D body model (COCO 17-keypoint skeleton)
+│   ├── scene.js               # Three.js scene management (renderer, camera, controls)
+│   ├── signal-viz.js          # Signal visualization (Doppler, amplitude, phase rings)
+│   ├── environment.js         # Environment/room visualization (APs, zones, heatmap)
+│   └── dashboard-hud.js       # HUD overlay (FPS, connection, source, confidence)
 ├── utils/
-│   ├── backend-detector.js   # Auto-detect backend availability
-│   ├── mock-server.js        # Mock server for testing
-│   └── pose-renderer.js      # Pose rendering utilities
+│   ├── backend-detector.js    # Auto-detect backend availability
+│   ├── mock-server.js         # Mock server for testing
+│   └── pose-renderer.js       # Pose rendering utilities
+├── mobile/                    # React Native mobile app (Expo)
+│   ├── App.tsx                # Mobile entry point
+│   ├── e2e/                   # Maestro E2E test flows
+│   └── ...
 └── tests/
     ├── test-runner.html       # Test runner UI
     ├── test-runner.js         # Test framework and cases
     └── integration-test.html  # Integration testing page
 ```
 
-## Features
-
-### WiFi Sensing Tab
-- 3D Gaussian-splat signal field visualization (Three.js)
-- Real-time RSSI, variance, motion band, breathing band metrics
-- Presence/motion classification with confidence scores
-- **Data source banner**: green "LIVE - ESP32", yellow "RECONNECTING...", or red "SIMULATED DATA"
-- Sparkline RSSI history graph
-- "About This Data" card explaining CSI capabilities per sensor count
-
-### Live Demo Tab
-- WebSocket-based real-time pose skeleton rendering
-- **Estimation Mode badge**: green "Signal-Derived" or blue "Model Inference"
-- **Setup Guide panel** showing what each ESP32 count provides:
-  - 1 ESP32: presence, breathing, gross motion
-  - 2-3 ESP32s: body localization, motion direction
-  - 4+ ESP32s + trained model: individual limb tracking, full pose
-- Debug mode with log export
-- Zone selection and force-reconnect controls
-- Performance metrics sidebar (frames, uptime, errors)
-
-### Dashboard
-- Live system health monitoring
-- Real-time pose detection statistics
-- Zone occupancy tracking
-- System metrics (CPU, memory, disk)
-- API status indicators
-
-### Hardware Configuration
-- Interactive antenna array visualization
-- Real-time CSI data display
-- Configuration panels
-- Hardware status monitoring
+## Pages
+
+### Home (`home.html`)
+Consumer-friendly dashboard designed for non-technical users.
+- **Presence hero**: large animated indicator showing room occupancy status
+- **Vital signs**: breathing rate (animated lung ring) and heart rate (pulsing heart ring) with confidence bars
+- **Signal quality**: 5-bar strength meter, RSSI value, and data source indicator
+- **Environment details**: motion energy, dominant frequency, variability, change events
+- **Activity timeline**: color-coded motion bar chart (blue=calm, green=moving, amber=walking)
+- Live WebSocket connection to `/ws/sensing`
+
+### 3D Visualization (`viz.html`)
+Full 3D pose visualization powered by Three.js with real server integration.
+- **Three.js scene**: room environment with access point models, zone overlays, confidence heatmap
+- **Body model**: COCO 17-keypoint skeleton driven by live pose data from the server
+- **Signal visualization**: Doppler spectrum, amplitude rings, phase indicators
+- **Dashboard HUD overlay**: connection status, FPS, person count, confidence, sensing mode
+- **Auto data source detection**: connects to `ws://<host>/api/v1/stream/pose`, automatically switches from demo mode to live server data when pose frames arrive
+- **Sensing mode display**: shows actual source (CSI, Simulated, WiFi) instead of hardcoded labels
+- **Keypoint normalization**: auto-detects pixel coordinates from server and normalizes to [0,1] for the body model
+- Keyboard shortcuts: `R` reset camera, `D` toggle demo, `C` force reconnect
+
+### Sensing Dashboard (`sensing-dashboard.html`)
+Technical dashboard for signal engineers.
+- **RSSI chart**: live signal strength timeline
+- **Subcarrier spectrum**: 56-channel amplitude bar chart
+- **Vital signs chart**: overlaid breathing + heart rate timelines
+- **Subcarrier waterfall**: time-frequency spectrogram
+- **Motion timeline**: color-coded motion energy bars with walking threshold
+- **Signal field heatmap**: 20x20 spatial grid with peak marker
+- **Classification badge**: ABSENT / STILL / MOVING / WALKING with confidence
+
+### System Dashboard (`index.html`)
+Multi-tab system overview.
+- **Dashboard**: system health, API status, live statistics, zone occupancy, benefit cards
+- **Hardware**: interactive 3x3 antenna array, CSI data display, WiFi config
+- **Live Demo**: WebSocket pose skeleton with setup guide and debug mode
+- **Architecture**: pipeline flow diagram (CSI -> Phase Sanitization -> CNN -> DensePose-RCNN)
+- **Performance**: AP metrics comparison (WiFi vs image-based)
+- **Applications**: use case cards (elderly care, security, healthcare, smart building, AR/VR)
+- **Sensing**: WiFi sensing visualization tab
+- **Training**: CSI recording, model training with progress charts, RVF model management
+
+## Data Flow
+
+### Real Integration (ESP32 / WiFi Bridge)
 
-## Data Sources
+```
+ESP32/Bridge ──UDP:5005──> Rust Server ──WS──> UI
+                              │
+                              ├── /ws/sensing           → home.html, sensing-dashboard.html
+                              └── /api/v1/stream/pose   → viz.html (pose_data messages)
+```
+
+The server converts raw `sensing_update` broadcasts into `pose_data` messages for the 3D viz:
+1. `udp_receiver_task` parses ESP32 CSI frames, extracts features, classifies presence
+2. `broadcast_tick_task` sends sensing updates via broadcast channel
+3. `ws_pose_handler` subscribes, converts to COCO 17-keypoint pose, sends to viz clients
+4. `data-processor.js` normalizes keypoints (pixel coords -> [0,1]) and extracts metadata
+5. `viz.html` switches from demo mode to live mode when persons are detected
+
+### Simulation Fallback
 
-The sensing service (`sensing.service.js`) supports three connection states:
+When no hardware is detected, the server generates simulated CSI data. The UDP listener still runs in the background, so if real frames arrive later (e.g. WiFi bridge starts after the server), the simulation automatically yields and real data takes over.
 
-| State | Banner Color | Description |
-|-------|-------------|-------------|
-| **LIVE - ESP32** | Green | Connected to the Rust sensing server receiving real CSI data |
-| **RECONNECTING** | Yellow (pulsing) | WebSocket disconnected, retrying (up to 20 attempts) |
-| **SIMULATED DATA** | Red | Fallback to client-side simulation after 5+ failed reconnects |
+### Demo Mode (Client-Side)
 
-Simulated frames include a `_simulated: true` marker so code can detect synthetic data.
+If the WebSocket connection fails entirely, `viz.html` falls back to client-side demo mode with pre-recorded pose cycles (standing, walking, arms raised, sitting, waving).
+
+## Data Sources
+
+| Source | HUD Label | Description |
+|--------|-----------|-------------|
+| **ESP32 CSI** | CSI | Real CSI frames from ESP32 hardware via UDP |
+| **macOS WiFi Bridge** | CSI | `macos_wifi_bridge.py` captures native WiFi frames, sends as ESP32-format UDP |
+| **Simulated** | Simulated | Server-generated synthetic CSI (fallback when no hardware) |
+| **Demo** | Demo | Client-side pre-recorded poses (WebSocket disconnected) |
 
 ## Backends
 
@@ -100,15 +142,27 @@ The Rust-based `wifi-densepose-sensing-server` serves the UI and provides:
 - `GET /api/v1/sensing/latest` — latest sensing features
 - `GET /api/v1/vital-signs` — vital sign estimates (HR/RR)
 - `GET /api/v1/model/info` — RVF model container info
-- `WS /ws/sensing` — real-time sensing data stream
-- `WS /api/v1/stream/pose` — real-time pose keypoint stream
+- `GET /api/v1/models` — list discovered RVF models
+- `GET /api/v1/models/active` — currently loaded model
+- `GET /api/v1/pose/latest` — latest pose detection
+- `GET /api/v1/pose/stats` — pose detection statistics
+- `GET /api/v1/pose/zones/summary` — zone occupancy summary
+- `WS /ws/sensing` — real-time sensing data stream (features, classification, vitals)
+- `WS /api/v1/stream/pose` — real-time pose keypoint stream (COCO 17-keypoint format)
 
 ### Python FastAPI (legacy)
 The original Python backend on port 8000 is still supported. The UI auto-detects which backend is available via `backend-detector.js`.
 
 ## Quick Start
 
-### With Docker (recommended)
+### With the run_all.sh script
+```bash
+# Builds the Rust server, starts it on port 8080, optionally starts the WiFi bridge
+bash run_all.sh
+```
+Open http://localhost:8080/ui/home.html
+
+### With Docker
 ```bash
 cd docker/
 
@@ -121,43 +175,66 @@ CSI_SOURCE=esp32 docker-compose up
 # Force simulation (no hardware needed)
 CSI_SOURCE=simulated docker-compose up
 ```
-Open http://localhost:3000/ui/index.html
+Open http://localhost:3000/ui/home.html
 
 ### With local Rust binary
 ```bash
 cd rust-port/wifi-densepose-rs
-cargo build -p wifi-densepose-sensing-server --no-default-features
+cargo build --release -p wifi-densepose-sensing-server --no-default-features
+
+# Auto-detect (simulation + background UDP listener for real hardware)
+./target/release/sensing-server --ui-path ../../ui
 
-# Run with simulated data
-../../target/debug/sensing-server --source simulated --tick-ms 100 --ui-path ../../ui --http-port 3000
+# Force ESP32 mode
+./target/release/sensing-server --source esp32 --ui-path ../../ui
 
-# Run with real ESP32
-../../target/debug/sensing-server --source esp32 --tick-ms 100 --ui-path ../../ui --http-port 3000
+# With a trained model for full pose inference
+./target/release/sensing-server --source esp32 --model path/to/model.rvf --ui-path ../../ui
 ```
-Open http://localhost:3000/ui/index.html
+Open http://localhost:8080/ui/home.html
 
-### With Python HTTP server (legacy)
+### With macOS WiFi Bridge (no ESP32 hardware needed)
 ```bash
-# Start FastAPI backend on port 8000
-wifi-densepose start
+# Terminal 1: start the server
+./target/release/sensing-server --ui-path ../../ui
 
-# Serve the UI on port 3000
-cd ui/
-python -m http.server 3000
+# Terminal 2: start the WiFi bridge (captures native macOS WiFi frames)
+python3 scripts/macos_wifi_bridge.py --mac-wifi ./mac_wifi --port 5005
 ```
-Open http://localhost:3000
+The server auto-detects bridge frames on UDP:5005 and switches from simulation to real data.
 
 ## Pose Estimation Modes
 
-| Mode | Badge | Requirements | Accuracy |
-|------|-------|-------------|----------|
-| **Signal-Derived** | Green | 1+ ESP32, no model needed | Presence, breathing, gross motion |
-| **Model Inference** | Blue | 4+ ESP32s + trained `.rvf` model | Full 17-keypoint COCO pose |
-
-To use model inference, start the server with a trained model:
-```bash
-sensing-server --source esp32 --model path/to/model.rvf --ui-path ./ui
-```
+| Mode | HUD Badge | Requirements | Accuracy |
+|------|-----------|-------------|----------|
+| **Signal-Derived** | Simulated/CSI | 1+ ESP32, no model needed | Presence, breathing, gross motion, signal-derived skeleton |
+| **Model Inference** | CSI | 4+ ESP32s + trained `.rvf` model | Full 17-keypoint COCO pose with limb tracking |
+
+## Key Services
+
+### `websocket-client.js`
+Low-level WebSocket client for the 3D viz page. Features:
+- Auto-reconnect with exponential backoff (500ms to 30s, up to 15 attempts)
+- Heartbeat ping/pong every 25s
+- `dataSource` property tracks actual server source string (`"esp32"`, `"simulated"`, etc.)
+- `isRealData` flag properly detects server data via `payload.metadata.source`
+- Connection metrics: message count, latency, bytes received, uptime
+
+### `data-processor.js`
+Transforms server pose messages into Three.js-ready data. Features:
+- Handles both `data` and `payload` message formats
+- Auto-normalizes pixel coordinates to [0,1] (detects values >1.5 as pixel coords)
+- Generates confidence heatmaps from person positions
+- Demo mode with smoothly interpolated pre-recorded COCO poses
+- Source-to-mode mapping: `esp32`->`CSI`, `simulated`->`Simulated`, `wifi`->`WiFi`
+
+### `model.service.js` / `training.service.js`
+Model management and training lifecycle:
+- List, load, and switch between RVF models
+- LoRA profile management
+- CSI recording start/stop with server-side persistence
+- Training progress streaming via WebSocket
+- Training configuration (epochs, learning rate, batch size)
 
 ## Configuration
 
@@ -176,6 +253,18 @@ export const API_CONFIG = {
 };
 ```
 
+### Server CLI flags
+
+| Flag | Default | Description |
+|------|---------|-------------|
+| `--http-port` | 8080 | HTTP server port |
+| `--ws-port` | 8765 | Dedicated WebSocket port |
+| `--udp-port` | 5005 | UDP port for ESP32 CSI frames |
+| `--ui-path` | `../../ui` | Path to UI static files |
+| `--source` | `auto` | Data source: `auto`, `esp32`, `wifi`, `simulate` |
+| `--tick-ms` | 100 | Tick interval (100ms = 10 fps) |
+| `--model` | — | Path to trained `.rvf` model file |
+
 ## Testing
 
 Open `tests/test-runner.html` to run the test suite:
@@ -188,9 +277,13 @@ python -m http.server 3000
 
 Test categories: API configuration, API service, WebSocket, pose service, health service, UI components, integration.
 
+## Mobile App
+
+A React Native (Expo) companion app lives in `mobile/`. See `mobile/README.md` for setup. Includes Maestro E2E tests for live, MAT, vitals, zones, settings, and offline screens.
+
 ## Styling
 
-Uses a CSS design system with custom properties, dark/light mode, responsive layout, and component-based styling. Key variables in `:root` of `style.css`.
+Uses a CSS design system with custom properties, dark/light mode, responsive layout, and component-based styling. Key variables in `:root` of `style.css`. The `home.html` and `sensing-dashboard.html` pages use self-contained inline styles for standalone operation.
 
 ## License
 
diff --git a/ui/app.js b/ui/app.js
index a1c94ded..6dc8817c 100644
--- a/ui/app.js
+++ b/ui/app.js
@@ -72,6 +72,7 @@ class WiFiDensePoseApp {
         const health = await healthService.checkLiveness();
         console.log('✅ Backend responding:', health);
         this.showBackendStatus('Connected to Rust sensing server', 'success');
+        sensingService.start();
       } catch (error) {
         console.warn('⚠️ Backend not available:', error.message);
         this.showBackendStatus('Backend unavailable — start sensing-server', 'warning');
diff --git a/ui/home.html b/ui/home.html
new file mode 100644
index 00000000..f964f776
--- /dev/null
+++ b/ui/home.html
@@ -0,0 +1,382 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>WIFI - DensePose — Home</title>
+<style>
+*{margin:0;padding:0;box-sizing:border-box}
+body{background:#0f1117;color:#e4e4e7;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;min-height:100vh}
+
+/* Top bar */
+.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;background:#18181b;border-bottom:1px solid #27272a}
+.topbar-left{display:flex;align-items:center;gap:12px}
+.logo{font-size:18px;font-weight:700;background:linear-gradient(135deg,#06b6d4,#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
+.conn-pill{display:flex;align-items:center;gap:6px;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:500;background:#27272a}
+.conn-dot{width:7px;height:7px;border-radius:50%}
+.conn-dot.on{background:#22c55e;box-shadow:0 0 8px #22c55e}
+.conn-dot.off{background:#ef4444;box-shadow:0 0 8px #ef4444}
+.conn-dot.wait{background:#eab308;box-shadow:0 0 8px #eab308}
+.topbar-right{display:flex;gap:8px}
+.topbar-right a{color:#a1a1aa;text-decoration:none;font-size:12px;padding:6px 12px;border-radius:6px;transition:all .15s}
+.topbar-right a:hover{color:#e4e4e7;background:#27272a}
+
+/* Layout */
+.page{max-width:1100px;margin:0 auto;padding:24px 20px 60px}
+
+/* Presence hero */
+.presence-hero{text-align:center;padding:48px 20px 40px;border-radius:16px;margin-bottom:24px;position:relative;overflow:hidden}
+.presence-hero.empty{background:linear-gradient(145deg,#18181b 0%,#1c1c22 100%);border:1px solid #27272a}
+.presence-hero.occupied{background:linear-gradient(145deg,#042f2e 0%,#064e3b 100%);border:1px solid #065f46}
+.presence-icon{font-size:64px;margin-bottom:12px;opacity:.9}
+.presence-label{font-size:28px;font-weight:700;margin-bottom:4px}
+.presence-sub{font-size:14px;color:#a1a1aa}
+.presence-hero.occupied .presence-sub{color:#6ee7b7}
+
+/* Activity pill */
+.activity-pill{display:inline-flex;align-items:center;gap:6px;margin-top:16px;padding:6px 18px;border-radius:20px;font-size:13px;font-weight:600;letter-spacing:.5px}
+.activity-pill.absent{background:#27272a;color:#71717a}
+.activity-pill.still{background:#164e63;color:#67e8f9}
+.activity-pill.moving{background:#14532d;color:#86efac}
+.activity-pill.walking{background:#713f12;color:#fde68a}
+
+/* Cards grid */
+.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px}
+@media(max-width:800px){.cards{grid-template-columns:1fr 1fr}}
+@media(max-width:520px){.cards{grid-template-columns:1fr}}
+
+.card{background:#18181b;border:1px solid #27272a;border-radius:14px;padding:20px 22px;position:relative;transition:border-color .2s}
+.card:hover{border-color:#3f3f46}
+.card-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1.2px;color:#71717a;margin-bottom:12px}
+
+/* Vital card */
+.vital-value{font-size:40px;font-weight:700;line-height:1}
+.vital-unit{font-size:14px;font-weight:500;color:#71717a;margin-left:2px}
+.vital-conf{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12px;color:#a1a1aa}
+.vital-bar{flex:1;height:4px;background:#27272a;border-radius:2px;overflow:hidden}
+.vital-bar-fill{height:100%;border-radius:2px;transition:width .4s ease}
+
+/* Breathing animation */
+.breath-ring{width:80px;height:80px;border-radius:50%;border:3px solid #22d3ee;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;font-size:28px;animation:breathe 4s ease-in-out infinite;opacity:.85}
+@keyframes breathe{0%,100%{transform:scale(.92);opacity:.7}50%{transform:scale(1.08);opacity:1}}
+
+/* Heart pulse animation */
+.heart-ring{width:80px;height:80px;border-radius:50%;border:3px solid #f472b6;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;font-size:28px;animation:pulse 1s ease-in-out infinite;opacity:.85}
+@keyframes pulse{0%,100%{transform:scale(1)}15%{transform:scale(1.12)}30%{transform:scale(1)}}
+
+/* Signal quality */
+.signal-bars{display:flex;align-items:flex-end;gap:3px;height:28px;margin-bottom:8px}
+.signal-bar{width:6px;border-radius:2px;background:#27272a;transition:background .3s}
+.signal-bar.active{background:#22c55e}
+.signal-bar.warn{background:#eab308}
+.signal-bar.poor{background:#ef4444}
+
+/* Environment card */
+.env-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid #27272a;font-size:13px}
+.env-row:last-child{border:none}
+.env-key{color:#a1a1aa}
+.env-val{font-weight:600;color:#e4e4e7}
+
+/* Timeline */
+.timeline-section{margin-top:8px}
+.timeline-section .card-label{margin-bottom:14px}
+canvas{display:block;width:100%;border-radius:8px}
+
+/* Persons row */
+.wide{grid-column:1 / -1}
+</style>
+</head>
+<body>
+
+<div class="topbar">
+  <div class="topbar-left">
+    <div class="logo">WIfi DensePose</div>
+    <div class="conn-pill">
+      <span class="conn-dot wait" id="dot"></span>
+      <span id="connText">Connecting</span>
+    </div>
+  </div>
+  <div class="topbar-right">
+    <a href="index.html">System</a>
+    <a href="sensing-dashboard.html">Technical</a>
+    <a href="viz.html">3D View</a>
+  </div>
+</div>
+
+<div class="page">
+
+  <!-- Presence hero -->
+  <div class="presence-hero empty" id="hero">
+    <div class="presence-icon" id="heroIcon">📡</div>
+    <div class="presence-label" id="heroLabel">Scanning...</div>
+    <div class="presence-sub" id="heroSub">Waiting for sensor data</div>
+    <div class="activity-pill absent" id="activityPill">NO ACTIVITY</div>
+  </div>
+
+  <!-- Vital signs + signal -->
+  <div class="cards">
+
+    <div class="card">
+      <div class="card-label">Breathing Rate</div>
+      <div class="breath-ring" id="breathRing">🫁</div>
+      <div style="text-align:center">
+        <span class="vital-value" id="breathVal" style="color:#22d3ee">--</span>
+        <span class="vital-unit">breaths/min</span>
+      </div>
+      <div class="vital-conf">
+        <span id="breathConfLabel">--</span>
+        <div class="vital-bar"><div class="vital-bar-fill" id="breathBar" style="width:0%;background:#22d3ee"></div></div>
+      </div>
+    </div>
+
+    <div class="card">
+      <div class="card-label">Heart Rate</div>
+      <div class="heart-ring" id="heartRing">❤️</div>
+      <div style="text-align:center">
+        <span class="vital-value" id="heartVal" style="color:#f472b6">--</span>
+        <span class="vital-unit">bpm</span>
+      </div>
+      <div class="vital-conf">
+        <span id="heartConfLabel">--</span>
+        <div class="vital-bar"><div class="vital-bar-fill" id="heartBar" style="width:0%;background:#f472b6"></div></div>
+      </div>
+    </div>
+
+    <div class="card">
+      <div class="card-label">Signal Quality</div>
+      <div class="signal-bars" id="signalBars">
+        <div class="signal-bar" style="height:20%"></div>
+        <div class="signal-bar" style="height:40%"></div>
+        <div class="signal-bar" style="height:60%"></div>
+        <div class="signal-bar" style="height:80%"></div>
+        <div class="signal-bar" style="height:100%"></div>
+      </div>
+      <div class="vital-value" id="sigQual" style="font-size:32px">--<span class="vital-unit">%</span></div>
+      <div class="env-row" style="margin-top:12px;border:none;padding:4px 0">
+        <span class="env-key">Source</span>
+        <span class="env-val" id="sourceVal">--</span>
+      </div>
+      <div class="env-row" style="border:none;padding:4px 0">
+        <span class="env-key">RSSI</span>
+        <span class="env-val" id="rssiVal">-- dBm</span>
+      </div>
+    </div>
+
+  </div>
+
+  <!-- Environment details -->
+  <div class="cards">
+    <div class="card">
+      <div class="card-label">Environment</div>
+      <div class="env-row"><span class="env-key">Motion energy</span><span class="env-val" id="envMotion">--</span></div>
+      <div class="env-row"><span class="env-key">Dominant frequency</span><span class="env-val" id="envFreq">--</span></div>
+      <div class="env-row"><span class="env-key">Variability</span><span class="env-val" id="envVar">--</span></div>
+      <div class="env-row"><span class="env-key">Change events</span><span class="env-val" id="envChange">--</span></div>
+    </div>
+
+    <div class="card wide timeline-section">
+      <div class="card-label">Activity Timeline</div>
+      <canvas id="timelineCanvas" height="100"></canvas>
+    </div>
+  </div>
+
+</div>
+
+<script>
+const WS_URL = `${location.protocol === 'https:' ? 'wss:' : 'ws:'}//${location.host}/ws/sensing`;
+const $ = id => document.getElementById(id);
+
+const MAX = 90;
+const motionHist = [];
+const breathHist = [];
+const heartHist  = [];
+
+let ws, reconnTimer;
+
+function connect() {
+  ws = new WebSocket(WS_URL);
+  ws.onopen = () => {
+    $('dot').className = 'conn-dot on';
+    $('connText').textContent = 'Live';
+  };
+  ws.onclose = () => {
+    $('dot').className = 'conn-dot wait';
+    $('connText').textContent = 'Reconnecting';
+    reconnTimer = setTimeout(connect, 2000);
+  };
+  ws.onerror = () => {};
+  ws.onmessage = e => { try { update(JSON.parse(e.data)); } catch(_){} };
+}
+
+function update(d) {
+  if (d.type !== 'sensing_update') return;
+
+  const f  = d.features || {};
+  const cl = d.classification || {};
+  const vs = d.vital_signs || {};
+
+  // --- Presence hero ---
+  const present = cl.presence;
+  const level = cl.motion_level || 'absent';
+  const hero = $('hero');
+
+  if (present) {
+    hero.className = 'presence-hero occupied';
+    $('heroIcon').textContent = '🏠';
+    $('heroLabel').textContent = 'Someone is here';
+    $('heroSub').textContent = friendlyMotion(level);
+  } else {
+    hero.className = 'presence-hero empty';
+    $('heroIcon').textContent = '📡';
+    $('heroLabel').textContent = 'Room is empty';
+    $('heroSub').textContent = 'No presence detected';
+  }
+
+  const pill = $('activityPill');
+  pill.textContent = friendlyPillText(level, present);
+  pill.className = 'activity-pill ' + pillClass(level, present);
+
+  // --- Breathing ---
+  const br = vs.breathing_rate_bpm;
+  const bConf = vs.breathing_confidence || 0;
+  if (br != null) {
+    $('breathVal').textContent = br.toFixed(1);
+    $('breathConfLabel').textContent = confLabel(bConf);
+    $('breathBar').style.width = (bConf * 100) + '%';
+    const dur = Math.max(2, Math.min(8, 60 / br));
+    $('breathRing').style.animationDuration = dur.toFixed(1) + 's';
+    breathHist.push(br); if (breathHist.length > MAX) breathHist.shift();
+  }
+
+  // --- Heart rate ---
+  const hr = vs.heart_rate_bpm;
+  const hConf = vs.heartbeat_confidence || 0;
+  if (hr != null) {
+    $('heartVal').textContent = hr.toFixed(0);
+    $('heartConfLabel').textContent = confLabel(hConf);
+    $('heartBar').style.width = (hConf * 100) + '%';
+    const dur = Math.max(0.4, Math.min(1.5, 60 / hr));
+    $('heartRing').style.animationDuration = dur.toFixed(2) + 's';
+    heartHist.push(hr); if (heartHist.length > MAX) heartHist.shift();
+  }
+
+  // --- Signal quality ---
+  const rssi = f.mean_rssi || -80;
+  const quality = Math.min(100, Math.max(0, (rssi + 100) * 2));
+  $('sigQual').innerHTML = quality.toFixed(0) + '<span class="vital-unit">%</span>';
+  $('rssiVal').textContent = rssi.toFixed(0) + ' dBm';
+  $('sourceVal').textContent = friendlySource(d.source);
+  updateBars(quality);
+
+  // --- Environment ---
+  $('envMotion').textContent = friendlyEnergy(f.motion_band_power);
+  $('envFreq').textContent = (f.dominant_freq_hz?.toFixed(2) || '0') + ' Hz';
+  $('envVar').textContent = friendlyVariance(f.variance);
+  $('envChange').textContent = f.change_points || '0';
+
+  // --- Timeline ---
+  motionHist.push(f.motion_band_power || 0);
+  if (motionHist.length > MAX) motionHist.shift();
+  drawTimeline();
+}
+
+// --- Helpers ---
+function friendlyMotion(level) {
+  if (level.includes('walk')) return 'Walking activity detected';
+  if (level.includes('moving') || level.includes('active')) return 'Movement detected';
+  return 'Person detected — still';
+}
+function friendlyPillText(level, present) {
+  if (!present) return 'EMPTY';
+  if (level.includes('walk')) return 'WALKING';
+  if (level.includes('moving') || level.includes('active')) return 'MOVING';
+  return 'STILL';
+}
+function pillClass(level, present) {
+  if (!present) return 'absent';
+  if (level.includes('walk')) return 'walking';
+  if (level.includes('moving') || level.includes('active')) return 'moving';
+  return 'still';
+}
+function confLabel(c) {
+  if (c > 0.8) return 'Strong';
+  if (c > 0.5) return 'Good';
+  if (c > 0.2) return 'Weak';
+  return 'Low';
+}
+function friendlySource(s) {
+  if (!s) return '--';
+  if (s === 'esp32') return 'Live WiFi';
+  if (s === 'simulate') return 'Simulated';
+  if (s === 'wifi') return 'RSSI scan';
+  return s;
+}
+function friendlyEnergy(v) {
+  if (v == null) return '--';
+  if (v > 15) return 'High';
+  if (v > 5) return 'Moderate';
+  if (v > 1) return 'Low';
+  return 'Calm';
+}
+function friendlyVariance(v) {
+  if (v == null) return '--';
+  if (v > 20) return 'Very active';
+  if (v > 8) return 'Moderate';
+  if (v > 2) return 'Slight';
+  return 'Stable';
+}
+
+function updateBars(quality) {
+  const bars = $('signalBars').children;
+  const count = quality > 80 ? 5 : quality > 60 ? 4 : quality > 40 ? 3 : quality > 20 ? 2 : 1;
+  const cls = count >= 4 ? 'active' : count >= 3 ? 'warn' : 'poor';
+  for (let i = 0; i < bars.length; i++) {
+    bars[i].className = 'signal-bar' + (i < count ? ' ' + cls : '');
+  }
+}
+
+function drawTimeline() {
+  const cv = $('timelineCanvas');
+  const rect = cv.getBoundingClientRect();
+  if (cv.width !== rect.width * 2) { cv.width = rect.width * 2; cv.height = rect.height * 2; }
+  const ctx = cv.getContext('2d');
+  const w = cv.width, h = cv.height;
+  ctx.clearRect(0, 0, w, h);
+  if (motionHist.length < 2) return;
+
+  const maxM = 30;
+  const barW = w / MAX;
+
+  for (let i = 0; i < motionHist.length; i++) {
+    const val = Math.min(1, motionHist[i] / maxM);
+    const barH = val * h * 0.85;
+    const alpha = 0.3 + val * 0.5;
+
+    if (val > 0.5) ctx.fillStyle = `rgba(251,191,36,${alpha})`;
+    else if (val > 0.15) ctx.fillStyle = `rgba(52,211,153,${alpha})`;
+    else ctx.fillStyle = `rgba(99,102,241,${alpha})`;
+
+    const radius = Math.min(3, barW / 2);
+    const x = i * barW + 0.5;
+    const y = h - barH;
+    ctx.beginPath();
+    ctx.moveTo(x + radius, y);
+    ctx.lineTo(x + barW - 1 - radius, y);
+    ctx.quadraticCurveTo(x + barW - 1, y, x + barW - 1, y + radius);
+    ctx.lineTo(x + barW - 1, h);
+    ctx.lineTo(x, h);
+    ctx.lineTo(x, y + radius);
+    ctx.quadraticCurveTo(x, y, x + radius, y);
+    ctx.fill();
+  }
+
+  ctx.fillStyle = '#52525b';
+  ctx.font = (Math.round(h * 0.12)) + 'px -apple-system, sans-serif';
+  ctx.fillText('← older', 8, h * 0.13);
+  ctx.fillText('now →', w - 80, h * 0.13);
+}
+
+connect();
+</script>
+</body>
+</html>
diff --git a/ui/index.html b/ui/index.html
index 7216e941..19e4b0ba 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -21,6 +21,7 @@ <h1>WiFi DensePose</h1>
 
         <!-- Navigation -->
         <nav class="nav-tabs">
+            <a class="nav-tab" href="home.html" style="text-decoration:none">Home</a>
             <button class="nav-tab active" data-tab="dashboard">Dashboard</button>
             <button class="nav-tab" data-tab="hardware">Hardware</button>
             <button class="nav-tab" data-tab="demo">Live Demo</button>
@@ -29,6 +30,7 @@ <h1>WiFi DensePose</h1>
             <button class="nav-tab" data-tab="applications">Applications</button>
             <button class="nav-tab" data-tab="sensing">Sensing</button>
             <button class="nav-tab" data-tab="training">Training</button>
+            <a class="nav-tab" href="sensing-dashboard.html" style="text-decoration:none">Live Stats</a>
         </nav>
 
         <!-- Dashboard Tab -->
diff --git a/ui/sensing-dashboard.html b/ui/sensing-dashboard.html
new file mode 100644
index 00000000..c7c09b11
--- /dev/null
+++ b/ui/sensing-dashboard.html
@@ -0,0 +1,452 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>WiFi Sensing — Enhanced Dashboard</title>
+<style>
+*{margin:0;padding:0;box-sizing:border-box}
+body{background:#0a0e17;color:#c8d6e5;font-family:'SF Mono',Consolas,'Courier New',monospace;overflow-x:hidden}
+.grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;padding:12px;max-width:1600px;margin:0 auto}
+.card{background:#111827;border:1px solid #1e293b;border-radius:10px;padding:14px;position:relative;overflow:hidden}
+.card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#06b6d4,#8b5cf6,#ec4899)}
+.card h3{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:#64748b;margin-bottom:10px}
+.big-val{font-size:32px;font-weight:700;color:#f1f5f9;line-height:1}
+.unit{font-size:13px;color:#64748b;margin-left:4px}
+.sub-val{font-size:12px;color:#94a3b8;margin-top:4px}
+canvas{display:block;width:100%;border-radius:6px;background:#0f172a}
+.span2{grid-column:span 2}
+.span3{grid-column:span 3}
+.status-bar{display:flex;gap:16px;align-items:center;padding:8px 16px;background:#111827;border-bottom:1px solid #1e293b;font-size:12px}
+.status-bar .dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:4px}
+.dot-green{background:#22c55e;box-shadow:0 0 6px #22c55e}
+.dot-yellow{background:#eab308;box-shadow:0 0 6px #eab308}
+.dot-red{background:#ef4444;box-shadow:0 0 6px #ef4444}
+.vital-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid #1e293b}
+.vital-row:last-child{border:none}
+.vital-label{font-size:11px;color:#94a3b8;text-transform:uppercase;letter-spacing:1px}
+.vital-val{font-size:20px;font-weight:600}
+.confidence-bar{height:4px;background:#1e293b;border-radius:2px;margin-top:4px;overflow:hidden}
+.confidence-fill{height:100%;border-radius:2px;transition:width .3s}
+.cls-badge{display:inline-block;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1px}
+.cls-absent{background:#1e293b;color:#64748b}
+.cls-still{background:#164e63;color:#22d3ee}
+.cls-moving{background:#14532d;color:#4ade80}
+.cls-walking{background:#713f12;color:#fbbf24}
+.meter{height:6px;background:#1e293b;border-radius:3px;margin:4px 0;overflow:hidden}
+.meter-fill{height:100%;border-radius:3px;transition:width .3s}
+.meter-cyan .meter-fill{background:linear-gradient(90deg,#06b6d4,#22d3ee)}
+.meter-purple .meter-fill{background:linear-gradient(90deg,#7c3aed,#a78bfa)}
+.meter-pink .meter-fill{background:linear-gradient(90deg,#db2777,#f472b6)}
+.meter-green .meter-fill{background:linear-gradient(90deg,#059669,#34d399)}
+.feature-row{display:flex;justify-content:space-between;font-size:12px;margin-bottom:2px}
+.feature-label{color:#94a3b8}
+.feature-val{color:#e2e8f0;font-weight:500}
+.header{text-align:center;padding:16px 12px 4px;font-size:14px;font-weight:600;color:#e2e8f0;letter-spacing:2px;text-transform:uppercase;position:relative}
+.header span{background:linear-gradient(90deg,#06b6d4,#8b5cf6,#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
+@media(max-width:900px){.grid{grid-template-columns:1fr 1fr}.span3{grid-column:span 2}}
+@media(max-width:600px){.grid{grid-template-columns:1fr}.span2,.span3{grid-column:span 1}}
+</style>
+</head>
+<body>
+
+<div class="header">
+  <a href="home.html" style="position:absolute;left:16px;top:50%;transform:translateY(-50%);color:#64748b;text-decoration:none;font-size:13px;font-weight:400;letter-spacing:0">&larr; Home</a>
+  <span>WiFi DensePose — Live Sensing Dashboard</span>
+</div>
+
+<div class="status-bar">
+  <div><span class="dot dot-yellow" id="connDot"></span> <span id="connLabel">Connecting...</span></div>
+  <div>Source: <strong id="sourceLabel">--</strong></div>
+  <div>Tick: <span id="tickLabel">0</span></div>
+  <div>RSSI: <span id="rssiTopLabel">--</span></div>
+  <div>Persons: <span id="personsLabel">0</span></div>
+</div>
+
+<div class="grid">
+
+  <!-- Row 1: Key metrics -->
+  <div class="card">
+    <h3>Signal Strength (RSSI)</h3>
+    <div class="big-val" id="rssiVal">--<span class="unit">dBm</span></div>
+    <div class="sub-val">SNR: <span id="snrVal">--</span> dB &nbsp;|&nbsp; Quality: <span id="qualVal">--</span></div>
+    <canvas id="rssiChart" height="80"></canvas>
+  </div>
+
+  <div class="card">
+    <h3>Classification</h3>
+    <div style="text-align:center;margin:12px 0">
+      <div class="cls-badge cls-absent" id="clsBadge">ABSENT</div>
+    </div>
+    <div style="text-align:center">
+      <div class="big-val" id="confVal">0<span class="unit">%</span></div>
+      <div class="sub-val">Confidence</div>
+    </div>
+    <div class="confidence-bar"><div class="confidence-fill" id="confBar" style="width:0%;background:#06b6d4"></div></div>
+  </div>
+
+  <div class="card">
+    <h3>Vital Signs</h3>
+    <div class="vital-row">
+      <span class="vital-label">Breathing</span>
+      <span class="vital-val" style="color:#22d3ee" id="breathVal">-- <span class="unit">BPM</span></span>
+    </div>
+    <div class="confidence-bar"><div class="confidence-fill" id="breathConf" style="width:0%;background:#06b6d4"></div></div>
+    <div class="vital-row" style="margin-top:8px">
+      <span class="vital-label">Heart Rate</span>
+      <span class="vital-val" style="color:#f472b6" id="heartVal">-- <span class="unit">BPM</span></span>
+    </div>
+    <div class="confidence-bar"><div class="confidence-fill" id="heartConf" style="width:0%;background:#ec4899"></div></div>
+    <canvas id="vitalChart" height="60" style="margin-top:8px"></canvas>
+  </div>
+
+  <!-- Row 2: Subcarrier spectrum (wide) + features -->
+  <div class="card span2">
+    <h3>Subcarrier Amplitude Spectrum (56 channels)</h3>
+    <canvas id="spectrumChart" height="140"></canvas>
+  </div>
+
+  <div class="card">
+    <h3>Signal Features</h3>
+    <div class="feature-row"><span class="feature-label">Variance</span><span class="feature-val" id="fVariance">0</span></div>
+    <div class="meter meter-cyan"><div class="meter-fill" id="mVariance" style="width:0%"></div></div>
+    <div class="feature-row"><span class="feature-label">Motion Band</span><span class="feature-val" id="fMotion">0</span></div>
+    <div class="meter meter-green"><div class="meter-fill" id="mMotion" style="width:0%"></div></div>
+    <div class="feature-row"><span class="feature-label">Breathing Band</span><span class="feature-val" id="fBreath">0</span></div>
+    <div class="meter meter-purple"><div class="meter-fill" id="mBreath" style="width:0%"></div></div>
+    <div class="feature-row"><span class="feature-label">Spectral Power</span><span class="feature-val" id="fSpectral">0</span></div>
+    <div class="meter meter-pink"><div class="meter-fill" id="mSpectral" style="width:0%"></div></div>
+    <div class="feature-row"><span class="feature-label">Dominant Freq</span><span class="feature-val" id="fFreq">0 Hz</span></div>
+    <div class="feature-row"><span class="feature-label">Change Points</span><span class="feature-val" id="fChange">0</span></div>
+  </div>
+
+  <!-- Row 3: Spectrum waterfall + Signal field heatmap + motion timeline -->
+  <div class="card span2">
+    <h3>Subcarrier Waterfall (time × frequency)</h3>
+    <canvas id="waterfallCanvas" height="180"></canvas>
+  </div>
+
+  <div class="card">
+    <h3>Motion Timeline</h3>
+    <canvas id="motionChart" height="180"></canvas>
+  </div>
+
+  <!-- Row 4: Signal field heatmap -->
+  <div class="card span3">
+    <h3>Signal Field Heatmap (20×20 spatial grid)</h3>
+    <canvas id="fieldCanvas" height="200"></canvas>
+  </div>
+
+</div>
+
+<script>
+const WS_URL = `${location.protocol === 'https:' ? 'wss:' : 'ws:'}//${location.host}/ws/sensing`;
+const $ = id => document.getElementById(id);
+
+// Canvas contexts
+const rssiCtx    = $('rssiChart').getContext('2d');
+const specCtx    = $('spectrumChart').getContext('2d');
+const vitalCtx   = $('vitalChart').getContext('2d');
+const wfCtx      = $('waterfallCanvas').getContext('2d');
+const motionCtx  = $('motionChart').getContext('2d');
+const fieldCtx   = $('fieldCanvas').getContext('2d');
+
+// Ring buffers
+const MAX_HIST = 120;
+const rssiHist = [];
+const motionHist = [];
+const breathHist = [];
+const heartHist = [];
+const waterfallRows = [];
+const MAX_WF_ROWS = 80;
+
+let ws = null;
+let reconnectTimer = null;
+
+function connect() {
+  ws = new WebSocket(WS_URL);
+  ws.onopen = () => {
+    $('connDot').className = 'dot dot-green';
+    $('connLabel').textContent = 'Connected';
+  };
+  ws.onclose = () => {
+    $('connDot').className = 'dot dot-yellow';
+    $('connLabel').textContent = 'Reconnecting...';
+    reconnectTimer = setTimeout(connect, 2000);
+  };
+  ws.onerror = () => {};
+  ws.onmessage = evt => {
+    try { handleData(JSON.parse(evt.data)); } catch(e) {}
+  };
+}
+
+function handleData(d) {
+  if (d.type !== 'sensing_update') return;
+
+  const f = d.features || {};
+  const c = d.classification || {};
+  const vs = d.vital_signs || {};
+  const nodes = d.nodes || [];
+  const amps = nodes[0]?.amplitude || [];
+
+  // Status bar
+  $('sourceLabel').textContent = d.source || '--';
+  $('tickLabel').textContent = d.tick || 0;
+  $('rssiTopLabel').textContent = (f.mean_rssi || 0).toFixed(0) + ' dBm';
+  $('personsLabel').textContent = c.presence ? '1' : '0';
+
+  // RSSI
+  const rssi = f.mean_rssi || -80;
+  $('rssiVal').innerHTML = rssi.toFixed(0) + '<span class="unit">dBm</span>';
+  const snr = rssi - (-90);
+  $('snrVal').textContent = snr.toFixed(0);
+  const quality = Math.min(100, Math.max(0, (rssi + 100) * 2));
+  $('qualVal').textContent = quality.toFixed(0) + '%';
+  rssiHist.push(rssi);
+  if (rssiHist.length > MAX_HIST) rssiHist.shift();
+
+  // Classification
+  const level = c.motion_level || 'absent';
+  const conf = (c.confidence || 0) * 100;
+  const badge = $('clsBadge');
+  badge.textContent = level.replace('_', ' ').toUpperCase();
+  badge.className = 'cls-badge cls-' + (level.includes('walk') ? 'walking' : level.includes('moving') ? 'moving' : c.presence ? 'still' : 'absent');
+  $('confVal').innerHTML = conf.toFixed(1) + '<span class="unit">%</span>';
+  $('confBar').style.width = conf + '%';
+
+  // Vital signs
+  const br = vs.breathing_rate_bpm;
+  const hr = vs.heart_rate_bpm;
+  if (br != null) {
+    $('breathVal').innerHTML = br.toFixed(1) + ' <span class="unit">BPM</span>';
+    $('breathConf').style.width = ((vs.breathing_confidence || 0) * 100) + '%';
+    breathHist.push(br);
+    if (breathHist.length > MAX_HIST) breathHist.shift();
+  }
+  if (hr != null) {
+    $('heartVal').innerHTML = hr.toFixed(1) + ' <span class="unit">BPM</span>';
+    $('heartConf').style.width = ((vs.heartbeat_confidence || 0) * 100) + '%';
+    heartHist.push(hr);
+    if (heartHist.length > MAX_HIST) heartHist.shift();
+  }
+
+  // Features
+  $('fVariance').textContent = f.variance?.toFixed(2) || '0';
+  $('mVariance').style.width = Math.min(100, (f.variance || 0) / 30 * 100) + '%';
+  $('fMotion').textContent = f.motion_band_power?.toFixed(2) || '0';
+  $('mMotion').style.width = Math.min(100, (f.motion_band_power || 0) / 30 * 100) + '%';
+  $('fBreath').textContent = f.breathing_band_power?.toFixed(2) || '0';
+  $('mBreath').style.width = Math.min(100, (f.breathing_band_power || 0) / 30 * 100) + '%';
+  $('fSpectral').textContent = f.spectral_power?.toFixed(1) || '0';
+  $('mSpectral').style.width = Math.min(100, (f.spectral_power || 0) / 200 * 100) + '%';
+  $('fFreq').textContent = (f.dominant_freq_hz?.toFixed(2) || '0') + ' Hz';
+  $('fChange').textContent = f.change_points || 0;
+
+  // Motion history
+  motionHist.push(f.motion_band_power || 0);
+  if (motionHist.length > MAX_HIST) motionHist.shift();
+
+  // Waterfall
+  waterfallRows.push([...amps]);
+  if (waterfallRows.length > MAX_WF_ROWS) waterfallRows.shift();
+
+  // Draw all charts
+  drawRssiChart();
+  drawSpectrum(amps);
+  drawVitalChart();
+  drawWaterfall();
+  drawMotionChart();
+  if (d.signal_field) drawField(d.signal_field);
+}
+
+function resizeCanvas(canvas) {
+  const rect = canvas.getBoundingClientRect();
+  if (canvas.width !== rect.width * 2) {
+    canvas.width = rect.width * 2;
+    canvas.height = rect.height * 2;
+  }
+}
+
+function drawRssiChart() {
+  const c = rssiCtx; const cv = c.canvas;
+  resizeCanvas(cv);
+  const w = cv.width, h = cv.height;
+  c.clearRect(0, 0, w, h);
+  if (rssiHist.length < 2) return;
+
+  const min = -90, max = -20;
+  c.strokeStyle = '#06b6d4'; c.lineWidth = 2; c.beginPath();
+  for (let i = 0; i < rssiHist.length; i++) {
+    const x = (i / (MAX_HIST - 1)) * w;
+    const y = h - ((rssiHist[i] - min) / (max - min)) * h;
+    i === 0 ? c.moveTo(x, y) : c.lineTo(x, y);
+  }
+  c.stroke();
+  // Fill under
+  c.lineTo((rssiHist.length - 1) / (MAX_HIST - 1) * w, h);
+  c.lineTo(0, h); c.closePath();
+  c.fillStyle = 'rgba(6,182,212,0.1)'; c.fill();
+}
+
+function drawSpectrum(amps) {
+  const c = specCtx; const cv = c.canvas;
+  resizeCanvas(cv);
+  const w = cv.width, h = cv.height;
+  c.clearRect(0, 0, w, h);
+  if (!amps.length) return;
+
+  const barW = w / amps.length;
+  const maxAmp = Math.max(...amps, 1);
+
+  for (let i = 0; i < amps.length; i++) {
+    const val = amps[i] / maxAmp;
+    const barH = val * h * 0.9;
+    const hue = 180 + val * 120;
+    c.fillStyle = `hsla(${hue}, 80%, 60%, 0.85)`;
+    c.fillRect(i * barW + 1, h - barH, barW - 2, barH);
+  }
+
+  // Subcarrier index labels
+  c.fillStyle = '#475569'; c.font = '16px monospace';
+  for (let i = 0; i < amps.length; i += 10) {
+    c.fillText(i.toString(), i * barW + 2, h - 4);
+  }
+}
+
+function drawVitalChart() {
+  const c = vitalCtx; const cv = c.canvas;
+  resizeCanvas(cv);
+  const w = cv.width, h = cv.height;
+  c.clearRect(0, 0, w, h);
+
+  // Breathing line
+  if (breathHist.length > 1) {
+    const min = 5, max = 25;
+    c.strokeStyle = '#22d3ee'; c.lineWidth = 2; c.beginPath();
+    for (let i = 0; i < breathHist.length; i++) {
+      const x = (i / (MAX_HIST - 1)) * w;
+      const y = h - ((breathHist[i] - min) / (max - min)) * h;
+      i === 0 ? c.moveTo(x, y) : c.lineTo(x, y);
+    }
+    c.stroke();
+  }
+
+  // Heart rate line
+  if (heartHist.length > 1) {
+    const min = 40, max = 120;
+    c.strokeStyle = '#f472b6'; c.lineWidth = 2; c.beginPath();
+    for (let i = 0; i < heartHist.length; i++) {
+      const x = (i / (MAX_HIST - 1)) * w;
+      const y = h - ((heartHist[i] - min) / (max - min)) * h;
+      i === 0 ? c.moveTo(x, y) : c.lineTo(x, y);
+    }
+    c.stroke();
+  }
+
+  // Legend
+  c.font = '16px monospace';
+  c.fillStyle = '#22d3ee'; c.fillText('— Breathing', 8, 18);
+  c.fillStyle = '#f472b6'; c.fillText('— Heart Rate', 140, 18);
+}
+
+function drawWaterfall() {
+  const c = wfCtx; const cv = c.canvas;
+  resizeCanvas(cv);
+  const w = cv.width, h = cv.height;
+  c.clearRect(0, 0, w, h);
+  if (!waterfallRows.length) return;
+
+  const rowH = h / MAX_WF_ROWS;
+  const maxAmp = 25;
+
+  for (let r = 0; r < waterfallRows.length; r++) {
+    const row = waterfallRows[r];
+    const colW = w / row.length;
+    const y = (MAX_WF_ROWS - waterfallRows.length + r) * rowH;
+    for (let i = 0; i < row.length; i++) {
+      const val = Math.min(1, row[i] / maxAmp);
+      const r_ = Math.floor(val * 200 + 10);
+      const g_ = Math.floor(val * 80);
+      const b_ = Math.floor((1 - val) * 180 + 40);
+      c.fillStyle = `rgb(${r_},${g_},${b_})`;
+      c.fillRect(i * colW, y, colW + 0.5, rowH + 0.5);
+    }
+  }
+
+  // Axis labels
+  c.fillStyle = '#475569'; c.font = '16px monospace';
+  c.fillText('← older', 4, 18);
+  c.fillText('newer →', 4, h - 6);
+  c.fillText('subcarrier →', w - 160, h - 6);
+}
+
+function drawMotionChart() {
+  const c = motionCtx; const cv = c.canvas;
+  resizeCanvas(cv);
+  const w = cv.width, h = cv.height;
+  c.clearRect(0, 0, w, h);
+  if (motionHist.length < 2) return;
+
+  // Threshold line
+  c.strokeStyle = '#334155'; c.lineWidth = 1; c.setLineDash([6, 4]);
+  const threshY = h - (0.55 / 1.0) * h * 0.5;
+  c.beginPath(); c.moveTo(0, threshY); c.lineTo(w, threshY); c.stroke();
+  c.setLineDash([]);
+  c.fillStyle = '#475569'; c.font = '14px monospace';
+  c.fillText('walking threshold', 6, threshY - 6);
+
+  // Motion bars
+  const barW = w / MAX_HIST;
+  const maxM = 30;
+  for (let i = 0; i < motionHist.length; i++) {
+    const val = motionHist[i] / maxM;
+    const barH = Math.min(1, val) * h * 0.9;
+    const hue = val > 0.55 ? 45 : val > 0.2 ? 160 : 220;
+    c.fillStyle = `hsla(${hue}, 70%, 55%, 0.7)`;
+    c.fillRect(i * barW + 0.5, h - barH, barW - 1, barH);
+  }
+}
+
+function drawField(field) {
+  const c = fieldCtx; const cv = c.canvas;
+  resizeCanvas(cv);
+  const w = cv.width, h = cv.height;
+  c.clearRect(0, 0, w, h);
+
+  const [gx, , gz] = field.grid_size || [20, 1, 20];
+  const vals = field.values || [];
+  if (!vals.length) return;
+
+  const cellW = w / gx;
+  const cellH = h / gz;
+
+  for (let iz = 0; iz < gz; iz++) {
+    for (let ix = 0; ix < gx; ix++) {
+      const val = vals[iz * gx + ix] || 0;
+      const v = Math.min(1, val);
+      // Viridis-inspired colormap
+      const r = Math.floor(v * 250 + 5);
+      const g = Math.floor(v * 200 * (1 - v * 0.4) + 10);
+      const b = Math.floor((1 - v) * 200 + 20);
+      c.fillStyle = `rgb(${r},${g},${b})`;
+      c.fillRect(ix * cellW, iz * cellH, cellW + 0.5, cellH + 0.5);
+    }
+  }
+
+  // Hot spot marker
+  let maxIdx = 0, maxV = 0;
+  for (let i = 0; i < vals.length; i++) {
+    if (vals[i] > maxV) { maxV = vals[i]; maxIdx = i; }
+  }
+  const mx = (maxIdx % gx + 0.5) * cellW;
+  const mz = (Math.floor(maxIdx / gx) + 0.5) * cellH;
+  c.strokeStyle = '#fff'; c.lineWidth = 2;
+  c.beginPath(); c.arc(mx, mz, 12, 0, Math.PI * 2); c.stroke();
+  c.fillStyle = '#fff'; c.font = '14px monospace';
+  c.fillText(`peak: ${(maxV * 100).toFixed(0)}%`, mx + 16, mz + 4);
+}
+
+connect();
+</script>
+</body>
+</html>
diff --git a/ui/services/data-processor.js b/ui/services/data-processor.js
index aabf58ad..6e4dba1e 100644
--- a/ui/services/data-processor.js
+++ b/ui/services/data-processor.js
@@ -43,21 +43,22 @@ export class DataProcessor {
         result.zoneOccupancy = this._extractZoneOccupancy(payload, message.zone_id);
         result.signalData = this._extractSignalData(payload);
 
-        result.metadata.isRealData = payload.metadata?.mock_data === false;
+        const meta = payload.metadata || {};
+        const source = meta.source || '';
+        result.metadata.isRealData = source !== 'mock' && source !== 'demo' && source !== '';
         result.metadata.timestamp = message.timestamp;
-        result.metadata.processingTime = payload.metadata?.processing_time_ms || 0;
-        result.metadata.frameId = payload.metadata?.frame_id;
-
-        // Determine sensing mode
-        if (payload.metadata?.source === 'csi') {
-          result.metadata.sensingMode = 'CSI';
-        } else if (payload.metadata?.source === 'rssi') {
-          result.metadata.sensingMode = 'RSSI';
-        } else if (payload.metadata?.mock_data !== false) {
-          result.metadata.sensingMode = 'Mock';
-        } else {
-          result.metadata.sensingMode = 'CSI';
-        }
+        result.metadata.processingTime = meta.processing_time_ms || 0;
+        result.metadata.frameId = meta.frame_id;
+        result.metadata.poseSource = payload.pose_source || 'unknown';
+        result.metadata.signalStrength = meta.signal_strength;
+        result.metadata.motionBandPower = meta.motion_band_power;
+
+        // Map server source to UI sensing mode label
+        const sourceMap = {
+          'esp32': 'CSI', 'csi': 'CSI', 'wifi': 'WiFi',
+          'rssi': 'RSSI', 'simulated': 'Simulated', 'simulate': 'Simulated',
+        };
+        result.metadata.sensingMode = sourceMap[source] || (source || 'Unknown');
       }
     }
 
@@ -99,8 +100,7 @@ export class DataProcessor {
   _normalizeKeypoints(keypoints) {
     if (!keypoints || keypoints.length === 0) return [];
 
-    return keypoints.map(kp => {
-      // Handle various formats
+    const raw = keypoints.map(kp => {
       if (Array.isArray(kp)) {
         return { x: kp[0], y: kp[1], confidence: kp[2] || 0.5 };
       }
@@ -110,6 +110,22 @@ export class DataProcessor {
         confidence: kp.confidence !== undefined ? kp.confidence : (kp.score || 0.5)
       };
     });
+
+    // Auto-detect if values are in pixel coords (>1.0) and normalize to [0,1]
+    const maxX = Math.max(...raw.map(k => Math.abs(k.x)));
+    const maxY = Math.max(...raw.map(k => Math.abs(k.y)));
+
+    if (maxX > 1.5 || maxY > 1.5) {
+      const frameW = Math.max(maxX * 1.1, 640);
+      const frameH = Math.max(maxY * 1.1, 480);
+      return raw.map(kp => ({
+        x: Math.max(0, Math.min(1, kp.x / frameW)),
+        y: Math.max(0, Math.min(1, kp.y / frameH)),
+        confidence: kp.confidence
+      }));
+    }
+
+    return raw;
   }
 
   // Extract zone occupancy data
diff --git a/ui/services/websocket-client.js b/ui/services/websocket-client.js
index 93428b87..de7af724 100644
--- a/ui/services/websocket-client.js
+++ b/ui/services/websocket-client.js
@@ -3,7 +3,9 @@
 
 export class WebSocketClient {
   constructor(options = {}) {
-    this.url = options.url || 'ws://localhost:8000/ws/pose';
+    const defaultProto = (typeof location !== 'undefined' && location.protocol === 'https:') ? 'wss:' : 'ws:';
+    const defaultHost = (typeof location !== 'undefined') ? location.host : 'localhost:8080';
+    this.url = options.url || `${defaultProto}//${defaultHost}/api/v1/stream/pose`;
     this.ws = null;
     this.state = 'disconnected'; // disconnected, connecting, connected, error
     this.isRealData = false;
@@ -30,6 +32,9 @@ export class WebSocketClient {
       bytesReceived: 0
     };
 
+    // Data source tracking
+    this.dataSource = null; // actual source string from server (e.g. "simulated", "esp32", "wifi")
+
     // Callbacks
     this._onMessage = options.onMessage || (() => {});
     this._onStateChange = options.onStateChange || (() => {});
@@ -87,6 +92,7 @@ export class WebSocketClient {
 
     this._setState('disconnected');
     this.isRealData = false;
+    this.dataSource = null;
     console.log('[WS-VIZ] Disconnected');
   }
 
@@ -141,11 +147,14 @@ export class WebSocketClient {
         return;
       }
 
-      // Detect real vs mock data from metadata
-      if (data.data && data.data.metadata) {
-        this.isRealData = data.data.metadata.mock_data === false && data.data.metadata.source !== 'mock';
-      } else if (data.metadata) {
-        this.isRealData = data.metadata.mock_data === false;
+      // Detect data source from server metadata.
+      // The server sends: { type: "pose_data", payload: { metadata: { source: "..." } } }
+      // or sensing_update with top-level source field.
+      const meta = data?.payload?.metadata || data?.data?.metadata || data?.metadata;
+      const source = meta?.source || data?.source;
+      if (source) {
+        this.dataSource = source;
+        this.isRealData = source !== 'mock' && source !== 'demo';
       }
 
       // Calculate latency from message timestamp
@@ -240,6 +249,7 @@ export class WebSocketClient {
       ...this.metrics,
       state: this.state,
       isRealData: this.isRealData,
+      dataSource: this.dataSource,
       reconnectAttempts: this.reconnectAttempts,
       uptime: this.metrics.connectTime ? (Date.now() - this.metrics.connectTime) / 1000 : 0
     };
diff --git a/ui/viz.html b/ui/viz.html
index 54fa0a5f..053120f8 100644
--- a/ui/viz.html
+++ b/ui/viz.html
@@ -84,15 +84,14 @@
     <div id="stats-container"></div>
   </div>
 
-  <!-- Three.js and OrbitControls from CDN -->
-  <script src="https://unpkg.com/three@0.160.0/build/three.min.js"></script>
-  <script src="https://unpkg.com/three@0.160.0/examples/js/controls/OrbitControls.js"></script>
   <!-- Stats.js for performance monitoring -->
   <script src="https://unpkg.com/stats.js@0.17.0/build/stats.min.js"></script>
 
-  <!-- Application modules loaded as ES modules via importmap workaround -->
+  <!-- Three.js r147 + OrbitControls (last version with examples/js/ global scripts) -->
+  <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/controls/OrbitControls.js"></script>
+
   <script type="module">
-    // Import all modules
     import { Scene } from './components/scene.js';
     import { BodyModel, BodyModelManager } from './components/body-model.js';
     import { SignalVisualization } from './components/signal-viz.js';
@@ -112,6 +111,8 @@
       dataProcessor: null,
       stats: null,
       isDemoMode: true,
+      lastServerData: null,
+      serverSensingMode: 'Connecting...',
       startTime: Date.now()
     };
 
@@ -176,8 +177,9 @@
         setLoadingProgress(85, 'Connecting to server...');
 
         // 8. WebSocket client
+        const wsProto = location.protocol === 'https:' ? 'wss:' : 'ws:';
         state.wsClient = new WebSocketClient({
-          url: 'ws://localhost:8000/ws/pose',
+          url: `${wsProto}//${location.host}/api/v1/stream/pose`,
           onMessage: (msg) => handleWebSocketMessage(msg),
           onStateChange: (newState, oldState) => handleConnectionStateChange(newState, oldState),
           onError: (err) => console.error('[VIZ] WebSocket error:', err)
@@ -250,15 +252,22 @@
         state.hud.tickFPS();
 
         const wsMetrics = state.wsClient.getMetrics();
+        let sensingMode;
+        if (state.isDemoMode) {
+          sensingMode = state.wsClient.state === 'connected' ? 'Connecting...' : 'Demo';
+        } else {
+          sensingMode = state.serverSensingMode || (wsMetrics.dataSource || 'Server');
+        }
+
         state.hud.updateState({
           connectionStatus: state.wsClient.state,
-          isRealData: state.wsClient.isRealData && !state.isDemoMode,
+          isRealData: !state.isDemoMode,
           latency: wsMetrics.latency,
           messageCount: wsMetrics.messageCount,
           uptime: wsMetrics.uptime,
           personCount: state.bodyModelManager.getActiveCount(),
           confidence: state.bodyModelManager.getAverageConfidence(),
-          sensingMode: state.isDemoMode ? 'Mock' : (state.wsClient.isRealData ? 'CSI' : 'Mock')
+          sensingMode: sensingMode
         });
       }
 
@@ -271,13 +280,20 @@
       const processed = state.dataProcessor.processMessage(message);
       if (!processed) return;
 
-      // Switch off demo mode when we get real data
+      // Track server metadata regardless of person count
+      if (processed.metadata.sensingMode && processed.metadata.sensingMode !== 'Unknown') {
+        state.serverSensingMode = processed.metadata.sensingMode;
+      }
+
+      // Switch off demo mode when server sends data with persons
       if (processed.persons.length > 0) {
         if (state.isDemoMode) {
           state.isDemoMode = false;
-          console.log('[VIZ] Switched to live data mode');
+          console.log(`[VIZ] Switched to live data mode (source: ${processed.metadata.sensingMode})`);
         }
 
+        state.lastServerData = processed;
+
         // Update body models
         state.bodyModelManager.update(processed.persons, 0.016);
 
@@ -294,6 +310,9 @@
           processed.persons, 20, 15, 8, 6
         );
         state.environment.updateConfidenceHeatmap(heatmap);
+      } else if (!state.isDemoMode) {
+        // Server connected but no persons detected — keep live mode, clear body models
+        state.bodyModelManager.update([], 0.016);
       }
     }
 
@@ -302,13 +321,12 @@
       console.log(`[VIZ] Connection: ${oldState} -> ${newState}`);
 
       if (newState === 'connected') {
-        // Will switch from demo to real when data arrives
-        console.log('[VIZ] Connected to server, waiting for data...');
+        console.log('[VIZ] Connected to server, waiting for pose data...');
       } else if (newState === 'error' || newState === 'disconnected') {
-        // Fall back to demo mode
         if (!state.isDemoMode) {
           state.isDemoMode = true;
-          console.log('[VIZ] Switched to demo mode (server unavailable)');
+          state.serverSensingMode = 'Reconnecting...';
+          console.log('[VIZ] Fell back to demo mode (server unavailable)');
         }
       }
     }