feat: implement context-aware AI Scribe with automated patient switching

dashboard.css

@@ -628,14 +628,63 @@
     border: 1px solid var(--border);
 }
 
-.quick-links button {
-    width: 100%;
-    margin-bottom: 0.75rem;
-    text-align: left;
-    padding: 1rem;
-    justify-content: flex-start;
+.btn-scribe {
+    background: var(--secondary);
+    color: white;
+    border: none;
+    padding: 0.8rem 1.5rem;
+    border-radius: 12px;
+    font-weight: 600;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    transition: all 0.2s ease;
 }
 
+.btn-scribe:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
+}
+
+.scribe-indicator {
+    background: #F0F9FF;
+    border: 1px solid #BAE6FD;
+    padding: 1rem;
+    border-radius: 12px;
+    margin-bottom: 1.5rem;
+    font-size: 0.9rem;
+    color: #0369A1;
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
+}
+
+.scribe-indicator .dot {
+    width: 10px;
+    height: 10px;
+    background: #EF4444;
+    border-radius: 50%;
+    animation: pulse 1.5s infinite;
+}
+
+@keyframes pulse {
+    0% { transform: scale(1); opacity: 1; }
+    50% { transform: scale(1.5); opacity: 0.5; }
+    100% { transform: scale(1); opacity: 1; }
+}
+
+.pipeline-item {
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.pipeline-item:hover {
+    transform: translateX(5px);
+    background: #F1F5F9;
+}
+
+
 
 /* Tablet Breakpoint (1024px) */
 @media (max-width: 1024px) {

dashboard.html

@@ -61,14 +61,14 @@
                         <span class="badge">4 Waiting</span>
                     </div>
                     <div class="pipeline-list">
-                        <div class="pipeline-item next">
+                        <div class="pipeline-item next" onclick="switchPatientContext('Anjali Singh', '#013', 'High Fever')">
                             <div class="p-token">#013</div>
                             <div class="p-info">
                                 <strong>Anjali Singh</strong>
                                 <span class="triage-pill urgent">High Fever</span>
                             </div>
                         </div>
-                        <div class="pipeline-item">
+                        <div class="pipeline-item" onclick="switchPatientContext('Suresh Kumar', '#014', 'Back Pain')">
                             <div class="p-token">#014</div>
                             <div class="p-info">
                                 <strong>Suresh Kumar</strong>
@@ -89,11 +89,16 @@
                             </div>
                         </div>
                         <div class="workspace-actions">
+                            <button id="zenScribeBtn" class="btn-scribe" onclick="toggleZenScribe()">🎙️ Start AI Scribe</button>
                             <button class="btn-secondary" onclick="openHistory()">📂 History</button>
                             <button class="btn-primary" onclick="openConsultation()">✍️ Start Consultation</button>
                         </div>
                     </header>
                     
+                    <div id="scribeStatus" class="scribe-indicator hidden">
+                        <span class="dot"></span> AI is listening and transcribing clinical insights...
+                    </div>
+
                     <div class="zen-grid">
                         <div class="clinical-notes-card">
                             <div class="card-header">Consultation Notes</div>

dashboard.js

@@ -131,22 +131,60 @@ if (startRecordBtn) {
     };
 }
 
-// 5. Sidebar Toggle
-window.toggleSidebar = () => {
-    const sidebar = document.getElementById('sidebar');
-    if (!sidebar) return;
-    if (sidebar.style.display === 'flex') {
-        sidebar.style.display = 'none';
+// 6. AI Scribe & Context Switching Logic
+let isScribing = false;
+
+window.toggleZenScribe = () => {
+    const btn = document.getElementById("zenScribeBtn");
+    const status = document.getElementById("scribeStatus");
+    const notes = document.querySelector(".zen-textarea");
+    
+    isScribing = !isScribing;
+    
+    if (isScribing) {
+        btn.innerText = "🛑 Stop AI Scribe";
+        btn.style.background = "#EF4444";
+        status.classList.remove("hidden");
+        
+        // Simulate AI Scribe capturing notes
+        setTimeout(() => {
+            if (isScribing) {
+                notes.value += "Patient reports symptoms of fatigue and persistent dry cough for 3 days. No fever recorded today. \n";
+            }
+        }, 3000);
     } else {
-        sidebar.style.display = 'flex';
-        sidebar.style.position = 'fixed';
-        sidebar.style.top = '50px';
-        sidebar.style.width = '100%';
-        sidebar.style.height = 'calc(100vh - 50px)';
-        sidebar.style.zIndex = '999';
+        btn.innerText = "🎙️ Start AI Scribe";
+        btn.style.background = "";
+        status.classList.add("hidden");
     }
 };
 
+window.switchPatientContext = (name, token, triage) => {
+    // 1. Reset Scribe State
+    isScribing = false;
+    const btn = document.getElementById("zenScribeBtn");
+    if (btn) {
+        btn.innerText = "🎙️ Start AI Scribe";
+        btn.style.background = "";
+    }
+    const status = document.getElementById("scribeStatus");
+    if (status) status.classList.add("hidden");
+
+    // 2. Clear Current Workspace
+    const notes = document.querySelector(".zen-textarea");
+    if (notes) notes.value = "";
+    
+    // 3. Update Headers
+    const h1 = document.querySelector(".current-patient h1");
+    if (h1) h1.innerHTML = `${name} <small>(32y, Female)</small>`;
+    
+    const meta = document.querySelector(".patient-meta");
+    if (meta) meta.innerHTML = `<span>${token}</span> • <span>${triage}</span> • <span class="visit-timer">00:00</span>`;
+    
+    alert(`Switched context to: ${name}. AI Scribe reset.`);
+};
+
+
 // Close Modals
 if (closeModal) closeModal.onclick = () => modal.style.display = "none";
 window.onclick = (e) => { if (e.target == modal) modal.style.display = "none"; };