instar 0.24.16 → 0.24.17

package/dashboard/index.html

@@ -205,6 +205,11 @@
     .type-badge.job { background: #1b2e1b; color: #86efac; }
     .type-badge.interactive { background: #2e2e1b; color: #fde047; }
 
+    .platform-badge {
+      font-size: 12px;
+      cursor: default;
+    }
+
     .session-telemetry {
       display: flex;
       align-items: center;
@@ -1957,139 +1962,269 @@
       color: var(--text);
     }
 
-    .systems-summary {
+    /* Health Banner */
+    .health-banner {
       display: flex;
+      align-items: center;
       gap: 16px;
+      padding: 20px 24px;
+      border-radius: 10px;
       margin-bottom: 24px;
-      flex-wrap: wrap;
+      border: 1px solid var(--border);
+    }
+
+    .health-banner.healthy {
+      background: rgba(76, 175, 80, 0.08);
+      border-color: rgba(76, 175, 80, 0.25);
     }
 
-    .systems-summary-card {
+    .health-banner.error {
+      background: rgba(244, 67, 54, 0.08);
+      border-color: rgba(244, 67, 54, 0.25);
+    }
+
+    .health-banner.degraded {
+      background: rgba(255, 152, 0, 0.08);
+      border-color: rgba(255, 152, 0, 0.25);
+    }
+
+    .health-icon {
+      font-size: 28px;
+      line-height: 1;
+      flex-shrink: 0;
+    }
+
+    .health-banner.healthy .health-icon { color: var(--accent); }
+    .health-banner.error .health-icon { color: var(--red); }
+    .health-banner.degraded .health-icon { color: var(--orange); }
+
+    .health-text {
       flex: 1;
-      min-width: 140px;
-      padding: 14px 18px;
+    }
+
+    .health-title {
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--text-bright);
+      margin-bottom: 4px;
+    }
+
+    .health-meta {
+      font-size: 12px;
+      color: var(--text-dim);
+    }
+
+    /* Issues Panel */
+    .issues-panel {
+      margin-bottom: 24px;
+    }
+
+    .issue-card {
+      display: flex;
+      align-items: flex-start;
+      gap: 12px;
+      padding: 12px 16px;
       background: var(--bg-panel);
       border: 1px solid var(--border);
-      border-radius: 8px;
-      text-align: center;
+      border-left: 3px solid var(--red);
+      border-radius: 6px;
+      margin-bottom: 8px;
     }
 
-    .systems-summary-card .summary-value {
-      font-size: 22px;
-      font-weight: 700;
+    .issue-card.warning {
+      border-left-color: var(--orange);
+    }
+
+    .issue-card-icon {
+      font-size: 14px;
+      margin-top: 1px;
+      flex-shrink: 0;
+    }
+
+    .issue-card-content {
+      flex: 1;
+    }
+
+    .issue-card-label {
+      font-size: 13px;
+      font-weight: 500;
       color: var(--text-bright);
+      margin-bottom: 2px;
     }
 
-    .systems-summary-card .summary-label {
-      font-size: 11px;
+    .issue-card-desc {
+      font-size: 12px;
       color: var(--text-dim);
-      margin-top: 4px;
     }
 
-    .systems-section {
+    /* Capabilities Grid */
+    .capabilities-section {
       margin-bottom: 24px;
     }
 
-    .systems-section h3 {
-      font-size: 13px;
+    .capabilities-section-title {
+      font-size: 12px;
       font-weight: 600;
-      color: var(--text-bright);
+      color: var(--text-dim);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
       margin-bottom: 12px;
     }
 
-    .systems-category {
+    /* Capability Cards */
+    .capability-card {
       background: var(--bg-panel);
       border: 1px solid var(--border);
       border-radius: 8px;
-      margin-bottom: 8px;
+      margin-bottom: 6px;
       overflow: hidden;
+      transition: border-color 0.15s;
+    }
+
+    .capability-card:hover {
+      border-color: rgba(255,255,255,0.12);
     }
 
-    .systems-category-header {
+    .capability-card.expanded {
+      border-color: var(--accent);
+    }
+
+    .capability-card-header {
       display: flex;
       align-items: center;
-      gap: 10px;
-      padding: 12px 16px;
+      gap: 12px;
+      padding: 14px 16px;
       cursor: pointer;
       user-select: none;
-      transition: background 0.15s;
     }
 
-    .systems-category-header:hover {
-      background: var(--bg-hover);
+    .cap-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      flex-shrink: 0;
+    }
+
+    .cap-dot.active { background: var(--accent); }
+    .cap-dot.error { background: var(--red); }
+
+    .cap-info {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .cap-label {
+      font-size: 13px;
+      color: var(--text-bright);
+      font-weight: 500;
+      margin-bottom: 2px;
     }
 
-    .systems-category-arrow {
+    .cap-metric {
+      font-size: 11px;
+      color: var(--text-dim);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .cap-arrow {
       font-size: 10px;
       color: var(--text-dim);
       transition: transform 0.2s;
-      width: 12px;
+      flex-shrink: 0;
     }
 
-    .systems-category.expanded .systems-category-arrow {
+    .capability-card.expanded .cap-arrow {
       transform: rotate(90deg);
     }
 
-    .systems-category-dot {
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-      flex-shrink: 0;
+    /* Capability Detail (expandable) */
+    .cap-detail {
+      display: none;
+      padding: 0 16px 14px;
+      border-top: 1px solid var(--border);
     }
 
-    .systems-category-name {
-      font-size: 13px;
-      font-weight: 500;
-      color: var(--text-bright);
-      flex: 1;
+    .capability-card.expanded .cap-detail {
+      display: block;
     }
 
-    .systems-category-count {
-      font-size: 11px;
+    .cap-detail-desc {
+      font-size: 12px;
       color: var(--text-dim);
+      margin: 12px 0 10px;
+      line-height: 1.5;
     }
 
-    .systems-category-body {
-      display: none;
-      padding: 0 16px 12px;
-      gap: 8px;
+    .cap-detail-label {
+      font-size: 10px;
+      font-weight: 600;
+      color: var(--text-dim);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      margin-bottom: 6px;
     }
 
-    .systems-category.expanded .systems-category-body {
+    .cap-detail-processes {
       display: flex;
       flex-wrap: wrap;
+      gap: 6px;
     }
 
-    .systems-process-card {
+    .cap-detail-proc {
       display: flex;
       align-items: center;
-      gap: 8px;
-      padding: 8px 12px;
+      gap: 6px;
+      padding: 4px 10px;
       background: var(--bg);
       border: 1px solid var(--border);
-      border-radius: 6px;
-      min-width: 200px;
+      border-radius: 4px;
+      font-size: 11px;
+      color: var(--text);
     }
 
-    .systems-process-dot {
-      width: 6px;
-      height: 6px;
+    .cap-detail-proc-dot {
+      width: 5px;
+      height: 5px;
       border-radius: 50%;
-      flex-shrink: 0;
     }
 
-    .systems-process-name {
+    /* Events Disclosure */
+    .events-disclosure {
+      margin-top: 8px;
+    }
+
+    .events-disclosure-toggle {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 10px 0;
+      cursor: pointer;
+      user-select: none;
       font-size: 12px;
+      color: var(--text-dim);
+      border: none;
+      background: none;
+      width: 100%;
+      text-align: left;
+    }
+
+    .events-disclosure-toggle:hover {
       color: var(--text);
     }
 
-    .systems-process-status {
+    .events-disclosure-arrow {
       font-size: 10px;
-      color: var(--text-dim);
-      margin-left: auto;
+      transition: transform 0.2s;
+    }
+
+    .events-disclosure.expanded .events-disclosure-arrow {
+      transform: rotate(90deg);
     }
 
-    .systems-events {
+    .events-disclosure-body {
+      display: none;
       background: var(--bg-panel);
       border: 1px solid var(--border);
       border-radius: 8px;
@@ -2097,6 +2232,10 @@
       overflow-y: auto;
     }
 
+    .events-disclosure.expanded .events-disclosure-body {
+      display: block;
+    }
+
     .systems-event-row {
       display: flex;
       align-items: center;
@@ -2776,12 +2915,17 @@
                onkeydown="if(event.key==='Enter')createNewSession()" autofocus>
       </div>
       <div class="modal-field">
-        <label class="modal-toggle">
-          <input type="checkbox" id="newSessionHeadless">
-          <span>Headless (no Telegram topic)</span>
-        </label>
-        <div class="modal-hint">Headless sessions still appear in the dashboard but won't create a Telegram topic.</div>
+        <label for="newSessionPlatform">Platform</label>
+        <select id="newSessionPlatform" style="width:100%;padding:8px 12px;background:var(--bg-panel);color:var(--text-bright);border:1px solid var(--border);border-radius:6px;font-size:14px;">
+          <option value="auto">Auto (best available)</option>
+          <option value="telegram">✈️ Telegram</option>
+          <option value="slack">💬 Slack</option>
+          <option value="headless">🖥️ Headless (no messaging)</option>
+        </select>
+        <div class="modal-hint">Choose which messaging platform to link this session to.</div>
       </div>
+      <!-- Keep hidden checkbox for backward compat -->
+      <input type="hidden" id="newSessionHeadless">
       <div class="modal-actions">
         <button class="modal-btn-cancel" onclick="closeNewSessionModal()">Cancel</button>
         <button class="modal-btn-create" id="createSessionBtn" onclick="createNewSession()">Create Session</button>
@@ -2864,19 +3008,15 @@
     <div class="systems-container" id="systemsTab" style="display:none">
       <div class="systems-main">
         <div class="systems-header">
-          <h2>Systems Status</h2>
+          <h2>Systems</h2>
           <button class="systems-refresh" onclick="loadSystems()">Refresh</button>
         </div>
-        <div class="systems-summary" id="systemsSummary">
+        <div id="systemsBanner">
           <div style="padding:20px;color:var(--text-dim);text-align:center">Loading...</div>
         </div>
-        <div class="systems-categories" id="systemsCategories"></div>
-        <div class="systems-section">
-          <h3>Recent Degradation Events</h3>
-          <div class="systems-events" id="systemsEvents">
-            <div style="padding:12px;color:var(--text-dim);text-align:center">No events</div>
-          </div>
-        </div>
+        <div id="systemsIssues"></div>
+        <div id="systemsCapabilities"></div>
+        <div id="systemsEvents"></div>
       </div>
     </div>
 
@@ -3236,6 +3376,10 @@
           }
         }
 
+        const platform = session.platform || 'headless';
+        const platformIcon = platform === 'telegram' ? '✈️' : platform === 'slack' ? '💬' : platform === 'whatsapp' ? '📱' : '🖥️';
+        const platformLabel = platform.charAt(0).toUpperCase() + platform.slice(1);
+
         el.innerHTML = `
           <div class="session-name-row">
             <div class="session-name">${escapeHtml(session.name)}</div>
@@ -3244,6 +3388,7 @@
           <div class="session-meta">
             <span class="type-badge ${sType}">${sType}</span>
             <span class="model-badge ${model}">${model}</span>
+            <span class="platform-badge ${platform}" title="${platformLabel}">${platformIcon}</span>
             <span>${elapsed}</span>
           </div>
           ${telemetryHtml}
@@ -3556,7 +3701,9 @@
 
     async function createNewSession() {
       const nameInput = document.getElementById('newSessionName');
-      const headless = document.getElementById('newSessionHeadless').checked;
+      const platformSelect = document.getElementById('newSessionPlatform');
+      const platform = platformSelect ? platformSelect.value : 'auto';
+      const headless = platform === 'headless';
       const name = nameInput.value.trim();
       const btn = document.getElementById('createSessionBtn');
 
@@ -3577,7 +3724,7 @@
             'Authorization': `Bearer ${token}`,
             'Content-Type': 'application/json',
           },
-          body: JSON.stringify({ name, headless }),
+          body: JSON.stringify({ name, headless, platform: platform === 'auto' ? undefined : platform }),
         });
         const data = await resp.json();
 
@@ -5474,96 +5621,189 @@
     async function loadSystems() {
       try {
         systemsData = await apiFetch('/systems/status');
-        renderSystems();
+        showSystemsOverview();
+        renderSystemsOverview();
       } catch (e) {
-        document.getElementById('systemsSummary').innerHTML =
+        document.getElementById('systemsBanner').innerHTML =
           '<div style="padding:20px;color:var(--red);text-align:center">Failed to load systems status</div>';
       }
     }
 
-    function renderSystems() {
+    function renderSystemsOverview() {
       if (!systemsData) return;
-      const { uptime, categories, recentEvents } = systemsData;
-
-      // Summary
-      let totalProcesses = 0;
-      let healthyProcesses = 0;
-      let errorProcesses = 0;
-      for (const cat of categories) {
-        for (const p of cat.processes) {
-          totalProcesses++;
-          if (p.status === 'running') healthyProcesses++;
-          if (p.status === 'error') errorProcesses++;
-        }
-      }
+      const { uptime, health, healthSummary, activeCapabilities, issues, recentEvents } = systemsData;
       const uptimeStr = formatUptimeClient(uptime);
 
-      document.getElementById('systemsSummary').innerHTML = `
-        <div class="systems-summary-card">
-          <div class="summary-value" style="color:var(--accent)">${healthyProcesses}/${totalProcesses}</div>
-          <div class="summary-label">Processes Healthy</div>
-        </div>
-        <div class="systems-summary-card">
-          <div class="summary-value" style="color:${errorProcesses > 0 ? 'var(--red)' : 'var(--text-dim)'}">${errorProcesses}</div>
-          <div class="summary-label">Errors</div>
-        </div>
-        <div class="systems-summary-card">
-          <div class="summary-value">${esc(uptimeStr)}</div>
-          <div class="summary-label">Uptime</div>
-        </div>
-        <div class="systems-summary-card">
-          <div class="summary-value">${recentEvents.length}</div>
-          <div class="summary-label">Recent Events</div>
+      // Health Banner
+      const bannerClass = health === 'healthy' ? 'healthy' : health === 'error' ? 'error' : 'degraded';
+      const bannerIcon = health === 'healthy' ? '&#10003;' : '&#9888;';
+      document.getElementById('systemsBanner').innerHTML = `
+        <div class="health-banner ${bannerClass}">
+          <span class="health-icon">${bannerIcon}</span>
+          <div class="health-text">
+            <div class="health-title">${esc(healthSummary)}</div>
+            <div class="health-meta">Uptime: ${esc(uptimeStr)}  &middot;  ${activeCapabilities.length} capabilities active${issues.length > 0 ? '  &middot;  ' + issues.length + ' issue' + (issues.length > 1 ? 's' : '') : ''}</div>
+          </div>
         </div>`;
 
-      // Categories
-      const catEl = document.getElementById('systemsCategories');
-      catEl.innerHTML = categories.map(cat => {
-        const running = cat.processes.filter(p => p.status === 'running').length;
-        const hasError = cat.processes.some(p => p.status === 'error');
-        const hasDisabled = cat.processes.some(p => p.status === 'not tracked' || p.status === 'disabled');
-        const dotColor = hasError ? 'var(--red)' : (running === 0 ? 'var(--text-dim)' : (hasDisabled ? 'var(--orange)' : 'var(--accent)'));
-
-        const processCards = cat.processes.map(p => {
-          const pDotColor = p.status === 'running' ? 'var(--accent)' :
-                            p.status === 'error' ? 'var(--red)' :
-                            p.status === 'disabled' ? 'var(--orange)' : 'var(--text-dim)';
-          return `<div class="systems-process-card">
-            <span class="systems-process-dot" style="background:${pDotColor}"></span>
-            <span class="systems-process-name">${esc(p.name)}</span>
-            <span class="systems-process-status">${esc(p.status)}</span>
+      // Issues (only if any)
+      const issuesEl = document.getElementById('systemsIssues');
+      if (issues.length > 0) {
+        issuesEl.innerHTML = '<div class="issues-panel">' + issues.map(iss => {
+          const cls = iss.severity === 'warning' ? ' warning' : '';
+          const ic = iss.severity === 'warning' ? '&#9888;' : '&#10060;';
+          return `<div class="issue-card${cls}">
+            <span class="issue-card-icon">${ic}</span>
+            <div class="issue-card-content">
+              <div class="issue-card-label">${esc(iss.label)}</div>
+              <div class="issue-card-desc">${esc(iss.description)}</div>
+            </div>
+          </div>`;
+        }).join('') + '</div>';
+      } else {
+        issuesEl.innerHTML = '';
+      }
+
+      // Card Grid
+      const capsEl = document.getElementById('systemsCapabilities');
+      if (activeCapabilities.length > 0) {
+        const cards = activeCapabilities.map(cap => {
+          const dotClass = cap.status === 'error' ? 'error' : 'active';
+          const statusClass = cap.status === 'error' ? ' error' : '';
+          const previewStats = buildPreviewStats(cap.stats || {});
+          return `<div class="cap-card${statusClass}" onclick="showCapabilityDetail('${esc(cap.id)}')">
+            <div class="cap-card-top">
+              <span class="cap-dot ${dotClass}"></span>
+              <span class="cap-card-name">${esc(cap.label)}</span>
+              <span class="cap-card-arrow">&#9654;</span>
+            </div>
+            <div class="cap-card-desc">${esc(cap.description)}</div>
+            ${previewStats ? '<div class="cap-card-stats">' + previewStats + '</div>' : ''}
+            <div class="cap-card-metric">${esc(cap.metric)}</div>
           </div>`;
         }).join('');
-
-        return `<div class="systems-category" data-cat="${esc(cat.id)}">
-          <div class="systems-category-header" onclick="toggleSystemsCategory(this)">
-            <span class="systems-category-arrow">&#9654;</span>
-            <span class="systems-category-dot" style="background:${dotColor}"></span>
-            <span class="systems-category-name">${esc(cat.name)}</span>
-            <span class="systems-category-count">${running}/${cat.processes.length} active</span>
-          </div>
-          <div class="systems-category-body">${processCards}</div>
-        </div>`;
-      }).join('');
+        capsEl.innerHTML = `<div class="cap-section-title">Active Capabilities</div><div class="cap-grid">${cards}</div>`;
+      } else {
+        capsEl.innerHTML = '';
+      }
 
       // Events
       const eventsEl = document.getElementById('systemsEvents');
-      if (recentEvents.length === 0) {
-        eventsEl.innerHTML = '<div style="padding:12px;color:var(--text-dim);text-align:center">No degradation events</div>';
-      } else {
-        eventsEl.innerHTML = recentEvents.map(e => {
+      if (recentEvents.length > 0) {
+        const rows = recentEvents.map(e => {
           const time = e.timestamp ? new Date(e.timestamp).toLocaleString([], { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' }) : '';
-          return `<div class="systems-event-row">
-            <span class="systems-event-time">${esc(time)}</span>
-            <span class="systems-event-text">${esc(e.narrative || e.subsystem || 'Unknown event')}</span>
-          </div>`;
+          return `<div class="systems-event-row"><span class="systems-event-time">${esc(time)}</span><span class="systems-event-text">${esc(e.narrative || e.subsystem || '')}</span></div>`;
         }).join('');
+        eventsEl.innerHTML = `<div class="events-disclosure" id="eventsDisclosure">
+          <button class="events-disclosure-toggle" onclick="document.getElementById('eventsDisclosure').classList.toggle('expanded')">
+            <span class="events-disclosure-arrow">&#9654;</span> Recent Events (${recentEvents.length})
+          </button>
+          <div class="events-disclosure-body">${rows}</div></div>`;
+      } else {
+        eventsEl.innerHTML = '';
+      }
+    }
+
+    function buildPreviewStats(stats) {
+      if (!stats || typeof stats !== 'object') return '';
+      const map = {
+        recoveries: 'Recoveries', interventions: 'Interventions', activeCases: 'Active',
+        coherencePassed: 'Passed', coherenceFailed: 'Failed', memoryPercent: 'Memory',
+        enabledJobs: 'Jobs', activeJobSessions: 'Running', queueLength: 'Queued',
+        weeklyUsage: 'Weekly', fiveHourRate: '5h Rate',
+        topicMappings: 'Topics', totalMessages: 'Messages',
+        proposals: 'Proposals', gaps: 'Gaps', learningsApplied: 'Applied',
+      };
+      const chips = [];
+      for (const [key, label] of Object.entries(map)) {
+        if (stats[key] != null && stats[key] !== 0 && stats[key] !== false) {
+          const suf = ['weeklyUsage','fiveHourRate','memoryPercent'].includes(key) ? '%' : '';
+          chips.push(`<span class="cap-stat"><span class="cap-stat-value">${esc(String(stats[key]))}${suf}</span>${esc(label)}</span>`);
+        }
+        if (chips.length >= 3) break;
+      }
+      return chips.join('');
+    }
+
+    function showCapabilityDetail(capId) {
+      if (!systemsData) return;
+      const cap = systemsData.activeCapabilities.find(c => c.id === capId);
+      if (!cap) return;
+      document.getElementById('systemsOverview').style.display = 'none';
+      document.getElementById('systemsDetailView').classList.add('active');
+      const content = document.getElementById('systemsDetailContent');
+
+      const statCards = buildStatCards(cap.stats || {});
+      const processRows = (cap.processes || []).map(p => {
+        const dotColor = p.status === 'running' ? 'var(--accent)' : 'var(--red)';
+        return `<div class="cap-process-row">
+          <span class="cap-process-dot" style="background:${dotColor}"></span>
+          <span class="cap-process-name">${esc(p.name)}</span>
+          <span class="cap-process-status">${esc(p.status === 'running' ? 'Running' : 'Error')}</span>
+        </div>`;
+      }).join('');
+
+      const lastAct = cap.lastActivity
+        ? '<div class="cap-last-activity">Last activity: ' + esc(timeAgo(cap.lastActivity)) + '</div>' : '';
+
+      content.innerHTML = `
+        <div class="cap-detail-header">
+          <div class="cap-detail-title">
+            <span class="cap-dot ${cap.status === 'error' ? 'error' : 'active'}"></span>
+            <h3>${esc(cap.label)}</h3>
+          </div>
+          <div class="cap-detail-description">${esc(cap.description)}</div>
+          ${lastAct}
+        </div>
+        ${statCards ? '<div class="cap-detail-section"><div class="cap-detail-section-title">Metrics</div><div class="cap-stats-grid">' + statCards + '</div></div>' : ''}
+        <div class="cap-detail-section">
+          <div class="cap-detail-section-title">Components (${(cap.processes || []).length})</div>
+          <div class="cap-process-list">${processRows}</div>
+        </div>
+        <div class="cap-detail-section">
+          <div class="cap-detail-section-title">Status</div>
+          <div style="font-size:13px;color:var(--accent);font-weight:500;padding:8px 0">${esc(cap.metric)}</div>
+        </div>`;
+    }
+
+    function buildStatCards(stats) {
+      if (!stats || typeof stats !== 'object') return '';
+      const map = {
+        interventions: 'Interventions', recoveries: 'Recoveries', sessionDeaths: 'Deaths',
+        llmOverrides: 'LLM Overrides', activeCases: 'Active Cases', totalTriages: 'Triages',
+        cooldowns: 'Cooldowns',
+        coherenceChecks: 'Checks', coherencePassed: 'Passed', coherenceFailed: 'Failed', coherenceCorrected: 'Corrected',
+        memoryPercent: 'Memory %', memoryFreeGB: 'Free GB', memoryTotalGB: 'Total GB',
+        trackedProcesses: 'Tracked', orphanProcesses: 'Orphans', totalMemoryMB: 'Memory MB',
+        totalJobs: 'Total Jobs', enabledJobs: 'Enabled', queueLength: 'Queued', activeJobSessions: 'Running',
+        weeklyUsage: 'Weekly %', fiveHourRate: '5h Rate %',
+        topicMappings: 'Topics', pendingStalls: 'Pending', totalMessages: 'Messages',
+        proposals: 'Proposals', learnings: 'Learnings', learningsApplied: 'Applied',
+        gaps: 'Gaps', actions: 'Actions', overdueActions: 'Overdue',
+      };
+      const cards = [];
+      for (const [key, label] of Object.entries(map)) {
+        if (stats[key] != null && typeof stats[key] === 'number') {
+          cards.push(`<div class="cap-stat-card"><div class="cap-stat-card-value">${stats[key]}</div><div class="cap-stat-card-label">${esc(label)}</div></div>`);
+        }
       }
+      return cards.join('');
+    }
+
+    function showSystemsOverview() {
+      document.getElementById('systemsOverview').style.display = '';
+      document.getElementById('systemsDetailView').classList.remove('active');
     }
 
-    function toggleSystemsCategory(headerEl) {
-      const cat = headerEl.closest('.systems-category');
-      cat.classList.toggle('expanded');
+    function timeAgo(isoStr) {
+      const ms = Date.now() - new Date(isoStr).getTime();
+      const s = Math.floor(ms / 1000);
+      if (s < 60) return 'just now';
+      const m = Math.floor(s / 60);
+      if (m < 60) return m + 'm ago';
+      const h = Math.floor(m / 60);
+      if (h < 24) return h + 'h ago';
+      return Math.floor(h / 24) + 'd ago';
     }
 
     function formatUptimeClient(ms) {