superlocalmemory 3.0.16 → 3.0.18

package/ui/js/clusters.js

@@ -1,7 +1,5 @@
-// SuperLocalMemory V2 - Clusters View
-// Depends on: core.js
-//
-// Security: All dynamic values escaped via escapeHtml(). Data from local DB only.
+// SuperLocalMemory V3 - Clusters View
+// Part of Qualixar | https://superlocalmemory.com
 
 async function loadClusters() {
     showLoading('clusters-list', 'Loading clusters...');
@@ -18,152 +16,191 @@ async function loadClusters() {
 function renderClusters(clusters) {
     var container = document.getElementById('clusters-list');
     if (!clusters || clusters.length === 0) {
-        showEmpty('clusters-list', 'collection', 'No clusters found. Run "slm build-graph" to generate clusters.');
+        showEmpty('clusters-list', 'collection', 'No clusters found yet. Clusters form automatically as you store related memories.');
         return;
     }
 
-    var colors = ['#667eea', '#f093fb', '#4facfe', '#43e97b', '#fa709a'];
+    var colors = ['#667eea', '#f093fb', '#4facfe', '#43e97b', '#fa709a', '#30cfd0', '#764ba2', '#f5576c'];
     container.textContent = '';
 
     clusters.forEach(function(cluster, idx) {
         var color = colors[idx % colors.length];
 
         var card = document.createElement('div');
-        card.className = 'card cluster-card';
-        card.style.cssText = 'border-color:' + color + '; cursor:pointer;';
-        card.setAttribute('data-cluster-id', cluster.cluster_id);
-        card.title = 'Click to filter graph to this cluster';
+        card.className = 'card mb-2';
+        card.style.borderLeft = '4px solid ' + color;
 
         var body = document.createElement('div');
-        body.className = 'card-body';
+        body.className = 'card-body py-2 px-3';
+        body.style.cursor = 'pointer';
+
+        // Header row
+        var headerRow = document.createElement('div');
+        headerRow.className = 'd-flex justify-content-between align-items-center';
 
         var title = document.createElement('h6');
-        title.className = 'card-title';
-        title.textContent = 'Cluster ' + cluster.cluster_id + ' ';
+        title.className = 'mb-0';
+        title.textContent = 'Cluster ' + cluster.cluster_id;
+
+        var badges = document.createElement('div');
         var countBadge = document.createElement('span');
-        countBadge.className = 'badge bg-secondary float-end';
+        countBadge.className = 'badge bg-secondary me-1';
         countBadge.textContent = cluster.member_count + ' memories';
-        title.appendChild(countBadge);
-        body.appendChild(title);
-
-        var imp = document.createElement('p');
-        imp.className = 'mb-2';
-        imp.textContent = 'Avg Importance: ' + parseFloat(cluster.avg_importance).toFixed(1);
-        body.appendChild(imp);
-
-        var cats = document.createElement('p');
-        cats.className = 'mb-2';
-        cats.textContent = 'Categories: ' + (cluster.categories || 'None');
-        body.appendChild(cats);
-
-        var entLabel = document.createElement('strong');
-        entLabel.textContent = 'Top Entities:';
-        body.appendChild(entLabel);
-        body.appendChild(document.createElement('br'));
-
-        if (cluster.top_entities && cluster.top_entities.length > 0) {
-            cluster.top_entities.forEach(function(e) {
-                var badge = document.createElement('span');
-                badge.className = 'badge bg-info entity-badge';
-                badge.textContent = e.entity + ' (' + e.count + ')';
-                body.appendChild(badge);
-                body.appendChild(document.createTextNode(' '));
-            });
-        } else {
-            var none = document.createElement('span');
-            none.className = 'text-muted';
-            none.textContent = 'No entities';
-            body.appendChild(none);
+        badges.appendChild(countBadge);
+
+        if (cluster.avg_importance) {
+            var impBadge = document.createElement('span');
+            impBadge.className = 'badge bg-outline-primary';
+            impBadge.style.cssText = 'border:1px solid #667eea; color:#667eea;';
+            impBadge.textContent = 'imp: ' + parseFloat(cluster.avg_importance).toFixed(1);
+            badges.appendChild(impBadge);
+        }
+
+        var expandIcon = document.createElement('i');
+        expandIcon.className = 'bi bi-chevron-down ms-2';
+        expandIcon.style.transition = 'transform 0.2s';
+        badges.appendChild(expandIcon);
+
+        headerRow.appendChild(title);
+        headerRow.appendChild(badges);
+        body.appendChild(headerRow);
+
+        // Summary line (categories if available)
+        if (cluster.categories) {
+            var catLine = document.createElement('small');
+            catLine.className = 'text-muted';
+            catLine.textContent = cluster.categories;
+            body.appendChild(catLine);
         }
 
+        // Expandable member area (hidden by default)
+        var memberArea = document.createElement('div');
+        memberArea.className = 'mt-2';
+        memberArea.style.display = 'none';
+        memberArea.id = 'cluster-members-' + cluster.cluster_id;
+
+        var loadingText = document.createElement('div');
+        loadingText.className = 'text-center text-muted small py-2';
+        loadingText.textContent = 'Loading members...';
+        memberArea.appendChild(loadingText);
+
+        body.appendChild(memberArea);
         card.appendChild(body);
         container.appendChild(card);
 
-        // v2.6.5: Click card → filter graph to this cluster
-        card.addEventListener('click', function(e) {
-            // Don't trigger if clicking on badge or entity
-            if (e.target.classList.contains('entity-badge') || e.target.classList.contains('badge')) {
-                return;
-            }
+        // Click to expand/collapse
+        var expanded = false;
+        body.addEventListener('click', function(e) {
+            expanded = !expanded;
+            memberArea.style.display = expanded ? 'block' : 'none';
+            expandIcon.style.transform = expanded ? 'rotate(180deg)' : 'rotate(0)';
 
-            const clusterId = parseInt(card.getAttribute('data-cluster-id'));
-            filterGraphToCluster(clusterId);
+            if (expanded && memberArea.children.length === 1 && memberArea.children[0] === loadingText) {
+                loadClusterMembers(cluster.cluster_id, memberArea);
+            }
         });
+    });
+}
 
-        // v2.6.5: Click entity badge → filter graph by entity
-        if (cluster.top_entities && cluster.top_entities.length > 0) {
-            const entityBadges = body.querySelectorAll('.entity-badge');
-            entityBadges.forEach(function(badge) {
-                badge.style.cursor = 'pointer';
-                badge.title = 'Click to show memories with this entity';
-                badge.addEventListener('click', function(e) {
-                    e.stopPropagation(); // Don't trigger card click
-                    const entityText = badge.textContent.split(' (')[0]; // Extract entity name
-                    filterGraphByEntity(entityText);
-                });
-            });
+async function loadClusterMembers(clusterId, container) {
+    try {
+        var response = await fetch('/api/clusters/' + clusterId + '?limit=10');
+        var data = await response.json();
+        container.textContent = '';
+
+        // Show cluster summary if available
+        if (data.summary) {
+            var summaryDiv = document.createElement('div');
+            summaryDiv.className = 'alert alert-light border-start border-3 border-primary py-2 px-3 mb-2 small';
+            var summaryLabel = document.createElement('strong');
+            summaryLabel.textContent = 'Summary: ';
+            summaryDiv.appendChild(summaryLabel);
+            summaryDiv.appendChild(document.createTextNode(data.summary));
+            container.appendChild(summaryDiv);
         }
 
-        // v2.6.5: Click "X memories" badge → show list in sidebar (future feature)
-        countBadge.style.cursor = 'pointer';
-        countBadge.title = 'Click to view memories in this cluster';
-        countBadge.addEventListener('click', function(e) {
-            e.stopPropagation(); // Don't trigger card click
-            showClusterMemories(cluster.cluster_id);
+        if (!data.members || data.members.length === 0) {
+            var empty = document.createElement('div');
+            empty.className = 'text-muted small';
+            empty.textContent = 'No members found.';
+            container.appendChild(empty);
+            return;
+        }
+
+        data.members.forEach(function(m, i) {
+            var row = document.createElement('div');
+            row.className = 'border-bottom py-1';
+            if (i === data.members.length - 1) row.className = 'py-1';
+
+            var content = document.createElement('div');
+            content.className = 'small';
+            var text = m.content || m.summary || '';
+            content.textContent = (i + 1) + '. ' + (text.length > 150 ? text.substring(0, 150) + '...' : text);
+            row.appendChild(content);
+
+            var meta = document.createElement('div');
+            meta.className = 'text-muted';
+            meta.style.fontSize = '0.7rem';
+            var parts = [];
+            if (m.category) parts.push(m.category);
+            if (m.importance) parts.push('imp: ' + m.importance);
+            if (m.created_at) parts.push(m.created_at.substring(0, 10));
+            meta.textContent = parts.join(' | ');
+            row.appendChild(meta);
+
+            container.appendChild(row);
         });
-    });
+
+        // View in graph button
+        var graphBtn = document.createElement('button');
+        graphBtn.className = 'btn btn-sm btn-outline-primary mt-2';
+        graphBtn.textContent = 'View in Knowledge Graph';
+        graphBtn.addEventListener('click', function(e) {
+            e.stopPropagation();
+            filterGraphToCluster(clusterId);
+        });
+        container.appendChild(graphBtn);
+
+    } catch (error) {
+        container.textContent = '';
+        var errDiv = document.createElement('div');
+        errDiv.className = 'text-danger small';
+        errDiv.textContent = 'Failed to load: ' + error.message;
+        container.appendChild(errDiv);
+    }
 }
 
-// v2.6.5: Filter graph to a specific cluster
 function filterGraphToCluster(clusterId) {
-    // Switch to Graph tab
-    const graphTab = document.querySelector('a[href="#graph"]');
-    if (graphTab) {
-        graphTab.click();
-    }
+    var graphTab = document.querySelector('a[href="#graph"]');
+    if (graphTab) graphTab.click();
 
-    // Apply filter after a delay (for tab to load)
     setTimeout(function() {
         if (typeof filterState !== 'undefined' && typeof filterByCluster === 'function' && typeof renderGraph === 'function') {
             filterState.cluster_id = clusterId;
-            const filtered = filterByCluster(originalGraphData, clusterId);
+            var filtered = filterByCluster(originalGraphData, clusterId);
             renderGraph(filtered);
-
-            // Update URL
-            const url = new URL(window.location);
+            var url = new URL(window.location);
             url.searchParams.set('cluster_id', clusterId);
             window.history.replaceState({}, '', url);
         }
     }, 300);
 }
 
-// v2.6.5: Filter graph by entity
 function filterGraphByEntity(entity) {
-    // Switch to Graph tab
-    const graphTab = document.querySelector('a[href="#graph"]');
-    if (graphTab) {
-        graphTab.click();
-    }
+    var graphTab = document.querySelector('a[href="#graph"]');
+    if (graphTab) graphTab.click();
 
-    // Apply filter after a delay
     setTimeout(function() {
         if (typeof filterState !== 'undefined' && typeof filterByEntity === 'function' && typeof renderGraph === 'function') {
             filterState.entity = entity;
-            const filtered = filterByEntity(originalGraphData, entity);
+            var filtered = filterByEntity(originalGraphData, entity);
             renderGraph(filtered);
         }
     }, 300);
 }
 
-// v2.6.5: Show memories in a cluster (future: sidebar list)
 function showClusterMemories(clusterId) {
-    // For now, just filter Memories tab
-    const memoriesTab = document.querySelector('a[href="#memories"]');
-    if (memoriesTab) {
-        memoriesTab.click();
-    }
-
-    // TODO: Implement sidebar memory list view
-    console.log('Show memories for cluster', clusterId);
-    showToast('Filtering memories for cluster ' + clusterId);
+    var memoriesTab = document.querySelector('a[href="#memories"]');
+    if (memoriesTab) memoriesTab.click();
+    if (typeof showToast === 'function') showToast('Filtering memories for cluster ' + clusterId);
 }

package/ui/js/graph-core.js

@@ -98,8 +98,10 @@ function transformDataForCytoscape(data) {
 
     // Add nodes
     data.nodes.forEach(node => {
-        const label = node.category || node.project_name || `Memory #${node.id}`;
         const contentPreview = node.content_preview || node.summary || node.content || '';
+        // Label: first 4 words of content (readable on node), fallback to category
+        const contentWords = contentPreview.split(/\s+/).slice(0, 4).join(' ');
+        const label = contentWords || node.category || `Memory #${node.id}`;
         const preview = contentPreview.substring(0, 50) + (contentPreview.length > 50 ? '...' : '');
 
         elements.push({

package/ui/js/graph-interactions.js

@@ -32,7 +32,7 @@ function addCytoscapeInteractions() {
         cy.elements().removeClass('highlighted').removeClass('dimmed');
     });
 
-    // Single click: Open modal preview
+    // Single click: Open modal preview (source='graph' for context-aware buttons)
     cy.on('tap', 'node', function(evt) {
         const node = evt.target;
         openMemoryModal(node);
@@ -136,11 +136,8 @@ function openMemoryModal(node) {
         created_at: node.data('created_at')
     };
 
-    // Call existing openMemoryDetail function from modal.js
     if (typeof openMemoryDetail === 'function') {
-        openMemoryDetail(memoryData);
-    } else {
-        console.error('openMemoryDetail function not found. Is modal.js loaded?');
+        openMemoryDetail(memoryData, 'graph'); // source='graph': show Expand Neighbors, hide View Original
     }
 }
 

package/ui/js/memories.js

@@ -55,11 +55,14 @@ function renderMemoriesTable(memories, showScores) {
                 + '</div></div></td>';
         }
 
+        var memId = mem.memory_id || mem.id;
+        var expandBtnHtml = '<button class="btn btn-sm btn-outline-secondary expand-facts-btn ms-1" data-memory-id="' + escapeHtml(String(memId)) + '" title="View atomic facts">&#9660;</button>';
+
         rows += '<tr data-mem-idx="' + idx + '">'
             + '<td>' + escapeHtml(String(mem.id)) + '</td>'
             + '<td><span class="badge bg-primary">' + escapeHtml(mem.category || 'None') + '</span></td>'
             + '<td><small>' + escapeHtml(mem.project_name || '-') + '</small></td>'
-            + '<td class="memory-content" title="' + escapeHtml(content) + '">' + escapeHtml(contentPreview) + '</td>'
+            + '<td class="memory-content" title="' + escapeHtml(content) + '">' + escapeHtml(contentPreview) + expandBtnHtml + '</td>'
             + scoreCell
             + '<td><span class="badge bg-' + importanceClass + ' badge-importance">' + escapeHtml(String(importance)) + '</span></td>'
             + '<td>' + escapeHtml(String(mem.cluster_id || '-')) + '</td>'
@@ -87,8 +90,18 @@ function renderMemoriesTable(memories, showScores) {
         table.addEventListener('click', function(e) {
             var th = e.target.closest('th.sortable');
             if (th) { handleSort(th); return; }
+
+            // Expand facts button
+            var expandBtn = e.target.closest('.expand-facts-btn');
+            if (expandBtn) {
+                e.stopPropagation();
+                var memId = expandBtn.getAttribute('data-memory-id');
+                toggleFactsExpansion(expandBtn, memId);
+                return;
+            }
+
             var row = e.target.closest('tr[data-mem-idx]');
-            if (row) {
+            if (row && !e.target.closest('.expand-facts-btn')) {
                 var idx = parseInt(row.getAttribute('data-mem-idx'), 10);
                 if (window._slmMemories && window._slmMemories[idx]) {
                     openMemoryDetail(window._slmMemories[idx]);
@@ -169,6 +182,56 @@ function scrollToMemory(memoryId) {
     scrollToMemoryInTable(memoryId);
 }
 
+async function toggleFactsExpansion(btn, memoryId) {
+    var row = btn.closest('tr');
+    if (!row) return;
+    var existingExpansion = row.nextElementSibling;
+    if (existingExpansion && existingExpansion.classList.contains('facts-expansion-row')) {
+        existingExpansion.remove();
+        btn.innerHTML = '&#9660;';
+        return;
+    }
+
+    btn.innerHTML = '&#8987;';
+    try {
+        var resp = await fetch('/api/memories/' + encodeURIComponent(memoryId) + '/facts');
+        var data = await resp.json();
+        var expRow = document.createElement('tr');
+        expRow.className = 'facts-expansion-row';
+        var expCell = document.createElement('td');
+        expCell.colSpan = 8;
+        expCell.style.cssText = 'background:#f8f9fa; padding:8px 16px;';
+
+        if (data.facts && data.facts.length > 0) {
+            var label = document.createElement('small');
+            label.className = 'text-muted';
+            label.textContent = data.fact_count + ' atomic facts:';
+            expCell.appendChild(label);
+
+            data.facts.forEach(function(f, i) {
+                var fDiv = document.createElement('div');
+                fDiv.className = 'small py-1' + (i < data.facts.length - 1 ? ' border-bottom' : '');
+                var badge = document.createElement('span');
+                badge.className = 'badge bg-secondary me-1';
+                badge.style.fontSize = '0.65rem';
+                badge.textContent = f.fact_type;
+                fDiv.appendChild(badge);
+                fDiv.appendChild(document.createTextNode(f.content.substring(0, 200)));
+                expCell.appendChild(fDiv);
+            });
+        } else {
+            expCell.textContent = 'No atomic facts found for this memory.';
+        }
+
+        expRow.appendChild(expCell);
+        row.parentNode.insertBefore(expRow, row.nextSibling);
+        btn.innerHTML = '&#9650;';
+    } catch (err) {
+        btn.innerHTML = '&#9660;';
+        console.error('Failed to load facts:', err);
+    }
+}
+
 function scrollToMemoryInTable(memoryId) {
     const memId = String(memoryId);
 

package/ui/js/modal.js

@@ -6,8 +6,11 @@
 
 var currentMemoryDetail = null;
 
-function openMemoryDetail(mem) {
+function openMemoryDetail(mem, source) {
+    // source: 'graph', 'recall', 'memories', or undefined
     currentMemoryDetail = mem;
+    var fromGraph = source === 'graph';
+    var fromRecall = source === 'recall';
     var body = document.getElementById('memory-detail-body');
     if (!mem) {
         body.textContent = 'No memory data';
@@ -62,55 +65,89 @@ function openMemoryDetail(mem) {
 
     body.appendChild(dl);
 
-    // Graph action buttons (v2.6.5)
-    if (mem.cluster_id || mem.id) {
+    // Context-aware action buttons
+    if (mem.id) {
         body.appendChild(document.createElement('hr'));
 
         var actionsDiv = document.createElement('div');
         actionsDiv.className = 'memory-detail-graph-actions';
         actionsDiv.style.cssText = 'display:flex; gap:10px; flex-wrap:wrap;';
 
-        // Button 1: View Full Memory (navigate to Memories tab)
-        var viewBtn = document.createElement('button');
-        viewBtn.className = 'btn btn-primary btn-sm';
-        var viewIcon = document.createElement('i');
-        viewIcon.className = 'bi bi-journal-text';
-        viewBtn.appendChild(viewIcon);
-        viewBtn.appendChild(document.createTextNode(' View Full Memory'));
-        viewBtn.onclick = function() {
-            modal.hide();
-            if (typeof navigateToMemoryTab === 'function') {
-                navigateToMemoryTab(mem.id);
-            } else {
-                // Fallback: just switch tab
-                const memoriesTab = document.querySelector('a[href="#memories"]');
-                if (memoriesTab) memoriesTab.click();
-            }
-        };
-        actionsDiv.appendChild(viewBtn);
+        // "View Original Memory" — shown on Recall Lab + Memories, hidden on Graph
+        // (On Graph the node IS the memory; on Recall Lab we have a fact, not the original)
+        if (!fromGraph) {
+            var viewBtn = document.createElement('button');
+            viewBtn.className = 'btn btn-primary btn-sm';
+            viewBtn.innerHTML = '<i class="bi bi-journal-text"></i> View Original Memory';
+            viewBtn.onclick = function() {
+                var mid = mem.memory_id || mem.id;
+                viewBtn.disabled = true;
+                viewBtn.textContent = 'Loading...';
+                fetch('/api/memories/' + encodeURIComponent(mid) + '/facts')
+                    .then(function(r) { return r.json(); })
+                    .then(function(data) {
+                        if (data.ok && data.original_content) {
+                            contentDiv.textContent = '';
+                            var origLabel = document.createElement('small');
+                            origLabel.className = 'text-muted d-block mb-1';
+                            origLabel.textContent = 'Original memory (' + (data.fact_count || 0) + ' atomic facts extracted):';
+                            contentDiv.appendChild(origLabel);
+                            var origText = document.createElement('div');
+                            origText.style.cssText = 'white-space:pre-wrap;background:#f8f9fa;padding:10px;border-radius:6px;margin-bottom:8px;';
+                            origText.textContent = data.original_content;
+                            contentDiv.appendChild(origText);
+                            if (data.facts && data.facts.length > 0) {
+                                var toggle = document.createElement('button');
+                                toggle.className = 'btn btn-sm btn-outline-secondary mb-2';
+                                toggle.textContent = 'Show atomic facts (' + data.facts.length + ')';
+                                var factsDiv = document.createElement('div');
+                                factsDiv.style.display = 'none';
+                                data.facts.forEach(function(f) {
+                                    var fDiv = document.createElement('div');
+                                    fDiv.className = 'small py-1 border-bottom';
+                                    var badge = document.createElement('span');
+                                    badge.className = 'badge bg-secondary me-1';
+                                    badge.style.fontSize = '0.6rem';
+                                    badge.textContent = f.fact_type;
+                                    fDiv.appendChild(badge);
+                                    fDiv.appendChild(document.createTextNode(f.content));
+                                    factsDiv.appendChild(fDiv);
+                                });
+                                toggle.onclick = function() {
+                                    var hidden = factsDiv.style.display === 'none';
+                                    factsDiv.style.display = hidden ? 'block' : 'none';
+                                    toggle.textContent = hidden ? 'Hide atomic facts' : 'Show atomic facts (' + data.facts.length + ')';
+                                };
+                                contentDiv.appendChild(toggle);
+                                contentDiv.appendChild(factsDiv);
+                            }
+                            viewBtn.textContent = 'Showing original';
+                        } else {
+                            viewBtn.textContent = 'Not available';
+                        }
+                    }).catch(function() {
+                        viewBtn.textContent = 'Failed to load';
+                        viewBtn.disabled = false;
+                    });
+            };
+            actionsDiv.appendChild(viewBtn);
+        }
 
-        // Button 2: Expand Neighbors (show connected nodes in graph)
-        var expandBtn = document.createElement('button');
-        expandBtn.className = 'btn btn-outline-secondary btn-sm';
-        var expandIcon = document.createElement('i');
-        expandIcon.className = 'bi bi-diagram-3';
-        expandBtn.appendChild(expandIcon);
-        expandBtn.appendChild(document.createTextNode(' Expand Neighbors'));
-        expandBtn.onclick = function() {
-            modal.hide();
-            // Switch to Graph tab
-            const graphTab = document.querySelector('a[href="#graph"]');
-            if (graphTab) graphTab.click();
-            // Expand neighbors after a delay
-            setTimeout(function() {
-                if (typeof expandNeighbors === 'function') {
-                    expandNeighbors(mem.id);
-                }
-            }, 500);
-        };
-        actionsDiv.appendChild(expandBtn);
+        // "Expand Neighbors" — shown on Graph, hidden elsewhere (no graph context)
+        if (fromGraph) {
+            var expandBtn = document.createElement('button');
+            expandBtn.className = 'btn btn-outline-secondary btn-sm';
+            expandBtn.innerHTML = '<i class="bi bi-diagram-3"></i> Expand Neighbors';
+            expandBtn.onclick = function() {
+                modal.hide();
+                setTimeout(function() {
+                    if (typeof expandNeighbors === 'function') expandNeighbors(mem.id);
+                }, 300);
+            };
+            actionsDiv.appendChild(expandBtn);
+        }
 
-        // Button 3: Filter to Cluster (show only this cluster in graph)
+        // "Filter to Cluster" — always available if cluster exists
         if (mem.cluster_id) {
             var filterBtn = document.createElement('button');
             filterBtn.className = 'btn btn-outline-info btn-sm';