superlocalmemory 4.1.13 → 4.1.14

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

@@ -1,588 +0,0 @@
-// SuperLocalMemory — od-agents.js  v1.0
-// OD-styled Multi-Agent Memory pane. Self-contained, CSP-safe.
-// Renders into the "agents-pane" tab container via the shell's triggerTabLoad.
-// Exposes window.odRenderAgents(container).
-//
-// Endpoint:
-//   GET /api/agents/memory-activity?limit=20 →
-//   { ok, profile_id, total_memories, agent_count,
-//     agents: [{agent_id, count, last_active, source_types:[..]}],  // desc by count
-//     recent: [{agent_id, content, created_at, source_type, session_id}] }
-//
-// CRIT fixes baked in:
-//   C1 — all agent_id / content / source_type values through escapeHtml() before innerHTML
-//   C2 — empty state for zero agents / zero memories (adapter guide shown)
-//   C3 — fetch failure shows error card with Retry; never throws, never silent
-//   C4 — a 404 (route absent) reads as "not connected / restart the daemon",
-//        never a raw "HTTP 404"; the no-agents case is a friendly empty state
-//
-// Copyright (c) 2026 Varun Pratap Bhardwaj / Qualixar — AGPL-3.0
-
-(function () {
-  'use strict';
-
-  var API_URL    = '/api/agents/memory-activity?limit=20';
-  var REFRESH_MS = 15000;
-
-  // ── Module state ──────────────────────────────────────────────────────────
-  var _container = null;
-  var _timer     = null;
-  var _observer  = null;
-  var _allRecent = [];   // full recent list — client-side filter only
-
-  // ── Helpers ───────────────────────────────────────────────────────────────
-  // CRIT C1: every API-derived string must pass through this before innerHTML.
-  // Same implementation as od-optimize.js and od-mesh.js.
-  function escapeHtml(s) {
-    return String(s == null ? '' : s)
-      .replace(/&/g, '&')
-      .replace(/</g, '&lt;')
-      .replace(/>/g, '&gt;')
-      .replace(/"/g, '&quot;')
-      .replace(/'/g, '&#39;');
-  }
-
-  function timeAgo(iso) {
-    if (!iso) return 'never';
-    var d = (Date.now() - new Date(iso).getTime()) / 1000;
-    if (d < 5)     return 'just now';
-    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';
-  }
-
-  // An agent is "active" only if it wrote memory recently. This page's data is
-  // last-write time, not a live connection, so most agents are historical.
-  var ACTIVE_WINDOW_MS = 10 * 60 * 1000;  // 10 minutes
-  function isRecent(iso) {
-    if (!iso) return false;
-    var t = new Date(iso).getTime();
-    return !isNaN(t) && (Date.now() - t) < ACTIVE_WINDOW_MS;
-  }
-
-  function fmtDate(iso) {
-    if (!iso) return '—';
-    try {
-      var d = new Date(iso);
-      return d.toLocaleDateString() + ' ' + d.toTimeString().slice(0, 5);
-    } catch (e) { return String(iso); }
-  }
-
-  // Render source_type chips (array of strings)
-  function fmtChips(types) {
-    if (!Array.isArray(types) || types.length === 0) {
-      return '<span style="color:var(--fg-3)">—</span>';
-    }
-    return types.map(function (t) {
-      return (
-        '<span style="display:inline-block;padding:1px 7px;border-radius:99px;' +
-        'font-size:11px;background:var(--card-2);color:var(--fg-2);margin-right:4px">' +
-        escapeHtml(t) + '</span>'
-      );
-    }).join('');
-  }
-
-  // Deterministic avatar color from agent_id string
-  function avatarColor(id) {
-    var palette = ['var(--violet)', 'var(--cyan)', 'var(--ok)', 'var(--warn)'];
-    var s = String(id || '?');
-    var h = 0;
-    for (var i = 0; i < s.length; i++) {
-      h = (h * 31 + s.charCodeAt(i)) & 0x7fffffff;
-    }
-    return palette[h % palette.length];
-  }
-
-  // ── Build layout HTML ─────────────────────────────────────────────────────
-  function buildHTML() {
-    return (
-      '<div id="od-agents-root">' +
-
-        // Page head
-        '<div class="page-head">' +
-          '<h2>Multi-Agent Memory</h2>' +
-          '<p>Memory written by agents across CrewAI, LangChain, LangGraph, ' +
-            'Semantic Kernel, and other agentic frameworks. Each agent stamps ' +
-            '<code>SLM_AGENT_ID</code> on every write &mdash; this page visualises ' +
-            'that activity across all agents sharing this SLM instance.</p>' +
-        '</div>' +
-
-        // Error band — CRIT C3
-        '<div id="od-agents-err"' +
-          ' style="display:none;background:var(--warn-soft);border:1px solid var(--warn);' +
-                  'border-radius:var(--r-md);padding:12px 16px;margin-bottom:16px;' +
-                  'align-items:center;justify-content:space-between;gap:12px">' +
-          '<span style="color:var(--warn);font-size:13.5px" id="od-agents-err-msg">' +
-            'Could not load agent memory data' +
-          '</span>' +
-          '<button id="od-agents-retry"' +
-            ' style="padding:5px 12px;font-size:12.5px;border-radius:var(--r-md);' +
-                    'border:1px solid var(--warn);background:transparent;' +
-                    'color:var(--warn);cursor:pointer;font-weight:600">' +
-            'Retry' +
-          '</button>' +
-        '</div>' +
-
-        // KPI strip
-        '<section class="kpi-strip" style="margin-bottom:16px">' +
-          '<div class="card kpi">' +
-            '<div class="label"><span data-ic="memories"></span> Total memories</div>' +
-            '<div class="value num" id="od-agents-kpi-total">—</div>' +
-            '<div class="delta" id="od-agents-kpi-profile">&nbsp;</div>' +
-          '</div>' +
-          '<div class="card kpi">' +
-            '<div class="label"><span data-ic="mesh"></span> Contributing agents</div>' +
-            '<div class="value num" id="od-agents-kpi-count">—</div>' +
-            '<div class="delta" id="od-agents-kpi-active">&nbsp;</div>' +
-          '</div>' +
-        '</section>' +
-
-        // Per-agent cards
-        '<div class="card" style="margin-bottom:16px">' +
-          '<div class="card-head">' +
-            '<h3>Agent activity</h3>' +
-            '<span class="sub">memories written per agent, ranked by volume</span>' +
-          '</div>' +
-          '<div class="launch-grid" id="od-agents-grid"' +
-            ' style="grid-template-columns:repeat(auto-fill,minmax(220px,1fr));' +
-                    'padding:16px 20px;gap:14px">' +
-            '<div style="grid-column:1/-1;text-align:center;padding:40px;color:var(--fg-2);' +
-              'font-size:14px">Loading agent data…</div>' +
-          '</div>' +
-        '</div>' +
-
-        // Recent memories table with client-side agent filter
-        '<div class="card">' +
-          '<div class="card-head">' +
-            '<h3>Recent memories</h3>' +
-            '<span class="sub">newest first</span>' +
-            '<div class="spacer"></div>' +
-            /* max-width + min-width:0 are load-bearing, not cosmetic.
-               A <select> sizes itself to its LONGEST OPTION, and the options
-               here are agent ids — which for daemon capabilities look like
-               "daemon-capability:811f335e55fac7f456aadd68938b862a...", 75+
-               characters. Measured on a real store: the control rendered
-               1,178px wide inside a 714px pane, dragging the pane's
-               scrollWidth to 1,336px. That is what broke this section's
-               layout and pushed the table off the right edge.
-               min-width:0 is required because this sits in a flex row, where
-               the default min-width:auto refuses to shrink below the
-               content's intrinsic size and defeats max-width. */
-            '<select id="od-agents-filter"' +
-              ' style="font-size:12.5px;padding:3px 8px;border-radius:var(--r-sm);' +
-                      'background:var(--card-2);border:1px solid var(--border);' +
-                      'color:var(--fg-1);max-width:220px;min-width:0;' +
-                      'text-overflow:ellipsis">' +
-              '<option value="">All agents</option>' +
-            '</select>' +
-          '</div>' +
-          '<div class="card-pad" style="overflow-x:auto">' +
-            '<div id="od-agents-table">' +
-              '<div style="text-align:center;padding:32px;color:var(--fg-3);font-size:13px">' +
-                'Loading recent memories…' +
-              '</div>' +
-            '</div>' +
-          '</div>' +
-        '</div>' +
-
-      '</div>' // od-agents-root
-    );
-  }
-
-  // ── Render: KPI strip ─────────────────────────────────────────────────────
-  function renderKpi(data) {
-    var totEl  = document.getElementById('od-agents-kpi-total');
-    var cntEl  = document.getElementById('od-agents-kpi-count');
-    var profEl = document.getElementById('od-agents-kpi-profile');
-    if (totEl)  totEl.textContent  = Number(data.total_memories || 0).toLocaleString();
-    if (cntEl)  cntEl.textContent  = Number(data.agent_count   || 0).toLocaleString();
-    if (profEl) profEl.textContent = 'profile: ' + escapeHtml(data.profile_id || 'default');
-    var actEl = document.getElementById('od-agents-kpi-active');
-    if (actEl) {
-      var agents = Array.isArray(data.agents) ? data.agents : [];
-      var live = agents.filter(function (a) { return isRecent(a.last_active); }).length;
-      actEl.textContent = live + (live === 1 ? ' active in last 10m' : ' active in last 10m');
-    }
-  }
-
-  // ── Render: per-agent cards ───────────────────────────────────────────────
-  function renderAgentCards(agents) {
-    var grid = document.getElementById('od-agents-grid');
-    if (!grid) return;
-
-    // CRIT C2: empty state when no agent has written memory yet
-    if (!agents || agents.length === 0) {
-      grid.innerHTML =
-        '<div class="card launch-card"' +
-          ' style="grid-column:1/-1;display:flex;flex-direction:column;' +
-                  'align-items:center;justify-content:center;' +
-                  'padding:48px 24px;text-align:center;cursor:default">' +
-          '<div style="width:44px;height:44px;border-radius:12px;' +
-            'background:var(--card-2);display:flex;align-items:center;' +
-            'justify-content:center;margin-bottom:16px;color:var(--fg-3)">' +
-            (typeof window.slmIcon === 'function' ? window.slmIcon('mesh') : '') +
-          '</div>' +
-          '<h3 style="font-size:15px;margin-bottom:6px">No multi-agent memory yet</h3>' +
-          '<p style="font-size:12.5px;color:var(--fg-2);max-width:44ch;line-height:1.55">' +
-            'Connect agents via the CrewAI, LangChain, LangGraph, Semantic Kernel, ' +
-            'or Agent Framework adapters. Each stamps <code>SLM_AGENT_ID</code> on ' +
-            'every write so their activity appears here.' +
-          '</p>' +
-        '</div>';
-      return;
-    }
-
-    var html = '';
-    agents.forEach(function (a) {
-      var rawId  = String(a.agent_id || 'unknown');
-      var id     = escapeHtml(rawId);
-      var count  = Number(a.count || 0);
-      var letter = escapeHtml(rawId.charAt(0).toUpperCase());  // SEC: escape before innerHTML
-      var bg     = avatarColor(rawId);
-      var ago    = escapeHtml(timeAgo(a.last_active));
-      var live   = isRecent(a.last_active);
-      var dot    = '<span style="display:inline-block;width:7px;height:7px;border-radius:50%;' +
-                   'margin-right:5px;vertical-align:middle;background:' +
-                   (live ? 'var(--ok)' : 'var(--fg-3)') + '"></span>';
-
-      // Clickable: card drills into this agent's memories (sets the filter).
-      html +=
-        '<div class="card launch-card slm-agent-card" data-agent="' + id + '" ' +
-          'style="cursor:pointer" title="View ' + id + '’s recent memories">' +
-          '<div style="display:flex;align-items:center;gap:11px;margin-bottom:12px">' +
-            '<span class="avatar" style="background:' + bg + '">' + letter + '</span>' +
-            '<div style="flex:1;min-width:0">' +
-              '<h3 style="font-size:15px;white-space:nowrap;overflow:hidden;' +
-                'text-overflow:ellipsis" title="' + id + '">' + id + '</h3>' +
-              '<span class="mono dim" style="font-size:11px">' + dot +
-                (live ? 'active ' : 'wrote ') + ago + '</span>' +
-            '</div>' +
-            '<span class="badge ok">' + count.toLocaleString() + '</span>' +
-          '</div>' +
-          '<div style="font-size:12px;color:var(--fg-2);margin-bottom:6px">' +
-            '<span class="dim">source types</span>' +
-          '</div>' +
-          '<div>' + fmtChips(a.source_types) + '</div>' +
-          '<div style="margin-top:10px;font-size:11.5px;color:var(--violet)">View memories →</div>' +
-        '</div>';
-    });
-    grid.innerHTML = html;
-  }
-
-  // ── Populate agent filter dropdown ────────────────────────────────────────
-  /* Turn an agent id into something a person can read in a dropdown.
-     Ids arrive in three shapes on a real store:
-        "claude", "codex"                       -> already readable
-        "daemon-capability:<64 hex>"            -> kind + short fingerprint
-        "cli-offline-canonical:local-capability:cli:uid:501:<64 hex>:d63110"
-     Showing the raw string is what made the control 1,178px wide, and a
-     64-character hash tells the reader nothing anyway. Keep the leading,
-     meaningful segments and a short fingerprint so two capabilities of the
-     same kind remain distinguishable. The full id stays on opt.value (used
-     for filtering) and on opt.title (hover). */
-  function shortAgentLabel(id) {
-    if (!id) return 'unknown';
-    if (id.length <= 28) return id;
-    var parts = id.split(':');
-    var head = parts[0] || id;
-    /* find the first long hex-looking segment and reduce it to 6 chars */
-    for (var i = 1; i < parts.length; i++) {
-      if (/^[0-9a-f]{16,}$/i.test(parts[i])) {
-        return head + ':' + parts[i].slice(0, 6) + '…';
-      }
-    }
-    return head.length <= 28 ? head + ':…' : head.slice(0, 27) + '…';
-  }
-
-  function populateFilter(agents) {
-    var sel = document.getElementById('od-agents-filter');
-    if (!sel) return;
-    // Drop all options except the first "All agents" placeholder
-    while (sel.options.length > 1) sel.remove(1);
-    if (!agents) return;
-    agents.forEach(function (a) {
-      var opt = document.createElement('option');
-      var id  = String(a.agent_id || '');
-      opt.value       = id;                       /* filtering needs the FULL id */
-      opt.textContent = shortAgentLabel(id);      /* the human reads a short one */
-      opt.title       = id || 'unknown';          /* full id still available on hover */
-      sel.appendChild(opt);
-    });
-  }
-
-  // ── Render: recent memories table ────────────────────────────────────────
-  function renderRecentTable(records) {
-    var wrap = document.getElementById('od-agents-table');
-    if (!wrap) return;
-
-    if (!records || records.length === 0) {
-      wrap.innerHTML =
-        '<div style="text-align:center;padding:32px;color:var(--fg-3);font-size:13px">' +
-          'No memories match the current filter.' +
-        '</div>';
-      return;
-    }
-
-    var rows = records.map(function (r) {
-      // CRIT C1: all three user-derived fields escaped
-      var rawId      = String(r.agent_id    || '—');
-      var rawContent = String(r.content     || '—');
-      var rawSrc     = String(r.source_type || '—');
-      var rawSess    = String(r.session_id  || '—');
-
-      // Same treatment the content and session columns already get. The agent
-      // id is the one field that was rendered in full, and with nowrap that
-      // made the Agent column 632px wide for a 75-character
-      // "daemon-capability:<64 hex>" — squeezing every other column off the
-      // right edge. Full id stays in the title attribute.
-      var agId    = escapeHtml(shortAgentLabel(rawId));
-      var agIdFull = escapeHtml(rawId);
-      var srcType = escapeHtml(rawSrc);
-      var dt      = escapeHtml(fmtDate(r.created_at));
-
-      // Truncate content for display; keep full version in title attribute
-      var dispContent = rawContent.length > 120 ? rawContent.slice(0, 120) + '…' : rawContent;
-      var content     = escapeHtml(dispContent);
-      var contentFull = escapeHtml(rawContent);
-
-      var dispSess    = rawSess.length > 12 ? rawSess.slice(0, 12) + '…' : rawSess;
-      var sess        = escapeHtml(dispSess);
-      var sessFull    = escapeHtml(rawSess);
-
-      var avatarBg = avatarColor(rawId);
-      var letter   = escapeHtml(rawId.charAt(0).toUpperCase());  // SEC: escape before innerHTML
-
-      return (
-        '<tr>' +
-          '<td style="white-space:nowrap;padding:7px 12px 7px 0">' +
-            '<span style="display:inline-flex;align-items:center;gap:6px">' +
-              '<span class="avatar"' +
-                ' style="width:22px;height:22px;font-size:10px;background:' + avatarBg + '">' +
-                letter +
-              '</span>' +
-              '<span class="mono" style="font-size:12px" title="' + agIdFull + '">' + agId + '</span>' +
-            '</span>' +
-          '</td>' +
-          '<td style="max-width:340px;font-size:13px;padding:7px 12px 7px 0"' +
-            ' title="' + contentFull + '">' + content + '</td>' +
-          '<td style="white-space:nowrap;padding:7px 12px 7px 0">' +
-            '<span style="padding:1px 7px;border-radius:99px;font-size:11px;' +
-              'background:var(--card-2);color:var(--fg-2)">' + srcType + '</span>' +
-          '</td>' +
-          '<td class="mono dim" style="font-size:11px;white-space:nowrap;padding:7px 12px 7px 0">' +
-            dt +
-          '</td>' +
-          '<td class="mono dim" style="font-size:11px;white-space:nowrap;padding:7px 0"' +
-            ' title="' + sessFull + '">' + sess + '</td>' +
-        '</tr>'
-      );
-    }).join('');
-
-    wrap.innerHTML =
-      '<table style="width:100%;border-collapse:collapse;font-size:13px">' +
-        '<thead>' +
-          '<tr style="border-bottom:1px solid var(--border)">' +
-            '<th style="text-align:left;padding:4px 12px 8px 0;font-weight:600;' +
-              'font-size:12px;color:var(--fg-2)">Agent</th>' +
-            '<th style="text-align:left;padding:4px 12px 8px 0;font-weight:600;' +
-              'font-size:12px;color:var(--fg-2)">Memory</th>' +
-            '<th style="text-align:left;padding:4px 12px 8px 0;font-weight:600;' +
-              'font-size:12px;color:var(--fg-2)">Source</th>' +
-            '<th style="text-align:left;padding:4px 12px 8px 0;font-weight:600;' +
-              'font-size:12px;color:var(--fg-2)">Written</th>' +
-            '<th style="text-align:left;padding:4px 0 8px 0;font-weight:600;' +
-              'font-size:12px;color:var(--fg-2)">Session</th>' +
-          '</tr>' +
-        '</thead>' +
-        '<tbody>' + rows + '</tbody>' +
-      '</table>';
-  }
-
-  // ── Error/retry UI ─────────────────────────────────────────────────────────
-  // C4: turn a fetch failure into an actionable sentence. A 404 means the
-  // multi-agent route isn't on the running daemon (typically a daemon that
-  // predates this build) — say "not connected", point at `slm restart`, and
-  // never surface a bare status code.
-  function errorMessage(err) {
-    var status = err && err.httpStatus;
-    if (status === 404) {
-      return 'Multi-agent memory isn’t connected on this daemon. This view ' +
-             'ships with SLM 3.8.0 — if you just upgraded, restart the daemon ' +
-             '(run “slm restart”) to load it, then retry.';
-    }
-    if (status === 401 || status === 403) {
-      return 'Not authorised to read agent memory. Sign in to the dashboard, then retry.';
-    }
-    if (status) {
-      return 'The SLM daemon returned an error (status ' + status + '). Retry, ' +
-             'or check the daemon logs.';
-    }
-    // No status → the request never reached the daemon.
-    return 'Could not reach the SLM daemon. Check that it is running, then retry.';
-  }
-
-  function showError(msg) {
-    var band  = document.getElementById('od-agents-err');
-    var msgEl = document.getElementById('od-agents-err-msg');
-    if (band)  band.style.display  = 'flex';
-    if (msgEl) msgEl.textContent   = msg || 'Could not load agent memory data';
-
-    // Degrade gracefully — the actionable message lives in the band above;
-    // the sub-panels just stop showing a stale "Loading…" state.
-    var grid = document.getElementById('od-agents-grid');
-    if (grid) {
-      grid.innerHTML =
-        '<div style="grid-column:1/-1;text-align:center;padding:32px;' +
-          'color:var(--fg-3);font-size:13px">Agent activity unavailable — see the message above.</div>';
-    }
-    var table = document.getElementById('od-agents-table');
-    if (table) {
-      table.innerHTML =
-        '<div style="text-align:center;padding:32px;color:var(--fg-3);font-size:13px">' +
-          'Recent memories unavailable — see the message above.' +
-        '</div>';
-    }
-  }
-
-  function hideError() {
-    var band = document.getElementById('od-agents-err');
-    if (band) band.style.display = 'none';
-  }
-
-  // ── Data loader ───────────────────────────────────────────────────────────
-  function loadAll() {
-    fetch(API_URL, { credentials: 'same-origin' })
-      .then(function (r) {
-        if (!r.ok) {
-          var e = new Error('HTTP ' + r.status);
-          e.httpStatus = r.status;   // C4: preserve status for friendly messaging
-          throw e;
-        }
-        return r.json();
-      })
-      .then(function (data) {
-        if (!data || !data.ok) throw new Error('API returned error');
-        hideError();
-        _allRecent = Array.isArray(data.recent) ? data.recent : [];
-
-        renderKpi(data);
-        renderAgentCards(Array.isArray(data.agents) ? data.agents : []);
-        populateFilter(Array.isArray(data.agents) ? data.agents : []);
-        renderRecentTable(_allRecent);
-      })
-      .catch(function (err) {
-        // CRIT C3/C4: never throw; translate the failure into a message that
-        // tells the operator what to actually do, never a bare "HTTP 404".
-        showError(errorMessage(err));
-      });
-  }
-
-  // ── Client-side filter: re-render recent table by selected agent ──────────
-  function applyFilter() {
-    var sel  = document.getElementById('od-agents-filter');
-    var filt = sel ? sel.value : '';
-    var subset = filt
-      ? _allRecent.filter(function (r) { return r.agent_id === filt; })
-      : _allRecent;
-    renderRecentTable(subset);
-  }
-
-  // ── Event wiring (CSP-safe, no onXxx= attributes) ─────────────────────────
-  function wireEvents(container) {
-    var sel = container.querySelector('#od-agents-filter');
-    if (sel) sel.addEventListener('change', applyFilter);
-
-    var retryBtn = container.querySelector('#od-agents-retry');
-    if (retryBtn) {
-      retryBtn.addEventListener('click', function () {
-        hideError();
-        loadAll();
-      });
-    }
-
-    // Click an agent card → filter Recent memories to that agent + scroll to it.
-    var grid = container.querySelector('#od-agents-grid');
-    if (grid) {
-      grid.addEventListener('click', function (e) {
-        var card = e.target && e.target.closest ? e.target.closest('.slm-agent-card') : null;
-        if (!card) return;
-        var agent = card.getAttribute('data-agent');
-        if (!agent) return;
-        var f = document.getElementById('od-agents-filter');
-        if (f) { f.value = agent; applyFilter(); }
-        var tbl = document.getElementById('od-agents-table');
-        if (tbl && tbl.scrollIntoView) tbl.scrollIntoView({ behavior: 'smooth', block: 'start' });
-      });
-    }
-  }
-
-  // ── Refresh management: MutationObserver re-activates on tab show ─────────
-  function startRefreshObserver() {
-    var pane = document.getElementById('agents-pane');
-    if (!pane || _observer) return;
-    _observer = new MutationObserver(function (mutations) {
-      mutations.forEach(function (m) {
-        if (m.type !== 'attributes' || m.attributeName !== 'class') return;
-        var t = m.target;
-        if (t.classList.contains('active') && t.classList.contains('show')) {
-          loadAll();
-          if (_timer) clearInterval(_timer);
-          _timer = setInterval(function () {
-            if (t.classList.contains('active')) {
-              loadAll();
-            } else {
-              clearInterval(_timer);
-              _timer = null;
-            }
-          }, REFRESH_MS);
-        }
-      });
-    });
-    _observer.observe(pane, { attributes: true });
-  }
-
-  // ── Public API ─────────────────────────────────────────────────────────────
-  window.odRenderAgents = function (container) {
-    if (!container) return;
-    _container = container;
-
-    // Idempotent: reload data if already rendered
-    if (container.querySelector('#od-agents-root')) {
-      loadAll();
-      return;
-    }
-
-    container.innerHTML = buildHTML();
-
-    // Fill data-ic SVG placeholders (icons in KPI strip)
-    if (typeof window.slmIcon === 'function') {
-      container.querySelectorAll('[data-ic]').forEach(function (el) {
-        el.innerHTML = window.slmIcon(el.getAttribute('data-ic'));
-      });
-    }
-
-    wireEvents(container);
-    loadAll();
-    startRefreshObserver();
-
-    // Polling timer — self-stops when pane becomes inactive
-    if (_timer) clearInterval(_timer);
-    _timer = setInterval(function () {
-      var pane = document.getElementById('agents-pane');
-      if (pane && pane.classList.contains('active')) {
-        loadAll();
-      } else {
-        clearInterval(_timer);
-        _timer = null;
-      }
-    }, REFRESH_MS);
-  };
-
-  // Auto-run at DOMContentLoaded if the pane is already in the DOM
-  document.addEventListener('DOMContentLoaded', function () {
-    var pane = document.getElementById('agents-pane');
-    if (pane) window.odRenderAgents(pane);
-  });
-
-}());