From 788ee1539d874f4eda4c24917b87f29e4271cbf7 Mon Sep 17 00:00:00 2001
From: Otto <otto@it-s-center.de>
Date: Sun, 31 May 2026 16:26:37 +0200
Subject: [PATCH] feat(dashboard): richer engram detail overlay

---
 templates/dashboard.html | 84 +++++++++++++++++++++++++++++++++-------
 1 file changed, 69 insertions(+), 15 deletions(-)

diff --git a/templates/dashboard.html b/templates/dashboard.html
index d7c3c90..8c5141f 100644
--- a/templates/dashboard.html
+++ b/templates/dashboard.html
@@ -1007,9 +1007,11 @@ function escapeHtml(t) {
 }
 
 // ─── Actions ────────────────────────────────────────────────────────────────
-async function confirm(id, ev) {
+async function confirm(id, ev, ctx = 'card') {
     ev.stopPropagation();
-    const reason = document.getElementById('reason-'+id).value;
+    const reasonElId = (ctx === 'modal') ? ('reason-modal-' + id) : ('reason-' + id);
+    const reasonEl = document.getElementById(reasonElId);
+    const reason = reasonEl ? reasonEl.value : '';
     await api(`/api/engrams/${id}/confirm`, {
         method: 'POST',
         headers: {'Content-Type': 'application/x-www-form-urlencoded'},
@@ -1020,9 +1022,11 @@ async function confirm(id, ev) {
     if (state.view === 'status') loadStatus();
 }
 
-async function reject(id, ev) {
+async function reject(id, ev, ctx = 'card') {
     ev.stopPropagation();
-    const reason = document.getElementById('reason-'+id).value;
+    const reasonElId = (ctx === 'modal') ? ('reason-modal-' + id) : ('reason-' + id);
+    const reasonEl = document.getElementById(reasonElId);
+    const reason = reasonEl ? reasonEl.value : '';
     await api(`/api/engrams/${id}/reject`, {
         method: 'POST',
         headers: {'Content-Type': 'application/x-www-form-urlencoded'},
@@ -1058,18 +1062,62 @@ async function createEngram() {
 async function showDetail(id) {
     const item = await api(`/api/engrams/${id}`);
     const body = document.getElementById('modalBody');
+    const links = (item.links || []);
+    const suggestions = (item.link_suggestions || []).concat(item.predictive_links || []);
+    const suggHtml = suggestions.length ? suggestions.map(s => `
+        <div class="suggestion">
+            <span class="sugg-id">${s.engram_id.substring(0,8)}</span>
+            <span class="sugg-preview">${escapeHtml(s.preview || s.content_preview || '')}</span>
+            <button class="btn-link" onclick="acceptLink('${item.id}', '${s.engram_id}', event)">🔗</button>
+        </div>
+    `).join('') : '<span class="muted">Keine Vorschläge</span>';
     body.innerHTML = `
-        <h3>Engramm ${item.id.substring(0,8)}</h3>
-        <p><b>Confidence:</b> ${Math.round(item.confidence*100)}%</p>
-        <p><b>Confirmed:</b> ${item.confirmed ? '✅' : '❌'}</p>
-        <p><b>Tags:</b> ${item.tags.map(t => '<span class="tag">'+t+'</span>').join(' ')}</p>
-        <p><b>Content:</b></p>
-        <div class="detail-content">${escapeHtml(item.content)}</div>
-        <p><b>History:</b></p>
-        <ul class="history">
-            ${(item.review_history || []).map(h => `<li>${fmtDate(h.at)} — ${h.action} (${h.note})</li>`).join('')}
-        </ul>
-        <p><b>Links:</b> ${item.links?.join(', ') || 'none'}</p>
+        <h3>Engramm <span class="pill">${item.id.substring(0,8)}</span></h3>
+        <div class="kv-row"><div class="kv-key">verdict</div><div class="kv-val">${renderVerdictPill(item)} <span class="muted small">${Math.round(item.confidence*100)}%</span></div></div>
+        <div class="kv-row"><div class="kv-key">source</div><div class="kv-val">${escapeHtml(item.source || '-')}</div></div>
+        <div class="kv-row"><div class="kv-key">created</div><div class="kv-val">${fmtDate(item.created)}</div></div>
+        <div class="kv-row"><div class="kv-key">modified</div><div class="kv-val">${fmtDate(item.modified)}</div></div>
+        <div class="kv-row"><div class="kv-key">access</div><div class="kv-val">${item.access_count ?? 0} • grounding ${item.grounding ?? 0}</div></div>
+        <div class="kv-row"><div class="kv-key">tags</div><div class="kv-val">${(item.tags || []).map(t => '<span class="tag">'+escapeHtml(t)+'</span>').join(' ') || '-'}</div></div>
+
+        <div style="margin-top:10px"><b>Content</b></div>
+        <div class="detail-content">${escapeHtml(item.content || '')}</div>
+
+        <div class="panel" style="margin:10px 0 0; padding:10px 12px;">
+            <div class="panel-title">Vorschläge</div>
+            <div class="suggestions">${suggHtml}</div>
+        </div>
+
+        <div class="panel" style="margin:10px 0 0; padding:10px 12px;">
+            <div class="panel-title">Links</div>
+            <div>
+                ${links.length ? links.map(l => `<span class="pill" style="cursor:pointer" onclick="showDetail('${l}')">${l.substring(0,8)}</span>`).join(' ') : '<span class="muted">none</span>'}
+            </div>
+        </div>
+
+        ${Array.isArray(item.evidence) && item.evidence.length ? `
+        <div class="panel" style="margin:10px 0 0; padding:10px 12px;">
+            <div class="panel-title">Evidence</div>
+            <ul class="history">
+                ${item.evidence.map(e => `<li>${escapeHtml(typeof e === 'string' ? e : JSON.stringify(e))}</li>`).join('')}
+            </ul>
+        </div>` : ''}
+
+        <div class="panel" style="margin:10px 0 0; padding:10px 12px;">
+            <div class="panel-title">History</div>
+            <ul class="history">
+                ${(item.review_history || []).map(h => `<li>${fmtDate(h.at)} — ${escapeHtml(h.action)} ${h.note ? ('(' + escapeHtml(h.note) + ')') : ''}</li>`).join('') || '<li class=\"muted\">-</li>'}
+            </ul>
+        </div>
+
+        <div class="card-footer" style="margin-top:10px">
+            <input type="text" class="reason-input" placeholder="Grund (optional)" id="reason-modal-${item.id}"/>
+            <div class="actions">
+                <button class="btn-ok" onclick="confirm('${item.id}', event, 'modal')">✅</button>
+                <button class="btn-no" onclick="reject('${item.id}', event, 'modal')">❌</button>
+                <button class="btn-archive" onclick="refresh('${item.id}', event)">🔄</button>
+            </div>
+        </div>
     `;
     document.getElementById('detailModal').classList.add('open');
 }
@@ -1120,6 +1168,12 @@ setInterval(() => {
 // ─── Init ───────────────────────────────────────────────────────────────────
 loadStats();
 loadCards();
+document.getElementById('detailModal').addEventListener('click', (e) => {
+    if (e.target && e.target.id === 'detailModal') closeModal();
+});
+document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') closeModal();
+});
 function renderCardsWithSuggestions() {
     const el = document.getElementById('cards');
     el.innerHTML = state.items.map(item => {