superlocalmemory 2.4.2 → 2.5.0

package/ui/app.js

@@ -731,6 +731,11 @@ window.addEventListener('DOMContentLoaded', function() {
     loadProfiles();
     loadStats();
     loadGraph();
+
+    // v2.5 — Event Bus + Agent Registry
+    initEventStream();
+    loadEventStats();
+    loadAgents();
 });
 
 // ============================================================================
@@ -1161,3 +1166,423 @@ function handleSort(th) {
     var showScores = memories.length > 0 && typeof memories[0].score === 'number';
     renderMemoriesTable(memories, showScores);
 }
+
+// ============================================================================
+// v2.5 — Live Event Stream (SSE)
+// ============================================================================
+// Security note: All dynamic values are escaped via escapeHtml() before DOM insertion.
+// Data originates from our own trusted local SQLite database (localhost only).
+// No external/untrusted user input reaches the DOM — same pattern as existing code above.
+
+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 {
+                var event = JSON.parse(e.data);
+                appendEventToStream(event);
+            } catch (err) {
+                // Ignore parse errors (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) + '...';
+
+    // Build event line using safe DOM methods + escapeHtml for all dynamic content
+    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);
+    }
+}
+
+// ============================================================================
+// v2.5 — Connected Agents
+// ============================================================================
+
+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;
+        }
+
+        // Build agent table using safe DOM methods
+        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');
+
+            // Agent name cell
+            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);
+
+            // Protocol badge
+            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);
+
+            // Trust score
+            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);
+
+            // Writes
+            var tdW = document.createElement('td');
+            tdW.textContent = agent.memories_written || 0;
+            tr.appendChild(tdW);
+
+            // Recalls
+            var tdR = document.createElement('td');
+            tdR.textContent = agent.memories_recalled || 0;
+            tr.appendChild(tdR);
+
+            // Last seen
+            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';
+
+        // Total signals card
+        var col1 = document.createElement('div');
+        col1.className = 'col-md-4';
+        var card1 = document.createElement('div');
+        card1.className = 'border rounded p-3 text-center';
+        var val1 = document.createElement('div');
+        val1.className = 'fs-4 fw-bold';
+        val1.textContent = (stats.total_signals || 0).toLocaleString();
+        card1.appendChild(val1);
+        var lbl1 = document.createElement('small');
+        lbl1.className = 'text-muted';
+        lbl1.textContent = 'Total Signals Collected';
+        card1.appendChild(lbl1);
+        col1.appendChild(card1);
+        row.appendChild(col1);
+
+        // Avg trust card
+        var col2 = document.createElement('div');
+        col2.className = 'col-md-4';
+        var card2 = document.createElement('div');
+        card2.className = 'border rounded p-3 text-center';
+        var val2 = document.createElement('div');
+        val2.className = 'fs-4 fw-bold';
+        val2.textContent = (stats.avg_trust_score || 1.0).toFixed(3);
+        card2.appendChild(val2);
+        var lbl2 = document.createElement('small');
+        lbl2.className = 'text-muted';
+        lbl2.textContent = 'Average Trust Score';
+        card2.appendChild(lbl2);
+        col2.appendChild(card2);
+        row.appendChild(col2);
+
+        // Enforcement card
+        var col3 = document.createElement('div');
+        col3.className = 'col-md-4';
+        var card3 = document.createElement('div');
+        card3.className = 'border rounded p-3 text-center';
+        var val3 = document.createElement('div');
+        val3.className = 'fs-4 fw-bold text-info';
+        val3.textContent = stats.enforcement || 'disabled';
+        card3.appendChild(val3);
+        var lbl3 = document.createElement('small');
+        lbl3.className = 'text-muted';
+        lbl3.textContent = 'Enforcement Status';
+        card3.appendChild(lbl3);
+        col3.appendChild(card3);
+        row.appendChild(col3);
+
+        container.appendChild(row);
+
+        // Signal breakdown
+        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/index.html

@@ -454,6 +454,16 @@
                     <i class="bi bi-clock-history"></i> Timeline
                 </button>
             </li>
+            <li class="nav-item">
+                <button class="nav-link" id="events-tab" data-bs-toggle="tab" data-bs-target="#events-pane">
+                    <i class="bi bi-broadcast"></i> Live Events
+                </button>
+            </li>
+            <li class="nav-item">
+                <button class="nav-link" id="agents-tab" data-bs-toggle="tab" data-bs-target="#agents-pane">
+                    <i class="bi bi-robot"></i> Agents
+                </button>
+            </li>
             <li class="nav-item">
                 <button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings-pane">
                     <i class="bi bi-gear"></i> Settings
@@ -577,6 +587,129 @@
                 </div>
             </div>
 
+            <!-- Live Events (v2.5) -->
+            <div class="tab-pane fade" id="events-pane">
+                <div class="card p-3 mb-3">
+                    <div class="row align-items-center mb-3">
+                        <div class="col-md-6">
+                            <h5 class="mb-0"><i class="bi bi-broadcast"></i> Live Event Stream</h5>
+                            <small class="text-muted">Real-time memory operations as they happen</small>
+                        </div>
+                        <div class="col-md-6 text-end">
+                            <span id="event-connection-status" class="badge bg-secondary me-2">Connecting...</span>
+                            <select class="form-select form-select-sm d-inline-block w-auto" id="event-type-filter" onchange="filterEvents()">
+                                <option value="">All Events</option>
+                                <option value="memory.created">Memory Created</option>
+                                <option value="memory.updated">Memory Updated</option>
+                                <option value="memory.deleted">Memory Deleted</option>
+                                <option value="memory.recalled">Memory Recalled</option>
+                                <option value="agent.connected">Agent Connected</option>
+                            </select>
+                            <button class="btn btn-sm btn-outline-secondary ms-1" onclick="clearEventStream()">
+                                <i class="bi bi-trash"></i> Clear
+                            </button>
+                        </div>
+                    </div>
+                    <!-- Event Stats Row -->
+                    <div class="row g-2 mb-3" id="event-stats-row">
+                        <div class="col-md-3">
+                            <div class="border rounded p-2 text-center">
+                                <div class="fw-bold" id="event-stat-total">0</div>
+                                <small class="text-muted">Total Events</small>
+                            </div>
+                        </div>
+                        <div class="col-md-3">
+                            <div class="border rounded p-2 text-center">
+                                <div class="fw-bold" id="event-stat-24h">0</div>
+                                <small class="text-muted">Last 24h</small>
+                            </div>
+                        </div>
+                        <div class="col-md-3">
+                            <div class="border rounded p-2 text-center">
+                                <div class="fw-bold" id="event-stat-listeners">0</div>
+                                <small class="text-muted">Listeners</small>
+                            </div>
+                        </div>
+                        <div class="col-md-3">
+                            <div class="border rounded p-2 text-center">
+                                <div class="fw-bold" id="event-stat-buffer">0</div>
+                                <small class="text-muted">In Buffer</small>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Event Stream -->
+                    <div id="event-stream" style="max-height: 500px; overflow-y: auto; font-family: 'Courier New', monospace; font-size: 0.85rem; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: 8px; padding: 12px;">
+                        <div class="text-muted text-center py-4">
+                            <i class="bi bi-broadcast" style="font-size: 2rem;"></i>
+                            <p class="mt-2">Waiting for events...</p>
+                            <small>Events will appear here in real-time as memories are created, updated, or deleted.</small>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Connected Agents (v2.5) -->
+            <div class="tab-pane fade" id="agents-pane">
+                <div class="card p-3 mb-3">
+                    <div class="row align-items-center mb-3">
+                        <div class="col-md-6">
+                            <h5 class="mb-0"><i class="bi bi-robot"></i> Connected Agents</h5>
+                            <small class="text-muted">AI tools that interact with your memory</small>
+                        </div>
+                        <div class="col-md-6 text-end">
+                            <button class="btn btn-sm btn-outline-primary" onclick="loadAgents()">
+                                <i class="bi bi-arrow-clockwise"></i> Refresh
+                            </button>
+                        </div>
+                    </div>
+                    <!-- Agent Stats -->
+                    <div class="row g-2 mb-3" id="agent-stats-row">
+                        <div class="col-md-3">
+                            <div class="border rounded p-2 text-center">
+                                <div class="fw-bold" id="agent-stat-total">0</div>
+                                <small class="text-muted">Total Agents</small>
+                            </div>
+                        </div>
+                        <div class="col-md-3">
+                            <div class="border rounded p-2 text-center">
+                                <div class="fw-bold" id="agent-stat-active">0</div>
+                                <small class="text-muted">Active (24h)</small>
+                            </div>
+                        </div>
+                        <div class="col-md-3">
+                            <div class="border rounded p-2 text-center">
+                                <div class="fw-bold" id="agent-stat-writes">0</div>
+                                <small class="text-muted">Total Writes</small>
+                            </div>
+                        </div>
+                        <div class="col-md-3">
+                            <div class="border rounded p-2 text-center">
+                                <div class="fw-bold" id="agent-stat-recalls">0</div>
+                                <small class="text-muted">Total Recalls</small>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Agent List -->
+                    <div id="agents-list" class="table-responsive">
+                        <div class="loading">
+                            <div class="spinner-border text-primary" role="status"></div>
+                            <div>Loading agents...</div>
+                        </div>
+                    </div>
+                </div>
+                <!-- Trust Overview -->
+                <div class="card p-3">
+                    <h5 class="mb-3"><i class="bi bi-shield-check"></i> Trust Scoring <span class="badge bg-info">Silent Collection</span></h5>
+                    <p class="text-muted small mb-3">Trust scores are being collected silently. No enforcement in v2.5 — scores will affect recall ranking in v2.6.</p>
+                    <div id="trust-overview">
+                        <div class="loading">
+                            <div class="spinner-border text-primary" role="status"></div>
+                            <div>Loading trust data...</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
             <!-- Settings & Backup -->
             <div class="tab-pane fade" id="settings-pane">
                 <!-- Profile Management -->
@@ -696,7 +829,20 @@
     <!-- D3.js -->
     <script src="https://d3js.org/d3.v7.min.js"></script>
 
-    <script src="static/app.js"></script>
+    <!-- Modular JS (v2.5 — split from monolith app.js) -->
+    <script src="static/js/core.js"></script>
+    <script src="static/js/graph.js"></script>
+    <script src="static/js/memories.js"></script>
+    <script src="static/js/search.js"></script>
+    <script src="static/js/modal.js"></script>
+    <script src="static/js/clusters.js"></script>
+    <script src="static/js/patterns.js"></script>
+    <script src="static/js/timeline.js"></script>
+    <script src="static/js/profiles.js"></script>
+    <script src="static/js/settings.js"></script>
+    <script src="static/js/events.js"></script>
+    <script src="static/js/agents.js"></script>
+    <script src="static/js/init.js"></script>
 
     <footer>
         <p>SuperLocalMemory V2 by <a href="https://github.com/varun369">Varun Pratap Bhardwaj</a></p>