superlocalmemory 3.0.17 → 3.0.18

package/ui/js/recall-lab.js

@@ -1,4 +1,4 @@
-// SuperLocalMemory V3 — Recall Lab with Pagination
+// SuperLocalMemory V3 — Recall Lab with Dual-Display + Pagination
 // Part of Qualixar | https://superlocalmemory.com
 
 var recallLabState = {
@@ -6,6 +6,7 @@ var recallLabState = {
     page: 0,
     perPage: 10,
     query: '',
+    synthesis: '',
 };
 
 document.getElementById('recall-lab-search')?.addEventListener('click', function() {
@@ -16,13 +17,13 @@ document.getElementById('recall-lab-search')?.addEventListener('click', function
     recallLabState.page = 0;
     var perPageEl = document.getElementById('recall-lab-per-page');
     recallLabState.perPage = perPageEl ? parseInt(perPageEl.value) : 10;
-    var fetchLimit = Math.max(recallLabState.perPage * 5, 50); // Fetch up to 5 pages
+    var fetchLimit = Math.max(recallLabState.perPage * 5, 50);
 
     var resultsDiv = document.getElementById('recall-lab-results');
     var metaDiv = document.getElementById('recall-lab-meta');
     resultsDiv.textContent = '';
     var spinner = document.createElement('div');
-    spinner.className = 'text-center';
+    spinner.className = 'text-center py-4';
     var spinnerInner = document.createElement('div');
     spinnerInner.className = 'spinner-border text-primary';
     spinner.appendChild(spinnerInner);
@@ -31,7 +32,7 @@ document.getElementById('recall-lab-search')?.addEventListener('click', function
     fetch('/api/v3/recall/trace', {
         method: 'POST',
         headers: {'Content-Type': 'application/json'},
-        body: JSON.stringify({query: query, limit: fetchLimit})
+        body: JSON.stringify({query: query, limit: fetchLimit, synthesize: true})
     }).then(function(r) { return r.json(); }).then(function(data) {
         if (data.error) {
             resultsDiv.textContent = '';
@@ -50,6 +51,7 @@ document.getElementById('recall-lab-search')?.addEventListener('click', function
         appendMetaField(metaDiv, 'Time: ', (data.retrieval_time_ms || 0).toFixed(0) + 'ms');
 
         recallLabState.allResults = data.results || [];
+        recallLabState.synthesis = data.synthesis || '';
 
         if (recallLabState.allResults.length === 0) {
             resultsDiv.textContent = '';
@@ -80,6 +82,20 @@ function renderRecallPage() {
     var pageResults = results.slice(start, end);
     var totalPages = Math.ceil(results.length / recallLabState.perPage);
 
+    // Synthesis banner (Mode B/C only)
+    if (recallLabState.synthesis && recallLabState.page === 0) {
+        var synBanner = document.createElement('div');
+        synBanner.className = 'alert alert-light border-start border-4 border-primary mb-3';
+        var synTitle = document.createElement('strong');
+        synTitle.textContent = 'AI Summary';
+        synBanner.appendChild(synTitle);
+        synBanner.appendChild(document.createElement('br'));
+        var synText = document.createElement('span');
+        synText.textContent = recallLabState.synthesis;
+        synBanner.appendChild(synText);
+        resultsDiv.appendChild(synBanner);
+    }
+
     var listGroup = document.createElement('div');
     listGroup.className = 'list-group';
 
@@ -87,60 +103,108 @@ function renderRecallPage() {
         var globalIndex = start + i;
         var channels = r.channel_scores || {};
         var maxChannel = Math.max(channels.semantic || 0, channels.bm25 || 0, channels.entity_graph || 0, channels.temporal || 0) || 1;
+        var hasSource = r.source_content && r.source_content.length > 0;
+        var displayText = hasSource ? r.source_content : r.content;
 
         var item = document.createElement('div');
-        item.className = 'list-group-item list-group-item-action';
+        item.className = 'list-group-item';
+
+        // Score badge row
+        var scoreRow = document.createElement('div');
+        scoreRow.className = 'd-flex justify-content-between align-items-center mb-1';
+        var numLabel = document.createElement('strong');
+        numLabel.textContent = '#' + (globalIndex + 1);
+        scoreRow.appendChild(numLabel);
+        var scoreBadges = document.createElement('div');
+        scoreBadges.innerHTML = '<span class="badge bg-primary me-1">Score: ' + r.score + '</span>' +
+            '<span class="badge bg-secondary me-1">Trust: ' + r.trust_score + '</span>' +
+            '<span class="badge bg-outline-info" style="border:1px solid #0dcaf0;color:#0dcaf0;">Conf: ' + r.confidence + '</span>';
+        scoreRow.appendChild(scoreBadges);
+        item.appendChild(scoreRow);
+
+        // Original memory text (primary display)
+        var contentDiv = document.createElement('div');
+        contentDiv.className = 'mb-2';
+        contentDiv.style.cssText = 'white-space:pre-wrap; line-height:1.5;';
+        var truncated = displayText.length > 500 ? displayText.substring(0, 500) + '...' : displayText;
+        contentDiv.textContent = truncated;
+        item.appendChild(contentDiv);
+
+        // Expandable atomic fact section (only if source differs from content)
+        if (hasSource && r.content !== r.source_content) {
+            var expandBtn = document.createElement('button');
+            expandBtn.className = 'btn btn-sm btn-outline-secondary mb-2';
+            expandBtn.textContent = 'Show matched fact + channels';
+            var factSection = document.createElement('div');
+            factSection.style.display = 'none';
+            factSection.className = 'border-top pt-2 mt-1';
+
+            var factLabel = document.createElement('small');
+            factLabel.className = 'text-muted d-block mb-1';
+            factLabel.textContent = 'Matched atomic fact:';
+            factSection.appendChild(factLabel);
+
+            var factContent = document.createElement('div');
+            factContent.className = 'small bg-light p-2 rounded mb-2';
+            factContent.textContent = r.content;
+            factSection.appendChild(factContent);
+
+            // Channel bars
+            factSection.appendChild(buildChannelBar('Semantic', channels.semantic || 0, maxChannel, 'primary'));
+            factSection.appendChild(buildChannelBar('BM25', channels.bm25 || 0, maxChannel, 'success'));
+            factSection.appendChild(buildChannelBar('Entity', channels.entity_graph || 0, maxChannel, 'info'));
+            factSection.appendChild(buildChannelBar('Temporal', channels.temporal || 0, maxChannel, 'warning'));
+
+            expandBtn.addEventListener('click', function() {
+                var visible = factSection.style.display !== 'none';
+                factSection.style.display = visible ? 'none' : 'block';
+                expandBtn.textContent = visible ? 'Show matched fact + channels' : 'Hide matched fact';
+            });
+
+            item.appendChild(expandBtn);
+            item.appendChild(factSection);
+        } else {
+            // No source_content — show channel bars inline
+            var barsDiv = document.createElement('div');
+            barsDiv.className = 'mt-1';
+            barsDiv.appendChild(buildChannelBar('Semantic', channels.semantic || 0, maxChannel, 'primary'));
+            barsDiv.appendChild(buildChannelBar('BM25', channels.bm25 || 0, maxChannel, 'success'));
+            barsDiv.appendChild(buildChannelBar('Entity', channels.entity_graph || 0, maxChannel, 'info'));
+            barsDiv.appendChild(buildChannelBar('Temporal', channels.temporal || 0, maxChannel, 'warning'));
+            item.appendChild(barsDiv);
+        }
+
+        // Click for detail modal
         item.style.cursor = 'pointer';
-        item.title = 'Click to view full memory';
         (function(result) {
-            item.addEventListener('click', function() {
+            contentDiv.addEventListener('click', function() {
                 if (typeof openMemoryDetail === 'function') {
                     openMemoryDetail({
                         id: result.fact_id,
-                        content: result.content,
+                        memory_id: result.memory_id,
+                        content: result.source_content || result.content,
                         score: result.score,
                         importance: Math.round((result.confidence || 0.5) * 10),
                         category: 'recall',
-                        tags: Object.keys(result.channel_scores || {}).join(', '),
                         created_at: null,
                         trust_score: result.trust_score,
                         channel_scores: result.channel_scores
-                    });
+                    }, 'recall'); // source='recall': show View Original, hide Expand Neighbors
                 }
             });
         })(r);
 
-        var header = document.createElement('h6');
-        header.className = 'mb-1';
-        header.textContent = (globalIndex + 1) + '. ' + (r.content || '').substring(0, 200);
-        item.appendChild(header);
-
-        var meta = document.createElement('small');
-        meta.className = 'text-muted';
-        meta.textContent = 'Score: ' + r.score + ' | Trust: ' + r.trust_score + ' | Confidence: ' + r.confidence;
-        item.appendChild(meta);
-
-        var barsDiv = document.createElement('div');
-        barsDiv.className = 'mt-2';
-        barsDiv.appendChild(buildChannelBar('Semantic', channels.semantic || 0, maxChannel, 'primary'));
-        barsDiv.appendChild(buildChannelBar('BM25', channels.bm25 || 0, maxChannel, 'success'));
-        barsDiv.appendChild(buildChannelBar('Entity', channels.entity_graph || 0, maxChannel, 'info'));
-        barsDiv.appendChild(buildChannelBar('Temporal', channels.temporal || 0, maxChannel, 'warning'));
-        item.appendChild(barsDiv);
-
         listGroup.appendChild(item);
     });
     resultsDiv.appendChild(listGroup);
 
-    // Pagination controls
+    // Pagination
     if (totalPages > 1) {
         var nav = document.createElement('nav');
         nav.className = 'mt-3';
-        nav.setAttribute('aria-label', 'Recall results pagination');
         var ul = document.createElement('ul');
         ul.className = 'pagination justify-content-center';
 
-        // Prev
         var prevLi = document.createElement('li');
         prevLi.className = 'page-item' + (recallLabState.page === 0 ? ' disabled' : '');
         var prevA = document.createElement('a');
@@ -149,15 +213,11 @@ function renderRecallPage() {
         prevA.textContent = 'Previous';
         prevA.addEventListener('click', function(e) {
             e.preventDefault();
-            if (recallLabState.page > 0) {
-                recallLabState.page--;
-                renderRecallPage();
-            }
+            if (recallLabState.page > 0) { recallLabState.page--; renderRecallPage(); }
         });
         prevLi.appendChild(prevA);
         ul.appendChild(prevLi);
 
-        // Page numbers
         for (var p = 0; p < totalPages; p++) {
             var li = document.createElement('li');
             li.className = 'page-item' + (p === recallLabState.page ? ' active' : '');
@@ -176,7 +236,6 @@ function renderRecallPage() {
             ul.appendChild(li);
         }
 
-        // Next
         var nextLi = document.createElement('li');
         nextLi.className = 'page-item' + (recallLabState.page >= totalPages - 1 ? ' disabled' : '');
         var nextA = document.createElement('a');
@@ -185,18 +244,13 @@ function renderRecallPage() {
         nextA.textContent = 'Next';
         nextA.addEventListener('click', function(e) {
             e.preventDefault();
-            if (recallLabState.page < totalPages - 1) {
-                recallLabState.page++;
-                renderRecallPage();
-            }
+            if (recallLabState.page < totalPages - 1) { recallLabState.page++; renderRecallPage(); }
         });
         nextLi.appendChild(nextA);
         ul.appendChild(nextLi);
-
         nav.appendChild(ul);
         resultsDiv.appendChild(nav);
 
-        // Page info
         var info = document.createElement('div');
         info.className = 'text-center text-muted small';
         info.textContent = 'Showing ' + (start + 1) + '-' + end + ' of ' + results.length + ' results';
@@ -205,8 +259,7 @@ function renderRecallPage() {
 }
 
 function appendMetaField(parent, label, value) {
-    var text = document.createTextNode(label);
-    parent.appendChild(text);
+    parent.appendChild(document.createTextNode(label));
     var strong = document.createElement('strong');
     strong.textContent = value;
     parent.appendChild(strong);
@@ -234,7 +287,6 @@ function buildChannelBar(name, score, max, color) {
     return row;
 }
 
-// Enter key support
 document.getElementById('recall-lab-query')?.addEventListener('keydown', function(e) {
     if (e.key === 'Enter') document.getElementById('recall-lab-search')?.click();
 });