(function() {

  // ── Theme toggle ─────────────────────────────────────────
  const THEME_CYCLE = ['system', 'light', 'dark'];
  const THEME_ICONS = {
    system: '<svg width="15" height="15" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="2" width="14" height="10" rx="1.5"/><path d="M5 15h6M8 12v3"/></svg>',
    light:  '<svg width="15" height="15" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><circle cx="8" cy="8" r="3"/><line x1="8" y1="1" x2="8" y2="3"/><line x1="8" y1="13" x2="8" y2="15"/><line x1="1" y1="8" x2="3" y2="8"/><line x1="13" y1="8" x2="15" y2="8"/><line x1="3.05" y1="3.05" x2="4.46" y2="4.46"/><line x1="11.54" y1="11.54" x2="12.95" y2="12.95"/><line x1="12.95" y1="3.05" x2="11.54" y2="4.46"/><line x1="4.46" y1="11.54" x2="3.05" y2="12.95"/></svg>',
    dark:   '<svg width="15" height="15" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M13 10a5 5 0 1 1-7-7 6 6 0 0 0 7 7z"/></svg>',
  };
  const THEME_LABELS = { system: 'System theme', light: 'Light theme', dark: 'Dark theme' };

  function getTheme() { return localStorage.getItem('theme') || 'system'; }

  function applyTheme(theme) {
    if (theme === 'system') document.documentElement.removeAttribute('data-theme');
    else document.documentElement.setAttribute('data-theme', theme);
  }

  function updateToggleBtn(theme) {
    const btn = document.getElementById('theme-toggle');
    if (!btn) return;
    btn.innerHTML = THEME_ICONS[theme];
    btn.title = THEME_LABELS[theme];
  }

  function cycleTheme() {
    const next = THEME_CYCLE[(THEME_CYCLE.indexOf(getTheme()) + 1) % THEME_CYCLE.length];
    if (next === 'system') localStorage.removeItem('theme');
    else localStorage.setItem('theme', next);
    applyTheme(next);
    updateToggleBtn(next);
  }

  document.addEventListener('DOMContentLoaded', function() {
    updateToggleBtn(getTheme());
    const btn = document.getElementById('theme-toggle');
    if (btn) btn.addEventListener('click', cycleTheme);
  });
  // ─────────────────────────────────────────────────────────

  const app = document.getElementById('app');

  let ws = null;
  let wsReconnectTimeout = null;
  const wsCallbacks = new Set();

  let sessionsState = { sessions: [], cursor: null };
  let sessionsUnsubscribe = null;
  let openclawState = { instances: {} };
  let openclawUnsubscribe = null;
  let infraUnsubscribe = null;
  let swarmState = { services: {} }; // keyed by service name
  let agentsState = createAgentsState();
  let agentsUnsubscribe = null;
  let dashboardState = null;
  let dashboardUnsubscribe = null;
  let dashboardChart = null;
  let dashboardResizeObserver = null;

  function getWsURL() {
    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
    return protocol + '//' + window.location.host + '/api/v1/ws';
  }

  function connectWS() {
    if (ws && (ws.readyState === WebSocket.OPEN || ws.readyState === WebSocket.CONNECTING)) {
      return;
    }

    try {
      ws = new WebSocket(getWsURL());

      ws.onopen = () => {
        console.log('WebSocket connected');
        wsCallbacks.forEach(cb => cb({ type: 'connected' }));
      };

      ws.onmessage = (event) => {
        try {
          const data = JSON.parse(event.data);
          wsCallbacks.forEach(cb => cb({ type: 'message', data }));
        } catch (e) {
          console.error('Failed to parse WS message:', e);
        }
      };

      ws.onclose = () => {
        console.log('WebSocket disconnected');
        wsCallbacks.forEach(cb => cb({ type: 'disconnected' }));
        wsReconnectTimeout = setTimeout(connectWS, 5000);
      };

      ws.onerror = (err) => {
        console.error('WebSocket error:', err);
      };
    } catch (e) {
      console.error('Failed to connect WebSocket:', e);
      wsReconnectTimeout = setTimeout(connectWS, 5000);
    }
  }

  function subscribeWS(callback) {
    wsCallbacks.add(callback);
    if (!ws || ws.readyState !== WebSocket.OPEN) {
      connectWS();
    }
    return () => wsCallbacks.delete(callback);
  }

  function cleanupLiveViews() {
    if (openclawUnsubscribe) {
      openclawUnsubscribe();
      openclawUnsubscribe = null;
    }
    if (infraUnsubscribe) {
      infraUnsubscribe();
      infraUnsubscribe = null;
    }
    if (agentsUnsubscribe) {
      agentsUnsubscribe();
      agentsUnsubscribe = null;
    }
    if (sessionsState && sessionsState.timerInterval) {
      clearInterval(sessionsState.timerInterval);
      sessionsState.timerInterval = null;
    }
    if (sessionsUnsubscribe) {
      sessionsUnsubscribe();
      sessionsUnsubscribe = null;
    }
    if (dashboardUnsubscribe) {
      dashboardUnsubscribe();
      dashboardUnsubscribe = null;
    }
    if (dashboardChart) {
      dashboardChart.destroy();
      dashboardChart = null;
    }
    if (dashboardResizeObserver) {
      dashboardResizeObserver.disconnect();
      dashboardResizeObserver = null;
    }
    if (agentsState && agentsState.timerInterval) {
      clearInterval(agentsState.timerInterval);
      agentsState.timerInterval = null;
    }
  }

  function route() {
    cleanupLiveViews();

    const path = window.location.pathname;
    if (path === '/') {
      renderDashboard();
    } else if (path === '/sessions') {
      renderSessions();
    } else if (path.startsWith('/agents')) {
      renderAgents();
    } else if (path.startsWith('/infrastructure')) {
      renderInfrastructure();
    } else if (path.startsWith('/sessions/')) {
      renderSession(path.split('/sessions/')[1]);
    } else if (path.startsWith('/runs/')) {
      renderRun(path.split('/runs/')[1]);
    } else {
      app.innerHTML = '<p>Page not found</p>';
    }
    updateActiveNav();
  }

  function navigate(path) {
    history.pushState(null, '', path);
    route();
  }

  function updateActiveNav() {
    const path = window.location.pathname;
    document.querySelectorAll('header nav a').forEach(a => {
      const href = a.getAttribute('href');
      const isActive = href === '/'
        ? path === '/'
        : path.startsWith(href);
      a.classList.toggle('active', isActive);
    });
  }

  window.addEventListener('popstate', route);

  async function api(path) {
    const resp = await fetch('/api' + path);
    if (!resp.ok) {
      throw new Error('API error');
    }
    return resp.json();
  }

  function tryParseJSON(s) { try { return s ? JSON.parse(s) : null; } catch { return null; } }

  function escapeHTML(value) {
    return String(value ?? '')
      .replace(/&/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;')
      .replace(/'/g, '&#39;');
  }

  function relativeTime(ts) {
    if (!ts) {
      return '-';
    }

    const now = Date.now();
    const then = new Date(ts).getTime();
    const diff = now - then;

    if (diff < 60000) return 'just now';
    if (diff < 3600000) return Math.floor(diff / 60000) + 'm ago';
    if (diff < 86400000) return Math.floor(diff / 3600000) + 'h ago';
    return Math.floor(diff / 86400000) + 'd ago';
  }

  function formatDuration(ms) {
    if (ms === undefined || ms === null || ms === '') return '-';
    if (ms < 1000) return ms + 'ms';
    if (ms < 60000) return (ms / 1000).toFixed(1) + 's';
    return (ms / 60000).toFixed(1) + 'm';
  }

  function formatBytes(bytes) {
    if (!bytes) return null;
    const units = ['B', 'KB', 'MB', 'GB', 'TB'];
    let unitIndex = 0;
    let value = bytes;
    while (value >= 1024 && unitIndex < units.length - 1) {
      value /= 1024;
      unitIndex++;
    }
    return value.toFixed(1) + ' ' + units[unitIndex];
  }

  function statusIcon(status) {
    if (status === 'success') return '<span class="status-badge status-success"><span class="status-dot"></span>success</span>';
    if (status === 'error') return '<span class="status-badge status-error"><span class="status-dot"></span>error</span>';
    return '<span class="status-badge status-unknown"><span class="status-dot"></span>unknown</span>';
  }

  function extractEnvelope(record) {
    if (record && typeof record === 'object' && record.payload && record.payload.event && record.payload.schema) {
      return record.payload;
    }
    return record || {};
  }

  function getEnvelopeEvent(record) {
    const envelope = extractEnvelope(record);
    return envelope.event || envelope.Event || {};
  }

  function getEnvelopeType(record) {
    return record?.type || getEnvelopeEvent(record).type || '';
  }

  function getEnvelopeTS(record) {
    return record?.ts || getEnvelopeEvent(record).ts || '';
  }

  function getEnvelopeSource(record) {
    return getEnvelopeEvent(record).source || {};
  }

  function getEnvelopePayload(record) {
    const envelope = extractEnvelope(record);
    return envelope.payload || envelope.Payload || {};
  }

  function getEnvelopeAttributes(record) {
    const envelope = extractEnvelope(record);
    return envelope.attributes || envelope.Attributes || {};
  }

  function getEnvelopeCorrelation(record) {
    const envelope = extractEnvelope(record);
    return envelope.correlation || envelope.Correlation || {};
  }

  function getRecordID(record) {
    return record?.event_id || getEnvelopeEvent(record).id || '';
  }

  function isCurrentPath(prefix) {
    return window.location.pathname.startsWith(prefix);
  }

  async function renderSessions() {
    app.innerHTML = `
      <div class="page-header">
        <h2>Sessions</h2>
      </div>
      <div class="filters">
        <label>From <input type="date" id="filter-from"></label>
        <label>To <input type="date" id="filter-to"></label>
        <label>Framework
          <select id="filter-framework">
            <option value="">All</option>
            <option value="claude-code">claude-code</option>
            <option value="opencode">opencode</option>
            <option value="openclaw">openclaw</option>
          </select>
        </label>
        <label>Host <input type="text" id="filter-host" placeholder="hostname"></label>
      </div>
      <div class="table-container">
        <table>
          <thead>
            <tr>
              <th>Session</th>
              <th>Framework</th>
              <th>Host</th>
              <th>Runs</th>
              <th>Time</th>
            </tr>
          </thead>
          <tbody id="sessions-body"></tbody>
        </table>
      </div>
      <button id="load-more" class="load-more" style="display:none">Load more</button>
    `;

    ['from', 'to', 'framework', 'host'].forEach(f => {
      document.getElementById('filter-' + f).addEventListener('change', () => {
        sessionsState.sessions = [];
        sessionsState.cursor = null;
        loadSessions();
      });
    });

    document.getElementById('load-more').addEventListener('click', loadSessions);

    sessionsState = { sessions: [], cursor: null, timerInterval: null };
    await loadSessions();

    sessionsState.timerInterval = setInterval(updateSessionTimers, 30000);
    sessionsUnsubscribe = subscribeWS(handleSessionsWS);
  }

  function isSessionActive(s) { return !s.ended_at; }

  function renderSessionRow(s) {
    const fw = s.framework || 'unknown';
    const fwClass = fw.replace(/[^a-z0-9-]/g, '-');
    const active = isSessionActive(s);
    const dotState = active ? 'active' : 'ended';
    const dotTitle = active ? 'Active session' : 'Session ended';
    return `
      <td class="id-cell">${escapeHTML(s.session_id.substring(0, 12))}…</td>
      <td><span class="fw-dot ${escapeHTML(fwClass)} ${dotState}" title="${dotTitle}"></span>${escapeHTML(fw)}</td>
      <td>${escapeHTML(s.host || '-')}</td>
      <td>${s.run_count}</td>
      <td title="${escapeHTML(s.started_at)}">${escapeHTML(relativeTime(s.started_at))}</td>
    `;
  }

  function updateSessionTimers() {
    const tbody = document.getElementById('sessions-body');
    if (!tbody) return;
    sessionsState.sessions.forEach(s => {
      const row = tbody.querySelector(`[data-session="${s.session_id}"]`);
      if (row) {
        const td = row.cells[4];
        if (td) td.textContent = relativeTime(s.started_at);
      }
    });
  }

  function handleSessionsWS(msg) {
    if (msg.type !== 'message') return;
    const eventType = getEnvelopeType(msg.data);
    const correlation = getEnvelopeCorrelation(msg.data);
    const sessionId = correlation?.session_id || msg.data.event?.id;

    if (eventType === 'session.start') {
      const source = msg.data.event?.source;
      const newSession = {
        session_id: sessionId,
        started_at: msg.data.event?.ts,
        framework: source?.framework || 'unknown',
        host: source?.host || '-',
        run_count: 1,
        active: true,
      };
      sessionsState.sessions.unshift(newSession);
      const tbody = document.getElementById('sessions-body');
      if (tbody) {
        const row = tbody.insertRow(0);
        row.className = 'clickable active';
        row.dataset.session = newSession.session_id;
        row.innerHTML = renderSessionRow(newSession);
        row.addEventListener('click', () => navigate('/sessions/' + row.dataset.session));
      }
    }

    if (eventType === 'run.start' && sessionId) {
      const session = sessionsState.sessions.find(s => s.session_id === sessionId);
      if (session) {
        session.run_count = (session.run_count || 0) + 1;
        const tbody = document.getElementById('sessions-body');
        if (tbody) {
          const row = tbody.querySelector(`[data-session="${sessionId}"]`);
          if (row) row.cells[3].textContent = session.run_count;
        }
      }
    }

    if (eventType === 'session.end' && sessionId) {
      const session = sessionsState.sessions.find(s => s.session_id === sessionId);
      if (session) {
        session.ended_at = new Date().toISOString();
        const tbody = document.getElementById('sessions-body');
        if (tbody) {
          const row = tbody.querySelector(`[data-session="${sessionId}"]`);
          if (row) {
            const dot = row.querySelector('.fw-dot');
            dot.classList.remove('active');
            dot.classList.add('ended');
          }
        }
      }
    }
  }

  async function loadSessions() {
    const params = new URLSearchParams();
    const from = document.getElementById('filter-from').value;
    const to = document.getElementById('filter-to').value;
    const framework = document.getElementById('filter-framework').value;
    const host = document.getElementById('filter-host').value;

    if (from) params.set('from', from);
    if (to) params.set('to', to);
    if (framework) params.set('framework', framework);
    if (host) params.set('host', host);
    if (sessionsState.cursor) params.set('cursor', sessionsState.cursor);

    const data = await api('/v1/sessions?' + params.toString());
    sessionsState.sessions = sessionsState.sessions.concat(data.sessions || []);
    sessionsState.cursor = data.next_cursor;

    const tbody = document.getElementById('sessions-body');
    tbody.innerHTML = sessionsState.sessions.map(s => {
      const fw = s.framework || 'unknown';
      const fwClass = fw.replace(/[^a-z0-9-]/g, '-');
      const active = isSessionActive(s);
      const dotState = active ? 'active' : 'ended';
      const dotTitle = active ? 'Active session' : 'Session ended';
      return `
        <tr class="clickable ${active ? 'active' : ''}" data-session="${escapeHTML(s.session_id)}">
          <td class="id-cell">${escapeHTML(s.session_id.substring(0, 12))}…</td>
          <td><span class="fw-dot ${escapeHTML(fwClass)} ${dotState}" title="${dotTitle}"></span>${escapeHTML(fw)}</td>
          <td>${escapeHTML(s.host || '-')}</td>
          <td>${s.run_count}</td>
          <td title="${escapeHTML(s.started_at)}">${escapeHTML(relativeTime(s.started_at))}</td>
        </tr>
      `;
    }).join('') || '<tr><td colspan="5" class="empty-state">No sessions found</td></tr>';

    tbody.querySelectorAll('tr.clickable').forEach(row => {
      row.addEventListener('click', () => navigate('/sessions/' + row.dataset.session));
    });

    document.getElementById('load-more').style.display = sessionsState.cursor ? 'block' : 'none';
  }

  async function renderSession(sessionID) {
    const data = await api('/v1/sessions/' + sessionID);
    const s = data.session;
    const runs = data.runs || [];
    const active = !s.ended_at;
    const duration = s.ended_at
      ? formatDuration(new Date(s.ended_at) - new Date(s.started_at))
      : 'ongoing';

    app.innerHTML = `
      <a href="/sessions" class="back-link">&larr; Back to Sessions</a>
      <div class="page-header">
        <h2>Session <span style="font-family:var(--font-mono);font-size:1.1rem;color:var(--accent)">${escapeHTML(sessionID.substring(0, 16))}...</span></h2>
        <div class="session-status-line">
          <span class="fw-dot ${escapeHTML((s.framework || 'unknown').replace(/[^a-z0-9-]/g, '-'))} ${active ? 'active' : 'ended'}"></span>
          <span class="session-status-text">${active ? 'Active' : 'Ended'}</span>
        </div>
        <div class="meta-tiles">
          <div class="meta-tile">
            <div class="meta-tile-label">Started</div>
            <div class="meta-tile-value">${escapeHTML(new Date(s.started_at).toLocaleString())}</div>
          </div>
          <div class="meta-tile">
            <div class="meta-tile-label">Framework</div>
            <div class="meta-tile-value">${escapeHTML(s.framework || '-')}</div>
          </div>
          <div class="meta-tile">
            <div class="meta-tile-label">Host</div>
            <div class="meta-tile-value">${escapeHTML(s.host || '-')}</div>
          </div>
          <div class="meta-tile">
            <div class="meta-tile-label">Duration</div>
            <div class="meta-tile-value">${escapeHTML(duration)}</div>
          </div>
        </div>
      </div>
      <div class="section-title">Runs <span class="count">${runs.length}</span></div>
      <div class="table-container">
        <table>
          <thead>
            <tr>
              <th>Run ID</th>
              <th>Status</th>
              <th>Model</th>
              <th>Tools</th>
              <th>Spans</th>
              <th>Duration</th>
              <th>Started</th>
            </tr>
          </thead>
          <tbody id="session-runs-body">
            ${renderSessionRunsRows(runs)}
          </tbody>
        </table>
      </div>
    `;

    bindSessionRunRows();

    document.querySelector('.back-link').addEventListener('click', e => {
      e.preventDefault();
      navigate('/sessions');
    });

    sessionsUnsubscribe = subscribeWS((msg) => handleSessionWS(sessionID, msg));
  }

  function handleSessionWS(sessionID, msg) {
    if (msg.type !== 'message') return;
    const correlation = getEnvelopeCorrelation(msg.data);
    if (correlation?.session_id !== sessionID) return;

    loadSessionData(sessionID);
  }

  async function loadSessionData(sessionID) {
    if (!isCurrentPath('/sessions/' + sessionID)) return;
    const data = await api('/v1/sessions/' + sessionID);
    const runs = data.runs || [];

    const tbody = document.getElementById('session-runs-body');
    if (!tbody) return;

    tbody.innerHTML = renderSessionRunsRows(runs);
    bindSessionRunRows();

    const countSpan = document.querySelector('.section-title .count');
    if (countSpan) countSpan.textContent = runs.length;
  }

  async function renderRun(runID) {
    const data = await api('/v1/runs/' + runID);
    const r = data.run;
    const spans = data.spans || [];
    const duration = r.ended_at
      ? formatDuration(new Date(r.ended_at) - new Date(r.started_at))
      : 'ongoing';

    app.innerHTML = `
      <a href="/sessions/${escapeHTML(r.session_id)}" class="back-link">&larr; Back to Session</a>
      <div class="page-header">
        <h2>Run <span style="font-family:var(--font-mono);font-size:1.1rem;color:var(--accent)">${escapeHTML(runID.substring(0, 16))}...</span> ${statusIcon(r.status)}</h2>
        <div class="meta-tiles">
          <div class="meta-tile">
            <div class="meta-tile-label">Started</div>
            <div class="meta-tile-value">${escapeHTML(new Date(r.started_at).toLocaleString())}</div>
          </div>
          <div class="meta-tile">
            <div class="meta-tile-label">Duration</div>
            <div class="meta-tile-value">${escapeHTML(duration)}</div>
          </div>
        </div>
      </div>
      <div class="section-title">Spans <span class="count">${spans.length}</span></div>
      <div class="table-container">
        <table>
          <thead>
            <tr>
              <th>Name</th>
              <th>Kind</th>
              <th>Status</th>
              <th>Duration</th>
            </tr>
          </thead>
          <tbody id="spans-body">
            ${spans.map((sp, i) => `
              <tr class="expandable" data-index="${i}">
                <td><span class="expand-icon"></span>${escapeHTML(sp.name)}</td>
                <td>${escapeHTML(sp.kind)}</td>
                <td>${statusIcon(sp.status)}</td>
                <td>${escapeHTML(formatDuration(sp.duration_ms))}</td>
              </tr>
              <tr class="span-detail-row" data-index="${i}" style="display:none">
                <td colspan="4">
                  <div class="span-details">${escapeHTML(JSON.stringify(sp.payload, null, 2))}</div>
                </td>
              </tr>
            `).join('') || '<tr><td colspan="4" class="empty-state">No spans</td></tr>'}
          </tbody>
        </table>
      </div>
    `;

    document.querySelectorAll('tr.expandable').forEach(row => {
      row.addEventListener('click', () => {
        const idx = row.dataset.index;
        const detailRow = document.querySelector(`tr.span-detail-row[data-index="${idx}"]`);
        const icon = row.querySelector('.expand-icon');
        if (detailRow.style.display === 'none') {
          detailRow.style.display = 'table-row';
          icon.style.transform = 'rotate(45deg)';
        } else {
          detailRow.style.display = 'none';
          icon.style.transform = '';
        }
      });
    });

    document.querySelector('.back-link').addEventListener('click', e => {
      e.preventDefault();
      navigate('/sessions/' + r.session_id);
    });
  }

  function renderSessionRunsRows(runs) {
    if (!runs || runs.length === 0) {
      return '<tr><td colspan="7" class="empty-state">No runs</td></tr>';
    }

    return runs.map((r, i) => {
      const runDuration = r.ended_at
        ? formatDuration(new Date(r.ended_at) - new Date(r.started_at))
        : '-';
      const modelLabel = r.model ? escapeHTML(r.model.replace(/^claude-/, '')) : '-';
      const spans = r.spans || [];
      const spansHTML = spans.length > 0 ? `
        <div class="session-run-spans">
          ${spans.map(sp => {
            const body = getSessionSpanSummary(sp);
            return `
              <div class="session-span-pill ${escapeHTML(sp.kind || 'unknown')}">
                <span class="session-span-name">${escapeHTML(sp.name || sp.kind || 'span')}</span>
                <span class="session-span-meta">${escapeHTML(body)}</span>
              </div>
            `;
          }).join('')}
        </div>
      ` : '<div class="empty-state" style="padding:0.5rem 0">No spans yet</div>';

      return `
        <tr class="clickable expandable-run" data-run="${escapeHTML(r.run_id)}" data-index="${i}">
          <td class="id-cell"><span class="expand-icon"></span>${escapeHTML(r.run_id.substring(0, 12))}...</td>
          <td>${statusIcon(r.status)}</td>
          <td><span class="model-badge">${modelLabel}</span></td>
          <td>${r.tool_count || 0}</td>
          <td>${r.span_count}</td>
          <td>${escapeHTML(runDuration)}</td>
          <td>${escapeHTML(new Date(r.started_at).toLocaleTimeString())}</td>
        </tr>
        <tr class="span-detail-row" data-index="${i}" style="display:none">
          <td colspan="7">
            <div class="session-run-detail">
              <div class="section-title" style="margin-bottom:0.5rem">Spans <span class="count">${spans.length}</span></div>
              ${spansHTML}
            </div>
          </td>
        </tr>
      `;
    }).join('');
  }

  function getSessionSpanSummary(sp) {
    const payload = sp.payload || {};
    const innerPayload = payload.payload || {};
    if (sp.kind === 'tool') {
      const result = innerPayload.result_preview || '';
      const duration = sp.duration_ms !== undefined && sp.duration_ms !== null ? formatDuration(sp.duration_ms) : '-';
      return result ? `${duration} · ${String(result).slice(0, 80)}` : duration;
    }
    if (sp.kind === 'agent') {
      const usage = innerPayload.usage || {};
      const totalTokens = usage.total_tokens !== undefined ? `${usage.total_tokens} tok` : '';
      const duration = sp.duration_ms !== undefined && sp.duration_ms !== null ? formatDuration(sp.duration_ms) : '-';
      return totalTokens ? `${duration} · ${totalTokens}` : duration;
    }
    return sp.duration_ms !== undefined && sp.duration_ms !== null ? formatDuration(sp.duration_ms) : '-';
  }

  function bindSessionRunRows() {
    document.querySelectorAll('tr.expandable-run').forEach(row => {
      row.addEventListener('click', event => {
        if (event.metaKey || event.ctrlKey) {
          navigate('/runs/' + row.dataset.run);
          return;
        }

        const idx = row.dataset.index;
        const detailRow = document.querySelector(`tr.span-detail-row[data-index="${idx}"]`);
        const icon = row.querySelector('.expand-icon');
        if (!detailRow) return;

        if (detailRow.style.display === 'none') {
          detailRow.style.display = 'table-row';
          if (icon) icon.style.transform = 'rotate(45deg)';
        } else {
          detailRow.style.display = 'none';
          if (icon) icon.style.transform = '';
        }
      });

      row.addEventListener('dblclick', () => navigate('/runs/' + row.dataset.run));
    });
  }

  async function renderInfrastructure() {
    app.innerHTML = '<div class="page-header"><h2>Infrastructure</h2></div><p class="empty-state">Loading...</p>';

    infraUnsubscribe = subscribeWS(handleInfraWS);

    try {
      const [ocData, swarmData] = await Promise.all([
        api('/v1/events?event_type=openclaw.snapshot&limit=100'),
        api('/v1/events?event_type=swarm.snapshot&limit=10').catch(() => ({ events: [] })),
      ]);

      mergeOpenClawEvents(ocData.events || []);
      for (const evt of swarmData.events || []) mergeSwarmSnapshot(evt);

      if (isCurrentPath('/infrastructure')) {
        renderInfraGrid();
      }
    } catch (e) {
      if (isCurrentPath('/infrastructure')) {
        app.innerHTML = `<div class="page-header"><h2>Infrastructure</h2></div><p class="empty-state">Error: ${escapeHTML(e.message)}</p>`;
      }
    }
  }

  function handleInfraWS(msg) {
    if (msg.type !== 'message') return;

    const eventType = getEnvelopeType(msg.data);

    if (eventType === 'openclaw.snapshot') {
      mergeOpenClawEvents([msg.data]);
      if (isCurrentPath('/infrastructure')) renderInfraGrid();
      if (isCurrentPath('/agents')) renderAgentVMStrip();
      return;
    }

    if (eventType === 'swarm.snapshot') {
      mergeSwarmSnapshot(msg.data);
      if (isCurrentPath('/infrastructure')) renderInfraGrid();
      renderSwarmStrip_dash();
      return;
    }

    if (eventType === 'swarm.service.snapshot') {
      mergeSwarmServiceSnapshot(msg.data);
      if (isCurrentPath('/infrastructure')) renderInfraGrid();
      renderSwarmStrip_dash();
      return;
    }
  }

  function mergeOpenClawEvents(events) {
    for (const evt of events) {
      const payload = getEnvelopePayload(evt);
      const instance = payload.instance || {};
      if (!instance.name) {
        continue;
      }

      const existing = openclawState.instances[instance.name];
      const nextTS = new Date(getEnvelopeTS(evt) || 0).getTime();
      const currentTS = existing ? new Date(getEnvelopeTS(existing) || 0).getTime() : 0;
      if (!existing || nextTS >= currentTS) {
        openclawState.instances[instance.name] = evt;
      }
    }
  }

  function mergeSwarmSnapshot(evt) {
    const payload = getEnvelopePayload(evt);
    const services = payload.services || [];
    for (const svc of services) {
      if (svc.name) swarmState.services[svc.name] = svc;
    }
  }

  function mergeSwarmServiceSnapshot(evt) {
    const payload = getEnvelopePayload(evt);
    const svc = payload.service;
    if (svc && svc.name) swarmState.services[svc.name] = svc;
  }

  function renderInfraGrid() {
    const vmNames = Object.keys(openclawState.instances).sort();
    const allServices = Object.values(swarmState.services);
    const agentmonServices = allServices.filter(s => s.group === 'agentmon');
    const swarmServices = allServices.filter(s => s.group !== 'agentmon');

    app.innerHTML = `
      <div class="page-header">
        <h2>Infrastructure <span class="live-indicator"><span class="live-dot"></span>Live</span></h2>
      </div>

      <div class="infra-section">
        <p class="infra-section-title">VMs</p>
        ${vmNames.length === 0
          ? '<p class="empty-state">No VM data</p>'
          : `<div class="vm-grid">${vmNames.map(name => renderVMCard(name)).join('')}</div>`
        }
      </div>

      <div class="infra-section">
        <p class="infra-section-title">Swarm Services</p>
        ${swarmServices.length === 0
          ? '<p class="empty-state">No swarm service data</p>'
          : `<div class="service-grid">${swarmServices.map(svc => renderServiceCard(svc)).join('')}</div>`
        }
      </div>

      <div class="infra-section">
        <p class="infra-section-title">Agentmon</p>
        ${agentmonServices.length === 0
          ? '<p class="empty-state">No agentmon service data</p>'
          : `<div class="service-grid">${agentmonServices.map(svc => renderServiceCard(svc)).join('')}</div>`
        }
      </div>
    `;
  }

  function renderVMCard(name) {
    const evt = openclawState.instances[name];
    const payload = getEnvelopePayload(evt);
    const inst = payload.instance || {};
    const host = payload.host || {};
    const guest = payload.guest;
    const issues = payload.issues;

    return `
      <div class="vm-card">
        <div class="vm-card-header">
          <h3>${escapeHTML(inst.name || name)}</h3>
          <div class="vm-status ${host.state === 'running' ? 'running' : 'stopped'}">
            ${host.state === 'running' ? 'Running' : 'Stopped'}
          </div>
        </div>
        <div class="vm-updated">Updated ${escapeHTML(relativeTime(getEnvelopeTS(evt)))}</div>
        <table class="vm-stats">
          <tr><td>Host</td><td>${escapeHTML(inst.host || '-')}</td></tr>
          <tr><td>Domain</td><td>${escapeHTML(inst.domain || '-')}</td></tr>
          <tr><td>vCPUs</td><td>${host.vcpus || '-'}</td></tr>
          <tr><td>Memory</td><td>${escapeHTML(formatBytes(host.memory_kib ? host.memory_kib * 1024 : 0) || '-')}</td></tr>
          <tr><td>Disk</td><td>${escapeHTML(formatBytes(host.disk_actual_bytes) || '-')}</td></tr>
          <tr><td>Autostart</td><td>${host.autostart ? 'Yes' : 'No'}</td></tr>
        </table>
        ${guest ? `
          <div class="vm-card-divider"></div>
          <table class="vm-stats">
            <tr><td>Gateway</td><td style="${guest.service_active ? 'color:var(--success)' : 'color:var(--error)'}">${guest.service_active ? 'Active' : 'Inactive'}</td></tr>
            <tr><td>HTTP</td><td style="${guest.http_status === 200 ? 'color:var(--success)' : 'color:var(--error)'}">${guest.http_status || 'N/A'}</td></tr>
            <tr><td>Version</td><td>${escapeHTML(guest.version || '-')}</td></tr>
            <tr><td>Guest Mem</td><td>${guest.memory_percent !== undefined ? guest.memory_percent.toFixed(1) : '-'}%</td></tr>
            <tr><td>Guest Disk</td><td>${guest.disk_percent !== undefined ? guest.disk_percent.toFixed(1) : '-'}%</td></tr>
            <tr><td>Load</td><td>${guest.load_average !== undefined ? guest.load_average.toFixed(2) : '-'}</td></tr>
            <tr><td>Uptime</td><td>${escapeHTML(guest.service_uptime || '-')}</td></tr>
          </table>
        ` : ''}
        ${issues && Object.values(issues).some(Boolean) ? `
          <div class="vm-card-divider"></div>
          <div class="vm-issues-label">Issues</div>
          <div class="vm-issues">
            ${Object.entries(issues).filter(([, value]) => value).map(([key]) => `
              <span class="issue ${escapeHTML(key)}">${escapeHTML(key.replace(/_/g, ' '))}</span>
            `).join('')}
          </div>
        ` : ''}
      </div>
    `;
  }

  function renderServiceCard(svc) {
    const role = svc.role || 'unknown';
    switch (role) {
      case 'llm-proxy': return renderLLMProxyCard(svc);
      case 'db':        return renderDBCard(svc);
      case 'search':    return renderSearchCard(svc);
      case 'mcp':       return renderMCPCard(svc);
      case 'voice':     return renderVoiceCard(svc);
      case 'automation':return renderAutomationCard(svc);
      case 'api':
      case 'web':       return renderAPICard(svc);
      case 'worker':
      case 'queue':     return renderWorkerCard(svc);
      default:          return renderGenericServiceCard(svc);
    }
  }

  function serviceCardHeader(svc) {
    return `
      <div class="service-card-header">
        <div>
          <div class="service-card-name">${escapeHTML(svc.name)}</div>
          <div class="service-role-tag">${escapeHTML(svc.role || '')}</div>
        </div>
        <span class="service-badge ${escapeHTML(svc.status || 'down')}">${escapeHTML(svc.status || 'down')}</span>
      </div>
    `;
  }

  function serviceStatRow(label, value, valueClass) {
    return `
      <div class="service-stat-row">
        <span class="service-stat-label">${escapeHTML(label)}</span>
        <span class="service-stat-value${valueClass ? ' ' + valueClass : ''}">${value}</span>
      </div>
    `;
  }

  function formatUptime(sec) {
    if (!sec) return '-';
    if (sec < 60) return sec + 's';
    if (sec < 3600) return Math.floor(sec / 60) + 'm';
    if (sec < 86400) return Math.floor(sec / 3600) + 'h ' + Math.floor((sec % 3600) / 60) + 'm';
    return Math.floor(sec / 86400) + 'd ' + Math.floor((sec % 86400) / 3600) + 'h';
  }

  function renderLLMProxyCard(svc) {
    const extra = svc.extra || {};
    const modelCount = extra.model_count;
    const cooldowns = extra.cooldown_count || 0;
    const httpStatus = svc.http_status;
    const httpClass = httpStatus === 200 ? 'ok' : httpStatus ? 'bad' : '';

    return `
      <div class="service-card">
        ${serviceCardHeader(svc)}
        <div style="display:flex;align-items:baseline;gap:0.5rem">
          <span class="llm-model-count">${modelCount !== undefined ? modelCount : '-'}</span>
          <span class="llm-model-label">models</span>
        </div>
        ${cooldowns > 0 ? `<div class="llm-cooldown-banner">⚠ ${cooldowns} model${cooldowns > 1 ? 's' : ''} in cooldown</div>` : ''}
        <div class="service-stats">
          ${serviceStatRow('HTTP', httpStatus ? String(httpStatus) : '-', httpClass)}
          ${serviceStatRow('Uptime', formatUptime(svc.uptime_sec), '')}
          ${serviceStatRow('Container', escapeHTML(svc.container_state || '-'), svc.container_state === 'running' ? 'ok' : 'bad')}
        </div>
      </div>
    `;
  }

  function renderDBCard(svc) {
    const healthClass = svc.health_state === 'healthy' ? 'ok' : svc.health_state === 'unhealthy' ? 'bad' : '';
    return `
      <div class="service-card">
        ${serviceCardHeader(svc)}
        <div class="service-stats">
          ${serviceStatRow('Health', escapeHTML(svc.health_state || 'none'), healthClass)}
          ${serviceStatRow('Uptime', formatUptime(svc.uptime_sec), '')}
          ${serviceStatRow('Container', escapeHTML(svc.container_state || '-'), svc.container_state === 'running' ? 'ok' : 'bad')}
        </div>
      </div>
    `;
  }

  function renderSearchCard(svc) {
    const extra = svc.extra || {};
    const ms = extra.response_ms;
    const httpStatus = svc.http_status;
    const httpClass = httpStatus === 200 ? 'ok' : httpStatus ? 'bad' : '';
    return `
      <div class="service-card">
        ${serviceCardHeader(svc)}
        <div class="service-stats">
          ${serviceStatRow('HTTP', httpStatus ? String(httpStatus) : '-', httpClass)}
          ${ms !== undefined ? serviceStatRow('Response', ms + 'ms', ms < 500 ? 'ok' : 'warn') : ''}
          ${serviceStatRow('Uptime', formatUptime(svc.uptime_sec), '')}
        </div>
      </div>
    `;
  }

  function renderMCPCard(svc) {
    const extra = svc.extra || {};
    const reachable = extra.port_reachable;
    return `
      <div class="service-card">
        ${serviceCardHeader(svc)}
        <div class="service-stats">
          ${reachable !== undefined ? serviceStatRow('Port', reachable ? 'reachable' : 'unreachable', reachable ? 'ok' : 'bad') : ''}
          ${serviceStatRow('Container', escapeHTML(svc.container_state || '-'), svc.container_state === 'running' ? 'ok' : 'bad')}
          ${serviceStatRow('Uptime', formatUptime(svc.uptime_sec), '')}
        </div>
      </div>
    `;
  }

  function renderVoiceCard(svc) {
    const healthClass = svc.health_state === 'healthy' ? 'ok' : svc.health_state === 'unhealthy' ? 'bad' : '';
    return `
      <div class="service-card">
        ${serviceCardHeader(svc)}
        <div class="service-stats">
          ${serviceStatRow('Health', escapeHTML(svc.health_state || 'none'), healthClass)}
          ${serviceStatRow('Container', escapeHTML(svc.container_state || '-'), svc.container_state === 'running' ? 'ok' : 'bad')}
          ${serviceStatRow('Uptime', formatUptime(svc.uptime_sec), '')}
        </div>
      </div>
    `;
  }

  function renderAutomationCard(svc) {
    const healthClass = svc.health_state === 'healthy' ? 'ok' : svc.health_state === 'unhealthy' ? 'bad' : '';
    return `
      <div class="service-card">
        ${serviceCardHeader(svc)}
        <div class="service-stats">
          ${serviceStatRow('Health', escapeHTML(svc.health_state || 'none'), healthClass)}
          ${serviceStatRow('Container', escapeHTML(svc.container_state || '-'), svc.container_state === 'running' ? 'ok' : 'bad')}
          ${serviceStatRow('Uptime', formatUptime(svc.uptime_sec), '')}
        </div>
      </div>
    `;
  }

  function renderAPICard(svc) {
    const httpStatus = svc.http_status;
    const httpClass = httpStatus === 200 ? 'ok' : httpStatus ? 'bad' : '';
    return `
      <div class="service-card">
        ${serviceCardHeader(svc)}
        <div class="service-stats">
          ${serviceStatRow('HTTP', httpStatus ? String(httpStatus) : '-', httpClass)}
          ${serviceStatRow('Uptime', formatUptime(svc.uptime_sec), '')}
          ${serviceStatRow('Container', escapeHTML(svc.container_state || '-'), svc.container_state === 'running' ? 'ok' : 'bad')}
        </div>
      </div>
    `;
  }

  function renderWorkerCard(svc) {
    return `
      <div class="service-card">
        ${serviceCardHeader(svc)}
        <div class="service-stats">
          ${serviceStatRow('Container', escapeHTML(svc.container_state || '-'), svc.container_state === 'running' ? 'ok' : 'bad')}
          ${serviceStatRow('Uptime', formatUptime(svc.uptime_sec), '')}
        </div>
      </div>
    `;
  }

  function renderGenericServiceCard(svc) {
    return `
      <div class="service-card">
        ${serviceCardHeader(svc)}
        <div class="service-stats">
          ${serviceStatRow('Container', escapeHTML(svc.container_state || '-'), svc.container_state === 'running' ? 'ok' : 'bad')}
          ${serviceStatRow('Uptime', formatUptime(svc.uptime_sec), '')}
        </div>
      </div>
    `;
  }

  function createAgentsState() {
    return {
      agents: {},
      stats: { messages: 0, tools: 0, errors: 0, toolCounts: {} },
      dbStats: { messages: 0, tools: 0, errors: 0 },
      viewMode: 'overview',
      selectedAgentKey: '',
      timerInterval: null,
    };
  }

  function getVMStatus() {
    const names = ['zap', 'orb', 'sun'];
    return names.map(name => {
      const snapshot = openclawState.instances[name];
      const payload = snapshot ? getEnvelopePayload(snapshot) : {};
      const host = payload.host || {};
      return {
        name,
        active: host.state === 'running',
      };
    });
  }

  function normalizeAgentKey(value) {
    return String(value || '')
      .trim()
      .toLowerCase()
      .replace(/[^a-z0-9._-]+/g, '-');
  }

  function getAgentIdentity(evt) {
    const source = getEnvelopeSource(evt);
    const correlation = getEnvelopeCorrelation(evt);
    const framework = source.framework || evt.source_framework || 'unknown';
    const host = source.host || '';
    const clientID = source.client_id || '';
    const sessionID = correlation.session_id || '';
    const name = clientID || host || framework || sessionID || 'unknown';
    const key = normalizeAgentKey(clientID || host || sessionID || framework || 'unknown');
    return {
      key,
      name,
      framework,
      host,
      clientID,
      sessionID,
    };
  }

  function ensureAgentBucket(evt) {
    const identity = getAgentIdentity(evt);
    if (!identity.key) {
      return null;
    }

    if (!agentsState.agents[identity.key]) {
      agentsState.agents[identity.key] = {
        key: identity.key,
        name: identity.name,
        framework: identity.framework,
        host: identity.host,
        clientID: identity.clientID,
        sessions: {},
        operations: {},
        events: [],
        eventIDs: new Set(),
        lastSeenAt: 0,
        liveLoaded: false,
        liveLoading: false,
      };
    }

    const agent = agentsState.agents[identity.key];
    agent.name = identity.name || agent.name || identity.key;
    agent.framework = identity.framework || agent.framework;
    agent.host = identity.host || agent.host;
    agent.clientID = identity.clientID || agent.clientID;
    return agent;
  }

  function getSortedAgentKeys() {
    return Object.keys(agentsState.agents).sort((a, b) => {
      const left = agentsState.agents[a];
      const right = agentsState.agents[b];
      const leftOnline = isAgentOnline(left);
      const rightOnline = isAgentOnline(right);

      if (leftOnline !== rightOnline) {
        return leftOnline ? -1 : 1;
      }
      return (left.name || left.key).localeCompare(right.name || right.key);
    });
  }

  function ensureSelectedAgentKey() {
    const keys = getSortedAgentKeys();
    if (keys.length === 0) {
      agentsState.selectedAgentKey = '';
      return '';
    }
    if (!agentsState.selectedAgentKey || !agentsState.agents[agentsState.selectedAgentKey]) {
      agentsState.selectedAgentKey = keys[0];
    }
    return agentsState.selectedAgentKey;
  }

  function setAgentsViewMode(mode) {
    agentsState.viewMode = mode === 'live' ? 'live' : 'overview';
    renderAgentsContent();
    if (agentsState.viewMode === 'live') {
      void loadSelectedAgentLiveData();
    }
  }

  function selectAgent(key, nextMode) {
    if (!key || !agentsState.agents[key]) return;
    agentsState.selectedAgentKey = key;
    if (nextMode) {
      agentsState.viewMode = nextMode;
    }
    renderAgentsContent();
    if (agentsState.viewMode === 'live') {
      void loadSelectedAgentLiveData();
    }
  }

  function isOpenClawVM(agent) {
    const key = normalizeAgentKey(agent && agent.name);
    return ['zap', 'orb', 'sun'].includes(key);
  }

  function isAgentOnline(agent) {
    if (!agent) {
      return false;
    }

    if (isOpenClawVM(agent)) {
      const vmStatus = getVMStatus().find(v => v.name === normalizeAgentKey(agent.name));
      if (vmStatus) {
        return vmStatus.active;
      }
    }

    const hasSessions = Object.keys(agent.sessions).length > 0;
    const hasOps = Object.keys(agent.operations).length > 0;
    const seenRecently = agent.lastSeenAt > 0 && (Date.now() - agent.lastSeenAt) < 300000;
    return hasSessions || hasOps || seenRecently;
  }

  function getAgentBucket(evt) {
    return ensureAgentBucket(evt);
  }

  function processAgentEvent(evt) {
    const agent = getAgentBucket(evt);
    if (!agent) return;

    const eventType = getEnvelopeType(evt);
    const correlation = getEnvelopeCorrelation(evt);
    const attrs = getEnvelopeAttributes(evt);
    const ts = new Date(getEnvelopeTS(evt)).getTime();
    agent.lastSeenAt = Number.isFinite(ts) ? ts : Date.now();

    if (eventType === 'session.start' && correlation.session_id) {
      agent.sessions[correlation.session_id] = { ts: getEnvelopeTS(evt) };
    }
    if (eventType === 'session.end' && correlation.session_id) {
      delete agent.sessions[correlation.session_id];
    }

    if (eventType === 'span.start' && correlation.span_id) {
      agent.operations['s:' + correlation.span_id] = {
        type: 'span',
        name: attrs.name || attrs.span_kind || 'unknown',
        kind: attrs.span_kind || '',
        subType: attrs.type || '',
        startedAt: new Date(getEnvelopeTS(evt)).getTime() || Date.now(),
      };
    }
    if (eventType === 'span.end' && correlation.span_id) {
      delete agent.operations['s:' + correlation.span_id];
    }

    if (eventType === 'run.start' && correlation.run_id) {
      agent.operations['r:' + correlation.run_id] = {
        type: 'run',
        name: 'Thinking…',
        kind: 'run',
        startedAt: new Date(getEnvelopeTS(evt)).getTime() || Date.now(),
      };
    }
    if (eventType === 'run.end' && correlation.run_id) {
      delete agent.operations['r:' + correlation.run_id];
    }

    const id = getRecordID(evt);
    if (id && !agent.eventIDs.has(id)) {
      agent.eventIDs.add(id);
      agent.events.push(evt);
      while (agent.events.length > 100) {
        const removed = agent.events.shift();
        agent.eventIDs.delete(getRecordID(removed));
      }
    }
  }

  function getAgentDisplayOps(agent) {
    const now = Date.now();
    const ops = Object.values(agent.operations).filter(op => (now - op.startedAt) < 300000);
    const hasSpecificSpans = ops.some(op => op.kind && op.kind !== 'run');
    return hasSpecificSpans ? ops.filter(op => op.kind && op.kind !== 'run') : ops;
  }

  function isAgentTimelineEvent(evt) {
    const eventType = getEnvelopeType(evt);
    return [
      'session.start',
      'session.end',
      'run.start',
      'run.end',
      'span.start',
      'span.end',
      'error',
    ].includes(eventType);
  }

  async function renderAgents() {
    agentsState = createAgentsState();

    app.innerHTML = `
      <div class="page-header">
        <h2>Agents <span class="live-indicator"><span class="live-dot"></span>Live</span></h2>
      </div>
      <div class="agents-toolbar">
        <div class="view-toggle" id="agents-view-toggle">
          <button class="view-toggle-btn active" data-mode="overview" type="button">Overview</button>
          <button class="view-toggle-btn" data-mode="live" type="button">Live</button>
        </div>
      </div>
      <div class="agents-summary-row" id="agents-summary"></div>
      <div id="agents-content"><p class="empty-state">Loading...</p></div>
    `;

    bindAgentViewToggle();

    try {
      const [snapshots, events, summaryData] = await Promise.all([
        api('/v1/events?event_type=openclaw.snapshot&limit=100').catch(() => ({ events: [] })),
        api('/v1/events?limit=300'),
        api('/v1/stats/summary').catch(() => null),
      ]);

      if (!isCurrentPath('/agents')) return;

      if (summaryData) {
        agentsState.dbStats.messages = summaryData.runs_today || 0;
        agentsState.dbStats.tools = summaryData.tool_calls_today || 0;
        agentsState.dbStats.errors = summaryData.errors_today || 0;
      }

      mergeOpenClawEvents(snapshots.events || []);
      addAgentEvents((events.events || []).filter(isAgentTimelineEvent).slice().reverse());
      renderAgentsContent();
    } catch (e) {
      document.getElementById('agents-content').innerHTML =
        `<p class="empty-state">Error loading agent activity: ${escapeHTML(e.message)}</p>`;
    }

    agentsState.timerInterval = setInterval(updateAgentTimers, 1000);
    agentsUnsubscribe = subscribeWS(handleAgentsWS);
  }

  function bindAgentViewToggle() {
    const root = document.getElementById('agents-view-toggle');
    if (!root) return;
    root.querySelectorAll('[data-mode]').forEach(button => {
      button.addEventListener('click', () => {
        setAgentsViewMode(button.dataset.mode || 'overview');
      });
    });
  }

  function updateAgentViewToggle() {
    const root = document.getElementById('agents-view-toggle');
    if (!root) return;
    root.querySelectorAll('[data-mode]').forEach(button => {
      button.classList.toggle('active', button.dataset.mode === agentsState.viewMode);
    });
  }

  function renderAgentsContent() {
    renderAgentSummary();
    updateAgentViewToggle();
    if (agentsState.viewMode === 'live') {
      renderAgentsLive();
      return;
    }
    renderAgentLanes();
  }

  async function loadSelectedAgentLiveData() {
    const selectedKey = ensureSelectedAgentKey();
    if (!selectedKey) return;

    const agent = agentsState.agents[selectedKey];
    if (!agent || agent.liveLoaded || agent.liveLoading || !agent.clientID || !agent.framework) {
      return;
    }

    agent.liveLoading = true;
    try {
      const params = new URLSearchParams();
      params.set('client_id', agent.clientID);
      params.set('framework', agent.framework);
      params.set('limit', '250');
      const data = await api('/v1/agents/live?' + params.toString());
      addAgentEvents((data.events || []).slice().reverse());
      agent.liveLoaded = true;
    } catch (err) {
      console.error('Failed to load live agent context:', err);
    } finally {
      agent.liveLoading = false;
      if (isCurrentPath('/agents') && agentsState.viewMode === 'live' && agentsState.selectedAgentKey === selectedKey) {
        renderAgentsContent();
      }
    }
  }

  function renderAgentLanes() {
    const contentEl = document.getElementById('agents-content');
    if (!contentEl) return;
    contentEl.innerHTML = '<div class="agent-lanes" id="agents-lanes"></div>';

    const lanesEl = document.getElementById('agents-lanes');
    if (!lanesEl) return;

    const agentKeys = getSortedAgentKeys();

    if (agentKeys.length === 0) {
      lanesEl.innerHTML = '<p class="empty-state">No recent agent activity</p>';
      return;
    }

    lanesEl.innerHTML = agentKeys.map(key => {
      const agent = agentsState.agents[key];
      const isOnline = isAgentOnline(agent);
      const sessionCount = Object.keys(agent.sessions).length;
      const ops = getAgentDisplayOps(agent);
      const subagentCount = ops.filter(op => op.kind === 'agent' || op.subType === 'subagent').length;

      const statusClass = sessionCount > 0 ? ' has-sessions' : '';
      const statusText = !isOnline ? 'offline'
        : subagentCount > 0 ? subagentCount + ' subagent' + (subagentCount > 1 ? 's' : '')
        : sessionCount > 0 ? sessionCount + ' session' + (sessionCount > 1 ? 's' : '')
        : 'idle';

      const opsHTML = ops.length > 0 ? `<div class="active-ops">${ops.map(op => {
        const elapsed = Math.floor((Date.now() - op.startedAt) / 1000);
        const stale = elapsed > 300;
        const kindClass = op.kind === 'agent' || op.subType === 'subagent' ? ' subagent' : '';
        return `
          <div class="active-op${stale ? ' stale' : ''}${kindClass}">
            <span class="active-op-dot"></span>
            <span class="active-op-name">${escapeHTML(op.name)}</span>
            <span class="active-op-time" data-start="${op.startedAt}">${formatElapsed(elapsed)}</span>
            ${stale ? '<span class="active-op-stale">(stale?)</span>' : ''}
          </div>`;
      }).join('')}</div>` : '';

      const recent = agent.events.slice(-40).reverse();
      const eventsHTML = recent.length > 0 ? recent.map(evt => {
        const eventType = getEnvelopeType(evt);
        const details = getEventDetails(evt);
        const detailHTML = details ? `<div class="timeline-detail">${escapeHTML(details)}</div>` : '';
        const expandHTML = details ? '<button class="timeline-expand-hint" type="button">details</button>' : '';

        return `
          <div class="timeline-event">
            <div class="timeline-event-header">
              ${getEventIcon(eventType)}
              <span class="timeline-event-type">${escapeHTML(getEventLabel(eventType))}</span>
              <span class="timeline-event-time">${escapeHTML(new Date(getEnvelopeTS(evt)).toLocaleTimeString())}</span>
            </div>
            ${getEventBody(evt)}
            ${expandHTML}
            ${detailHTML}
          </div>`;
      }).join('') : '<p class="empty-state">No recent activity</p>';

      return `
        <div class="agent-lane" data-agent-key="${escapeHTML(key)}">
          <div class="agent-lane-header">
            <div>
              <div class="agent-lane-name">
              <span class="agent-lane-dot ${isOnline ? 'online' : 'offline'}"></span>
              ${escapeHTML(agent.name || key)}
              </div>
              <div class="agent-lane-meta">${escapeHTML(agent.framework || 'unknown')}${agent.host && agent.host !== agent.name ? ' · ' + escapeHTML(agent.host) : ''}</div>
            </div>
            <span class="agent-lane-status${statusClass}">${statusText}</span>
          </div>
          ${opsHTML}
          <div class="agent-lane-events">${eventsHTML}</div>
        </div>`;
    }).join('');

    lanesEl.querySelectorAll('.agent-lane[data-agent-key]').forEach(lane => {
      lane.addEventListener('click', () => {
        selectAgent(lane.dataset.agentKey || '', 'live');
      });
    });
    lanesEl.querySelectorAll('.timeline-expand-hint').forEach(button => {
      button.addEventListener('click', event => {
        event.stopPropagation();
        button.parentElement.classList.toggle('expanded');
      });
    });
  }

  function formatElapsed(seconds) {
    if (seconds < 60) return seconds + 's';
    if (seconds < 3600) return Math.floor(seconds / 60) + 'm ' + (seconds % 60) + 's';
    return Math.floor(seconds / 3600) + 'h ' + Math.floor((seconds % 3600) / 60) + 'm';
  }

  function renderAgentSummary() {
    const el = document.getElementById('agents-summary');
    if (!el) return;
    const s = agentsState.dbStats;
    const liveAgents = getSortedAgentKeys().filter(key => isAgentOnline(agentsState.agents[key])).length;
    const liveSubagents = getSortedAgentKeys().reduce((count, key) => {
      const agent = agentsState.agents[key];
      return count + Object.values(agent.operations).filter(op => op.kind === 'agent' || op.subType === 'subagent').length;
    }, 0);
    el.innerHTML = `
      <div class="agents-summary-stat">Live Agents <span class="value">${liveAgents}</span></div>
      <div class="agents-summary-stat">Active Subagents <span class="value">${liveSubagents}</span></div>
      <div class="agents-summary-stat">Runs Today <span class="value">${s.messages}</span></div>
      <div class="agents-summary-stat">Tool Calls <span class="value">${s.tools}</span></div>
      <div class="agents-summary-stat">Errors <span class="value">${s.errors}</span></div>
    `;
  }

  function getAgentLabel(agent) {
    if (!agent) return 'Unknown';
    return agent.name || agent.host || agent.framework || agent.key || 'Unknown';
  }

  function getAgentLiveSummary(agent) {
    const recent = agent.events.slice().reverse();
    const activeOps = getAgentDisplayOps(agent);
    const sessionIDs = Object.keys(agent.sessions);
    const live = {
      sessionIDs,
      activeOps,
      activeSubagents: activeOps.filter(op => op.kind === 'agent' || op.subType === 'subagent'),
      activeTools: activeOps.filter(op => op.kind === 'tool'),
      latestPrompt: '',
      latestRunStatus: '',
      latestModel: '',
      latestError: '',
      latestUsage: null,
      latestContextWindow: null,
    };

    for (const evt of recent) {
      const eventType = getEnvelopeType(evt);
      const payload = getEnvelopePayload(evt);
      if (!live.latestPrompt && eventType === 'run.start') {
        live.latestPrompt = payload.prompt_preview || payload.message_preview || payload.message || '';
      }
      if (!live.latestRunStatus && eventType === 'run.end') {
        live.latestRunStatus = payload.status || '';
        live.latestModel = payload.model || '';
        live.latestUsage = payload.usage || null;
        live.latestContextWindow = payload.context_window || null;
      }
      if (!live.latestUsage && eventType === 'metric.snapshot' && payload.metrics) {
        live.latestUsage = payload.metrics.usage || null;
        live.latestModel = live.latestModel || payload.metrics.model || '';
      }
      if (!live.latestError && eventType === 'error') {
        const errPayload = payload.error || {};
        live.latestError = errPayload.message || payload.message || '';
      }
      if (live.latestPrompt && live.latestRunStatus && live.latestError) {
        break;
      }
    }

    return live;
  }

  function formatCount(value) {
    if (value === undefined || value === null || value === '') return '-';
    return String(value);
  }

  function formatCost(value) {
    if (value === undefined || value === null || value === '') return '-';
    const num = Number(value);
    if (!Number.isFinite(num)) return String(value);
    return '$' + num.toFixed(4);
  }

  function buildLiveEventContext(evt) {
    const eventType = getEnvelopeType(evt);
    const payload = getEnvelopePayload(evt);
    const attrs = getEnvelopeAttributes(evt);
    const correlation = getEnvelopeCorrelation(evt);
    const parts = [];

    if ((eventType === 'span.start' || eventType === 'span.end') && attrs.span_kind === 'tool') {
      if (payload.input) {
        parts.push(`<div class="live-detail-row"><span class="k">input</span><span class="v">${escapeHTML(typeof payload.input === 'string' ? payload.input : JSON.stringify(payload.input))}</span></div>`);
      }
      if (payload.result_preview) {
        parts.push(`<div class="live-detail-row"><span class="k">result</span><span class="v">${escapeHTML(String(payload.result_preview))}</span></div>`);
      }
    }
    if ((eventType === 'span.start' || eventType === 'span.end') && (attrs.span_kind === 'agent' || attrs.type === 'subagent')) {
      if (payload.prompt_preview) {
        parts.push(`<div class="live-detail-row"><span class="k">prompt</span><span class="v">${escapeHTML(String(payload.prompt_preview))}</span></div>`);
      }
      if (payload.usage && payload.usage.total_tokens !== undefined) {
        parts.push(`<div class="live-detail-row"><span class="k">tokens</span><span class="v">${escapeHTML(formatCount(payload.usage.total_tokens))}</span></div>`);
      }
      if (payload.usage && payload.usage.total_cost !== undefined) {
        parts.push(`<div class="live-detail-row"><span class="k">cost</span><span class="v">${escapeHTML(formatCost(payload.usage.total_cost))}</span></div>`);
      }
    }
    if (eventType === 'run.start') {
      const preview = payload.prompt_preview || payload.message_preview || payload.message || '';
      if (preview) {
        parts.push(`<div class="live-detail-row"><span class="k">prompt</span><span class="v">${escapeHTML(String(preview))}</span></div>`);
      }
    }
    if (eventType === 'run.end') {
      if (payload.model) {
        parts.push(`<div class="live-detail-row"><span class="k">model</span><span class="v">${escapeHTML(String(payload.model))}</span></div>`);
      }
      if (payload.usage && payload.usage.total_tokens !== undefined) {
        parts.push(`<div class="live-detail-row"><span class="k">tokens</span><span class="v">${escapeHTML(formatCount(payload.usage.total_tokens))}</span></div>`);
      }
      if (payload.duration_ms !== undefined) {
        parts.push(`<div class="live-detail-row"><span class="k">duration</span><span class="v">${escapeHTML(formatDuration(payload.duration_ms))}</span></div>`);
      }
    }
    if (eventType === 'metric.snapshot' && payload.metrics) {
      if (payload.metrics.model) {
        parts.push(`<div class="live-detail-row"><span class="k">model</span><span class="v">${escapeHTML(String(payload.metrics.model))}</span></div>`);
      }
      if (payload.metrics.usage && payload.metrics.usage.total_tokens !== undefined) {
        parts.push(`<div class="live-detail-row"><span class="k">tokens</span><span class="v">${escapeHTML(formatCount(payload.metrics.usage.total_tokens))}</span></div>`);
      }
      if (payload.metrics.usage && payload.metrics.usage.total_cost !== undefined) {
        parts.push(`<div class="live-detail-row"><span class="k">cost</span><span class="v">${escapeHTML(formatCost(payload.metrics.usage.total_cost))}</span></div>`);
      }
    }
    if (eventType === 'error') {
      const errPayload = payload.error || {};
      if (errPayload.type) {
        parts.push(`<div class="live-detail-row"><span class="k">type</span><span class="v">${escapeHTML(String(errPayload.type))}</span></div>`);
      }
    }

    const ids = [];
    if (correlation.session_id) ids.push(`session ${correlation.session_id}`);
    if (correlation.run_id) ids.push(`run ${correlation.run_id}`);
    if (correlation.span_id) ids.push(`span ${correlation.span_id}`);
    if (ids.length > 0) {
      parts.push(`<div class="live-detail-row ids"><span class="k">ids</span><span class="v">${escapeHTML(ids.join(' · '))}</span></div>`);
    }

    return parts.join('');
  }

  function getRunGroupLabel(runID, events) {
    const runStart = events.find(evt => getEnvelopeType(evt) === 'run.start');
    if (!runStart) {
      return runID ? `Run ${runID.slice(0, 12)}...` : 'Session activity';
    }
    const payload = getEnvelopePayload(runStart);
    const preview = payload.prompt_preview || payload.message_preview || payload.message || '';
    if (preview) {
      return preview.length > 72 ? preview.slice(0, 72) + '...' : preview;
    }
    return runID ? `Run ${runID.slice(0, 12)}...` : 'Session activity';
  }

  function groupAgentEventsByRun(events) {
    const groups = [];
    const byRun = new Map();

    for (const evt of events) {
      const correlation = getEnvelopeCorrelation(evt);
      const runID = correlation.run_id || '';
      const key = runID || `session:${correlation.session_id || 'unknown'}`;
      if (!byRun.has(key)) {
        const group = {
          key,
          runID,
          sessionID: correlation.session_id || '',
          events: [],
          subagents: new Set(),
          tools: new Set(),
        };
        byRun.set(key, group);
        groups.push(group);
      }

      const group = byRun.get(key);
      group.events.push(evt);
      const attrs = getEnvelopeAttributes(evt);
      if (attrs.span_kind === 'agent' || attrs.type === 'subagent') {
        group.subagents.add(attrs.name || 'unknown');
      }
      if (attrs.span_kind === 'tool' && attrs.name) {
        group.tools.add(attrs.name);
      }
    }

    return groups;
  }

  function renderAgentsLive() {
    const contentEl = document.getElementById('agents-content');
    if (!contentEl) return;

    const agentKeys = getSortedAgentKeys();
    const selectedKey = ensureSelectedAgentKey();
    if (!selectedKey || agentKeys.length === 0) {
      contentEl.innerHTML = '<p class="empty-state">No recent agent activity</p>';
      return;
    }

    const selected = agentsState.agents[selectedKey];
    const summary = getAgentLiveSummary(selected);
    const recent = selected.events.slice(-80).reverse();
    const runGroups = groupAgentEventsByRun(recent);

    contentEl.innerHTML = `
      <div class="agents-live-layout">
        <aside class="agents-live-sidebar">
          <div class="section-title">Agents</div>
          <div class="agent-picker" id="agent-picker">
            ${agentKeys.map(key => {
              const agent = agentsState.agents[key];
              const active = key === selectedKey ? ' active' : '';
              const online = isAgentOnline(agent) ? 'online' : 'offline';
              const sessions = Object.keys(agent.sessions).length;
              const ops = getAgentDisplayOps(agent).length;
              return `
                <button class="agent-picker-item${active}" data-agent-key="${escapeHTML(key)}" type="button">
                  <span class="agent-picker-dot ${online}"></span>
                  <span class="agent-picker-main">
                    <span class="agent-picker-name">${escapeHTML(getAgentLabel(agent))}</span>
                    <span class="agent-picker-meta">${escapeHTML(agent.framework || 'unknown')} · ${sessions} sessions · ${ops} ops</span>
                  </span>
                </button>`;
            }).join('')}
          </div>
        </aside>
        <section class="agents-live-main">
          <div class="agents-live-header">
            <div>
              <div class="agent-lane-name"><span class="agent-lane-dot ${isAgentOnline(selected) ? 'online' : 'offline'}"></span>${escapeHTML(getAgentLabel(selected))}</div>
              <div class="agent-lane-meta">${escapeHTML(selected.framework || 'unknown')}${selected.host && selected.host !== selected.name ? ' · ' + escapeHTML(selected.host) : ''}</div>
            </div>
            <div class="agents-live-badges">
              <span class="agents-live-badge">${summary.sessionIDs.length} sessions</span>
              <span class="agents-live-badge">${summary.activeSubagents.length} subagents</span>
              <span class="agents-live-badge">${summary.activeTools.length} tools</span>
            </div>
          </div>
          <div class="agents-live-cards">
            <div class="agents-live-card">
              <div class="agents-live-card-title">Current State</div>
              <div class="live-kv"><span>Active subagents</span><strong>${escapeHTML(summary.activeSubagents.map(op => op.name).join(', ') || '-')}</strong></div>
              <div class="live-kv"><span>Active tools</span><strong>${escapeHTML(summary.activeTools.map(op => op.name).join(', ') || '-')}</strong></div>
              <div class="live-kv"><span>Latest prompt</span><strong>${escapeHTML(summary.latestPrompt || '-')}</strong></div>
              <div class="live-kv"><span>Run status</span><strong>${escapeHTML(summary.latestRunStatus || 'in_progress')}</strong></div>
              <div class="live-kv"><span>Model</span><strong>${escapeHTML(summary.latestModel || '-')}</strong></div>
              <div class="live-kv"><span>Last error</span><strong>${escapeHTML(summary.latestError || '-')}</strong></div>
            </div>
            <div class="agents-live-card">
              <div class="agents-live-card-title">Usage</div>
              <div class="live-kv"><span>Total tokens</span><strong>${escapeHTML(formatCount(summary.latestUsage && summary.latestUsage.total_tokens))}</strong></div>
              <div class="live-kv"><span>Input tokens</span><strong>${escapeHTML(formatCount(summary.latestUsage && summary.latestUsage.input_tokens))}</strong></div>
              <div class="live-kv"><span>Output tokens</span><strong>${escapeHTML(formatCount(summary.latestUsage && summary.latestUsage.output_tokens))}</strong></div>
              <div class="live-kv"><span>Total cost</span><strong>${escapeHTML(formatCost(summary.latestUsage && summary.latestUsage.total_cost))}</strong></div>
            </div>
            <div class="agents-live-card">
              <div class="agents-live-card-title">Session Context</div>
              <div class="live-kv"><span>Session IDs</span><strong>${escapeHTML(summary.sessionIDs.join(', ') || '-')}</strong></div>
              <div class="live-kv"><span>Window input</span><strong>${escapeHTML(formatCount(summary.latestContextWindow && summary.latestContextWindow.input_tokens))}</strong></div>
              <div class="live-kv"><span>Window output</span><strong>${escapeHTML(formatCount(summary.latestContextWindow && summary.latestContextWindow.output_tokens))}</strong></div>
              <div class="live-kv"><span>Remaining</span><strong>${escapeHTML(formatCount(summary.latestContextWindow && (summary.latestContextWindow.tokens_remaining ?? summary.latestContextWindow.used_tokens)))}</strong></div>
            </div>
          </div>
          <div class="agents-live-timeline">
            ${runGroups.length > 0 ? runGroups.map(group => `
              <section class="live-run-group">
                <div class="live-run-group-header">
                  <div class="live-run-group-title">${escapeHTML(getRunGroupLabel(group.runID, group.events))}</div>
                  <div class="live-run-group-meta">
                    <span>${escapeHTML(group.runID ? `run ${group.runID.slice(0, 12)}...` : 'session-only')}</span>
                    <span>${escapeHTML(group.subagents.size > 0 ? `${group.subagents.size} subagents` : '0 subagents')}</span>
                    <span>${escapeHTML(group.tools.size > 0 ? `${group.tools.size} tools` : '0 tools')}</span>
                  </div>
                </div>
                <div class="live-run-events">
                  ${group.events.map(evt => `
                    <div class="timeline-event live-event">
                      <div class="timeline-event-header">
                        ${getEventIcon(getEnvelopeType(evt))}
                        <span class="timeline-event-type">${escapeHTML(getEventLabel(getEnvelopeType(evt)))}</span>
                        <span class="timeline-event-time">${escapeHTML(new Date(getEnvelopeTS(evt)).toLocaleTimeString())}</span>
                      </div>
                      ${getEventBody(evt)}
                      <div class="live-detail-grid">${buildLiveEventContext(evt)}</div>
                    </div>`).join('')}
                </div>
              </section>
            `).join('') : '<p class="empty-state">No recent activity</p>'}
          </div>
        </section>
      </div>
    `;

    contentEl.querySelectorAll('[data-agent-key]').forEach(button => {
      button.addEventListener('click', () => selectAgent(button.dataset.agentKey || '', 'live'));
    });
  }

  function renderAgentVMStrip() {
    // VM online/offline state is shown in each lane header via getVMStatus().
    // Re-render lanes to pick up the updated openclawState.
    renderAgentsContent();
  }

  function handleAgentsWS(msg) {
    if (msg.type !== 'message') return;

    const eventType = getEnvelopeType(msg.data);
    if (eventType === 'openclaw.snapshot') {
      mergeOpenClawEvents([msg.data]);
      renderAgentsContent();
      return;
    }
    if (!isAgentTimelineEvent(msg.data)) return;

    if (eventType === 'run.start') agentsState.dbStats.messages++;
    else if (eventType === 'span.end') {
      const attrs = getEnvelopeAttributes(msg.data);
      if (attrs.span_kind === 'tool') agentsState.dbStats.tools++;
    } else if (eventType === 'error') agentsState.dbStats.errors++;

    addAgentEvents([msg.data]);
    renderAgentsContent();
  }

  function updateAgentTimers() {
    document.querySelectorAll('.active-op-time[data-start]').forEach(el => {
      const start = parseInt(el.dataset.start, 10);
      if (!start) return;
      const elapsed = Math.floor((Date.now() - start) / 1000);
      el.textContent = formatElapsed(elapsed);

      const op = el.closest('.active-op');
      if (op && elapsed > 300 && !op.classList.contains('stale')) {
        op.classList.add('stale');
        if (!op.querySelector('.active-op-stale')) {
          op.insertAdjacentHTML('beforeend', '<span class="active-op-stale">(stale?)</span>');
        }
      }
    });
  }

  function addAgentEvents(events) {
    let changed = false;

    for (const evt of events) {
      const id = getRecordID(evt);
      const agent = getAgentBucket(evt);
      if (!id || !agent || agent.eventIDs.has(id)) continue;
      processAgentEvent(evt);
      changed = true;
    }

    if (changed) {
      for (const agent of Object.values(agentsState.agents)) {
        agent.events.sort((a, b) => new Date(getEnvelopeTS(a)).getTime() - new Date(getEnvelopeTS(b)).getTime());
      }
      recomputeAgentStats();
    }
  }

  function recomputeAgentStats() {
    const stats = { messages: 0, tools: 0, errors: 0, toolCounts: {} };

    for (const agent of Object.values(agentsState.agents)) {
      for (const evt of agent.events) {
        const eventType = getEnvelopeType(evt);
        const attrs = getEnvelopeAttributes(evt);

        if (eventType === 'run.start' || eventType === 'run.end') stats.messages++;
        if (eventType === 'span.end' && attrs.span_kind === 'tool') {
          stats.tools++;
          const toolName = attrs.name || 'unknown';
          stats.toolCounts[toolName] = (stats.toolCounts[toolName] || 0) + 1;
        }
        if (eventType === 'error') stats.errors++;
      }
    }

    agentsState.stats = stats;
  }

  function getEventIcon(eventType) {
    switch (eventType) {
      case 'run.start':
        return '<div class="event-icon message-in">&#8595;</div>';
      case 'run.end':
        return '<div class="event-icon message-out">&#8593;</div>';
      case 'span.start':
      case 'span.end':
        return '<div class="event-icon tool">&#9881;</div>';
      case 'error':
        return '<div class="event-icon error">!</div>';
      case 'session.start':
      case 'session.end':
        return '<div class="event-icon session">&#9675;</div>';
      default:
        return '<div class="event-icon internal">&#183;</div>';
    }
  }

  function getEventLabel(eventType) {
    const labels = {
      'session.start': 'Session Started',
      'session.end': 'Session Ended',
      'run.start': 'Message Received',
      'run.end': 'Response Sent',
      'span.start': 'Span Started',
      'span.end': 'Span Completed',
      'error': 'Error',
      'metric.snapshot': 'Metric',
    };
    return labels[eventType] || eventType;
  }

  function getVMName(evt) {
    return getAgentIdentity(evt).name || 'unknown';
  }

  function getVMClassName(vmName) {
    const normalized = String(vmName || 'unknown').toLowerCase();
    return ['zap', 'orb', 'sun'].includes(normalized) ? normalized : 'unknown';
  }

  function getEventBody(evt) {
    const eventType = getEnvelopeType(evt);
    const payload = getEnvelopePayload(evt);
    const attrs = getEnvelopeAttributes(evt);
    const correlation = getEnvelopeCorrelation(evt);

    if (eventType === 'span.start' || eventType === 'span.end') {
      const name = attrs.name || attrs.span_kind || 'unknown span';
      const duration = payload.duration_ms !== undefined && payload.duration_ms !== null
        ? ` <span class="timeline-duration">${escapeHTML(formatDuration(payload.duration_ms))}</span>`
        : '';
      const detailClass = attrs.span_kind === 'agent' || attrs.type === 'subagent' ? ' subagent-name' : ' tool-name';
      const prefix = attrs.span_kind === 'agent' || attrs.type === 'subagent' ? 'subagent ' : '';
      return `<div class="timeline-event-body${detailClass}">${escapeHTML(prefix + name)}${duration}</div>`;
    }

    if (eventType === 'run.start') {
      const preview = payload.prompt_preview || payload.message_preview || payload.message || '';
      if (!preview) {
        return '';
      }
      const trimmed = preview.length > 140 ? preview.slice(0, 140) + '...' : preview;
      return `<div class="timeline-event-body message-preview">"${escapeHTML(trimmed)}"</div>`;
    }

    if (eventType === 'run.end') {
      return `<div class="timeline-event-body">${statusIcon(payload.status || 'unknown')}</div>`;
    }

    if (eventType === 'error') {
      const errPayload = payload.error || {};
      const errType = errPayload.type || 'error';
      const message = errPayload.message || payload.message || 'unknown';
      return `<div class="timeline-event-body error-message">${escapeHTML(errType + ': ' + message)}</div>`;
    }

    if (eventType === 'session.start' || eventType === 'session.end') {
      return correlation.session_id
        ? `<div class="timeline-event-body">session ${escapeHTML(correlation.session_id)}</div>`
        : '';
    }

    return '';
  }

  function getEventDetails(evt) {
    const details = {};
    const correlation = getEnvelopeCorrelation(evt);
    const attributes = getEnvelopeAttributes(evt);
    const payload = getEnvelopePayload(evt);

    if (Object.keys(correlation).length > 0) {
      details.correlation = correlation;
    }
    if (Object.keys(attributes).length > 0) {
      details.attributes = attributes;
    }
    if (Object.keys(payload).length > 0) {
      details.payload = payload;
    }

    if (Object.keys(details).length === 0) {
      return '';
    }

    return JSON.stringify(details, null, 2);
  }

  async function renderDashboard() {
    dashboardState = {
      summary: null,
      timeseries: null,
      window: '1h',
      recentEvents: [],
      recentEventIDs: new Set(),
      toolCounts: {},
    };

    app.innerHTML = `
      <div class="page-header">
        <h2>Dashboard <span class="live-indicator"><span class="live-dot"></span>Live</span></h2>
      </div>
      <div class="dashboard-summary">
        <div class="summary-card" style="--card-accent:var(--accent)">
          <div class="summary-card-label"><span class="summary-card-icon">◉</span>Active Sessions</div>
          <div class="summary-card-value" id="dash-active">-</div>
          <div class="summary-card-sub" id="dash-active-sub">&nbsp;</div>
        </div>
        <div class="summary-card" style="--card-accent:var(--success)">
          <div class="summary-card-label"><span class="summary-card-icon">▶</span>Runs Today</div>
          <div class="summary-card-value" id="dash-runs">-</div>
          <div class="summary-card-sub" id="dash-runs-sub">&nbsp;</div>
        </div>
        <div class="summary-card" style="--card-accent:var(--purple)">
          <div class="summary-card-label"><span class="summary-card-icon">⚡</span>Tool Calls</div>
          <div class="summary-card-value" id="dash-tools">-</div>
          <div class="summary-card-sub" id="dash-tools-sub">&nbsp;</div>
        </div>
        <div class="summary-card" style="--card-accent:var(--error)">
          <div class="summary-card-label"><span class="summary-card-icon">⚠</span>Errors</div>
          <div class="summary-card-value" id="dash-errors">-</div>
          <div class="summary-card-sub" id="dash-errors-sub">&nbsp;</div>
        </div>
      </div>
      <div class="section-title" style="margin-bottom:0.75rem">Infrastructure</div>
      <div class="vm-strip" id="dash-vm-strip"></div>
      <div class="swarm-strip" id="dash-swarm-strip"></div>
      <div class="charts-row">
        <div class="chart-panel">
          <div class="chart-header">
            <span class="chart-title">Event Rate</span>
            <div style="display:flex;align-items:center;gap:1.25rem">
              <div class="chart-legend">
                <span class="chart-legend-item"><span class="chart-legend-dot" style="background:#34d399"></span>runs</span>
                <span class="chart-legend-item"><span class="chart-legend-dot" style="background:#22d3ee"></span>tools</span>
                <span class="chart-legend-item"><span class="chart-legend-dot" style="background:#f87171"></span>errors</span>
              </div>
              <div class="window-selector">
                <button class="window-btn active" data-w="1h">1h</button>
                <button class="window-btn" data-w="6h">6h</button>
                <button class="window-btn" data-w="24h">24h</button>
                <button class="window-btn" data-w="7d">7d</button>
              </div>
            </div>
          </div>
          <div class="chart-container" id="dash-chart"></div>
        </div>
        <div class="chart-panel">
          <div class="chart-header">
            <span class="chart-title">By Framework</span>
          </div>
          <div class="fw-bars" id="dash-fw-bars">
            <p class="empty-state" style="padding:1rem">Loading...</p>
          </div>
        </div>
      </div>
      <div class="bottom-panels">
        <div class="feed-panel">
          <div class="chart-header">
            <span class="chart-title">Recent Activity</span>
          </div>
          <div class="timeline" id="dash-feed">
            <p class="empty-state" style="padding:1rem">Loading...</p>
          </div>
        </div>
        <div class="tools-panel">
          <div class="chart-header">
            <span class="chart-title">Top Tools</span>
          </div>
          <ul class="stat-list" id="dash-top-tools">
            <li style="color:var(--text-dim);font-size:0.8rem">Loading...</li>
          </ul>
        </div>
      </div>
    `;

    document.querySelectorAll('.window-btn').forEach(btn => {
      btn.addEventListener('click', () => {
        document.querySelectorAll('.window-btn').forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        dashboardState.window = btn.dataset.w;
        loadTimeseries();
      });
    });

    renderDashVMStrip();

    // Render cached data immediately while the API call is in-flight
    const cachedSummary = tryParseJSON(localStorage.getItem('agentmon:dash:summary'));
    const cachedTS = tryParseJSON(localStorage.getItem('agentmon:dash:ts:' + dashboardState.window));
    if (cachedSummary) { dashboardState.summary = cachedSummary; renderSummaryCards(); }
    if (cachedTS) { dashboardState.timeseries = cachedTS; renderTimeseriesChart(); renderFrameworkBars(); }

    try {
      const [summaryData, tsData, recentData, snapshots, swarmSnaps, topToolsData] = await Promise.all([
        api('/v1/stats/summary'),
        api('/v1/stats/timeseries?window=1h'),
        api('/v1/events?limit=20'),
        api('/v1/events?event_type=openclaw.snapshot&limit=100').catch(() => ({ events: [] })),
        api('/v1/events?event_type=swarm.snapshot&limit=10').catch(() => ({ events: [] })),
        api('/v1/stats/top-tools').catch(() => ({ tools: [] })),
      ]);

      if (!isCurrentPath('/')) return;

      mergeOpenClawEvents(snapshots.events || []);
      renderDashVMStrip();
      for (const evt of swarmSnaps.events || []) mergeSwarmSnapshot(evt);
      renderSwarmStrip_dash();

      dashboardState.summary = summaryData;
      dashboardState.timeseries = tsData;
      localStorage.setItem('agentmon:dash:summary', JSON.stringify(summaryData));
      localStorage.setItem('agentmon:dash:ts:' + dashboardState.window, JSON.stringify(tsData));
      renderSummaryCards();
      renderTimeseriesChart();
      renderFrameworkBars();

      // Seed tool counts from the dedicated top-tools endpoint
      for (const t of (topToolsData.tools || [])) {
        dashboardState.toolCounts[t.name] = t.count;
      }

      const events = (recentData.events || []).slice().reverse();
      for (const evt of events) {
        const id = getRecordID(evt);
        if (id && !dashboardState.recentEventIDs.has(id)) {
          dashboardState.recentEventIDs.add(id);
          dashboardState.recentEvents.push(evt);
        }
      }
      renderDashFeed();
      renderDashTopTools();
    } catch (e) {
      console.error('Dashboard load error:', e);
    }

    dashboardUnsubscribe = subscribeWS(handleDashboardWS);
  }

  function renderDashVMStrip() {
    const strip = document.getElementById('dash-vm-strip');
    if (!strip) return;
    const vms = getVMStatus();
    strip.innerHTML = vms.map(vm => `
      <div class="vm-pill ${vm.active ? 'active' : 'inactive'}">
        <span class="vm-pill-dot"></span>
        <span class="vm-pill-name">${escapeHTML(vm.name)}</span>
        <span class="vm-pill-label">${vm.active ? 'online' : 'offline'}</span>
      </div>
    `).join('');
  }

  function renderSwarmStrip_dash() {
    const strip = document.getElementById('dash-swarm-strip');
    if (!strip) return;
    const services = Object.values(swarmState.services);
    if (services.length === 0) return;
    strip.innerHTML = services.map(svc => {
      const statusClass = svc.status === 'healthy' ? 'active'
        : svc.status === 'degraded' ? 'degraded' : 'inactive';
      const label = svc.status || 'unknown';
      return `
        <div class="vm-pill ${statusClass}">
          <span class="vm-pill-dot"></span>
          <span class="vm-pill-name">${escapeHTML(svc.name)}</span>
          <span class="vm-pill-label">${escapeHTML(label)}</span>
        </div>
      `;
    }).join('');
  }

  function handleDashboardWS(msg) {
    if (msg.type !== 'message') return;

    const eventType = getEnvelopeType(msg.data);

    if (eventType === 'openclaw.snapshot') {
      mergeOpenClawEvents([msg.data]);
      renderDashVMStrip();
      return;
    }
    if (eventType === 'swarm.snapshot') {
      mergeSwarmSnapshot(msg.data);
      renderSwarmStrip_dash();
      return;
    }
    if (eventType === 'swarm.service.snapshot') {
      mergeSwarmServiceSnapshot(msg.data);
      renderSwarmStrip_dash();
      return;
    }

    if (dashboardState.summary) {
      if (eventType === 'session.start') dashboardState.summary.active_sessions++;
      if (eventType === 'session.end') dashboardState.summary.active_sessions = Math.max(0, dashboardState.summary.active_sessions - 1);
      if (eventType === 'run.start') dashboardState.summary.runs_today++;
      if (eventType === 'error') dashboardState.summary.errors_today++;
      if (eventType === 'span.end') {
        const attrs = getEnvelopeAttributes(msg.data);
        if (attrs.span_kind === 'tool') dashboardState.summary.tool_calls_today++;
      }
      renderSummaryCards();
    }

    const id = getRecordID(msg.data);
    if (id && !dashboardState.recentEventIDs.has(id)) {
      dashboardState.recentEventIDs.add(id);
      dashboardState.recentEvents.push(msg.data);
      tallyTool(msg.data);

      while (dashboardState.recentEvents.length > 50) {
        const removed = dashboardState.recentEvents.shift();
        dashboardState.recentEventIDs.delete(getRecordID(removed));
      }

      renderDashFeed();
      renderDashTopTools();
    }

    if (dashboardState.timeseries && dashboardState.window === '1h') {
      appendToCurrentBucket(msg.data);
    }
  }

  function tallyTool(evt) {
    const eventType = getEnvelopeType(evt);
    if (eventType === 'span.end') {
      const attrs = getEnvelopeAttributes(evt);
      if (attrs.span_kind === 'tool') {
        const name = attrs.name || 'unknown';
        dashboardState.toolCounts[name] = (dashboardState.toolCounts[name] || 0) + 1;
      }
    }
  }

  function renderSummaryCards() {
    const s = dashboardState.summary;
    if (!s) return;

    const el = (id, val) => {
      const e = document.getElementById(id);
      if (e) e.textContent = String(val);
    };

    el('dash-active', s.active_sessions);
    el('dash-runs', s.runs_today);
    el('dash-tools', s.tool_calls_today);
    el('dash-errors', s.errors_today);

    // Sub-line: framework breakdown for active sessions
    const fws = Object.keys(s.by_framework || {});
    if (fws.length > 0) {
      const sub = document.getElementById('dash-active-sub');
      if (sub) sub.textContent = fws.map(f => `${f} ${(s.by_framework[f].runs || 0)}`).join(' · ');
    }

    const errEl = document.getElementById('dash-errors');
    if (errEl) {
      errEl.classList.toggle('has-errors', s.errors_today > 0);
    }
  }

  async function loadTimeseries() {
    try {
      // Destroy chart so it's recreated with new window scale
      if (dashboardChart) {
        dashboardChart.destroy();
        dashboardChart = null;
      }
      const cachedWin = tryParseJSON(localStorage.getItem('agentmon:dash:ts:' + dashboardState.window));
      if (cachedWin) { dashboardState.timeseries = cachedWin; renderTimeseriesChart(); }
      const data = await api('/v1/stats/timeseries?window=' + dashboardState.window);
      if (!isCurrentPath('/')) return;
      dashboardState.timeseries = data;
      localStorage.setItem('agentmon:dash:ts:' + dashboardState.window, JSON.stringify(data));
      renderTimeseriesChart();
    } catch (e) {
      console.error('Failed to load timeseries:', e);
    }
  }

  function buildChartData() {
    const ts = dashboardState.timeseries;
    if (!ts || !ts.series || ts.series.length === 0) return null;
    // Stacked: errors on bottom, then tools, then runs on top
    const errors = ts.series.map(b => b.errors);
    const tools = ts.series.map((b, i) => b.tools + errors[i]);
    const runs = ts.series.map((b, i) => b.runs + tools[i]);
    return [
      ts.series.map(b => Math.floor(new Date(b.ts).getTime() / 1000)),
      runs,
      tools,
      errors,
    ];
  }

  function renderTimeseriesChart() {
    const container = document.getElementById('dash-chart');
    if (!container || !dashboardState.timeseries) return;

    const data = buildChartData();
    if (!data) {
      container.innerHTML = '<p class="empty-state" style="padding:2rem">No data for this window</p>';
      return;
    }

    // If chart already exists, just update the data
    if (dashboardChart) {
      dashboardChart.setData(data);
      return;
    }

    container.innerHTML = '';

    const width = container.clientWidth || 600;
    const height = 200;

    const opts = {
      width,
      height,
      cursor: { show: true },
      scales: {
        x: { time: true },
        y: { auto: true, min: 0 },
      },
      axes: [
        {
          stroke: '#4e6070',
          grid: { stroke: 'rgba(28, 38, 55, 0.6)', width: 1 },
          ticks: { stroke: 'rgba(28, 38, 55, 0.6)', width: 1 },
          font: '11px Fira Code',
        },
        {
          stroke: '#4e6070',
          grid: { stroke: 'rgba(28, 38, 55, 0.6)', width: 1 },
          ticks: { stroke: 'rgba(28, 38, 55, 0.6)', width: 1 },
          font: '11px Fira Code',
          size: 50,
        },
      ],
      series: [
        {},
        {
          label: 'Runs',
          stroke: '#34d399',
          width: 1.5,
          fill: 'rgba(52, 211, 153, 0.15)',
        },
        {
          label: 'Tools',
          stroke: '#22d3ee',
          width: 1.5,
          fill: 'rgba(34, 211, 238, 0.15)',
        },
        {
          label: 'Errors',
          stroke: '#f87171',
          width: 1.5,
          fill: 'rgba(248, 113, 113, 0.2)',
        },
      ],
      bands: [
        { series: [1, 2], fill: 'rgba(52, 211, 153, 0.15)' },
        { series: [2, 3], fill: 'rgba(34, 211, 238, 0.15)' },
      ],
    };

    dashboardChart = new uPlot(opts, data, container);

    if (dashboardResizeObserver) {
      dashboardResizeObserver.disconnect();
    }
    dashboardResizeObserver = new ResizeObserver(entries => {
      for (const entry of entries) {
        if (dashboardChart) {
          dashboardChart.setSize({ width: entry.contentRect.width, height: 200 });
        }
      }
    });
    dashboardResizeObserver.observe(container);
  }

  function appendToCurrentBucket(evt) {
    const ts = dashboardState.timeseries;
    if (!ts || !ts.series || ts.series.length === 0) return;

    const now = Math.floor(Date.now() / 60000) * 60000;
    const last = ts.series[ts.series.length - 1];
    const lastTs = new Date(last.ts).getTime();

    let bucket;
    if (Math.abs(now - lastTs) < 60000) {
      bucket = last;
    } else {
      bucket = { ts: new Date(now).toISOString(), runs: 0, tools: 0, errors: 0 };
      ts.series.push(bucket);
    }

    const eventType = getEnvelopeType(evt);
    if (eventType === 'run.start') bucket.runs++;
    if (eventType === 'error') bucket.errors++;
    if (eventType === 'span.end') {
      const attrs = getEnvelopeAttributes(evt);
      if (attrs.span_kind === 'tool') bucket.tools++;
    }

    renderTimeseriesChart();
  }

  function renderFrameworkBars() {
    const container = document.getElementById('dash-fw-bars');
    if (!container || !dashboardState.summary) return;

    const byFw = dashboardState.summary.by_framework || {};
    const entries = Object.entries(byFw).sort((a, b) => {
      const totalA = a[1].runs + a[1].tools + a[1].errors;
      const totalB = b[1].runs + b[1].tools + b[1].errors;
      return totalB - totalA;
    });

    if (entries.length === 0) {
      container.innerHTML = '<p class="empty-state" style="padding:1rem">No framework data</p>';
      return;
    }

    const maxTotal = Math.max(...entries.map(([, s]) => s.runs + s.tools + s.errors));

    container.innerHTML = entries.map(([name, stats]) => {
      const total = stats.runs + stats.tools + stats.errors;
      const pct = maxTotal > 0 ? (total / maxTotal * 100) : 0;
      const cssClass = name.toLowerCase().replace(/[^a-z0-9-]/g, '-');
      return `
        <div class="fw-bar-row">
          <div class="fw-bar-label">
            <span class="fw-bar-name">${escapeHTML(name)}</span>
            <span class="fw-bar-count">${total} events</span>
          </div>
          <div class="fw-bar-track">
            <div class="fw-bar-fill ${escapeHTML(cssClass)}" style="width:${pct}%"></div>
          </div>
        </div>
      `;
    }).join('');
  }

  function renderDashFeed() {
    const feed = document.getElementById('dash-feed');
    if (!feed) return;

    const recent = dashboardState.recentEvents.slice(-20).reverse();
    if (recent.length === 0) {
      feed.innerHTML = '<p class="empty-state" style="padding:1rem">Waiting for events...</p>';
      return;
    }

    feed.innerHTML = recent.map(evt => {
      const eventType = getEnvelopeType(evt);
      const vmName = getVMName(evt);
      const vmClass = getVMClassName(vmName);
      const source = getEnvelopeSource(evt);
      const framework = source.framework || '';
      const tag = framework
        ? `<span class="timeline-vm-tag ${vmClass}">${escapeHTML(framework)}</span>`
        : '';

      return `
        <div class="timeline-event">
          <div class="timeline-event-header">
            ${getEventIcon(eventType)}
            ${tag}
            <span class="timeline-event-type">${escapeHTML(getEventLabel(eventType))}</span>
            <span class="timeline-event-time">${escapeHTML(new Date(getEnvelopeTS(evt)).toLocaleTimeString())}</span>
          </div>
          ${getEventBody(evt)}
        </div>
      `;
    }).join('');
  }

  function renderDashTopTools() {
    const list = document.getElementById('dash-top-tools');
    if (!list) return;

    const topTools = Object.entries(dashboardState.toolCounts)
      .sort((a, b) => b[1] - a[1])
      .slice(0, 10);

    if (topTools.length === 0) {
      list.innerHTML = '<li style="color:var(--text-dim);font-size:0.8rem">No tool data yet</li>';
      return;
    }

    const maxCount = topTools[0]?.[1] || 1;
    list.innerHTML = topTools.map(([name, count]) => {
      const pct = (count / maxCount * 100).toFixed(1);
      return `
        <li>
          <div class="stat-list-header">
            <span class="stat-list-name">${escapeHTML(name)}</span>
            <span class="stat-list-count">${count}</span>
          </div>
          <div class="stat-list-bar-track">
            <div class="stat-list-bar-fill" style="width:${pct}%"></div>
          </div>
        </li>
      `;
    }).join('');
  }

  route();
})();