superlocalmemory 2.4.2 → 2.5.1

package/ui/js/agents.js

@@ -0,0 +1,192 @@
+// SuperLocalMemory V2 - Connected Agents + Trust Overview (v2.5)
+// Depends on: core.js
+// Security: All DOM built with safe methods (createElement/textContent).
+
+async function loadAgents() {
+    try {
+        var response = await fetch('/api/agents');
+        var data = await response.json();
+        var agents = data.agents || [];
+        var stats = data.stats || {};
+
+        var el;
+        el = document.getElementById('agent-stat-total');
+        if (el) el.textContent = (stats.total_agents || 0).toLocaleString();
+        el = document.getElementById('agent-stat-active');
+        if (el) el.textContent = (stats.active_last_24h || 0).toLocaleString();
+        el = document.getElementById('agent-stat-writes');
+        if (el) el.textContent = (stats.total_writes || 0).toLocaleString();
+        el = document.getElementById('agent-stat-recalls');
+        if (el) el.textContent = (stats.total_recalls || 0).toLocaleString();
+
+        var container = document.getElementById('agents-list');
+        if (!container) return;
+
+        if (agents.length === 0) {
+            container.textContent = '';
+            var empty = document.createElement('div');
+            empty.className = 'text-muted text-center py-4';
+            var emptyIcon = document.createElement('i');
+            emptyIcon.className = 'bi bi-robot';
+            emptyIcon.style.fontSize = '2rem';
+            empty.appendChild(emptyIcon);
+            var emptyText = document.createElement('p');
+            emptyText.className = 'mt-2';
+            emptyText.textContent = 'No agents registered yet. Agents appear automatically when they connect via MCP, CLI, or REST.';
+            empty.appendChild(emptyText);
+            container.appendChild(empty);
+            loadTrustOverview();
+            return;
+        }
+
+        var table = document.createElement('table');
+        table.className = 'table table-hover table-sm';
+        var thead = document.createElement('thead');
+        var headerRow = document.createElement('tr');
+        ['Agent', 'Protocol', 'Trust', 'Writes', 'Recalls', 'Last Seen'].forEach(function(h) {
+            var th = document.createElement('th');
+            th.textContent = h;
+            headerRow.appendChild(th);
+        });
+        thead.appendChild(headerRow);
+        table.appendChild(thead);
+
+        var tbody = document.createElement('tbody');
+        agents.forEach(function(agent) {
+            var tr = document.createElement('tr');
+
+            var tdName = document.createElement('td');
+            var strong = document.createElement('strong');
+            strong.textContent = agent.agent_name || agent.agent_id;
+            tdName.appendChild(strong);
+            tdName.appendChild(document.createElement('br'));
+            var smallId = document.createElement('small');
+            smallId.className = 'text-muted';
+            smallId.textContent = agent.agent_id;
+            tdName.appendChild(smallId);
+            tr.appendChild(tdName);
+
+            var tdProto = document.createElement('td');
+            var protoBadge = document.createElement('span');
+            var protocolColors = {
+                'mcp': 'bg-primary', 'cli': 'bg-success', 'rest': 'bg-info',
+                'python': 'bg-secondary', 'a2a': 'bg-warning'
+            };
+            protoBadge.className = 'badge ' + (protocolColors[agent.protocol] || 'bg-secondary');
+            protoBadge.textContent = agent.protocol;
+            tdProto.appendChild(protoBadge);
+            tr.appendChild(tdProto);
+
+            var tdTrust = document.createElement('td');
+            var trustScore = agent.trust_score != null ? agent.trust_score : 1.0;
+            tdTrust.className = trustScore < 0.7 ? 'text-danger fw-bold'
+                : trustScore < 0.9 ? 'text-warning fw-bold' : 'text-success fw-bold';
+            tdTrust.textContent = trustScore.toFixed(2);
+            tr.appendChild(tdTrust);
+
+            var tdW = document.createElement('td');
+            tdW.textContent = agent.memories_written || 0;
+            tr.appendChild(tdW);
+
+            var tdR = document.createElement('td');
+            tdR.textContent = agent.memories_recalled || 0;
+            tr.appendChild(tdR);
+
+            var tdLast = document.createElement('td');
+            var lastSmall = document.createElement('small');
+            lastSmall.textContent = agent.last_seen ? new Date(agent.last_seen).toLocaleString() : 'Never';
+            tdLast.appendChild(lastSmall);
+            tr.appendChild(tdLast);
+
+            tbody.appendChild(tr);
+        });
+        table.appendChild(tbody);
+
+        container.textContent = '';
+        container.appendChild(table);
+
+        loadTrustOverview();
+
+    } catch (err) {
+        console.log('Agents not available:', err);
+        var container = document.getElementById('agents-list');
+        if (container) {
+            container.textContent = '';
+            var msg = document.createElement('small');
+            msg.className = 'text-muted';
+            msg.textContent = 'Agent registry not available. This feature requires v2.5+.';
+            container.appendChild(msg);
+        }
+    }
+}
+
+async function loadTrustOverview() {
+    try {
+        var response = await fetch('/api/trust/stats');
+        var stats = await response.json();
+        var container = document.getElementById('trust-overview');
+        if (!container) return;
+
+        container.textContent = '';
+        var row = document.createElement('div');
+        row.className = 'row g-3';
+
+        var cardData = [
+            { value: (stats.total_signals || 0).toLocaleString(), label: 'Total Signals Collected', cls: '' },
+            { value: (stats.avg_trust_score || 1.0).toFixed(3), label: 'Average Trust Score', cls: '' },
+            { value: stats.enforcement || 'disabled', label: 'Enforcement Status', cls: 'text-info' }
+        ];
+
+        cardData.forEach(function(c) {
+            var col = document.createElement('div');
+            col.className = 'col-md-4';
+            var card = document.createElement('div');
+            card.className = 'border rounded p-3 text-center';
+            var val = document.createElement('div');
+            val.className = 'fs-4 fw-bold ' + c.cls;
+            val.textContent = c.value;
+            card.appendChild(val);
+            var lbl = document.createElement('small');
+            lbl.className = 'text-muted';
+            lbl.textContent = c.label;
+            card.appendChild(lbl);
+            col.appendChild(card);
+            row.appendChild(col);
+        });
+
+        container.appendChild(row);
+
+        if (stats.by_signal_type && Object.keys(stats.by_signal_type).length > 0) {
+            var breakdownDiv = document.createElement('div');
+            breakdownDiv.className = 'col-12 mt-3';
+            var h6 = document.createElement('h6');
+            h6.textContent = 'Signal Breakdown';
+            breakdownDiv.appendChild(h6);
+            var badgeWrap = document.createElement('div');
+            badgeWrap.className = 'd-flex flex-wrap gap-2';
+            Object.keys(stats.by_signal_type).forEach(function(type) {
+                var count = stats.by_signal_type[type];
+                var signalClass = (type.indexOf('high_volume') >= 0 || type.indexOf('quick_delete') >= 0)
+                    ? 'bg-danger' : (type.indexOf('recalled') >= 0 || type.indexOf('high_importance') >= 0)
+                    ? 'bg-success' : 'bg-secondary';
+                var b = document.createElement('span');
+                b.className = 'badge ' + signalClass;
+                b.textContent = type + ': ' + count;
+                badgeWrap.appendChild(b);
+            });
+            breakdownDiv.appendChild(badgeWrap);
+            container.appendChild(breakdownDiv);
+        }
+
+    } catch (err) {
+        console.log('Trust stats not available:', err);
+        var container = document.getElementById('trust-overview');
+        if (container) {
+            container.textContent = '';
+            var msg = document.createElement('small');
+            msg.className = 'text-muted';
+            msg.textContent = 'Trust scoring data will appear here once agents interact with memory.';
+            container.appendChild(msg);
+        }
+    }
+}

package/ui/js/clusters.js

@@ -0,0 +1,80 @@
+// SuperLocalMemory V2 - Clusters View
+// Depends on: core.js
+//
+// Security: All dynamic values escaped via escapeHtml(). Data from local DB only.
+
+async function loadClusters() {
+    showLoading('clusters-list', 'Loading clusters...');
+    try {
+        var response = await fetch('/api/clusters');
+        var data = await response.json();
+        renderClusters(data.clusters);
+    } catch (error) {
+        console.error('Error loading clusters:', error);
+        showEmpty('clusters-list', 'collection', 'Failed to load clusters');
+    }
+}
+
+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.');
+        return;
+    }
+
+    var colors = ['#667eea', '#f093fb', '#4facfe', '#43e97b', '#fa709a'];
+    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.borderColor = color;
+
+        var body = document.createElement('div');
+        body.className = 'card-body';
+
+        var title = document.createElement('h6');
+        title.className = 'card-title';
+        title.textContent = 'Cluster ' + cluster.cluster_id + ' ';
+        var countBadge = document.createElement('span');
+        countBadge.className = 'badge bg-secondary float-end';
+        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);
+        }
+
+        card.appendChild(body);
+        container.appendChild(card);
+    });
+}

package/ui/js/core.js

@@ -0,0 +1,230 @@
+// SuperLocalMemory V2 - Core Utilities
+// Shared functions used by all other modules.
+// Security: All dynamic text MUST pass through escapeHtml() before DOM insertion.
+// Data originates from our own trusted local SQLite database (localhost only).
+
+// ============================================================================
+// Dark Mode
+// ============================================================================
+
+function initDarkMode() {
+    var saved = localStorage.getItem('slm-theme');
+    var theme;
+    if (saved) {
+        theme = saved;
+    } else {
+        theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    }
+    applyTheme(theme);
+}
+
+function applyTheme(theme) {
+    document.documentElement.setAttribute('data-bs-theme', theme);
+    var icon = document.getElementById('theme-icon');
+    if (icon) {
+        icon.className = theme === 'dark' ? 'bi bi-moon-stars-fill' : 'bi bi-sun-fill';
+    }
+}
+
+function toggleDarkMode() {
+    var current = document.documentElement.getAttribute('data-bs-theme');
+    var next = current === 'dark' ? 'light' : 'dark';
+    localStorage.setItem('slm-theme', next);
+    applyTheme(next);
+}
+
+// ============================================================================
+// Animated Counter
+// ============================================================================
+
+function animateCounter(elementId, target) {
+    var el = document.getElementById(elementId);
+    if (!el) return;
+    var duration = 600;
+    var startTime = null;
+
+    function step(timestamp) {
+        if (!startTime) startTime = timestamp;
+        var progress = Math.min((timestamp - startTime) / duration, 1);
+        var eased = 1 - Math.pow(1 - progress, 3);
+        el.textContent = Math.floor(eased * target).toLocaleString();
+        if (progress < 1) {
+            requestAnimationFrame(step);
+        } else {
+            el.textContent = target.toLocaleString();
+        }
+    }
+
+    if (target === 0) {
+        el.textContent = '0';
+    } else {
+        requestAnimationFrame(step);
+    }
+}
+
+// ============================================================================
+// HTML Escaping — all dynamic text MUST pass through this before DOM insertion
+// ============================================================================
+
+function escapeHtml(text) {
+    if (!text) return '';
+    var div = document.createElement('div');
+    div.appendChild(document.createTextNode(String(text)));
+    return div.innerHTML;
+}
+
+// ============================================================================
+// Loading / Empty State helpers
+// ============================================================================
+
+function showLoading(containerId, message) {
+    var el = document.getElementById(containerId);
+    if (!el) return;
+    el.textContent = '';
+    var wrapper = document.createElement('div');
+    wrapper.className = 'loading';
+    var spinner = document.createElement('div');
+    spinner.className = 'spinner-border text-primary';
+    spinner.setAttribute('role', 'status');
+    var msg = document.createElement('div');
+    msg.textContent = message || 'Loading...';
+    wrapper.appendChild(spinner);
+    wrapper.appendChild(msg);
+    el.appendChild(wrapper);
+}
+
+function showEmpty(containerId, icon, message) {
+    var el = document.getElementById(containerId);
+    if (!el) return;
+    el.textContent = '';
+    var wrapper = document.createElement('div');
+    wrapper.className = 'empty-state';
+    var iconEl = document.createElement('i');
+    iconEl.className = 'bi bi-' + icon + ' d-block';
+    var p = document.createElement('p');
+    p.textContent = message;
+    wrapper.appendChild(iconEl);
+    wrapper.appendChild(p);
+    el.appendChild(wrapper);
+}
+
+// ============================================================================
+// Safe HTML builder — tagged template for escaped interpolation
+// ============================================================================
+
+function safeHtml(templateParts) {
+    var args = Array.prototype.slice.call(arguments, 1);
+    var result = '';
+    for (var i = 0; i < templateParts.length; i++) {
+        result += templateParts[i];
+        if (i < args.length) {
+            result += escapeHtml(String(args[i]));
+        }
+    }
+    return result;
+}
+
+// ============================================================================
+// File Download helper
+// ============================================================================
+
+function downloadFile(filename, content, mimeType) {
+    var blob = new Blob([content], { type: mimeType });
+    var url = URL.createObjectURL(blob);
+    var a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+}
+
+// ============================================================================
+// Toast notification
+// ============================================================================
+
+function showToast(message) {
+    var toast = document.createElement('div');
+    toast.style.cssText = 'position:fixed;bottom:24px;right:24px;background:#333;color:#fff;padding:10px 20px;border-radius:8px;font-size:0.9rem;z-index:9999;opacity:0;transition:opacity 0.3s;';
+    toast.textContent = message;
+    document.body.appendChild(toast);
+    requestAnimationFrame(function() { toast.style.opacity = '1'; });
+    setTimeout(function() {
+        toast.style.opacity = '0';
+        setTimeout(function() {
+            if (toast.parentNode) document.body.removeChild(toast);
+        }, 300);
+    }, 2000);
+}
+
+// ============================================================================
+// Date Formatters
+// ============================================================================
+
+function formatDate(dateString) {
+    if (!dateString) return '-';
+    var date = new Date(dateString);
+    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+}
+
+function formatDateFull(dateString) {
+    if (!dateString) return '-';
+    var date = new Date(dateString);
+    return date.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });
+}
+
+// ============================================================================
+// Stats (loaded on startup)
+// ============================================================================
+
+async function loadStats() {
+    try {
+        var response = await fetch('/api/stats');
+        var data = await response.json();
+        animateCounter('stat-memories', data.overview.total_memories);
+        animateCounter('stat-clusters', data.overview.total_clusters);
+        animateCounter('stat-nodes', data.overview.graph_nodes);
+        animateCounter('stat-edges', data.overview.graph_edges);
+        populateFilters(data.categories, data.projects);
+    } catch (error) {
+        console.error('Error loading stats:', error);
+    }
+}
+
+function populateFilters(categories, projects) {
+    var categorySelect = document.getElementById('filter-category');
+    var projectSelect = document.getElementById('filter-project');
+    categories.forEach(function(cat) {
+        if (cat.category) {
+            var option = document.createElement('option');
+            option.value = cat.category;
+            option.textContent = cat.category + ' (' + cat.count + ')';
+            categorySelect.appendChild(option);
+        }
+    });
+    projects.forEach(function(proj) {
+        if (proj.project_name) {
+            var option = document.createElement('option');
+            option.value = proj.project_name;
+            option.textContent = proj.project_name + ' (' + proj.count + ')';
+            projectSelect.appendChild(option);
+        }
+    });
+}
+
+// ============================================================================
+// Application Init (DOMContentLoaded)
+// ============================================================================
+
+window.addEventListener('DOMContentLoaded', function() {
+    initDarkMode();
+    loadProfiles();
+    loadStats();
+    loadGraph();
+
+    // v2.5 — Event Bus + Agent Registry (graceful if functions don't exist)
+    if (typeof initEventStream === 'function') initEventStream();
+    if (typeof loadEventStats === 'function') loadEventStats();
+    if (typeof loadAgents === 'function') loadAgents();
+});

package/ui/js/events.js

@@ -0,0 +1,178 @@
+// SuperLocalMemory V2 - Live Events (v2.5 — SSE Stream)
+// Depends on: core.js
+// Security: All DOM built with safe methods (createElement/textContent).
+
+var _eventSource = null;
+var _eventStreamItems = [];
+var _maxEventStreamItems = 200;
+
+function initEventStream() {
+    try {
+        _eventSource = new EventSource('/events/stream');
+
+        _eventSource.onopen = function() {
+            var badge = document.getElementById('event-connection-status');
+            if (badge) {
+                badge.textContent = 'Connected';
+                badge.className = 'badge bg-success me-2';
+            }
+        };
+
+        _eventSource.onmessage = function(e) {
+            try {
+                appendEventToStream(JSON.parse(e.data));
+            } catch (err) { /* keepalive comments */ }
+        };
+
+        _eventSource.onerror = function() {
+            var badge = document.getElementById('event-connection-status');
+            if (badge) {
+                badge.textContent = 'Reconnecting...';
+                badge.className = 'badge bg-warning me-2';
+            }
+        };
+
+        ['memory.created', 'memory.updated', 'memory.deleted', 'memory.recalled',
+         'agent.connected', 'agent.disconnected', 'graph.updated', 'pattern.learned'
+        ].forEach(function(type) {
+            _eventSource.addEventListener(type, function(e) {
+                try { appendEventToStream(JSON.parse(e.data)); } catch (err) { /* ignore */ }
+            });
+        });
+    } catch (err) {
+        console.log('SSE not available:', err);
+        var badge = document.getElementById('event-connection-status');
+        if (badge) {
+            badge.textContent = 'Unavailable';
+            badge.className = 'badge bg-secondary me-2';
+        }
+    }
+}
+
+function appendEventToStream(event) {
+    var container = document.getElementById('event-stream');
+    if (!container) return;
+
+    if (_eventStreamItems.length === 0) container.textContent = '';
+
+    _eventStreamItems.push(event);
+    if (_eventStreamItems.length > _maxEventStreamItems) _eventStreamItems.shift();
+
+    var filter = document.getElementById('event-type-filter');
+    var filterValue = filter ? filter.value : '';
+    if (filterValue && event.event_type !== filterValue) return;
+
+    var typeColors = {
+        'memory.created': 'text-success', 'memory.updated': 'text-info',
+        'memory.deleted': 'text-danger', 'memory.recalled': 'text-primary',
+        'agent.connected': 'text-warning', 'agent.disconnected': 'text-secondary',
+        'graph.updated': 'text-info', 'pattern.learned': 'text-success'
+    };
+    var typeIcons = {
+        'memory.created': 'bi-plus-circle', 'memory.updated': 'bi-pencil',
+        'memory.deleted': 'bi-trash', 'memory.recalled': 'bi-search',
+        'agent.connected': 'bi-plug', 'agent.disconnected': 'bi-plug',
+        'graph.updated': 'bi-diagram-3', 'pattern.learned': 'bi-lightbulb'
+    };
+
+    var colorClass = typeColors[event.event_type] || 'text-muted';
+    var iconClass = typeIcons[event.event_type] || 'bi-circle';
+    var ts = event.timestamp ? new Date(event.timestamp).toLocaleTimeString() : '';
+    var payload = event.payload || {};
+    var preview = payload.content_preview || payload.agent_id || payload.agent_name || '';
+    if (preview.length > 80) preview = preview.substring(0, 80) + '...';
+
+    var div = document.createElement('div');
+    div.className = 'event-line mb-1 pb-1 border-bottom border-opacity-25';
+
+    var timeSpan = document.createElement('small');
+    timeSpan.className = 'text-muted';
+    timeSpan.textContent = ts;
+
+    var icon = document.createElement('i');
+    icon.className = 'bi ' + iconClass + ' ' + colorClass;
+    icon.style.marginLeft = '6px';
+
+    var typeSpan = document.createElement('span');
+    typeSpan.className = colorClass + ' fw-bold';
+    typeSpan.style.marginLeft = '4px';
+    typeSpan.textContent = event.event_type;
+
+    div.appendChild(timeSpan);
+    div.appendChild(document.createTextNode(' '));
+    div.appendChild(icon);
+    div.appendChild(document.createTextNode(' '));
+    div.appendChild(typeSpan);
+    div.appendChild(document.createTextNode(' '));
+
+    if (event.memory_id) {
+        var badge = document.createElement('span');
+        badge.className = 'badge bg-secondary';
+        badge.textContent = '#' + event.memory_id;
+        div.appendChild(badge);
+        div.appendChild(document.createTextNode(' '));
+    }
+
+    var previewSpan = document.createElement('span');
+    previewSpan.className = 'text-muted';
+    previewSpan.textContent = preview;
+    div.appendChild(previewSpan);
+
+    container.insertBefore(div, container.firstChild);
+
+    while (container.children.length > _maxEventStreamItems) {
+        container.removeChild(container.lastChild);
+    }
+}
+
+function filterEvents() {
+    var container = document.getElementById('event-stream');
+    if (!container) return;
+    container.textContent = '';
+
+    var filter = document.getElementById('event-type-filter');
+    var filterValue = filter ? filter.value : '';
+
+    var filtered = filterValue
+        ? _eventStreamItems.filter(function(e) { return e.event_type === filterValue; })
+        : _eventStreamItems;
+
+    filtered.forEach(function(event) { appendEventToStream(event); });
+}
+
+function clearEventStream() {
+    _eventStreamItems = [];
+    var container = document.getElementById('event-stream');
+    if (container) {
+        container.textContent = '';
+        var placeholder = document.createElement('div');
+        placeholder.className = 'text-muted text-center py-4';
+        var pIcon = document.createElement('i');
+        pIcon.className = 'bi bi-broadcast';
+        pIcon.style.fontSize = '2rem';
+        placeholder.appendChild(pIcon);
+        var pText = document.createElement('p');
+        pText.className = 'mt-2';
+        pText.textContent = 'Event stream cleared. Waiting for new events...';
+        placeholder.appendChild(pText);
+        container.appendChild(placeholder);
+    }
+}
+
+async function loadEventStats() {
+    try {
+        var response = await fetch('/api/events/stats');
+        var stats = await response.json();
+        var el;
+        el = document.getElementById('event-stat-total');
+        if (el) el.textContent = (stats.total_events || 0).toLocaleString();
+        el = document.getElementById('event-stat-24h');
+        if (el) el.textContent = (stats.events_last_24h || 0).toLocaleString();
+        el = document.getElementById('event-stat-listeners');
+        if (el) el.textContent = (stats.listener_count || 0).toLocaleString();
+        el = document.getElementById('event-stat-buffer');
+        if (el) el.textContent = (stats.buffer_size || 0).toLocaleString();
+    } catch (err) {
+        console.log('Event stats not available:', err);
+    }
+}