From 78e95bfc17d568ba06baceee61b7f26abac0bcb9 Mon Sep 17 00:00:00 2001
From: Deep Koluguri <deepkoluguri@gmail.com>
Date: Sat, 23 May 2026 11:33:35 -0400
Subject: [PATCH] refactor: apply refined 15-60-25 Zen 4.0 layout, move patient
 banner to center column, update scribe UI states

---
 dashboard.css  | 22 +++++++++++---------
 dashboard.html | 55 +++++++++++++++++++++++---------------------------
 dashboard.js   | 12 ++++++++---
 3 files changed, 47 insertions(+), 42 deletions(-)

diff --git a/dashboard.css b/dashboard.css
index 4d6ec7c..aa12d40 100644
--- a/dashboard.css
+++ b/dashboard.css
@@ -1313,7 +1313,7 @@
 }
 
 /* --- WORLD-CLASS ZEN 4.0 ADD-ONS --- */
-.safety-header {
+.patient-banner-inner {
     background: white;
     padding: 1.5rem 2.5rem;
     border-radius: 20px;
@@ -1322,10 +1322,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 2rem;
-    position: sticky;
-    top: 1rem;
-    z-index: 10;
+    margin-bottom: 0.5rem;
 }
 
 .patient-identity-row {
@@ -1350,14 +1347,14 @@
 
 .zen-layout-3col {
     display: grid;
-    grid-template-columns: 15% 55% 30%;
-    gap: 2rem;
+    grid-template-columns: 15% 60% 25%;
+    gap: 1.5rem;
     align-items: start;
     transition: grid-template-columns 0.3s ease;
 }
 
 .zen-layout-3col.collapsed-queue {
-    grid-template-columns: 5% 65% 30%;
+    grid-template-columns: 5% 70% 25%;
 }
 
 .zen-pipeline {
@@ -1367,7 +1364,14 @@
     box-shadow: 0 4px 20px rgba(0,0,0,0.03);
     border: 1px solid var(--border);
     transition: all 0.3s ease;
-    overflow: hidden;
+    overflow-x: hidden;
+}
+
+.zen-pipeline.full-height {
+    height: calc(100vh - 5rem);
+    overflow-y: auto;
+    position: sticky;
+    top: 1rem;
 }
 
 .zen-pipeline.collapsed {
diff --git a/dashboard.html b/dashboard.html
index 7056cc8..7b8a386 100644
--- a/dashboard.html
+++ b/dashboard.html
@@ -111,30 +111,10 @@
             </div>
         </div>
 
-        <!-- DOCTOR ZEN VIEW (Clinical Focus) -->
         <div id="doctor-zen-section" class="hidden">
-            <!-- Persistent Safety Header -->
-            <div class="safety-header">
-                <div class="patient-identity-row">
-                    <span class="pill active">Now Seeing</span>
-                    <h1>Rahul Verma <small>(28y, M)</small></h1>
-                    <span class="pill triage">#012 • Viral Fever Triage</span>
-                    <span class="allergy-tag urgent-alert">‼️ PEANUTS ALLERGY</span>
-                </div>
-                <div class="action-center">
-                    <select id="scribeLang" class="lang-select">
-                        <option value="en-US">English</option>
-                        <option value="te-IN">తెలుగు</option>
-                    </select>
-                    <button id="zenScribeBtn" class="btn-zen scribe" onclick="toggleZenScribe()">🎙️ Scribe</button>
-                    <button class="btn-zen history" onclick="openHistory()">📂 History</button>
-                    <button class="btn-zen start" onclick="openConsultation()">✍️ Start</button>
-                </div>
-            </div>
-
             <div class="zen-layout-3col">
-                <!-- Left: Collapsible Queue (15%) -->
-                <aside class="zen-pipeline" id="zenPipeline">
+                <!-- Left: Full-Height Queue (15%) -->
+                <aside class="zen-pipeline full-height" id="zenPipeline">
                     <div class="pipeline-header">
                         <h3>Queue <small>(Ctrl+Q)</small></h3>
                         <span class="badge">4 Waiting</span>
@@ -157,8 +137,23 @@
                     </div>
                 </aside>
 
-                <!-- Center: Structured SOAP Workspace (55%) -->
+                <!-- Center: Core Workspace (60%) -->
                 <main class="zen-workspace-soap">
+                    <div class="patient-banner-inner">
+                        <div class="patient-identity-row">
+                            <h1>Rahul Verma <small>(28y, M)</small></h1>
+                            <span class="allergy-tag urgent-alert">⚠️ ALLERGY: PEANUTS</span>
+                        </div>
+                        <div class="action-center">
+                            <select id="scribeLang" class="lang-select">
+                                <option value="en-US">English</option>
+                                <option value="te-IN">తెలుగు</option>
+                            </select>
+                            <button id="zenScribeBtn" class="btn-zen scribe pulse-active" onclick="toggleZenScribe()">🔴 Start Recording</button>
+                            <button class="btn-zen history" onclick="openHistory()">📂 History</button>
+                        </div>
+                    </div>
+
                     <div id="scribeStatus" class="scribe-status-bar hidden">
                         <span class="pulse-dot"></span> <span id="scribeStatusText">AI Scribe Recording... (Ctrl+Shift+S to Pause)</span>
                     </div>
@@ -195,22 +190,22 @@
                     </div>
                 </main>
 
-                <!-- Right: AI Assistant & Vitals (30%) -->
+                <!-- Right: Clinical Context & AI Insights (25%) -->
                 <aside class="zen-sidebar-right">
                     <div class="insight-card">
                         <div class="card-header">🩺 Vitals Widget</div>
                         <div class="vitals-grid">
                             <div class="vital-item">
                                 <span class="label">Temp</span>
-                                <span class="value" id="vital-temp">98.6°F</span>
+                                <span class="value" id="vital-temp">98.6°F 🟢</span>
                             </div>
                             <div class="vital-item warning">
                                 <span class="label">BP</span>
-                                <span class="value" id="vital-bp">140/90</span>
+                                <span class="value" id="vital-bp">140/90 🔴</span>
                             </div>
                             <div class="vital-item">
                                 <span class="label">SpO2</span>
-                                <span class="value" id="vital-spo2">98%</span>
+                                <span class="value" id="vital-spo2">98% 🟢</span>
                             </div>
                         </div>
                     </div>
@@ -219,8 +214,8 @@
                         <div class="card-header">✨ AI Suggestions</div>
                         <p id="aiNudgeText">Listening for diagnosis...</p>
                         <div class="suggested-tags">
-                            <span>#ViralFever</span>
-                            <span>#FluProtocols</span>
+                            <span>ICD-10: B34.9 (Viral)</span>
+                            <span>Rx: Paracetamol</span>
                         </div>
                     </div>
                 </aside>
@@ -537,6 +532,6 @@
         </div>
 
     </main>
-    <script src="dashboard.js?v=21"></script>
+    <script src="dashboard.js?v=22"></script>
 </body>
 </html>
diff --git a/dashboard.js b/dashboard.js
index a2e8b19..508cd1c 100644
--- a/dashboard.js
+++ b/dashboard.js
@@ -307,12 +307,12 @@ function updateScribeUI() {
     if (!btn || !status) return;
     
     if (isScribing) {
-        btn.innerHTML = "🛑 Stop Scribe";
+        btn.innerHTML = "⏸️ Pause Scribe";
         btn.style.background = "#EF4444";
         btn.style.color = "white";
         status.classList.remove("hidden");
     } else {
-        btn.innerHTML = "🎙️ Scribe";
+        btn.innerHTML = "🔴 Start Recording";
         btn.style.background = ""; // Resets to CSS default
         btn.style.color = "";
         status.classList.add("hidden");
@@ -345,7 +345,13 @@ async function processWithWhisper(blob) {
         });
         const data = await res.json();
         if (data.text) {
-            document.getElementById("consultationNotes").value += "\n[DEEP SCRIBE]: " + data.text;
+            const activeField = document.activeElement;
+            if (activeField && activeField.tagName === 'TEXTAREA' && activeField.id.startsWith('soap-')) {
+                activeField.value += "\n[DEEP SCRIBE]: " + data.text;
+            } else {
+                const defaultField = document.getElementById("soap-s");
+                if (defaultField) defaultField.value += "\n[DEEP SCRIBE]: " + data.text;
+            }
             generateSummary(true);
         }
     } catch (e) {