feat: Implement RSSI service for iOS and Web platforms

- Added IosRssiService to handle synthetic RSSI data for iOS. - Created WebRssiService to simulate RSSI scanning on the web. - Defined shared types for WifiNetwork and RssiService in rssi.service.ts. - Introduced simulation service to generate synthetic sensing data. - Implemented WebSocket service for real-time data handling with reconnection logic. - Established Zustand stores for managing application state related to MAT and pose data. - Developed theme context and utility functions for consistent styling and formatting. - Added type definitions for various application entities including API responses and sensing data. - Created utility functions for color mapping and URL validation. - Configured TypeScript settings for the mobile application.
2026-04-28 05:59:32 +00:00 · 2026-03-02 10:30:33 -05:00 · 2026-03-02 10:30:33 -05:00 · fdc7142dfa
commit fdc7142dfa
parent 02192b0232
131 changed files with 24090 additions and 0 deletions
--- a/docs/adr/ADR-034-expo-mobile-app.md
+++ b/docs/adr/ADR-034-expo-mobile-app.md
@ -0,0 +1,688 @@
+# ADR-034: Expo React Native Mobile Application
+
+| Field | Value |
+|-------|-------|
+| **Status** | Accepted |
+| **Date** | 2026-03-02 |
+| **Deciders** | MaTriXy, rUv |
+| **Codename** | **FieldView** -- Mobile Companion for WiFi-DensePose Field Deployment |
+| **Relates to** | ADR-019 (Sensing-Only UI Mode), ADR-021 (Vital Sign Detection), ADR-026 (Survivor Track Lifecycle), ADR-029 (RuvSense Multistatic), ADR-031 (RuView Sensing-First RF), ADR-032 (Mesh Security) |
+
+---
+
+## 1. Context
+
+### 1.1 Need for a Mobile Companion
+
+WiFi-DensePose is a WiFi-based human pose estimation system using Channel State Information (CSI) from ESP32 mesh nodes. The existing web UI (`ui/`) serves desktop browsers but is not optimized for mobile form factors. Three deployment scenarios demand a purpose-built mobile application:
+
+1. **Disaster response (WiFi-MAT)**: First responders deploying ESP32 mesh nodes in collapsed structures need a portable device to visualize survivor detections, breathing/heart rate vitals, and zone maps in real time. A laptop is impractical in rubble fields.
+2. **Building security**: Security operators patrolling a facility need a handheld display showing occupancy by zone, movement alerts, and historical patterns. The phone in their pocket is the natural form factor.
+3. **Healthcare monitoring**: Clinical staff monitoring patients via CSI-based contactless vitals need a tablet view at the bedside or nurse station, with gauges for breathing rate and heart rate that update in real time.
+
+In all three scenarios, the mobile device does not communicate with ESP32 nodes directly. Instead, a Rust sensing server (`wifi-densepose-sensing-server`, ADR-031) aggregates ESP32 UDP streams and exposes a WebSocket API. The mobile app connects to this server over local WiFi.
+
+### 1.2 Technology Selection Rationale
+
+| Requirement | Decision | Rationale |
+|-------------|----------|-----------|
+| Cross-platform (iOS + Android + Web) | Expo SDK 55 + React Native 0.83 | Single codebase, managed workflow, OTA updates |
+| Real-time streaming | WebSocket (ws://host:3001/ws/sensing) | Sub-100ms latency from CSI capture to mobile display |
+| 3D visualization | Three.js Gaussian splat via WebView | Reuses existing `ui/` Three.js splat renderer; avoids native OpenGL binding |
+| State management | Zustand | Minimal boilerplate, React-concurrent safe, selector-based re-renders |
+| Persistence | AsyncStorage | Built into Expo, sufficient for settings and small cached state |
+| Navigation | react-navigation v7 (bottom tabs) | Standard React Native navigation; 5-tab layout fits mobile ergonomics |
+| WiFi RSSI scanning | Platform-specific (Android: react-native-wifi-reborn, iOS: CoreWLAN stub, Web: synthetic) | No cross-platform WiFi scanning API exists; platform modules are required |
+| E2E testing | Maestro YAML specs | Declarative, no Detox native build dependency, runs on CI |
+| Design system | Dark theme (#0D1117 bg, #32B8C6 accent) | Matches existing `ui/` sensing dashboard aesthetic; reduces eye strain in field conditions |
+
+### 1.3 Relationship to Existing UI
+
+The desktop web UI (`ui/`) and the mobile app share no code at the component level, but they consume the same backend APIs:
+
+- **WebSocket**: `ws://host:3001/ws/sensing` -- streaming SensingFrame JSON
+- **REST**: `http://host:3000/api/v1/...` -- configuration, history, health
+
+The mobile app's Three.js Gaussian splat viewer (LiveScreen) loads the same splat HTML bundle used by the desktop UI, rendered inside a WebView (native) or iframe (web).
+
+---
+
+## 2. Decision
+
+Build an Expo React Native mobile application at `ui/mobile/` that provides five primary screens for field operators, connected to the Rust sensing server via WebSocket streaming. The app automatically falls back to simulated data when the sensing server is unreachable, enabling demos and offline testing.
+
+### 2.1 Screen Architecture
+
+```
+---------------------------------------------------------------+
+|                    MainTabs (Bottom Tab Navigator)             |
+---------------------------------------------------------------+
+|                                                                 |
+|  +----------+  +----------+  +----------+  +--------+  +-----+ |
+|  |   Live   |  |  Vitals  |  |  Zones   |  |  MAT   |  | Cog | |
+|  | (3D splat|  |(breathing|  |(floor    |  |(disaster|  |(set-| |
+|  |  + HUD)  |  | + heart) |  | plan SVG)|  |response)|  |tings| |
+|  +----------+  +----------+  +----------+  +--------+  +-----+ |
+|                                                                 |
+---------------------------------------------------------------+
+|  ConnectionBanner (Connected / Simulated / Disconnected)       |
+---------------------------------------------------------------+
+```
+
+**Screen responsibilities:**
+
+| Screen | Primary View | Data Source | Key Components |
+|--------|-------------|-------------|----------------|
+| **Live** | 3D Gaussian splat with 17 COCO keypoints + HUD overlay | `poseStore.latestFrame` | `GaussianSplatWebView`, `LiveHUD`, `HudOverlay` |
+| **Vitals** | Breathing BPM gauge, heart rate BPM gauge, sparkline history | `poseStore.latestFrame.vital_signs` | `BreathingGauge`, `HeartRateGauge`, `MetricCard`, `SparklineChart` |
+| **Zones** | Floor plan SVG with occupancy heat overlay, zone legend | `poseStore.latestFrame.persons` | `FloorPlanSvg`, `OccupancyGrid`, `ZoneLegend` |
+| **MAT** | Survivor counter, zone map WebView, alert list | `matStore.survivors`, `matStore.alerts` | `SurvivorCounter`, `MatWebView`, `AlertList`, `AlertCard` |
+| **Settings** | Server URL input, theme picker, RSSI toggle | `settingsStore` | `ServerUrlInput`, `ThemePicker`, `RssiToggle` |
+
+### 2.2 State Architecture
+
+Three Zustand stores separate concerns and prevent unnecessary re-renders:
+
+```
+------------------------------------------------------------+
+|                     Zustand Stores                          |
+------------------------------------------------------------+
+|                                                              |
+|  poseStore                                                   |
+|  +--------------------------------------------------------+ |
+|  | connectionStatus: 'connected' | 'simulated' | 'error'  | |
+|  | latestFrame: SensingFrame | null                        | |
+|  | frameHistory: RingBuffer<SensingFrame>                  | |
+|  | features: FeatureVector | null                          | |
+|  | persons: Person[]                                       | |
+|  | vitalSigns: VitalSigns | null                           | |
+|  +--------------------------------------------------------+ |
+|                                                              |
+|  matStore                                                    |
+|  +--------------------------------------------------------+ |
+|  | survivors: Survivor[]                                   | |
+|  | alerts: MatAlert[]                                      | |
+|  | events: MatEvent[]                                      | |
+|  | zoneMap: ZoneMap | null                                  | |
+|  +--------------------------------------------------------+ |
+|                                                              |
+|  settingsStore  (persisted via AsyncStorage)                 |
+|  +--------------------------------------------------------+ |
+|  | serverUrl: string  (default: 'http://localhost:3000')   | |
+|  | wsUrl: string      (default: 'ws://localhost:3001')     | |
+|  | theme: 'dark' | 'light'                                 | |
+|  | rssiEnabled: boolean                                    | |
+|  | simulationMode: boolean                                 | |
+|  +--------------------------------------------------------+ |
+|                                                              |
+------------------------------------------------------------+
+```
+
+### 2.3 Service Layer
+
+Four services encapsulate external communication and data generation:
+
+| Service | File | Responsibility |
+|---------|------|----------------|
+| `ws.service` | `src/services/ws.service.ts` | WebSocket connection lifecycle, reconnection with exponential backoff, SensingFrame parsing, dispatches to `poseStore` |
+| `api.service` | `src/services/api.service.ts` | REST calls to sensing server (health check, configuration, history endpoints) |
+| `rssi.service` | `src/services/rssi.service.ts` (+ platform variants) | Platform-specific WiFi RSSI scanning. Android uses `react-native-wifi-reborn`, iOS provides a CoreWLAN stub, Web generates synthetic RSSI values |
+| `simulation.service` | `src/services/simulation.service.ts` | Generates synthetic SensingFrame data when the real server is unreachable. Produces realistic amplitude, phase, vital signs, and person data on a configurable tick interval |
+
+**Platform-specific RSSI service files:**
+
+| File | Platform | Implementation |
+|------|----------|----------------|
+| `rssi.service.android.ts` | Android | `react-native-wifi-reborn` native module, requires `ACCESS_FINE_LOCATION` permission |
+| `rssi.service.ios.ts` | iOS | CoreWLAN stub (returns empty scan results; Apple restricts WiFi scanning to system apps) |
+| `rssi.service.web.ts` | Web | Synthetic RSSI values generated from noise model |
+| `rssi.service.ts` | Default | Re-exports platform-appropriate module via React Native file resolution |
+
+### 2.4 Data Flow
+
+```
+ESP32 Mesh Nodes
+      |
+      | UDP CSI frames (ADR-029 TDM protocol)
+      v
+---------------------------+
+| Rust Sensing Server       |
+| (wifi-densepose-sensing-  |
+|  server, ADR-031)         |
+|                           |
+| Aggregates ESP32 streams  |
+| Runs RuvSense pipeline    |
+| Exposes WS + REST APIs    |
+---------------------------+
+      |                    |
+      | WebSocket          | REST
+      | ws://host:3001     | http://host:3000
+      | /ws/sensing        | /api/v1/...
+      v                    v
+---------------------------+
+| Expo Mobile App           |
+|                           |
+| ws.service                |
+|   -> poseStore            |
+|   -> matStore             |
+|                           |
+| Screens subscribe to      |
+| stores via Zustand        |
+| selectors                 |
+---------------------------+
+```
+
+**Connection lifecycle:**
+
+1. App boots. `settingsStore` loads persisted server URL from AsyncStorage.
+2. `ws.service` opens WebSocket to `wsUrl/ws/sensing`.
+3. On each message, `ws.service` parses the `SensingFrame` JSON and dispatches to `poseStore`.
+4. If the WebSocket fails, `ws.service` retries with exponential backoff (1s, 2s, 4s, 8s, 16s max).
+5. After `MAX_RECONNECT_ATTEMPTS` (5) consecutive failures, `ws.service` switches to `simulation.service`, which generates synthetic frames at 10 Hz.
+6. `poseStore.connectionStatus` transitions: `connected` -> `error` -> `simulated`.
+7. `ConnectionBanner` component reflects the current status on all screens.
+8. If the server becomes reachable again, `ws.service` reconnects and resumes live data.
+
+### 2.5 SensingFrame JSON Schema
+
+The WebSocket stream delivers JSON frames matching the Rust `SensingFrame` struct:
+
+```typescript
+interface SensingFrame {
+  timestamp: number;           // Unix epoch ms
+  amplitude: number[];         // Per-subcarrier amplitude (52 or 114 values)
+  phase: number[];             // Per-subcarrier phase (radians)
+  features: {
+    mean_amplitude: number;
+    std_amplitude: number;
+    phase_slope: number;
+    doppler_shift: number;
+    delay_spread: number;
+  };
+  classification: string;      // "empty" | "single_person" | "multi_person" | "motion"
+  confidence: number;          // 0.0 - 1.0
+  persons: Array<{
+    id: number;
+    keypoints: Array<[number, number, number]>;  // 17 COCO keypoints [x, y, confidence]
+    bbox: [number, number, number, number];       // [x, y, width, height]
+    track_id: number;
+  }>;
+  vital_signs?: {
+    breathing_rate_bpm: number;
+    heart_rate_bpm: number;
+    breathing_confidence: number;
+    heart_confidence: number;
+  };
+  rssi?: number;
+  node_id?: number;
+}
+```
+
+### 2.6 Three.js Gaussian Splat Rendering
+
+The LiveScreen uses a WebView (native) or iframe (web) to render a Three.js Gaussian splat scene. This avoids native OpenGL bindings while reusing the existing splat renderer from the desktop UI.
+
+**Native path (iOS/Android):**
+- `GaussianSplatWebView.tsx` renders a `<WebView>` loading a bundled HTML page.
+- The HTML page initializes a Three.js scene with Gaussian splat shaders.
+- Communication between React Native and the WebView uses `postMessage` / `onMessage` bridge.
+- `useGaussianBridge.ts` hook manages the bridge, sending skeleton keypoint updates as JSON.
+
+**Web path:**
+- `GaussianSplatWebView.web.tsx` (platform-specific file) renders an `<iframe>` with the same HTML bundle.
+- Communication uses `window.postMessage` with origin checks.
+
+### 2.7 Design System
+
+| Token | Value | Usage |
+|-------|-------|-------|
+| `colors.background` | `#0D1117` | Primary background (dark theme) |
+| `colors.surface` | `#161B22` | Card/panel backgrounds |
+| `colors.border` | `#30363D` | Borders, dividers |
+| `colors.accent` | `#32B8C6` | Primary accent, active tab, gauge fill |
+| `colors.danger` | `#F85149` | Alerts, errors, critical vitals |
+| `colors.warning` | `#D29922` | Warnings, degraded state |
+| `colors.success` | `#3FB950` | Connected status, normal vitals |
+| `colors.text` | `#E6EDF3` | Primary text |
+| `colors.textSecondary` | `#8B949E` | Secondary/muted text |
+| `typography.mono` | `Courier New` | Monospace for data values, HUD |
+| `spacing.xs` | `4` | Tight spacing |
+| `spacing.sm` | `8` | Small spacing |
+| `spacing.md` | `16` | Medium spacing |
+| `spacing.lg` | `24` | Large spacing |
+| `spacing.xl` | `32` | Extra-large spacing |
+
+The dark theme is the default and primary design target, optimized for field conditions (low ambient light, glare reduction). A light theme variant is available via the Settings screen.
+
+### 2.8 ESP32 Integration Model
+
+The mobile app does not communicate with ESP32 nodes directly. The architecture is:
+
+```
+ESP32 Node A ---\
+ESP32 Node B ----+---> Sensing Server (Raspberry Pi / Laptop) <---> Mobile App
+ESP32 Node C ---/         (local WiFi)                            (local WiFi)
+```
+
+- **Field deployment**: The sensing server runs on a Raspberry Pi 4 or operator laptop. All devices (ESP32 nodes, server, mobile app) connect to the same local WiFi network or a portable router.
+- **Server URL**: Configurable in Settings screen. Default: `http://localhost:3000` (server) and `ws://localhost:3001/ws/sensing` (WebSocket). In field use, the operator sets this to the server's LAN IP (e.g., `http://192.168.1.100:3000`).
+- **No BLE/direct connection**: ESP32 nodes use UDP broadcast for CSI frames (ADR-029). The mobile app has no UDP listener; it consumes the server's processed output.
+
+---
+
+## 3. Directory Structure
+
+```
+ui/mobile/
+|-- App.tsx                              # Root component, ThemeProvider + NavigationContainer
+|-- app.config.ts                        # Expo config (SDK 55, app name, icons, splash)
+|-- app.json                             # Expo static config
+|-- babel.config.js                      # Babel config (expo-router preset)
+|-- eas.json                             # EAS Build profiles (dev, preview, production)
+|-- index.ts                             # Entry point (registerRootComponent)
+|-- jest.config.js                       # Jest config for unit tests
+|-- jest.setup.ts                        # Jest setup (mock AsyncStorage, react-native modules)
+|-- metro.config.js                      # Metro bundler config
+|-- package.json                         # Dependencies and scripts
+|-- tsconfig.json                        # TypeScript config (strict mode)
+|
+|-- assets/
+|   |-- android-icon-background.png      # Android adaptive icon background
+|   |-- android-icon-foreground.png      # Android adaptive icon foreground
+|   |-- android-icon-monochrome.png      # Android monochrome icon
+|   |-- favicon.png                      # Web favicon
+|   |-- icon.png                         # App icon (1024x1024)
+|   |-- splash-icon.png                  # Splash screen icon
+|
+|-- e2e/                                 # Maestro E2E test specs
+|   |-- live_screen.yaml                 # LiveScreen: splat renders, HUD shows data
+|   |-- vitals_screen.yaml              # VitalsScreen: gauges animate, sparklines update
+|   |-- zones_screen.yaml              # ZonesScreen: floor plan renders, legend visible
+|   |-- mat_screen.yaml                 # MATScreen: survivor count, alerts list
+|   |-- settings_screen.yaml            # SettingsScreen: URL input, theme toggle
+|   |-- offline_fallback.yaml           # Simulated mode activates on server disconnect
+|
+|-- src/
+|   |-- components/                      # Shared UI components (12 components)
+|   |   |-- ConnectionBanner.tsx         # Status banner: Connected/Simulated/Disconnected
+|   |   |-- ErrorBoundary.tsx            # React error boundary with fallback UI
+|   |   |-- GaugeArc.tsx                 # SVG arc gauge (used by vitals)
+|   |   |-- HudOverlay.tsx              # Translucent HUD overlay for LiveScreen
+|   |   |-- LoadingSpinner.tsx           # Animated loading indicator
+|   |   |-- ModeBadge.tsx               # Badge showing current mode (Live/Sim)
+|   |   |-- OccupancyGrid.tsx           # Grid overlay for zone occupancy
+|   |   |-- SignalBar.tsx               # WiFi signal strength bar
+|   |   |-- SparklineChart.tsx          # Inline sparkline chart (SVG)
+|   |   |-- StatusDot.tsx              # Colored status dot indicator
+|   |   |-- ThemedText.tsx             # Text component with theme support
+|   |   |-- ThemedView.tsx             # View component with theme support
+|   |
+|   |-- constants/                       # App-wide constants
+|   |   |-- api.ts                       # REST API endpoint paths, timeouts
+|   |   |-- simulation.ts               # Simulation tick rate, data ranges
+|   |   |-- websocket.ts                # WS reconnect config, max attempts
+|   |
+|   |-- hooks/                           # Custom React hooks (5 hooks)
+|   |   |-- usePoseStream.ts            # Subscribe to poseStore, manage WS lifecycle
+|   |   |-- useRssiScanner.ts           # Platform RSSI scanning with permission handling
+|   |   |-- useServerReachability.ts    # Periodic health check, reachability state
+|   |   |-- useTheme.ts                # Theme context consumer
+|   |   |-- useWebViewBridge.ts         # WebView <-> RN message bridge
+|   |
+|   |-- navigation/                      # React Navigation setup
+|   |   |-- MainTabs.tsx                # Bottom tab navigator (5 tabs)
+|   |   |-- RootNavigator.tsx           # Root stack (splash -> MainTabs)
+|   |   |-- types.ts                    # Navigation type definitions
+|   |
+|   |-- screens/                         # Screen modules (5 screens)
+|   |   |-- LiveScreen/
+|   |   |   |-- index.tsx               # LiveScreen container
+|   |   |   |-- GaussianSplatWebView.tsx       # Native: WebView 3D splat
+|   |   |   |-- GaussianSplatWebView.web.tsx   # Web: iframe 3D splat
+|   |   |   |-- LiveHUD.tsx             # Heads-up display overlay
+|   |   |   |-- useGaussianBridge.ts    # Bridge hook for splat WebView
+|   |   |
+|   |   |-- VitalsScreen/
+|   |   |   |-- index.tsx               # VitalsScreen container
+|   |   |   |-- BreathingGauge.tsx      # Breathing rate arc gauge
+|   |   |   |-- HeartRateGauge.tsx      # Heart rate arc gauge
+|   |   |   |-- MetricCard.tsx          # Metric display card
+|   |   |
+|   |   |-- ZonesScreen/
+|   |   |   |-- index.tsx               # ZonesScreen container
+|   |   |   |-- FloorPlanSvg.tsx        # SVG floor plan with occupancy overlay
+|   |   |   |-- useOccupancyGrid.ts     # Occupancy grid computation hook
+|   |   |   |-- ZoneLegend.tsx          # Zone color legend
+|   |   |
+|   |   |-- MATScreen/
+|   |   |   |-- index.tsx               # MATScreen container
+|   |   |   |-- SurvivorCounter.tsx     # Large survivor count display
+|   |   |   |-- MatWebView.tsx          # WebView for MAT zone map
+|   |   |   |-- AlertList.tsx           # Scrollable alert list
+|   |   |   |-- AlertCard.tsx           # Individual alert card
+|   |   |   |-- useMatBridge.ts         # Bridge hook for MAT WebView
+|   |   |
+|   |   |-- SettingsScreen/
+|   |       |-- index.tsx               # SettingsScreen container
+|   |       |-- ServerUrlInput.tsx      # Server URL text input with validation
+|   |       |-- ThemePicker.tsx         # Dark/light theme toggle
+|   |       |-- RssiToggle.tsx          # RSSI scanning enable/disable
+|   |
+|   |-- services/                        # External communication services (4 services)
+|   |   |-- ws.service.ts               # WebSocket client with reconnection
+|   |   |-- api.service.ts              # REST API client (fetch-based)
+|   |   |-- rssi.service.ts             # Default RSSI service (platform re-export)
+|   |   |-- rssi.service.android.ts     # Android RSSI via react-native-wifi-reborn
+|   |   |-- rssi.service.ios.ts         # iOS CoreWLAN stub
+|   |   |-- rssi.service.web.ts         # Web synthetic RSSI
+|   |   |-- simulation.service.ts       # Synthetic SensingFrame generator
+|   |
+|   |-- stores/                          # Zustand state stores (3 stores)
+|   |   |-- poseStore.ts                # Connection state, frames, features, persons
+|   |   |-- matStore.ts                 # Survivors, alerts, events, zone map
+|   |   |-- settingsStore.ts            # Server URL, theme, RSSI toggle (persisted)
+|   |
+|   |-- theme/                           # Design system tokens
+|   |   |-- index.ts                    # Theme re-exports
+|   |   |-- colors.ts                   # Color palette (dark + light)
+|   |   |-- spacing.ts                  # Spacing scale
+|   |   |-- typography.ts              # Font families and sizes
+|   |   |-- ThemeContext.tsx            # React context for theme
+|   |
+|   |-- types/                           # TypeScript type definitions
+|   |   |-- api.ts                      # REST API response types
+|   |   |-- html.d.ts                   # HTML asset module declaration
+|   |   |-- mat.ts                      # MAT domain types (Survivor, Alert, Event)
+|   |   |-- navigation.ts              # Navigation param list types
+|   |   |-- react-native-wifi-reborn.d.ts  # Type stubs for wifi-reborn
+|   |   |-- sensing.ts                  # SensingFrame, Person, VitalSigns types
+|   |
+|   |-- utils/                           # Utility functions
+|   |   |-- colorMap.ts                 # Value-to-color mapping for gauges
+|   |   |-- formatters.ts              # Number/date formatting helpers
+|   |   |-- ringBuffer.ts             # Fixed-size ring buffer for frame history
+|   |   |-- urlValidator.ts           # Server URL validation
+|   |
+|   |-- __tests__/                       # Unit tests (mirroring src/ structure)
+|       |-- test-utils.tsx              # Test utilities, render helpers, mocks
+|       |-- components/                 # Component unit tests (7 test files)
+|       |-- hooks/                      # Hook unit tests (3 test files)
+|       |-- screens/                    # Screen unit tests (5 test files)
+|       |-- services/                   # Service unit tests (4 test files)
+|       |-- stores/                     # Store unit tests (3 test files)
+|       |-- utils/                      # Utility unit tests (3 test files)
+```
+
+**File count summary:**
+
+| Category | Files |
+|----------|-------|
+| Source (components, screens, services, stores, hooks, utils, types, theme, navigation) | 63 `.ts`/`.tsx` files |
+| Unit tests | 25 test files |
+| E2E tests (Maestro) | 6 YAML specs |
+| Config (babel, metro, jest, tsconfig, eas, app) | 7 config files |
+| Assets | 6 image files |
+| **Total** | **107 files** |
+
+---
+
+## 4. Implementation Plan (File-Level)
+
+### 4.1 Phase 1: Core Infrastructure
+
+| File | Purpose | Priority |
+|------|---------|----------|
+| `App.tsx` | Root component with ThemeProvider and NavigationContainer | P0 |
+| `index.ts` | Expo entry point | P0 |
+| `app.config.ts` | Expo SDK 55 configuration | P0 |
+| `src/theme/colors.ts` | Dark and light color palettes | P0 |
+| `src/theme/spacing.ts` | Spacing scale | P0 |
+| `src/theme/typography.ts` | Font definitions | P0 |
+| `src/theme/ThemeContext.tsx` | React context provider for theme | P0 |
+| `src/navigation/MainTabs.tsx` | Bottom tab navigator with 5 tabs | P0 |
+| `src/navigation/RootNavigator.tsx` | Root stack navigator | P0 |
+| `src/types/sensing.ts` | SensingFrame, Person, VitalSigns type definitions | P0 |
+
+### 4.2 Phase 2: State and Services
+
+| File | Purpose | Priority |
+|------|---------|----------|
+| `src/stores/poseStore.ts` | Zustand store for connection state, frames, persons | P0 |
+| `src/stores/matStore.ts` | Zustand store for MAT survivors, alerts, events | P0 |
+| `src/stores/settingsStore.ts` | Zustand store with AsyncStorage persistence | P0 |
+| `src/services/ws.service.ts` | WebSocket client with reconnection and dispatch | P0 |
+| `src/services/api.service.ts` | REST API client | P1 |
+| `src/services/simulation.service.ts` | Synthetic SensingFrame generator for fallback | P0 |
+| `src/services/rssi.service.ts` | Platform RSSI re-export | P1 |
+| `src/services/rssi.service.android.ts` | Android react-native-wifi-reborn integration | P1 |
+| `src/services/rssi.service.ios.ts` | iOS CoreWLAN stub | P2 |
+| `src/services/rssi.service.web.ts` | Web synthetic RSSI | P1 |
+| `src/utils/ringBuffer.ts` | Fixed-size ring buffer for frame history | P0 |
+| `src/utils/urlValidator.ts` | Server URL validation | P1 |
+
+### 4.3 Phase 3: Shared Components
+
+| File | Purpose | Priority |
+|------|---------|----------|
+| `src/components/ConnectionBanner.tsx` | Status banner across all screens | P0 |
+| `src/components/GaugeArc.tsx` | SVG arc gauge for vitals | P0 |
+| `src/components/SparklineChart.tsx` | Inline sparkline for history | P0 |
+| `src/components/OccupancyGrid.tsx` | Grid overlay for zones | P1 |
+| `src/components/StatusDot.tsx` | Colored status indicator | P1 |
+| `src/components/SignalBar.tsx` | WiFi signal strength display | P1 |
+| `src/components/ModeBadge.tsx` | Live/Sim mode badge | P1 |
+| `src/components/ErrorBoundary.tsx` | React error boundary | P0 |
+| `src/components/LoadingSpinner.tsx` | Loading state indicator | P1 |
+| `src/components/ThemedText.tsx` | Themed text component | P0 |
+| `src/components/ThemedView.tsx` | Themed view component | P0 |
+| `src/components/HudOverlay.tsx` | Translucent HUD for Live screen | P1 |
+
+### 4.4 Phase 4: Screens
+
+| File | Purpose | Priority |
+|------|---------|----------|
+| `src/screens/LiveScreen/index.tsx` | Live 3D splat + HUD | P0 |
+| `src/screens/LiveScreen/GaussianSplatWebView.tsx` | Native WebView for splat | P0 |
+| `src/screens/LiveScreen/GaussianSplatWebView.web.tsx` | Web iframe for splat | P1 |
+| `src/screens/LiveScreen/LiveHUD.tsx` | HUD overlay with metrics | P1 |
+| `src/screens/LiveScreen/useGaussianBridge.ts` | WebView bridge hook | P0 |
+| `src/screens/VitalsScreen/index.tsx` | Vitals gauges and sparklines | P0 |
+| `src/screens/VitalsScreen/BreathingGauge.tsx` | Breathing rate gauge | P0 |
+| `src/screens/VitalsScreen/HeartRateGauge.tsx` | Heart rate gauge | P0 |
+| `src/screens/VitalsScreen/MetricCard.tsx` | Vitals metric card | P1 |
+| `src/screens/ZonesScreen/index.tsx` | Floor plan with occupancy | P1 |
+| `src/screens/ZonesScreen/FloorPlanSvg.tsx` | SVG floor plan renderer | P1 |
+| `src/screens/ZonesScreen/useOccupancyGrid.ts` | Occupancy computation | P1 |
+| `src/screens/ZonesScreen/ZoneLegend.tsx` | Zone legend | P2 |
+| `src/screens/MATScreen/index.tsx` | MAT dashboard | P1 |
+| `src/screens/MATScreen/SurvivorCounter.tsx` | Survivor count display | P1 |
+| `src/screens/MATScreen/MatWebView.tsx` | MAT zone map WebView | P1 |
+| `src/screens/MATScreen/AlertList.tsx` | Alert list | P1 |
+| `src/screens/MATScreen/AlertCard.tsx` | Alert card | P2 |
+| `src/screens/MATScreen/useMatBridge.ts` | MAT WebView bridge | P1 |
+| `src/screens/SettingsScreen/index.tsx` | Settings form | P0 |
+| `src/screens/SettingsScreen/ServerUrlInput.tsx` | Server URL input | P0 |
+| `src/screens/SettingsScreen/ThemePicker.tsx` | Theme toggle | P2 |
+| `src/screens/SettingsScreen/RssiToggle.tsx` | RSSI toggle | P2 |
+
+### 4.5 Phase 5: Testing
+
+| File | Purpose | Priority |
+|------|---------|----------|
+| `src/__tests__/stores/poseStore.test.ts` | Store state transitions, frame processing | P0 |
+| `src/__tests__/stores/matStore.test.ts` | MAT store state management | P1 |
+| `src/__tests__/stores/settingsStore.test.ts` | Persistence, defaults | P1 |
+| `src/__tests__/services/ws.service.test.ts` | WS connection, reconnection, fallback | P0 |
+| `src/__tests__/services/simulation.service.test.ts` | Synthetic frame generation | P1 |
+| `src/__tests__/services/api.service.test.ts` | REST client mocking | P1 |
+| `src/__tests__/services/rssi.service.test.ts` | Platform RSSI mocking | P2 |
+| `src/__tests__/components/*.test.tsx` | Component render tests (7 files) | P1 |
+| `src/__tests__/hooks/*.test.ts` | Hook behavior tests (3 files) | P1 |
+| `src/__tests__/screens/*.test.tsx` | Screen integration tests (5 files) | P1 |
+| `src/__tests__/utils/*.test.ts` | Utility function tests (3 files) | P1 |
+| `e2e/*.yaml` | Maestro E2E specs (6 files) | P2 |
+
+---
+
+## 5. Acceptance Criteria
+
+### 5.1 Build and Platform Support
+
+| ID | Criterion | Test Method |
+|----|-----------|-------------|
+| B-1 | App builds successfully with `npx expo start` for iOS, Android, and Web | CI build matrix: `expo start --ios`, `--android`, `--web` |
+| B-2 | App runs on iOS Simulator (iPhone 15 Pro, iOS 17+) | Manual verification on Simulator |
+| B-3 | App runs on Android Emulator (API 34+) | Manual verification on Emulator |
+| B-4 | App runs in web browser (Chrome 120+, Safari 17+, Firefox 120+) | Manual verification in browsers |
+| B-5 | TypeScript compiles with zero errors in strict mode | `npx tsc --noEmit` in CI |
+
+### 5.2 WebSocket and Data Streaming
+
+| ID | Criterion | Test Method |
+|----|-----------|-------------|
+| W-1 | WebSocket connects to sensing server and receives SensingFrame JSON | Integration test: start server, verify `poseStore.connectionStatus === 'connected'` |
+| W-2 | `poseStore.latestFrame` updates within 100ms of WebSocket message receipt | Unit test: mock WS, measure dispatch latency |
+| W-3 | WebSocket reconnects with exponential backoff after connection loss | Unit test: simulate WS close, verify retry intervals (1s, 2s, 4s, 8s, 16s) |
+| W-4 | Automatic fallback to simulated data within 5 seconds of connection failure | Unit test: fail WS 5 times, verify `connectionStatus === 'simulated'` within 5s |
+| W-5 | App recovers gracefully from sensing server restart (reconnects without crash) | Integration test: kill server, restart, verify reconnection and `connectionStatus === 'connected'` |
+
+### 5.3 Screen Rendering
+
+| ID | Criterion | Test Method |
+|----|-----------|-------------|
+| S-1 | All 5 screens render correctly with live data from sensing server | Integration test: connect to server, navigate all tabs, verify content |
+| S-2 | All 5 screens render correctly with simulated data | Unit test: set `connectionStatus = 'simulated'`, verify all screens render |
+| S-3 | Vital signs gauges animate smoothly (breathing BPM, heart rate BPM) | Visual inspection: gauges update at frame rate without jank |
+| S-4 | 3D Gaussian splat viewer shows skeleton with 17 COCO keypoints | Integration test: verify WebView loads, bridge sends keypoints, splat renders |
+| S-5 | Floor plan SVG updates with occupancy data when persons are detected | Unit test: inject 3 persons into poseStore, verify 3 markers on FloorPlanSvg |
+| S-6 | MAT dashboard shows survivor count, zone map, and alert list | Unit test: inject matStore data, verify SurvivorCounter and AlertList render |
+| S-7 | Connection banner shows correct status text and color for all 3 states | Unit test: cycle through `connected`/`simulated`/`error`, verify banner text and color |
+
+### 5.4 Persistence and Settings
+
+| ID | Criterion | Test Method |
+|----|-----------|-------------|
+| P-1 | Settings persist across app restarts (server URL, theme, RSSI toggle) | Integration test: set values, kill app, restart, verify values restored |
+| P-2 | Default server URL is `http://localhost:3000` when no persisted value exists | Unit test: clear AsyncStorage, verify default |
+| P-3 | Server URL input validates format before saving | Unit test: submit `not-a-url`, verify rejection; submit `http://192.168.1.1:3000`, verify acceptance |
+
+### 5.5 Navigation and UX
+
+| ID | Criterion | Test Method |
+|----|-----------|-------------|
+| N-1 | Bottom tab navigation works with correct icons for all 5 tabs | E2E: Maestro navigates all tabs, verifies active state |
+| N-2 | Dark theme renders correctly on all platforms (background #0D1117, accent #32B8C6) | Visual inspection on iOS, Android, Web |
+| N-3 | No infinite render loops or memory leaks in stores | Unit test: mount all screens, process 1000 frames, verify no memory growth beyond ring buffer size |
+| N-4 | ErrorBoundary catches and displays fallback UI for component errors | Unit test: throw in child component, verify fallback renders |
+
+### 5.6 Platform-Specific Features
+
+| ID | Criterion | Test Method |
+|----|-----------|-------------|
+| R-1 | RSSI scanning works on Android with react-native-wifi-reborn | Manual test on Android device with location permission granted |
+| R-2 | iOS RSSI service returns empty results without crashing | Unit test: call `scanNetworks()` on iOS, verify empty array returned |
+| R-3 | Web RSSI service generates synthetic RSSI values | Unit test: call `scanNetworks()` on web, verify synthetic data returned |
+
+### 5.7 Testing
+
+| ID | Criterion | Test Method |
+|----|-----------|-------------|
+| T-1 | All unit tests pass (`npm test` exits 0) | CI: `cd ui/mobile && npm test` |
+| T-2 | E2E Maestro tests pass for all 5 screens | CI: `maestro test e2e/` |
+| T-3 | E2E offline fallback test passes (simulated mode activates on disconnect) | CI: `maestro test e2e/offline_fallback.yaml` |
+| T-4 | No TypeScript type errors | CI: `npx tsc --noEmit` |
+
+---
+
+## 6. Consequences
+
+### 6.1 Positive
+
+- **Single codebase for three platforms**: Expo SDK 55 with React Native 0.83 builds iOS, Android, and Web from the same TypeScript source, reducing development and maintenance cost by approximately 60% compared to separate native apps.
+- **Instant field deployment**: Operators can install the app via Expo Go (development) or EAS Build (production) and connect to a local sensing server within minutes. No server-side mobile infrastructure required.
+- **Sub-100ms display latency**: WebSocket streaming from the Rust sensing server to the mobile app introduces less than 100ms additional latency beyond the CSI processing pipeline, providing near-real-time visualization.
+- **Offline-capable demos**: The simulation service generates realistic synthetic SensingFrame data, enabling demonstrations to stakeholders and testing without ESP32 hardware or a running sensing server.
+- **Operator-friendly UX**: Five purpose-built screens cover the primary use cases (live view, vitals, zones, MAT, settings) with a bottom-tab navigation pattern familiar to mobile users.
+- **Testable architecture**: Zustand stores with selector-based subscriptions, service-layer abstraction, and Maestro E2E specs provide a comprehensive testing strategy from unit to integration to end-to-end.
+- **Reuses existing infrastructure**: The app consumes the same WebSocket and REST APIs as the desktop UI, requiring no backend changes. The Three.js splat renderer is reused via WebView.
+
+### 6.2 Negative
+
+- **WebView-based 3D rendering has lower performance than native OpenGL**: The Gaussian splat viewer runs inside a WebView (native) or iframe (web), adding a JavaScript-to-native bridge hop and limiting frame rate to approximately 30 FPS on mid-range devices. Native OpenGL or Metal/Vulkan rendering would achieve 60 FPS but requires platform-specific code.
+- **react-native-wifi-reborn requires native module linking for Android RSSI**: This breaks the pure Expo managed workflow for Android builds. EAS Build with a custom development client is required. iOS RSSI scanning is not possible at all due to Apple restrictions.
+- **Expo managed workflow limits some native module access**: Certain native APIs (background location, Bluetooth LE, raw WiFi frames) are not available without ejecting to a bare workflow. This constrains future features like Bluetooth mesh fallback.
+- **WebView bridge latency**: Communication between React Native and the Three.js WebView via `postMessage` adds 5-15ms per message, reducing effective update rate for the 3D splat view. This is acceptable for 10-20 Hz sensing frame rates but would become a bottleneck at higher rates.
+- **AsyncStorage has no encryption**: Settings (including server URL) are stored in plaintext AsyncStorage. For security-sensitive deployments, expo-secure-store should replace AsyncStorage for credential storage.
+
+### 6.3 Risks
+
+| Risk | Probability | Impact | Mitigation |
+|------|-------------|--------|------------|
+| Expo SDK 55 breaking changes in future updates | Medium | Build failures, API deprecations | Pin SDK version in `app.config.ts`; test upgrades in preview branch |
+| WebView memory pressure on low-end Android devices | Medium | OOM crash during Three.js splat rendering | Implement splat LOD (level of detail) fallback; monitor WebView memory via `onContentProcessDidTerminate` |
+| react-native-wifi-reborn unmaintained or incompatible with RN 0.83 | Low | Android RSSI scanning broken | Fork and patch if needed; RSSI scanning is a secondary feature |
+| Sensing server WebSocket protocol changes | Medium | Frame parsing errors, broken display | Version the WebSocket protocol; add `protocol_version` field to SensingFrame |
+| Battery drain from continuous WebSocket connection on mobile | Medium | Poor user experience in extended field use | Implement configurable update rate throttling in settings; pause WS when app is backgrounded |
+| Three.js Gaussian splat HTML bundle size exceeds WebView limits | Low | Slow initial load, white screen | Lazy-load splat bundle; show placeholder skeleton during load; cache bundle in AsyncStorage |
+
+---
+
+## 7. Future Work
+
+### 7.1 Offline Model Inference
+
+Run a quantized ONNX pose estimation model directly on the mobile device using `onnxruntime-react-native`. This would allow the app to process raw CSI data (received via a local UDP relay or Bluetooth) without a sensing server, enabling fully disconnected field operation.
+
+**Prerequisites:** Export the trained WiFi-DensePose model (ADR-023) to ONNX format; quantize to INT8 for mobile; benchmark inference latency on iPhone 15 and Pixel 8.
+
+### 7.2 Push Notifications for MAT Alerts
+
+Integrate Firebase Cloud Messaging (Android) and APNs (iOS) to deliver push notifications when the sensing server detects new survivors or critical vital sign alerts. This allows operators to be alerted even when the app is backgrounded.
+
+**Prerequisites:** Add a push notification endpoint to the Rust sensing server; implement Expo Notifications integration in the mobile app.
+
+### 7.3 Apple Watch Companion
+
+Build a watchOS companion app using Expo's experimental watch support or a native SwiftUI module. The watch would display a minimal vitals view (breathing rate, heart rate, alert count) on the operator's wrist, with haptic feedback for critical MAT alerts.
+
+**Prerequisites:** Evaluate Expo watch support maturity; define minimal watch screen set; implement WatchConnectivity bridge.
+
+### 7.4 Bluetooth Mesh Fallback
+
+When WiFi is unavailable (collapsed building, power outage), use Bluetooth Low Energy (BLE) mesh to relay aggregated CSI summaries from ESP32 nodes to the mobile device. This requires ejecting from Expo managed workflow to bare workflow for BLE native module access.
+
+**Prerequisites:** Implement BLE GATT service on ESP32 firmware (ADR-018); integrate `react-native-ble-plx` in bare Expo workflow; define BLE CSI summary protocol (compressed, lower bandwidth than WiFi).
+
+### 7.5 Multi-Server Dashboard
+
+Support connecting to multiple sensing servers simultaneously (e.g., one per floor or building wing). The app would aggregate data from all servers into a unified zone map and MAT dashboard with per-server status indicators.
+
+**Prerequisites:** Extend `settingsStore` to support server list; modify `ws.service` to manage multiple WebSocket connections; merge `poseStore` frames from multiple sources with server-id tags.
+
+---
+
+## 8. Related ADRs
+
+| ADR | Relationship |
+|-----|-------------|
+| ADR-019 (Sensing-Only UI Mode) | **Extended**: The mobile app is the field-optimized evolution of the sensing-only UI mode, adding native mobile capabilities (push, RSSI, offline) |
+| ADR-021 (Vital Sign Detection) | **Consumed**: VitalsScreen displays breathing_rate_bpm and heart_rate_bpm extracted by the ADR-021 pipeline |
+| ADR-026 (Survivor Track Lifecycle) | **Consumed**: MATScreen displays survivor tracks with lifecycle states (detected, confirmed, rescued, lost) from ADR-026 |
+| ADR-029 (RuvSense Multistatic) | **Consumed**: The sensing server aggregates ESP32 TDM frames (ADR-029) and streams processed results to the mobile app |
+| ADR-031 (RuView Sensing-First RF) | **Consumed**: The WebSocket and REST APIs exposed by `wifi-densepose-sensing-server` (ADR-031) are the mobile app's data source |
+| ADR-032 (Mesh Security) | **Consumed**: Authenticated CSI frames (ADR-032) ensure the mobile app displays trustworthy data, not spoofed sensor readings |
+
+---
+
+## 9. References
+
+1. Expo SDK 55 Documentation. https://docs.expo.dev/
+2. React Native 0.83 Release Notes. https://reactnative.dev/
+3. Zustand v5. https://github.com/pmndrs/zustand
+4. React Navigation v7. https://reactnavigation.org/
+5. Maestro Mobile Testing Framework. https://maestro.mobile.dev/
+6. react-native-wifi-reborn. https://github.com/JuanSeBestworker/react-native-wifi-reborn
+7. Three.js Gaussian Splatting. https://github.com/mrdoob/three.js
+8. AsyncStorage. https://react-native-async-storage.github.io/async-storage/
+9. Geng, J. et al. (2023). "DensePose From WiFi." arXiv:2301.00250.
+10. ADR-019 through ADR-032 (internal).
--- a/ui/mobile/.env.example
+++ b/ui/mobile/.env.example
@ -0,0 +1 @@
+EXPO_PUBLIC_DEFAULT_SERVER_URL=http://192.168.1.100:8080
--- a/ui/mobile/.eslintrc.js
+++ b/ui/mobile/.eslintrc.js
@ -0,0 +1,26 @@
+module.exports = {
+  root: true,
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  plugins: ['@typescript-eslint', 'react', 'react-hooks'],
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
+    'plugin:@typescript-eslint/recommended',
+  ],
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+  rules: {
+    'react/react-in-jsx-scope': 'off',
+  },
+};
--- a/ui/mobile/.gitignore
+++ b/ui/mobile/.gitignore
@ -0,0 +1,41 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+expo-env.d.ts
+
+# Native
+.kotlin/
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo
+
+# generated native folders
+/ios
+/android
--- a/ui/mobile/.prettierrc
+++ b/ui/mobile/.prettierrc
@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all"
+}
--- a/ui/mobile/App.tsx
+++ b/ui/mobile/App.tsx
@ -0,0 +1,74 @@
+import { useEffect } from 'react';
+import { NavigationContainer, DarkTheme } from '@react-navigation/native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { StatusBar } from 'expo-status-bar';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { apiService } from '@/services/api.service';
+import { rssiService } from '@/services/rssi.service';
+import { wsService } from '@/services/ws.service';
+import { ThemeProvider } from './src/theme/ThemeContext';
+import { usePoseStore } from './src/stores/poseStore';
+import { useSettingsStore } from './src/stores/settingsStore';
+import { RootNavigator } from './src/navigation/RootNavigator';
+
+export default function App() {
+  const serverUrl = useSettingsStore((state) => state.serverUrl);
+  const rssiScanEnabled = useSettingsStore((state) => state.rssiScanEnabled);
+
+  useEffect(() => {
+    apiService.setBaseUrl(serverUrl);
+    const unsubscribe = wsService.subscribe(usePoseStore.getState().handleFrame);
+    wsService.connect(serverUrl);
+
+    return () => {
+      unsubscribe();
+      wsService.disconnect();
+    };
+  }, [serverUrl]);
+
+  useEffect(() => {
+    if (!rssiScanEnabled) {
+      rssiService.stopScanning();
+      return;
+    }
+
+    const unsubscribe = rssiService.subscribe(() => {
+      // Consumers can subscribe elsewhere for RSSI events.
+    });
+    rssiService.startScanning(2000);
+
+    return () => {
+      unsubscribe();
+      rssiService.stopScanning();
+    };
+  }, [rssiScanEnabled]);
+
+  useEffect(() => {
+    (globalThis as { __appStartTime?: number }).__appStartTime = Date.now();
+  }, []);
+
+  const navigationTheme = {
+    ...DarkTheme,
+    colors: {
+      ...DarkTheme.colors,
+      background: '#0A0E1A',
+      card: '#0D1117',
+      text: '#E2E8F0',
+      border: '#1E293B',
+      primary: '#32B8C6',
+    },
+  };
+
+  return (
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <SafeAreaProvider>
+        <ThemeProvider>
+          <NavigationContainer theme={navigationTheme}>
+            <RootNavigator />
+          </NavigationContainer>
+        </ThemeProvider>
+      </SafeAreaProvider>
+      <StatusBar style="light" />
+    </GestureHandlerRootView>
+  );
+}
--- a/ui/mobile/README.md
+++ b/ui/mobile/README.md
@ -0,0 +1,412 @@
+# WiFi-DensePose Mobile
+
+**See through walls from your phone.** Real-time WiFi sensing, vital signs, and disaster response — in a cross-platform mobile app.
+
+WiFi-DensePose Mobile is a React Native / Expo companion app for the [WiFi-DensePose](../../README.md) sensing platform. It connects to a WiFi sensing server over WebSocket, renders live 3D Gaussian splat visualizations of detected humans, displays breathing and heart rate in real time, and provides a full WiFi-MAT disaster triage dashboard — all from a single codebase that runs on iOS, Android, and Web.
+
+> | Screen | What It Shows |
+> |--------|---------------|
+> | **Live** | 3D Gaussian splat body rendering with FPS counter, signal strength, confidence HUD |
+> | **Vitals** | Breathing rate (6-30 BPM) and heart rate (40-120 BPM) arc gauges with sparkline history |
+> | **Zones** | SVG floor plan with occupancy grid, zone legend, presence heatmap |
+> | **MAT** | Mass casualty assessment: survivor counter, triage alerts, zone management |
+> | **Settings** | Server URL, theme picker, RSSI-only toggle, alert sound control |
+
+```bash
+# Quick start — web preview in 30 seconds
+cd ui/mobile
+npm install
+npx expo start --web
+```
+
+<!-- Screenshot placeholder: replace with actual app screenshots -->
+<!-- ![WiFi-DensePose Mobile](assets/screenshots/app-overview.png) -->
+
+---
+
+## Features
+
+| | Feature | Details |
+|---|---------|---------|
+| **3D Live View** | Gaussian splat rendering | Three.js via WebView (native) or iframe (web), real-time pose overlay |
+| **Vital Signs** | Breathing + heart rate | Arc gauge components with sparkline 60-sample history, confidence indicators |
+| **Disaster Response** | WiFi-MAT dashboard | Survivor detection, START triage classification, priority alerts, zone scan tracking |
+| **Floor Plan** | SVG occupancy grid | Zone-level presence visualization, color-coded density, interactive legend |
+| **Cross-Platform** | iOS, Android, Web | Expo SDK 55, React Native 0.83, single codebase with platform-specific modules |
+| **Offline Capable** | Automatic simulation fallback | When the sensing server is unreachable, generates synthetic data so the UI stays functional |
+| **RSSI Mode** | No CSI hardware needed | Toggle RSSI-only scanning for coarse presence detection on consumer WiFi devices |
+| **Dark Theme** | Cyan accent (#32B8C6) | Dark-first design system with consistent color tokens, spacing scale, and monospace typography |
+| **Persistent State** | Zustand + AsyncStorage | Settings, connection preferences, and theme survive app restarts |
+| **Platform WiFi** | Native RSSI scanning | Android: `react-native-wifi-reborn`, iOS: stub (requires entitlement), Web: synthetic values |
+
+---
+
+## Prerequisites
+
+| Requirement | Version | Notes |
+|-------------|---------|-------|
+| Node.js | 18+ | LTS recommended |
+| npm | 9+ | Ships with Node.js 18+ |
+| Expo CLI | Latest | Installed automatically via `npx` |
+| iOS Simulator | Xcode 15+ | macOS only; optional for iOS development |
+| Android Emulator | API 33+ | Android Studio; optional for Android development |
+| WiFi-DensePose Server | Any | Optional — app falls back to simulated data without a server |
+
+---
+
+## Quick Start
+
+### Web (fastest)
+
+```bash
+cd ui/mobile
+npm install
+npx expo start --web
+```
+
+Open `http://localhost:8081` in your browser. The app starts in simulation mode with synthetic pose and vital sign data.
+
+### Android
+
+```bash
+cd ui/mobile
+npm install
+npx expo start --android
+```
+
+Requires Android Studio with an emulator running, or a physical device with Expo Go installed.
+
+### iOS
+
+```bash
+cd ui/mobile
+npm install
+npx expo start --ios
+```
+
+Requires Xcode with a simulator, or a physical device with Expo Go. RSSI scanning on iOS requires the `com.apple.developer.networking.wifi-info` entitlement.
+
+---
+
+## Connecting to a Sensing Server
+
+The app connects to the WiFi-DensePose sensing server over WebSocket for live data. Configure the server URL in the **Settings** tab.
+
+| Server Location | URL | Notes |
+|----------------|-----|-------|
+| Local dev server | `http://localhost:3000` | Default; sensing WS auto-connects on port 3001 |
+| Docker container | `http://host.docker.internal:3000` | From emulator connecting to host Docker |
+| ESP32 mesh | `http://<esp32-ip>:3000` | Direct connection to ESP32 aggregator |
+| Remote server | `https://your-server.example.com` | TLS supported; WebSocket upgrades to `wss://` |
+
+When the server is unreachable, the app automatically falls back to **simulation mode** after exhausting reconnect attempts (exponential backoff). A yellow `SIM` badge appears in the connection banner. Reconnection resumes automatically when the server becomes available.
+
+---
+
+<details>
+<summary><strong>Architecture</strong></summary>
+
+### Directory Structure
+
+```
+ui/mobile/
+  App.tsx                          Root component (providers, navigation, services)
+  app.config.ts                    Expo configuration
+  index.ts                         Entry point
+  src/
+    components/
+      ConnectionBanner.tsx         Server status banner (connected/simulated/disconnected)
+      ErrorBoundary.tsx            Crash boundary with fallback UI
+      GaugeArc.tsx                 SVG arc gauge for vital sign display
+      HudOverlay.tsx               Heads-up display overlay
+      LoadingSpinner.tsx           Themed loading indicator
+      ModeBadge.tsx                LIVE / SIM / RSSI mode indicator
+      OccupancyGrid.tsx            Grid-based occupancy visualization
+      SignalBar.tsx                RSSI signal strength bars
+      SparklineChart.tsx           Mini sparkline for metric history
+      StatusDot.tsx                Connection status indicator dot
+      ThemedText.tsx               Text component with theme presets
+      ThemedView.tsx               View component with theme background
+    constants/
+      api.ts                       REST API path constants
+      simulation.ts                Simulation tick interval, defaults
+      websocket.ts                 WS path, reconnect delays, max attempts
+    hooks/
+      usePoseStream.ts             Subscribe to live or simulated sensing frames
+      useRssiScanner.ts            Platform RSSI scanning hook
+      useServerReachability.ts     HTTP health check polling
+      useTheme.ts                  Dark/light/system theme resolution
+      useWebViewBridge.ts          WebView message bridge for Gaussian viewer
+    navigation/
+      MainTabs.tsx                 Bottom tab navigator (5 tabs with lazy loading)
+      RootNavigator.tsx            Root stack navigator
+      types.ts                     Navigation param list types
+    screens/
+      LiveScreen/
+        index.tsx                  3D Gaussian splat view with HUD overlay
+        GaussianSplatWebView.tsx   Native WebView renderer (Three.js)
+        GaussianSplatWebView.web.tsx  Web iframe renderer
+        LiveHUD.tsx                FPS, RSSI, confidence, person count overlay
+        useGaussianBridge.ts       WebView message protocol
+      VitalsScreen/
+        index.tsx                  Breathing + heart rate dashboard
+        BreathingGauge.tsx         Arc gauge for breathing BPM
+        HeartRateGauge.tsx         Arc gauge for heart rate BPM
+        MetricCard.tsx             Vital sign metric card with sparkline
+      ZonesScreen/
+        index.tsx                  Floor plan occupancy view
+        FloorPlanSvg.tsx           SVG floor plan renderer
+        useOccupancyGrid.ts        Grid computation from sensing frames
+        ZoneLegend.tsx             Color-coded zone legend
+      MATScreen/
+        index.tsx                  Mass casualty assessment dashboard
+        AlertCard.tsx              Single triage alert card
+        AlertList.tsx              Scrollable alert list with priority sorting
+        MatWebView.tsx             MAT visualization WebView
+        SurvivorCounter.tsx        Survivor count by triage status
+        useMatBridge.ts            MAT WebView message protocol
+      SettingsScreen/
+        index.tsx                  App settings panel
+        ServerUrlInput.tsx         Server URL text input with validation
+        RssiToggle.tsx             RSSI-only mode switch
+        ThemePicker.tsx            Dark / light / system theme selector
+    services/
+      ws.service.ts               WebSocket client with auto-reconnect + simulation fallback
+      api.service.ts              REST client (Axios) with retry logic
+      rssi.service.ts             Platform-agnostic RSSI scanner interface
+      rssi.service.android.ts     Android: react-native-wifi-reborn integration
+      rssi.service.ios.ts         iOS: stub (requires entitlement)
+      rssi.service.web.ts         Web: synthetic RSSI values
+      simulation.service.ts       Generates synthetic SensingFrame data
+    stores/
+      poseStore.ts                Pose frames, connection status, frame history (Zustand)
+      matStore.ts                 MAT survivors, zones, alerts, disaster events (Zustand)
+      settingsStore.ts            Server URL, theme, RSSI toggle (Zustand + persist)
+    theme/
+      colors.ts                   Color tokens (bg, surface, accent, danger, etc.)
+      spacing.ts                  4px-based spacing scale
+      typography.ts               Font families and size presets
+      ThemeContext.tsx             React context provider for theme
+      index.ts                    Theme barrel export
+    types/
+      sensing.ts                  SensingFrame, SensingNode, VitalsData, Classification
+      mat.ts                      Survivor, Alert, ScanZone, TriageStatus, DisasterType
+      api.ts                      PoseStatus, ZoneConfig, HistoricalFrames, ApiError
+      navigation.ts               Navigation param lists
+    utils/
+      colorMap.ts                 Value-to-color mapping for heatmaps
+      formatters.ts               Number and date formatting utilities
+      ringBuffer.ts               Fixed-size circular buffer for frame history
+      urlValidator.ts             Server URL validation
+  e2e/                            Maestro end-to-end test specs
+  assets/                         App icons and images
+```
+
+### Data Flow
+
+```
+WiFi Sensing Server (Rust/Axum)
+       |
+       | WebSocket (ws://host:3001/ws/sensing)
+       v
+  ws.service.ts -----> [auto-reconnect with exponential backoff]
+       |                       |
+       | SensingFrame          | (server unreachable)
+       v                       v
+  poseStore.ts          simulation.service.ts
+       |                       |
+       | Zustand state         | synthetic SensingFrame
+       v                       v
+  usePoseStream.ts  <----------+
+       |
+       +---> LiveScreen (3D Gaussian splat + HUD)
+       +---> VitalsScreen (breathing + heart rate gauges)
+       +---> ZonesScreen (floor plan occupancy grid)
+
+  api.service.ts -----> REST API (GET /api/pose/status, /zones, /frames)
+       |
+       v
+  matStore.ts -----> MATScreen (survivor counter, alerts, zones)
+
+  rssi.service.ts -----> Platform WiFi scan (Android / iOS / Web)
+       |
+       v
+  useRssiScanner.ts -----> LiveScreen HUD (signal bars)
+```
+
+</details>
+
+---
+
+<details>
+<summary><strong>Screens</strong></summary>
+
+### Live
+
+The primary visualization screen. Renders a 3D Gaussian splat representation of detected humans using Three.js. On native platforms, the renderer runs inside a WebView; on web, it uses an iframe. A heads-up display overlays connection status, FPS, RSSI signal strength, detection confidence, and person count. Supports three modes: **LIVE** (connected to server), **SIM** (simulation fallback), and **RSSI** (RSSI-only scanning).
+
+### Vitals
+
+Displays real-time breathing rate and heart rate extracted from CSI signal processing. Each vital sign is shown as an animated arc gauge (`GaugeArc` component) with the current BPM value, a 60-sample sparkline history (`SparklineChart`), and a confidence percentage. Normal ranges: breathing 6-30 BPM, heart rate 40-120 BPM.
+
+### Zones
+
+A floor plan view that maps WiFi sensing coverage to physical space. Uses SVG rendering (`react-native-svg`) to draw zones with color-coded occupancy density. The `useOccupancyGrid` hook computes grid cell values from incoming sensing frames. A legend shows the color scale from empty to high-density zones.
+
+### MAT
+
+Mass Casualty Assessment Tool for disaster response. Displays a survivor counter grouped by START triage classification (Immediate / Delayed / Minor / Deceased), a scrollable alert list sorted by priority, and zone scan progress. Each alert card shows the survivor location, recommended action, and triage color. The MAT tab badge shows the active alert count.
+
+### Settings
+
+Configuration panel with four controls:
+- **Server URL** — text input with URL validation; changes trigger WebSocket reconnect
+- **Theme** — dark / light / system picker
+- **RSSI Scanning** — toggle for platform-native WiFi RSSI scanning
+- **Alert Sound** — toggle for MAT alert audio notifications
+
+All settings persist across app restarts via Zustand with AsyncStorage.
+
+</details>
+
+---
+
+<details>
+<summary><strong>API Integration</strong></summary>
+
+### WebSocket Protocol
+
+The app connects to the sensing server's WebSocket endpoint for real-time data streaming.
+
+**Endpoint:** `ws://<host>:3001/ws/sensing`
+
+**Frame format** (`SensingFrame`):
+
+```typescript
+interface SensingFrame {
+  type?: string;
+  timestamp?: number;
+  source?: string;           // "live" | "simulated"
+  tick?: number;
+  nodes: SensingNode[];      // Per-node RSSI, position, amplitude
+  features: FeatureSet;      // mean_rssi, variance, motion_band_power, etc.
+  classification: Classification; // motion_level, presence, confidence
+  signal_field: SignalField;  // 3D voxel grid values
+  vital_signs?: VitalsData;  // breathing_bpm, hr_proxy_bpm, confidence
+}
+```
+
+The WebSocket service (`ws.service.ts`) handles:
+- Automatic reconnection with exponential backoff (1s, 2s, 4s, 8s, 16s)
+- Fallback to simulation after max reconnect attempts
+- Protocol upgrade (`http:` to `ws:`, `https:` to `wss:`)
+- Port mapping (HTTP 3000 maps to WS 3001)
+
+### REST API
+
+The REST client (`api.service.ts`) provides:
+
+| Method | Path | Returns |
+|--------|------|---------|
+| `GET` | `/api/pose/status` | `PoseStatus` — server health and capabilities |
+| `GET` | `/api/pose/zones` | `ZoneConfig[]` — configured sensing zones |
+| `GET` | `/api/pose/frames?limit=N` | `HistoricalFrames` — recent frame history |
+
+All requests use Axios with a 5-second timeout and automatic retry (2 attempts).
+
+</details>
+
+---
+
+## Testing
+
+### Unit Tests
+
+```bash
+cd ui/mobile
+npm test
+```
+
+Runs the Jest test suite via `jest-expo`. Tests cover:
+
+| Category | Files | What Is Tested |
+|----------|-------|----------------|
+| Components | 7 | `ConnectionBanner`, `GaugeArc`, `HudOverlay`, `OccupancyGrid`, `SignalBar`, `SparklineChart`, `StatusDot` |
+| Screens | 5 | `LiveScreen`, `VitalsScreen`, `ZonesScreen`, `MATScreen`, `SettingsScreen` |
+| Services | 4 | `ws.service`, `api.service`, `rssi.service`, `simulation.service` |
+| Stores | 3 | `poseStore`, `matStore`, `settingsStore` |
+| Hooks | 3 | `usePoseStream`, `useRssiScanner`, `useServerReachability` |
+| Utils | 3 | `colorMap`, `ringBuffer`, `urlValidator` |
+
+### End-to-End Tests (Maestro)
+
+```bash
+# Install Maestro CLI
+curl -Ls https://get.maestro.mobile.dev | bash
+
+# Run all e2e specs
+maestro test e2e/
+```
+
+Maestro YAML specs cover each screen:
+
+| Spec | What It Verifies |
+|------|-----------------|
+| `live_screen.yaml` | 3D viewer loads, HUD elements visible, mode badge displays |
+| `vitals_screen.yaml` | Breathing and heart rate gauges render with values |
+| `zones_screen.yaml` | Floor plan SVG renders, zone legend visible |
+| `mat_screen.yaml` | Survivor counter displays, alert list populates |
+| `settings_screen.yaml` | URL input editable, theme picker works, toggles respond |
+| `offline_fallback.yaml` | App transitions to SIM mode when server unreachable |
+
+---
+
+## Tech Stack
+
+| Layer | Technology | Version |
+|-------|-----------|---------|
+| Framework | Expo | 55 |
+| UI | React Native | 0.83 |
+| Language | TypeScript | 5.9 |
+| Navigation | React Navigation | 7.x |
+| State | Zustand | 5.x |
+| HTTP | Axios | 1.x |
+| SVG | react-native-svg | 15.x |
+| WebView | react-native-webview | 13.x |
+| WiFi | react-native-wifi-reborn | 4.x |
+| Charts | Victory Native | 41.x |
+| Animations | react-native-reanimated | 4.x |
+| Testing | Jest + jest-expo | 30.x |
+| E2E | Maestro | Latest |
+
+---
+
+## Contributing
+
+1. Fork the repository
+2. Create a feature branch from `main`
+3. Make changes in the `ui/mobile/` directory
+4. Run `npm test` and verify all tests pass
+5. Run `npx expo start --web` to verify the app renders correctly
+6. Submit a pull request
+
+Follow the project's existing patterns:
+- Components go in `src/components/`
+- Screen-specific components go in `src/screens/<ScreenName>/`
+- Platform-specific files use the `.android.ts` / `.ios.ts` / `.web.ts` suffix convention
+- All state management uses Zustand stores in `src/stores/`
+- All types go in `src/types/`
+
+---
+
+## Credits
+
+Mobile app by [@MaTriXy](https://github.com/MaTriXy) — original scaffold, screen architecture, and cross-platform service layer.
+
+Built on the [WiFi-DensePose](../../README.md) sensing platform.
+
+---
+
+## License
+
+[MIT](../../LICENSE)
--- a/ui/mobile/app.config.ts
+++ b/ui/mobile/app.config.ts
@ -0,0 +1,12 @@
+export default {
+  name: 'WiFi-DensePose',
+  slug: 'wifi-densepose',
+  version: '1.0.0',
+  ios: {
+    bundleIdentifier: 'com.ruvnet.wifidensepose',
+  },
+  android: {
+    package: 'com.ruvnet.wifidensepose',
+  },
+  // Use expo-env and app-level defaults from the project configuration when available.
+};
--- a/ui/mobile/app.json
+++ b/ui/mobile/app.json
@ -0,0 +1,30 @@
+{
+  "expo": {
+    "name": "mobile",
+    "slug": "mobile",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash-icon.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "backgroundColor": "#E6F4FE",
+        "foregroundImage": "./assets/android-icon-foreground.png",
+        "backgroundImage": "./assets/android-icon-background.png",
+        "monochromeImage": "./assets/android-icon-monochrome.png"
+      },
+      "predictiveBackGestureEnabled": false
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}
--- a/ui/mobile/assets/android-icon-background.png
+++ b/ui/mobile/assets/android-icon-background.png
--- a/ui/mobile/assets/android-icon-foreground.png
+++ b/ui/mobile/assets/android-icon-foreground.png
--- a/ui/mobile/assets/android-icon-monochrome.png
+++ b/ui/mobile/assets/android-icon-monochrome.png
--- a/ui/mobile/assets/favicon.png
+++ b/ui/mobile/assets/favicon.png
--- a/ui/mobile/assets/icon.png
+++ b/ui/mobile/assets/icon.png
--- a/ui/mobile/assets/splash-icon.png
+++ b/ui/mobile/assets/splash-icon.png
--- a/ui/mobile/babel.config.js
+++ b/ui/mobile/babel.config.js
@ -0,0 +1,9 @@
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+    plugins: [
+      'react-native-reanimated/plugin'
+    ]
+  };
+};
--- a/ui/mobile/e2e/.maestro/config.yaml
+++ b/ui/mobile/e2e/.maestro/config.yaml
--- a/ui/mobile/e2e/live_screen.yaml
+++ b/ui/mobile/e2e/live_screen.yaml
--- a/ui/mobile/e2e/mat_screen.yaml
+++ b/ui/mobile/e2e/mat_screen.yaml
--- a/ui/mobile/e2e/offline_fallback.yaml
+++ b/ui/mobile/e2e/offline_fallback.yaml
--- a/ui/mobile/e2e/settings_screen.yaml
+++ b/ui/mobile/e2e/settings_screen.yaml
--- a/ui/mobile/e2e/vitals_screen.yaml
+++ b/ui/mobile/e2e/vitals_screen.yaml
--- a/ui/mobile/e2e/zones_screen.yaml
+++ b/ui/mobile/e2e/zones_screen.yaml
--- a/ui/mobile/eas.json
+++ b/ui/mobile/eas.json
@ -0,0 +1,17 @@
+{
+  "cli": {
+    "version": ">= 4.0.0"
+  },
+  "build": {
+    "development": {
+      "developmentClient": true,
+      "distribution": "internal"
+    },
+    "preview": {
+      "distribution": "internal"
+    },
+    "production": {
+      "autoIncrement": true
+    }
+  }
+}
--- a/ui/mobile/index.ts
+++ b/ui/mobile/index.ts
@ -0,0 +1,4 @@
+import { registerRootComponent } from 'expo';
+import App from './App';
+
+registerRootComponent(App);
--- a/ui/mobile/jest.config.js
+++ b/ui/mobile/jest.config.js
@ -0,0 +1,8 @@
+module.exports = {
+  preset: 'jest-expo',
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
+  testPathIgnorePatterns: ['/src/__tests__/'],
+  transformIgnorePatterns: [
+    'node_modules/(?!(expo|expo-.+|react-native|@react-native|react-native-webview|react-native-reanimated|react-native-svg|react-native-safe-area-context|react-native-screens|@react-navigation|@expo|@unimodules|expo-modules-core)/)',
+  ],
+};
--- a/ui/mobile/jest.setup.ts
+++ b/ui/mobile/jest.setup.ts
@ -0,0 +1,24 @@
+jest.mock('@react-native-async-storage/async-storage', () =>
+  require('@react-native-async-storage/async-storage/jest/async-storage-mock')
+);
+
+jest.mock('react-native-wifi-reborn', () => ({
+  loadWifiList: jest.fn(async () => []),
+}));
+
+jest.mock('react-native-reanimated', () =>
+  require('react-native-reanimated/mock')
+);
+
+jest.mock('react-native-webview', () => {
+  const React = require('react');
+  const { View } = require('react-native');
+
+  const MockWebView = (props: unknown) => React.createElement(View, props);
+
+  return {
+    __esModule: true,
+    default: MockWebView,
+    WebView: MockWebView,
+  };
+});
--- a/ui/mobile/metro.config.js
+++ b/ui/mobile/metro.config.js
@ -0,0 +1,11 @@
+const { getDefaultConfig } = require('expo/metro-config');
+
+const config = getDefaultConfig(__dirname);
+
+// Force CJS resolution for packages that use import.meta (not supported in Hermes script mode)
+config.resolver = {
+  ...config.resolver,
+  unstable_enablePackageExports: false,
+};
+
+module.exports = config;
--- a/ui/mobile/package-lock.json
+++ b/ui/mobile/package-lock.json
--- a/ui/mobile/package.json
+++ b/ui/mobile/package.json
@ -0,0 +1,53 @@
+{
+  "name": "mobile",
+  "version": "1.0.0",
+  "main": "index.ts",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "test": "jest",
+    "lint": "eslint ."
+  },
+  "dependencies": {
+    "@expo/vector-icons": "^15.0.2",
+    "@react-native-async-storage/async-storage": "2.2.0",
+    "@react-navigation/bottom-tabs": "^7.15.3",
+    "@react-navigation/native": "^7.1.31",
+    "@types/three": "^0.183.1",
+    "axios": "^1.13.6",
+    "expo": "~55.0.4",
+    "expo-status-bar": "~55.0.4",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
+    "react-native": "0.83.2",
+    "react-native-gesture-handler": "~2.30.0",
+    "react-native-reanimated": "4.2.1",
+    "react-native-safe-area-context": "~5.6.2",
+    "react-native-screens": "~4.23.0",
+    "react-native-svg": "15.15.3",
+    "react-native-web": "^0.21.0",
+    "react-native-webview": "13.16.0",
+    "react-native-wifi-reborn": "^4.13.6",
+    "three": "^0.183.2",
+    "victory-native": "^41.20.2",
+    "zustand": "^5.0.11"
+  },
+  "devDependencies": {
+    "@testing-library/jest-native": "^5.4.3",
+    "@testing-library/react-native": "^13.3.3",
+    "@types/jest": "^30.0.0",
+    "@types/react": "~19.2.2",
+    "@typescript-eslint/eslint-plugin": "^8.56.1",
+    "@typescript-eslint/parser": "^8.56.1",
+    "babel-preset-expo": "^55.0.10",
+    "eslint": "^10.0.2",
+    "jest": "^30.2.0",
+    "jest-expo": "^55.0.9",
+    "prettier": "^3.8.1",
+    "react-native-worklets": "^0.7.4",
+    "typescript": "~5.9.2"
+  },
+  "private": true
+}
--- a/ui/mobile/src/tests/components/ConnectionBanner.test.tsx
+++ b/ui/mobile/src/tests/components/ConnectionBanner.test.tsx
@ -0,0 +1,5 @@
+describe('placeholder', () => {
+  it('passes', () => {
+    expect(true).toBe(true);
+  });
+});
--- a/ui/mobile/src/tests/components/GaugeArc.test.tsx
+++ b/ui/mobile/src/tests/components/GaugeArc.test.tsx
@ -0,0 +1,5 @@
+describe('placeholder', () => {
+  it('passes', () => {
+    expect(true).toBe(true);
+  });
+});
--- a/ui/mobile/src/tests/components/HudOverlay.test.tsx
+++ b/ui/mobile/src/tests/components/HudOverlay.test.tsx
@ -0,0 +1,5 @@
+describe('placeholder', () => {
+  it('passes', () => {
+    expect(true).toBe(true);
+  });
+});
--- a/ui/mobile/src/tests/components/OccupancyGrid.test.tsx
+++ b/ui/mobile/src/tests/components/OccupancyGrid.test.tsx
@ -0,0 +1,5 @@
+describe('placeholder', () => {
+  it('passes', () => {
+    expect(true).toBe(true);
+  });
+});
--- a/ui/mobile/src/tests/components/SignalBar.test.tsx
+++ b/ui/mobile/src/tests/components/SignalBar.test.tsx
@ -0,0 +1,5 @@
+describe('placeholder', () => {
+  it('passes', () => {
+    expect(true).toBe(true);
+  });
+});
--- a/ui/mobile/src/tests/components/SparklineChart.test.tsx
+++ b/ui/mobile/src/tests/components/SparklineChart.test.tsx
@ -0,0 +1,5 @@
+describe('placeholder', () => {
+  it('passes', () => {
+    expect(true).toBe(true);
+  });
+});
--- a/ui/mobile/src/tests/components/StatusDot.test.tsx
+++ b/ui/mobile/src/tests/components/StatusDot.test.tsx
@ -0,0 +1,5 @@
+describe('placeholder', () => {
+  it('passes', () => {
+    expect(true).toBe(true);
+  });
+});
--- a/ui/mobile/src/tests/hooks/usePoseStream.test.ts
+++ b/ui/mobile/src/tests/hooks/usePoseStream.test.ts
@ -0,0 +1,5 @@
+describe('placeholder', () => {
+  it('passes', () => {
+    expect(true).toBe(true);
+  });
+});
--- a/ui/mobile/src/tests/hooks/useRssiScanner.test.ts
+++ b/ui/mobile/src/tests/hooks/useRssiScanner.test.ts
@ -0,0 +1,5 @@
+describe('placeholder', () => {
+  it('passes', () => {
+    expect(true).toBe(true);
+  });
+});
--- a/ui/mobile/src/tests/hooks/useServerReachability.test.ts
+++ b/ui/mobile/src/tests/hooks/useServerReachability.test.ts
@ -0,0 +1,5 @@
+describe('placeholder', () => {
+  it('passes', () => {
+    expect(true).toBe(true);
+  });
+});
--- a/ui/mobile/src/tests/screens/LiveScreen.test.tsx
+++ b/ui/mobile/src/tests/screens/LiveScreen.test.tsx
@ -0,0 +1,5 @@
+describe('placeholder', () => {
+  it('passes', () => {
+    expect(true).toBe(true);
+  });
+});
--- a/ui/mobile/src/tests/screens/MATScreen.test.tsx
+++ b/ui/mobile/src/tests/screens/MATScreen.test.tsx
@ -0,0 +1,5 @@
+describe('placeholder', () => {
+  it('passes', () => {
+    expect(true).toBe(true);
+  });
+});
--- a/ui/mobile/src/tests/screens/SettingsScreen.test.tsx
+++ b/ui/mobile/src/tests/screens/SettingsScreen.test.tsx
@ -0,0 +1,5 @@
+describe('placeholder', () => {
+  it('passes', () => {
+    expect(true).toBe(true);
+  });
+});
--- a/ui/mobile/src/tests/screens/VitalsScreen.test.tsx
+++ b/ui/mobile/src/tests/screens/VitalsScreen.test.tsx
@ -0,0 +1,5 @@
+describe('placeholder', () => {
+  it('passes', () => {
+    expect(true).toBe(true);
+  });
+});
--- a/ui/mobile/src/tests/screens/ZonesScreen.test.tsx
+++ b/ui/mobile/src/tests/screens/ZonesScreen.test.tsx
@ -0,0 +1,5 @@
+describe('placeholder', () => {
+  it('passes', () => {
+    expect(true).toBe(true);
+  });
+});
--- a/ui/mobile/src/tests/services/api.service.test.ts
+++ b/ui/mobile/src/tests/services/api.service.test.ts
@ -0,0 +1,5 @@
+describe('placeholder', () => {
+  it('passes', () => {
+    expect(true).toBe(true);
+  });
+});
--- a/ui/mobile/src/tests/services/rssi.service.test.ts
+++ b/ui/mobile/src/tests/services/rssi.service.test.ts
@ -0,0 +1,5 @@
+describe('placeholder', () => {
+  it('passes', () => {
+    expect(true).toBe(true);
+  });
+});
--- a/ui/mobile/src/tests/services/simulation.service.test.ts
+++ b/ui/mobile/src/tests/services/simulation.service.test.ts
@ -0,0 +1,5 @@
+describe('placeholder', () => {
+  it('passes', () => {
+    expect(true).toBe(true);
+  });
+});
--- a/ui/mobile/src/tests/services/ws.service.test.ts
+++ b/ui/mobile/src/tests/services/ws.service.test.ts
@ -0,0 +1,5 @@
+describe('placeholder', () => {
+  it('passes', () => {
+    expect(true).toBe(true);
+  });
+});
--- a/ui/mobile/src/tests/stores/matStore.test.ts
+++ b/ui/mobile/src/tests/stores/matStore.test.ts
@ -0,0 +1,5 @@
+describe('placeholder', () => {
+  it('passes', () => {
+    expect(true).toBe(true);
+  });
+});
--- a/ui/mobile/src/tests/stores/poseStore.test.ts
+++ b/ui/mobile/src/tests/stores/poseStore.test.ts
@ -0,0 +1,5 @@
+describe('placeholder', () => {
+  it('passes', () => {
+    expect(true).toBe(true);
+  });
+});
--- a/ui/mobile/src/tests/stores/settingsStore.test.ts
+++ b/ui/mobile/src/tests/stores/settingsStore.test.ts
@ -0,0 +1,5 @@
+describe('placeholder', () => {
+  it('passes', () => {
+    expect(true).toBe(true);
+  });
+});
--- a/ui/mobile/src/tests/test-utils.tsx
+++ b/ui/mobile/src/tests/test-utils.tsx
@ -0,0 +1,36 @@
+import React, { PropsWithChildren } from 'react';
+import { render, type RenderOptions } from '@testing-library/react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { ThemeProvider } from '@/theme/ThemeContext';
+
+type TestProvidersProps = PropsWithChildren<object>;
+
+const TestProviders = ({ children }: TestProvidersProps) => (
+  <GestureHandlerRootView style={{ flex: 1 }}>
+    <SafeAreaProvider>
+      <ThemeProvider>{children}</ThemeProvider>
+    </SafeAreaProvider>
+  </GestureHandlerRootView>
+);
+
+const TestProvidersWithNavigation = ({ children }: TestProvidersProps) => (
+  <TestProviders>
+    <NavigationContainer>{children}</NavigationContainer>
+  </TestProviders>
+);
+
+interface RenderWithProvidersOptions extends Omit<RenderOptions, 'wrapper'> {
+  withNavigation?: boolean;
+}
+
+export const renderWithProviders = (
+  ui: React.ReactElement,
+  { withNavigation, ...options }: RenderWithProvidersOptions = {},
+) => {
+  return render(ui, {
+    ...options,
+    wrapper: withNavigation ? TestProvidersWithNavigation : TestProviders,
+  });
+};
--- a/ui/mobile/src/tests/utils/colorMap.test.ts
+++ b/ui/mobile/src/tests/utils/colorMap.test.ts
@ -0,0 +1,5 @@
+describe('placeholder', () => {
+  it('passes', () => {
+    expect(true).toBe(true);
+  });
+});
--- a/ui/mobile/src/tests/utils/ringBuffer.test.ts
+++ b/ui/mobile/src/tests/utils/ringBuffer.test.ts
@ -0,0 +1,5 @@
+describe('placeholder', () => {
+  it('passes', () => {
+    expect(true).toBe(true);
+  });
+});
--- a/ui/mobile/src/tests/utils/urlValidator.test.ts
+++ b/ui/mobile/src/tests/utils/urlValidator.test.ts
@ -0,0 +1,5 @@
+describe('placeholder', () => {
+  it('passes', () => {
+    expect(true).toBe(true);
+  });
+});
--- a/ui/mobile/src/assets/images/wifi-icon.png
+++ b/ui/mobile/src/assets/images/wifi-icon.png
--- a/ui/mobile/src/assets/webview/gaussian-splats.html
+++ b/ui/mobile/src/assets/webview/gaussian-splats.html
@ -0,0 +1,585 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="default-src 'self'; script-src 'self' https://cdnjs.cloudflare.com https://cdn.jsdelivr.net; style-src 'self' 'unsafe-inline'; img-src 'self' data:; connect-src 'self'"
+    />
+    <title>WiFi DensePose Splat Viewer</title>
+    <style>
+      html,
+      body,
+      #gaussian-splat-root {
+        margin: 0;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        background: #0a0e1a;
+        touch-action: none;
+      }
+
+      #gaussian-splat-root {
+        position: relative;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="gaussian-splat-root"></div>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r165/three.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.165.0/examples/js/controls/OrbitControls.js"></script>
+
+    <script>
+      (function () {
+        const postMessageToRN = (message) => {
+          if (!window.ReactNativeWebView || typeof window.ReactNativeWebView.postMessage !== 'function') {
+            return;
+          }
+
+          try {
+            window.ReactNativeWebView.postMessage(JSON.stringify(message));
+          } catch (error) {
+            console.error('Failed to post RN message', error);
+          }
+        };
+
+        const postError = (message) => {
+          postMessageToRN({
+            type: 'ERROR',
+            payload: {
+              message: typeof message === 'string' ? message : 'Unknown bridge error',
+            },
+          });
+        };
+
+        // Use global THREE from CDN
+        const getThree = () => window.THREE;
+
+        // ---- Custom Splat Shaders --------------------------------------------
+
+        const SPLAT_VERTEX = `
+          attribute float splatSize;
+          attribute vec3  splatColor;
+          attribute float splatOpacity;
+
+          varying vec3  vColor;
+          varying float vOpacity;
+
+          void main() {
+            vColor   = splatColor;
+            vOpacity = splatOpacity;
+
+            vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
+            gl_PointSize = splatSize * (300.0 / -mvPosition.z);
+            gl_Position  = projectionMatrix * mvPosition;
+          }
+        `;
+
+        const SPLAT_FRAGMENT = `
+          varying vec3  vColor;
+          varying float vOpacity;
+
+          void main() {
+            // Circular soft-edge disc
+            float dist = length(gl_PointCoord - vec2(0.5));
+            if (dist > 0.5) discard;
+            float alpha = smoothstep(0.5, 0.2, dist) * vOpacity;
+            gl_FragColor = vec4(vColor, alpha);
+          }
+        `;
+
+        // ---- Color helpers ---------------------------------------------------
+
+        /** Map a scalar 0-1 to blue -> green -> red gradient */
+        function valueToColor(v) {
+          const clamped = Math.max(0, Math.min(1, v));
+          // blue(0) -> cyan(0.25) -> green(0.5) -> yellow(0.75) -> red(1)
+          let r;
+          let g;
+          let b;
+          if (clamped < 0.5) {
+            const t = clamped * 2;
+            r = 0;
+            g = t;
+            b = 1 - t;
+          } else {
+            const t = (clamped - 0.5) * 2;
+            r = t;
+            g = 1 - t;
+            b = 0;
+          }
+          return [r, g, b];
+        }
+
+        // ---- GaussianSplatRenderer -------------------------------------------
+
+        class GaussianSplatRenderer {
+          /** @param {HTMLElement} container - DOM element to attach the renderer to */
+          constructor(container, opts = {}) {
+            const THREE = getThree();
+            if (!THREE) {
+              throw new Error('Three.js not loaded');
+            }
+
+            this.container = container;
+            this.width = opts.width || container.clientWidth || 800;
+            this.height = opts.height || 500;
+
+            // Scene
+            this.scene = new THREE.Scene();
+            this.scene.background = new THREE.Color(0x0a0e1a);
+
+            // Camera — perspective looking down at the room
+            this.camera = new THREE.PerspectiveCamera(45, this.width / this.height, 0.1, 200);
+            this.camera.position.set(0, 10, 12);
+            this.camera.lookAt(0, 0, 0);
+
+            // Renderer
+            this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+            this.renderer.setSize(this.width, this.height);
+            this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+            container.appendChild(this.renderer.domElement);
+
+            // Lights
+            const ambient = new THREE.AmbientLight(0x9ec7ff, 0.35);
+            this.scene.add(ambient);
+
+            const directional = new THREE.DirectionalLight(0x9ec7ff, 0.65);
+            directional.position.set(4, 10, 6);
+            directional.castShadow = false;
+            this.scene.add(directional);
+
+            // Grid & room
+            this._createRoom(THREE);
+
+            // Signal field splats (20x20 = 400 points on the floor plane)
+            this.gridSize = 20;
+            this._createFieldSplats(THREE);
+
+            // Node markers (ESP32 / router positions)
+            this._createNodeMarkers(THREE);
+
+            // Body disruption blob
+            this._createBodyBlob(THREE);
+
+            // Orbit controls for drag + pinch zoom
+            this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
+            this.controls.target.set(0, 0, 0);
+            this.controls.minDistance = 6;
+            this.controls.maxDistance = 40;
+            this.controls.enableDamping = true;
+            this.controls.dampingFactor = 0.08;
+            this.controls.update();
+
+            // Animation state
+            this._animFrame = null;
+            this._lastData = null;
+            this._fpsFrames = [];
+            this._lastFpsReport = 0;
+
+            // Start render loop
+            this._animate();
+          }
+
+          // ---- Scene setup ---------------------------------------------------
+
+          _createRoom(THREE) {
+            // Floor grid (on y = 0), 20 units
+            const grid = new THREE.GridHelper(20, 20, 0x1a3a4a, 0x0d1f28);
+            grid.position.y = 0;
+            this.scene.add(grid);
+
+            // Room boundary wireframe
+            const boxGeo = new THREE.BoxGeometry(20, 6, 20);
+            const edges = new THREE.EdgesGeometry(boxGeo);
+            const line = new THREE.LineSegments(
+              edges,
+              new THREE.LineBasicMaterial({ color: 0x1a4a5a, opacity: 0.3, transparent: true }),
+            );
+            line.position.y = 3;
+            this.scene.add(line);
+          }
+
+          _createFieldSplats(THREE) {
+            const count = this.gridSize * this.gridSize;
+
+            const positions = new Float32Array(count * 3);
+            const sizes = new Float32Array(count);
+            const colors = new Float32Array(count * 3);
+            const opacities = new Float32Array(count);
+
+            // Lay splats on the floor plane (y = 0.05 to sit just above grid)
+            for (let iz = 0; iz < this.gridSize; iz++) {
+              for (let ix = 0; ix < this.gridSize; ix++) {
+                const idx = iz * this.gridSize + ix;
+                positions[idx * 3 + 0] = (ix - this.gridSize / 2) + 0.5; // x
+                positions[idx * 3 + 1] = 0.05; // y
+                positions[idx * 3 + 2] = (iz - this.gridSize / 2) + 0.5; // z
+
+                sizes[idx] = 1.5;
+                colors[idx * 3] = 0.1;
+                colors[idx * 3 + 1] = 0.2;
+                colors[idx * 3 + 2] = 0.6;
+                opacities[idx] = 0.15;
+              }
+            }
+
+            const geo = new THREE.BufferGeometry();
+            geo.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+            geo.setAttribute('splatSize', new THREE.BufferAttribute(sizes, 1));
+            geo.setAttribute('splatColor', new THREE.BufferAttribute(colors, 3));
+            geo.setAttribute('splatOpacity', new THREE.BufferAttribute(opacities, 1));
+
+            const mat = new THREE.ShaderMaterial({
+              vertexShader: SPLAT_VERTEX,
+              fragmentShader: SPLAT_FRAGMENT,
+              transparent: true,
+              depthWrite: false,
+              blending: THREE.AdditiveBlending,
+            });
+
+            this.fieldPoints = new THREE.Points(geo, mat);
+            this.scene.add(this.fieldPoints);
+          }
+
+          _createNodeMarkers(THREE) {
+            // Router at center — green sphere
+            const routerGeo = new THREE.SphereGeometry(0.3, 16, 16);
+            const routerMat = new THREE.MeshBasicMaterial({ color: 0x00ff88, transparent: true, opacity: 0.8 });
+            this.routerMarker = new THREE.Mesh(routerGeo, routerMat);
+            this.routerMarker.position.set(0, 0.5, 0);
+            this.scene.add(this.routerMarker);
+
+            // ESP32 node — cyan sphere (default position, updated from data)
+            const nodeGeo = new THREE.SphereGeometry(0.25, 16, 16);
+            const nodeMat = new THREE.MeshBasicMaterial({ color: 0x00ccff, transparent: true, opacity: 0.8 });
+            this.nodeMarker = new THREE.Mesh(nodeGeo, nodeMat);
+            this.nodeMarker.position.set(2, 0.5, 1.5);
+            this.scene.add(this.nodeMarker);
+          }
+
+          _createBodyBlob(THREE) {
+            // A cluster of splats representing body disruption
+            const count = 64;
+            const positions = new Float32Array(count * 3);
+            const sizes = new Float32Array(count);
+            const colors = new Float32Array(count * 3);
+            const opacities = new Float32Array(count);
+
+            for (let i = 0; i < count; i++) {
+              // Random sphere distribution
+              const theta = Math.random() * Math.PI * 2;
+              const phi = Math.acos(2 * Math.random() - 1);
+              const r = Math.random() * 1.5;
+              positions[i * 3] = r * Math.sin(phi) * Math.cos(theta);
+              positions[i * 3 + 1] = r * Math.cos(phi) + 2;
+              positions[i * 3 + 2] = r * Math.sin(phi) * Math.sin(theta);
+
+              sizes[i] = 2 + Math.random() * 3;
+              colors[i * 3] = 0.2;
+              colors[i * 3 + 1] = 0.8;
+              colors[i * 3 + 2] = 0.3;
+              opacities[i] = 0.0; // hidden until presence detected
+            }
+
+            const geo = new THREE.BufferGeometry();
+            geo.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+            geo.setAttribute('splatSize', new THREE.BufferAttribute(sizes, 1));
+            geo.setAttribute('splatColor', new THREE.BufferAttribute(colors, 3));
+            geo.setAttribute('splatOpacity', new THREE.BufferAttribute(opacities, 1));
+
+            const mat = new THREE.ShaderMaterial({
+              vertexShader: SPLAT_VERTEX,
+              fragmentShader: SPLAT_FRAGMENT,
+              transparent: true,
+              depthWrite: false,
+              blending: THREE.AdditiveBlending,
+            });
+
+            this.bodyBlob = new THREE.Points(geo, mat);
+            this.scene.add(this.bodyBlob);
+          }
+
+          // ---- Data update --------------------------------------------------
+
+          /**
+           * Update the visualization with new sensing data.
+           * @param {object} data - sensing_update JSON from ws_server
+           */
+          update(data) {
+            this._lastData = data;
+            if (!data) return;
+
+            const features = data.features || {};
+            const classification = data.classification || {};
+            const signalField = data.signal_field || {};
+            const nodes = data.nodes || [];
+
+            // -- Update signal field splats ------------------------------------
+            if (signalField.values && this.fieldPoints) {
+              const geo = this.fieldPoints.geometry;
+              const clr = geo.attributes.splatColor.array;
+              const sizes = geo.attributes.splatSize.array;
+              const opac = geo.attributes.splatOpacity.array;
+              const vals = signalField.values;
+              const count = Math.min(vals.length, this.gridSize * this.gridSize);
+
+              for (let i = 0; i < count; i++) {
+                const v = vals[i];
+                const [r, g, b] = valueToColor(v);
+                clr[i * 3] = r;
+                clr[i * 3 + 1] = g;
+                clr[i * 3 + 2] = b;
+                sizes[i] = 1.0 + v * 4.0;
+                opac[i] = 0.1 + v * 0.6;
+              }
+
+              geo.attributes.splatColor.needsUpdate = true;
+              geo.attributes.splatSize.needsUpdate = true;
+              geo.attributes.splatOpacity.needsUpdate = true;
+            }
+
+            // -- Update body blob ----------------------------------------------
+            if (this.bodyBlob) {
+              const bGeo = this.bodyBlob.geometry;
+              const bOpac = bGeo.attributes.splatOpacity.array;
+              const bClr = bGeo.attributes.splatColor.array;
+              const bSize = bGeo.attributes.splatSize.array;
+
+              const presence = classification.presence || false;
+              const motionLvl = classification.motion_level || 'absent';
+              const confidence = classification.confidence || 0;
+              const breathing = features.breathing_band_power || 0;
+
+              // Breathing pulsation
+              const breathPulse = 1.0 + Math.sin(Date.now() * 0.004) * Math.min(breathing * 3, 0.4);
+
+              for (let i = 0; i < bOpac.length; i++) {
+                if (presence) {
+                  bOpac[i] = confidence * 0.4;
+
+                  // Color by motion level
+                  if (motionLvl === 'active') {
+                    bClr[i * 3] = 1.0;
+                    bClr[i * 3 + 1] = 0.2;
+                    bClr[i * 3 + 2] = 0.1;
+                  } else {
+                    bClr[i * 3] = 0.1;
+                    bClr[i * 3 + 1] = 0.8;
+                    bClr[i * 3 + 2] = 0.4;
+                  }
+
+                  bSize[i] = (2 + Math.random() * 2) * breathPulse;
+                } else {
+                  bOpac[i] = 0.0;
+                }
+              }
+
+              bGeo.attributes.splatOpacity.needsUpdate = true;
+              bGeo.attributes.splatColor.needsUpdate = true;
+              bGeo.attributes.splatSize.needsUpdate = true;
+            }
+
+            // -- Update node positions -----------------------------------------
+            if (nodes.length > 0 && nodes[0].position && this.nodeMarker) {
+              const pos = nodes[0].position;
+              this.nodeMarker.position.set(pos[0], 0.5, pos[2]);
+            }
+          }
+
+          // ---- Render loop -------------------------------------------------
+
+          _animate() {
+            this._animFrame = requestAnimationFrame(() => this._animate());
+
+            const now = performance.now();
+
+            // Gentle router glow pulse
+            if (this.routerMarker) {
+              const pulse = 0.6 + 0.3 * Math.sin(now * 0.003);
+              this.routerMarker.material.opacity = pulse;
+            }
+
+            this.controls.update();
+            this.renderer.render(this.scene, this.camera);
+
+            this._fpsFrames.push(now);
+            while (this._fpsFrames.length > 0 && this._fpsFrames[0] < now - 1000) {
+              this._fpsFrames.shift();
+            }
+
+            if (now - this._lastFpsReport >= 1000) {
+              const fps = this._fpsFrames.length;
+              this._lastFpsReport = now;
+              postMessageToRN({
+                type: 'FPS_TICK',
+                payload: { fps },
+              });
+            }
+          }
+
+          // ---- Resize / cleanup --------------------------------------------
+
+          resize(width, height) {
+            if (!width || !height) return;
+            this.width = width;
+            this.height = height;
+            this.camera.aspect = width / height;
+            this.camera.updateProjectionMatrix();
+            this.renderer.setSize(width, height);
+          }
+
+          dispose() {
+            if (this._animFrame) {
+              cancelAnimationFrame(this._animFrame);
+            }
+
+            this.controls?.dispose();
+            this.renderer.dispose();
+            if (this.renderer.domElement.parentNode) {
+              this.renderer.domElement.parentNode.removeChild(this.renderer.domElement);
+            }
+          }
+        }
+
+        // Expose renderer constructor for debugging/interop
+        window.GaussianSplatRenderer = GaussianSplatRenderer;
+
+        let renderer = null;
+        let pendingFrame = null;
+        let pendingResize = null;
+
+        const postSafeReady = () => {
+          postMessageToRN({ type: 'READY' });
+        };
+
+        const routeMessage = (event) => {
+          let raw = event.data;
+          if (typeof raw === 'object' && raw != null && 'data' in raw) {
+            raw = raw.data;
+          }
+
+          let message = raw;
+          if (typeof raw === 'string') {
+            try {
+              message = JSON.parse(raw);
+            } catch (err) {
+              postError('Failed to parse RN message payload');
+              return;
+            }
+          }
+
+          if (!message || typeof message !== 'object') {
+            return;
+          }
+
+          if (message.type === 'FRAME_UPDATE') {
+            const payload = message.payload || null;
+            if (!payload) {
+              return;
+            }
+
+            if (!renderer) {
+              pendingFrame = payload;
+              return;
+            }
+
+            try {
+              renderer.update(payload);
+            } catch (error) {
+              postError((error && error.message) || 'Failed to update frame');
+            }
+            return;
+          }
+
+          if (message.type === 'RESIZE') {
+            const dims = message.payload || {};
+            const w = Number(dims.width);
+            const h = Number(dims.height);
+            if (!Number.isFinite(w) || !Number.isFinite(h) || !w || !h) {
+              return;
+            }
+
+            if (!renderer) {
+              pendingResize = { width: w, height: h };
+              return;
+            }
+
+            try {
+              renderer.resize(w, h);
+            } catch (error) {
+              postError((error && error.message) || 'Failed to resize renderer');
+            }
+            return;
+          }
+
+          if (message.type === 'DISPOSE') {
+            if (!renderer) {
+              return;
+            }
+
+            try {
+              renderer.dispose();
+            } catch (error) {
+              postError((error && error.message) || 'Failed to dispose renderer');
+            }
+            renderer = null;
+            return;
+          }
+        };
+
+        const buildRenderer = () => {
+          const container = document.getElementById('gaussian-splat-root');
+          if (!container) {
+            return;
+          }
+
+          try {
+            renderer = new GaussianSplatRenderer(container, {
+              width: container.clientWidth || window.innerWidth,
+              height: container.clientHeight || window.innerHeight,
+            });
+
+            if (pendingFrame) {
+              renderer.update(pendingFrame);
+              pendingFrame = null;
+            }
+
+            if (pendingResize) {
+              renderer.resize(pendingResize.width, pendingResize.height);
+              pendingResize = null;
+            }
+
+            postSafeReady();
+          } catch (error) {
+            renderer = null;
+            postError((error && error.message) || 'Failed to initialize renderer');
+          }
+        };
+
+        if (document.readyState === 'loading') {
+          document.addEventListener('DOMContentLoaded', buildRenderer);
+        } else {
+          buildRenderer();
+        }
+
+        window.addEventListener('message', routeMessage);
+        window.addEventListener('resize', () => {
+          if (!renderer) {
+            pendingResize = {
+              width: window.innerWidth,
+              height: window.innerHeight,
+            };
+            return;
+          }
+          renderer.resize(window.innerWidth, window.innerHeight);
+        });
+      })();
+    </script>
+  </body>
+</html>
--- a/ui/mobile/src/assets/webview/mat-dashboard.html
+++ b/ui/mobile/src/assets/webview/mat-dashboard.html
@ -0,0 +1,505 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>MAT Dashboard</title>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        margin: 0;
+        width: 100%;
+        height: 100%;
+        background: #0a0e1a;
+        color: #e5e7eb;
+        font-family: 'Courier New', 'Consolas', monospace;
+        overflow: hidden;
+      }
+
+      #app {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        width: 100%;
+        height: 100%;
+        padding: 8px;
+      }
+
+      #status {
+        color: #6dd4df;
+        font-size: 12px;
+        letter-spacing: 0.5px;
+      }
+
+      #mapCanvas {
+        flex: 1;
+        width: 100%;
+        border: 1px solid #1e293b;
+        border-radius: 8px;
+        min-height: 180px;
+        background: #0a0e1a;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app">
+      <div id="status">Initializing MAT dashboard...</div>
+      <canvas id="mapCanvas"></canvas>
+    </div>
+
+    <script>
+      (function () {
+        const TRIAGE = {
+          Immediate: 0,
+          Delayed: 1,
+          Minimal: 2,
+          Expectant: 3,
+          Unknown: 4,
+        };
+
+        const TRIAGE_COLOR = ['#ff0000', '#ffcc00', '#00cc00', '#111111', '#888888'];
+        const PRIORITY = { Critical: 0, High: 1, Medium: 2, Low: 3 };
+
+        const toRgba = (status) => TRIAGE_COLOR[status] || TRIAGE_COLOR[4];
+        const safeId = () =>
+          typeof crypto !== 'undefined' && crypto.randomUUID
+            ? crypto.randomUUID()
+            : `id-${Date.now()}-${Math.floor(Math.random() * 1e6)}`;
+
+        const isNumber = (value) => typeof value === 'number' && Number.isFinite(value);
+
+        class MatDashboard {
+          constructor() {
+            this.event = null;
+            this.zones = new Map();
+            this.survivors = new Map();
+            this.alerts = new Map();
+            this.motionVector = { x: 0, y: 0 };
+          }
+
+          createEvent(type, lat, lon, name) {
+            const eventId = safeId();
+            this.event = {
+              event_id: eventId,
+              disaster_type: type,
+              latitude: lat,
+              longitude: lon,
+              description: name,
+              createdAt: Date.now(),
+            };
+            this.zones.clear();
+            this.survivors.clear();
+            this.alerts.clear();
+            return eventId;
+          }
+
+          addRectangleZone(name, x, y, w, h) {
+            const id = safeId();
+            this.zones.set(id, {
+              id,
+              name,
+              zone_type: 'rectangle',
+              status: 0,
+              scan_count: 0,
+              detection_count: 0,
+              x,
+              y,
+              width: w,
+              height: h,
+            });
+            return id;
+          }
+
+          addCircleZone(name, cx, cy, radius) {
+            const id = safeId();
+            this.zones.set(id, {
+              id,
+              name,
+              zone_type: 'circle',
+              status: 0,
+              scan_count: 0,
+              detection_count: 0,
+              center_x: cx,
+              center_y: cy,
+              radius,
+            });
+            return id;
+          }
+
+          addZoneFromPayload(payload) {
+            if (!payload || typeof payload !== 'object') {
+              return;
+            }
+
+            const source = payload;
+            const type = source.zone_type || source.type || 'rectangle';
+            const name = source.name || `Zone-${safeId().slice(0, 4)}`;
+
+            if (type === 'circle' || source.center_x !== undefined) {
+              const cx = isNumber(source.center_x) ? source.center_x : 120;
+              const cy = isNumber(source.center_y) ? source.center_y : 120;
+              const radius = isNumber(source.radius) ? source.radius : 50;
+              return this.addCircleZone(name, cx, cy, radius);
+            }
+
+            const x = isNumber(source.x) ? source.x : 40;
+            const y = isNumber(source.y) ? source.y : 40;
+            const width = isNumber(source.width) ? source.width : 100;
+            const height = isNumber(source.height) ? source.height : 100;
+            return this.addRectangleZone(name, x, y, width, height);
+          }
+
+          inferTriage(vitalSigns, confidence) {
+            const breathing = isNumber(vitalSigns?.breathing_rate) ? vitalSigns.breathing_rate : 14;
+            const heart = isNumber(vitalSigns?.heart_rate)
+              ? vitalSigns.heart_rate
+              : isNumber(vitalSigns?.hr)
+                ? vitalSigns.hr
+                : 70;
+
+            if (!isNumber(confidence) || confidence > 0.82) {
+              if (breathing < 10 || breathing > 35 || heart > 150) {
+                return TRIAGE.Immediate;
+              }
+              if (breathing >= 8 && breathing <= 34) {
+                return TRIAGE.Delayed;
+              }
+            }
+
+            if (breathing >= 6 && breathing <= 28 && heart > 45 && heart < 180) {
+              return TRIAGE.Minimal;
+            }
+
+            return TRIAGE.Expectant;
+          }
+
+          locateZoneForPoint(x, y) {
+            for (const [id, zone] of this.zones.entries()) {
+              if (zone.zone_type === 'circle') {
+                const dx = x - zone.center_x;
+                const dy = y - zone.center_y;
+                const inside = Math.sqrt(dx * dx + dy * dy) <= zone.radius;
+                if (inside) {
+                  return id;
+                }
+                continue;
+              }
+
+              if (x >= zone.x && x <= zone.x + zone.width && y >= zone.y && y <= zone.y + zone.height) {
+                return id;
+              }
+            }
+            return this.zones.size > 0 ? this.zones.keys().next().value : safeId();
+          }
+
+          processSurvivorDetection(zone, confidence = 0.6, vital_signs = {}) {
+            const zoneKey =
+              typeof zone === 'string'
+                ? [...this.zones.values()].find((entry) => entry.id === zone || entry.name === zone)
+                : null;
+
+            const selectedZone =
+              zoneKey
+                || (this.zones.size > 0
+                  ? [...this.zones.values()][Math.floor(Math.random() * Math.max(1, this.zones.size))]
+                  : null);
+
+            const bounds = this._pickPointInZone(selectedZone);
+            const triageStatus = this.inferTriage(vital_signs, confidence);
+            const breathingRate = isNumber(vital_signs?.breathing_rate)
+              ? vital_signs.breathing_rate
+              : 10 + confidence * 28;
+            const heartRate = isNumber(vital_signs?.heart_rate)
+              ? vital_signs.heart_rate
+              : isNumber(vital_signs?.hr)
+                ? vital_signs.hr
+              : 55 + confidence * 60;
+
+            const id = safeId();
+            const zone_id = this.locateZoneForPoint(bounds.x, bounds.y);
+
+            const survivor = {
+              id,
+              zone_id,
+              x: bounds.x,
+              y: bounds.y,
+              depth: -Math.abs(isNumber(vital_signs.depth) ? vital_signs.depth : Math.random() * 3),
+              triage_status: triageStatus,
+              triage_color: toRgba(triageStatus),
+              confidence,
+              breathing_rate: breathingRate,
+              heart_rate: heartRate,
+              first_detected: new Date().toISOString(),
+              last_updated: new Date().toISOString(),
+              is_deteriorating: false,
+            };
+
+            this.survivors.set(id, survivor);
+            if (selectedZone) {
+              selectedZone.detection_count = (selectedZone.detection_count || 0) + 1;
+            }
+
+            if (typeof this.postMessage === 'function') {
+              this.postMessage({
+                type: 'SURVIVOR_DETECTED',
+                payload: survivor,
+              });
+            }
+
+            this.generateAlerts();
+            return id;
+          }
+
+          _pickPointInZone(zone) {
+            if (!zone) {
+              return {
+                x: 220 + Math.random() * 80,
+                y: 120 + Math.random() * 80,
+              };
+            }
+
+            if (zone.zone_type === 'circle') {
+              const angle = Math.random() * Math.PI * 2;
+              const radius = Math.random() * (zone.radius || 20);
+              return {
+                x: Math.max(10, Math.min(560, zone.center_x + Math.cos(angle) * radius)),
+                y: Math.max(10, Math.min(280, zone.center_y + Math.sin(angle) * radius)),
+              };
+            }
+
+            return {
+              x: Math.max(zone.x || 5, Math.min((zone.x || 5) + (zone.width || 40), (zone.x || 5) + Math.random() * (zone.width || 40))),
+              y: Math.max(zone.y || 5, Math.min((zone.y || 5) + (zone.height || 40), (zone.y || 5) + Math.random() * (zone.height || 40))),
+            };
+          }
+
+          generateAlerts() {
+            for (const survivor of this.survivors.values()) {
+              if ((survivor.triage_status !== TRIAGE.Immediate && survivor.triage_status !== TRIAGE.Delayed)) {
+                continue;
+              }
+
+              const alertId = `alert-${survivor.id}`;
+              if (this.alerts.has(alertId)) {
+                continue;
+              }
+
+              const priority =
+                survivor.triage_status === TRIAGE.Immediate ? PRIORITY.Critical : PRIORITY.High;
+              const message =
+                survivor.triage_status === TRIAGE.Immediate
+                  ? `Immediate rescue required at (${survivor.x.toFixed(0)}, ${survivor.y.toFixed(0)})`
+                  : `High-priority rescue needed at (${survivor.x.toFixed(0)}, ${survivor.y.toFixed(0)})`;
+              const alert = {
+                id: alertId,
+                survivor_id: survivor.id,
+                priority,
+                title: survivor.triage_status === TRIAGE.Immediate ? 'URGENT' : 'HIGH',
+                message,
+                recommended_action: survivor.triage_status === TRIAGE.Immediate ? 'Dispatch now' : 'Coordinate rescue',
+                triage_status: survivor.triage_status,
+                location_x: survivor.x,
+                location_y: survivor.y,
+                created_at: new Date().toISOString(),
+                priority_color: survivor.triage_status === TRIAGE.Immediate ? '#ff0000' : '#ff8c00',
+              };
+
+              this.alerts.set(alertId, alert);
+              if (typeof this.postMessage === 'function') {
+                this.postMessage({
+                  type: 'ALERT_GENERATED',
+                  payload: alert,
+                });
+              }
+            }
+          }
+
+          processFrame(frame) {
+            const motion = Number(frame?.features?.motion_band_power || 0);
+            const xDelta = isNumber(motion) ? (motion - 0.1) * 4 : 0;
+            const yDelta = isNumber(frame?.features?.breathing_band_power || 0)
+              ? (frame.features.breathing_band_power - 0.1) * 3
+              : 0;
+            this.motionVector = { x: xDelta || 0, y: yDelta || 0 };
+
+            for (const survivor of this.survivors.values()) {
+              const jitterX = (Math.random() - 0.5) * 2;
+              const jitterY = (Math.random() - 0.5) * 2;
+              survivor.x = Math.max(5, Math.min(560, survivor.x + this.motionVector.x + jitterX));
+              survivor.y = Math.max(5, Math.min(280, survivor.y + this.motionVector.y + jitterY));
+              survivor.last_updated = new Date().toISOString();
+            }
+          }
+
+          renderZones(ctx) {
+            for (const zone of this.zones.values()) {
+              const fill = 'rgba(0, 150, 255, 0.3)';
+              ctx.strokeStyle = '#0096ff';
+              ctx.fillStyle = fill;
+              ctx.lineWidth = 2;
+
+              if (zone.zone_type === 'circle') {
+                ctx.beginPath();
+                ctx.arc(zone.center_x, zone.center_y, zone.radius, 0, Math.PI * 2);
+                ctx.fill();
+                ctx.stroke();
+                ctx.fillStyle = '#ffffff';
+                ctx.font = '12px monospace';
+                ctx.fillText(zone.name, zone.center_x - 22, zone.center_y);
+              } else {
+                ctx.fillRect(zone.x, zone.y, zone.width, zone.height);
+                ctx.strokeRect(zone.x, zone.y, zone.width, zone.height);
+                ctx.fillStyle = '#ffffff';
+                ctx.font = '12px monospace';
+                ctx.fillText(zone.name, zone.x + 4, zone.y + 14);
+              }
+            }
+          }
+
+          renderSurvivors(ctx) {
+            for (const survivor of this.survivors.values()) {
+              const radius = survivor.is_deteriorating ? 11 : 9;
+
+              if (survivor.triage_status === TRIAGE.Immediate) {
+                ctx.fillStyle = 'rgba(255, 0, 0, 0.26)';
+                ctx.beginPath();
+                ctx.arc(survivor.x, survivor.y, radius + 6, 0, Math.PI * 2);
+                ctx.fill();
+              }
+
+              ctx.fillStyle = survivor.triage_color || toRgba(TRIAGE.Minimal);
+              ctx.font = 'bold 18px monospace';
+              ctx.textAlign = 'center';
+              ctx.textBaseline = 'middle';
+              ctx.fillText('✦', survivor.x, survivor.y);
+              ctx.strokeStyle = '#ffffff';
+              ctx.lineWidth = 1.5;
+              ctx.beginPath();
+              ctx.arc(survivor.x, survivor.y, radius, 0, Math.PI * 2);
+              ctx.stroke();
+
+              if (survivor.depth < 0) {
+                ctx.fillStyle = '#ffffff';
+                ctx.font = '9px monospace';
+                ctx.fillText(`${Math.abs(survivor.depth).toFixed(1)}m`, survivor.x + radius + 4, survivor.y + 4);
+              }
+            }
+          }
+
+          render(ctx, width, height) {
+            ctx.clearRect(0, 0, width, height);
+            ctx.fillStyle = '#0a0e1a';
+            ctx.fillRect(0, 0, width, height);
+
+            ctx.strokeStyle = '#1f2a3d';
+            ctx.lineWidth = 1;
+            const grid = 40;
+            for (let x = 0; x <= width; x += grid) {
+              ctx.beginPath();
+              ctx.moveTo(x, 0);
+              ctx.lineTo(x, height);
+              ctx.stroke();
+            }
+            for (let y = 0; y <= height; y += grid) {
+              ctx.beginPath();
+              ctx.moveTo(0, y);
+              ctx.lineTo(width, y);
+              ctx.stroke();
+            }
+
+            this.renderZones(ctx);
+            this.renderSurvivors(ctx);
+
+            ctx.fillStyle = '#ffffff';
+            ctx.font = '12px monospace';
+            const stats = {
+              survivors: this.survivors.size,
+              alerts: this.alerts.size,
+            };
+            ctx.fillText(`Survivors: ${stats.survivors}`, 12, 20);
+            ctx.fillText(`Alerts: ${stats.alerts}`, 12, 36);
+          }
+
+          postMessage(message) {
+            if (typeof window.ReactNativeWebView !== 'undefined' && window.ReactNativeWebView.postMessage) {
+              window.ReactNativeWebView.postMessage(JSON.stringify(message));
+            }
+          }
+        }
+
+        const dashboard = new MatDashboard();
+        const canvas = document.getElementById('mapCanvas');
+        const ctx = canvas.getContext('2d');
+        const status = document.getElementById('status');
+
+        const resize = () => {
+          canvas.width = Math.max(200, Math.floor(canvas.parentElement.clientWidth - 2));
+          canvas.height = Math.max(180, Math.floor(canvas.parentElement.clientHeight - 20));
+        };
+
+        const startup = () => {
+          dashboard.createEvent('earthquake', 37.7749, -122.4194, 'Training Scenario');
+          dashboard.addRectangleZone('Zone A', 60, 45, 170, 120);
+          dashboard.addCircleZone('Zone B', 300, 170, 70);
+          dashboard.processSurvivorDetection('Zone A', 0.94, { breathing_rate: 11, hr: 128 });
+          dashboard.processSurvivorDetection('Zone A', 0.88, { breathing_rate: 16, hr: 118 });
+          dashboard.processSurvivorDetection('Zone B', 0.71, { breathing_rate: 9, hr: 142 });
+          status.textContent = 'MAT dashboard ready';
+          dashboard.postMessage({ type: 'READY' });
+        };
+
+        const loop = () => {
+          if (dashboard.zones.size > 0) {
+            dashboard.render(ctx, canvas.width, canvas.height);
+          }
+          requestAnimationFrame(loop);
+        };
+
+        window.addEventListener('resize', resize);
+
+        window.addEventListener('message', (evt) => {
+          let incoming = evt.data;
+          try {
+            if (typeof incoming === 'string') {
+              incoming = JSON.parse(incoming);
+            }
+          } catch {
+            incoming = null;
+          }
+
+          if (!incoming || typeof incoming !== 'object') {
+            return;
+          }
+
+          if (incoming.type === 'CREATE_EVENT') {
+            const payload = incoming.payload || {};
+            dashboard.createEvent(
+              payload.type || payload.disaster_type || 'earthquake',
+              payload.latitude || 0,
+              payload.longitude || 0,
+              payload.name || payload.description || 'Disaster Event',
+            );
+            return;
+          }
+
+          if (incoming.type === 'ADD_ZONE') {
+            dashboard.addZoneFromPayload(incoming.payload || {});
+            return;
+          }
+
+          if (incoming.type === 'FRAME_UPDATE') {
+            dashboard.processFrame(incoming.payload || {});
+          }
+        });
+
+        resize();
+        startup();
+        loop();
+      })();
+    </script>
+  </body>
+</html>
--- a/ui/mobile/src/components/ConnectionBanner.tsx
+++ b/ui/mobile/src/components/ConnectionBanner.tsx
@ -0,0 +1,70 @@
+import { StyleSheet, View } from 'react-native';
+import { ThemedText } from './ThemedText';
+
+type ConnectionState = 'connected' | 'simulated' | 'disconnected';
+
+type ConnectionBannerProps = {
+  status: ConnectionState;
+};
+
+const resolveState = (status: ConnectionState) => {
+  if (status === 'connected') {
+    return {
+      label: 'LIVE STREAM',
+      backgroundColor: '#0F6B2A',
+      textColor: '#E2FFEA',
+    };
+  }
+
+  if (status === 'disconnected') {
+    return {
+      label: 'DISCONNECTED',
+      backgroundColor: '#8A1E2A',
+      textColor: '#FFE3E7',
+    };
+  }
+
+  return {
+    label: 'SIMULATED DATA',
+    backgroundColor: '#9A5F0C',
+    textColor: '#FFF3E1',
+  };
+};
+
+export const ConnectionBanner = ({ status }: ConnectionBannerProps) => {
+  const state = resolveState(status);
+
+  return (
+    <View
+      style={[
+        styles.banner,
+        {
+          backgroundColor: state.backgroundColor,
+          borderBottomColor: state.textColor,
+        },
+      ]}
+    >
+      <ThemedText preset="labelMd" style={[styles.text, { color: state.textColor }]}>
+        {state.label}
+      </ThemedText>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  banner: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    zIndex: 100,
+    paddingVertical: 6,
+    borderBottomWidth: 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  text: {
+    letterSpacing: 2,
+    fontWeight: '700',
+  },
+});
--- a/ui/mobile/src/components/ErrorBoundary.tsx
+++ b/ui/mobile/src/components/ErrorBoundary.tsx
@ -0,0 +1,66 @@
+import { Component, ErrorInfo, ReactNode } from 'react';
+import { Button, StyleSheet, View } from 'react-native';
+import { ThemedText } from './ThemedText';
+import { ThemedView } from './ThemedView';
+
+type ErrorBoundaryProps = {
+  children: ReactNode;
+};
+
+type ErrorBoundaryState = {
+  hasError: boolean;
+  error?: Error;
+};
+
+export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error('ErrorBoundary caught an error', error, errorInfo);
+  }
+
+  handleRetry = () => {
+    this.setState({ hasError: false, error: undefined });
+  };
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <ThemedView style={styles.container}>
+          <ThemedText preset="displayMd">Something went wrong</ThemedText>
+          <ThemedText preset="bodySm" style={styles.message}>
+            {this.state.error?.message ?? 'An unexpected error occurred.'}
+          </ThemedText>
+          <View style={styles.buttonWrap}>
+            <Button title="Retry" onPress={this.handleRetry} />
+          </View>
+        </ThemedView>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 20,
+    gap: 12,
+  },
+  message: {
+    textAlign: 'center',
+  },
+  buttonWrap: {
+    marginTop: 8,
+  },
+});
--- a/ui/mobile/src/components/GaugeArc.tsx
+++ b/ui/mobile/src/components/GaugeArc.tsx
@ -0,0 +1,117 @@
+import { useEffect, useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
+import Animated, { interpolateColor, useAnimatedProps, useSharedValue, withSpring } from 'react-native-reanimated';
+import Svg, { Circle, G, Text as SvgText } from 'react-native-svg';
+
+type GaugeArcProps = {
+  value: number;
+  min?: number;
+  max: number;
+  label: string;
+  unit: string;
+  color: string;
+  colorTo?: string;
+  size?: number;
+};
+
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+
+const clamp = (value: number, min: number, max: number) => Math.max(min, Math.min(max, value));
+
+export const GaugeArc = ({ value, min = 0, max, label, unit, color, colorTo, size = 140 }: GaugeArcProps) => {
+  const radius = (size - 20) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const arcLength = circumference * 0.75;
+  const strokeWidth = 12;
+  const progress = useSharedValue(0);
+
+  const normalized = useMemo(() => {
+    const span = max - min;
+    const safeSpan = span > 0 ? span : 1;
+    return clamp((value - min) / safeSpan, 0, 1);
+  }, [value, min, max]);
+
+  const displayValue = useMemo(() => {
+    if (!Number.isFinite(value)) {
+      return '--';
+    }
+    return `${Math.max(min, Math.min(max, value)).toFixed(1)} ${unit}`;
+  }, [max, min, unit, value]);
+
+  useEffect(() => {
+    progress.value = withSpring(normalized, {
+      damping: 16,
+      stiffness: 140,
+      mass: 1,
+    });
+  }, [normalized, progress]);
+
+  const animatedStroke = useAnimatedProps(() => {
+    const dashOffset = arcLength - arcLength * progress.value;
+    const strokeColor = colorTo ? interpolateColor(progress.value, [0, 1], [color, colorTo]) : color;
+
+    return {
+      strokeDashoffset: dashOffset,
+      stroke: strokeColor,
+    };
+  });
+
+  return (
+    <View style={styles.wrapper}>
+      <Svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+        <G transform={`rotate(-135 ${size / 2} ${size / 2})`}>
+          <Circle
+            cx={size / 2}
+            cy={size / 2}
+            r={radius}
+            strokeWidth={strokeWidth}
+            stroke="#1E293B"
+            fill="none"
+            strokeDasharray={`${arcLength} ${circumference}`}
+            strokeLinecap="round"
+          />
+          <AnimatedCircle
+            cx={size / 2}
+            cy={size / 2}
+            r={radius}
+            strokeWidth={strokeWidth}
+            stroke={color}
+            fill="none"
+            strokeDasharray={`${arcLength} ${circumference}`}
+            strokeLinecap="round"
+            animatedProps={animatedStroke}
+          />
+        </G>
+        <SvgText
+          x={size / 2}
+          y={size / 2 - 8}
+          fill="#E2E8F0"
+          fontSize={Math.round(size * 0.16)}
+          fontFamily="Courier New"
+          fontWeight="700"
+          textAnchor="middle"
+        >
+          {displayValue}
+        </SvgText>
+        <SvgText
+          x={size / 2}
+          y={size / 2 + 18}
+          fill="#94A3B8"
+          fontSize={Math.round(size * 0.085)}
+          fontFamily="Courier New"
+          textAnchor="middle"
+          letterSpacing="0.6"
+        >
+          {label}
+        </SvgText>
+      </Svg>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
--- a/ui/mobile/src/components/HudOverlay.tsx
+++ b/ui/mobile/src/components/HudOverlay.tsx
--- a/ui/mobile/src/components/LoadingSpinner.tsx
+++ b/ui/mobile/src/components/LoadingSpinner.tsx
@ -0,0 +1,60 @@
+import { useEffect } from 'react';
+import { StyleSheet, ViewStyle } from 'react-native';
+import Animated, { Easing, useAnimatedStyle, useSharedValue, withRepeat, withTiming } from 'react-native-reanimated';
+import Svg, { Circle } from 'react-native-svg';
+import { colors } from '../theme/colors';
+
+type LoadingSpinnerProps = {
+  size?: number;
+  color?: string;
+  style?: ViewStyle;
+};
+
+export const LoadingSpinner = ({ size = 36, color = colors.accent, style }: LoadingSpinnerProps) => {
+  const rotation = useSharedValue(0);
+  const strokeWidth = Math.max(4, size * 0.14);
+  const center = size / 2;
+  const radius = center - strokeWidth;
+  const circumference = 2 * Math.PI * radius;
+
+  useEffect(() => {
+    rotation.value = withRepeat(withTiming(360, { duration: 900, easing: Easing.linear }), -1);
+  }, [rotation]);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ rotateZ: `${rotation.value}deg` }],
+  }));
+
+  return (
+    <Animated.View style={[styles.container, { width: size, height: size }, style, animatedStyle]} pointerEvents="none">
+      <Svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+        <Circle
+          cx={center}
+          cy={center}
+          r={radius}
+          stroke="rgba(255,255,255,0.2)"
+          strokeWidth={strokeWidth}
+          fill="none"
+        />
+        <Circle
+          cx={center}
+          cy={center}
+          r={radius}
+          stroke={color}
+          strokeWidth={strokeWidth}
+          fill="none"
+          strokeLinecap="round"
+          strokeDasharray={`${circumference * 0.3} ${circumference * 0.7}`}
+          strokeDashoffset={circumference * 0.2}
+        />
+      </Svg>
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
--- a/ui/mobile/src/components/ModeBadge.tsx
+++ b/ui/mobile/src/components/ModeBadge.tsx
@ -0,0 +1,71 @@
+import { StyleSheet } from 'react-native';
+import { ThemedText } from './ThemedText';
+import { colors } from '../theme/colors';
+
+type Mode = 'CSI' | 'RSSI' | 'SIM' | 'LIVE';
+
+const modeStyle: Record<
+  Mode,
+  {
+    background: string;
+    border: string;
+    color: string;
+  }
+> = {
+  CSI: {
+    background: 'rgba(50, 184, 198, 0.25)',
+    border: colors.accent,
+    color: colors.accent,
+  },
+  RSSI: {
+    background: 'rgba(255, 165, 2, 0.2)',
+    border: colors.warn,
+    color: colors.warn,
+  },
+  SIM: {
+    background: 'rgba(255, 71, 87, 0.18)',
+    border: colors.simulated,
+    color: colors.simulated,
+  },
+  LIVE: {
+    background: 'rgba(46, 213, 115, 0.18)',
+    border: colors.connected,
+    color: colors.connected,
+  },
+};
+
+type ModeBadgeProps = {
+  mode: Mode;
+};
+
+export const ModeBadge = ({ mode }: ModeBadgeProps) => {
+  const style = modeStyle[mode];
+
+  return (
+    <ThemedText
+      preset="labelMd"
+      style={[
+        styles.badge,
+        {
+          backgroundColor: style.background,
+          borderColor: style.border,
+          color: style.color,
+        },
+      ]}
+    >
+      {mode}
+    </ThemedText>
+  );
+};
+
+const styles = StyleSheet.create({
+  badge: {
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    borderRadius: 999,
+    borderWidth: 1,
+    overflow: 'hidden',
+    letterSpacing: 1,
+    textAlign: 'center',
+  },
+});
--- a/ui/mobile/src/components/OccupancyGrid.tsx
+++ b/ui/mobile/src/components/OccupancyGrid.tsx
@ -0,0 +1,147 @@
+import { useEffect, useMemo, useRef } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import Animated, { interpolateColor, useAnimatedProps, useSharedValue, withTiming, type SharedValue } from 'react-native-reanimated';
+import Svg, { Circle, G, Rect } from 'react-native-svg';
+import { colors } from '../theme/colors';
+
+type Point = {
+  x: number;
+  y: number;
+};
+
+type OccupancyGridProps = {
+  values: number[];
+  personPositions?: Point[];
+  size?: number;
+  style?: StyleProp<ViewStyle>;
+};
+
+const GRID_DIMENSION = 20;
+const CELLS = GRID_DIMENSION * GRID_DIMENSION;
+
+const toColor = (value: number): string => {
+  const clamped = Math.max(0, Math.min(1, value));
+  let r: number;
+  let g: number;
+  let b: number;
+
+  if (clamped < 0.5) {
+    const t = clamped * 2;
+    r = Math.round(255 * 0);
+    g = Math.round(255 * t);
+    b = Math.round(255 * (1 - t));
+  } else {
+    const t = (clamped - 0.5) * 2;
+    r = Math.round(255 * t);
+    g = Math.round(255 * (1 - t));
+    b = 0;
+  }
+
+  return `rgb(${r}, ${g}, ${b})`;
+};
+
+const AnimatedRect = Animated.createAnimatedComponent(Rect);
+
+const normalizeValues = (values: number[]) => {
+  const normalized = new Array(CELLS).fill(0);
+  for (let i = 0; i < CELLS; i += 1) {
+    const value = values?.[i] ?? 0;
+    normalized[i] = Number.isFinite(value) ? Math.max(0, Math.min(1, value)) : 0;
+  }
+  return normalized;
+};
+
+type CellProps = {
+  index: number;
+  size: number;
+  progress: SharedValue<number>;
+  previousColors: string[];
+  nextColors: string[];
+};
+
+const Cell = ({ index, size, progress, previousColors, nextColors }: CellProps) => {
+  const col = index % GRID_DIMENSION;
+  const row = Math.floor(index / GRID_DIMENSION);
+  const cellSize = size / GRID_DIMENSION;
+  const x = col * cellSize;
+  const y = row * cellSize;
+
+  const animatedProps = useAnimatedProps(() => ({
+    fill: interpolateColor(
+      progress.value,
+      [0, 1],
+      [previousColors[index] ?? colors.surfaceAlt, nextColors[index] ?? colors.surfaceAlt],
+    ),
+  }));
+
+  return (
+    <AnimatedRect
+      x={x}
+      y={y}
+      width={cellSize}
+      height={cellSize}
+      rx={1}
+      animatedProps={animatedProps}
+    />
+  );
+};
+
+export const OccupancyGrid = ({
+  values,
+  personPositions = [],
+  size = 320,
+  style,
+}: OccupancyGridProps) => {
+  const normalizedValues = useMemo(() => normalizeValues(values), [values]);
+  const previousColors = useRef<string[]>(normalizedValues.map(toColor));
+  const nextColors = useRef<string[]>(normalizedValues.map(toColor));
+  const progress = useSharedValue(1);
+
+  useEffect(() => {
+    const next = normalizeValues(values);
+    previousColors.current = normalizedValues.map(toColor);
+    nextColors.current = next.map(toColor);
+    progress.value = 0;
+    progress.value = withTiming(1, { duration: 500 });
+  }, [values, normalizedValues, progress]);
+
+  const markers = useMemo(() => {
+    const cellSize = size / GRID_DIMENSION;
+    return personPositions.map(({ x, y }, idx) => {
+      const clampedX = Math.max(0, Math.min(GRID_DIMENSION - 1, Math.round(x)));
+      const clampedY = Math.max(0, Math.min(GRID_DIMENSION - 1, Math.round(y)));
+      const cx = (clampedX + 0.5) * cellSize;
+      const cy = (clampedY + 0.5) * cellSize;
+      const markerRadius = Math.max(3, cellSize * 0.25);
+      return (
+        <Circle
+          key={`person-${idx}`}
+          cx={cx}
+          cy={cy}
+          r={markerRadius}
+          fill={colors.accent}
+          stroke={colors.textPrimary}
+          strokeWidth={1}
+        />
+      );
+    });
+  }, [personPositions, size]);
+
+  return (
+    <Svg width={size} height={size} style={style} viewBox={`0 0 ${size} ${size}`}>
+      <G>
+        {Array.from({ length: CELLS }).map((_, index) => (
+          <Cell
+            key={index}
+            index={index}
+            size={size}
+            progress={progress}
+            previousColors={previousColors.current}
+            nextColors={nextColors.current}
+          />
+        ))}
+      </G>
+      {markers}
+    </Svg>
+  );
+};
--- a/ui/mobile/src/components/SignalBar.tsx
+++ b/ui/mobile/src/components/SignalBar.tsx
@ -0,0 +1,62 @@
+import { useEffect } from 'react';
+import { StyleSheet, View } from 'react-native';
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import { ThemedText } from './ThemedText';
+import { colors } from '../theme/colors';
+
+type SignalBarProps = {
+  value: number;
+  label: string;
+  color?: string;
+};
+
+const clamp01 = (value: number) => Math.max(0, Math.min(1, value));
+
+export const SignalBar = ({ value, label, color = colors.accent }: SignalBarProps) => {
+  const progress = useSharedValue(clamp01(value));
+
+  useEffect(() => {
+    progress.value = withTiming(clamp01(value), { duration: 250 });
+  }, [value, progress]);
+
+  const animatedFill = useAnimatedStyle(() => ({
+    width: `${progress.value * 100}%`,
+  }));
+
+  return (
+    <View style={styles.container}>
+      <ThemedText preset="bodySm" style={styles.label}>
+        {label}
+      </ThemedText>
+      <View style={styles.track}>
+        <Animated.View style={[styles.fill, { backgroundColor: color }, animatedFill]} />
+      </View>
+      <ThemedText preset="bodySm" style={styles.percent}>
+        {Math.round(clamp01(value) * 100)}%
+      </ThemedText>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    gap: 6,
+  },
+  label: {
+    marginBottom: 4,
+  },
+  track: {
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: colors.surfaceAlt,
+    overflow: 'hidden',
+  },
+  fill: {
+    height: '100%',
+    borderRadius: 4,
+  },
+  percent: {
+    textAlign: 'right',
+    color: colors.textSecondary,
+  },
+});
--- a/ui/mobile/src/components/SparklineChart.tsx
+++ b/ui/mobile/src/components/SparklineChart.tsx
@ -0,0 +1,64 @@
+import { useMemo } from 'react';
+import { View, ViewStyle } from 'react-native';
+import { colors } from '../theme/colors';
+
+type SparklineChartProps = {
+  data: number[];
+  color?: string;
+  height?: number;
+  style?: ViewStyle;
+};
+
+const defaultHeight = 72;
+
+export const SparklineChart = ({
+  data,
+  color = colors.accent,
+  height = defaultHeight,
+  style,
+}: SparklineChartProps) => {
+  const normalizedData = data.length > 0 ? data : [0];
+
+  const chartData = useMemo(
+    () =>
+      normalizedData.map((value, index) => ({
+        x: index,
+        y: value,
+      })),
+    [normalizedData],
+  );
+
+  const yValues = normalizedData.map((value) => Number(value) || 0);
+  const yMin = Math.min(...yValues);
+  const yMax = Math.max(...yValues);
+  const yPadding = yMax - yMin === 0 ? 1 : (yMax - yMin) * 0.2;
+
+  return (
+    <View style={style}>
+      <View
+        accessibilityRole="image"
+        style={{
+          height,
+          width: '100%',
+          borderRadius: 4,
+          borderWidth: 1,
+          borderColor: color,
+          opacity: 0.2,
+          backgroundColor: 'transparent',
+        }}
+      >
+        <View
+          style={{
+            flex: 1,
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}
+        >
+          {chartData.map((point) => (
+            <View key={point.x} style={{ position: 'absolute', left: `${(point.x / Math.max(normalizedData.length - 1, 1)) * 100}%` }} />
+          ))}
+        </View>
+      </View>
+    </View>
+  );
+};
--- a/ui/mobile/src/components/StatusDot.tsx
+++ b/ui/mobile/src/components/StatusDot.tsx
@ -0,0 +1,83 @@
+import { useEffect } from 'react';
+import { StyleSheet, ViewStyle } from 'react-native';
+import Animated, {
+  cancelAnimation,
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withSequence,
+  withTiming,
+} from 'react-native-reanimated';
+import { colors } from '../theme/colors';
+
+type StatusType = 'connected' | 'simulated' | 'disconnected' | 'connecting';
+
+type StatusDotProps = {
+  status: StatusType;
+  size?: number;
+  style?: ViewStyle;
+};
+
+const resolveColor = (status: StatusType): string => {
+  if (status === 'connecting') return colors.warn;
+  return colors[status];
+};
+
+export const StatusDot = ({ status, size = 10, style }: StatusDotProps) => {
+  const scale = useSharedValue(1);
+  const opacity = useSharedValue(1);
+  const isConnecting = status === 'connecting';
+
+  useEffect(() => {
+    if (isConnecting) {
+      scale.value = withRepeat(
+        withSequence(
+          withTiming(1.35, { duration: 800, easing: Easing.out(Easing.cubic) }),
+          withTiming(1, { duration: 800, easing: Easing.in(Easing.cubic) }),
+        ),
+        -1,
+      );
+      opacity.value = withRepeat(
+        withSequence(
+          withTiming(0.4, { duration: 800, easing: Easing.out(Easing.quad) }),
+          withTiming(1, { duration: 800, easing: Easing.in(Easing.quad) }),
+        ),
+        -1,
+      );
+      return;
+    }
+
+    cancelAnimation(scale);
+    cancelAnimation(opacity);
+    scale.value = 1;
+    opacity.value = 1;
+  }, [isConnecting, opacity, scale]);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: scale.value }],
+    opacity: opacity.value,
+  }));
+
+  return (
+    <Animated.View
+      style={[
+        styles.dot,
+        {
+          width: size,
+          height: size,
+          backgroundColor: resolveColor(status),
+          borderRadius: size / 2,
+        },
+        animatedStyle,
+        style,
+      ]}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  dot: {
+    borderRadius: 999,
+  },
+});
--- a/ui/mobile/src/components/ThemedText.tsx
+++ b/ui/mobile/src/components/ThemedText.tsx
@ -0,0 +1,28 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { StyleProp, Text, TextStyle } from 'react-native';
+import { useTheme } from '../hooks/useTheme';
+import { colors } from '../theme/colors';
+import { typography } from '../theme/typography';
+
+type TextPreset = keyof typeof typography;
+type ColorKey = keyof typeof colors;
+
+type ThemedTextProps = Omit<ComponentPropsWithoutRef<typeof Text>, 'style'> & {
+  preset?: TextPreset;
+  color?: ColorKey;
+  style?: StyleProp<TextStyle>;
+};
+
+export const ThemedText = ({
+  preset = 'bodyMd',
+  color = 'textPrimary',
+  style,
+  ...props
+}: ThemedTextProps) => {
+  const { colors, typography } = useTheme();
+
+  const presetStyle = (typography as Record<TextPreset, TextStyle>)[preset];
+  const colorStyle = { color: colors[color] };
+
+  return <Text {...props} style={[presetStyle, colorStyle, style]} />;
+};
--- a/ui/mobile/src/components/ThemedView.tsx
+++ b/ui/mobile/src/components/ThemedView.tsx
@ -0,0 +1,24 @@
+import { PropsWithChildren, forwardRef } from 'react';
+import { View, ViewProps } from 'react-native';
+import { useTheme } from '../hooks/useTheme';
+
+type ThemedViewProps = PropsWithChildren<ViewProps>;
+
+export const ThemedView = forwardRef<View, ThemedViewProps>(({ children, style, ...props }, ref) => {
+  const { colors } = useTheme();
+
+  return (
+    <View
+      ref={ref}
+      {...props}
+      style={[
+        {
+          backgroundColor: colors.bg,
+        },
+        style,
+      ]}
+    >
+      {children}
+    </View>
+  );
+});
--- a/ui/mobile/src/constants/api.ts
+++ b/ui/mobile/src/constants/api.ts
@ -0,0 +1,14 @@
+export const API_ROOT = '/api/v1';
+
+export const API_POSE_STATUS_PATH = '/api/v1/pose/status';
+export const API_POSE_FRAMES_PATH = '/api/v1/pose/frames';
+export const API_POSE_ZONES_PATH = '/api/v1/pose/zones';
+export const API_POSE_CURRENT_PATH = '/api/v1/pose/current';
+export const API_STREAM_STATUS_PATH = '/api/v1/stream/status';
+export const API_STREAM_POSE_PATH = '/api/v1/stream/pose';
+export const API_MAT_EVENTS_PATH = '/api/v1/mat/events';
+
+export const API_HEALTH_PATH = '/health';
+export const API_HEALTH_SYSTEM_PATH = '/health/health';
+export const API_HEALTH_READY_PATH = '/health/ready';
+export const API_HEALTH_LIVE_PATH = '/health/live';
--- a/ui/mobile/src/constants/simulation.ts
+++ b/ui/mobile/src/constants/simulation.ts
@ -0,0 +1,20 @@
+export const SIMULATION_TICK_INTERVAL_MS = 500;
+export const SIMULATION_GRID_SIZE = 20;
+
+export const RSSI_BASE_DBM = -45;
+export const RSSI_AMPLITUDE_DBM = 3;
+
+export const VARIANCE_BASE = 1.5;
+export const VARIANCE_AMPLITUDE = 1.0;
+
+export const MOTION_BAND_MIN = 0.05;
+export const MOTION_BAND_AMPLITUDE = 0.15;
+export const BREATHING_BAND_MIN = 0.03;
+export const BREATHING_BAND_AMPLITUDE = 0.08;
+
+export const SIGNAL_FIELD_PRESENCE_LEVEL = 0.8;
+
+export const BREATHING_BPM_MIN = 12;
+export const BREATHING_BPM_MAX = 24;
+export const HEART_BPM_MIN = 58;
+export const HEART_BPM_MAX = 96;
--- a/ui/mobile/src/constants/websocket.ts
+++ b/ui/mobile/src/constants/websocket.ts
@ -0,0 +1,3 @@
+export const WS_PATH = '/api/v1/stream/pose';
+export const RECONNECT_DELAYS = [1000, 2000, 4000, 8000, 16000];
+export const MAX_RECONNECT_ATTEMPTS = 10;
--- a/ui/mobile/src/hooks/usePoseStream.ts
+++ b/ui/mobile/src/hooks/usePoseStream.ts
@ -0,0 +1,27 @@
+import { useEffect } from 'react';
+import { wsService } from '@/services/ws.service';
+import { usePoseStore } from '@/stores/poseStore';
+
+export interface UsePoseStreamResult {
+  connectionStatus: ReturnType<typeof usePoseStore.getState>['connectionStatus'];
+  lastFrame: ReturnType<typeof usePoseStore.getState>['lastFrame'];
+  isSimulated: boolean;
+}
+
+export function usePoseStream(): UsePoseStreamResult {
+  const connectionStatus = usePoseStore((state) => state.connectionStatus);
+  const lastFrame = usePoseStore((state) => state.lastFrame);
+  const isSimulated = usePoseStore((state) => state.isSimulated);
+
+  useEffect(() => {
+    const unsubscribe = wsService.subscribe((frame) => {
+      usePoseStore.getState().handleFrame(frame);
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+
+  return { connectionStatus, lastFrame, isSimulated };
+}
--- a/ui/mobile/src/hooks/useRssiScanner.ts
+++ b/ui/mobile/src/hooks/useRssiScanner.ts
@ -0,0 +1,31 @@
+import { useEffect, useState } from 'react';
+import { rssiService, type WifiNetwork } from '@/services/rssi.service';
+import { useSettingsStore } from '@/stores/settingsStore';
+
+export function useRssiScanner(): { networks: WifiNetwork[]; isScanning: boolean } {
+  const enabled = useSettingsStore((state) => state.rssiScanEnabled);
+  const [networks, setNetworks] = useState<WifiNetwork[]>([]);
+  const [isScanning, setIsScanning] = useState(false);
+
+  useEffect(() => {
+    if (!enabled) {
+      rssiService.stopScanning();
+      setIsScanning(false);
+      return;
+    }
+
+    const unsubscribe = rssiService.subscribe((result) => {
+      setNetworks(result);
+    });
+    rssiService.startScanning(2000);
+    setIsScanning(true);
+
+    return () => {
+      unsubscribe();
+      rssiService.stopScanning();
+      setIsScanning(false);
+    };
+  }, [enabled]);
+
+  return { networks, isScanning };
+}
--- a/ui/mobile/src/hooks/useServerReachability.ts
+++ b/ui/mobile/src/hooks/useServerReachability.ts
@ -0,0 +1,52 @@
+import { useEffect, useState } from 'react';
+import { apiService } from '@/services/api.service';
+
+interface ServerReachability {
+  reachable: boolean;
+  latencyMs: number | null;
+}
+
+const POLL_MS = 10000;
+
+export function useServerReachability(): ServerReachability {
+  const [state, setState] = useState<ServerReachability>({
+    reachable: false,
+    latencyMs: null,
+  });
+
+  useEffect(() => {
+    let active = true;
+
+    const check = async () => {
+      const started = Date.now();
+      try {
+        await apiService.getStatus();
+        if (!active) {
+          return;
+        }
+        setState({
+          reachable: true,
+          latencyMs: Date.now() - started,
+        });
+      } catch {
+        if (!active) {
+          return;
+        }
+        setState({
+          reachable: false,
+          latencyMs: null,
+        });
+      }
+    };
+
+    void check();
+    const timer = setInterval(check, POLL_MS);
+
+    return () => {
+      active = false;
+      clearInterval(timer);
+    };
+  }, []);
+
+  return state;
+}
--- a/ui/mobile/src/hooks/useTheme.ts
+++ b/ui/mobile/src/hooks/useTheme.ts
@ -0,0 +1,4 @@
+import { useContext } from 'react';
+import { ThemeContext, ThemeContextValue } from '../theme/ThemeContext';
+
+export const useTheme = (): ThemeContextValue => useContext(ThemeContext);
--- a/ui/mobile/src/hooks/useWebViewBridge.ts
+++ b/ui/mobile/src/hooks/useWebViewBridge.ts
--- a/ui/mobile/src/navigation/MainTabs.tsx
+++ b/ui/mobile/src/navigation/MainTabs.tsx
@ -0,0 +1,132 @@
+import React, { Suspense } from 'react';
+import { ActivityIndicator } from 'react-native';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { Ionicons } from '@expo/vector-icons';
+import { ThemedText } from '../components/ThemedText';
+import { ThemedView } from '../components/ThemedView';
+import { colors } from '../theme/colors';
+import { useMatStore } from '../stores/matStore';
+import { MainTabsParamList } from './types';
+
+const createPlaceholder = (label: string) => {
+  const Placeholder = () => (
+    <ThemedView style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <ThemedText preset="bodyLg">{label} screen not implemented yet</ThemedText>
+      <ThemedText preset="bodySm" color="textSecondary">
+        Placeholder shell
+      </ThemedText>
+    </ThemedView>
+  );
+  const LazyPlaceholder = React.lazy(async () => ({ default: Placeholder }));
+
+  const Wrapped = () => (
+    <Suspense
+      fallback={
+        <ThemedView style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+          <ActivityIndicator color={colors.accent} />
+          <ThemedText preset="bodySm" color="textSecondary" style={{ marginTop: 8 }}>
+            Loading {label}
+          </ThemedText>
+        </ThemedView>
+      }
+    >
+      <LazyPlaceholder />
+    </Suspense>
+  );
+
+  return Wrapped;
+};
+
+const wrapLazy = (
+  loader: () => Promise<{ default: React.ComponentType }>,
+  label: string,
+) => {
+  const fallback = createPlaceholder(label);
+  return React.lazy(async () => {
+    try {
+      const module = await loader();
+      if (module?.default) {
+        return module;
+      }
+    } catch {
+      // keep fallback for shell-only screens
+    }
+    return { default: fallback } as { default: React.ComponentType };
+  });
+};
+
+const LiveScreen = wrapLazy(() => import('../screens/LiveScreen'), 'Live');
+const VitalsScreen = wrapLazy(() => import('../screens/VitalsScreen'), 'Vitals');
+const ZonesScreen = wrapLazy(() => import('../screens/ZonesScreen'), 'Zones');
+const MATScreen = wrapLazy(() => import('../screens/MATScreen'), 'MAT');
+const SettingsScreen = wrapLazy(() => import('../screens/SettingsScreen'), 'Settings');
+
+const toIconName = (routeName: keyof MainTabsParamList) => {
+  switch (routeName) {
+    case 'Live':
+      return 'wifi';
+    case 'Vitals':
+      return 'heart';
+    case 'Zones':
+      return 'grid';
+    case 'MAT':
+      return 'shield-checkmark';
+    case 'Settings':
+      return 'settings';
+    default:
+      return 'ellipse';
+  }
+};
+
+const screens: ReadonlyArray<{ name: keyof MainTabsParamList; component: React.ComponentType }> = [
+  { name: 'Live', component: LiveScreen },
+  { name: 'Vitals', component: VitalsScreen },
+  { name: 'Zones', component: ZonesScreen },
+  { name: 'MAT', component: MATScreen },
+  { name: 'Settings', component: SettingsScreen },
+];
+
+const Tab = createBottomTabNavigator<MainTabsParamList>();
+
+const Suspended = ({ component: Component }: { component: React.ComponentType }) => (
+  <Suspense fallback={<ActivityIndicator color={colors.accent} />}>
+    <Component />
+  </Suspense>
+);
+
+export const MainTabs = () => {
+  const matAlertCount = useMatStore((state) => state.alerts.length);
+
+  return (
+    <Tab.Navigator
+      screenOptions={({ route }) => ({
+        headerShown: false,
+        tabBarActiveTintColor: colors.accent,
+        tabBarInactiveTintColor: colors.textSecondary,
+        tabBarStyle: {
+          backgroundColor: '#0D1117',
+          borderTopColor: colors.border,
+          borderTopWidth: 1,
+        },
+        tabBarIcon: ({ color, size }) => <Ionicons name={toIconName(route.name)} size={size} color={color} />,
+        tabBarLabelStyle: {
+          fontFamily: 'Courier New',
+          textTransform: 'uppercase',
+          fontSize: 10,
+        },
+        tabBarLabel: ({ children, color }) => <ThemedText style={{ color }}>{children}</ThemedText>,
+      })}
+    >
+      {screens.map(({ name, component }) => (
+        <Tab.Screen
+          key={name}
+          name={name}
+          options={{
+            tabBarBadge: name === 'MAT' ? (matAlertCount > 0 ? matAlertCount : undefined) : undefined,
+          }}
+          component={() => <Suspended component={component} />}
+        />
+      ))}
+    </Tab.Navigator>
+  );
+};
--- a/ui/mobile/src/navigation/RootNavigator.tsx
+++ b/ui/mobile/src/navigation/RootNavigator.tsx
@ -0,0 +1,5 @@
+import { MainTabs } from './MainTabs';
+
+export const RootNavigator = () => {
+  return <MainTabs />;
+};
--- a/ui/mobile/src/navigation/types.ts
+++ b/ui/mobile/src/navigation/types.ts
@ -0,0 +1,11 @@
+export type RootStackParamList = {
+  MainTabs: undefined;
+};
+
+export type MainTabsParamList = {
+  Live: undefined;
+  Vitals: undefined;
+  Zones: undefined;
+  MAT: undefined;
+  Settings: undefined;
+};
--- a/ui/mobile/src/screens/LiveScreen/GaussianSplatWebView.tsx
+++ b/ui/mobile/src/screens/LiveScreen/GaussianSplatWebView.tsx
@ -0,0 +1,41 @@
+import { LayoutChangeEvent, StyleSheet } from 'react-native';
+import type { RefObject } from 'react';
+import { WebView, type WebViewMessageEvent } from 'react-native-webview';
+import GAUSSIAN_SPLATS_HTML from '@/assets/webview/gaussian-splats.html';
+
+type GaussianSplatWebViewProps = {
+  onMessage: (event: WebViewMessageEvent) => void;
+  onError: () => void;
+  webViewRef: RefObject<WebView | null>;
+  onLayout?: (event: LayoutChangeEvent) => void;
+};
+
+export const GaussianSplatWebView = ({
+  onMessage,
+  onError,
+  webViewRef,
+  onLayout,
+}: GaussianSplatWebViewProps) => {
+  const html = typeof GAUSSIAN_SPLATS_HTML === 'string' ? GAUSSIAN_SPLATS_HTML : '';
+
+  return (
+    <WebView
+      ref={webViewRef}
+      source={{ html }}
+      originWhitelist={['*']}
+      allowFileAccess={false}
+      javaScriptEnabled
+      onMessage={onMessage}
+      onError={onError}
+      onLayout={onLayout}
+      style={styles.webView}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  webView: {
+    flex: 1,
+    backgroundColor: '#0A0E1A',
+  },
+});
--- a/ui/mobile/src/screens/LiveScreen/GaussianSplatWebView.web.tsx
+++ b/ui/mobile/src/screens/LiveScreen/GaussianSplatWebView.web.tsx
@ -0,0 +1,316 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { StyleSheet, View } from 'react-native';
+import * as THREE from 'three';
+import type { SensingFrame } from '@/types/sensing';
+
+type GaussianSplatWebViewWebProps = {
+  onReady: () => void;
+  onFps: (fps: number) => void;
+  onError: (msg: string) => void;
+  frame: SensingFrame | null;
+};
+
+const BONES: [number, number][] = [
+  [0,1],[0,2],[1,3],[2,4],[5,6],[5,7],[7,9],[6,8],[8,10],
+  [5,11],[6,12],[11,12],[11,13],[13,15],[12,14],[14,16],
+];
+
+export const GaussianSplatWebViewWeb = ({ onReady, onFps, onError, frame }: GaussianSplatWebViewWebProps) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const sceneRef = useRef<{
+    renderer: THREE.WebGLRenderer;
+    scene: THREE.Scene;
+    camera: THREE.PerspectiveCamera;
+    joints: THREE.Mesh[];
+    boneLines: { line: THREE.Line; a: number; b: number }[];
+    ring: THREE.Mesh;
+    particleGeo: THREE.BufferGeometry;
+    pointLight: THREE.PointLight;
+    animId: number;
+    cameraAngle: number;
+    cameraRadius: number;
+    cameraY: number;
+    isDragging: boolean;
+    frameCount: number;
+    lastFpsTime: number;
+  } | null>(null);
+  const frameRef = useRef<SensingFrame | null>(null);
+
+  // Keep frame ref current without re-running effect
+  frameRef.current = frame;
+
+  const cleanup = useCallback(() => {
+    const s = sceneRef.current;
+    if (!s) return;
+    cancelAnimationFrame(s.animId);
+    s.renderer.dispose();
+    s.scene.traverse((obj) => {
+      if (obj instanceof THREE.Mesh) {
+        obj.geometry.dispose();
+        if (Array.isArray(obj.material)) obj.material.forEach((m) => m.dispose());
+        else obj.material.dispose();
+      }
+    });
+    sceneRef.current = null;
+  }, []);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    try {
+      const W = () => container.clientWidth || window.innerWidth;
+      const H = () => container.clientHeight || window.innerHeight;
+
+      // Renderer
+      const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false });
+      renderer.setSize(W(), H());
+      renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+      renderer.setClearColor(0x0a0e1a);
+      container.appendChild(renderer.domElement);
+
+      // Scene
+      const scene = new THREE.Scene();
+      scene.background = new THREE.Color(0x0a0e1a);
+      scene.fog = new THREE.FogExp2(0x0a0e1a, 0.008);
+
+      // Camera
+      const camera = new THREE.PerspectiveCamera(60, W() / H(), 0.1, 500);
+      camera.position.set(0, 2, 6);
+      camera.lookAt(0, 1, 0);
+
+      // Grid
+      const grid = new THREE.GridHelper(20, 40, 0x1a3a4a, 0x0d1f2a);
+      scene.add(grid);
+
+      // Lights
+      scene.add(new THREE.AmbientLight(0x32b8c6, 0.3));
+      const pointLight = new THREE.PointLight(0x32b8c6, 1.5, 20);
+      pointLight.position.set(0, 4, 0);
+      scene.add(pointLight);
+
+      // Skeleton joints (17 COCO keypoints)
+      const jointGeo = new THREE.SphereGeometry(0.06, 8, 8);
+      const joints: THREE.Mesh[] = [];
+      for (let i = 0; i < 17; i++) {
+        const mat = new THREE.MeshStandardMaterial({
+          color: 0x32b8c6,
+          emissive: 0x32b8c6,
+          emissiveIntensity: 0.6,
+        });
+        const m = new THREE.Mesh(jointGeo, mat);
+        m.visible = false;
+        scene.add(m);
+        joints.push(m);
+      }
+
+      // Bone lines
+      const boneMat = new THREE.LineBasicMaterial({
+        color: 0x32b8c6,
+        transparent: true,
+        opacity: 0.7,
+      });
+      const boneLines = BONES.map(([a, b]) => {
+        const g = new THREE.BufferGeometry().setFromPoints([
+          new THREE.Vector3(),
+          new THREE.Vector3(),
+        ]);
+        const l = new THREE.Line(g, boneMat);
+        l.visible = false;
+        scene.add(l);
+        return { line: l, a, b };
+      });
+
+      // Particle field
+      const N = 500;
+      const particleGeo = new THREE.BufferGeometry();
+      const pPos = new Float32Array(N * 3);
+      for (let i = 0; i < N; i++) {
+        pPos[i * 3] = (Math.random() - 0.5) * 16;
+        pPos[i * 3 + 1] = Math.random() * 4;
+        pPos[i * 3 + 2] = (Math.random() - 0.5) * 16;
+      }
+      particleGeo.setAttribute('position', new THREE.BufferAttribute(pPos, 3));
+      const pMat = new THREE.PointsMaterial({
+        color: 0x32b8c6,
+        size: 0.04,
+        transparent: true,
+        opacity: 0.4,
+      });
+      scene.add(new THREE.Points(particleGeo, pMat));
+
+      // Signal ring
+      const ringGeo = new THREE.TorusGeometry(2, 0.02, 8, 64);
+      const ringMat = new THREE.MeshBasicMaterial({
+        color: 0x32b8c6,
+        transparent: true,
+        opacity: 0.3,
+      });
+      const ring = new THREE.Mesh(ringGeo, ringMat);
+      ring.rotation.x = Math.PI / 2;
+      ring.position.y = 0.01;
+      scene.add(ring);
+
+      // State
+      const state = {
+        renderer,
+        scene,
+        camera,
+        joints,
+        boneLines,
+        ring,
+        particleGeo,
+        pointLight,
+        animId: 0,
+        cameraAngle: 0,
+        cameraRadius: 6,
+        cameraY: 2,
+        isDragging: false,
+        frameCount: 0,
+        lastFpsTime: performance.now(),
+      };
+      sceneRef.current = state;
+
+      // Mouse interaction
+      const canvas = renderer.domElement;
+      const onMouseDown = () => { state.isDragging = true; };
+      const onMouseUp = () => { state.isDragging = false; };
+      const onMouseMove = (e: MouseEvent) => {
+        if (state.isDragging) {
+          state.cameraAngle += e.movementX * 0.01;
+          state.cameraY = Math.max(0.5, Math.min(5, state.cameraY - e.movementY * 0.01));
+        }
+      };
+      const onWheel = (e: WheelEvent) => {
+        state.cameraRadius = Math.max(2, Math.min(15, state.cameraRadius + e.deltaY * 0.005));
+      };
+      canvas.addEventListener('mousedown', onMouseDown);
+      canvas.addEventListener('mouseup', onMouseUp);
+      canvas.addEventListener('mousemove', onMouseMove);
+      canvas.addEventListener('wheel', onWheel, { passive: true });
+
+      // Resize
+      const onResize = () => {
+        camera.aspect = W() / H();
+        camera.updateProjectionMatrix();
+        renderer.setSize(W(), H());
+      };
+      window.addEventListener('resize', onResize);
+
+      // Animation loop
+      const animate = () => {
+        state.animId = requestAnimationFrame(animate);
+        const t = performance.now() * 0.001;
+
+        // Camera orbit
+        if (!state.isDragging) state.cameraAngle += 0.002;
+        camera.position.set(
+          Math.sin(state.cameraAngle) * state.cameraRadius,
+          state.cameraY,
+          Math.cos(state.cameraAngle) * state.cameraRadius,
+        );
+        camera.lookAt(0, 1, 0);
+
+        // Animate ring
+        ring.material.opacity = 0.15 + Math.sin(t * 2) * 0.1;
+        const scale = 1 + Math.sin(t) * 0.1;
+        ring.scale.set(scale, scale, 1);
+
+        // Animate particles
+        const pp = particleGeo.attributes.position as THREE.BufferAttribute;
+        for (let i = 0; i < N; i++) {
+          (pp.array as Float32Array)[i * 3 + 1] += Math.sin(t + i) * 0.001;
+        }
+        pp.needsUpdate = true;
+
+        // Update skeleton from frame data
+        const currentFrame = frameRef.current;
+        if (currentFrame) {
+          const persons = (currentFrame as any).persons || [];
+          if (persons.length > 0) {
+            const kps = persons[0].keypoints || [];
+            kps.forEach((kp: any, i: number) => {
+              if (i < 17 && joints[i]) {
+                joints[i].position.set(
+                  (kp.x - 0.5) * 4,
+                  (1 - kp.y) * 3,
+                  (kp.z || 0) * 2,
+                );
+                joints[i].visible = kp.confidence > 0.3;
+                (joints[i].material as THREE.MeshStandardMaterial).emissiveIntensity =
+                  0.3 + kp.confidence * 0.7;
+              }
+            });
+            boneLines.forEach(({ line, a, b }) => {
+              if (joints[a].visible && joints[b].visible) {
+                const pos = line.geometry.attributes.position as THREE.BufferAttribute;
+                pos.setXYZ(0, joints[a].position.x, joints[a].position.y, joints[a].position.z);
+                pos.setXYZ(1, joints[b].position.x, joints[b].position.y, joints[b].position.z);
+                pos.needsUpdate = true;
+                line.visible = true;
+              } else {
+                line.visible = false;
+              }
+            });
+          } else {
+            joints.forEach((j) => { j.visible = false; });
+            boneLines.forEach((bl) => { bl.line.visible = false; });
+          }
+
+          // Adjust light from RSSI
+          const features = (currentFrame as any).features;
+          if (features) {
+            const rssi = features.mean_rssi || -70;
+            pointLight.intensity = 1 + Math.abs(rssi + 50) * 0.02;
+          }
+        }
+
+        renderer.render(scene, camera);
+
+        // FPS counter
+        state.frameCount++;
+        if (performance.now() - state.lastFpsTime >= 1000) {
+          onFps(state.frameCount);
+          state.frameCount = 0;
+          state.lastFpsTime = performance.now();
+        }
+      };
+
+      animate();
+      onReady();
+
+      return () => {
+        canvas.removeEventListener('mousedown', onMouseDown);
+        canvas.removeEventListener('mouseup', onMouseUp);
+        canvas.removeEventListener('mousemove', onMouseMove);
+        canvas.removeEventListener('wheel', onWheel);
+        window.removeEventListener('resize', onResize);
+        cleanup();
+        if (container.contains(renderer.domElement)) {
+          container.removeChild(renderer.domElement);
+        }
+      };
+    } catch (err) {
+      onError(err instanceof Error ? err.message : 'Failed to initialize 3D renderer');
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <View style={styles.container}>
+      <div
+        ref={containerRef}
+        style={{ width: '100%', height: '100%', backgroundColor: '#0a0e1a' }}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#0a0e1a',
+  },
+});
+
+export default GaussianSplatWebViewWeb;
--- a/ui/mobile/src/screens/LiveScreen/LiveHUD.tsx
+++ b/ui/mobile/src/screens/LiveScreen/LiveHUD.tsx
@ -0,0 +1,164 @@
+import { Pressable, StyleSheet, View } from 'react-native';
+import { memo, useCallback, useState } from 'react';
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import { StatusDot } from '@/components/StatusDot';
+import { ModeBadge } from '@/components/ModeBadge';
+import { ThemedText } from '@/components/ThemedText';
+import { formatConfidence, formatRssi } from '@/utils/formatters';
+import { colors, spacing } from '@/theme';
+import type { ConnectionStatus } from '@/types/sensing';
+
+type LiveMode = 'LIVE' | 'SIM' | 'RSSI';
+
+type LiveHUDProps = {
+  rssi?: number;
+  connectionStatus: ConnectionStatus;
+  fps: number;
+  confidence: number;
+  personCount: number;
+  mode: LiveMode;
+};
+
+const statusTextMap: Record<ConnectionStatus, string> = {
+  connected: 'Connected',
+  simulated: 'Simulated',
+  connecting: 'Connecting',
+  disconnected: 'Disconnected',
+};
+
+const statusDotStatusMap: Record<ConnectionStatus, 'connected' | 'simulated' | 'disconnected' | 'connecting'> = {
+  connected: 'connected',
+  simulated: 'simulated',
+  connecting: 'connecting',
+  disconnected: 'disconnected',
+};
+
+export const LiveHUD = memo(
+  ({ rssi, connectionStatus, fps, confidence, personCount, mode }: LiveHUDProps) => {
+    const [panelVisible, setPanelVisible] = useState(true);
+    const panelAlpha = useSharedValue(1);
+
+    const togglePanel = useCallback(() => {
+      const next = !panelVisible;
+      setPanelVisible(next);
+      panelAlpha.value = withTiming(next ? 1 : 0, { duration: 220 });
+    }, [panelAlpha, panelVisible]);
+
+    const animatedPanelStyle = useAnimatedStyle(() => ({
+      opacity: panelAlpha.value,
+    }));
+
+    const statusText = statusTextMap[connectionStatus];
+
+    return (
+      <Pressable style={StyleSheet.absoluteFill} onPress={togglePanel}>
+        <Animated.View pointerEvents="none" style={[StyleSheet.absoluteFill, animatedPanelStyle]}>
+          {/* App title */}
+          <View style={styles.topLeft}>
+            <ThemedText preset="labelLg" style={styles.appTitle}>
+              WiFi-DensePose
+            </ThemedText>
+          </View>
+
+          {/* Status + FPS */}
+          <View style={styles.topRight}>
+            <View style={styles.row}>
+              <StatusDot status={statusDotStatusMap[connectionStatus]} size={10} />
+              <ThemedText preset="labelMd" style={styles.statusText}>
+                {statusText}
+              </ThemedText>
+            </View>
+            {fps > 0 && (
+              <View style={styles.row}>
+                <ThemedText preset="labelMd">{fps} FPS</ThemedText>
+              </View>
+            )}
+          </View>
+
+          {/* Bottom panel */}
+          <View style={styles.bottomPanel}>
+            <View style={styles.bottomCell}>
+              <ThemedText preset="bodySm">RSSI</ThemedText>
+              <ThemedText preset="displayMd" style={styles.bigValue}>
+                {formatRssi(rssi)}
+              </ThemedText>
+            </View>
+
+            <View style={styles.bottomCell}>
+              <ModeBadge mode={mode} />
+            </View>
+
+            <View style={styles.bottomCellRight}>
+              <ThemedText preset="bodySm">Confidence</ThemedText>
+              <ThemedText preset="bodyMd" style={styles.metaText}>
+                {formatConfidence(confidence)}
+              </ThemedText>
+              <ThemedText preset="bodySm">People: {personCount}</ThemedText>
+            </View>
+          </View>
+        </Animated.View>
+      </Pressable>
+    );
+  },
+);
+
+const styles = StyleSheet.create({
+  topLeft: {
+    position: 'absolute',
+    top: spacing.md,
+    left: spacing.md,
+  },
+  appTitle: {
+    color: colors.textPrimary,
+  },
+  topRight: {
+    position: 'absolute',
+    top: spacing.md,
+    right: spacing.md,
+    alignItems: 'flex-end',
+    gap: 4,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm,
+  },
+  statusText: {
+    color: colors.textPrimary,
+  },
+  bottomPanel: {
+    position: 'absolute',
+    left: spacing.sm,
+    right: spacing.sm,
+    bottom: spacing.sm,
+    minHeight: 72,
+    borderRadius: 12,
+    backgroundColor: 'rgba(10,14,26,0.72)',
+    borderWidth: 1,
+    borderColor: 'rgba(50,184,198,0.35)',
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.sm,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  bottomCell: {
+    flex: 1,
+    alignItems: 'center',
+  },
+  bottomCellRight: {
+    flex: 1,
+    alignItems: 'flex-end',
+  },
+  bigValue: {
+    color: colors.accent,
+    marginTop: 2,
+    marginBottom: 2,
+  },
+  metaText: {
+    color: colors.textPrimary,
+    marginBottom: 4,
+  },
+});
+
+LiveHUD.displayName = 'LiveHUD';
--- a/ui/mobile/src/screens/LiveScreen/index.tsx
+++ b/ui/mobile/src/screens/LiveScreen/index.tsx
@ -0,0 +1,142 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Button, Platform, StyleSheet, View } from 'react-native';
+import { ErrorBoundary } from '@/components/ErrorBoundary';
+import { LoadingSpinner } from '@/components/LoadingSpinner';
+import { ThemedText } from '@/components/ThemedText';
+import { ThemedView } from '@/components/ThemedView';
+import { usePoseStream } from '@/hooks/usePoseStream';
+import { colors, spacing } from '@/theme';
+import type { ConnectionStatus, SensingFrame } from '@/types/sensing';
+import { LiveHUD } from './LiveHUD';
+
+type LiveMode = 'LIVE' | 'SIM' | 'RSSI';
+
+const getMode = (
+  status: ConnectionStatus,
+  isSimulated: boolean,
+  frame: SensingFrame | null,
+): LiveMode => {
+  if (isSimulated || frame?.source === 'simulated') return 'SIM';
+  if (status === 'connected') return 'LIVE';
+  return 'RSSI';
+};
+
+const isWeb = Platform.OS === 'web';
+
+type ViewerProps = {
+  frame: SensingFrame | null;
+  onReady: () => void;
+  onFps: (fps: number) => void;
+  onError: (msg: string) => void;
+};
+
+const WebLiveViewer = ({ frame, onReady, onFps, onError }: ViewerProps) => {
+  const [Viewer, setViewer] = useState<React.ComponentType<any> | null>(null);
+
+  useEffect(() => {
+    import('./GaussianSplatWebView.web').then((mod) => {
+      setViewer(() => mod.GaussianSplatWebViewWeb);
+    }).catch(() => onError('Failed to load web viewer'));
+  }, [onError]);
+
+  if (!Viewer) return null;
+  return <Viewer frame={frame} onReady={onReady} onFps={onFps} onError={onError} />;
+};
+
+const NativeLiveViewer = ({ frame, onReady, onFps, onError }: ViewerProps) => {
+  const webViewRef = useRef(null);
+  const [WVComponent, setWVComponent] = useState<React.ComponentType<any> | null>(null);
+
+  useEffect(() => {
+    try {
+      const { GaussianSplatWebView } = require('./GaussianSplatWebView');
+      setWVComponent(() => GaussianSplatWebView);
+    } catch {
+      onError('WebView not available on this platform');
+    }
+  }, [onError]);
+
+  if (!WVComponent) return null;
+
+  return (
+    <WVComponent
+      webViewRef={webViewRef}
+      onMessage={(event: any) => {
+        try {
+          const data = typeof event.nativeEvent.data === 'string'
+            ? JSON.parse(event.nativeEvent.data)
+            : event.nativeEvent.data;
+          if (data.type === 'READY') onReady();
+          else if (data.type === 'FPS_TICK') onFps(data.payload?.fps ?? 0);
+          else if (data.type === 'ERROR') onError(data.payload?.message ?? 'Unknown error');
+        } catch { /* ignore */ }
+      }}
+      onError={() => onError('WebView renderer failed')}
+    />
+  );
+};
+
+export const LiveScreen = () => {
+  const { lastFrame, connectionStatus, isSimulated } = usePoseStream();
+  const [ready, setReady] = useState(false);
+  const [fps, setFps] = useState(0);
+  const [error, setError] = useState<string | null>(null);
+  const [viewerKey, setViewerKey] = useState(0);
+
+  const handleReady = useCallback(() => { setReady(true); setError(null); }, []);
+  const handleFps = useCallback((f: number) => setFps(Math.max(0, Math.floor(f))), []);
+  const handleError = useCallback((msg: string) => { setError(msg); setReady(false); }, []);
+  const handleRetry = useCallback(() => { setError(null); setReady(false); setFps(0); setViewerKey((v) => v + 1); }, []);
+
+  const rssi = lastFrame?.features?.mean_rssi;
+  const personCount = lastFrame?.classification?.presence ? 1 : 0;
+  const mode = getMode(connectionStatus, isSimulated, lastFrame);
+
+  if (error) {
+    return (
+      <ThemedView style={styles.fallbackWrap}>
+        <ThemedText preset="bodyLg">Live visualization failed</ThemedText>
+        <ThemedText preset="bodySm" color="textSecondary" style={styles.errorText}>{error}</ThemedText>
+        <Button title="Retry" onPress={handleRetry} />
+      </ThemedView>
+    );
+  }
+
+  return (
+    <ErrorBoundary>
+      <View style={styles.container}>
+        {isWeb ? (
+          <WebLiveViewer key={viewerKey} frame={lastFrame} onReady={handleReady} onFps={handleFps} onError={handleError} />
+        ) : (
+          <NativeLiveViewer key={viewerKey} frame={lastFrame} onReady={handleReady} onFps={handleFps} onError={handleError} />
+        )}
+
+        <LiveHUD
+          connectionStatus={connectionStatus}
+          fps={fps}
+          rssi={rssi}
+          confidence={lastFrame?.classification?.confidence ?? 0}
+          personCount={personCount}
+          mode={mode}
+        />
+
+        {!ready && (
+          <View style={styles.loadingWrap}>
+            <LoadingSpinner />
+            <ThemedText preset="bodyMd" style={styles.loadingText}>Loading live renderer</ThemedText>
+          </View>
+        )}
+      </View>
+    </ErrorBoundary>
+  );
+};
+
+export default LiveScreen;
+
+const styles = StyleSheet.create({
+  container: { flex: 1, backgroundColor: colors.bg },
+  loadingWrap: { ...StyleSheet.absoluteFillObject, backgroundColor: colors.bg, alignItems: 'center', justifyContent: 'center', gap: spacing.md },
+  loadingText: { color: colors.textSecondary },
+  fallbackWrap: { flex: 1, alignItems: 'center', justifyContent: 'center', gap: spacing.md, padding: spacing.lg },
+  errorText: { textAlign: 'center' },
+});
--- a/ui/mobile/src/screens/LiveScreen/useGaussianBridge.ts
+++ b/ui/mobile/src/screens/LiveScreen/useGaussianBridge.ts
@ -0,0 +1,97 @@
+import { useCallback, useState } from 'react';
+import type { RefObject } from 'react';
+import type { WebViewMessageEvent } from 'react-native-webview';
+import { WebView } from 'react-native-webview';
+import type { SensingFrame } from '@/types/sensing';
+
+export type GaussianBridgeMessageType = 'READY' | 'FPS_TICK' | 'ERROR';
+
+type BridgeMessage = {
+  type: GaussianBridgeMessageType;
+  payload?: {
+    fps?: number;
+    message?: string;
+  };
+};
+
+const toJsonScript = (message: unknown): string => {
+  const serialized = JSON.stringify(message);
+  return `window.dispatchEvent(new MessageEvent('message', { data: ${JSON.stringify(serialized)} })); true;`;
+};
+
+export const useGaussianBridge = (webViewRef: RefObject<WebView | null>) => {
+  const [isReady, setIsReady] = useState(false);
+  const [fps, setFps] = useState(0);
+  const [error, setError] = useState<string | null>(null);
+
+  const send = useCallback((message: unknown) => {
+    const webView = webViewRef.current;
+    if (!webView) {
+      return;
+    }
+
+    webView.injectJavaScript(toJsonScript(message));
+  }, [webViewRef]);
+
+  const sendFrame = useCallback(
+    (frame: SensingFrame) => {
+      send({
+        type: 'FRAME_UPDATE',
+        payload: frame,
+      });
+    },
+    [send],
+  );
+
+  const onMessage = useCallback((event: WebViewMessageEvent) => {
+    let parsed: BridgeMessage | null = null;
+    const raw = event.nativeEvent.data;
+
+    if (typeof raw === 'string') {
+      try {
+        parsed = JSON.parse(raw) as BridgeMessage;
+      } catch {
+        setError('Invalid bridge message format');
+        return;
+      }
+    } else if (typeof raw === 'object' && raw !== null) {
+      parsed = raw as BridgeMessage;
+    }
+
+    if (!parsed) {
+      return;
+    }
+
+    if (parsed.type === 'READY') {
+      setIsReady(true);
+      setError(null);
+      return;
+    }
+
+    if (parsed.type === 'FPS_TICK') {
+      const fpsValue = parsed.payload?.fps;
+      if (typeof fpsValue === 'number' && Number.isFinite(fpsValue)) {
+        setFps(Math.max(0, Math.floor(fpsValue)));
+      }
+      return;
+    }
+
+    if (parsed.type === 'ERROR') {
+      setError(parsed.payload?.message ?? 'Unknown bridge error');
+      setIsReady(false);
+    }
+  }, []);
+
+  return {
+    sendFrame,
+    onMessage,
+    isReady,
+    fps,
+    error,
+    reset: () => {
+      setIsReady(false);
+      setFps(0);
+      setError(null);
+    },
+  };
+};
--- a/ui/mobile/src/screens/MATScreen/AlertCard.tsx
+++ b/ui/mobile/src/screens/MATScreen/AlertCard.tsx
@ -0,0 +1,84 @@
+import { View } from 'react-native';
+import { ThemedText } from '@/components/ThemedText';
+import { colors } from '@/theme/colors';
+import { spacing } from '@/theme/spacing';
+import { AlertPriority, type Alert } from '@/types/mat';
+
+type SeverityLevel = 'URGENT' | 'HIGH' | 'NORMAL';
+
+type AlertCardProps = {
+  alert: Alert;
+};
+
+type SeverityMeta = {
+  label: SeverityLevel;
+  icon: string;
+  color: string;
+};
+
+const resolveSeverity = (alert: Alert): SeverityMeta => {
+  if (alert.priority === AlertPriority.Critical) {
+    return {
+      label: 'URGENT',
+      icon: '‼',
+      color: colors.danger,
+    };
+  }
+
+  if (alert.priority === AlertPriority.High) {
+    return {
+      label: 'HIGH',
+      icon: '⚠',
+      color: colors.warn,
+    };
+  }
+
+  return {
+    label: 'NORMAL',
+    icon: '•',
+    color: colors.accent,
+  };
+};
+
+const formatTime = (value?: string): string => {
+  if (!value) {
+    return 'Unknown';
+  }
+
+  try {
+    return new Date(value).toLocaleTimeString();
+  } catch {
+    return 'Unknown';
+  }
+};
+
+export const AlertCard = ({ alert }: AlertCardProps) => {
+  const severity = resolveSeverity(alert);
+
+  return (
+    <View
+      style={{
+        backgroundColor: '#111827',
+        borderWidth: 1,
+        borderColor: `${severity.color}55`,
+        padding: spacing.md,
+        borderRadius: 10,
+        marginBottom: spacing.sm,
+      }}
+    >
+      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+        <ThemedText preset="labelMd" style={{ color: severity.color }}>
+          {severity.icon} {severity.label}
+        </ThemedText>
+        <View style={{ flex: 1 }}>
+          <ThemedText preset="bodySm" style={{ color: colors.textSecondary }}>
+            {formatTime(alert.created_at)}
+          </ThemedText>
+        </View>
+      </View>
+      <ThemedText preset="bodyMd" style={{ color: colors.textPrimary, marginTop: 6 }}>
+        {alert.message}
+      </ThemedText>
+    </View>
+  );
+};
--- a/ui/mobile/src/screens/MATScreen/AlertList.tsx
+++ b/ui/mobile/src/screens/MATScreen/AlertList.tsx
@ -0,0 +1,41 @@
+import { FlatList, View } from 'react-native';
+import { ThemedText } from '@/components/ThemedText';
+import { colors } from '@/theme/colors';
+import { spacing } from '@/theme/spacing';
+import type { Alert } from '@/types/mat';
+import { AlertCard } from './AlertCard';
+
+type AlertListProps = {
+  alerts: Alert[];
+};
+
+export const AlertList = ({ alerts }: AlertListProps) => {
+  if (alerts.length === 0) {
+    return (
+      <View
+        style={{
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: spacing.md,
+          borderWidth: 1,
+          borderColor: colors.border,
+          borderRadius: 12,
+          backgroundColor: '#111827',
+        }}
+      >
+        <ThemedText preset="bodyMd">No alerts — system nominal</ThemedText>
+      </View>
+    );
+  }
+
+  return (
+    <FlatList
+      data={alerts}
+      keyExtractor={(item) => item.id}
+      renderItem={({ item }) => <AlertCard alert={item} />}
+      contentContainerStyle={{ paddingBottom: spacing.md }}
+      showsVerticalScrollIndicator={false}
+      removeClippedSubviews={false}
+    />
+  );
+};
--- a/ui/mobile/src/screens/MATScreen/MatWebView.tsx
+++ b/ui/mobile/src/screens/MATScreen/MatWebView.tsx
@ -0,0 +1,26 @@
+import { StyleProp, ViewStyle } from 'react-native';
+import WebView, { type WebViewMessageEvent } from 'react-native-webview';
+import type { RefObject } from 'react';
+import MAT_DASHBOARD_HTML from '@/assets/webview/mat-dashboard.html';
+
+type MatWebViewProps = {
+  webViewRef: RefObject<WebView | null>;
+  onMessage: (event: WebViewMessageEvent) => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+export const MatWebView = ({ webViewRef, onMessage, style }: MatWebViewProps) => {
+  return (
+    <WebView
+      ref={webViewRef}
+      originWhitelist={["*"]}
+      style={style}
+      source={{ html: MAT_DASHBOARD_HTML }}
+      onMessage={onMessage}
+      javaScriptEnabled
+      domStorageEnabled
+      mixedContentMode="always"
+      overScrollMode="never"
+    />
+  );
+};
--- a/ui/mobile/src/screens/MATScreen/SurvivorCounter.tsx
+++ b/ui/mobile/src/screens/MATScreen/SurvivorCounter.tsx
@ -0,0 +1,89 @@
+import { View } from 'react-native';
+import { ThemedText } from '@/components/ThemedText';
+import { colors } from '@/theme/colors';
+import { spacing } from '@/theme/spacing';
+import { TriageStatus, type Survivor } from '@/types/mat';
+
+type SurvivorCounterProps = {
+  survivors: Survivor[];
+};
+
+type Breakdown = {
+  immediate: number;
+  delayed: number;
+  minor: number;
+  deceased: number;
+  unknown: number;
+};
+
+const getBreakdown = (survivors: Survivor[]): Breakdown => {
+  const output = {
+    immediate: 0,
+    delayed: 0,
+    minor: 0,
+    deceased: 0,
+    unknown: 0,
+  };
+
+  survivors.forEach((survivor) => {
+    if (survivor.triage_status === TriageStatus.Immediate) {
+      output.immediate += 1;
+      return;
+    }
+    if (survivor.triage_status === TriageStatus.Delayed) {
+      output.delayed += 1;
+      return;
+    }
+    if (survivor.triage_status === TriageStatus.Minor) {
+      output.minor += 1;
+      return;
+    }
+    if (survivor.triage_status === TriageStatus.Deceased) {
+      output.deceased += 1;
+      return;
+    }
+
+    output.unknown += 1;
+  });
+
+  return output;
+};
+
+const BreakoutChip = ({ label, value, color }: { label: string; value: number; color: string }) => (
+  <View
+    style={{
+      backgroundColor: '#0D1117',
+      borderRadius: 999,
+      borderWidth: 1,
+      borderColor: `${color}55`,
+      paddingHorizontal: spacing.sm,
+      paddingVertical: 4,
+      marginRight: spacing.sm,
+      marginTop: spacing.sm,
+    }}
+  >
+    <ThemedText preset="bodySm" style={{ color }}>
+      {label}: {value}
+    </ThemedText>
+  </View>
+);
+
+export const SurvivorCounter = ({ survivors }: SurvivorCounterProps) => {
+  const total = survivors.length;
+  const breakdown = getBreakdown(survivors);
+
+  return (
+    <View style={{ paddingBottom: spacing.md }}>
+      <ThemedText preset="displayLg" style={{ color: colors.textPrimary }}>
+        {total} SURVIVORS DETECTED
+      </ThemedText>
+      <View style={{ flexDirection: 'row', flexWrap: 'wrap', marginTop: spacing.sm }}>
+        <BreakoutChip label="Immediate" value={breakdown.immediate} color={colors.danger} />
+        <BreakoutChip label="Delayed" value={breakdown.delayed} color={colors.warn} />
+        <BreakoutChip label="Minimal" value={breakdown.minor} color={colors.success} />
+        <BreakoutChip label="Expectant" value={breakdown.deceased} color={colors.textSecondary} />
+        <BreakoutChip label="Unknown" value={breakdown.unknown} color="#a0aec0" />
+      </View>
+    </View>
+  );
+};
--- a/ui/mobile/src/screens/MATScreen/index.tsx
+++ b/ui/mobile/src/screens/MATScreen/index.tsx
@ -0,0 +1,136 @@
+import { useEffect, useRef } from 'react';
+import { useWindowDimensions, View } from 'react-native';
+import { ConnectionBanner } from '@/components/ConnectionBanner';
+import { ThemedView } from '@/components/ThemedView';
+import { colors } from '@/theme/colors';
+import { spacing } from '@/theme/spacing';
+import { usePoseStream } from '@/hooks/usePoseStream';
+import { useMatStore } from '@/stores/matStore';
+import { type ConnectionStatus } from '@/types/sensing';
+import { Alert, type Survivor } from '@/types/mat';
+import { AlertList } from './AlertList';
+import { MatWebView } from './MatWebView';
+import { SurvivorCounter } from './SurvivorCounter';
+import { useMatBridge } from './useMatBridge';
+
+const isAlert = (value: unknown): value is Alert => {
+  if (!value || typeof value !== 'object') {
+    return false;
+  }
+
+  const record = value as Record<string, unknown>;
+  return typeof record.id === 'string' && typeof record.message === 'string';
+};
+
+const isSurvivor = (value: unknown): value is Survivor => {
+  if (!value || typeof value !== 'object') {
+    return false;
+  }
+
+  const record = value as Record<string, unknown>;
+  return typeof record.id === 'string' && typeof record.zone_id === 'string';
+};
+
+const resolveBannerState = (status: ConnectionStatus): 'connected' | 'simulated' | 'disconnected' => {
+  if (status === 'connecting') {
+    return 'disconnected';
+  }
+
+  return status;
+};
+
+export const MATScreen = () => {
+  const { connectionStatus, lastFrame } = usePoseStream();
+
+  const survivors = useMatStore((state) => state.survivors);
+  const alerts = useMatStore((state) => state.alerts);
+  const upsertSurvivor = useMatStore((state) => state.upsertSurvivor);
+  const addAlert = useMatStore((state) => state.addAlert);
+  const upsertEvent = useMatStore((state) => state.upsertEvent);
+
+  const { webViewRef, ready, onMessage, sendFrameUpdate, postEvent } = useMatBridge({
+    onSurvivorDetected: (survivor) => {
+      if (isSurvivor(survivor)) {
+        upsertSurvivor(survivor);
+      }
+    },
+    onAlertGenerated: (alert) => {
+      if (isAlert(alert)) {
+        addAlert(alert);
+      }
+    },
+  });
+
+  const seededRef = useRef(false);
+
+  useEffect(() => {
+    if (!ready || seededRef.current) {
+      return;
+    }
+
+    const createEvent = postEvent('CREATE_EVENT');
+    createEvent({
+      type: 'earthquake',
+      latitude: 37.7749,
+      longitude: -122.4194,
+      name: 'Training Scenario',
+    });
+
+    const addZone = postEvent('ADD_ZONE');
+    addZone({
+      name: 'Zone A',
+      zone_type: 'rectangle',
+      x: 60,
+      y: 60,
+      width: 180,
+      height: 120,
+    });
+    addZone({
+      name: 'Zone B',
+      zone_type: 'circle',
+      center_x: 300,
+      center_y: 170,
+      radius: 60,
+    });
+
+    upsertEvent({
+      event_id: 'training-scenario',
+      disaster_type: 1,
+      latitude: 37.7749,
+      longitude: -122.4194,
+      description: 'Training Scenario',
+    });
+
+    seededRef.current = true;
+  }, [postEvent, upsertEvent, ready]);
+
+  useEffect(() => {
+    if (ready && lastFrame) {
+      sendFrameUpdate(lastFrame);
+    }
+  }, [lastFrame, ready, sendFrameUpdate]);
+
+  const { height } = useWindowDimensions();
+  const webHeight = Math.max(240, Math.floor(height * 0.5));
+
+  return (
+    <ThemedView style={{ flex: 1, backgroundColor: colors.bg, padding: spacing.md }}>
+      <ConnectionBanner status={resolveBannerState(connectionStatus)} />
+      <View style={{ marginTop: 20 }}>
+        <SurvivorCounter survivors={survivors} />
+      </View>
+      <View style={{ height: webHeight }}>
+        <MatWebView
+          webViewRef={webViewRef}
+          onMessage={onMessage}
+          style={{ flex: 1, borderRadius: 12, overflow: 'hidden', backgroundColor: colors.surface }}
+        />
+      </View>
+      <View style={{ flex: 1, marginTop: spacing.md }}>
+        <AlertList alerts={alerts} />
+      </View>
+    </ThemedView>
+  );
+};
+
+export default MATScreen;
--- a/ui/mobile/src/screens/MATScreen/useMatBridge.ts
+++ b/ui/mobile/src/screens/MATScreen/useMatBridge.ts
@ -0,0 +1,118 @@
+import { useCallback, useRef, useState } from 'react';
+import type { WebView, WebViewMessageEvent } from 'react-native-webview';
+import type { Alert, Survivor } from '@/types/mat';
+import type { SensingFrame } from '@/types/sensing';
+
+type MatBridgeMessageType = 'CREATE_EVENT' | 'ADD_ZONE' | 'FRAME_UPDATE';
+
+type MatIncomingType = 'READY' | 'SURVIVOR_DETECTED' | 'ALERT_GENERATED';
+
+type MatIncomingMessage = {
+  type: MatIncomingType;
+  payload?: unknown;
+};
+
+type MatOutgoingMessage = {
+  type: MatBridgeMessageType;
+  payload?: unknown;
+};
+
+type UseMatBridgeOptions = {
+  onSurvivorDetected?: (survivor: Survivor) => void;
+  onAlertGenerated?: (alert: Alert) => void;
+};
+
+const safeParseJson = (value: string): unknown | null => {
+  try {
+    return JSON.parse(value);
+  } catch {
+    return null;
+  }
+};
+
+export const useMatBridge = ({ onAlertGenerated, onSurvivorDetected }: UseMatBridgeOptions = {}) => {
+  const webViewRef = useRef<WebView | null>(null);
+  const isReadyRef = useRef(false);
+  const queuedMessages = useRef<string[]>([]);
+  const [ready, setReady] = useState(false);
+
+  const flush = useCallback(() => {
+    if (!webViewRef.current || !isReadyRef.current) {
+      return;
+    }
+
+    while (queuedMessages.current.length > 0) {
+      const payload = queuedMessages.current.shift();
+      if (payload) {
+        webViewRef.current.postMessage(payload);
+      }
+    }
+  }, []);
+
+  const sendMessage = useCallback(
+    (message: MatOutgoingMessage) => {
+      const payload = JSON.stringify(message);
+      if (isReadyRef.current && webViewRef.current) {
+        webViewRef.current.postMessage(payload);
+        return;
+      }
+      queuedMessages.current.push(payload);
+    },
+    [],
+  );
+
+  const sendFrameUpdate = useCallback(
+    (frame: SensingFrame) => {
+      sendMessage({ type: 'FRAME_UPDATE', payload: frame });
+    },
+    [sendMessage],
+  );
+
+  const postEvent = useCallback(
+    (type: 'CREATE_EVENT' | 'ADD_ZONE') => {
+      return (payload: unknown) => {
+        sendMessage({
+          type,
+          payload,
+        });
+      };
+    },
+    [sendMessage],
+  );
+
+  const onMessage = useCallback(
+    (event: WebViewMessageEvent) => {
+      const payload = safeParseJson(event.nativeEvent.data);
+      if (!payload || typeof payload !== 'object') {
+        return;
+      }
+
+      const message = payload as MatIncomingMessage;
+      if (message.type === 'READY') {
+        isReadyRef.current = true;
+        setReady(true);
+        flush();
+        return;
+      }
+
+      if (message.type === 'SURVIVOR_DETECTED') {
+        onSurvivorDetected?.(message.payload as Survivor);
+        return;
+      }
+
+      if (message.type === 'ALERT_GENERATED') {
+        onAlertGenerated?.(message.payload as Alert);
+      }
+    },
+    [flush, onAlertGenerated, onSurvivorDetected],
+  );
+
+  return {
+    webViewRef,
+    ready,
+    onMessage,
+    sendMessage,
+    sendFrameUpdate,
+    postEvent,
+  };
+};
--- a/ui/mobile/src/screens/SettingsScreen/RssiToggle.tsx
+++ b/ui/mobile/src/screens/SettingsScreen/RssiToggle.tsx
@ -0,0 +1,36 @@
+import { Platform, Switch, View } from 'react-native';
+import { ThemedText } from '@/components/ThemedText';
+import { colors } from '@/theme/colors';
+import { spacing } from '@/theme/spacing';
+
+type RssiToggleProps = {
+  enabled: boolean;
+  onChange: (value: boolean) => void;
+};
+
+export const RssiToggle = ({ enabled, onChange }: RssiToggleProps) => {
+  return (
+    <View>
+      <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+        <View style={{ flex: 1 }}>
+          <ThemedText preset="bodyMd">RSSI Scan</ThemedText>
+          <ThemedText preset="bodySm" style={{ color: colors.textSecondary }}>
+            Scan for nearby Wi-Fi signals from Android devices
+          </ThemedText>
+        </View>
+        <Switch
+          value={enabled}
+          onValueChange={onChange}
+          trackColor={{ true: colors.accent, false: colors.surfaceAlt }}
+          thumbColor={colors.textPrimary}
+        />
+      </View>
+
+      {Platform.OS === 'ios' && (
+        <ThemedText preset="bodySm" style={{ color: colors.textSecondary, marginTop: spacing.xs }}>
+          iOS: RSSI scan is currently limited — using stub data.
+        </ThemedText>
+      )}
+    </View>
+  );
+};
--- a/ui/mobile/src/screens/SettingsScreen/ServerUrlInput.tsx
+++ b/ui/mobile/src/screens/SettingsScreen/ServerUrlInput.tsx
@ -0,0 +1,102 @@
+import { useState } from 'react';
+import { Pressable, TextInput, View } from 'react-native';
+import { validateServerUrl } from '@/utils/urlValidator';
+import { apiService } from '@/services/api.service';
+import { ThemedText } from '@/components/ThemedText';
+import { colors } from '@/theme/colors';
+import { spacing } from '@/theme/spacing';
+
+type ServerUrlInputProps = {
+  value: string;
+  onChange: (value: string) => void;
+  onSave: () => void;
+};
+
+export const ServerUrlInput = ({ value, onChange, onSave }: ServerUrlInputProps) => {
+  const [testResult, setTestResult] = useState('');
+
+  const validation = validateServerUrl(value);
+
+  const handleTest = async () => {
+    if (!validation.valid) {
+      setTestResult('✗ Invalid URL');
+      return;
+    }
+
+    const start = Date.now();
+    try {
+      await apiService.getStatus();
+      setTestResult(`✓ ${Date.now() - start}ms`);
+    } catch {
+      setTestResult('✗ Failed');
+    }
+  };
+
+  return (
+    <View>
+      <ThemedText preset="labelMd" style={{ marginBottom: spacing.sm }}>
+        Server URL
+      </ThemedText>
+      <TextInput
+        value={value}
+        onChangeText={onChange}
+        autoCapitalize="none"
+        autoCorrect={false}
+        placeholder="http://192.168.1.100:8080"
+        keyboardType="url"
+        placeholderTextColor={colors.textSecondary}
+        style={{
+          borderWidth: 1,
+          borderColor: validation.valid ? colors.border : colors.danger,
+          borderRadius: 10,
+          backgroundColor: colors.surface,
+          color: colors.textPrimary,
+          padding: spacing.sm,
+          marginBottom: spacing.sm,
+        }}
+      />
+      {!validation.valid && (
+        <ThemedText preset="bodySm" style={{ color: colors.danger, marginBottom: spacing.sm }}>
+          {validation.error}
+        </ThemedText>
+      )}
+
+      <ThemedText preset="bodySm" style={{ color: colors.textSecondary, marginBottom: spacing.sm }}>
+        {testResult || 'Ready to test connection'}
+      </ThemedText>
+
+      <View style={{ flexDirection: 'row', gap: spacing.sm }}>
+        <Pressable
+          onPress={handleTest}
+          disabled={!validation.valid}
+          style={{
+            flex: 1,
+            paddingVertical: 10,
+            borderRadius: 8,
+            backgroundColor: validation.valid ? colors.accentDim : colors.surfaceAlt,
+            alignItems: 'center',
+          }}
+        >
+          <ThemedText preset="labelMd" style={{ color: colors.textPrimary }}>
+            Test Connection
+          </ThemedText>
+        </Pressable>
+        <Pressable
+          onPress={onSave}
+          disabled={!validation.valid}
+          style={{
+            flex: 1,
+            paddingVertical: 10,
+            borderRadius: 8,
+            backgroundColor: validation.valid ? colors.success : colors.surfaceAlt,
+            alignItems: 'center',
+          }}
+        >
+          <ThemedText preset="labelMd" style={{ color: colors.textPrimary }}>
+            Save
+          </ThemedText>
+        </Pressable>
+      </View>
+    </View>
+  );
+};
--- a/ui/mobile/src/screens/SettingsScreen/ThemePicker.tsx
+++ b/ui/mobile/src/screens/SettingsScreen/ThemePicker.tsx
@ -0,0 +1,47 @@
+import { Pressable, View } from 'react-native';
+import { ThemeMode } from '@/theme/ThemeContext';
+import { ThemedText } from '@/components/ThemedText';
+import { colors } from '@/theme/colors';
+import { spacing } from '@/theme/spacing';
+
+type ThemePickerProps = {
+  value: ThemeMode;
+  onChange: (value: ThemeMode) => void;
+};
+
+const OPTIONS: ThemeMode[] = ['light', 'dark', 'system'];
+
+export const ThemePicker = ({ value, onChange }: ThemePickerProps) => {
+  return (
+    <View
+      style={{
+        flexDirection: 'row',
+        gap: spacing.sm,
+        marginTop: spacing.sm,
+      }}
+    >
+      {OPTIONS.map((option) => {
+        const isActive = option === value;
+        return (
+          <Pressable
+            key={option}
+            onPress={() => onChange(option)}
+            style={{
+              flex: 1,
+              borderRadius: 8,
+              borderWidth: 1,
+              borderColor: isActive ? colors.accent : colors.border,
+              backgroundColor: isActive ? `${colors.accent}22` : '#0D1117',
+              paddingVertical: 10,
+              alignItems: 'center',
+            }}
+          >
+            <ThemedText preset="labelMd" style={{ color: isActive ? colors.accent : colors.textSecondary }}>
+              {option.toUpperCase()}
+            </ThemedText>
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+};
--- a/ui/mobile/src/screens/SettingsScreen/index.tsx
+++ b/ui/mobile/src/screens/SettingsScreen/index.tsx
@ -0,0 +1,170 @@
+import { useEffect, useMemo, useState } from 'react';
+import { Linking, ScrollView, View } from 'react-native';
+import { ThemedText } from '@/components/ThemedText';
+import { ThemedView } from '@/components/ThemedView';
+import { colors } from '@/theme/colors';
+import { spacing } from '@/theme/spacing';
+import { WS_PATH } from '@/constants/websocket';
+import { apiService } from '@/services/api.service';
+import { wsService } from '@/services/ws.service';
+import { useSettingsStore } from '@/stores/settingsStore';
+import { Alert, Pressable, Platform } from 'react-native';
+import { ThemePicker } from './ThemePicker';
+import { RssiToggle } from './RssiToggle';
+import { ServerUrlInput } from './ServerUrlInput';
+
+type GlowCardProps = {
+  title: string;
+  children: React.ReactNode;
+};
+
+const GlowCard = ({ title, children }: GlowCardProps) => {
+  return (
+    <View
+      style={{
+        backgroundColor: '#0F141E',
+        borderRadius: 14,
+        borderWidth: 1,
+        borderColor: `${colors.accent}35`,
+        padding: spacing.md,
+        marginBottom: spacing.md,
+      }}
+    >
+      <ThemedText preset="labelMd" style={{ marginBottom: spacing.sm, color: colors.textPrimary }}>
+        {title}
+      </ThemedText>
+      {children}
+    </View>
+  );
+};
+
+const ScanIntervalPicker = ({
+  value,
+  onChange,
+}: {
+  value: number;
+  onChange: (value: number) => void;
+}) => {
+  const options = [1, 2, 5];
+
+  return (
+    <View style={{ flexDirection: 'row', gap: spacing.sm, marginTop: spacing.sm }}>
+      {options.map((interval) => {
+        const isActive = interval === value;
+        return (
+          <Pressable
+            key={interval}
+            onPress={() => onChange(interval)}
+            style={{
+              flex: 1,
+              borderWidth: 1,
+              borderColor: isActive ? colors.accent : colors.border,
+              borderRadius: 8,
+              backgroundColor: isActive ? `${colors.accent}20` : colors.surface,
+              alignItems: 'center',
+            }}
+          >
+            <ThemedText
+              preset="bodySm"
+              style={{
+                color: isActive ? colors.accent : colors.textSecondary,
+                paddingVertical: 8,
+              }}
+            >
+              {interval}s
+            </ThemedText>
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+};
+
+export const SettingsScreen = () => {
+  const serverUrl = useSettingsStore((state) => state.serverUrl);
+  const rssiScanEnabled = useSettingsStore((state) => state.rssiScanEnabled);
+  const theme = useSettingsStore((state) => state.theme);
+  const setServerUrl = useSettingsStore((state) => state.setServerUrl);
+  const setRssiScanEnabled = useSettingsStore((state) => state.setRssiScanEnabled);
+  const setTheme = useSettingsStore((state) => state.setTheme);
+
+  const [draftUrl, setDraftUrl] = useState(serverUrl);
+  const [scanInterval, setScanInterval] = useState(2);
+
+  useEffect(() => {
+    setDraftUrl(serverUrl);
+  }, [serverUrl]);
+
+  const intervalSummary = useMemo(() => `${scanInterval}s`, [scanInterval]);
+
+  const handleSaveUrl = () => {
+    const newUrl = draftUrl.trim();
+    setServerUrl(newUrl);
+    wsService.disconnect();
+    wsService.connect(newUrl);
+    apiService.setBaseUrl(newUrl);
+  };
+
+  const handleOpenGitHub = async () => {
+    const handled = await Linking.canOpenURL('https://github.com');
+    if (!handled) {
+      Alert.alert('Unable to open link', 'Please open https://github.com manually in your browser.');
+      return;
+    }
+
+    await Linking.openURL('https://github.com');
+  };
+
+  return (
+    <ThemedView style={{ flex: 1, backgroundColor: colors.bg, padding: spacing.md }}>
+      <ScrollView
+        contentContainerStyle={{
+          paddingBottom: spacing.xl,
+        }}
+      >
+        <GlowCard title="SERVER">
+          <ServerUrlInput value={draftUrl} onChange={setDraftUrl} onSave={handleSaveUrl} />
+        </GlowCard>
+
+        <GlowCard title="SENSING">
+          <RssiToggle enabled={rssiScanEnabled} onChange={setRssiScanEnabled} />
+          <ThemedText preset="bodyMd" style={{ marginTop: spacing.md }}>
+            Scan interval
+          </ThemedText>
+          <ScanIntervalPicker value={scanInterval} onChange={setScanInterval} />
+          <ThemedText preset="bodySm" style={{ color: colors.textSecondary, marginTop: spacing.sm }}>
+            Active interval: {intervalSummary}
+          </ThemedText>
+          {Platform.OS === 'ios' && (
+            <ThemedText preset="bodySm" style={{ color: colors.textSecondary, marginTop: spacing.sm }}>
+              iOS: RSSI scanning uses stubbed telemetry in this build.
+            </ThemedText>
+          )}
+        </GlowCard>
+
+        <GlowCard title="APPEARANCE">
+          <ThemePicker value={theme} onChange={setTheme} />
+        </GlowCard>
+
+        <GlowCard title="ABOUT">
+          <ThemedText preset="bodyMd" style={{ marginBottom: spacing.xs }}>
+            WiFi-DensePose Mobile v1.0.0
+          </ThemedText>
+          <ThemedText
+            preset="bodySm"
+            style={{ color: colors.accent, marginBottom: spacing.sm }}
+            onPress={handleOpenGitHub}
+          >
+            View on GitHub
+          </ThemedText>
+          <ThemedText preset="bodySm">WebSocket: {WS_PATH}</ThemedText>
+          <ThemedText preset="bodySm" style={{ color: colors.textSecondary }}>
+            Triage priority mapping: Immediate/Delayed/Minor/Deceased/Unknown
+          </ThemedText>
+        </GlowCard>
+      </ScrollView>
+    </ThemedView>
+  );
+};
+
+export default SettingsScreen;
--- a/ui/mobile/src/screens/VitalsScreen/BreathingGauge.tsx
+++ b/ui/mobile/src/screens/VitalsScreen/BreathingGauge.tsx
@ -0,0 +1,63 @@
+import { useMemo } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { usePoseStore } from '@/stores/poseStore';
+import { GaugeArc } from '@/components/GaugeArc';
+import { colors } from '@/theme/colors';
+import { ThemedText } from '@/components/ThemedText';
+
+const BREATHING_MIN_BPM = 0;
+const BREATHING_MAX_BPM = 30;
+const BREATHING_BAND_MAX = 0.3;
+
+const clamp = (value: number, min: number, max: number) => Math.max(min, Math.min(max, value));
+
+const deriveBreathingValue = (
+  breathingBand?: number,
+  breathingBpm?: number,
+): number => {
+  if (typeof breathingBpm === 'number' && Number.isFinite(breathingBpm)) {
+    return clamp(breathingBpm, BREATHING_MIN_BPM, BREATHING_MAX_BPM);
+  }
+
+  const bandValue = typeof breathingBand === 'number' && Number.isFinite(breathingBand) ? breathingBand : 0;
+  const normalized = clamp(bandValue / BREATHING_BAND_MAX, 0, 1);
+  return normalized * BREATHING_MAX_BPM;
+};
+
+export const BreathingGauge = () => {
+  const breathingBand = usePoseStore((state) => state.features?.breathing_band_power);
+  const breathingBpm = usePoseStore((state) => state.lastFrame?.vital_signs?.breathing_bpm);
+
+  const value = useMemo(
+    () => deriveBreathingValue(breathingBand, breathingBpm),
+    [breathingBand, breathingBpm],
+  );
+
+  return (
+    <View style={styles.container}>
+      <ThemedText preset="labelMd" style={styles.label}>
+        BREATHING
+      </ThemedText>
+      <GaugeArc value={value} min={BREATHING_MIN_BPM} max={BREATHING_MAX_BPM} label="" unit="BPM" color={colors.accent} />
+      <ThemedText preset="labelMd" color="textSecondary" style={styles.unit}>
+        BPM
+      </ThemedText>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 6,
+  },
+  label: {
+    color: '#94A3B8',
+    letterSpacing: 1,
+  },
+  unit: {
+    marginTop: -12,
+    marginBottom: 4,
+  },
+});
--- a/ui/mobile/src/screens/VitalsScreen/HeartRateGauge.tsx
+++ b/ui/mobile/src/screens/VitalsScreen/HeartRateGauge.tsx
@ -0,0 +1,76 @@
+import { useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { usePoseStore } from '@/stores/poseStore';
+import { GaugeArc } from '@/components/GaugeArc';
+import { colors } from '@/theme/colors';
+import { ThemedText } from '@/components/ThemedText';
+
+const HEART_MIN_BPM = 40;
+const HEART_MAX_BPM = 120;
+const MOTION_BAND_MAX = 0.5;
+const BREATH_BAND_MAX = 0.3;
+
+const clamp = (value: number, min: number, max: number) => Math.max(min, Math.min(max, value));
+
+const deriveHeartRate = (
+  heartbeat?: number,
+  motionBand?: number,
+  breathingBand?: number,
+): number => {
+  if (typeof heartbeat === 'number' && Number.isFinite(heartbeat)) {
+    return clamp(heartbeat, HEART_MIN_BPM, HEART_MAX_BPM);
+  }
+
+  const motionValue = typeof motionBand === 'number' && Number.isFinite(motionBand) ? clamp(motionBand / MOTION_BAND_MAX, 0, 1) : 0;
+  const breathValue = typeof breathingBand === 'number' && Number.isFinite(breathingBand) ? clamp(breathingBand / BREATH_BAND_MAX, 0, 1) : 0;
+
+  const normalized = 0.7 * motionValue + 0.3 * breathValue;
+  return HEART_MIN_BPM + normalized * (HEART_MAX_BPM - HEART_MIN_BPM);
+};
+
+export const HeartRateGauge = () => {
+  const heartProxyBpm = usePoseStore((state) => state.lastFrame?.vital_signs?.hr_proxy_bpm);
+  const motionBand = usePoseStore((state) => state.features?.motion_band_power);
+  const breathingBand = usePoseStore((state) => state.features?.breathing_band_power);
+
+  const value = useMemo(
+    () => deriveHeartRate(heartProxyBpm, motionBand, breathingBand),
+    [heartProxyBpm, motionBand, breathingBand],
+  );
+
+  return (
+    <View style={styles.container}>
+      <ThemedText preset="labelMd" style={styles.label}>
+        HR PROXY
+      </ThemedText>
+      <GaugeArc
+        value={value}
+        min={HEART_MIN_BPM}
+        max={HEART_MAX_BPM}
+        label=""
+        unit="BPM"
+        color={colors.danger}
+        colorTo={colors.success}
+      />
+      <ThemedText preset="bodySm" color="textSecondary" style={styles.note}>
+        (estimated)
+      </ThemedText>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 6,
+  },
+  label: {
+    color: '#94A3B8',
+    letterSpacing: 1,
+  },
+  note: {
+    marginTop: -12,
+    marginBottom: 4,
+  },
+});
--- a/ui/mobile/src/screens/VitalsScreen/MetricCard.tsx
+++ b/ui/mobile/src/screens/VitalsScreen/MetricCard.tsx
@ -0,0 +1,111 @@
+import { useEffect, useMemo, useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+import {
+  runOnJS,
+  useAnimatedReaction,
+  useSharedValue,
+  withSpring,
+} from 'react-native-reanimated';
+import { SparklineChart } from '@/components/SparklineChart';
+import { ThemedText } from '@/components/ThemedText';
+import { colors } from '@/theme/colors';
+
+type MetricCardProps = {
+  label: string;
+  value: number | string;
+  unit?: string;
+  color?: string;
+  sparklineData?: number[];
+};
+
+const formatMetricValue = (value: number, unit?: string) => {
+  if (!Number.isFinite(value)) {
+    return '--';
+  }
+  const decimals = Math.abs(value) >= 100 ? 0 : Math.abs(value) >= 10 ? 2 : 3;
+  const text = value.toFixed(decimals);
+  return unit ? `${text} ${unit}` : text;
+};
+
+export const MetricCard = ({ label, value, unit, color = colors.accent, sparklineData }: MetricCardProps) => {
+  const numericValue = typeof value === 'number' ? value : null;
+  const [displayValue, setDisplayValue] = useState(() =>
+    numericValue !== null ? formatMetricValue(numericValue, unit) : String(value ?? '--'),
+  );
+
+  const valueAnimation = useSharedValue(numericValue ?? 0);
+
+  const finalValue = useMemo(
+    () => (numericValue !== null ? numericValue : NaN),
+    [numericValue],
+  );
+
+  useEffect(() => {
+    if (numericValue === null) {
+      setDisplayValue(String(value ?? '--'));
+      return;
+    }
+
+    valueAnimation.value = withSpring(finalValue, {
+      damping: 18,
+      stiffness: 160,
+      mass: 1,
+    });
+  }, [finalValue, numericValue, value, valueAnimation]);
+
+  useAnimatedReaction(
+    () => valueAnimation.value,
+    (current) => {
+      runOnJS(setDisplayValue)(formatMetricValue(current, unit));
+    },
+    [unit],
+  );
+
+  return (
+    <View style={[styles.card, { borderColor: color, shadowColor: color, shadowOpacity: 0.35 }]} accessibilityRole="summary">
+      <ThemedText preset="labelMd" style={styles.label}>
+        {label}
+      </ThemedText>
+      <ThemedText preset="displayMd" style={styles.value}>
+        {displayValue}
+      </ThemedText>
+      {sparklineData && sparklineData.length > 0 && (
+        <View style={styles.sparklineWrap}>
+          <SparklineChart data={sparklineData} color={color} height={56} />
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: colors.surface,
+    borderWidth: 1,
+    borderRadius: 14,
+    padding: 12,
+    marginBottom: 10,
+    gap: 6,
+    shadowOffset: {
+      width: 0,
+      height: 0,
+    },
+    shadowRadius: 12,
+    elevation: 4,
+  },
+  label: {
+    color: colors.textSecondary,
+    textTransform: 'uppercase',
+    letterSpacing: 0.8,
+  },
+  value: {
+    color: colors.textPrimary,
+    marginBottom: 2,
+  },
+  sparklineWrap: {
+    marginTop: 4,
+    borderTopWidth: 1,
+    borderTopColor: colors.border,
+    paddingTop: 8,
+  },
+});
--- a/Show more
+++ b/Show more
				`@ -0,0 +1 @@`
				`EXPO_PUBLIC_DEFAULT_SERVER_URL=http://192.168.1.100:8080`