superlocalmemory 3.4.3 → 3.4.4

package/src/superlocalmemory/ui/js/ng-health.js

@@ -0,0 +1,208 @@
+// Neural Glass — Health Monitor Tab
+// Real-time process health, RSS budget, worker heartbeat (v3.4.3)
+// API: /api/v3/health/processes — returns {processes: {name: {pid, status}}, memory_mb, healthy}
+
+(function() {
+  'use strict';
+
+  var REFRESH_INTERVAL = 10000;
+  var refreshTimer = null;
+
+  window.loadHealthMonitor = function() {
+    fetchHealth();
+    clearInterval(refreshTimer);
+    refreshTimer = setInterval(function() {
+      var pane = document.getElementById('health-pane');
+      if (pane && pane.classList.contains('active')) fetchHealth();
+    }, REFRESH_INTERVAL);
+  };
+
+  function fetchHealth() {
+    Promise.all([
+      fetch('/api/v3/health/processes').then(function(r) { return r.json(); }).catch(function() { return null; }),
+      fetch('/api/v3/consolidation/status').then(function(r) { return r.json(); }).catch(function() { return null; }),
+      fetch('/api/stats').then(function(r) { return r.json(); }).catch(function() { return null; })
+    ]).then(function(results) {
+      var health = results[0];
+      var consolidation = results[1];
+      var stats = results[2];
+
+      if (!health) {
+        renderHealthOffline();
+        return;
+      }
+
+      renderHealthOverview(health, consolidation, stats);
+      renderProcessTable(health.processes || {});
+      renderBudgetAndInfo(health, consolidation);
+    });
+  }
+
+  function renderHealthOverview(health, consolidation, stats) {
+    var el = document.getElementById('health-overview');
+    if (!el) return;
+
+    var isHealthy = health.healthy === true;
+    var totalRss = health.memory_mb || 0;
+    var budget = 4096; // configurable via health monitor
+    var usagePct = budget > 0 ? Math.min(100, Math.round((totalRss / budget) * 100)) : 0;
+    var barClass = usagePct > 80 ? 'ng-progress-fill-error' : usagePct > 60 ? 'ng-progress-fill-warning' : '';
+
+    // Extract PID from processes
+    var daemonPid = 'N/A';
+    var procs = health.processes || {};
+    if (procs.parent && procs.parent.pid) daemonPid = procs.parent.pid;
+    else if (procs.mcp_server && procs.mcp_server.pid) daemonPid = procs.mcp_server.pid;
+
+    // Process count
+    var procCount = Object.keys(procs).length;
+
+    // Consolidation info
+    var lastConsolidation = 'Never';
+    if (consolidation && consolidation.last_run) {
+      lastConsolidation = timeAgo(consolidation.last_run);
+    }
+
+    // Stats info
+    var factCount = stats ? (stats.total_memories || stats.fact_count || 0) : 0;
+
+    el.innerHTML =
+      '<div class="row g-3 mb-4">' +
+        healthCard('Overall',
+          statusDotHtml(isHealthy ? 'healthy' : 'degraded') + ' ' + (isHealthy ? 'Healthy' : 'Degraded'),
+          'bi-heart-pulse') +
+        healthCard('Daemon PID', daemonPid, 'bi-cpu') +
+        healthCard('Memory', totalRss.toFixed(0) + ' MB', 'bi-memory') +
+        healthCard('Processes', procCount + ' active', 'bi-diagram-2') +
+      '</div>' +
+      '<div class="ng-glass" style="padding:16px;margin-bottom:24px">' +
+        '<div style="display:flex;justify-content:space-between;margin-bottom:8px">' +
+          '<span style="font-size:0.8125rem;font-weight:590">Memory Budget</span>' +
+          '<span style="font-size:0.8125rem;color:var(--ng-text-secondary)">' + totalRss.toFixed(0) + ' / ' + budget + ' MB (' + usagePct + '%)</span>' +
+        '</div>' +
+        '<div class="ng-progress-bar">' +
+          '<div class="ng-progress-fill ' + barClass + '" style="width:' + usagePct + '%"></div>' +
+        '</div>' +
+      '</div>';
+  }
+
+  function renderProcessTable(processes) {
+    var el = document.getElementById('health-processes');
+    if (!el) return;
+
+    var keys = Object.keys(processes);
+    if (keys.length === 0) {
+      el.innerHTML = '<div style="padding:24px;color:var(--ng-text-tertiary);text-align:center">No processes reported</div>';
+      return;
+    }
+
+    var html = '<div class="table-responsive"><table class="table table-sm">' +
+      '<thead><tr><th>Process</th><th>PID</th><th>Status</th><th>Details</th></tr></thead><tbody>';
+
+    keys.forEach(function(name) {
+      var p = processes[name];
+      if (typeof p !== 'object') return;
+      var st = p.status || 'unknown';
+      var pid = p.pid || 'N/A';
+      var details = [];
+      if (p.rss_mb) details.push(p.rss_mb.toFixed(1) + ' MB');
+      if (p.cpu_percent) details.push('CPU ' + p.cpu_percent.toFixed(1) + '%');
+      if (p.request_count) details.push(p.request_count + ' reqs');
+      if (p.model) details.push(p.model);
+      if (p.workers) details.push(p.workers + ' workers');
+
+      html += '<tr>' +
+        '<td style="font-weight:510">' + escapeHtml(formatProcessName(name)) + '</td>' +
+        '<td><code>' + pid + '</code></td>' +
+        '<td>' + statusDotHtml(st) + ' ' + capitalize(st) + '</td>' +
+        '<td style="color:var(--ng-text-secondary);font-size:0.8125rem">' + (details.join(' · ') || '—') + '</td>' +
+      '</tr>';
+    });
+
+    html += '</tbody></table></div>';
+    el.innerHTML = html;
+  }
+
+  function renderBudgetAndInfo(health, consolidation) {
+    var el = document.getElementById('health-budget-rules');
+    if (!el) return;
+
+    var items = [
+      { label: 'Total Memory', value: (health.memory_mb || 0).toFixed(0) + ' MB' },
+      { label: 'Healthy', value: health.healthy ? 'Yes' : 'No' },
+      { label: 'RSS Budget', value: '4,096 MB' },
+      { label: 'Heartbeat', value: '30s interval' },
+      { label: 'Worker Recycle', value: 'After 1,000 reqs' }
+    ];
+
+    if (consolidation) {
+      items.push({ label: 'Last Consolidation', value: consolidation.last_run ? timeAgo(consolidation.last_run) : 'Never' });
+      if (consolidation.last_result) {
+        items.push({ label: 'Blocks Compiled', value: String(consolidation.last_result.blocks_compiled || 0) });
+        items.push({ label: 'Graph Edges', value: formatNumber(consolidation.last_result.total_edges || 0) });
+      }
+      items.push({ label: 'Store Counter', value: String(consolidation.store_count_since_last || 0) });
+    }
+
+    var html = '<div style="font-size:0.8125rem">';
+    items.forEach(function(item) {
+      html += '<div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--ng-border-subtle)">' +
+        '<span style="color:var(--ng-text-secondary)">' + item.label + '</span>' +
+        '<span style="font-weight:590">' + item.value + '</span>' +
+      '</div>';
+    });
+    html += '</div>';
+    el.innerHTML = html;
+  }
+
+  function renderHealthOffline() {
+    var el = document.getElementById('health-overview');
+    if (!el) return;
+    el.innerHTML =
+      '<div class="row g-3 mb-4">' +
+        healthCard('Overall', statusDotHtml('dead') + ' Offline', 'bi-heart-pulse') +
+        healthCard('Daemon PID', 'N/A', 'bi-cpu') +
+        healthCard('Memory', '0 MB', 'bi-memory') +
+        healthCard('Processes', '0', 'bi-diagram-2') +
+      '</div>';
+  }
+
+  function healthCard(label, value, icon) {
+    return '<div class="col-md-3 col-6">' +
+      '<div class="ng-glass" style="padding:16px;text-align:center">' +
+        '<i class="bi ' + icon + '" style="font-size:1.25rem;color:var(--ng-accent);display:block;margin-bottom:8px"></i>' +
+        '<div class="ng-stat-value" style="font-size:1.5rem">' + value + '</div>' +
+        '<div class="ng-stat-label">' + label + '</div>' +
+      '</div>' +
+    '</div>';
+  }
+
+  function statusDotHtml(st) {
+    var c = 'var(--ng-text-quaternary)';
+    if (st === 'healthy' || st === 'active' || st === 'running') c = 'var(--ng-status-success)';
+    else if (st === 'degraded' || st === 'stale') c = 'var(--ng-status-warning)';
+    else if (st === 'dead' || st === 'error' || st === 'critical') c = 'var(--ng-status-error)';
+    return '<span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:' + c + ';box-shadow:0 0 6px ' + c + '"></span>';
+  }
+
+  function formatProcessName(name) {
+    return name.replace(/_/g, ' ').replace(/\b\w/g, function(c) { return c.toUpperCase(); });
+  }
+
+  function capitalize(s) { return s ? s.charAt(0).toUpperCase() + s.slice(1) : ''; }
+  function escapeHtml(s) { var d = document.createElement('div'); d.textContent = s || ''; return d.innerHTML; }
+  function formatNumber(n) { return n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); }
+  function timeAgo(iso) {
+    if (!iso) return 'N/A';
+    var d = (Date.now() - new Date(iso).getTime()) / 1000;
+    if (d < 0) d = 0;
+    if (d < 60) return Math.floor(d) + 's ago';
+    if (d < 3600) return Math.floor(d / 60) + 'm ago';
+    if (d < 86400) return Math.floor(d / 3600) + 'h ago';
+    return Math.floor(d / 86400) + 'd ago';
+  }
+
+  document.addEventListener('visibilitychange', function() {
+    if (document.hidden) clearInterval(refreshTimer);
+  });
+})();

package/src/superlocalmemory/ui/js/ng-ingestion.js

@@ -0,0 +1,203 @@
+// Neural Glass — Ingestion Status Tab (v3.4.4)
+// Full configuration UI for non-technical users
+// API: /api/adapters (GET, POST enable/disable/start/stop)
+
+(function() {
+  'use strict';
+
+  var ADAPTER_INFO = {
+    gmail: {
+      icon: 'bi-envelope-fill',
+      title: 'Email (Gmail)',
+      description: 'Automatically ingest your emails into memory. SLM extracts key facts, decisions, and action items from your inbox.',
+      howItWorks: 'Connects to Gmail via Google OAuth. Only reads — never sends or deletes emails. New emails are processed as they arrive.',
+      setup: 'Requires a Google Cloud project with Gmail API enabled. SLM will guide you through OAuth setup.',
+      privacy: 'All processing happens locally on your machine. Email content never leaves your device.',
+      color: '#ea4335'
+    },
+    calendar: {
+      icon: 'bi-calendar-event-fill',
+      title: 'Calendar Events',
+      description: 'Remember all your meetings, deadlines, and events. SLM builds a timeline of your schedule and links events to related memories.',
+      howItWorks: 'Syncs with Google Calendar via OAuth. Polls for new events hourly and processes updates in real-time via webhooks.',
+      setup: 'Requires Google Calendar API access. Uses the same Google Cloud project as Gmail.',
+      privacy: 'Event data stays local. Only event titles, times, and descriptions are stored — not attendee details.',
+      color: '#4285f4'
+    },
+    transcript: {
+      icon: 'bi-mic-fill',
+      title: 'Meeting Transcripts',
+      description: 'Turn meeting transcripts into searchable memory. Extract decisions, action items, and key discussions from recorded meetings.',
+      howItWorks: 'Watches a folder for .srt, .vtt, or .txt transcript files. Processes new files automatically when they appear.',
+      setup: 'Point SLM to your transcripts folder (e.g., where Otter.ai or Circleback saves files).',
+      privacy: 'Transcripts are processed locally. Speaker names and content stay on your machine.',
+      color: '#34a853'
+    }
+  };
+
+  window.loadIngestionStatus = function() {
+    fetchAdapters();
+  };
+
+  function fetchAdapters() {
+    fetch('/api/adapters')
+      .then(function(r) { return r.json(); })
+      .then(function(data) {
+        renderIngestionTab(data.adapters || []);
+      })
+      .catch(function() {
+        renderIngestionTab([]);
+      });
+  }
+
+  function renderIngestionTab(adapters) {
+    // Build adapter map for easy lookup
+    var adapterMap = {};
+    adapters.forEach(function(a) { adapterMap[a.name] = a; });
+
+    var el = document.getElementById('ingestion-overview');
+    if (!el) return;
+
+    // Count stats
+    var enabledCount = adapters.filter(function(a) { return a.enabled; }).length;
+    var runningCount = adapters.filter(function(a) { return a.running; }).length;
+
+    // Overview cards
+    el.innerHTML =
+      '<div class="row g-3 mb-4">' +
+        overviewCard('Available', adapters.length + ' adapters', 'bi-plug') +
+        overviewCard('Enabled', enabledCount + ' of ' + adapters.length, 'bi-toggle-on') +
+        overviewCard('Running', runningCount + ' active', 'bi-play-circle') +
+        overviewCard('Privacy', 'All local', 'bi-shield-lock') +
+      '</div>' +
+      '<div style="background:var(--ng-accent-muted);border:1px solid rgba(124,106,239,0.2);border-radius:var(--ng-radius-md);padding:12px 16px;margin-bottom:24px;font-size:0.8125rem">' +
+        '<strong>How Ingestion Works:</strong> Enable an adapter below → configure it → start it. ' +
+        'SLM will automatically process new items and add them to your memory. ' +
+        'All data stays on your machine. Disable anytime.' +
+      '</div>';
+
+    // Adapter cards
+    var cardsEl = document.getElementById('ingestion-adapters');
+    if (!cardsEl) return;
+
+    var html = '';
+    ['gmail', 'calendar', 'transcript'].forEach(function(name) {
+      var info = ADAPTER_INFO[name];
+      var adapter = adapterMap[name] || { name: name, enabled: false, running: false };
+      html += renderAdapterCard(adapter, info);
+    });
+    cardsEl.innerHTML = html;
+
+    // Ingestion log section
+    var logEl = document.getElementById('ingestion-log');
+    if (logEl) {
+      if (runningCount === 0 && enabledCount === 0) {
+        logEl.innerHTML =
+          '<div style="text-align:center;padding:20px;color:var(--ng-text-tertiary);font-size:0.8125rem">' +
+            'No adapters active. Enable one above to start building your memory from external sources.' +
+          '</div>';
+      } else {
+        logEl.innerHTML =
+          '<div style="text-align:center;padding:20px;color:var(--ng-text-tertiary);font-size:0.8125rem">' +
+            'Ingestion log will show here as items are processed.' +
+          '</div>';
+      }
+    }
+  }
+
+  function renderAdapterCard(adapter, info) {
+    var isEnabled = adapter.enabled;
+    var isRunning = adapter.running;
+    var statusText = isRunning ? 'Running' : (isEnabled ? 'Enabled (Stopped)' : 'Disabled');
+    var statusClass = isRunning ? 'ng-badge-success' : (isEnabled ? 'ng-badge-warning' : 'ng-badge-neutral');
+
+    return '<div class="ng-glass" style="padding:24px;margin-bottom:16px">' +
+      // Header
+      '<div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px">' +
+        '<div style="display:flex;align-items:center;gap:12px">' +
+          '<div style="width:48px;height:48px;border-radius:var(--ng-radius-lg);background:' + info.color + '20;display:flex;align-items:center;justify-content:center">' +
+            '<i class="bi ' + info.icon + '" style="font-size:1.5rem;color:' + info.color + '"></i>' +
+          '</div>' +
+          '<div>' +
+            '<div style="font-size:1.125rem;font-weight:590">' + info.title + '</div>' +
+            '<span class="ng-badge ' + statusClass + '">' + statusText + '</span>' +
+          '</div>' +
+        '</div>' +
+        // Action buttons
+        '<div style="display:flex;gap:8px">' +
+          (isEnabled ?
+            (isRunning ?
+              '<button class="ng-btn" onclick="adapterAction(\'' + adapter.name + '\',\'stop\')">' +
+                '<i class="bi bi-stop-circle"></i> Stop</button>' :
+              '<button class="ng-btn ng-btn-accent" onclick="adapterAction(\'' + adapter.name + '\',\'start\')">' +
+                '<i class="bi bi-play-circle"></i> Start</button>'
+            ) +
+            '<button class="ng-btn" onclick="adapterAction(\'' + adapter.name + '\',\'disable\')" style="color:var(--ng-status-error)">' +
+              '<i class="bi bi-x-circle"></i> Disable</button>' :
+            '<button class="ng-btn ng-btn-accent" onclick="adapterAction(\'' + adapter.name + '\',\'enable\')">' +
+              '<i class="bi bi-power"></i> Enable</button>'
+          ) +
+        '</div>' +
+      '</div>' +
+      // Description
+      '<p style="color:var(--ng-text-secondary);font-size:0.875rem;margin-bottom:12px">' + info.description + '</p>' +
+      // Details grid
+      '<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;font-size:0.8125rem">' +
+        detailBox('How it works', info.howItWorks, 'bi-gear') +
+        detailBox('Setup', info.setup, 'bi-tools') +
+        detailBox('Privacy', info.privacy, 'bi-shield-check') +
+      '</div>' +
+      // Running details
+      (isRunning && adapter.pid ?
+        '<div style="margin-top:12px;padding:8px 12px;background:var(--ng-status-success-bg);border-radius:var(--ng-radius-sm);font-size:0.8125rem">' +
+          '<i class="bi bi-check-circle" style="color:var(--ng-status-success)"></i> ' +
+          'Running as PID ' + adapter.pid +
+        '</div>' : '') +
+    '</div>';
+  }
+
+  function detailBox(title, text, icon) {
+    return '<div style="padding:10px;background:var(--ng-bg-glass);border-radius:var(--ng-radius-sm);border:1px solid var(--ng-border-subtle)">' +
+      '<div style="font-weight:590;margin-bottom:4px;font-size:0.75rem;text-transform:uppercase;letter-spacing:0.04em;color:var(--ng-text-tertiary)">' +
+        '<i class="bi ' + icon + '"></i> ' + title + '</div>' +
+      '<div style="color:var(--ng-text-secondary)">' + text + '</div>' +
+    '</div>';
+  }
+
+  // Adapter actions (called from buttons)
+  window.adapterAction = function(name, action) {
+    var btn = event.target.closest('button');
+    if (btn) {
+      btn.disabled = true;
+      btn.innerHTML = '<span class="spinner-border spinner-border-sm"></span> Working...';
+    }
+
+    fetch('/api/adapters/' + action, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ name: name })
+    })
+    .then(function(r) { return r.json(); })
+    .then(function(data) {
+      if (data.ok === false) {
+        alert(data.error || data.message || 'Action failed');
+      }
+      // Refresh the tab
+      fetchAdapters();
+    })
+    .catch(function(err) {
+      alert('Error: ' + err.message);
+      fetchAdapters();
+    });
+  };
+
+  function overviewCard(label, value, icon) {
+    return '<div class="col-md-3 col-6">' +
+      '<div class="ng-glass" style="padding:16px;text-align:center">' +
+        '<i class="bi ' + icon + '" style="font-size:1.25rem;color:var(--ng-accent);display:block;margin-bottom:8px"></i>' +
+        '<div class="ng-stat-value" style="font-size:1.5rem">' + value + '</div>' +
+        '<div class="ng-stat-label">' + label + '</div>' +
+      '</div>' +
+    '</div>';
+  }
+})();