Upload 2 files

templates/patient.html

@@ -18,6 +18,12 @@
       <span class="role-tag">Patient</span>
     </div>
   </div>
+  <button type="button" class="header-icon-btn" id="open-history-btn" title="Your consultation history" aria-label="Your consultation history">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <circle cx="12" cy="12" r="9"/>
+      <polyline points="12 7 12 12 15 15"/>
+    </svg>
+  </button>
 </div>
 {% endblock %}
 
@@ -213,6 +219,20 @@
   <button type="button" class="btn btn-secondary" id="new-conversation-btn">Start a new conversation</button>
 </section>
 
+<!-- Dedicated history view, reachable from the header icon on every step.
+     This is the "dedicated way to access history" the step-1 teaser card
+     alone didn't provide, since that card only exists on step 1. -->
+<section class="step" data-step="history">
+  <div class="card">
+    <h2>Your consultations</h2>
+    <p class="helper-text">Tap any message to reopen it.</p>
+    <input type="text" class="search-input" id="history-search" placeholder="Search your messages" aria-label="Search your consultations">
+    <div id="history-full-list" style="margin-top: var(--space-4);"></div>
+    <p class="helper-text" id="history-empty-text" style="display: none;"></p>
+  </div>
+  <button type="button" class="btn btn-secondary" id="history-back-btn">Back</button>
+</section>
+
 <div class="nav-link"><a href="/provider">Go to provider view</a></div>
 
 {% endblock %}

templates/provider.html

@@ -42,9 +42,26 @@
     <p>Review what each patient said, then send your reply.</p>
   </div>
 
+  <!-- "Active" here means "currently open in this workspace" - this app
+       has no multi-provider login/claim system, so that's the only honest
+       meaning available. It's a single client-side slot, not a backend
+       concept. -->
+  <div class="queue-tabs" role="tablist">
+    <button type="button" class="queue-tab active" data-tab="waiting" role="tab" aria-selected="true">
+      Waiting <span class="tab-count" id="tab-count-waiting">0</span>
+    </button>
+    <button type="button" class="queue-tab" data-tab="active" role="tab" aria-selected="false">
+      Active <span class="tab-count" id="tab-count-active">0</span>
+    </button>
+    <button type="button" class="queue-tab" data-tab="completed" role="tab" aria-selected="false">
+      Completed <span class="tab-count" id="tab-count-completed">0</span>
+    </button>
+  </div>
+
   <div class="card">
+    <input type="text" class="search-input" id="queue-search" placeholder="Search by language or message" aria-label="Search consultations" style="margin-bottom: var(--space-4);">
     <div id="pending-list"></div>
-    <p class="helper-text" id="empty-pending" style="display: none;">Nothing waiting right now.</p>
+    <p class="helper-text" id="empty-pending" style="display: none;"></p>
   </div>
 </section>
 
@@ -61,16 +78,36 @@
 
   <div id="detail-content" style="display: none;">
     <div class="card">
-      <p>Reference number: <span class="interaction-id" id="respond-interaction-id"></span></p>
+      <div class="workspace-meta">
+        <span>Reference number: <span class="interaction-id" id="respond-interaction-id"></span></span>
+        <span class="status-badge waiting" id="respond-status-badge">Waiting for your reply</span>
+      </div>
+      <p class="helper-text" id="respond-meta-line"></p>
+
       <div class="chat-thread">
         <div class="chat-bubble from-patient">
           <span class="chat-label" id="respond-language-label">Patient</span>
           <span id="respond-translated-text"></span>
         </div>
       </div>
+
+      <details class="original-transcript">
+        <summary>Show original message (<span id="respond-original-language"></span>)</summary>
+        <p id="respond-original-text"></p>
+      </details>
+
       <div class="nlu-summary" id="respond-nlu-summary"></div>
     </div>
 
+    <!-- Only shown when this patient has other consultations on record.
+         Read-only context for understanding this message, not clickable -
+         switching the whole workspace to a different consultation from
+         here would risk a provider replying to the wrong one. -->
+    <div class="card" id="patient-history-card" style="display: none;">
+      <h3>This patient's other consultations</h3>
+      <div id="patient-history-list"></div>
+    </div>
+
     <div class="card">
       <label for="response-text-input">Your reply (in English)</label>
       <div class="chip-row" id="quick-reply-chips">
@@ -80,6 +117,34 @@
         <button type="button" class="chip" data-text="I need a bit more detail, please describe your symptoms further.">Need more detail</button>
       </div>
       <textarea id="response-text-input" rows="4" placeholder="Type your reply here"></textarea>
+
+      <button type="button" class="btn btn-secondary" id="preview-response-btn" style="margin-top: var(--space-3); width: 100%;">
+        <span class="btn-spinner spinner" style="display: none;"></span>
+        <span class="btn-label">Preview what the patient will get</span>
+      </button>
+
+      <!-- Real translation + real speech synthesis, same pipeline as an
+           actual send, just not saved. Each click costs the same as
+           sending, since it's a genuine API call, not a mock. -->
+      <div class="preview-block" id="preview-block" style="display: none;">
+        <p class="preview-label">Preview — exactly what the patient will receive</p>
+        <div class="chat-bubble from-provider" id="preview-text-bubble"></div>
+        <div class="audio-player">
+          <audio id="preview-audio" preload="metadata"></audio>
+          <div class="audio-player-controls">
+            <button type="button" class="audio-btn" id="preview-audio-play-btn" aria-label="Play">
+              <svg class="icon-play" viewBox="0 0 24 24" fill="currentColor"><polygon points="6 3 20 12 6 21 6 3"/></svg>
+              <svg class="icon-pause" viewBox="0 0 24 24" fill="currentColor" style="display: none;"><rect x="5" y="3" width="5" height="18" rx="1"/><rect x="14" y="3" width="5" height="18" rx="1"/></svg>
+            </button>
+            <button type="button" class="audio-btn audio-btn-sm" id="preview-audio-replay-btn" aria-label="Replay from start">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></svg>
+            </button>
+            <span class="audio-time" id="preview-audio-current-time">0:00</span>
+            <input type="range" class="audio-seek" id="preview-audio-seek" min="0" max="0" value="0" step="0.1" aria-label="Seek audio position">
+            <span class="audio-time" id="preview-audio-duration">0:00</span>
+          </div>
+        </div>
+      </div>
     </div>
 
     <div class="btn-row">