diff --git a/fiveparaminte-main/contec_parser.py b/fiveparaminte-main/contec_parser.py
index 7663839..ae174a9 100644
--- a/fiveparaminte-main/contec_parser.py
+++ b/fiveparaminte-main/contec_parser.py
@@ -349,7 +349,8 @@ def _parse_286_byte_packet(data: bytes, vitals_dict: dict) -> bool:
     """
     Parse 286-byte waveform packet (Subtype 21).
     
-    Verified layout at tail:
+    Verified layout:
+      [8..263]  Pleth waveform samples (8-bit unsigned, 256 samples)
       [264-265] SpO2% (LE u16) — live oxygen saturation percentage
                 255 / 65535 = sensor disconnected
       [266-267] ECG HR via SpO2 PR (LE u16) — 9999 / 65535 = not available
@@ -365,6 +366,14 @@ def _parse_286_byte_packet(data: bytes, vitals_dict: dict) -> bool:
 
     found = False
 
+    # Extract Pleth waveform samples (bytes 8..263)
+    raw_pleth = list(data[8:264])
+    # Only store if not all-zeroes or all-sentinel (flatline = disconnected)
+    if any(v not in (0x00, 0x7F, 0x3A, 0x92, 0xFF) for v in raw_pleth[:10]):
+        vitals_dict["pleth_wave"] = raw_pleth
+    else:
+        vitals_dict["pleth_wave"] = raw_pleth  # Always send so frontend can show flatline too
+
     # Offset 264: SpO2 percentage
     spo2_val = read_u16_le(data, 264)
     if spo2_val is not None and spo2_val != 65535 and spo2_val != 255 and 50 <= spo2_val <= 100:
@@ -387,6 +396,7 @@ def _parse_288_byte_packet(data: bytes, vitals_dict: dict) -> bool:
     Parse 288-byte waveform packet (Subtype 21 for CMS8500).
     
     Layout:
+      [8..263]  Pleth waveform samples (8-bit unsigned, 256 samples)
       [264-265] SpO2% (LE u16) — live oxygen saturation percentage
       [266-267] PR (LE u16) — pulse rate
     """
@@ -401,6 +411,9 @@ def _parse_288_byte_packet(data: bytes, vitals_dict: dict) -> bool:
 
     found = False
 
+    # Extract Pleth waveform samples (bytes 8..263)
+    vitals_dict["pleth_wave"] = list(data[8:264])
+
     # Offset 264: SpO2 percentage
     spo2_val = read_u16_le(data, 264)
     if spo2_val is not None and spo2_val != 65535 and spo2_val != 255 and 50 <= spo2_val <= 100:
@@ -450,9 +463,10 @@ def _parse_341_byte_packet(data: bytes, vitals_dict: dict) -> bool:
 
 def _parse_989_byte_packet(data: bytes, vitals_dict: dict) -> bool:
     """
-    Parse 989-byte waveform packet (Subtype 20).
+    Parse 989-byte waveform packet (Subtype 20 / 14h).
     
     Verified layout:
+      [8..903]  ECG waveform samples (8-bit unsigned, 896 samples @ ~250Hz)
       [904-905] ECG Heart Rate (LE u16)
                 65535 or 9999 = invalid/disconnected
     """
@@ -467,6 +481,11 @@ def _parse_989_byte_packet(data: bytes, vitals_dict: dict) -> bool:
 
     found = False
 
+    # Extract ECG waveform samples (bytes 8..903), downsample to 200 points for efficiency
+    raw_ecg = list(data[8:904])
+    # Downsample by factor of 4 -> ~224 points (still high-resolution enough)
+    vitals_dict["ecg_wave"] = raw_ecg[::4]
+
     hr_val = read_u16_le(data, 904)
     if hr_val is not None and hr_val != 65535 and hr_val != 9999 and 20 <= hr_val <= 300:
         vitals_dict["heart_rate"] = float(hr_val)
diff --git a/fiveparaminte-main/schemas.py b/fiveparaminte-main/schemas.py
index 678f366..ac2c884 100644
--- a/fiveparaminte-main/schemas.py
+++ b/fiveparaminte-main/schemas.py
@@ -1,5 +1,5 @@
 from pydantic import BaseModel
-from typing import Optional
+from typing import Optional, List
 from datetime import datetime
 
 class NormalizedVitals(BaseModel):
@@ -15,6 +15,9 @@ class NormalizedVitals(BaseModel):
     respiratory_rate: Optional[float] = None
     temperature: Optional[float] = None
     present_fields: Optional[list] = None
+    # Raw waveform sample arrays (8-bit unsigned, 0-255)
+    ecg_wave:   Optional[List[int]] = None   # ECG waveform samples from 989-byte packet
+    pleth_wave: Optional[List[int]] = None   # Pleth/SpO2 waveform samples from 286/288-byte packet
     # Patient demographics parsed from HL7 PID/PV1 segments
     patient_name:   Optional[str] = None   # PID-5: "Given Family"
     patient_gender: Optional[str] = None   # PID-8: M / F / U
diff --git a/fiveparaminte-main/static/dashboard.html b/fiveparaminte-main/static/dashboard.html
index c039dfe..f6d2eff 100644
--- a/fiveparaminte-main/static/dashboard.html
+++ b/fiveparaminte-main/static/dashboard.html
@@ -1,1598 +1,598 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Patient Vital Signs Monitor — Contec CMS8500</title>
-    <meta name="description" content="Real-time patient vital signs monitoring dashboard for Contec CMS8500 patient monitors">
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;600;700;800&display=swap" rel="stylesheet">
-    
-    <style>
-        /* === CSS Reset & Base === */
-        *, *::before, *::after {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        :root {
-            /* Monitor Theme Palette (Identical to physical monitor) */
-            --bg-monitor: #000000;
-            --bg-card: #080808;
-            --border-color: #1a1a1a;
-            
-            --ecg-color: #00ff66;       /* Bright medical green */
-            --spo2-color: #00ffff;      /* Cyan */
-            --resp-color: #ffff00;      /* Yellow */
-            --nibp-color: #ffffff;      /* White */
-            --temp-color: #ffff00;      /* Yellow temperature */
-            
-            --gray-btn: #333333;
-            --gray-btn-hover: #444444;
-            --text-dim: #888888;
-        }
-
-        body {
-            font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-            background: var(--bg-monitor);
-            color: #ffffff;
-            height: 100vh;
-            overflow: hidden;
-            display: flex;
-            flex-direction: column;
-            user-select: none;
-        }
-
-        /* === Retractable Developer Control Panel === */
-        .dev-controls {
-            position: fixed;
-            top: 0;
-            left: 50%;
-            transform: translateX(-50%) translateY(-100%);
-            background: rgba(20, 20, 20, 0.95);
-            border: 1px solid #333;
-            border-top: none;
-            border-radius: 0 0 16px 16px;
-            padding: 10px 24px;
-            display: flex;
-            align-items: center;
-            gap: 16px;
-            z-index: 1000;
-            box-shadow: 0 10px 30px rgba(0,0,0,0.8);
-            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
-        }
-
-        .dev-controls:hover,
-        .dev-controls.active {
-            transform: translateX(-50%) translateY(0);
-        }
-
-        /* Invisible hover trigger zone at the top of the page */
-        .dev-trigger-zone {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            height: 12px;
-            z-index: 999;
-            cursor: pointer;
-        }
-
-        .dev-trigger-zone:hover + .dev-controls {
-            transform: translateX(-50%) translateY(0);
-        }
-
-        .dev-pull-tab {
-            position: absolute;
-            bottom: -20px;
-            left: 50%;
-            transform: translateX(-50%);
-            background: #222;
-            color: #888;
-            font-size: 9px;
-            padding: 2px 10px;
-            border-radius: 0 0 6px 6px;
-            border: 1px solid #333;
-            border-top: none;
-            font-weight: 700;
-            pointer-events: none;
-        }
-
-        .device-selector-container {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-
-        .device-select-dropdown {
-            background: #111;
-            border: 1px solid #444;
-            color: #fff;
-            padding: 4px 8px;
-            border-radius: 6px;
-            font-size: 11px;
-            font-weight: 600;
-            outline: none;
-            cursor: pointer;
-        }
-
-        .audio-toggle {
-            display: flex;
-            align-items: center;
-            gap: 6px;
-            padding: 4px 10px;
-            border-radius: 6px;
-            font-size: 11px;
-            font-weight: 600;
-            background: #222;
-            border: 1px solid #444;
-            color: #ccc;
-            cursor: pointer;
-        }
-
-        .audio-toggle.active {
-            background: rgba(255, 0, 0, 0.2);
-            border-color: #ff3333;
-            color: #ff5555;
-        }
-
-        .connection-badge {
-            display: flex;
-            align-items: center;
-            gap: 6px;
-            padding: 4px 10px;
-            border-radius: 6px;
-            font-size: 11px;
-            font-weight: 600;
-            background: rgba(0, 255, 0, 0.1);
-            border: 1px solid #00aa44;
-            color: #00ff66;
-        }
-
-        .connection-badge.offline {
-            background: rgba(255,0,0,0.1);
-            border-color: #aa0000;
-            color: #ff3333;
-        }
-
-        .connection-badge.warning {
-            background: rgba(255,255,0,0.1);
-            border-color: #aaaa00;
-            color: #ffff00;
-        }
-
-        /* === Patient Verification Overlay === */
-        .verification-overlay {
-            position: fixed;
-            inset: 0;
-            background: #000000;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            z-index: 100;
-        }
-
-        .error-card {
-            background: #080808;
-            border: 1px solid #222;
-            border-radius: 12px;
-            padding: 24px;
-            max-width: 450px;
-            text-align: center;
-            box-shadow: 0 10px 40px rgba(0,0,0,0.9);
-        }
-
-        .error-icon {
-            font-size: 48px;
-            margin-bottom: 16px;
-        }
-
-        .error-card h2 {
-            font-size: 18px;
-            font-weight: 700;
-            color: #fff;
-            margin-bottom: 10px;
-        }
-
-        .error-card p {
-            font-size: 13px;
-            color: #888;
-            line-height: 1.5;
-        }
-
-        .verification-overlay.loading .error-icon {
-            animation: spin 1.5s linear infinite;
-        }
-
-        @keyframes spin {
-            100% { transform: rotate(360deg); }
-        }
-
-        /* === CMS8500 Main Monitor Layout === */
-        .monitor-container {
-            display: flex;
-            flex-direction: column;
-            flex: 1;
-            background: #000;
-            padding: 4px;
-            justify-content: space-between;
-        }
-
-        /* Top Banner Info */
-        .monitor-header {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            background: #000;
-            padding: 2px 8px;
-            font-size: 12px;
-            font-weight: 600;
-            border-bottom: 1px solid #111;
-            height: 24px;
-        }
-
-        .patient-banner-info {
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            color: #00ff66;
-        }
-
-        .patient-banner-info .gender-badge {
-            background: #0044bb;
-            color: #fff;
-            padding: 0 6px;
-            border-radius: 50%;
-            font-size: 10px;
-            height: 16px;
-            display: flex;
-            align-items: center;
-            font-weight: 800;
-        }
-
-        .alarm-notifications {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-
-        .alarm-badge {
-            font-size: 10px;
-            padding: 1px 8px;
-            border-radius: 2px;
-            font-weight: 700;
-        }
-
-        .alarm-badge.blue {
-            background: #0044aa;
-            color: #ffffff;
-        }
-
-        .alarm-badge.yellow {
-            background: #ffff00;
-            color: #000000;
-        }
-
-        .system-status-icons {
-            display: flex;
-            align-items: center;
-            gap: 10px;
-            color: #888;
-        }
-
-        .system-status-icons .clock {
-            font-family: 'JetBrains Mono', monospace;
-            color: #fff;
-        }
-
-        /* Main Workspace Grid (Left waveforms, Right digits) */
-        .monitor-body {
-            display: grid;
-            grid-template-columns: 1fr 240px;
-            flex: 1;
-            gap: 4px;
-            overflow: hidden;
-            margin: 4px 0;
-        }
-
-        /* Left Side: Waveform Channels */
-        .wave-channels {
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-            gap: 4px;
-            background: #000;
-        }
-
-        .wave-channel {
-            flex: 1;
-            position: relative;
-            background: #000;
-            border-bottom: 1px solid rgba(255,255,255,0.02);
-            display: flex;
-            flex-direction: column;
-            min-height: 0;
-        }
-
-        .channel-label {
-            position: absolute;
-            top: 4px;
-            left: 8px;
-            font-family: 'JetBrains Mono', monospace;
-            font-size: 11px;
-            font-weight: 700;
-            z-index: 10;
-        }
-
-        .channel-label.ecg { color: var(--ecg-color); }
-        .channel-label.spo2 { color: var(--spo2-color); }
-        .channel-label.resp { color: var(--resp-color); }
-
-        .wave-canvas-wrapper {
-            flex: 1;
-            position: relative;
-            min-height: 0;
-        }
-
-        .wave-canvas-wrapper canvas {
-            width: 100%;
-            height: 100%;
-            display: block;
-        }
-
-        /* Right Side: Numeric Vitals Blocks */
-        .digit-panels {
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-            gap: 4px;
-        }
-
-        .digit-panel {
-            flex: 1;
-            background: #080808;
-            border: 1px solid #111;
-            border-radius: 4px;
-            padding: 6px 12px;
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-            position: relative;
-            min-height: 0;
-        }
-
-        .digit-panel-header {
-            font-size: 10px;
-            font-weight: 700;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-        }
-
-        .digit-panel.ecg .digit-panel-header { color: var(--ecg-color); }
-        .digit-panel.spo2 .digit-panel-header { color: var(--spo2-color); }
-        .digit-panel.resp .digit-panel-header { color: var(--resp-color); }
-
-        .digit-panel-body {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            flex: 1;
-        }
-
-        .digit-value {
-            font-family: 'JetBrains Mono', monospace;
-            font-size: 72px;
-            font-weight: 800;
-            line-height: 0.9;
-        }
-
-        .digit-panel.ecg .digit-value { color: var(--ecg-color); }
-        .digit-panel.spo2 .digit-value { color: var(--spo2-color); }
-        .digit-panel.resp .digit-value { color: var(--resp-color); }
-
-        .digit-value.no-data {
-            font-size: 54px;
-            color: #333 !important;
-        }
-
-        .digit-sub-indicators {
-            display: flex;
-            flex-direction: column;
-            gap: 3px;
-            font-size: 9px;
-            font-weight: 600;
-            color: #aaa;
-        }
-
-        .digit-panel.ecg .digit-sub-indicators { color: var(--ecg-color); }
-        .digit-panel.spo2 .digit-sub-indicators { color: var(--spo2-color); }
-        .digit-panel.resp .digit-sub-indicators { color: var(--resp-color); }
-
-        /* Bottom Section: Measurements Grid */
-        .monitor-bottom {
-            display: grid;
-            grid-template-columns: 1fr 220px 240px;
-            gap: 4px;
-            height: 90px;
-            background: #000;
-        }
-
-        .bottom-card {
-            background: #080808;
-            border: 1px solid #111;
-            border-radius: 4px;
-            padding: 6px 10px;
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-            min-height: 0;
-        }
-
-        /* NIBP List */
-        .nibp-list-card {
-            font-family: 'JetBrains Mono', monospace;
-        }
-
-        .nibp-list-title {
-            font-size: 9px;
-            color: var(--nibp-color);
-            font-weight: 700;
-            margin-bottom: 4px;
-        }
-
-        .nibp-table {
-            width: 100%;
-            font-size: 9px;
-            border-collapse: collapse;
-            color: #fff;
-        }
-
-        .nibp-table th {
-            text-align: left;
-            color: #888;
-            padding-bottom: 2px;
-            font-weight: 600;
-        }
-
-        .nibp-table td {
-            padding: 1px 0;
-            color: #ffffff;
-        }
-
-        .nibp-table .time {
-            color: #888;
-        }
-
-        /* Temp Block */
-        .temp-card {
-            color: var(--temp-color);
-        }
-
-        .temp-title {
-            font-size: 9px;
-            font-weight: 700;
-        }
-
-        .temp-body {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            flex: 1;
-        }
-
-        .temp-value {
-            font-family: 'JetBrains Mono', monospace;
-            font-size: 38px;
-            font-weight: 800;
-            color: var(--temp-color);
-        }
-
-        .temp-details {
-            display: flex;
-            flex-direction: column;
-            gap: 2px;
-            font-size: 8px;
-            font-weight: 600;
-        }
-
-        .temp-limit-label {
-            font-size: 7px;
-            opacity: 0.6;
-        }
-
-        /* NIBP Panel (Right) */
-        .nibp-card {
-            color: var(--nibp-color);
-        }
-
-        .nibp-title {
-            font-size: 9px;
-            font-weight: 700;
-        }
-
-        .nibp-body {
-            display: flex;
-            align-items: baseline;
-            justify-content: space-between;
-            flex: 1;
-        }
-
-        .nibp-large-value {
-            font-family: 'JetBrains Mono', monospace;
-            font-size: 34px;
-            font-weight: 800;
-            color: #fff;
-        }
-
-        .nibp-map-value {
-            font-family: 'JetBrains Mono', monospace;
-            font-size: 18px;
-            font-weight: 700;
-            color: #aaa;
-            margin-left: 2px;
-        }
-
-        .nibp-info {
-            display: flex;
-            flex-direction: column;
-            gap: 2px;
-            font-size: 8px;
-            text-align: right;
-            color: #888;
-        }
-
-        /* Bottom Gray Buttons Panel */
-        .control-buttons-bar {
-            display: flex;
-            gap: 2px;
-            background: #222;
-            padding: 2px;
-            height: 38px;
-            border-top: 1px solid #111;
-        }
-
-        .ctrl-btn {
-            flex: 1;
-            background: #333;
-            border: none;
-            color: #eee;
-            font-family: 'Outfit', sans-serif;
-            font-size: 8px;
-            font-weight: 700;
-            cursor: pointer;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            gap: 2px;
-            border-radius: 2px;
-            transition: background 0.2s;
-            text-transform: uppercase;
-        }
-
-        .ctrl-btn:hover {
-            background: #444;
-        }
-
-        .ctrl-btn svg {
-            width: 12px;
-            height: 12px;
-            stroke: #aaa;
-            stroke-width: 2.5;
-            fill: none;
-        }
-
-        .ctrl-btn.orange {
-            background: #d97706;
-            color: #000;
-        }
-        .ctrl-btn.orange:hover {
-            background: #f59e0b;
-        }
-        .ctrl-btn.orange svg {
-            stroke: #000;
-        }
-
-        /* === Minimal/Clean Mode for Iframe (Electron) === */
-        body.minimal-mode {
-            padding: 0;
-            margin: 0;
-            background: #000;
-        }
-
-        body.minimal-mode .dev-trigger-zone,
-        body.minimal-mode .dev-controls,
-        body.minimal-mode .control-buttons-bar,
-        body.minimal-mode .monitor-header {
-            display: none !important;
-        }
-
-        body.minimal-mode .monitor-container {
-            padding: 2px;
-            height: 100vh;
-        }
-
-        body.minimal-mode .monitor-bottom {
-            height: 60px;
-        }
-
-        body.minimal-mode .nibp-large-value {
-            font-size: 26px;
-        }
-
-        body.minimal-mode .temp-value {
-            font-size: 28px;
-        }
-
-        body.minimal-mode .digit-value {
-            font-size: 48px;
-        }
-    </style>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Contec Vital Signs Monitor</title>
+<meta name="description" content="Real-time patient vital signs monitoring — Contec CMS8500">
+<link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@400;700;900&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+<style>
+*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
+
+:root{
+  --ecg-color:#00ff41;
+  --pleth-color:#00e5ff;
+  --resp-color:#ffb300;
+  --hr-color:#00ff41;
+  --spo2-color:#00e5ff;
+  --rr-color:#ffb300;
+  --nibp-color:#ff6b6b;
+  --temp-color:#ff9500;
+  --bg:#0a0e0a;
+  --panel:#111611;
+  --border:#1a2e1a;
+  --text:#e0ffe0;
+  --dim:#4a6a4a;
+}
+
+body{
+  font-family:'Share Tech Mono',monospace;
+  background:var(--bg);
+  color:var(--text);
+  height:100vh;
+  overflow:hidden;
+  display:flex;
+  flex-direction:column;
+}
+
+/* ── Verification Overlay ── */
+#verificationOverlay{
+  position:fixed;inset:0;z-index:1000;
+  background:rgba(0,0,0,0.92);
+  display:flex;align-items:center;justify-content:center;
+}
+.ver-card{
+  background:#0d1a0d;border:1px solid #1a3a1a;
+  border-radius:12px;padding:40px;text-align:center;max-width:420px;
+}
+.ver-card .icon{font-size:56px;margin-bottom:16px;}
+.ver-card h2{font-family:'Orbitron',sans-serif;font-size:18px;color:#00ff41;margin-bottom:10px;}
+.ver-card p{color:#4a6a4a;font-size:13px;line-height:1.6;}
+.spinner{
+  width:48px;height:48px;border:3px solid #1a3a1a;
+  border-top-color:#00ff41;border-radius:50%;
+  margin:0 auto 16px;animation:spin 1s linear infinite;
+}
+@keyframes spin{to{transform:rotate(360deg);}}
+
+/* ── Top Status Bar ── */
+#statusBar{
+  background:#050a05;
+  border-bottom:1px solid var(--border);
+  display:flex;align-items:center;justify-content:space-between;
+  padding:4px 12px;height:32px;flex-shrink:0;
+}
+.sb-left{display:flex;align-items:center;gap:16px;}
+.sb-patient{font-family:'Orbitron',sans-serif;font-size:11px;color:#00ff41;letter-spacing:1px;}
+.sb-device{font-size:11px;color:var(--dim);}
+.sb-right{display:flex;align-items:center;gap:16px;}
+.conn-dot{
+  width:8px;height:8px;border-radius:50%;background:#333;
+  display:inline-block;margin-right:4px;
+}
+.conn-dot.online{background:#00ff41;box-shadow:0 0 6px #00ff41;}
+.conn-dot.offline{background:#ff4444;box-shadow:0 0 6px #ff4444;}
+#clockDisplay{font-size:11px;color:#00ff41;font-family:'Orbitron',sans-serif;}
+
+/* ── Main Layout: waveforms left, params right ── */
+#monitorBody{
+  flex:1;display:flex;overflow:hidden;
+}
+
+/* ── Waveform Column ── */
+#waveformCol{
+  flex:1;display:flex;flex-direction:column;
+  border-right:1px solid var(--border);overflow:hidden;
+}
+
+.waveform-strip{
+  flex:1;position:relative;
+  border-bottom:1px solid var(--border);
+  overflow:hidden;
+}
+.waveform-strip:last-child{border-bottom:none;}
+
+.strip-label{
+  position:absolute;top:6px;left:10px;z-index:2;
+  font-family:'Orbitron',sans-serif;font-size:10px;
+  letter-spacing:2px;font-weight:700;
+}
+.strip-label.ecg{color:var(--ecg-color);}
+.strip-label.pleth{color:var(--pleth-color);}
+.strip-label.resp{color:var(--resp-color);}
+
+.strip-canvas{
+  position:absolute;inset:0;width:100%;height:100%;
+}
+
+/* ── Parameter Column ── */
+#paramCol{
+  width:220px;flex-shrink:0;
+  display:flex;flex-direction:column;
+  background:var(--panel);
+}
+
+.param-box{
+  flex:1;border-bottom:1px solid var(--border);
+  display:flex;flex-direction:column;
+  justify-content:center;padding:8px 14px;
+  position:relative;cursor:default;
+  transition:background 0.2s;
+}
+.param-box:last-child{border-bottom:none;}
+.param-box:hover{background:#151f15;}
+
+.param-label{
+  font-family:'Orbitron',sans-serif;
+  font-size:9px;letter-spacing:2px;font-weight:700;
+  margin-bottom:2px;
+}
+.param-value{
+  font-family:'Orbitron',sans-serif;
+  font-size:36px;font-weight:900;line-height:1;
+}
+.param-unit{font-size:11px;font-weight:400;margin-left:4px;opacity:0.7;}
+.param-sub{font-size:11px;color:var(--dim);margin-top:2px;}
+.param-badge{
+  position:absolute;top:8px;right:10px;
+  font-size:9px;padding:2px 6px;border-radius:3px;
+  border:1px solid;letter-spacing:1px;
+}
+.badge-ok{color:#00ff41;border-color:#00ff41;background:rgba(0,255,65,0.08);}
+.badge-warn{color:#ffb300;border-color:#ffb300;background:rgba(255,179,0,0.08);}
+.badge-off{color:#333;border-color:#333;background:transparent;}
+
+.hr-box .param-label{color:var(--hr-color);}
+.hr-box .param-value{color:var(--hr-color);text-shadow:0 0 20px rgba(0,255,65,0.5);}
+.spo2-box .param-label{color:var(--spo2-color);}
+.spo2-box .param-value{color:var(--spo2-color);text-shadow:0 0 20px rgba(0,229,255,0.5);}
+.rr-box .param-label{color:var(--rr-color);}
+.rr-box .param-value{color:var(--rr-color);text-shadow:0 0 20px rgba(255,179,0,0.4);}
+.nibp-box .param-label{color:var(--nibp-color);}
+.nibp-box .param-value{color:var(--nibp-color);font-size:26px;}
+.temp-box .param-label{color:var(--temp-color);}
+.temp-box .param-value{color:var(--temp-color);font-size:30px;}
+
+/* ── Scrolling waveform sweep line ── */
+.sweep-cursor{
+  position:absolute;top:0;bottom:0;width:2px;
+  background:rgba(0,0,0,0.7);pointer-events:none;z-index:3;
+}
+
+/* ── Minimal mode ── */
+body.minimal-mode #statusBar{display:none;}
+body.minimal-mode #monitorBody{height:100vh;}
+</style>
 </head>
 <body>
 
-    <!-- Retractable Dev Controls for configuring monitors/audio -->
-    <div class="dev-trigger-zone"></div>
-    <div class="dev-controls" id="devControls">
-        <div class="dev-pull-tab">DEV CONTROLS (HOVER)</div>
-        <div class="device-selector-container">
-            <label for="deviceSelector" style="font-size: 11px; color: #888; font-weight: 600;">Monitor:</label>
-            <select id="deviceSelector" class="device-select-dropdown" onchange="selectDevice(this.value)">
-                <option value="">Waiting...</option>
-            </select>
-        </div>
-        <div class="audio-toggle" id="audioToggle" onclick="toggleAudioAlert()" title="Toggle audio alerts">
-            <span id="audioIcon">🔇</span>
-            <span id="audioText">Alerts Off</span>
-        </div>
-        <div class="connection-badge offline" id="connectionBadge">
-            <span id="connectionText">Offline</span>
-        </div>
-        <div style="font-size: 10px; color: #888;">
-            IP: <strong id="detectedIp" style="color: #fff;">...</strong>
-        </div>
+<!-- Verification Overlay -->
+<div id="verificationOverlay">
+  <div class="ver-card" id="verCard">
+    <div class="spinner" id="verSpinner"></div>
+    <h2 id="verTitle">CONNECTING</h2>
+    <p id="verMsg">Verifying patient identity against monitor records…</p>
+  </div>
+</div>
+
+<!-- Status Bar -->
+<div id="statusBar">
+  <div class="sb-left">
+    <span class="sb-patient" id="sbPatient">— PATIENT —</span>
+    <span class="sb-device" id="sbDevice">No device</span>
+  </div>
+  <div class="sb-right">
+    <span><span class="conn-dot offline" id="connDot"></span><span id="connText" style="font-size:11px;color:#4a6a4a;">OFFLINE</span></span>
+    <span id="clockDisplay">--:--:--</span>
+  </div>
+</div>
+
+<!-- Monitor Body -->
+<div id="monitorBody">
+
+  <!-- Waveform strips -->
+  <div id="waveformCol">
+    <div class="waveform-strip" id="strip-ecg">
+      <div class="strip-label ecg">I ECG</div>
+      <canvas class="strip-canvas" id="canvas-ecg"></canvas>
+    </div>
+    <div class="waveform-strip" id="strip-pleth">
+      <div class="strip-label pleth">PLETH</div>
+      <canvas class="strip-canvas" id="canvas-pleth"></canvas>
+    </div>
+    <div class="waveform-strip" id="strip-resp">
+      <div class="strip-label resp">RESP</div>
+      <canvas class="strip-canvas" id="canvas-resp"></canvas>
+    </div>
+  </div>
+
+  <!-- Parameter panel -->
+  <div id="paramCol">
+
+    <div class="param-box hr-box">
+      <div class="param-label">HEART RATE</div>
+      <div class="param-value" id="val-hr">---<span class="param-unit">bpm</span></div>
+      <div class="param-sub">ECG Lead I</div>
+      <div class="param-badge badge-off" id="badge-hr">WAIT</div>
     </div>
 
-    <!-- Patient Verification Overlay -->
-    <div id="verificationOverlay" class="verification-overlay" style="display: none;">
-        <div class="error-card" id="verificationCard">
-            <div class="error-icon" id="verificationIcon">🔒</div>
-            <h2 id="verificationTitle">Patient Verification Required</h2>
-            <p id="verificationMsg">Access restricted. Telemetry is only displayed when patient MRN is fully verified against the monitor configuration.</p>
-        </div>
+    <div class="param-box spo2-box">
+      <div class="param-label">SpO₂</div>
+      <div class="param-value" id="val-spo2">---<span class="param-unit">%</span></div>
+      <div class="param-sub" id="sub-spo2">Pleth waveform</div>
+      <div class="param-badge badge-off" id="badge-spo2">WAIT</div>
     </div>
 
-    <!-- CMS8500 Monitor Simulation Container -->
-    <div class="monitor-container">
-        
-        <!-- Top Status Bar -->
-        <header class="monitor-header">
-            <div class="patient-banner-info">
-                <span class="gender-badge" id="bannerGender">M</span>
-                <span id="bannerPatientBed">01 Adu 1Bed</span>
-                <strong id="bannerPatientName" style="color: #fff;">Shahil Kumar</strong>
-            </div>
-            
-            <div class="alarm-notifications">
-                <span class="alarm-badge blue" id="alarmNibp">*NIBP Loose Cuff</span>
-                <span class="alarm-badge blue" id="alarmT2">*T2 Sensor Off</span>
-                <span class="alarm-badge yellow" id="alarmT1">**T1 Too Low</span>
-            </div>
-            
-            <div class="system-status-icons">
-                <span style="font-size: 11px;">🔋 📶 🔊</span>
-                <span class="clock" id="timeDisplay">12:56:17</span>
-            </div>
-        </header>
-
-        <!-- Main Screen Grid: Waveforms + Digits -->
-        <div class="monitor-body">
-            
-            <!-- Left Waveform Traces -->
-            <div class="wave-channels">
-                <!-- ECG Lead II -->
-                <div class="wave-channel">
-                    <div class="channel-label ecg">II &nbsp; X1 &nbsp; Monitor &nbsp; Notch Off</div>
-                    <div class="wave-canvas-wrapper">
-                        <canvas id="waveform-ecg2"></canvas>
-                    </div>
-                </div>
-                
-                <!-- ECG Lead I -->
-                <div class="wave-channel">
-                    <div class="channel-label ecg">I &nbsp; X1</div>
-                    <div class="wave-canvas-wrapper">
-                        <canvas id="waveform-ecg1"></canvas>
-                    </div>
-                </div>
-                
-                <!-- SpO2 Pleth -->
-                <div class="wave-channel">
-                    <div class="channel-label spo2">Pleth</div>
-                    <div class="wave-canvas-wrapper">
-                        <canvas id="waveform-pleth"></canvas>
-                    </div>
-                </div>
-                
-                <!-- Respiration -->
-                <div class="wave-channel">
-                    <div class="channel-label resp">Resp &nbsp; X2 &nbsp; II</div>
-                    <div class="wave-canvas-wrapper">
-                        <canvas id="waveform-resp"></canvas>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Right Digit Displays -->
-            <div class="digit-panels">
-                <!-- ECG panel -->
-                <div class="digit-panel ecg">
-                    <div class="digit-panel-header">ECG <span style="font-size: 8px;">bpm</span></div>
-                    <div class="digit-panel-body">
-                        <div class="digit-value no-data" id="value-hr">---</div>
-                        <div class="digit-sub-indicators">
-                            <div>ST-II Off</div>
-                            <div>PVCs --</div>
-                        </div>
-                    </div>
-                </div>
-                
-                <!-- SpO2 panel -->
-                <div class="digit-panel spo2">
-                    <div class="digit-panel-header">SpO₂ <span style="font-size: 8px;">%</span></div>
-                    <div class="digit-panel-body">
-                        <div class="digit-value no-data" id="value-spo2">---</div>
-                        <div class="digit-sub-indicators">
-                            <div>PR bpm <span id="value-pr">--</span></div>
-                            <div>PI % <span id="value-pi">3.70</span></div>
-                        </div>
-                    </div>
-                </div>
-                
-                <!-- Resp panel -->
-                <div class="digit-panel resp">
-                    <div class="digit-panel-header">Resp <span style="font-size: 8px;">rpm</span></div>
-                    <div class="digit-panel-body">
-                        <div class="digit-value no-data" id="value-rr">---</div>
-                        <div class="digit-sub-indicators">
-                            <div style="font-size: 12px; margin-top: 10px;">⚡⚡⚡</div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!-- Bottom Measurement Panel -->
-        <div class="monitor-bottom">
-            <!-- NIBP List (Left) -->
-            <div class="bottom-card nibp-list-card">
-                <div class="nibp-list-title">NIBP List <span style="font-size: 7px; color: #888;">mmHg</span></div>
-                <table class="nibp-table" id="nibpTable">
-                    <thead>
-                        <tr>
-                            <th>SYS/DIA</th>
-                            <th>MAP</th>
-                            <th>PR</th>
-                            <th>Time</th>
-                        </tr>
-                    </thead>
-                    <tbody id="nibpTableBody">
-                        <tr>
-                            <td>125/80</td>
-                            <td>99</td>
-                            <td>92</td>
-                            <td class="time">12:54:49</td>
-                        </tr>
-                        <tr>
-                            <td>133/76</td>
-                            <td>89</td>
-                            <td>97</td>
-                            <td class="time">12:30:31</td>
-                        </tr>
-                        <tr>
-                            <td>141/76</td>
-                            <td>91</td>
-                            <td>100</td>
-                            <td class="time">12:21:43</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <!-- Temperature Panel (Center) -->
-            <div class="bottom-card temp-card">
-                <div class="temp-title">Temp <span style="font-size: 7px; color: #888;">°C</span></div>
-                <div class="temp-body">
-                    <div class="temp-value" id="value-temp">30.5</div>
-                    <div class="temp-details">
-                        <div>T1: <span id="value-t1">30.5</span></div>
-                        <div>T2: ---</div>
-                        <div>TD: ---</div>
-                        <div class="temp-limit-label">38.0 / 35.0</div>
-                    </div>
-                </div>
-            </div>
-
-            <!-- NIBP Panel (Right) -->
-            <div class="bottom-card nibp-card">
-                <div class="nibp-title" id="nibpTimeTitle">NIBP mmHg @12:54</div>
-                <div class="nibp-body">
-                    <div>
-                        <span class="nibp-large-value" id="value-nibp">125/80</span>
-                        <span class="nibp-map-value" id="value-nibp-map">(99)</span>
-                    </div>
-                    <div class="nibp-info">
-                        <div>Auto Measuring</div>
-                        <div style="font-size: 6px; margin-top: 2px;">3min43s &nbsp; 15min</div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!-- Bottom Gray Control Panel Buttons -->
-        <footer class="control-buttons-bar">
-            <button class="ctrl-btn">
-                <svg viewBox="0 0 24 24"><path d="M4 12h16M4 6h16M4 18h16" stroke="currentColor"/></svg>
-                More
-            </button>
-            <button class="ctrl-btn orange" onclick="toggleAudioAlert()">
-                <svg viewBox="0 0 24 24"><path d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" stroke="currentColor"/></svg>
-                Alarm Reset
-            </button>
-            <button class="ctrl-btn">
-                <svg viewBox="0 0 24 24"><path d="M15.75 5.25v13.5m-7.5-13.5v13.5" stroke="currentColor"/></svg>
-                Alarm Pause
-            </button>
-            <button class="ctrl-btn" onclick="simulateNibpMeasurement()">
-                <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="currentColor"/></svg>
-                NIBP Measure
-            </button>
-            <button class="ctrl-btn">
-                <svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor"/></svg>
-                Stop All
-            </button>
-            <button class="ctrl-btn">
-                <svg viewBox="0 0 24 24"><path d="M12 2v20M2 12h20" stroke="currentColor"/></svg>
-                Zero IBP
-            </button>
-            <button class="ctrl-btn">
-                <svg viewBox="0 0 24 24"><path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" stroke="currentColor"/></svg>
-                Review
-            </button>
-            <button class="ctrl-btn">
-                <svg viewBox="0 0 24 24"><path d="M18.36 6.64a9 9 0 11-12.73 0M12 2v10" stroke="currentColor"/></svg>
-                Standby
-            </button>
-            <button class="ctrl-btn">
-                <svg viewBox="0 0 24 24"><rect x="2" y="3" width="20" height="14" rx="2" stroke="currentColor"/><path d="M8 21h8M12 17v4" stroke="currentColor"/></svg>
-                Display Setup
-            </button>
-            <button class="ctrl-btn">
-                <svg viewBox="0 0 24 24"><path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" stroke="currentColor"/></svg>
-                Patient Setup
-            </button>
-            <button class="ctrl-btn">
-                <svg viewBox="0 0 24 24"><path d="M12 8v4l3 3" stroke="currentColor"/></svg>
-                Manual Event
-            </button>
-            <button class="ctrl-btn">
-                <svg viewBox="0 0 24 24"><path d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4" stroke="currentColor"/></svg>
-                Print
-            </button>
-            <button class="ctrl-btn">
-                <svg viewBox="0 0 24 24"><path d="M15.536 8.464a5 5 0 010 7.072M18.364 5.636a9 9 0 010 12.728M12 18.75V5.25L7.75 9.5H4.5v5h3.25L12 18.75z" stroke="currentColor"/></svg>
-                Volume Setup
-            </button>
-            <button class="ctrl-btn">
-                <svg viewBox="0 0 24 24"><path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" stroke="currentColor"/></svg>
-                Main Menu
-            </button>
-        </footer>
+    <div class="param-box rr-box">
+      <div class="param-label">RESP RATE</div>
+      <div class="param-value" id="val-rr">---<span class="param-unit">/min</span></div>
+      <div class="param-sub">Thoracic impedance</div>
+      <div class="param-badge badge-off" id="badge-rr">WAIT</div>
     </div>
 
-    <script>
-        // === Configuration ===
-        const API_BASE = window.location.origin + '/api';
-        const POLL_INTERVAL = 2000;
-        const WS_URL = `${window.location.protocol === 'https:' ? 'wss:' : 'ws:'}//${window.location.host}/ws/vitals`;
+    <div class="param-box nibp-box">
+      <div class="param-label">NIBP</div>
+      <div class="param-value" id="val-nibp">---<span class="param-unit">mmHg</span></div>
+      <div class="param-sub" id="sub-nibp">Sys / Dia (MAP)</div>
+      <div class="param-badge badge-off" id="badge-nibp">WAIT</div>
+    </div>
 
-        // === State ===
-        let lastReadingId = null;
-        let readingCount = 0;
-        
-        // Circular Waveform Buffers (1000 virtual index points)
-        const WAVE_BUFFER_SIZE = 1000;
-        const waveBuffers = {
-            ecg2: new Float32Array(WAVE_BUFFER_SIZE),
-            ecg1: new Float32Array(WAVE_BUFFER_SIZE),
-            pleth: new Float32Array(WAVE_BUFFER_SIZE),
-            resp: new Float32Array(WAVE_BUFFER_SIZE)
-        };
-        
-        let scanIndex = 0;
-        let ecgPhase = 0;
-        let plethPhase = 0;
-        let respPhase = 0;
+    <div class="param-box temp-box">
+      <div class="param-label">TEMP</div>
+      <div class="param-value" id="val-temp">---<span class="param-unit">°C</span></div>
+      <div class="param-sub">Body temperature</div>
+      <div class="param-badge badge-off" id="badge-temp">WAIT</div>
+    </div>
 
-        let activeDevices = [];
-        let selectedDeviceId = localStorage.getItem('selectedDeviceId') || '';
-        let isMatchingMode = false;
-        let matchParams = {};
-        let useWebSocket = false;
-        let ws = null;
-        let audioAlertEnabled = false;
-        let audioContext = null;
-        let hasReceivedData = false;
+  </div>
+</div>
 
-        // Numeric values synced from monitor
-        let currentHR = null;
-        let currentSpO2 = null;
-        let currentRR = null;
-        let currentTemp = 30.5;
+<script>
+// ════════════════════════════════════════════════════
+//  CONFIG
+// ════════════════════════════════════════════════════
+const params = new URLSearchParams(location.search);
+const MRN      = params.get('mrn') || '';
+const isMinimal = params.get('minimal') === 'true' || params.get('view') === 'minimal';
+const DEVICE_PARAM = params.get('device') || '';
 
-        // Waveform canvas context cache
-        const canvases = {};
+if (isMinimal) document.body.classList.add('minimal-mode');
 
-        // === procedural Waveform Functions ===
-        
-        function getECGValue(phase) {
-            const p = phase % 1.0;
-            let v = 0;
-            if (p < 0.1) {
-                // P wave
-                v = 0.08 * Math.sin((p / 0.1) * Math.PI);
-            } else if (p < 0.15) {
-                v = 0;
-            } else if (p < 0.17) {
-                // Q wave
-                v = -0.06 * Math.sin(((p - 0.15) / 0.02) * Math.PI);
-            } else if (p < 0.20) {
-                // R wave (sharp peak)
-                v = 0.85 * Math.sin(((p - 0.17) / 0.03) * Math.PI);
-            } else if (p < 0.23) {
-                // S wave (deep dip)
-                v = -0.22 * Math.sin(((p - 0.20) / 0.03) * Math.PI);
-            } else if (p < 0.32) {
-                v = 0;
-            } else if (p < 0.48) {
-                // T wave
-                v = 0.18 * Math.sin(((p - 0.32) / 0.16) * Math.PI);
-            } else {
-                v = 0;
-            }
-            // Add light high-frequency noise
-            return v + (Math.random() - 0.5) * 0.015;
-        }
+// ════════════════════════════════════════════════════
+//  CLOCK
+// ════════════════════════════════════════════════════
+function updateClock(){
+  const n = new Date();
+  document.getElementById('clockDisplay').textContent =
+    n.toLocaleTimeString('en-GB',{hour12:false});
+}
+setInterval(updateClock, 1000);
+updateClock();
 
-        function getECG1Value(phase) {
-            const p = phase % 1.0;
-            let v = 0;
-            if (p < 0.1) {
-                v = 0.05 * Math.sin((p / 0.1) * Math.PI);
-            } else if (p < 0.16) {
-                v = 0;
-            } else if (p < 0.18) {
-                v = -0.04 * Math.sin(((p - 0.16) / 0.02) * Math.PI);
-            } else if (p < 0.21) {
-                v = 0.65 * Math.sin(((p - 0.18) / 0.03) * Math.PI);
-            } else if (p < 0.24) {
-                v = -0.15 * Math.sin(((p - 0.21) / 0.03) * Math.PI);
-            } else if (p < 0.33) {
-                v = 0;
-            } else if (p < 0.50) {
-                v = 0.22 * Math.sin(((p - 0.33) / 0.17) * Math.PI);
-            } else {
-                v = 0;
-            }
-            return v + (Math.random() - 0.5) * 0.015;
-        }
+// ════════════════════════════════════════════════════
+//  CANVAS WAVEFORM ENGINE
+//  Continuous right-to-left scrolling sweep
+// ════════════════════════════════════════════════════
+class WaveformTrack {
+  constructor(canvasId, color, baseline=0.5, amplitude=0.38) {
+    this.canvas = document.getElementById(canvasId);
+    this.ctx    = this.canvas.getContext('2d');
+    this.color  = color;
+    this.baseline  = baseline;   // 0..1 from top
+    this.amplitude = amplitude;  // fraction of height
+    this.samples   = [];         // raw 0-255 bytes from monitor
+    this.drawBuf   = [];         // processed display values (0..1 Y position)
+    this.MAX_DRAW  = 600;        // max points in draw buffer
+    this.sweepPos  = 0;          // current write head X pixel
+    this.lastWidth = 0;
+    this.lastHeight= 0;
+    this.animating  = false;
+    this.synthPhase = 0;
+    this.synthType  = 'flat';
+    this.rrValue    = null;
+  }
 
-        function getPlethValue(phase) {
-            const p = phase % 1.0;
-            let v = 0;
-            if (p < 0.22) {
-                // Systolic rise
-                v = 0.8 * Math.sin((p / 0.22) * Math.PI / 2);
-            } else if (p < 0.42) {
-                // Diastolic fall
-                v = 0.8 - 0.45 * Math.sin(((p - 0.22) / 0.20) * Math.PI / 2);
-            } else if (p < 0.47) {
-                // Notch
-                const np = (p - 0.42) / 0.05;
-                v = 0.35 - 0.05 * Math.sin(np * Math.PI);
-            } else if (p < 0.62) {
-                // Diastolic peak
-                const dp = (p - 0.47) / 0.15;
-                v = 0.35 + 0.10 * Math.sin(dp * Math.PI);
-            } else {
-                // Decay
-                const dp = (p - 0.62) / 0.38;
-                v = 0.45 * Math.exp(-dp * 3.0);
-            }
-            return v + (Math.random() - 0.5) * 0.008;
-        }
+  resize() {
+    const w = this.canvas.offsetWidth;
+    const h = this.canvas.offsetHeight;
+    if (w !== this.lastWidth || h !== this.lastHeight) {
+      this.canvas.width  = w;
+      this.canvas.height = h;
+      this.lastWidth = w; this.lastHeight = h;
+      this.drawBuf = new Array(w).fill(null);
+      this.sweepPos = 0;
+    }
+  }
 
-        function getRespValue(phase) {
-            const p = phase % 1.0;
-            return 0.5 + 0.4 * Math.sin(p * Math.PI * 2) + (Math.random() - 0.5) * 0.005;
-        }
+  // Push raw byte samples (0-255) from monitor packet
+  pushSamples(arr) {
+    if (!arr || arr.length === 0) return;
+    // normalise 0-255 → 0..1 Y position (inverted: 0=top)
+    for (const s of arr) {
+      const norm = (255 - s) / 255;                     // flip: high byte = up
+      const y    = this.baseline + (norm - 0.5) * this.amplitude * 2;
+      this.samples.push(Math.max(0.02, Math.min(0.98, y)));
+    }
+  }
 
-        // === Canvas Initialization ===
-        function initCanvases() {
-            const keys = ['ecg2', 'ecg1', 'pleth', 'resp'];
-            keys.forEach(k => {
-                const c = document.getElementById(`waveform-${k}`);
-                if (c) {
-                    const ctx = c.getContext('2d');
-                    const rect = c.parentElement.getBoundingClientRect();
-                    
-                    // High-DPI scaling
-                    c.width = rect.width * 2;
-                    c.height = rect.height * 2;
-                    ctx.scale(2, 2);
-                    
-                    canvases[k] = {
-                        canvas: c,
-                        ctx: ctx,
-                        width: rect.width,
-                        height: rect.height
-                    };
-                }
-            });
-        }
+  // Drain one sample into draw buffer at sweepPos
+  tick() {
+    const w = this.canvas.width;
+    const h = this.canvas.height;
+    if (!w || !h) return;
 
-        // === Patient Credentials Matching ===
-        async function verifyPatientMatch() {
-            const overlay = document.getElementById('verificationOverlay');
-            const icon = document.getElementById('verificationIcon');
-            const title = document.getElementById('verificationTitle');
-            const msg = document.getElementById('verificationMsg');
+    // blank 6px ahead of sweep cursor
+    const eraseW = 8;
+    for (let e = 0; e < eraseW; e++) {
+      const ex = (this.sweepPos + e) % w;
+      if (this.drawBuf[ex] !== undefined) this.drawBuf[ex] = null;
+    }
 
-            try {
-                const query = new URLSearchParams(matchParams).toString();
-                const response = await fetch(`${API_BASE}/match-patient?${query}`);
-                if (!response.ok) throw new Error('Match verification API error');
+    let yNorm;
+    if (this.samples.length > 0) {
+      yNorm = this.samples.shift();
+    } else {
+      // synthetic fallback
+      yNorm = this._synth();
+    }
+    this.drawBuf[this.sweepPos] = yNorm;
+    this.sweepPos = (this.sweepPos + 1) % w;
+  }
 
-                const data = await response.json();
-                if (data.matched) {
-                    if (data.device_id) {
-                        overlay.style.display = 'none';
-                        if (selectedDeviceId !== data.device_id) {
-                            selectedDeviceId = data.device_id;
-                            clearVitalsDisplay();
-                        }
-                    } else {
-                        overlay.style.display = 'flex';
-                        overlay.className = 'verification-overlay loading';
-                        icon.textContent = '⏳';
-                        title.textContent = 'Connecting Monitor...';
-                        msg.textContent = `Patient verified. Waiting for monitor to start transmitting...`;
-                        selectedDeviceId = '';
-                        clearVitalsDisplay();
-                    }
-                } else {
-                    overlay.style.display = 'flex';
-                    overlay.className = 'verification-overlay';
-                    icon.textContent = '❌';
-                    title.textContent = 'Access Restricted';
-                    msg.textContent = data.reason || 'This patient record does not match the active monitor configuration.';
-                    selectedDeviceId = '';
-                    clearVitalsDisplay();
-                }
-            } catch (e) {
-                console.error("Match verification failed:", e);
-                overlay.style.display = 'flex';
-                overlay.className = 'verification-overlay loading';
-                icon.textContent = '🔄';
-                title.textContent = 'Verification Server Offline';
-                msg.textContent = 'Retrying verification match...';
-            }
-        }
+  _synth() {
+    this.synthPhase += 0.05;
+    const t = this.synthPhase;
+    if (this.synthType === 'ecg') {
+      const p = (t % (Math.PI * 2)) / (Math.PI * 2);
+      if (p > 0.35 && p < 0.38) return this.baseline - 0.32;
+      if (p > 0.38 && p < 0.42) return this.baseline + 0.12;
+      return this.baseline + Math.sin(t * 0.3) * 0.02;
+    } else if (this.synthType === 'pleth') {
+      return this.baseline + Math.sin(t * 0.8) * 0.28;
+    } else if (this.synthType === 'resp') {
+      const rr = this.rrValue || 15;
+      const speed = rr / 60 * 0.025;
+      return this.baseline + Math.sin(this.synthPhase * speed * 20) * 0.22;
+    }
+    return this.baseline; // flat
+  }
 
-        // === WebSocket Connection ===
-        function tryWebSocket() {
-            try {
-                ws = new WebSocket(WS_URL);
-                ws.onopen = () => {
-                    useWebSocket = true;
-                    updateConnectionBadge('connected', 'Live');
-                };
-                ws.onmessage = (event) => {
-                    const data = JSON.parse(event.data);
-                    if (!selectedDeviceId && data.device_id && !isMatchingMode) {
-                        selectDevice(data.device_id);
-                    }
-                    if (data.device_id && data.device_id === selectedDeviceId) {
-                        updateVitals(data);
-                    }
-                    if (!isMatchingMode) {
-                        fetchDevices();
-                    }
-                };
-                ws.onclose = () => {
-                    useWebSocket = false;
-                    updateConnectionBadge('polling', 'Polling');
-                    setTimeout(tryWebSocket, 5000);
-                };
-                ws.onerror = () => {
-                    useWebSocket = false;
-                };
-            } catch (e) {
-                useWebSocket = false;
-            }
-        }
+  draw() {
+    const ctx = this.ctx;
+    const w   = this.canvas.width;
+    const h   = this.canvas.height;
+    if (!w || !h) return;
 
-        function updateConnectionBadge(status, text) {
-            const badge = document.getElementById('connectionBadge');
-            badge.textContent = text;
-            badge.className = 'connection-badge ' + (status === 'connected' ? '' : 'warning');
-        }
+    // Clear
+    ctx.clearRect(0, 0, w, h);
 
-        // === Polling Fallback ===
-        function startPolling() {
-            fetchLatestReadings();
-            setInterval(fetchLatestReadings, POLL_INTERVAL);
-        }
+    // Grid lines (subtle)
+    ctx.strokeStyle = 'rgba(255,255,255,0.04)';
+    ctx.lineWidth = 1;
+    for (let x = 0; x < w; x += 50) {
+      ctx.beginPath(); ctx.moveTo(x,0); ctx.lineTo(x,h); ctx.stroke();
+    }
+    for (let y = 0; y < h; y += h/4) {
+      ctx.beginPath(); ctx.moveTo(0,y); ctx.lineTo(w,y); ctx.stroke();
+    }
 
-        async function fetchLatestReadings() {
-            if (isMatchingMode && !selectedDeviceId) return;
-            try {
-                const url = selectedDeviceId
-                    ? `${API_BASE}/latest-readings?device_id=${encodeURIComponent(selectedDeviceId)}&limit=1`
-                    : `${API_BASE}/latest-readings?limit=1`;
-                const response = await fetch(url);
-                if (!response.ok) throw new Error('API error');
+    // Waveform
+    ctx.beginPath();
+    ctx.strokeStyle = this.color;
+    ctx.lineWidth = 1.8;
+    ctx.shadowColor = this.color;
+    ctx.shadowBlur = 6;
 
-                const readings = await response.json();
-                if (readings.length > 0) {
-                    const latest = readings[0];
-                    if (latest.id !== lastReadingId) {
-                        lastReadingId = latest.id;
-                        readingCount++;
-                        updateVitals(latest);
-                    }
-                }
-            } catch (e) {
-                console.error("Polling error:", e);
-            }
-        }
+    let started = false;
+    for (let x = 0; x < w; x++) {
+      const idx = (this.sweepPos + x) % w;
+      const yNorm = this.drawBuf[idx];
+      if (yNorm === null || yNorm === undefined) {
+        started = false; continue;
+      }
+      const px = x;
+      const py = yNorm * h;
+      if (!started) { ctx.moveTo(px, py); started = true; }
+      else           { ctx.lineTo(px, py); }
+    }
+    ctx.stroke();
+    ctx.shadowBlur = 0;
 
-        // === Update Vital Values ===
-        function updateVitals(data) {
-            hasReceivedData = true;
+    // Sweep cursor (black erase bar)
+    ctx.fillStyle = 'rgba(10,14,10,0.85)';
+    ctx.fillRect(((this.sweepPos + w - 4) % w), 0, 6, h);
+  }
+}
 
-            // Heart Rate
-            currentHR = data.heart_rate;
-            const hrVal = document.getElementById('value-hr');
-            if (currentHR !== null && currentHR !== undefined) {
-                hrVal.textContent = Math.round(currentHR);
-                hrVal.classList.remove('no-data');
-                document.getElementById('value-pr').textContent = Math.round(currentHR);
-            } else {
-                hrVal.textContent = '---';
-                hrVal.classList.add('no-data');
-                document.getElementById('value-pr').textContent = '--';
-            }
+// ════════════════════════════════════════════════════
+//  TRACKS
+// ════════════════════════════════════════════════════
+const ecgTrack   = new WaveformTrack('canvas-ecg',  '#00ff41', 0.5, 0.42);
+const plethTrack = new WaveformTrack('canvas-pleth','#00e5ff', 0.5, 0.38);
+const respTrack  = new WaveformTrack('canvas-resp', '#ffb300', 0.5, 0.30);
 
-            // SpO2
-            currentSpO2 = data.spo2;
-            const spo2Val = document.getElementById('value-spo2');
-            if (currentSpO2 !== null && currentSpO2 !== undefined) {
-                spo2Val.textContent = Math.round(currentSpO2);
-                spo2Val.classList.remove('no-data');
-            } else {
-                spo2Val.textContent = '---';
-                spo2Val.classList.add('no-data');
-            }
+ecgTrack.synthType   = 'ecg';
+plethTrack.synthType = 'pleth';
+respTrack.synthType  = 'resp';
 
-            // Resp Rate
-            currentRR = data.respiratory_rate;
-            const rrVal = document.getElementById('value-rr');
-            if (currentRR !== null && currentRR !== undefined) {
-                rrVal.textContent = Math.round(currentRR);
-                rrVal.classList.remove('no-data');
-            } else {
-                rrVal.textContent = '---';
-                rrVal.classList.add('no-data');
-            }
+// Resize observer
+const ro = new ResizeObserver(() => {
+  ecgTrack.resize(); plethTrack.resize(); respTrack.resize();
+});
+ro.observe(document.getElementById('waveformCol'));
 
-            // Temperature
-            if (data.temperature !== null && data.temperature !== undefined) {
-                currentTemp = data.temperature;
-                document.getElementById('value-temp').textContent = currentTemp.toFixed(1);
-                document.getElementById('value-t1').textContent = currentTemp.toFixed(1);
-            }
+// Animation loop
+const TICKS_PER_FRAME = 3; // speed of sweep
+function loop() {
+  ecgTrack.resize(); plethTrack.resize(); respTrack.resize();
+  for (let i=0;i<TICKS_PER_FRAME;i++){
+    ecgTrack.tick(); plethTrack.tick(); respTrack.tick();
+  }
+  ecgTrack.draw(); plethTrack.draw(); respTrack.draw();
+  requestAnimationFrame(loop);
+}
+requestAnimationFrame(loop);
 
-            // Blood pressure
-            if (data.systolic_bp !== null && data.systolic_bp !== undefined) {
-                const sys = Math.round(data.systolic_bp);
-                const dia = data.diastolic_bp !== null ? Math.round(data.diastolic_bp) : '--';
-                const mapVal = data.map_bp !== null ? Math.round(data.map_bp) : Math.round(sys*0.33 + dia*0.67);
-                
-                document.getElementById('value-nibp').textContent = `${sys}/${dia}`;
-                document.getElementById('value-nibp-map').textContent = `(${mapVal})`;
-                
-                const now = new Date();
-                const timeStr = now.toLocaleTimeString('en-US', { hour12: false });
-                document.getElementById('nibpTimeTitle').textContent = `NIBP mmHg @${timeStr.slice(0, 5)}`;
-                
-                // Add to NIBP table log
-                addNibpTableRow(`${sys}/${dia}`, mapVal, currentHR ? Math.round(currentHR) : 92, timeStr);
-            }
+// ════════════════════════════════════════════════════
+//  PARAM UPDATE
+// ════════════════════════════════════════════════════
+function setParam(id, value, unit, badgeId, lo, hi) {
+  const el = document.getElementById(id);
+  if (!el) return;
+  if (value === null || value === undefined) {
+    el.innerHTML = `---<span class="param-unit">${unit}</span>`;
+    const b = document.getElementById(badgeId);
+    if (b){ b.textContent='WAIT'; b.className='param-badge badge-off'; }
+    return;
+  }
+  const v = parseFloat(value);
+  el.innerHTML = `${Number.isInteger(v)?v:v.toFixed(1)}<span class="param-unit">${unit}</span>`;
+  const b = document.getElementById(badgeId);
+  if (b) {
+    if (v >= lo && v <= hi){ b.textContent='NML'; b.className='param-badge badge-ok'; }
+    else                   { b.textContent='WARN'; b.className='param-badge badge-warn'; }
+  }
+}
 
-            // Update Header Name
-            if (data.patient_name) {
-                document.getElementById('bannerPatientName').textContent = data.patient_name;
-            }
-            if (data.patient_gender) {
-                const genderBadge = document.getElementById('bannerGender');
-                genderBadge.textContent = data.patient_gender.slice(0, 1).toUpperCase();
-                genderBadge.style.background = genderBadge.textContent === 'F' ? '#db2777' : '#0044bb';
-            }
-        }
+function updateParams(d) {
+  setParam('val-hr',   d.heart_rate,       'bpm',  'badge-hr',   60, 100);
+  setParam('val-spo2', d.spo2,             '%',    'badge-spo2', 95, 100);
+  setParam('val-rr',   d.respiratory_rate, '/min', 'badge-rr',   12, 20);
+  setParam('val-temp', d.temperature,      '°C',   'badge-temp', 36, 38.5);
 
-        // Add dynamically a row to NIBP log
-        function addNibpTableRow(sysDia, map, pr, time) {
-            const body = document.getElementById('nibpTableBody');
-            const row = document.createElement('tr');
-            row.innerHTML = `
-                <td>${sysDia}</td>
-                <td>${map}</td>
-                <td>${pr}</td>
-                <td class="time">${time}</td>
-            `;
-            // Insert at the top
-            body.insertBefore(row, body.firstChild);
-            // Keep maximum 3 rows
-            if (body.children.length > 3) {
-                body.removeChild(body.lastChild);
-            }
-        }
+  if (d.systolic_bp != null) {
+    const v = `${Math.round(d.systolic_bp)}/${Math.round(d.diastolic_bp||0)}`;
+    const m = d.map_bp ? ` (${Math.round(d.map_bp)})` : '';
+    document.getElementById('val-nibp').innerHTML =
+      `${v}<span class="param-unit">mmHg</span>`;
+    document.getElementById('sub-nibp').textContent = `MAP${m}`;
+    const b = document.getElementById('badge-nibp');
+    const ok = d.systolic_bp>=90&&d.systolic_bp<=140;
+    b.textContent = ok ? 'NML' : 'WARN';
+    b.className   = 'param-badge ' + (ok ? 'badge-ok' : 'badge-warn');
+  }
 
-        function simulateNibpMeasurement() {
-            // Replicate NIBP measure action
-            const sys = Math.round(110 + Math.random() * 25);
-            const dia = Math.round(70 + Math.random() * 15);
-            const map = Math.round(sys * 0.33 + dia * 0.67);
-            const pr = currentHR ? Math.round(currentHR) : Math.round(80 + Math.random() * 20);
-            const now = new Date();
-            const timeStr = now.toLocaleTimeString('en-US', { hour12: false });
-            
-            document.getElementById('value-nibp').textContent = `${sys}/${dia}`;
-            document.getElementById('value-nibp-map').textContent = `(${map})`;
-            document.getElementById('nibpTimeTitle').textContent = `NIBP mmHg @${timeStr.slice(0, 5)}`;
-            addNibpTableRow(`${sys}/${dia}`, map, pr, timeStr);
-        }
+  // Feed resp synth with RR
+  if (d.respiratory_rate) {
+    respTrack.rrValue    = d.respiratory_rate;
+    respTrack.synthType  = 'resp';
+  }
 
-        function clearVitalsDisplay() {
-            currentHR = null;
-            currentSpO2 = null;
-            currentRR = null;
-            hasReceivedData = false;
+  // Status bar
+  if (d.patient_id) {
+    document.getElementById('sbPatient').textContent =
+      d.patient_name ? d.patient_name.toUpperCase() : `MRN ${d.patient_id}`;
+  }
+  if (d.device_id) {
+    document.getElementById('sbDevice').textContent = d.device_id;
+  }
+}
 
-            // Reset wave buffers so sweep starts fresh on next data
-            scanIndex = 0;
-            ecgPhase = 0;
-            plethPhase = 0;
-            respPhase = 0;
-            waveBuffers.ecg2.fill(0);
-            waveBuffers.ecg1.fill(0);
-            waveBuffers.pleth.fill(0);
-            waveBuffers.resp.fill(0);
+// ════════════════════════════════════════════════════
+//  VERIFICATION
+// ════════════════════════════════════════════════════
+let verified    = false;
+let deviceId    = DEVICE_PARAM || null;
+const overlay   = document.getElementById('verificationOverlay');
+const verCard   = document.getElementById('verCard');
+const verSpinner= document.getElementById('verSpinner');
+const verTitle  = document.getElementById('verTitle');
+const verMsg    = document.getElementById('verMsg');
 
-            document.getElementById('value-hr').textContent = '---';
-            document.getElementById('value-hr').classList.add('no-data');
-            document.getElementById('value-pr').textContent = '--';
+function showOverlay(title, msg, icon=null) {
+  overlay.style.display = 'flex';
+  verTitle.textContent  = title;
+  verMsg.textContent    = msg;
+  if (icon) {
+    verSpinner.style.display='none';
+    const ic = verCard.querySelector('.icon') || (() => {
+      const d=document.createElement('div');d.className='icon';
+      verCard.prepend(d);return d;
+    })();
+    ic.textContent = icon;
+  }
+}
 
-            document.getElementById('value-spo2').textContent = '---';
-            document.getElementById('value-spo2').classList.add('no-data');
+function hideOverlay() {
+  overlay.style.display='none';
+  verified=true;
+}
 
-            document.getElementById('value-rr').textContent = '---';
-            document.getElementById('value-rr').classList.add('no-data');
+async function verifyMRN() {
+  if (!MRN) {
+    showOverlay('NO MRN','No MRN provided in URL. Use ?mrn=XXXXXXXX','🔒');
+    return;
+  }
+  showOverlay('VERIFYING',`Matching MRN ${MRN} against monitor records…`);
+  try {
+    const res  = await fetch(`/api/match-patient?mrn=${encodeURIComponent(MRN)}`);
+    const data = await res.json();
+    if (data.matched) {
+      deviceId = data.device_id || deviceId;
+      if (deviceId) {
+        document.getElementById('sbDevice').textContent = deviceId;
+      }
+      hideOverlay();
+      connectWS();
+    } else {
+      showOverlay('ACCESS RESTRICTED', data.reason || 'MRN does not match monitor records.','🔐');
+    }
+  } catch(e) {
+    showOverlay('CONNECTION ERROR','Cannot reach verification server. Retrying…','⚠️');
+    setTimeout(verifyMRN, 5000);
+  }
+}
 
-            document.getElementById('bannerPatientName').textContent = 'Shahil Kumar';
-            
-            lastReadingId = null;
-        }
+// ════════════════════════════════════════════════════
+//  WEBSOCKET
+// ════════════════════════════════════════════════════
+let ws = null;
+let wsRetry = 0;
+const connDot  = document.getElementById('connDot');
+const connText = document.getElementById('connText');
 
-        // === Animation Loop (Real-time Scanning Sweep Bar) ===
-        
-        function animateWaveforms() {
-            const speed = 4;
+function setOnline(on) {
+  connDot.className  = 'conn-dot ' + (on ? 'online' : 'offline');
+  connText.textContent = on ? 'LIVE' : 'OFFLINE';
+  connText.style.color = on ? '#00ff41' : '#4a6a4a';
+}
 
-            // Only generate and draw sweep waveforms when live data is flowing
-            const hasEcgData = hasReceivedData && currentHR !== null;
-            const hasSpo2Data = hasReceivedData && currentSpO2 !== null;
-            const hasRespData = hasReceivedData && currentRR !== null;
+function connectWS() {
+  const proto = location.protocol==='https:' ? 'wss' : 'ws';
+  const url   = `${proto}://${location.host}/ws`;
+  ws = new WebSocket(url);
 
-            if (hasEcgData || hasSpo2Data || hasRespData) {
-                // Advance scan position
-                const prevScanIndex = scanIndex;
-                scanIndex = (scanIndex + speed) % WAVE_BUFFER_SIZE;
+  ws.onopen = () => { setOnline(true); wsRetry=0; };
 
-                const hr = currentHR || 75;
-                const rr = currentRR || 16;
+  ws.onmessage = (ev) => {
+    try {
+      const d = JSON.parse(ev.data);
 
-                const ecgPhaseInc = (hr / 60) * (speed / WAVE_BUFFER_SIZE) * 4.0;
-                const respPhaseInc = (rr / 60) * (speed / WAVE_BUFFER_SIZE) * 4.0;
+      // Filter by device if known
+      if (deviceId && d.device_id && d.device_id !== deviceId) return;
 
-                for (let i = 0; i < speed; i++) {
-                    const targetIdx = (prevScanIndex + i) % WAVE_BUFFER_SIZE;
+      // Push waveform samples if present
+      if (d.ecg_wave   && d.ecg_wave.length)   ecgTrack.pushSamples(d.ecg_wave);
+      if (d.pleth_wave && d.pleth_wave.length) plethTrack.pushSamples(d.pleth_wave);
 
-                    ecgPhase += ecgPhaseInc / speed;
-                    plethPhase += ecgPhaseInc / speed;
-                    respPhase += respPhaseInc / speed;
+      // Update numeric params
+      updateParams(d);
+    } catch(e){}
+  };
 
-                    // Only fill buffers for channels with live data
-                    if (hasEcgData) {
-                        waveBuffers.ecg2[targetIdx] = getECGValue(ecgPhase);
-                        waveBuffers.ecg1[targetIdx] = getECG1Value(ecgPhase + 0.15);
-                    } else {
-                        waveBuffers.ecg2[targetIdx] = 0;
-                        waveBuffers.ecg1[targetIdx] = 0;
-                    }
+  ws.onclose = () => {
+    setOnline(false);
+    const delay = Math.min(1000 * 2**wsRetry++, 30000);
+    setTimeout(connectWS, delay);
+  };
 
-                    if (hasSpo2Data) {
-                        waveBuffers.pleth[targetIdx] = getPlethValue(plethPhase - 0.2);
-                    } else {
-                        waveBuffers.pleth[targetIdx] = 0;
-                    }
+  ws.onerror = () => ws.close();
+}
 
-                    if (hasRespData) {
-                        waveBuffers.resp[targetIdx] = getRespValue(respPhase);
-                    } else {
-                        waveBuffers.resp[targetIdx] = 0;
-                    }
-                }
-
-                // Draw active channels with sweep, idle channels with flat baseline
-                drawChannel('ecg2', waveBuffers.ecg2, varColor('--ecg-color'), 1.8, false, hasEcgData);
-                drawChannel('ecg1', waveBuffers.ecg1, varColor('--ecg-color'), 1.8, false, hasEcgData);
-                drawChannel('pleth', waveBuffers.pleth, varColor('--spo2-color'), 2.2, false, hasSpo2Data);
-                drawChannel('resp', waveBuffers.resp, varColor('--resp-color'), 1.8, true, hasRespData);
-            } else {
-                // No live data at all — draw dim flat baselines on every channel
-                drawFlatBaseline('ecg2', varColor('--ecg-color'));
-                drawFlatBaseline('ecg1', varColor('--ecg-color'));
-                drawFlatBaseline('pleth', varColor('--spo2-color'));
-                drawFlatBaseline('resp', varColor('--resp-color'));
-            }
-
-            requestAnimationFrame(animateWaveforms);
-        }
-
-        function drawFlatBaseline(key, color) {
-            const wf = canvases[key];
-            if (!wf) return;
-            const { ctx, width, height } = wf;
-            ctx.clearRect(0, 0, width, height);
-            ctx.beginPath();
-            ctx.strokeStyle = color;
-            ctx.globalAlpha = 0.15;
-            ctx.lineWidth = 1;
-            ctx.setLineDash([]);
-            ctx.moveTo(0, height / 2);
-            ctx.lineTo(width, height / 2);
-            ctx.stroke();
-            ctx.globalAlpha = 1.0;
-        }
-
-        function varColor(varName) {
-            // Fallback colors if styling var fails
-            if (varName.includes('ecg-color')) return '#00ff66';
-            if (varName.includes('spo2-color')) return '#00ffff';
-            if (varName.includes('resp-color')) return '#ffff00';
-            return '#ffffff';
-        }
-
-        function drawChannel(key, buffer, color, lineWidth, isDashed) {
-            const wf = canvases[key];
-            if (!wf) return;
-            
-            const { ctx, width, height } = wf;
-            ctx.clearRect(0, 0, width, height);
-            
-            ctx.strokeStyle = color;
-            ctx.lineWidth = lineWidth;
-            ctx.lineCap = 'round';
-            ctx.lineJoin = 'round';
-            
-            if (isDashed) {
-                ctx.setLineDash([2, 3]);
-            } else {
-                ctx.setLineDash([]);
-            }
-            
-            // Map the virtual index loop to the screen coordinates.
-            // We draw two segments:
-            // 1. From 0 to scanIndex - 5 (new sweep line progress)
-            // 2. From scanIndex + 25 to end of buffer (previous sweep leftovers)
-            
-            const gap = 20; // Width of erasing gap in virtual index points
-            
-            // Segment 1 (New progress)
-            if (scanIndex > 2) {
-                ctx.beginPath();
-                for (let i = 0; i < scanIndex - 2; i++) {
-                    const x = (i / WAVE_BUFFER_SIZE) * width;
-                    const y = height / 2 - (buffer[i] * (height * 0.4));
-                    if (i === 0) {
-                        ctx.moveTo(x, y);
-                    } else {
-                        ctx.lineTo(x, y);
-                    }
-                }
-                ctx.stroke();
-            }
-            
-            // Segment 2 (Leftovers)
-            const leftStart = (scanIndex + gap) % WAVE_BUFFER_SIZE;
-            if (leftStart > scanIndex) {
-                ctx.beginPath();
-                let first = true;
-                for (let i = leftStart; i < WAVE_BUFFER_SIZE; i++) {
-                    const x = (i / WAVE_BUFFER_SIZE) * width;
-                    const y = height / 2 - (buffer[i] * (height * 0.4));
-                    if (first) {
-                        ctx.moveTo(x, y);
-                        first = false;
-                    } else {
-                        ctx.lineTo(x, y);
-                    }
-                }
-                ctx.stroke();
-            }
-        }
-
-        // === Clock ===
-        function updateClock() {
-            const now = new Date();
-            const dateStr = now.toISOString().slice(0, 10);
-            const timeStr = now.toLocaleTimeString('en-US', { hour12: false });
-            document.getElementById('timeDisplay').textContent = `${dateStr} ${timeStr}`;
-        }
-
-        // === Audio Alerts ===
-        function toggleAudioAlert() {
-            audioAlertEnabled = !audioAlertEnabled;
-            const toggle = document.getElementById('audioToggle');
-            const icon = document.getElementById('audioIcon');
-            const text = document.getElementById('audioText');
-            if (audioAlertEnabled) {
-                toggle.classList.add('active');
-                icon.textContent = '🔊';
-                text.textContent = 'Alerts On';
-                if (!audioContext) {
-                    audioContext = new (window.AudioContext || window.webkitAudioContext)();
-                }
-            } else {
-                toggle.classList.remove('active');
-                icon.textContent = '🔇';
-                text.textContent = 'Alerts Off';
-            }
-        }
-
-        // === Devices List ===
-        async function fetchDevices() {
-            try {
-                const response = await fetch(`${API_BASE}/devices`);
-                if (response.ok) {
-                    const devices = await response.json();
-                    activeDevices = devices;
-                    updateDeviceSelector();
-                }
-            } catch (e) {
-                console.error("Error fetching devices:", e);
-            }
-        }
-
-        function updateDeviceSelector() {
-            const selector = document.getElementById('deviceSelector');
-            const previousSelection = selector.value || selectedDeviceId;
-            selector.innerHTML = '';
-            
-            if (activeDevices.length === 0) {
-                const opt = document.createElement('option');
-                opt.value = '';
-                opt.textContent = 'No monitors connected';
-                selector.appendChild(opt);
-                return;
-            }
-            
-            activeDevices.forEach(d => {
-                const opt = document.createElement('option');
-                opt.value = d.device_id;
-                const statusSymbol = d.status === 'active' ? '🟢' : '⚫';
-                opt.textContent = `${statusSymbol} ${d.device_id}`;
-                selector.appendChild(opt);
-            });
-            
-            if (previousSelection && activeDevices.some(d => d.device_id === previousSelection)) {
-                selector.value = previousSelection;
-                selectedDeviceId = previousSelection;
-            } else {
-                selector.value = activeDevices[0].device_id;
-                selectedDeviceId = activeDevices[0].device_id;
-            }
-            localStorage.setItem('selectedDeviceId', selectedDeviceId);
-        }
-
-        function selectDevice(deviceId) {
-            selectedDeviceId = deviceId;
-            localStorage.setItem('selectedDeviceId', deviceId);
-            clearVitalsDisplay();
-            fetchLatestReadings();
-        }
-
-        async function fetchNetworkInfo() {
-            try {
-                const response = await fetch(`${API_BASE}/network-info`);
-                if (response.ok) {
-                    const info = await response.json();
-                    const ipEl = document.getElementById('detectedIp');
-                    if (info.primary_ip) {
-                        ipEl.textContent = info.primary_ip;
-                    } else if (info.ip_addresses && info.ip_addresses.length > 0) {
-                        ipEl.textContent = info.ip_addresses[0];
-                    }
-                }
-            } catch (e) {
-                console.error(e);
-            }
-        }
-
-        // === Initialize on Load ===
-        document.addEventListener('DOMContentLoaded', () => {
-            const urlParams = new URLSearchParams(window.location.search);
-            const isMinimal = urlParams.get('minimal') === 'true' || urlParams.get('clean') === 'true';
-            if (isMinimal) {
-                document.body.classList.add('minimal-mode');
-            }
-
-            const mrn = urlParams.get('mrn');
-            const gender = urlParams.get('gender');
-            const dob = urlParams.get('dob');
-            const age = urlParams.get('age');
-
-            if (mrn) {
-                isMatchingMode = true;
-                matchParams = { mrn, gender, dob, age };
-                
-                const overlay = document.getElementById('verificationOverlay');
-                overlay.style.display = 'flex';
-                overlay.className = 'verification-overlay loading';
-                document.getElementById('verificationIcon').textContent = '🔄';
-                document.getElementById('verificationTitle').textContent = 'Verifying Patient Credentials...';
-                document.getElementById('verificationMsg').textContent = 'Matching patient identity...';
-            }
-
-            initCanvases();
-            updateClock();
-            setInterval(updateClock, 1000);
-
-            if (isMatchingMode) {
-                verifyPatientMatch().then(() => {
-                    tryWebSocket();
-                    startPolling();
-                });
-                setInterval(verifyPatientMatch, 5000);
-            } else {
-                fetchDevices().then(() => {
-                    tryWebSocket();
-                    startPolling();
-                });
-                setInterval(fetchDevices, 4000);
-            }
-
-            animateWaveforms();
-            fetchNetworkInfo();
-        });
-
-        window.addEventListener('resize', () => {
-            initCanvases();
-        });
-    </script>
+// ════════════════════════════════════════════════════
+//  BOOT
+// ════════════════════════════════════════════════════
+verifyMRN();
+</script>
 </body>
 </html>