superlocalmemory 3.4.9 → 3.4.10

package/src/superlocalmemory/storage/schema_v3410.py

@@ -0,0 +1,159 @@
+# Copyright (c) 2026 Varun Pratap Bhardwaj / Qualixar
+# Licensed under AGPL-3.0-or-later - see LICENSE file
+# Part of SuperLocalMemory V3 | https://qualixar.com | https://varunpratap.com
+
+"""SuperLocalMemory V3.4.10 "Fortress" — Schema Extensions.
+
+New tables for cloud backup + entity quality:
+  - backup_destinations: Cloud backup targets (Google Drive, GitHub, local)
+  - entity_blacklist: Stop words and known garbage entity names
+
+Design rules (inherited):
+  - CREATE IF NOT EXISTS for idempotency
+  - profile_id where applicable
+  - Never ALTER existing column types
+
+Part of Qualixar | Author: Varun Pratap Bhardwaj
+"""
+
+from __future__ import annotations
+
+import logging
+import sqlite3
+
+logger = logging.getLogger(__name__)
+
+# ---------------------------------------------------------------------------
+# DDL — Backup Destinations
+# ---------------------------------------------------------------------------
+
+_BACKUP_DESTINATIONS_DDL = """
+CREATE TABLE IF NOT EXISTS backup_destinations (
+    id TEXT PRIMARY KEY,
+    profile_id TEXT DEFAULT 'default',
+    destination_type TEXT NOT NULL,
+    display_name TEXT DEFAULT '',
+    credentials_ref TEXT DEFAULT '',
+    config TEXT DEFAULT '{}',
+    last_sync_at TEXT,
+    last_sync_status TEXT DEFAULT 'never',
+    last_sync_error TEXT DEFAULT '',
+    enabled INTEGER DEFAULT 1,
+    created_at TEXT NOT NULL
+);
+
+CREATE INDEX IF NOT EXISTS idx_backup_dest_type
+    ON backup_destinations(destination_type);
+CREATE INDEX IF NOT EXISTS idx_backup_dest_profile
+    ON backup_destinations(profile_id);
+"""
+
+# ---------------------------------------------------------------------------
+# DDL — Entity Blacklist
+# ---------------------------------------------------------------------------
+
+_ENTITY_BLACKLIST_DDL = """
+CREATE TABLE IF NOT EXISTS entity_blacklist (
+    term TEXT PRIMARY KEY,
+    reason TEXT DEFAULT 'stop_word',
+    added_at TEXT NOT NULL
+);
+"""
+
+# ---------------------------------------------------------------------------
+# Default blacklist entries (seeded on first migration)
+# ---------------------------------------------------------------------------
+
+_DEFAULT_BLACKLIST = [
+    # English stop words that frequently become garbage entities
+    "a", "an", "the", "all", "not", "no", "yes", "and", "or", "but",
+    "if", "is", "are", "was", "were", "be", "been", "being",
+    "have", "has", "had", "do", "does", "did", "will", "would",
+    "shall", "should", "can", "could", "just", "also", "only",
+    "very", "too", "so", "then", "than", "that", "this",
+    "each", "every", "both", "few", "more", "most", "other",
+    "some", "such", "any", "many", "much", "own", "same",
+    "new", "old", "first", "last", "next", "now",
+    # Months (biggest historical source of garbage)
+    "january", "february", "march", "april", "may", "june",
+    "july", "august", "september", "october", "november", "december",
+    # Technical terms commonly misclassified
+    "test", "fix", "build", "check", "run", "start", "stop",
+    "error", "status", "version", "query", "data", "file",
+    "ready", "done", "complete", "pending", "active", "failed",
+    "total", "count", "key", "value", "true", "false",
+    # Abstract nouns misclassified as people
+    "completeness", "correctness", "limitations", "requirements",
+    "performance", "security", "quality", "coverage", "progress",
+    "analysis", "research", "implementation", "verification",
+]
+
+
+# ---------------------------------------------------------------------------
+# Migration runner
+# ---------------------------------------------------------------------------
+
+def apply_v3410_schema(db_path: str | sqlite3.Connection) -> dict:
+    """Apply all v3.4.10 schema changes. Idempotent."""
+    result = {"applied": [], "errors": []}
+
+    if isinstance(db_path, sqlite3.Connection):
+        conn = db_path
+        own_connection = False
+    else:
+        conn = sqlite3.connect(str(db_path))
+        own_connection = True
+
+    try:
+        # Backup destinations table
+        try:
+            conn.executescript(_BACKUP_DESTINATIONS_DDL)
+            result["applied"].append("backup_destinations table + indexes")
+        except sqlite3.OperationalError as e:
+            result["errors"].append(f"backup_destinations: {e}")
+
+        # Entity blacklist table
+        try:
+            conn.executescript(_ENTITY_BLACKLIST_DDL)
+            result["applied"].append("entity_blacklist table")
+        except sqlite3.OperationalError as e:
+            result["errors"].append(f"entity_blacklist: {e}")
+
+        # Seed default blacklist (only inserts missing entries)
+        now = __import__("datetime").datetime.now().isoformat()
+        seeded = 0
+        for term in _DEFAULT_BLACKLIST:
+            try:
+                conn.execute(
+                    "INSERT OR IGNORE INTO entity_blacklist (term, reason, added_at) "
+                    "VALUES (?, 'stop_word', ?)",
+                    (term, now),
+                )
+                seeded += 1
+            except sqlite3.OperationalError:
+                pass
+        if seeded:
+            result["applied"].append(f"entity_blacklist seeded ({len(_DEFAULT_BLACKLIST)} terms)")
+
+        # Mark version
+        try:
+            conn.execute(
+                "INSERT OR IGNORE INTO schema_version (version, applied_at) VALUES (?, ?)",
+                ("3.4.10", now),
+            )
+        except sqlite3.OperationalError:
+            pass
+
+        conn.commit()
+
+        if result["applied"]:
+            logger.info("Schema v3.4.10 applied: %s", ", ".join(result["applied"]))
+
+    except Exception as e:
+        result["errors"].append(f"fatal: {e}")
+        logger.error("Schema v3.4.10 migration failed: %s", e)
+    finally:
+        if own_connection:
+            conn.close()
+
+    return result

package/src/superlocalmemory/ui/index.html

@@ -43,6 +43,14 @@
             box-shadow: 0 2px 4px rgba(0,0,0,0.1);
         }
 
+        /* Cloud account widget — sidebar (v3.4.10) */
+        #ng-account-widget:hover { background: rgba(255,255,255,0.06) !important; }
+        .account-dest-item { padding: 6px 0; display: flex; align-items: center; gap: 8px; }
+        .account-dest-badge { font-size: 10px; padding: 1px 6px; border-radius: 4px; }
+        .account-dest-badge.synced { background: rgba(0,212,170,0.15); color: #00D4AA; }
+        .account-dest-badge.failed { background: rgba(255,71,87,0.15); color: #ff4757; }
+        .account-dest-badge.never { background: rgba(255,255,255,0.06); color: #888; }
+
         /* Stat cards with gradient backgrounds */
         .stat-card {
             border: none;
@@ -1717,6 +1725,25 @@
                 <div id="entity-detail-panel" style="display:none;margin-top:24px"></div>
             </div>
 
+            <!-- Skill Evolution (v3.4.10 — Arsenal Evolution) -->
+            <div class="tab-pane fade" id="skills-pane">
+                <div class="ng-content-header">
+                    <div>
+                        <div class="ng-content-title"><i class="bi bi-lightning-charge"></i> Skill Evolution</div>
+                        <div class="ng-content-subtitle">Track skill performance, evolution history, and health status</div>
+                    </div>
+                    <button class="ng-btn" onclick="loadSkillEvolution()"><i class="bi bi-arrow-clockwise"></i> Refresh</button>
+                </div>
+                <div id="skills-overview-cards"></div>
+                <div id="skills-list" style="margin-top:24px">
+                    <div class="text-center" style="padding:24px;color:var(--ng-text-tertiary)">
+                        <div class="spinner-border" style="color:var(--ng-accent)"></div>
+                        <div style="margin-top:8px">Loading skill performance data...</div>
+                    </div>
+                </div>
+                <div id="skill-detail-panel" style="display:none;margin-top:24px"></div>
+            </div>
+
             <!-- Mesh Peers (v3.4.3 — Neural Glass) -->
             <div class="tab-pane fade" id="mesh-pane">
                 <div class="ng-content-header">
@@ -1974,6 +2001,31 @@
                         </div>
                     </div>
                 </div>
+                <!-- Cloud Backup (v3.4.10 "Fortress") -->
+                <div class="card p-3 mb-3">
+                    <h5 class="mb-3"><i class="bi bi-cloud-arrow-up"></i> Cloud Backup</h5>
+                    <p class="text-muted small mb-2">
+                        Sync your memory backups to Google Drive or GitHub. Credentials are stored securely in your OS keychain.
+                    </p>
+                    <div id="cloud-destinations" class="mb-3">
+                        <div class="text-muted small">Loading cloud destinations...</div>
+                    </div>
+                    <div class="d-flex gap-2 flex-wrap">
+                        <button class="btn btn-outline-primary btn-sm" onclick="connectGoogleDrive()">
+                            <i class="bi bi-google"></i> Connect Google Drive
+                        </button>
+                        <button class="btn btn-outline-dark btn-sm" onclick="connectGitHub()">
+                            <i class="bi bi-github"></i> Connect GitHub
+                        </button>
+                        <button class="btn btn-outline-success btn-sm" onclick="syncCloudNow()">
+                            <i class="bi bi-cloud-upload"></i> Sync Now
+                        </button>
+                        <button class="btn btn-outline-info btn-sm" onclick="exportBackup()">
+                            <i class="bi bi-file-earmark-zip"></i> Export Backup
+                        </button>
+                    </div>
+                </div>
+
                 <!-- Learning Data Management (v2.7.4) -->
                 <div class="card p-3 mb-3">
                     <h5 class="mb-3"><i class="bi bi-brain"></i> Learning Data</h5>
@@ -2097,9 +2149,10 @@
     <!-- Neural Glass v3.4.4 — Dashboard V2 -->
     <script src="static/js/ng-health.js?v=345"></script>
     <script src="static/js/ng-ingestion.js?v=345"></script>
-    <script src="static/js/ng-entities.js?v=345"></script>
+    <script src="static/js/ng-entities.js?v=3410"></script>
+    <script src="static/js/ng-skills.js?v=3410"></script>
     <script src="static/js/ng-mesh.js?v=345"></script>
-    <script src="static/js/ng-shell.js?v=345"></script>
+    <script src="static/js/ng-shell.js?v=3410"></script>
 
     <footer style="text-align:center; padding:24px; border-top:1px solid var(--bs-border-color); font-size:0.8125rem;">
         <div style="display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:8px;">

package/src/superlocalmemory/ui/js/core.js

@@ -243,4 +243,7 @@ window.addEventListener('DOMContentLoaded', function() {
     if (typeof initEventStream === 'function') initEventStream();
     if (typeof loadEventStats === 'function') loadEventStats();
     if (typeof loadAgents === 'function') loadAgents();
+
+    // v3.4.10 — Account widget (cloud backup status in header)
+    if (typeof loadCloudDestinations === 'function') loadCloudDestinations();
 });

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

@@ -85,14 +85,23 @@
     var typeColor = getTypeColor(entity.type);
     var summaryText = entity.summary_preview || 'No summary yet — click to view details';
     var hasTruth = entity.has_compiled_truth;
+    var typeIcon = getTypeIcon(entity.type);
+
+    // Skill entities get a distinctive accent border
+    var borderAccent = entity.type === 'skill'
+      ? 'border-left:3px solid ' + typeColor + ';'
+      : '';
 
     return '<div class="col-md-6 col-lg-4">' +
-      '<div class="ng-glass" style="padding:16px;cursor:pointer;transition:border-color 0.2s" ' +
+      '<div class="ng-glass" style="padding:16px;cursor:pointer;transition:border-color 0.2s;' + borderAccent + '" ' +
         'onclick="showEntityDetail(\'' + escapeAttr(entity.name) + '\')" ' +
         'onmouseover="this.style.borderColor=\'var(--ng-border-prominent)\'" ' +
         'onmouseout="this.style.borderColor=\'var(--ng-border-subtle)\'">' +
         '<div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px">' +
-          '<div style="font-weight:590;font-size:0.9375rem;color:var(--ng-text-primary)">' + escapeHtml(entity.name) + '</div>' +
+          '<div style="font-weight:590;font-size:0.9375rem;color:var(--ng-text-primary)">' +
+            '<i class="bi ' + typeIcon + '" style="color:' + typeColor + ';margin-right:4px"></i>' +
+            escapeHtml(entity.name) +
+          '</div>' +
           '<span class="ng-badge ng-badge-accent">' + escapeHtml(entity.type) + '</span>' +
         '</div>' +
         '<div style="font-size:0.8125rem;color:var(--ng-text-secondary);margin-bottom:8px;' +
@@ -107,6 +116,18 @@
     '</div>';
   }
 
+  function getTypeIcon(type) {
+    var icons = {
+      person: 'bi-person',
+      concept: 'bi-lightbulb',
+      organization: 'bi-building',
+      place: 'bi-geo-alt',
+      event: 'bi-calendar-event',
+      skill: 'bi-lightning-charge'
+    };
+    return icons[type] || 'bi-circle';
+  }
+
   // Show entity detail panel
   window.showEntityDetail = function(entityName) {
     var panel = document.getElementById('entity-detail-panel');
@@ -253,7 +274,10 @@
   }
 
   function getTypeColor(type) {
-    var colors = { person: '#3b82f6', concept: '#10b981', organization: '#f59e0b', location: '#ef4444' };
+    var colors = {
+      person: '#3b82f6', concept: '#10b981', organization: '#f59e0b',
+      location: '#ef4444', skill: '#8b5cf6', event: '#ec4899'
+    };
     return colors[type] || '#7C6AEF';
   }
 

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

@@ -44,6 +44,7 @@
         { id: 'health-pane', icon: 'bi-heart-pulse', text: 'Health Monitor', badge: 'NEW' },
         { id: 'ingestion-pane', icon: 'bi-cloud-download', text: 'Ingestion', badge: 'NEW' },
         { id: 'entities-pane', icon: 'bi-person-badge', text: 'Entity Explorer', badge: 'NEW' },
+        { id: 'skills-pane', icon: 'bi-lightning-charge', text: 'Skill Evolution', badge: 'NEW' },
         { id: 'mesh-pane', icon: 'bi-share', text: 'Mesh Peers', badge: 'NEW' }
       ]
     },
@@ -134,6 +135,35 @@
     var addProfileBtn = document.getElementById('add-profile-btn');
 
     footer.innerHTML =
+      // v3.4.10: Cloud Backup Account Widget
+      '<div id="ng-account-widget" style="margin-bottom:10px;padding:8px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);cursor:pointer;" onclick="document.querySelector(\'[data-target=settings]\')?.click()">' +
+        '<div style="display:flex;align-items:center;gap:8px;">' +
+          '<span id="ng-account-avatar" style="width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;overflow:hidden;">' +
+            '<i class="bi bi-cloud-slash" style="font-size:13px;opacity:0.4;"></i>' +
+          '</span>' +
+          '<div style="flex:1;min-width:0;">' +
+            '<div id="ng-account-name" style="font-size:12px;color:#e0e0e0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">Not connected</div>' +
+            '<div id="ng-account-status" style="font-size:10px;color:#666;">No cloud backup</div>' +
+          '</div>' +
+          '<span id="ng-account-dot" style="width:7px;height:7px;border-radius:50%;background:#444;flex-shrink:0;" title="No cloud backup"></span>' +
+        '</div>' +
+        '<div id="ng-account-actions" style="display:none;margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,0.05);">' +
+          '<div style="display:flex;gap:4px;">' +
+            '<button class="ng-btn" onclick="event.stopPropagation();connectGoogleDrive()" title="Connect Google Drive" style="flex:1;justify-content:center;font-size:11px;padding:4px;">' +
+              '<i class="bi bi-google" style="color:#4285f4;"></i>' +
+            '</button>' +
+            '<button class="ng-btn" onclick="event.stopPropagation();connectGitHub()" title="Connect GitHub" style="flex:1;justify-content:center;font-size:11px;padding:4px;">' +
+              '<i class="bi bi-github"></i>' +
+            '</button>' +
+            '<button class="ng-btn" onclick="event.stopPropagation();syncCloudNow()" title="Sync Now" style="flex:1;justify-content:center;font-size:11px;padding:4px;">' +
+              '<i class="bi bi-cloud-upload" style="color:#00D4AA;"></i>' +
+            '</button>' +
+            '<button class="ng-btn" onclick="event.stopPropagation();exportBackup()" title="Export Backup" style="flex:1;justify-content:center;font-size:11px;padding:4px;">' +
+              '<i class="bi bi-download" style="color:#f39c12;"></i>' +
+            '</button>' +
+          '</div>' +
+        '</div>' +
+      '</div>' +
       '<div style="margin-bottom:8px">' +
         '<div class="ng-sidebar-section-label" style="padding:0 0 4px">Profile</div>' +
         '<div style="display:flex;gap:4px;align-items:center" id="ng-profile-container"></div>' +
@@ -359,6 +389,9 @@
       case 'entities-pane':
         if (typeof loadEntityExplorer === 'function') loadEntityExplorer();
         break;
+      case 'skills-pane':
+        if (typeof loadSkillEvolution === 'function') loadSkillEvolution();
+        break;
       case 'mesh-pane':
         if (typeof loadMeshPeers === 'function') loadMeshPeers();
         break;

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

@@ -0,0 +1,227 @@
+// Neural Glass — Skill Evolution Tab
+// Browse skill performance, evolution history, and health status (v3.4.10)
+// API: /api/behavioral/assertions (category=skill_performance, skill_correlation)
+//      /api/behavioral/tool-events (tool_name=Skill)
+//      /api/entity/list (type filter for skill entities)
+
+(function() {
+  'use strict';
+
+  window.loadSkillEvolution = function() {
+    fetchSkillOverview();
+    fetchSkillPerformance();
+  };
+
+  function fetchSkillOverview() {
+    var el = document.getElementById('skills-overview-cards');
+    if (!el) return;
+
+    // Compatibility notice + ECC credit + docs links
+    var noticeHtml =
+      '<div class="card" style="padding:12px 16px;margin-bottom:16px;border-left:3px solid #8b5cf6">' +
+        '<div style="font-size:0.8125rem;color:#555">' +
+          '<i class="bi bi-info-circle" style="color:#8b5cf6;margin-right:6px"></i>' +
+          '<strong>Skill Evolution</strong> currently tracks <strong>Claude Code</strong> skills. ' +
+          'The <code>/api/v3/tool-event</code> endpoint accepts events from any IDE client. ' +
+          'Enhanced observation support available with ' +
+          '<a href="https://github.com/affaan-m/everything-claude-code" target="_blank" style="color:#8b5cf6">Everything Claude Code (ECC)</a> ' +
+          'via <code>slm ingest --source ecc</code>.' +
+        '</div>' +
+        '<div style="font-size:0.75rem;color:#888;margin-top:8px">' +
+          '<a href="https://superlocalmemory.com/skill-evolution" target="_blank" style="color:#8b5cf6;margin-right:12px"><i class="bi bi-globe"></i> Learn more</a>' +
+          '<a href="https://github.com/qualixar/superlocalmemory/blob/main/docs/skill-evolution.md" target="_blank" style="color:#8b5cf6"><i class="bi bi-book"></i> Documentation</a>' +
+        '</div>' +
+      '</div>';
+    el.innerHTML = noticeHtml + '<div id="skills-overview-inner"></div>';
+    el = document.getElementById('skills-overview-inner');
+
+    // Fetch tool events for Skill calls + assertions for skill_performance
+    Promise.all([
+      fetch('/api/behavioral/tool-events?tool_name=Skill&limit=500').then(function(r) { return r.json(); }),
+      fetch('/api/behavioral/assertions?category=skill_performance&limit=50').then(function(r) { return r.json(); }),
+      fetch('/api/behavioral/assertions?category=skill_correlation&limit=20').then(function(r) { return r.json(); }),
+    ]).then(function(results) {
+      var events = results[0].events || [];
+      var perfAssertions = results[1].assertions || [];
+      var corrAssertions = results[2].assertions || [];
+
+      // Count unique skills from events
+      var skillNames = {};
+      events.forEach(function(e) {
+        var name = extractSkillName(e);
+        if (name) skillNames[name] = (skillNames[name] || 0) + 1;
+      });
+
+      var html = '<div class="row g-3 mb-4">' +
+        overviewCard('Total Skill Events', events.length, 'bi-lightning-charge', 'var(--ng-accent)') +
+        overviewCard('Unique Skills', Object.keys(skillNames).length, 'bi-grid-3x3', '#8b5cf6') +
+        overviewCard('Performance Assertions', perfAssertions.length, 'bi-graph-up', '#10b981') +
+        overviewCard('Skill Correlations', corrAssertions.length, 'bi-link-45deg', '#f59e0b') +
+      '</div>';
+
+      el.innerHTML = html;
+    }).catch(function() {
+      el.innerHTML = '<div class="alert alert-warning">Could not load skill overview</div>';
+    });
+  }
+
+  function fetchSkillPerformance() {
+    var el = document.getElementById('skills-list');
+    if (!el) return;
+
+    Promise.all([
+      fetch('/api/behavioral/assertions?category=skill_performance&limit=50').then(function(r) { return r.json(); }),
+      fetch('/api/behavioral/assertions?category=skill_correlation&limit=20').then(function(r) { return r.json(); }),
+      fetch('/api/behavioral/tool-events?tool_name=Skill&limit=500').then(function(r) { return r.json(); }),
+    ]).then(function(results) {
+      var perfAssertions = results[0].assertions || [];
+      var corrAssertions = results[1].assertions || [];
+      var events = results[2].events || [];
+
+      var html = '';
+
+      // Section 1: Skill Performance
+      html += '<h5 style="margin-bottom:16px"><i class="bi bi-lightning-charge" style="color:#8b5cf6"></i> Skill Performance</h5>';
+
+      if (perfAssertions.length === 0 && events.length === 0) {
+        html += '<div class="card" style="padding:24px;text-align:center;color:#888">' +
+          '<i class="bi bi-lightning-charge" style="font-size:2.5rem;display:block;margin-bottom:12px;opacity:0.3"></i>' +
+          '<div style="font-size:1rem;margin-bottom:4px;color:#444">No skill performance data yet</div>' +
+          '<div style="font-size:0.8125rem">' +
+            'Skill tracking starts automatically after the enriched hook captures data.<br>' +
+            'Use skills in your sessions — performance assertions will appear after consolidation.' +
+          '</div>' +
+        '</div>';
+      } else if (perfAssertions.length > 0) {
+        html += '<div class="row g-3">';
+        perfAssertions.forEach(function(a) {
+          html += renderSkillCard(a);
+        });
+        html += '</div>';
+      } else {
+        // We have events but no assertions yet (need consolidation)
+        html += '<div class="card" style="padding:16px;margin-bottom:16px">' +
+          '<div style="font-size:0.875rem;color:#555">' +
+            '<i class="bi bi-info-circle" style="color:#8b5cf6;margin-right:6px"></i>' +
+            events.length + ' skill events collected. Run consolidation to generate performance assertions.' +
+          '</div>' +
+        '</div>';
+
+        // Show raw event summary
+        var skillCounts = {};
+        events.forEach(function(e) {
+          var name = extractSkillName(e);
+          if (name) skillCounts[name] = (skillCounts[name] || 0) + 1;
+        });
+
+        html += '<div class="row g-3">';
+        Object.keys(skillCounts).sort(function(a, b) {
+          return skillCounts[b] - skillCounts[a];
+        }).forEach(function(name) {
+          html += '<div class="col-md-6 col-lg-4"><div class="card" style="padding:16px;border-left:3px solid #8b5cf6">' +
+            '<div style="display:flex;justify-content:space-between;align-items:center">' +
+              '<div style="font-weight:600;font-size:0.9375rem">' +
+                '<i class="bi bi-lightning-charge" style="color:#8b5cf6;margin-right:4px"></i>' +
+                escapeHtml(name) +
+              '</div>' +
+              '<span class="badge" style="background:#8b5cf620;color:#8b5cf6;font-size:0.75rem">' + skillCounts[name] + ' events</span>' +
+            '</div>' +
+          '</div></div>';
+        });
+        html += '</div>';
+      }
+
+      // Section 2: Skill Correlations
+      if (corrAssertions.length > 0) {
+        html += '<h5 style="margin-top:32px;margin-bottom:16px"><i class="bi bi-link-45deg" style="color:#f59e0b"></i> Skill Correlations</h5>';
+        html += '<div class="row g-3">';
+        corrAssertions.forEach(function(a) {
+          html += '<div class="col-md-6"><div class="card" style="padding:12px">' +
+            '<div style="font-size:0.875rem">' +
+              '<strong>' + escapeHtml(a.trigger_condition || '') + '</strong>' +
+            '</div>' +
+            '<div style="font-size:0.8125rem;color:#555;margin-top:4px">' +
+              escapeHtml(a.action || '') +
+            '</div>' +
+            '<div style="font-size:0.75rem;color:#888;margin-top:4px">' +
+              'Confidence: ' + ((a.confidence || 0) * 100).toFixed(0) + '%' +
+            '</div>' +
+          '</div></div>';
+        });
+        html += '</div>';
+      }
+
+      el.innerHTML = html;
+    }).catch(function(err) {
+      el.innerHTML = '<div class="text-center" style="padding:24px;color:var(--ng-text-tertiary)">' +
+        'Error loading skill data: ' + err.message + '</div>';
+    });
+  }
+
+  function renderSkillCard(assertion) {
+    var conf = assertion.confidence || 0;
+    var confPct = (conf * 100).toFixed(0);
+    var confColor = conf >= 0.7 ? '#10b981' : conf >= 0.5 ? '#f59e0b' : '#ef4444';
+
+    // Extract skill name from trigger_condition
+    var skillName = (assertion.trigger_condition || '').replace('when considering skill ', '');
+
+    return '<div class="col-md-6 col-lg-4">' +
+      '<div class="card" style="padding:16px;border-left:3px solid #8b5cf6;cursor:pointer">' +
+        '<div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px">' +
+          '<div style="font-weight:600;font-size:0.9375rem">' +
+            '<i class="bi bi-lightning-charge" style="color:#8b5cf6;margin-right:4px"></i>' +
+            escapeHtml(skillName) +
+          '</div>' +
+          '<span class="badge" style="background:' + confColor + ';color:#fff;font-size:0.75rem">' +
+            confPct + '%' +
+          '</span>' +
+        '</div>' +
+        '<div style="font-size:0.8125rem;color:#555;margin-bottom:8px">' +
+          escapeHtml(assertion.action || 'No performance data yet') +
+        '</div>' +
+        '<div style="display:flex;justify-content:space-between;align-items:center;font-size:0.75rem;color:#888">' +
+          '<span>Evidence: ' + (assertion.evidence_count || 0) + ' invocations</span>' +
+          '<span>Reinforced: ' + (assertion.reinforcement_count || 0) + 'x</span>' +
+        '</div>' +
+      '</div>' +
+    '</div>';
+  }
+
+  function extractSkillName(event) {
+    var input = event.input_summary || '';
+    var output = event.output_summary || '';
+
+    // Try input_summary (enriched hook format)
+    if (input) {
+      try {
+        var inp = JSON.parse(input);
+        if (inp.skill) return inp.skill;
+      } catch(e) {}
+    }
+
+    // Try output_summary (ECC ingestion format)
+    if (output) {
+      try {
+        var out = JSON.parse(output);
+        if (out.commandName) return out.commandName;
+      } catch(e) {}
+    }
+
+    return null;
+  }
+
+  function overviewCard(label, value, icon, color) {
+    return '<div class="col-md-3 col-6"><div class="card" style="padding:12px;text-align:center">' +
+      '<i class="bi ' + icon + '" style="color:' + color + ';font-size:1.125rem;display:block;margin-bottom:4px"></i>' +
+      '<div style="font-size:1.25rem;font-weight:600">' + value + '</div>' +
+      '<div style="font-size:0.75rem;text-transform:uppercase;letter-spacing:0.06em;color:#888">' + label + '</div>' +
+    '</div></div>';
+  }
+
+  function escapeHtml(s) {
+    var d = document.createElement('div');
+    d.textContent = s || '';
+    return d.innerHTML;
+  }
+})();