Fix: suppress JSON text when table renders, escape HTML in trace, fix source chips

frontend/index.html

@@ -16,7 +16,6 @@
       return client;
     }
 
-    // ── Utilities ──────────────────────────────────────────────────────────────
     function setStatus(msg, type = "info") {
       const el = document.getElementById("status");
       el.innerHTML = msg;
@@ -51,8 +50,12 @@
       });
     }
 
+    function esc(t) {
+      return String(t||"").replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");
+    }
     function markBold(t) {
-      return (t || "").replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>");
+      // Escape HTML first, then apply bold markdown
+      return esc(t).replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>");
     }
 
     function renderTable(data) {
@@ -78,46 +81,47 @@
       const body  = document.getElementById("safety-body");
 
       if (report.error) {
-        body.innerHTML = `<p class="safety-error">Analysis error: ${report.error}</p>`;
+        body.innerHTML = `<p class="safety-note">${report.error}</p>`;
         panel.className = "safety-panel review";
+        document.getElementById("safety-status-icon").textContent  = "—";
+        document.getElementById("safety-status-label").textContent = "Not available";
         panel.style.display = "block";
         return;
       }
 
       const statusMap = {
-        SAFE:          { cls: "safe",    icon: "✅", label: "All Clear" },
-        REVIEW_NEEDED: { cls: "review",  icon: "⚠️", label: "Review Needed" },
-        URGENT:        { cls: "danger",  icon: "🚨", label: "Urgent — Action Required" },
+        SAFE:          { cls: "safe",   label: "All Clear" },
+        REVIEW_NEEDED: { cls: "review", label: "Review Needed" },
+        URGENT:        { cls: "danger", label: "Urgent — Action Required" },
       };
       const s = statusMap[report.overall_safety] || statusMap.REVIEW_NEEDED;
 
       const alertsHtml = (report.alerts || []).map(a => {
         const cls = a.level === "DANGER" ? "alert-danger"
                   : a.level === "WARNING" ? "alert-warn" : "alert-info";
-        const icon = a.level === "DANGER" ? "🚨" : a.level === "WARNING" ? "⚠️" : "ℹ️";
+        const tag = a.level === "DANGER" ? "DANGER"
+                  : a.level === "WARNING" ? "WARNING" : "INFO";
         return `<div class="safety-alert ${cls}">
-          <div class="alert-title">${icon} ${a.title}</div>
+          <div class="alert-title"><span class="alert-tag">${tag}</span> ${a.title}</div>
           <div class="alert-detail">${a.detail}</div>
-          <div class="alert-rec"><strong>Recommendation:</strong> ${a.recommendation}</div>
+          <div class="alert-rec"><strong>Action:</strong> ${a.recommendation}</div>
         </div>`;
       }).join("");
 
       const medsHtml = report.medications?.length
-        ? `<details class="extracted-details"><summary>💊 ${report.medications.length} Medication(s) extracted</summary>
+        ? `<details class="extracted-details"><summary>${report.medications.length} Medication(s) extracted</summary>
             ${renderTable(report.medications)}</details>` : "";
       const allergyHtml = report.allergies?.length
-        ? `<details class="extracted-details"><summary>⚠️ ${report.allergies.length} Allerg(y/ies) extracted</summary>
+        ? `<details class="extracted-details"><summary>${report.allergies.length} Allergy/Allergies extracted</summary>
             ${renderTable(report.allergies)}</details>` : "";
 
       body.innerHTML = alertsHtml + medsHtml + allergyHtml
-        || `<p class="no-alerts">No safety concerns found in the current documents.</p>`;
+        || `<p class="no-alerts">No safety concerns found.</p>`;
 
       panel.className = `safety-panel ${s.cls}`;
-      document.getElementById("safety-status-icon").textContent  = s.icon;
+      document.getElementById("safety-status-icon").textContent  = "";
       document.getElementById("safety-status-label").textContent = s.label;
       panel.style.display = "block";
-
-      // Scroll to panel
       panel.scrollIntoView({ behavior: "smooth", block: "nearest" });
     }
 
@@ -133,12 +137,11 @@
       const li = document.createElement("li");
       li.className = "trace-step entering";
       li.innerHTML = `
-        <span class="step-icon">${step.icon || "•"}</span>
         <div class="step-body">
           <span class="step-name">${step.step}</span>
           <span class="step-detail">${markBold(step.detail)}</span>
-          ${step.sub_queries ? `<ul class="sub-qs">${step.sub_queries.map(q=>`<li>"${q}"</li>`).join("")}</ul>` : ""}
-          ${step.sources ? `<div class="step-srcs">${step.sources.map(s=>`<span class="src-chip">${s}</span>`).join("")}</div>` : ""}
+          ${step.sub_queries ? `<ul class="sub-qs">${step.sub_queries.map(q=>`<li>"${esc(q)}"</li>`).join("")}</ul>` : ""}
+          ${step.sources ? `<div class="step-srcs">${step.sources.map(s=>`<span class="src-chip">${esc(s)}</span>`).join("")}</div>` : ""}
           <span class="step-ms">${step.ms}ms</span>
         </div>`;
       ol.appendChild(li);
@@ -148,12 +151,12 @@
     function setExcerpts(chunks) {
       document.getElementById("excerpts-list").innerHTML = (chunks || []).map(c =>
         `<div class="excerpt-card">
-          <div class="excerpt-src">📄 ${c.source}</div>
-          <div class="excerpt-txt">${c.excerpt}…</div>
+          <div class="excerpt-src">${c.source}</div>
+          <div class="excerpt-txt">${c.excerpt}...</div>
         </div>`).join("");
     }
 
-    // ── Document loading ───────────────────────────────────────────────────────
+    // ── Doc loading ────────────────────────────────────────────────────────────
     async function runSafetyCheck() {
       document.getElementById("safety-panel").style.display = "none";
       document.getElementById("safety-loading").style.display = "flex";
@@ -163,7 +166,7 @@
         const report = JSON.parse(res.data[0]);
         showSafetyPanel(report);
       } catch(e) {
-        showSafetyPanel({ error: e.message });
+        showSafetyPanel({ error: "Safety check unavailable: " + e.message });
       } finally {
         document.getElementById("safety-loading").style.display = "none";
       }
@@ -176,24 +179,22 @@
       document.querySelectorAll(".tpl-btn").forEach(b => b.disabled = false);
       document.getElementById("docs-ready").style.display = "flex";
       document.getElementById("doc-names").textContent = names.join(" · ");
-      // Auto-run safety check
       runSafetyCheck();
     }
 
     document.getElementById("load-samples").addEventListener("click", async () => {
-      setStatus("Loading demo documents…", "info");
+      setStatus("Loading demo documents...", "info");
       try {
         const c = await gc();
         const res = await c.predict("/load_samples", {});
         const d = JSON.parse(res.data[0]);
         if (d.status === "ok") {
-          setStatus(`✅ ${d.files} document(s) · ${d.chunks} chunks ready`, "success");
+          setStatus(d.files + " document(s) loaded — " + d.chunks + " chunks ready", "success");
           onDocsLoaded(d.names || ["demo docs"]);
-        } else setStatus("❌ " + d.message, "error");
-      } catch(e) { setStatus("❌ " + e.message, "error"); }
+        } else setStatus("Error: " + d.message, "error");
+      } catch(e) { setStatus("Error: " + e.message, "error"); }
     });
 
-    // Drag & drop / file picker
     const dropzone  = document.getElementById("dropzone");
     const fileInput = document.getElementById("file-input");
     dropzone.addEventListener("click", () => fileInput.click());
@@ -204,7 +205,7 @@
 
     async function handleFiles(files) {
       if (!files.length) return;
-      setStatus(`Indexing ${files.length} file(s)…`, "info");
+      setStatus("Indexing " + files.length + " file(s)...", "info");
       const items = [];
       for (const f of files) {
         const buf = await f.arrayBuffer();
@@ -216,10 +217,10 @@
         const res = await c.predict("/ingest", { files_json: JSON.stringify(items) });
         const d = JSON.parse(res.data[0]);
         if (d.status === "ok") {
-          setStatus(`✅ ${d.files} file(s) · ${d.chunks} chunks`, "success");
+          setStatus(d.files + " file(s) indexed — " + d.chunks + " chunks", "success");
           onDocsLoaded(d.names || items.map(i => i.name));
-        } else setStatus("❌ " + (d.message || "Error"), "error");
-      } catch(e) { setStatus("❌ " + e.message, "error"); }
+        } else setStatus("Error: " + (d.message || "Unknown error"), "error");
+      } catch(e) { setStatus("Error: " + e.message, "error"); }
     }
 
     // ── Ask ────────────────────────────────────────────────────────────────────
@@ -231,9 +232,8 @@
       clearTrace();
 
       appendBubble("user", question.replace(/</g,"&lt;"));
-      const thinkId  = "think-" + Date.now();
-      const thinkEl  = appendBubble("bot",
-        '<span class="dots"><span></span><span></span><span></span></span>', thinkId);
+      const thinkId = "think-" + Date.now();
+      appendBubble("bot", '<span class="dots"><span></span><span></span><span></span></span>', thinkId);
 
       let finalAnswer = "", structuredData = null, chunks = [];
 
@@ -242,46 +242,34 @@
         for await (const msg of c.submit("/ask_stream", { question })) {
           if (!msg.data) continue;
           const ev = JSON.parse(msg.data[0]);
-          if (ev.type === "trace_step")   addTraceStep(ev.step);
-          else if (ev.type === "answer") {
-            finalAnswer   = ev.answer;
-            structuredData = ev.structured_data;
-            chunks         = ev.chunks || [];
-          } else if (ev.type === "done" && ev.trace_url) {
+          if (ev.type === "trace_step")  addTraceStep(ev.step);
+          else if (ev.type === "answer") { finalAnswer = ev.answer; structuredData = ev.structured_data; chunks = ev.chunks || []; }
+          else if (ev.type === "done" && ev.trace_url) {
             const lnk = document.getElementById("trace-url-link");
             lnk.href = ev.trace_url; lnk.style.display = "inline-flex";
-          } else if (ev.type === "error") finalAnswer = "⚠️ " + ev.message;
+          }
+          else if (ev.type === "error") finalAnswer = ev.message;
         }
       } catch(_) {
-        // Non-streaming fallback
         try {
           const c2 = await gc();
           const res = await c2.predict("/ask", { question });
           const d = JSON.parse(res.data[0]);
-          if (d.error) { finalAnswer = "⚠️ " + d.error; }
-          else {
-            finalAnswer    = d.answer || "";
-            structuredData = d.structured_data;
-            chunks         = d.chunks || [];
-            (d.trace || []).forEach(addTraceStep);
-            if (d.trace_url) {
-              const lnk = document.getElementById("trace-url-link");
-              lnk.href = d.trace_url; lnk.style.display = "inline-flex";
-            }
-          }
-        } catch(e2) { finalAnswer = "❌ " + e2.message; }
+          if (d.error) { finalAnswer = d.error; }
+          else { finalAnswer = d.answer || ""; structuredData = d.structured_data; chunks = d.chunks || []; (d.trace||[]).forEach(addTraceStep); }
+        } catch(e2) { finalAnswer = e2.message; }
       }
 
-      // Render answer
       const wrap = document.getElementById(thinkId);
       if (wrap) {
         const b = wrap.querySelector(".bubble");
         const tbl = structuredData ? renderTable(structuredData) : "";
+        // If structured data rendered a table, suppress the raw JSON text answer
+        const displayText = (tbl && structuredData) ? "" : finalAnswer;
         b.innerHTML = `<div class="answer-txt"></div>${tbl}`;
-        await typewrite(b.querySelector(".answer-txt"), finalAnswer);
+        if (displayText) await typewrite(b.querySelector(".answer-txt"), displayText);
       }
       setExcerpts(chunks);
-
       inp.disabled = false;
       document.getElementById("ask-btn").disabled = false;
       inp.focus();
@@ -294,14 +282,11 @@
     });
 
     document.querySelectorAll(".tpl-btn").forEach(btn =>
-      btn.addEventListener("click", () => {
-        document.getElementById("ask-input").value = btn.dataset.q;
-        ask(btn.dataset.q);
-      }));
+      btn.addEventListener("click", () => { document.getElementById("ask-input").value = btn.dataset.q; ask(btn.dataset.q); }));
 
     document.getElementById("clear-btn").addEventListener("click", () => {
       document.getElementById("chat").innerHTML =
-        `<div class="welcome"><div class="welcome-icon">🩺</div>
+        `<div class="welcome"><div class="welcome-logo">&#x1FA7A;</div>
          <p>Load patient documents, then ask any question.<br/>
          <em>Try: "Do any medications interact with the patient's allergies?"</em></p></div>`;
       clearTrace();
@@ -310,16 +295,15 @@
     document.getElementById("theme-btn").addEventListener("click", () => {
       document.documentElement.classList.toggle("dark");
       document.getElementById("theme-btn").textContent =
-        document.documentElement.classList.contains("dark") ? "☀️" : "🌙";
+        document.documentElement.classList.contains("dark") ? "Light" : "Dark";
     });
   </script>
 </head>
 <body>
-  <!-- HEADER -->
   <header>
     <div class="hdr">
       <div class="logo">
-        <span class="logo-icon">🩺</span>
+        <span class="logo-icon">&#x1FA7A;</span>
         <div>
           <h1>ClinIQ</h1>
           <p class="tagline">On-device clinical document assistant · Qwen2.5-3B · llama.cpp · Modal</p>
@@ -327,33 +311,31 @@
       </div>
       <div class="hdr-right">
         <div class="badges">
-          <span class="badge b-purple">🐜 Tiny Titan ≤4B</span>
-          <span class="badge b-teal">🦙 llama.cpp</span>
-          <span class="badge b-blue">⚡ Modal A10G</span>
-          <span class="badge b-gold">🏆 Build Small 2026</span>
+          <span class="badge b-purple">Tiny Titan 3B</span>
+          <span class="badge b-teal">llama.cpp</span>
+          <span class="badge b-blue">Modal A10G</span>
+          <span class="badge b-gold">Build Small 2026</span>
         </div>
-        <button id="theme-btn" class="icon-btn">🌙</button>
+        <button id="theme-btn" class="icon-btn">Dark</button>
       </div>
     </div>
   </header>
 
   <div class="privacy-bar">
-    🔒 <strong>Privacy guarantee:</strong> Documents are indexed locally. Only relevant excerpts — never full records — reach the GPU.
+    Privacy guarantee: Documents are indexed locally. Only relevant excerpts — never full records — reach the GPU.
   </div>
 
   <main>
-    <!-- ── LEFT SIDEBAR ── -->
     <aside class="sidebar">
 
-      <!-- Upload -->
       <div class="card">
-        <h2>📂 Documents</h2>
+        <h2>Documents</h2>
         <div id="dropzone" class="dropzone">
-          <span style="font-size:1.8rem">📄</span>
+          <span class="drop-icon">&#x1F4C4;</span>
           <span class="drop-txt">Drop PDFs / TXT here<br/><small>or click to browse</small></span>
           <input type="file" id="file-input" multiple accept=".pdf,.txt" hidden/>
         </div>
-        <button id="load-samples" class="btn secondary full">⚡ Load Demo Patient Docs</button>
+        <button id="load-samples" class="btn secondary full">Load Demo Patient Docs</button>
         <div id="status" class="status info">Upload documents or load demo docs to begin.</div>
         <div id="docs-ready" class="docs-ok" style="display:none">
           <span class="pulse-dot"></span>
@@ -361,78 +343,66 @@
         </div>
       </div>
 
-      <!-- 🚨 Safety Panel — THE hero feature -->
       <div class="card safety-card-wrap">
         <div class="safety-card-header">
-          <h2>🚨 Drug Safety Check</h2>
-          <span class="safety-auto-badge">Auto-runs on upload</span>
+          <h2>Drug Safety Check</h2>
+          <span class="safety-auto-badge">Auto on upload</span>
         </div>
-        <p class="card-hint">Proactive drug-allergy & interaction alerts — no question needed.</p>
+        <p class="card-hint">Proactive drug-allergy and interaction alerts — no question needed.</p>
 
         <div id="safety-loading" class="safety-loading" style="display:none">
           <div class="spinner"></div>
-          <span>Qwen2.5-3B analysing medications &amp; allergies…</span>
+          <span>Analysing medications and allergies...</span>
         </div>
 
         <div id="safety-panel" class="safety-panel" style="display:none">
           <div class="safety-status-bar">
-            <span id="safety-status-icon">✅</span>
+            <span id="safety-status-icon"></span>
             <span id="safety-status-label">All Clear</span>
           </div>
           <div id="safety-body"></div>
         </div>
       </div>
 
-      <!-- Smart Templates -->
       <div class="card">
-        <h2>🧩 Smart Templates</h2>
+        <h2>Smart Templates</h2>
         <div class="templates">
-          <button class="tpl-btn" disabled data-q="List all medications with doses and frequency">💊 Medication List</button>
-          <button class="tpl-btn" disabled data-q="List all allergies and reactions">⚠️ Allergy Summary</button>
-          <button class="tpl-btn" disabled data-q="What are all the diagnoses?">🏥 Diagnoses</button>
-          <button class="tpl-btn" disabled data-q="What follow-up appointments are scheduled?">📅 Follow-up Plan</button>
-          <button class="tpl-btn" disabled data-q="Do any medications interact with the patient's allergies or other medications?">💊⚠️ Drug Interactions</button>
-          <button class="tpl-btn" disabled data-q="Compare the medications listed in each document — did anything change?">🔄 Compare Across Visits</button>
+          <button class="tpl-btn" disabled data-q="List all medications with doses and frequency">Medication List</button>
+          <button class="tpl-btn" disabled data-q="List all allergies and reactions">Allergy Summary</button>
+          <button class="tpl-btn" disabled data-q="What are all the diagnoses?">Diagnoses</button>
+          <button class="tpl-btn" disabled data-q="What follow-up appointments are scheduled?">Follow-up Plan</button>
+          <button class="tpl-btn" disabled data-q="Do any medications interact with the patient's allergies or other medications?">Drug Interactions</button>
+          <button class="tpl-btn" disabled data-q="Compare the medications listed in each document — did anything change?">Compare Across Visits</button>
         </div>
       </div>
 
     </aside>
 
-    <!-- ── RIGHT: CHAT + TRACE ── -->
     <div class="right-col">
 
-      <!-- Chat -->
       <div class="card chat-card">
         <div class="chat-hdr">
-          <h2>🗨️ Clinical Q&amp;A</h2>
-          <button id="clear-btn" class="icon-btn sm">🗑️</button>
+          <h2>Clinical Q&amp;A</h2>
+          <button id="clear-btn" class="icon-btn sm">Clear</button>
         </div>
         <div id="chat" class="chat">
           <div class="welcome">
-            <div class="welcome-icon">🩺</div>
+            <div class="welcome-logo">&#x1FA7A;</div>
             <p>Load patient documents, then ask any question.<br/>
             <em>Try: "Do any medications interact with the patient's allergies?"</em></p>
           </div>
         </div>
         <div class="input-row">
           <textarea id="ask-input" rows="2" disabled
-            placeholder="Ask a clinical question… (Enter to send)"></textarea>
-          <button id="ask-btn" class="btn primary ask-btn" disabled>
-            Ask
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
-              <line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>
-            </svg>
-          </button>
+            placeholder="Ask a clinical question... (Enter to send)"></textarea>
+          <button id="ask-btn" class="btn primary ask-btn" disabled>Ask</button>
         </div>
       </div>
 
-      <!-- Agent Trace -->
       <div class="card trace-card">
         <div class="trace-hdr">
-          <h2>🔬 Agent Trace</h2>
-          <a id="trace-url-link" href="#" target="_blank" class="share-btn" style="display:none">
-            📤 View on HF Hub
-          </a>
+          <h2>Agent Trace</h2>
+          <a id="trace-url-link" href="#" target="_blank" class="share-btn" style="display:none">View on HF Hub</a>
         </div>
         <ol id="trace-steps" class="trace-steps"></ol>
         <h3>Retrieved Excerpts</h3>