superlocalmemory 4.1.13 → 4.1.14

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

@@ -1,819 +0,0 @@
-/* SuperLocalMemory — OD Shell v1.0
- * CSP-safe single-page port of assets/shell.js (Open Design 022c4af9).
- *
- * Hard constraints obeyed:
- *   - NO inline <script> blocks or on*= event handlers anywhere
- *   - All events wired via addEventListener or data-act-* delegation
- *   - Syncs data-theme (OD) + data-bs-theme (Bootstrap) + .ng-dark body class
- *   - Sidebar nav uses data-tab="<paneId>" for single-page switching
- *   - Replaces ng-shell.js entirely; all ng-shell functionality ported here
- *
- * Copyright (c) 2026 Varun Pratap Bhardwaj / Qualixar — AGPL-3.0
- */
-(function () {
-  'use strict';
-
-  /* ================================================================
-     Icons (lucide-style 24×24 stroke path data)
-     Same set as OD assets/shell.js plus Bootstrap-icon compat shapes.
-  ================================================================ */
-  var I = {
-    dashboard:  '<path d="M3 3h8v8H3zM13 3h8v5h-8zM13 12h8v9h-8zM3 15h8v6H3z"/>',
-    brain:      '<path d="M12 5a3 3 0 0 0-6 0 3 3 0 0 0-3 3 3 3 0 0 0 1.5 2.6A3 3 0 0 0 6 17a3 3 0 0 0 6 0zM12 5a3 3 0 0 1 6 0 3 3 0 0 1 3 3 3 3 0 0 1-1.5 2.6A3 3 0 0 1 18 17a3 3 0 0 1-6 0zM12 5v14"/>',
-    graph:      '<circle cx="5" cy="6" r="2.5"/><circle cx="19" cy="7" r="2.5"/><circle cx="6" cy="18" r="2.5"/><circle cx="17" cy="18" r="2.5"/><path d="M7 7l9 9M7.2 6.6L16.5 6.9M7.5 16.6l8.2.6M6 15.5l1-6.5"/>',
-    memories:   '<ellipse cx="12" cy="5" rx="8" ry="3"/><path d="M4 5v6c0 1.7 3.6 3 8 3s8-1.3 8-3V5M4 11v6c0 1.7 3.6 3 8 3s8-1.3 8-3v-6"/>',
-    entity:     '<path d="M12 2l9 5v10l-9 5-9-5V7z"/><path d="M12 12l9-5M12 12v10M12 12L3 7"/>',
-    skill:      '<path d="M12 3l1.9 4.6L18 9l-3.5 3 1 5-3.5-2.5L8.5 17l1-5L6 9l4.1-1.4z"/>',
-    health:     '<path d="M3 12h4l2-6 4 12 2-6h6"/>',
-    operations: '<circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M19 5l-2 2M7 17l-2 2"/>',
-    optimize:   '<path d="M13 2L4.1 12.3a1 1 0 0 0 .8 1.7H11l-1 8 8.9-10.3a1 1 0 0 0-.8-1.7H12z"/>',
-    mesh:       '<circle cx="12" cy="12" r="2.5"/><circle cx="5" cy="5" r="2"/><circle cx="19" cy="5" r="2"/><circle cx="5" cy="19" r="2"/><circle cx="19" cy="19" r="2"/><path d="M10 10L6.5 6.5M14 10l3.5-3.5M10 14l-3.5 3.5M14 14l3.5 3.5"/>',
-    settings:   '<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.6 1.6 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.6 1.6 0 0 0-1.8-.3 1.6 1.6 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.6 1.6 0 0 0-1-1.5 1.6 1.6 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.6 1.6 0 0 0 .3-1.8 1.6 1.6 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.6 1.6 0 0 0 1.5-1 1.6 1.6 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.6 1.6 0 0 0 1.8.3H9a1.6 1.6 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.6 1.6 0 0 0 1 1.5 1.6 1.6 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.6 1.6 0 0 0-.3 1.8V9a1.6 1.6 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.6 1.6 0 0 0-1.5 1z"/>',
-    search:     '<circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/>',
-    sun:        '<circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2M5 5l1.5 1.5M17.5 17.5L19 19M19 5l-1.5 1.5M6.5 17.5L5 19"/>',
-    moon:       '<path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/>',
-    menu:       '<path d="M4 6h16M4 12h16M4 18h16"/>',
-    lock:       '<rect x="4" y="10" width="16" height="10" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/>',
-    shield:     '<path d="M12 2l8 4v6c0 5-3.5 8.5-8 10-4.5-1.5-8-5-8-10V6z"/><path d="M9 12l2 2 4-4"/>',
-    plug:       '<path d="M9 2v6M15 2v6M7 8h10v3a5 5 0 0 1-10 0zM12 16v6"/>',
-    github:     '<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/>',
-    star:       '<path d="M12 2l3 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.9 21l1.2-6.8-5-4.9 6.9-1z"/>',
-    pkg:        '<path d="M12 2l9 5v10l-9 5-9-5V7z"/><path d="M12 12l9-5M12 12v10M12 12L3 7"/>',
-    clock:      '<circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/>',
-    link:       '<path d="M9 15l6-6M10 6l1-1a4 4 0 0 1 6 6l-1 1M14 18l-1 1a4 4 0 0 1-6-6l1-1"/>',
-    cloud:      '<path d="M17.5 19a4.5 4.5 0 1 0-1.4-8.8A6 6 0 0 0 4.5 12 3.5 3.5 0 0 0 6 18.9z"/>',
-    filter:     '<path d="M3 4h18l-7 8.5V20l-4 1v-8.5z"/>',
-    send:       '<path d="M22 2L11 13M22 2l-7 20-4-9-9-4z"/>',
-    download:   '<path d="M12 3v12M7 11l5 5 5-5M4 21h16"/>',
-    plus:       '<path d="M12 5v14M5 12h14"/>',
-    refresh:    '<path d="M21 12a9 9 0 1 1-3-6.7L21 8M21 3v5h-5"/>',
-  };
-
-  function svg(name, cls) {
-    return '<svg class="' + (cls || '') + '" viewBox="0 0 24 24" fill="none" ' +
-      'stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">' +
-      (I[name] || '') + '</svg>';
-  }
-  window.slmIcon = svg;
-
-  /* ================================================================
-     Nav model: OD groups → real pane IDs (single-page, no page links)
-  ================================================================ */
-  var NAV = [
-    { g: 'Overview', items: [
-      { k: 'dashboard-pane', t: 'Dashboard',   i: 'dashboard', crumb: 'Overview' },
-      { k: 'brain-pane',     t: 'Brain',        i: 'brain',     crumb: 'Overview', tag: 'live', hero: true },
-    ]},
-    { g: 'Memory', items: [
-      { k: 'graph-pane',     t: 'Knowledge Graph',   i: 'graph',    crumb: 'Memory', hero: true },
-      { k: 'memories-pane',  t: 'Memories',           i: 'memories', crumb: 'Memory' },
-      { k: 'entities-pane',  t: 'Entity Explorer',    i: 'entity',   crumb: 'Memory' },
-      { k: 'agents-pane',    t: 'Multi-Agent Memory', i: 'mesh',     crumb: 'Memory' },
-    ]},
-    { g: 'Intelligence', items: [
-      { k: 'skills-pane',    t: 'Skill Evolution',  i: 'skill',    crumb: 'Intelligence' },
-    ]},
-    { g: 'System', items: [
-      { k: 'health-pane',     t: 'Health',      i: 'health',     crumb: 'System' },
-      { k: 'operations-pane', t: 'Governance',  i: 'shield',     crumb: 'System' },
-      { k: 'optimize-pane',   t: 'Optimize',    i: 'optimize',   crumb: 'System' },
-    ]},
-    { g: 'Integrations', items: [
-      { k: 'mcp-pane',       t: 'MCP & Tools', i: 'plug',     crumb: 'Integrations' },
-      { k: 'mesh-pane',      t: 'Mesh Peers',  i: 'mesh',     crumb: 'Integrations' },
-      // 4.0.8: was a tab inside Governance. Every other Governance tab governs
-      // SLM's OWN data — lifecycle, access, trust, compliance, ingestion.
-      // Bounded Loops governs none of it: it is a separate product SLM
-      // optionally observes over a published contract, which is exactly what
-      // Integrations already means. "Not installed" is also an unremarkable
-      // answer here, where in a plane of its own an empty pane reads as broken.
-      { k: 'loops-pane',     t: 'Bounded Loops', i: 'shield', crumb: 'Integrations' },
-    ]},
-    { g: 'Config', items: [
-      { k: 'settings-pane',  t: 'Settings',      i: 'settings', crumb: 'Config' },
-      { k: 'backup-pane',    t: 'Cloud Backup',  i: 'cloud',    crumb: 'Config' },
-    ]},
-  ];
-
-  // Flat lookup: paneId → nav item
-  var NAV_MAP = {};
-  NAV.forEach(function (grp) {
-    grp.items.forEach(function (it) { NAV_MAP[it.k] = it; });
-  });
-
-  // OD panes use a short in-memory stale-while-revalidate window. Navigation
-  // inside the window is a pure DOM switch; after it expires, the shell
-  // refreshes a hidden replacement pane and keeps the mounted pane visible
-  // until the replacement settles. Values can be overridden before this
-  // script loads to make the lifecycle deterministic in the Node UI harness.
-  var PANE_CACHE_TTL_MS = Number(window.SLM_PANE_CACHE_TTL_MS) || 15000;
-  var PANE_REFRESH_QUIET_MS = Number(window.SLM_PANE_REFRESH_QUIET_MS);
-  if (!Number.isFinite(PANE_REFRESH_QUIET_MS) || PANE_REFRESH_QUIET_MS < 0) {
-    PANE_REFRESH_QUIET_MS = 150;
-  }
-  var PANE_REFRESH_MAX_MS = 30000;
-  var paneLoadState = {};
-  var paneRefreshTail = Promise.resolve();
-
-  function getPaneLoadState(paneId) {
-    if (!paneLoadState[paneId]) {
-      paneLoadState[paneId] = {
-        mounted: false,
-        loadedAt: 0,
-        refreshing: false,
-        generation: 0,
-      };
-    }
-    return paneLoadState[paneId];
-  }
-
-  /* ================================================================
-     Brand links
-  ================================================================ */
-  var LINKS = {
-    repo:     'https://github.com/qualixar/superlocalmemory',
-    npm:      'https://www.npmjs.com/package/superlocalmemory',
-    pip:      'https://pypi.org/project/superlocalmemory/',
-    qualixar: 'https://qualixar.com',
-    author:   'https://varunpratap.com',
-    license:  'https://github.com/qualixar/superlocalmemory/blob/main/LICENSE',
-  };
-
-  /* ================================================================
-     Theme: syncs data-theme (OD) + data-bs-theme (Bootstrap) + ng-dark
-  ================================================================ */
-  var THEME_KEY = 'slm-theme';
-
-  function applyTheme(t) {
-    document.documentElement.setAttribute('data-theme', t);
-    document.documentElement.setAttribute('data-bs-theme', t);
-    if (t === 'dark') {
-      document.body.classList.add('ng-dark');
-    } else {
-      document.body.classList.remove('ng-dark');
-    }
-    try { localStorage.setItem(THEME_KEY, t); } catch (e) {}
-
-    // Update all [data-theme-icon] placeholders (sun in dark, moon in light)
-    document.querySelectorAll('[data-theme-icon]').forEach(function (el) {
-      el.innerHTML = svg(t === 'dark' ? 'sun' : 'moon');
-    });
-
-    // Sync inline-styled graph/timeline backgrounds (Bootstrap inline styles override vars)
-    ['graph-container', 'memory-timeline-chart'].forEach(function (id) {
-      var el = document.getElementById(id);
-      if (!el) return;
-      el.style.setProperty('background', t === 'dark' ? '#0f1012' : '#ffffff', 'important');
-      el.style.setProperty('background-color', t === 'dark' ? '#0f1012' : '#ffffff', 'important');
-      el.style.setProperty('border-color', t === 'dark' ? 'rgba(255,255,255,0.06)' : '#e5e7eb', 'important');
-    });
-  }
-
-  // Apply theme immediately (before DOMContentLoaded) to prevent FOUC.
-  // Both data-theme (OD CSS) and data-bs-theme (Bootstrap) must be set here.
-  (function initThemeEarly() {
-    var t = 'dark';
-    try { t = localStorage.getItem(THEME_KEY) || 'dark'; } catch (e) {}
-    document.documentElement.setAttribute('data-theme', t);
-    document.documentElement.setAttribute('data-bs-theme', t);
-  }());
-
-  // Public API — override the core.js definition (which only sets data-bs-theme)
-  window.toggleDarkMode = function () {
-    var cur = document.documentElement.getAttribute('data-theme') || 'dark';
-    applyTheme(cur === 'dark' ? 'light' : 'dark');
-  };
-  window.slmToggleTheme = window.toggleDarkMode;
-
-  /* ================================================================
-     Build sidebar HTML
-  ================================================================ */
-  function buildSidebarHTML(activePane) {
-    var html =
-      '<div class="brand">' +
-        '<div class="logo"><img src="static/assets/slm-icon.svg" alt="SLM" width="26" height="26"></div>' +
-        '<div><div class="name">SuperLocalMemory</div><div class="sub">by Qualixar</div></div>' +
-      '</div>' +
-      '<nav class="nav">';
-
-    NAV.forEach(function (grp) {
-      html += '<div class="nav-group-label">' + grp.g + '</div>';
-      grp.items.forEach(function (it) {
-        var on   = it.k === activePane ? ' active' : '';
-        var hero = it.hero ? ' hero' : '';
-        var tag  = it.tag ? '<span class="tag">' + it.tag + '</span>' : '';
-        html +=
-          '<a class="nav-link' + on + hero + '" data-tab="' + it.k + '" ' +
-          'role="button" tabindex="0" aria-controls="' + it.k + '">' +
-          svg(it.i) + '<span>' + it.t + '</span>' + tag +
-          '</a>';
-      });
-    });
-
-    html +=
-      '</nav>' +
-      '<div class="sidebar-foot" id="od-sidebar-foot">' +
-        '<span class="dot pulse"></span>' +
-        '<span id="od-version">Local daemon</span>' +
-      '</div>' +
-      '<div id="od-profile-container" style="padding:0 12px 12px;display:flex;gap:4px;align-items:center"></div>';
-
-    return html;
-  }
-
-  /* ================================================================
-     Tab activation — single-page SPA switching
-  ================================================================ */
-  function activateTab(paneId) {
-    // Hide all Bootstrap tab panes
-    document.querySelectorAll('.tab-pane').forEach(function (p) {
-      p.classList.remove('show', 'active');
-    });
-
-    // Show target pane
-    var pane = document.getElementById(paneId);
-    if (pane) pane.classList.add('show', 'active');
-    // During a stale refresh the canonical pane is rendered off-screen and
-    // the previous pane remains as the visual snapshot. Keep that snapshot in
-    // sync with navigation so returning mid-refresh never exposes a blank pane.
-    document.querySelectorAll('[data-slm-stale-for]').forEach(function (snapshot) {
-      if (snapshot.dataset.slmStaleFor === paneId) {
-        snapshot.classList.add('show', 'active');
-      }
-    });
-
-    // Update sidebar active state
-    document.querySelectorAll('.nav-link[data-tab]').forEach(function (link) {
-      link.classList.toggle('active', link.getAttribute('data-tab') === paneId);
-    });
-
-    // Update topbar breadcrumb and heading
-    var item = NAV_MAP[paneId];
-    if (item) {
-      var crumbEl = document.getElementById('topbar-crumb');
-      var headEl  = document.getElementById('topbar-heading');
-      if (crumbEl) crumbEl.textContent = item.crumb || '';
-      if (headEl)  headEl.textContent  = item.t;
-    }
-
-    // Mount the owning renderer before dispatching any legacy event. Returning
-    // to a mounted OD pane preserves its DOM/data instead of re-querying every
-    // API and showing skeletons again.
-    var handledByShell = triggerTabLoad(paneId);
-
-    // Dispatch Bootstrap shown.bs.tab only for panes not owned by a shell
-    // loader (currently Dashboard). OD-owned panes and direct legacy fallbacks
-    // have already loaded exactly once above.
-    var tabBtn = document.getElementById(paneId.replace('-pane', '-tab'));
-    if (tabBtn && !handledByShell) {
-      try {
-        tabBtn.dispatchEvent(new Event('shown.bs.tab', { bubbles: true }));
-      } catch (e) {}
-    }
-
-    // Update URL hash without triggering a scroll
-    try { history.replaceState(null, '', '#' + paneId); } catch (e) {}
-
-    // Scroll both the window and the content area to top
-    window.scrollTo({ top: 0, behavior: 'instant' });
-    var contentEl = document.getElementById('main-content');
-    if (contentEl) contentEl.scrollTo({ top: 0, behavior: 'instant' });
-
-    // Deferred retry ONLY if the first render produced nothing (a pane that ran
-    // before it was visible/sized). Re-running unconditionally used to wipe and
-    // rebuild every pane 500ms after each switch — the visible "cards reload"
-    // flicker on every tab change. Guard on an empty, still-active pane so a
-    // successful render is never torn down and repainted.
-    setTimeout(function () {
-      var p = document.getElementById(paneId);
-      if (p && p.classList.contains('active') && p.children.length === 0) {
-        triggerTabLoad(paneId);
-      }
-    }, 500);
-
-    // Scroll the active sidebar item into view (mobile)
-    var activeLink = document.querySelector('.nav-link[data-tab="' + paneId + '"]');
-    if (activeLink) {
-      activeLink.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-    }
-  }
-
-  /* ================================================================
-     Lazy data loaders — same mapping as ng-shell.js triggerTabLoad
-  ================================================================ */
-  function queueOdPaneRefresh(tabId, fnName) {
-    var state = getPaneLoadState(tabId);
-    if (state.refreshing) return;
-    state.refreshing = true;
-    var generation = state.generation;
-
-    // Serialising the short handoff prevents nested global fetch wrappers when
-    // a user races across several stale panes. Each pane still remains usable
-    // from its mounted DOM while it waits its turn.
-    paneRefreshTail = paneRefreshTail
-      .catch(function () {})
-      .then(function () {
-        if (state.generation !== generation) return;
-        return refreshOdPane(tabId, fnName, state, generation);
-      })
-      .catch(function (err) {
-        console.error('OD background refresh failed for ' + tabId + ':', err);
-      })
-      .then(function () {
-        state.refreshing = false;
-      });
-  }
-
-  function refreshOdPane(tabId, fnName, state, generation) {
-    var oldPane = document.getElementById(tabId);
-    if (!oldPane || typeof window[fnName] !== 'function') return Promise.resolve();
-
-    var snapshotId = tabId + '--stale-' + String(generation);
-    var freshPane = oldPane.cloneNode(false);
-    var originalDisplay = freshPane.style.display;
-    oldPane.id = snapshotId;
-    oldPane.dataset.slmStaleFor = tabId;
-    freshPane.id = tabId;
-    freshPane.style.display = 'none';
-    freshPane.dataset.slmOdRenderer = fnName;
-    oldPane.parentNode.insertBefore(freshPane, oldPane);
-
-    return new Promise(function (resolve) {
-      var originalFetch = window.fetch;
-      var pending = 0;
-      var idleTimer = null;
-      var maxTimer = null;
-      var finished = false;
-      var observer = typeof MutationObserver === 'function'
-        ? new MutationObserver(scheduleIdle)
-        : null;
-
-      function restoreFetch() {
-        if (window.fetch === trackedFetch) window.fetch = originalFetch;
-      }
-
-      function restoreSnapshot() {
-        if (freshPane.parentNode) freshPane.parentNode.removeChild(freshPane);
-        oldPane.id = tabId;
-        delete oldPane.dataset.slmStaleFor;
-        // An explicit mutation/profile invalidation wins over an in-flight
-        // refresh. Preserve the visual snapshot, but leave it unmounted so the
-        // next visit cannot accidentally re-age invalid data as a cache hit.
-        if (state.generation !== generation) {
-          delete oldPane.dataset.slmOdRenderer;
-        }
-      }
-
-      function finish(commit) {
-        if (finished) return;
-        finished = true;
-        if (idleTimer) clearTimeout(idleTimer);
-        if (maxTimer) clearTimeout(maxTimer);
-        if (observer) observer.disconnect();
-        restoreFetch();
-
-        if (commit && state.generation === generation) {
-          if (oldPane.parentNode) oldPane.parentNode.removeChild(oldPane);
-          freshPane.style.display = originalDisplay;
-          freshPane.dataset.slmOdRenderer = fnName;
-          state.mounted = true;
-          state.loadedAt = Date.now();
-        } else {
-          restoreSnapshot();
-        }
-        resolve();
-      }
-
-      function scheduleIdle() {
-        if (finished || pending > 0) return;
-        if (idleTimer) clearTimeout(idleTimer);
-        idleTimer = setTimeout(function () { finish(true); }, PANE_REFRESH_QUIET_MS);
-      }
-
-      function trackPromise(promise) {
-        pending += 1;
-        if (idleTimer) {
-          clearTimeout(idleTimer);
-          idleTimer = null;
-        }
-        Promise.resolve(promise).then(settled, settled);
-        return promise;
-      }
-
-      function settled() {
-        pending = Math.max(0, pending - 1);
-        scheduleIdle();
-      }
-
-      function patchResponse(response) {
-        ['json', 'text', 'blob', 'arrayBuffer', 'formData'].forEach(function (name) {
-          if (!response || typeof response[name] !== 'function') return;
-          var bodyReader = response[name].bind(response);
-          try {
-            response[name] = function () {
-              return trackPromise(bodyReader());
-            };
-          } catch (e) {}
-        });
-        return response;
-      }
-
-      function trackedFetch() {
-        var result;
-        try {
-          result = originalFetch.apply(window, arguments);
-        } catch (err) {
-          scheduleIdle();
-          throw err;
-        }
-        var patched = Promise.resolve(result).then(patchResponse);
-        trackPromise(patched);
-        return patched;
-      }
-
-      if (observer) {
-        observer.observe(freshPane, { childList: true, subtree: true, characterData: true });
-      }
-      if (typeof originalFetch === 'function') window.fetch = trackedFetch;
-      maxTimer = setTimeout(function () { finish(false); }, PANE_REFRESH_MAX_MS);
-
-      try {
-        window[fnName](freshPane);
-        scheduleIdle();
-      } catch (err) {
-        finish(false);
-        throw err;
-      }
-    });
-  }
-
-  function triggerTabLoad(tabId) {
-    var pane = document.getElementById(tabId);
-    // Open Design takeover: if the pane's OD render module is loaded, it OWNS
-    // the pane — clear the legacy markup and let the OD module render the
-    // approved design wired to live data. Fall back to the legacy loader(s)
-    // only when the OD module for that pane isn't present yet.
-    function od(fnName) {
-      if (pane && typeof window[fnName] === 'function') {
-        if (pane.dataset.slmOdRenderer === fnName && pane.children.length > 0) {
-          var cached = getPaneLoadState(tabId);
-          if (!cached.mounted) {
-            cached.mounted = true;
-            cached.loadedAt = Date.now();
-          } else if (Date.now() - cached.loadedAt >= PANE_CACHE_TTL_MS) {
-            queueOdPaneRefresh(tabId, fnName);
-          }
-          return true;
-        }
-        try {
-          pane.innerHTML = '';
-          window[fnName](pane);
-          pane.dataset.slmOdRenderer = fnName;
-          var mounted = getPaneLoadState(tabId);
-          mounted.mounted = true;
-          mounted.loadedAt = Date.now();
-          return true;
-        }
-        catch (e) { console.error('OD render failed for ' + tabId + ':', e); }
-      }
-      return false;
-    }
-    switch (tabId) {
-      case 'brain-pane':
-        if (od('odRenderBrain')) return true;
-        if (typeof loadBrain === 'function') loadBrain();
-        return true;
-      case 'graph-pane':
-        if (od('odRenderGraph')) return true;
-        if (typeof loadGraph === 'function') loadGraph();
-        if (typeof initMemoryChat === 'function' && !document.getElementById('chat-panel')) {
-          initMemoryChat();
-        }
-        if (typeof loadClusters === 'function') loadClusters();
-        return true;
-      case 'entities-pane':
-        if (od('odRenderEntities')) return true;
-        if (typeof loadEntityExplorer === 'function') loadEntityExplorer();
-        return true;
-      case 'memories-pane':
-        if (od('odRenderMemories')) return true;
-        if (typeof loadMemories === 'function') loadMemories();
-        if (typeof loadTimeline === 'function') loadTimeline();
-        return true;
-      case 'health-pane':
-        if (od('odRenderHealth')) return true;
-        if (typeof loadHealthMonitor === 'function') loadHealthMonitor();
-        if (typeof initEventStream === 'function') initEventStream();
-        if (typeof loadEventStats === 'function') loadEventStats();
-        if (typeof loadAgents === 'function') loadAgents();
-        if (typeof loadIDEStatus === 'function') loadIDEStatus();
-        if (typeof loadMathHealth === 'function') loadMathHealth();
-        return true;
-      case 'operations-pane':
-        if (od('odRenderOperations')) return true;
-        if (typeof loadIngestionStatus === 'function') loadIngestionStatus();
-        if (typeof loadLifecycle === 'function') loadLifecycle();
-        if (typeof loadTrustDashboard === 'function') loadTrustDashboard();
-        if (typeof loadCompliance === 'function') loadCompliance();
-        return true;
-      case 'skills-pane':
-        if (od('odRenderSkills')) return true;
-        if (typeof loadSkillEvolution === 'function') loadSkillEvolution();
-        return true;
-      case 'mesh-pane':
-        if (od('odRenderMesh')) return true;
-        if (typeof loadMeshPeers === 'function') loadMeshPeers();
-        return true;
-      case 'loops-pane':
-        od('odRenderLoops');
-        return true;
-      case 'settings-pane':
-        if (od('odRenderSettings')) return true;
-        if (typeof loadSettings === 'function') loadSettings();
-        if (typeof loadModeSettings === 'function') loadModeSettings();
-        if (typeof loadAutoSettings === 'function') loadAutoSettings();
-        if (typeof updateModeUI === 'function') updateModeUI();
-        return true;
-      case 'optimize-pane':
-        if (od('odRenderOptimize')) return true;
-        if (typeof initOptimizeTab === 'function') initOptimizeTab();
-        return true;
-      case 'agents-pane':
-        od('odRenderAgents');
-        return true;
-      case 'mcp-pane':
-        od('odRenderMcp');
-        return true;
-      case 'backup-pane':
-        od('odRenderBackup');
-        return true;
-    }
-    return false;
-  }
-
-  // Mutating actions and profile switches can invalidate cached panes without
-  // tearing down unrelated navigation state. The next visit remounts only the
-  // affected pane; no persistent browser storage is used.
-  window.slmInvalidatePanes = function (paneIds) {
-    var ids = Array.isArray(paneIds) ? paneIds : Object.keys(NAV_MAP);
-    ids.forEach(function (id) {
-      var pane = document.getElementById(id);
-      if (pane) delete pane.dataset.slmOdRenderer;
-      var state = getPaneLoadState(id);
-      state.generation += 1;
-      state.mounted = false;
-      state.loadedAt = 0;
-    });
-  };
-
-  /* ================================================================
-     Hash routing: handles both pane IDs and section anchors within panes
-  ================================================================ */
-  function handleHash() {
-    var hash = window.location.hash.replace('#', '');
-    if (!hash) return;
-    var el = document.getElementById(hash);
-    if (!el) return;
-
-    // Direct pane navigation
-    if (el.classList && el.classList.contains('tab-pane')) {
-      activateTab(hash);
-      return;
-    }
-
-    // Section within a pane (e.g. #health-section-events)
-    var parentPane = el.closest && el.closest('.tab-pane');
-    if (parentPane && parentPane.id) activateTab(parentPane.id);
-    try { el.scrollIntoView({ behavior: 'smooth', block: 'start' }); } catch (e) {}
-  }
-
-  /* ================================================================
-     Shell mount: called at DOMContentLoaded
-  ================================================================ */
-  window.slmShell = function (opts) {
-    opts = opts || {};
-    var active = opts.active || 'dashboard-pane';
-
-    // 1. Fill sidebar
-    var sb = document.getElementById('sidebar');
-    if (sb) sb.innerHTML = buildSidebarHTML(active);
-
-    // 2. Wire sidebar nav-link clicks and keyboard
-    document.querySelectorAll('.nav-link[data-tab]').forEach(function (link) {
-      link.addEventListener('click', function (e) {
-        e.preventDefault();
-        activateTab(this.getAttribute('data-tab'));
-      });
-      link.addEventListener('keydown', function (e) {
-        if (e.key === 'Enter' || e.key === ' ') {
-          e.preventDefault();
-          activateTab(this.getAttribute('data-tab'));
-        }
-      });
-    });
-
-    // 3. Mobile sidebar: hamburger button + scrim
-    var menuBtn  = document.getElementById('menuBtn');
-    var scrim    = document.getElementById('scrim');
-    var sidebarEl = document.getElementById('sidebar');
-    if (menuBtn && sidebarEl && scrim) {
-      menuBtn.addEventListener('click', function () {
-        sidebarEl.classList.toggle('open');
-        scrim.classList.toggle('on');
-      });
-      scrim.addEventListener('click', function () {
-        sidebarEl.classList.remove('open');
-        scrim.classList.remove('on');
-      });
-    }
-
-    // 4. Apply current theme (fills icons, syncs classes)
-    var t = 'dark';
-    try { t = localStorage.getItem(THEME_KEY) || 'dark'; } catch (e) {}
-    applyTheme(t);
-
-    // 5. Wire theme toggle buttons via addEventListener (NOT onclick — CSP safe)
-    document.querySelectorAll('[data-theme-icon]').forEach(function (btn) {
-      // Prevent double-binding if slmShell() is somehow called twice
-      if (btn.dataset.odThemeWired) return;
-      btn.dataset.odThemeWired = '1';
-      btn.addEventListener('click', function () { window.toggleDarkMode(); });
-    });
-
-    // 6. Fill data-ic SVG placeholders (icons in pane content, topbar, etc.)
-    document.querySelectorAll('[data-ic]').forEach(function (el) {
-      el.innerHTML = svg(el.getAttribute('data-ic'), el.getAttribute('data-ic-cls') || '');
-    });
-
-    // 7. Inject "Star us on GitHub" CTA into topbar (before the theme button)
-    var topbar = document.querySelector('.topbar');
-    if (topbar && !topbar.querySelector('.star-cta')) {
-      var themeBtn = topbar.querySelector('[data-theme-icon]');
-      var starLink = document.createElement('a');
-      starLink.className   = 'star-cta';
-      starLink.href        = LINKS.repo;
-      starLink.target      = '_blank';
-      starLink.rel         = 'noopener';
-      starLink.title       = 'Star SuperLocalMemory on GitHub';
-      starLink.innerHTML   =
-        svg('github', 'gh') +
-        "<span class='lbl'>Star us on GitHub</span>";
-      if (themeBtn) topbar.insertBefore(starLink, themeBtn);
-      else topbar.appendChild(starLink);
-    }
-
-    // 8. Inject shared footer into .content (OD site-foot style)
-    var content = document.getElementById('main-content');
-    if (content && !content.querySelector('.site-foot')) {
-      content.insertAdjacentHTML('beforeend',
-        '<footer class="site-foot">' +
-          '<div class="foot-brand">' +
-            '<span class="foot-logo">' +
-              '<img src="static/assets/slm-icon.svg" alt="" width="22" height="22">' +
-            '</span>' +
-            '<div><b>SuperLocalMemory</b><span>by Qualixar · local-first AI memory</span></div>' +
-          '</div>' +
-          '<nav class="foot-links">' +
-            '<a href="' + LINKS.author  + '" target="_blank" rel="noopener">Built by Varun Pratap Bhardwaj</a>' +
-            '<a href="' + LINKS.qualixar + '" target="_blank" rel="noopener">qualixar.com</a>' +
-            '<a href="' + LINKS.repo    + '" target="_blank" rel="noopener">' + svg('github') + 'GitHub</a>' +
-            '<a href="' + LINKS.npm     + '" target="_blank" rel="noopener">' + svg('pkg')    + 'npm</a>' +
-            '<a href="' + LINKS.pip     + '" target="_blank" rel="noopener">' + svg('pkg')    + 'pip</a>' +
-            '<a href="' + LINKS.license + '" target="_blank" rel="noopener">License · AGPL-3.0</a>' +
-          '</nav>' +
-        '</footer>');
-    }
-
-    // 9. Move profile selector from ng-premount into sidebar footer
-    var profileContainer = document.getElementById('od-profile-container');
-    var profileSelect    = document.getElementById('profile-select');
-    var addProfileBtn    = document.getElementById('add-profile-btn');
-    if (profileContainer && profileSelect && profileSelect.parentNode !== profileContainer) {
-      profileSelect.style.cssText = 'flex:1;font-size:0.8125rem;max-width:150px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:6px;color:var(--on-sidebar);padding:3px 6px;';
-      profileContainer.appendChild(profileSelect);
-      profileSelect.style.display = '';
-      if (addProfileBtn) {
-        addProfileBtn.className  = '';
-        addProfileBtn.style.cssText = 'padding:4px 8px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:6px;color:var(--on-sidebar);cursor:pointer;';
-        profileContainer.appendChild(addProfileBtn);
-        addProfileBtn.style.display = '';
-      }
-    }
-
-    // 10. Fetch daemon version and update sidebar foot
-    fetch('/health', { credentials: 'same-origin' })
-      .then(function (r) { return r.ok ? r.json() : null; })
-      .then(function (data) {
-        var verEl = document.getElementById('od-version');
-        if (verEl && data && data.version) verEl.textContent = 'v' + data.version;
-      })
-      .catch(function () {
-        var dashVer = document.getElementById('dashboard-version');
-        var verEl   = document.getElementById('od-version');
-        if (verEl && dashVer && dashVer.textContent && dashVer.textContent !== '...') {
-          verEl.textContent = 'v' + dashVer.textContent;
-        }
-      });
-
-    // 11. Privacy blur (screen recording mode)
-    window.togglePrivacyBlur = function () {
-      document.body.classList.toggle('ng-privacy-blur');
-      var icon = document.getElementById('ng-privacy-icon');
-      var isBlurred = document.body.classList.contains('ng-privacy-blur');
-      if (icon) icon.className = isBlurred ? 'bi bi-eye' : 'bi bi-eye-slash';
-    };
-    if (window.location.search.indexOf('blur=1') >= 0) {
-      document.body.classList.add('ng-privacy-blur');
-    }
-
-    // 12. Activate the initial pane (fires triggerTabLoad for dashboard etc.)
-    activateTab(active);
-  };
-
-  /* ================================================================
-     Chart helpers — ported from OD assets/shell.js
-  ================================================================ */
-
-  // Sparkline: array of numbers → inline SVG string
-  window.slmSpark = function (data, opts) {
-    opts = opts || {};
-    var w = opts.w || 200, h = opts.h || 60, pad = 3;
-    var min = Math.min.apply(null, data);
-    var max = Math.max.apply(null, data);
-    var rng = (max - min) || 1;
-    var stepX = (w - pad * 2) / (data.length - 1);
-    var pts = data.map(function (v, i) {
-      return [
-        pad + i * stepX,
-        h - pad - ((v - min) / rng) * (h - pad * 2),
-      ];
-    });
-    var line = pts.map(function (p, i) {
-      return (i ? 'L' : 'M') + p[0].toFixed(1) + ' ' + p[1].toFixed(1);
-    }).join(' ');
-    var area =
-      line +
-      ' L' + pts[pts.length - 1][0].toFixed(1) + ' ' + h +
-      ' L' + pts[0][0].toFixed(1) + ' ' + h + ' Z';
-    var id     = 'g' + Math.random().toString(36).slice(2, 7);
-    var stroke = opts.color || 'var(--violet)';
-    return (
-      '<svg class="spark-lg" viewBox="0 0 ' + w + ' ' + h + '" preserveAspectRatio="none">' +
-        '<defs><linearGradient id="' + id + '" x1="0" y1="0" x2="0" y2="1">' +
-          '<stop offset="0" stop-color="' + stroke + '" stop-opacity="0.28"/>' +
-          '<stop offset="1" stop-color="' + stroke + '" stop-opacity="0"/>' +
-        '</linearGradient></defs>' +
-        '<path d="' + area + '" fill="url(#' + id + ')"/>' +
-        '<path d="' + line + '" fill="none" stroke="' + stroke + '" stroke-width="2" vector-effect="non-scaling-stroke"/>' +
-      '</svg>'
-    );
-  };
-
-  // GitHub-style contribution heatmap
-  window.slmHeatmap = function (el, weeks) {
-    weeks = weeks || 26;
-    var html = '';
-    for (var w = 0; w < weeks; w++) {
-      for (var d = 0; d < 7; d++) {
-        var recency = w / weeks;
-        var base = Math.random() * 0.5 + recency * 0.6;
-        var l = base < 0.35 ? 0 : base < 0.55 ? 1 : base < 0.72 ? 2 : base < 0.88 ? 3 : 4;
-        html += '<i data-l="' + l + '" title="reward signal"></i>';
-      }
-    }
-    el.innerHTML = html;
-  };
-
-  // Bar chart helper
-  window.slmBars = function (el, data) {
-    var maxVal = Math.max.apply(null, data) || 1;
-    el.innerHTML = data.map(function (v) {
-      return '<i style="height:' + Math.max(4, (v / maxVal) * 100) + '%" title="' + v + '"></i>';
-    }).join('');
-  };
-
-  /* ================================================================
-     DOMContentLoaded bootstrap
-  ================================================================ */
-  document.addEventListener('DOMContentLoaded', function () {
-    // Determine initial active pane from URL hash (if valid tab pane)
-    var active = 'dashboard-pane';
-    var hash = window.location.hash.replace('#', '');
-    if (hash) {
-      var el = document.getElementById(hash);
-      if (el && el.classList && el.classList.contains('tab-pane')) {
-        active = hash;
-      } else {
-        // Stale section anchor from a previous session — strip it so
-        // we always land on Dashboard, not a blank screen.
-        try { history.replaceState(null, '', window.location.pathname); } catch (e) {}
-      }
-    }
-
-    window.slmShell({ active: active });
-
-    // Wire subsequent hash changes (user-triggered navigation, not initial load)
-    window.addEventListener('hashchange', handleHash);
-  });
-
-}());