From 92f9f214909c9e6130b8bd0631d609e27c349373 Mon Sep 17 00:00:00 2001
From: NguyenND <ngodanguyen@gmail.com>
Date: Tue, 30 Jun 2026 12:20:43 -0400
Subject: [PATCH] Jun 30 - Update analysis content layout

---
 templates/ai_summary.html | 145 +++++++++++++++++++++++++++-----------
 1 file changed, 105 insertions(+), 40 deletions(-)

diff --git a/templates/ai_summary.html b/templates/ai_summary.html
index 4cdbabe..ca29f67 100644
--- a/templates/ai_summary.html
+++ b/templates/ai_summary.html
@@ -328,16 +328,6 @@ var _rawText = '';   // kept for copy/save
 
 function showResult(data) {
   _rawText = data.summary || '';
-  var fileList = (data.file_names || '').split(', ').map(function(f) {
-    return '  - ' + f;
-  }).join('\n');
-  var criteriaNote = data.criteria_count > 0
-    ? 'Criteria evaluated: ' + data.criteria_count
-    : 'No evaluation criteria configured.';
-  var header = 'AI Extraction  |  Model: ' + (data.model || '')
-    + '\nFiles analyzed (' + (data.file_count || 1) + '):\n' + fileList
-    + '\n' + criteriaNote
-    + '\n' + '='.repeat(60);
 
   // Verdict banner
   var banner = document.getElementById('verdict-banner');
@@ -349,10 +339,25 @@ function showResult(data) {
     banner.innerHTML = '';
   }
 
-  // Render output: header as plain preformatted, then markdown body
-  document.getElementById('ai-output').innerHTML =
-    '<pre class="ai-header-block">' + escHtml(header) + '</pre>'
-    + '<div class="ai-rendered-output">' + renderAI(_rawText) + '</div>';
+  // Meta pill bar (replaces old <pre> header block)
+  var files = (data.file_names || '').split(', ').filter(Boolean);
+  var metaHtml = '<div class="ai-meta-bar">'
+    + '<span class="ai-meta-pill">' + escHtml(data.model || 'AI') + '</span>'
+    + '<span class="ai-meta-pill">📄 ' + files.length + ' file' + (files.length !== 1 ? 's' : '')
+    + (files.length <= 3 ? ': ' + files.map(escHtml).join(', ') : '') + '</span>'
+    + (data.criteria_count > 0 ? '<span class="ai-meta-pill ai-meta-pill-green">✓ ' + data.criteria_count + ' criteria evaluated</span>' : '')
+    + (data.truncated ? '<span class="ai-meta-pill ai-meta-pill-warn">⚠ Document truncated to first ~14 000 chars</span>' : '')
+    + '</div>';
+
+  // Render markdown, then colorize evaluation keywords
+  var rendered = document.createElement('div');
+  rendered.className = 'ai-rendered-output';
+  rendered.innerHTML = renderAI(_rawText);
+  colorizeEval(rendered);
+
+  var outputEl = document.getElementById('ai-output');
+  outputEl.innerHTML = metaHtml;
+  outputEl.appendChild(rendered);
 
   // Show action buttons
   document.getElementById('btn-copy').style.display  = '';
@@ -612,8 +617,9 @@ document.querySelectorAll('.history-row').forEach(function(row) {
           } catch(e) { /* ignore malformed snapshot */ }
         }
 
-        document.getElementById('hist-body').innerHTML =
-          renderAI(d.summary_text || '');
+        var histBody = document.getElementById('hist-body');
+        histBody.innerHTML = renderAI(d.summary_text || '');
+        colorizeEval(histBody);
         if (IS_ADMIN) {
           document.getElementById('btn-delete-analysis').style.display = '';
         }
@@ -665,6 +671,25 @@ function escHtml(str) {
   });
 }
 
+function colorizeEval(container) {
+  container.querySelectorAll('li, td, p').forEach(function(el) {
+    if (el.querySelector('ul,ol,table,div')) return;  // skip block containers
+    var h = el.innerHTML;
+    // Null-byte placeholders prevent cascading replacements
+    h = h.replace(/DOES NOT MEET/g,   '\x00NM\x00');
+    h = h.replace(/PARTIALLY MEETS/g, '\x00PM\x00');
+    h = h.replace(/\bMEETS\b/g,       '\x00M\x00');
+    h = h.replace(/CANNOT DETERMINE/g,'\x00CD\x00');
+    h = h.replace(/\x00NM\x00/g,  '<span class="eval-badge eval-not-meet">DOES NOT MEET</span>');
+    h = h.replace(/\x00PM\x00/g,  '<span class="eval-badge eval-partial">PARTIALLY MEETS</span>');
+    h = h.replace(/\x00M\x00/g,   '<span class="eval-badge eval-meets">MEETS</span>');
+    h = h.replace(/\x00CD\x00/g,  '<span class="eval-badge eval-unclear">CANNOT DETERMINE</span>');
+    h = h.replace(/Not specified in the document\./g,
+                  '<span class="eval-missing">Not specified in the document.</span>');
+    el.innerHTML = h;
+  });
+}
+
 /* ─── Chat ──────────────────────────────────────────────────── */
 var _chatAnalysisId = null;
 var _chatMessages   = [];
@@ -776,45 +801,85 @@ document.getElementById('chat-input').addEventListener('keydown', function(e) {
 .ai-placeholder{
   padding:2rem 1.5rem;color:var(--text-muted);
 }
-.ai-header-block{
-  background:var(--bg-subtle);border-bottom:1px solid var(--border);
-  padding:.85rem 1.4rem;font-family:'DM Mono',monospace;font-size:.78rem;
-  color:var(--text-secondary);margin:0;white-space:pre-wrap;line-height:1.6;
-}
+
+/* ── Meta pill bar ─────────────────────────────────────────── */
 .ai-meta-bar{
-  padding:.6rem 1.5rem;font-size:.78rem;font-family:'DM Mono',monospace;
-  color:var(--text-muted);background:var(--bg-subtle);
+  display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;
+  padding:.7rem 1.4rem;background:var(--bg-subtle);
   border-bottom:1px solid var(--border);
 }
+.ai-meta-pill{
+  display:inline-flex;align-items:center;
+  font-size:.72rem;font-family:'DM Mono',monospace;
+  background:var(--bg-card,#fff);color:var(--text-secondary);
+  border:1px solid var(--border);border-radius:999px;
+  padding:.18rem .65rem;white-space:nowrap;
+}
+.ai-meta-pill-green{border-color:#86efac;color:#15803d;background:#f0fdf4}
+.ai-meta-pill-warn{border-color:#fcd34d;color:#92400e;background:#fffbeb}
 
 /* ── Rendered markdown output ──────────────────────────────── */
 .ai-rendered-output{
-  padding:1.1rem 1.4rem 1.5rem;
-  font-size:.9rem;line-height:1.8;color:var(--text-secondary);
+  padding:1.4rem 1.75rem 2rem;
+  font-size:.9rem;line-height:1.85;color:var(--text);
 }
-.ai-rendered-output h1,.ai-rendered-output h2{
-  font-size:1rem;font-weight:700;color:var(--text);
-  margin:1.4rem 0 .5rem;padding-bottom:.3rem;
+.ai-rendered-output h1{
+  font-size:1.05rem;font-weight:800;color:var(--text);
+  margin:1.8rem 0 .6rem;padding-bottom:.4rem;
+  border-bottom:2px solid var(--accent);
+}
+.ai-rendered-output h2{
+  font-size:.97rem;font-weight:700;color:var(--text);
+  margin:1.5rem 0 .5rem;padding-bottom:.3rem;
   border-bottom:1px solid var(--border);
 }
-.ai-rendered-output h3,.ai-rendered-output h4{
-  font-size:.9rem;font-weight:700;color:var(--text);margin:1rem 0 .35rem;
+.ai-rendered-output h3{
+  font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
+  color:var(--text-secondary);margin:1.25rem 0 .35rem;
 }
-.ai-rendered-output p{margin:.35rem 0}
+.ai-rendered-output h4{font-size:.9rem;font-weight:700;color:var(--text);margin:.9rem 0 .25rem}
+.ai-rendered-output p{margin:.4rem 0}
 .ai-rendered-output strong{color:var(--text);font-weight:700}
-.ai-rendered-output ul,.ai-rendered-output ol{
-  padding-left:1.4rem;margin:.35rem 0;
-}
-.ai-rendered-output li{margin:.2rem 0}
-.ai-rendered-output hr{
-  border:none;border-top:2px solid var(--border);margin:1.25rem 0;
-}
+.ai-rendered-output em{font-style:italic;color:var(--text-secondary)}
+.ai-rendered-output ul,.ai-rendered-output ol{padding-left:1.5rem;margin:.45rem 0 .65rem}
+.ai-rendered-output li{margin:.3rem 0;line-height:1.75}
+.ai-rendered-output hr{border:none;border-top:2px solid var(--border);margin:1.75rem 0}
 .ai-rendered-output pre,.ai-rendered-output code{
   font-family:'DM Mono',monospace;font-size:.82rem;
   background:var(--bg-subtle);border-radius:var(--r-sm);
 }
-.ai-rendered-output pre{padding:.75rem 1rem;overflow-x:auto}
-.ai-rendered-output code{padding:.1rem .3rem}
+.ai-rendered-output pre{padding:.75rem 1rem;overflow-x:auto;border:1px solid var(--border)}
+.ai-rendered-output code{padding:.15rem .35rem;border:1px solid var(--border)}
+
+/* Tables ── */
+.ai-rendered-output table{
+  width:100%;border-collapse:collapse;font-size:.845rem;
+  margin:.75rem 0 1.25rem;border:1px solid var(--border);
+  border-radius:var(--r-sm);overflow:hidden;display:table;
+}
+.ai-rendered-output th{
+  background:var(--bg-subtle);color:var(--text);font-weight:700;
+  padding:.5rem .9rem;border-bottom:2px solid var(--border);text-align:left;
+  font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;
+}
+.ai-rendered-output td{
+  padding:.45rem .9rem;border-bottom:1px solid var(--border);
+  vertical-align:top;color:var(--text-secondary);
+}
+.ai-rendered-output tr:last-child td{border-bottom:none}
+.ai-rendered-output tbody tr:hover td{background:var(--bg-subtle)}
+.ai-rendered-output td:first-child{font-weight:600;color:var(--text);width:38%;white-space:nowrap}
+
+/* Evaluation badges ── */
+.eval-badge{
+  display:inline-block;font-size:.72rem;font-weight:700;
+  padding:.1rem .5rem;border-radius:999px;border:1px solid;letter-spacing:.02em;
+}
+.eval-meets{background:#f0fdf4;color:#15803d;border-color:#86efac}
+.eval-not-meet{background:#fef2f2;color:#dc2626;border-color:#fca5a5}
+.eval-partial{background:#fffbeb;color:#92400e;border-color:#fcd34d}
+.eval-unclear{background:var(--bg-subtle);color:var(--text-secondary);border-color:var(--border)}
+.eval-missing{color:var(--text-muted);font-style:italic}
 
 /* ── Criteria list ─────────────────────────────────────────── */
 .criteria-list{display:flex;flex-direction:column}