npm - switchroom - Versions diffs - 0.12.5 → 0.12.6 - Mend

switchroom 0.12.5 → 0.12.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/package.json +1 -1
package/dist/agent-scheduler/index.js +0 -12657
package/dist/auth-broker/index.js +0 -14133
package/dist/cli/autoaccept-poll.js +0 -128
package/dist/cli/drive-write-pretool.mjs +0 -5451
package/dist/cli/skill-validate-pretool.mjs +0 -7209
package/dist/cli/switchroom.js +0 -76016
package/dist/cli/ui/index.html +0 -1281
package/dist/host-control/main.js +0 -16041
package/dist/vault/approvals/kernel-server.js +0 -13121
package/dist/vault/broker/server.js +0 -17177
package/telegram-plugin/dist/bridge/bridge.js +0 -24996
package/telegram-plugin/dist/gateway/gateway.js +0 -55545
package/telegram-plugin/dist/server.js +0 -24786

package/dist/cli/ui/index.html DELETED Viewed

@@ -1,1281 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Switchroom Fleet</title>
-  <style>
-    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-    :root {
-      --bg: #0f1117;
-      --surface: #1a1d27;
-      --surface-hover: #22263a;
-      --border: #2a2e3e;
-      --text: #e1e4ed;
-      --text-dim: #8b8fa3;
-      --green: #34d399;
-      --red: #f87171;
-      --yellow: #fbbf24;
-      --blue: #60a5fa;
-      --radius: 10px;
-    }
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-      background: var(--bg);
-      color: var(--text);
-      line-height: 1.5;
-      min-height: 100vh;
-    }
-    header {
-      padding: 1.5rem 2rem;
-      border-bottom: 1px solid var(--border);
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-    header h1 {
-      font-size: 1.25rem;
-      font-weight: 600;
-      letter-spacing: -0.02em;
-    }
-    header h1 span { color: var(--text-dim); font-weight: 400; }
-    .refresh-info {
-      font-size: 0.8rem;
-      color: var(--text-dim);
-    }
-    main {
-      max-width: 1200px;
-      margin: 0 auto;
-      padding: 1.5rem;
-    }
-    .agents-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
-      gap: 1rem;
-    }
-    .agent-card {
-      background: var(--surface);
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      overflow: hidden;
-      transition: border-color 0.15s;
-    }
-    .agent-card:hover { border-color: #3a3e4e; }
-    .card-header {
-      padding: 1rem 1.25rem;
-      display: flex;
-      align-items: center;
-      gap: 0.75rem;
-      cursor: pointer;
-      user-select: none;
-    }
-    .status-dot {
-      width: 10px;
-      height: 10px;
-      border-radius: 50%;
-      flex-shrink: 0;
-    }
-    .status-dot.active { background: var(--green); box-shadow: 0 0 6px var(--green); }
-    .status-dot.inactive { background: var(--red); }
-    .status-dot.auth-warning { background: var(--yellow); box-shadow: 0 0 6px var(--yellow); }
-    .agent-name {
-      font-weight: 600;
-      font-size: 1rem;
-    }
-    .agent-topic {
-      font-size: 0.85rem;
-      color: var(--text-dim);
-      margin-left: auto;
-    }
-    .card-meta {
-      padding: 0 1.25rem 1rem;
-      display: flex;
-      flex-wrap: wrap;
-      gap: 0.5rem 1.25rem;
-      font-size: 0.8rem;
-      color: var(--text-dim);
-    }
-    .meta-item label {
-      color: var(--text-dim);
-      opacity: 0.7;
-    }
-    .meta-item span { color: var(--text); }
-    .card-actions {
-      padding: 0.75rem 1.25rem;
-      border-top: 1px solid var(--border);
-      display: flex;
-      gap: 0.5rem;
-    }
-    .btn {
-      padding: 0.4rem 0.9rem;
-      border: 1px solid var(--border);
-      border-radius: 6px;
-      background: transparent;
-      color: var(--text);
-      font-size: 0.78rem;
-      cursor: pointer;
-      transition: background 0.15s, border-color 0.15s;
-    }
-    .btn:hover { background: var(--surface-hover); border-color: #4a4e5e; }
-    .btn:disabled { opacity: 0.4; cursor: not-allowed; }
-    .btn.btn-start { color: var(--green); border-color: rgba(52,211,153,0.3); }
-    .btn.btn-start:hover { background: rgba(52,211,153,0.1); }
-    .btn.btn-stop { color: var(--red); border-color: rgba(248,113,113,0.3); }
-    .btn.btn-stop:hover { background: rgba(248,113,113,0.1); }
-    .btn.btn-restart { color: var(--blue); border-color: rgba(96,165,250,0.3); }
-    .btn.btn-restart:hover { background: rgba(96,165,250,0.1); }
-    .card-logs {
-      display: none;
-      border-top: 1px solid var(--border);
-    }
-    .card-logs.open { display: block; }
-    .logs-header {
-      padding: 0.5rem 1.25rem;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      font-size: 0.8rem;
-      color: var(--text-dim);
-    }
-    .logs-header button {
-      background: none;
-      border: none;
-      color: var(--blue);
-      cursor: pointer;
-      font-size: 0.78rem;
-    }
-    .log-output {
-      padding: 0.75rem 1.25rem;
-      max-height: 300px;
-      overflow-y: auto;
-      font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace;
-      font-size: 0.72rem;
-      line-height: 1.6;
-      white-space: pre-wrap;
-      word-break: break-all;
-      color: var(--text-dim);
-      background: rgba(0,0,0,0.2);
-    }
-    .error-banner {
-      background: rgba(248,113,113,0.1);
-      border: 1px solid rgba(248,113,113,0.3);
-      color: var(--red);
-      padding: 0.75rem 1.25rem;
-      border-radius: var(--radius);
-      margin-bottom: 1rem;
-      font-size: 0.85rem;
-    }
-    .loading {
-      text-align: center;
-      padding: 4rem;
-      color: var(--text-dim);
-    }
-    nav.tabs {
-      display: flex;
-      gap: 0.25rem;
-      padding: 0 2rem;
-      border-bottom: 1px solid var(--border);
-    }
-    nav.tabs button {
-      background: none;
-      border: none;
-      color: var(--text-dim);
-      padding: 0.75rem 1rem;
-      cursor: pointer;
-      font-size: 0.9rem;
-      border-bottom: 2px solid transparent;
-      margin-bottom: -1px;
-    }
-    nav.tabs button.active {
-      color: var(--text);
-      border-bottom-color: var(--blue);
-    }
-    nav.tabs button:hover { color: var(--text); }
-    .card-detail {
-      display: none;
-      border-top: 1px solid var(--border);
-      padding: 0.75rem 1.25rem;
-      font-size: 0.8rem;
-    }
-    .card-detail.open { display: block; }
-    .card-detail h4 {
-      font-size: 0.72rem;
-      text-transform: uppercase;
-      letter-spacing: 0.05em;
-      color: var(--text-dim);
-      margin-bottom: 0.4rem;
-      margin-top: 0.75rem;
-    }
-    .card-detail h4:first-child { margin-top: 0; }
-    .chip {
-      display: inline-block;
-      padding: 0.15rem 0.5rem;
-      border-radius: 999px;
-      background: var(--surface-hover);
-      font-size: 0.72rem;
-      color: var(--text);
-      margin-right: 0.25rem;
-      margin-bottom: 0.25rem;
-    }
-    .chip.missing { color: var(--yellow); border: 1px solid rgba(251,191,36,0.4); background: rgba(251,191,36,0.05); }
-    .config-pre {
-      background: rgba(0,0,0,0.3);
-      padding: 0.6rem;
-      border-radius: 6px;
-      max-height: 240px;
-      overflow: auto;
-      font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace;
-      font-size: 0.7rem;
-      color: var(--text-dim);
-      white-space: pre;
-    }
-    table.accounts-table {
-      width: 100%;
-      border-collapse: collapse;
-      font-size: 0.85rem;
-    }
-    table.accounts-table th, table.accounts-table td {
-      padding: 0.6rem 0.75rem;
-      text-align: left;
-      border-bottom: 1px solid var(--border);
-    }
-    table.accounts-table th {
-      font-size: 0.7rem;
-      text-transform: uppercase;
-      letter-spacing: 0.05em;
-      color: var(--text-dim);
-      font-weight: 500;
-    }
-    .health-badge {
-      display: inline-block;
-      padding: 0.15rem 0.55rem;
-      border-radius: 999px;
-      font-size: 0.72rem;
-      font-weight: 500;
-    }
-    .health-badge.healthy { color: var(--green); background: rgba(52,211,153,0.12); }
-    .health-badge.expired,
-    .health-badge.missing-credentials,
-    .health-badge.missing-refresh-token { color: var(--red); background: rgba(248,113,113,0.12); }
-    .health-badge.quota-exhausted { color: var(--yellow); background: rgba(251,191,36,0.12); }
-    .quota-pct { font-variant-numeric: tabular-nums; }
-    .quota-pct.high { color: var(--red); }
-    .quota-pct.mid { color: var(--yellow); }
-    .quota-pct.stale { color: var(--text-dim); font-style: italic; }
-    .agent-list { font-size: 0.8rem; color: var(--text-dim); }
-    .agent-list.primary { color: var(--text); }
-    .usage-pill {
-      display: inline-block;
-      padding: 0.15rem 0.55rem;
-      border-radius: 999px;
-      font-size: 0.75rem;
-      font-weight: 500;
-    }
-    .usage-pill.primary {
-      color: var(--green);
-      background: rgba(52,211,153,0.12);
-    }
-    .modal-backdrop {
-      position: fixed; inset: 0; background: rgba(0,0,0,0.6);
-      display: flex; align-items: center; justify-content: center; z-index: 100;
-    }
-    .modal {
-      background: var(--card); border: 1px solid var(--border); border-radius: 8px;
-      padding: 1.25rem; min-width: 320px; max-width: 480px;
-    }
-    .modal h3 { margin: 0 0 0.75rem 0; }
-    .modal label { display: block; font-size: 0.8rem; color: var(--text-dim); margin: 0.5rem 0 0.25rem 0; }
-    .modal select, .modal input { width: 100%; padding: 0.4rem; background: rgba(0,0,0,0.3);
-      border: 1px solid var(--border); color: var(--text); border-radius: 4px; }
-    .modal-actions { margin-top: 1rem; display: flex; gap: 0.5rem; justify-content: flex-end; }
-    .toast {
-      position: fixed; bottom: 1.5rem; right: 1.5rem; padding: 0.75rem 1rem;
-      background: var(--card); border: 1px solid var(--border); border-radius: 6px;
-      font-size: 0.85rem; z-index: 200; max-width: 420px;
-    }
-    .toast.ok { border-color: var(--green); }
-    .toast.err { border-color: var(--red); }
-    .accounts-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
-      gap: 1rem;
-    }
-    .account-card {
-      background: var(--surface);
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      padding: 1rem 1.25rem;
-      transition: border-color 0.15s;
-    }
-    .account-card:hover { border-color: #3a3e4e; }
-    .account-card-header {
-      display: flex;
-      align-items: center;
-      gap: 0.75rem;
-      margin-bottom: 0.75rem;
-    }
-    .account-label {
-      font-weight: 600;
-      font-size: 1rem;
-      color: var(--text);
-    }
-    .account-usage {
-      font-size: 0.8rem;
-      color: var(--text-dim);
-      margin-bottom: 0.75rem;
-    }
-    .accounts-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-      gap: 1rem;
-      margin-top: 1rem;
-    }
-    @media (max-width: 700px) {
-      .accounts-table-wrap { display: none; }
-    }
-    @media (min-width: 701px) {
-      .accounts-grid { display: none; }
-    }
-    @media (max-width: 600px) {
-      header { padding: 1rem; }
-      main { padding: 1rem; }
-      .agents-grid { grid-template-columns: 1fr; }
-      .accounts-grid { grid-template-columns: 1fr; }
-      .card-meta { gap: 0.3rem 1rem; }
-      nav.tabs { padding: 0 1rem; overflow-x: auto; }
-    }
-  </style>
-</head>
-<body>
-  <header>
-    <h1>Switchroom <span>Fleet</span></h1>
-    <div class="refresh-info">Refreshes every 10s</div>
-  </header>
-  <nav class="tabs">
-    <button id="tab-summary" class="active" onclick="switchTab('summary')">Summary</button>
-    <button id="tab-agents" onclick="switchTab('agents')">Agents</button>
-    <button id="tab-accounts" onclick="switchTab('accounts')">Accounts</button>
-    <button id="tab-system" onclick="switchTab('system')">System</button>
-    <button id="tab-google" onclick="switchTab('google')">Google</button>
-    <button id="tab-schedule" onclick="switchTab('schedule')">Schedule</button>
-    <button id="tab-approvals" onclick="switchTab('approvals')">Approvals</button>
-  </nav>
-  <main>
-    <div id="error"></div>
-    <div id="summary" class="loading">Loading summary…</div>
-    <div id="agents" style="display:none" class="loading">Loading agents...</div>
-    <div id="accounts" style="display:none"></div>
-    <div id="system" style="display:none"></div>
-    <div id="google" style="display:none"></div>
-    <div id="schedule" style="display:none"></div>
-    <div id="approvals" style="display:none"></div>
-  </main>
-  <script>
-    const API = window.location.origin;
-    const TOKEN = new URLSearchParams(window.location.search).get('token');
-    let agents = [];
-    let openLogs = new Set();
-    let openDetails = new Set();
-    let agentDetails = {};
-    let accounts = [];
-    let ws = null;
-    function authHeaders() {
-      const h = {};
-      if (TOKEN) h['Authorization'] = `Bearer ${TOKEN}`;
-      return h;
-    }
-    async function fetchAgents() {
-      try {
-        const res = await fetch(`${API}/api/agents`, { headers: authHeaders() });
-        if (!res.ok) throw new Error(`HTTP ${res.status}`);
-        agents = await res.json();
-        render();
-        clearError();
-      } catch (err) {
-        showError(`Failed to fetch agents: ${err.message}`);
-      }
-    }
-    async function fetchAccounts() {
-      try {
-        const res = await fetch(`${API}/api/accounts`, { headers: authHeaders() });
-        if (!res.ok) throw new Error(`HTTP ${res.status}`);
-        accounts = await res.json();
-        renderAccounts();
-        clearError();
-      } catch (err) {
-        showError(`Failed to fetch accounts: ${err.message}`);
-      }
-    }
-    async function fetchAgentDetail(name) {
-      try {
-        const [accRes, subRes, cfgRes] = await Promise.all([
-          fetch(`${API}/api/agents/${encodeURIComponent(name)}/accounts`, { headers: authHeaders() }),
-          fetch(`${API}/api/agents/${encodeURIComponent(name)}/subagents`, { headers: authHeaders() }),
-          fetch(`${API}/api/agents/${encodeURIComponent(name)}/config`, { headers: authHeaders() }),
-        ]);
-        agentDetails[name] = {
-          accounts: accRes.ok ? await accRes.json() : null,
-          subagents: subRes.ok ? await subRes.json() : null,
-          config: cfgRes.ok ? await cfgRes.json() : null,
-        };
-        render();
-      } catch (err) {
-        showError(`Failed to load detail for ${name}: ${err.message}`);
-      }
-    }
-    async function fetchSystemHealth() {
-      try {
-        const res = await fetch(`${API}/api/system-health`, { headers: authHeaders() });
-        if (!res.ok) throw new Error(`HTTP ${res.status}`);
-        renderSystemHealth(await res.json());
-        clearError();
-      } catch (err) {
-        showError(`Failed to fetch system health: ${err.message}`);
-      }
-    }
-    async function fetchGoogleAccounts() {
-      try {
-        const res = await fetch(`${API}/api/google-accounts`, { headers: authHeaders() });
-        if (!res.ok) throw new Error(`HTTP ${res.status}`);
-        renderGoogleAccounts(await res.json());
-        clearError();
-      } catch (err) {
-        showError(`Failed to fetch Google accounts: ${err.message}`);
-      }
-    }
-    async function fetchSchedule() {
-      try {
-        const res = await fetch(`${API}/api/schedule`, { headers: authHeaders() });
-        if (!res.ok) throw new Error(`HTTP ${res.status}`);
-        renderSchedule(await res.json());
-        clearError();
-      } catch (err) {
-        showError(`Failed to fetch schedule: ${err.message}`);
-      }
-    }
-    async function fetchApprovals() {
-      try {
-        const res = await fetch(`${API}/api/approvals`, { headers: authHeaders() });
-        if (!res.ok) throw new Error(`HTTP ${res.status}`);
-        renderApprovals(await res.json());
-        clearError();
-      } catch (err) {
-        showError(`Failed to fetch approvals: ${err.message}`);
-      }
-    }
-    function switchTab(tab) {
-      const tabs = ['summary', 'agents', 'accounts', 'system', 'google', 'schedule', 'approvals'];
-      for (const t of tabs) {
-        document.getElementById(`tab-${t}`).classList.toggle('active', tab === t);
-        document.getElementById(t).style.display = tab === t ? '' : 'none';
-      }
-      if (tab === 'summary') fetchSummary();
-      if (tab === 'accounts') fetchAccounts();
-      if (tab === 'system') fetchSystemHealth();
-      if (tab === 'google') fetchGoogleAccounts();
-      if (tab === 'schedule') fetchSchedule();
-      if (tab === 'approvals') fetchApprovals();
-    }
-    // Fleet overview — aggregates the cheap endpoints client-side
-    // (one parallel fan-out; no new server work, no extra docker/probe
-    // cost beyond what those tabs already do). Each tile degrades
-    // independently if its source errors.
-    async function fetchSummary() {
-      const el = document.getElementById('summary');
-      const get = async (p) => {
-        try {
-          const r = await fetch(`${API}${p}`, { headers: authHeaders() });
-          return r.ok ? await r.json() : null;
-        } catch { return null; }
-      };
-      const [ag, sys, appr, sched, accts] = await Promise.all([
-        get('/api/agents'), get('/api/system-health'),
-        get('/api/approvals'), get('/api/schedule'), get('/api/accounts'),
-      ]);
-      clearError();
-      const tile = (title, body, ok) => `
-        <div class="agent-card" style="min-width:220px">
-          <div class="card-header" style="cursor:default">
-            <span class="status-dot ${ok === null ? '' : ok ? 'active' : 'inactive'}" style="display:inline-block;vertical-align:middle"></span>
-            <span class="agent-name">${escapeHtml(title)}</span>
-          </div>
-          <div style="padding:0 1.25rem 1rem;font-size:0.9rem">${body}</div>
-        </div>`;
-      const dim = (s) => `<span style="color:var(--text-dim)">${escapeHtml(s)}</span>`;
-      // Agents up/total
-      let agentsTile;
-      if (Array.isArray(ag)) {
-        const up = ag.filter(x => x.active === 'active').length;
-        agentsTile = tile('Agents', `<strong>${up}/${ag.length}</strong> active`, up === ag.length);
-      } else agentsTile = tile('Agents', dim('unavailable'), null);
-      // Broker / hindsight / hostd from system-health
-      let brokerTile, hsTile, hostdTile;
-      if (sys && sys.broker) {
-        brokerTile = tile('Auth-broker',
-          sys.broker.reachable
-            ? `reachable · active <strong>${escapeHtml(sys.broker.active || '—')}</strong><br>${sys.broker.accounts ?? '?'} accts · ${sys.broker.agents ?? '?'} agents`
-            : `<span style="color:var(--red)">unreachable</span>`,
-          !!sys.broker.reachable);
-      } else brokerTile = tile('Auth-broker', dim('unavailable'), null);
-      if (sys && sys.hindsight) {
-        hsTile = tile('Hindsight',
-          sys.hindsight.running
-            ? `running<br>${escapeHtml(sys.hindsight.model || '?')} · ${sys.hindsight.mcpStateless == null ? '?' : sys.hindsight.mcpStateless ? 'stateless' : 'stateful'}`
-            : `<span style="color:var(--red)">not running</span>`,
-          !!sys.hindsight.running);
-      } else hsTile = tile('Hindsight', dim('unavailable'), null);
-      if (sys && sys.hostd) {
-        hostdTile = tile('Hostd',
-          sys.hostd.auditLogPresent
-            ? `audit present · ${(sys.hostd.recent || []).length} recent`
-            : dim('no audit log yet'),
-          sys.hostd.auditLogPresent ? true : null);
-      } else hostdTile = tile('Hostd', dim('unavailable'), null);
-      // Approvals
-      let apprTile;
-      if (appr && appr.reachable !== false) {
-        const d = appr.decisions || [];
-        const active = d.filter(x => !x.revoked_at && !(x.ttl_expires_at && x.ttl_expires_at < Date.now())).length;
-        apprTile = tile('Approvals', `<strong>${active}</strong> active · ${d.length} total`, true);
-      } else apprTile = tile('Approvals', dim((appr && appr.error) ? 'kernel unreachable' : 'unavailable'), null);
-      // Schedule
-      let schedTile;
-      if (sched && Array.isArray(sched.entries)) {
-        const agents = new Set(sched.entries.map(e => e.agent));
-        schedTile = tile('Schedule', `<strong>${sched.entries.length}</strong> cron entr${sched.entries.length === 1 ? 'y' : 'ies'} · ${agents.size} agent(s)`, true);
-      } else schedTile = tile('Schedule', dim('unavailable'), null);
-      // Quota headroom — worst cached 5h/7d across accounts (no probe;
-      // shows "—" until someone refreshes on the Accounts tab).
-      let quotaTile;
-      if (Array.isArray(accts) && accts.length) {
-        const used = accts.filter(a => a.quotaUsage);
-        if (used.length === 0) {
-          quotaTile = tile('Quota', dim('not probed yet — see Accounts tab'), null);
-        } else {
-          const worst5 = Math.max(...used.map(a => a.quotaUsage.fiveHourPct));
-          const worst7 = Math.max(...used.map(a => a.quotaUsage.sevenDayPct));
-          const anyStale = accts.some(a => a.quotaStale);
-          quotaTile = tile('Quota (worst acct)',
-            `5h <strong>${Math.round(worst5)}%</strong> · 7d <strong>${Math.round(worst7)}%</strong>${anyStale ? '<br>' + dim('some stale') : ''}`,
-            worst5 < 90 && worst7 < 90);
-        }
-      } else quotaTile = tile('Quota', dim('unavailable'), null);
-      el.classList.remove('loading');
-      el.innerHTML = `<div class="agents-grid">${agentsTile}${brokerTile}${hsTile}${hostdTile}${apprTile}${schedTile}${quotaTile}</div>`;
-    }
-    function showError(msg) {
-      document.getElementById('error').innerHTML =
-        `<div class="error-banner">${escapeHtml(msg)}</div>`;
-    }
-    function clearError() {
-      document.getElementById('error').innerHTML = '';
-    }
-    function escapeHtml(s) {
-      // Must cover attribute context too: values are interpolated into
-      // both text nodes AND title="..." attributes. The old
-      // textContent→innerHTML trick escapes &<> but NOT quotes, so an
-      // agent-authored string like `" onmouseover="x` could break out
-      // of a title= attribute. Escape the full set explicitly.
-      return String(s ?? '').replace(/[&<>"']/g, (c) => ({
-        '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;',
-      }[c]));
-    }
-    function statusClass(agent) {
-      if (agent.active === 'active') {
-        if (agent.auth && agent.auth.expiresAt) {
-          const remaining = agent.auth.expiresAt - Date.now();
-          if (remaining > 0 && remaining < 60 * 60 * 1000) return 'auth-warning';
-        }
-        return 'active';
-      }
-      return 'inactive';
-    }
-    function formatUptime(timestamp) {
-      if (!timestamp) return '--';
-      const d = new Date(timestamp);
-      if (isNaN(d.getTime())) return timestamp;
-      const diff = Date.now() - d.getTime();
-      if (diff < 0) return 'just now';
-      const mins = Math.floor(diff / 60000);
-      if (mins < 60) return `${mins}m`;
-      const hrs = Math.floor(mins / 60);
-      if (hrs < 24) return `${hrs}h ${mins % 60}m`;
-      const days = Math.floor(hrs / 24);
-      return `${days}d ${hrs % 24}h`;
-    }
-    function render() {
-      const container = document.getElementById('agents');
-      if (agents.length === 0) {
-        container.innerHTML = '<div class="loading">No agents yet. Run <code>switchroom agent create &lt;name&gt; --profile &lt;profile&gt;</code> to add one.</div>';
-        return;
-      }
-      container.className = 'agents-grid';
-      container.innerHTML = agents.map(a => `
-        <div class="agent-card" data-agent="${escapeHtml(a.name)}">
-          <div class="card-header" onclick="toggleLogs('${escapeHtml(a.name)}')">
-            <div class="status-dot ${statusClass(a)}" title="${escapeHtml(a.active)}"></div>
-            <div class="agent-name">${escapeHtml(a.name)}</div>
-            <div class="agent-topic">${a.topic_emoji ? escapeHtml(a.topic_emoji) + ' ' : ''}${escapeHtml(a.topic_name)}</div>
-          </div>
-          <div class="card-meta">
-            <div class="meta-item"><label>Status </label><span>${escapeHtml(a.active)}</span></div>
-            <div class="meta-item"><label>Uptime </label><span>${formatUptime(a.uptime)}</span></div>
-            <div class="meta-item"><label>Mem </label><span>${a.memory || '--'}</span></div>
-            <div class="meta-item"><label>Profile </label><span>${escapeHtml(a.extends)}</span></div>
-            <div class="meta-item"><label>Auth </label><span>${a.auth.authenticated ? '✓' : '✗'}</span></div>
-            <div class="meta-item"><label>Account </label><span>${a.primaryAccount ? escapeHtml(a.primaryAccount) : '<span style="color:var(--text-dim)">default</span>'}</span></div>
-            <div class="meta-item"><label>Collection </label><span>${escapeHtml(a.memoryCollection)}</span></div>
-          </div>
-          <div class="card-actions">
-            <button class="btn btn-start" onclick="agentAction('${escapeHtml(a.name)}','start')" ${a.active === 'active' ? 'disabled' : ''}>Start</button>
-            <button class="btn btn-stop" onclick="agentAction('${escapeHtml(a.name)}','stop')" ${a.active !== 'active' ? 'disabled' : ''}>Stop</button>
-            <button class="btn btn-restart" onclick="agentAction('${escapeHtml(a.name)}','restart')" ${a.active !== 'active' ? 'disabled' : ''}>Restart</button>
-            <button class="btn" onclick="toggleDetails('${escapeHtml(a.name)}')">${openDetails.has(a.name) ? 'Hide' : 'Details'}</button>
-          </div>
-          <div class="card-detail ${openDetails.has(a.name) ? 'open' : ''}" id="detail-${escapeHtml(a.name)}">
-            ${renderAgentDetail(a.name)}
-          </div>
-          <div class="card-logs ${openLogs.has(a.name) ? 'open' : ''}" id="logs-${escapeHtml(a.name)}">
-            <div class="logs-header">
-              <span>Logs</span>
-              <button onclick="loadLogs('${escapeHtml(a.name)}')">Refresh</button>
-            </div>
-            <div class="log-output" id="log-output-${escapeHtml(a.name)}">Click to load logs...</div>
-          </div>
-        </div>
-      `).join('');
-    }
-    function renderAgentDetail(name) {
-      const d = agentDetails[name];
-      if (!d) return '<div style="color:var(--text-dim)">Loading…</div>';
-      const accounts = d.accounts;
-      const subagents = d.subagents;
-      const config = d.config;
-      let accountsHtml;
-      if (!accounts || accounts.assigned.length === 0) {
-        accountsHtml = '<div style="color:var(--text-dim)">No accounts assigned (falls back to <code>default</code>).</div>';
-      } else {
-        const byLabel = new Map((accounts.details || []).map(d => [d.label, d]));
-        accountsHtml = accounts.assigned.map((label, i) => {
-          const info = byLabel.get(label);
-          if (!info) return `<span class="chip missing" title="not in ~/.switchroom/accounts/">${escapeHtml(label)} · missing</span>`;
-          const tag = i === 0 ? ' · primary' : '';
-          return `<span class="chip"><span class="health-badge ${escapeHtml(info.health)}" style="margin-right:0.4rem">${escapeHtml(info.health)}</span>${escapeHtml(label)}${tag}</span>`;
-        }).join('');
-      }
-      let subHtml;
-      if (!subagents || subagents.length === 0) {
-        subHtml = '<div style="color:var(--text-dim)">No sub-agents tracked.</div>';
-      } else {
-        subHtml = subagents.map(s => `<span class="chip">${escapeHtml(s.name || s.id || '?')}${s.status ? ' · ' + escapeHtml(s.status) : ''}</span>`).join('');
-      }
-      const configText = config ? JSON.stringify(config, null, 2) : '(unavailable)';
-      return `
-        <h4>Accounts</h4>${accountsHtml}
-        <h4>Sub-agents</h4>${subHtml}
-        <h4>Resolved config</h4><pre class="config-pre">${escapeHtml(configText)}</pre>
-      `;
-    }
-    function renderAccounts() {
-      const container = document.getElementById('accounts');
-      if (!accounts || accounts.length === 0) {
-        container.innerHTML = '<div class="loading">No accounts. Run <code>switchroom auth account add &lt;label&gt;</code>.</div>';
-        return;
-      }
-      // RFC-H shape: the API returns `usedBy` (agents bound via the
-      // fleet-active account or a per-agent override) and a broker
-      // `quota` AccountState ({exhausted, exhausted_until,
-      // threshold_violations, last_refreshed_at}). The pre-RFC-H
-      // primaryFor/fallbackFor lists and quota.fiveHourPct utilization
-      // fields no longer exist on the wire.
-      // usage % cell: live 5h/7d utilization from the last cached
-      // probe (cost-gated — see refreshQuota). null → "—" + a per-
-      // account ↻ that force-probes. quotaStale → value shown muted
-      // with ↻ to refresh.
-      const pctCell = (pct, label, stale) => {
-        if (pct == null) return '<span style="color:var(--text-dim)">—</span>';
-        let cls = 'quota-pct';
-        if (pct >= 90) cls += ' high';
-        else if (pct >= 70) cls += ' mid';
-        const v = `${Math.round(pct)}%`;
-        return stale
-          ? `<span class="${cls}" title="stale — click ↻" style="opacity:.55">${v}</span>`
-          : `<span class="${cls}">${v}</span>`;
-      };
-      const enriched = accounts.map(a => {
-        const q = a.quota || null;
-        const u = a.quotaUsage || null;
-        const exhausted = q ? !!q.exhausted : null;
-        return {
-          a,
-          usedBy: a.usedBy || [],
-          fiveH: pctCell(u ? u.fiveHourPct : null, '5h', a.quotaStale),
-          sevenD: pctCell(u ? u.sevenDayPct : null, '7d', a.quotaStale),
-          fiveReset: u && u.fiveHourResetAt ? formatTimestamp(u.fiveHourResetAt) : '<span style="color:var(--text-dim)">—</span>',
-          captured: u && u.capturedAt
-            ? formatTimestamp(u.capturedAt)
-            : '<span style="color:var(--text-dim)">never</span>',
-          exhaustedCell: q == null
-            ? '<span style="color:var(--text-dim)">broker offline</span>'
-            : exhausted
-              ? `<span class="quota-pct high">exhausted${q.exhausted_until ? ' → ' + formatTimestamp(q.exhausted_until) : ''}</span>`
-              : '<span class="quota-pct">ok</span>',
-          violations: q && q.threshold_violations
-            ? `<span class="quota-pct mid">${q.threshold_violations}</span>`
-            : '<span style="color:var(--text-dim)">0</span>',
-          expires: formatTimestamp(a.expiresAt),
-        };
-      });
-      const refreshBtn = (label) =>
-        `<button class="btn" title="Probe live quota now (billed Anthropic call)" onclick="refreshQuota('${escapeHtml(label)}', true)">↻</button>`;
-      const rows = enriched.map(e => {
-        const { a, usedBy, fiveH, sevenD, captured, exhaustedCell, violations, expires } = e;
-        return `
-        <tr>
-          <td>${escapeHtml(a.label)}</td>
-          <td><span class="health-badge ${escapeHtml(a.health)}">${escapeHtml(a.health)}</span></td>
-          <td>${renderUsedByCell(usedBy)}</td>
-          <td>${fiveH}</td>
-          <td>${sevenD}</td>
-          <td title="quota probed at">${captured}</td>
-          <td>${exhaustedCell}</td>
-          <td>${violations}</td>
-          <td>${expires}</td>
-          <td>${refreshBtn(a.label)} <button class="btn" onclick="openPromoteModal('${escapeHtml(a.label)}')">Make fleet-active…</button></td>
-        </tr>
-      `;
-      }).join('');
-      const cards = enriched.map(e => {
-        const { a, usedBy, fiveH, sevenD, captured, exhaustedCell, violations, expires } = e;
-        return `
-        <div class="account-card">
-          <div class="account-card-header">
-            <div class="account-label">${escapeHtml(a.label)}</div>
-            <span class="health-badge ${escapeHtml(a.health)}" style="margin-left:auto">${escapeHtml(a.health)}</span>
-          </div>
-          <div class="account-usage">${renderUsedByCell(usedBy)}</div>
-          <div class="card-meta" style="padding:0">
-            <div class="meta-item"><label>5h usage </label><span>${fiveH}</span></div>
-            <div class="meta-item"><label>7d usage </label><span>${sevenD}</span></div>
-            <div class="meta-item"><label>Probed </label><span>${captured}</span></div>
-            <div class="meta-item"><label>Quota </label><span>${exhaustedCell}</span></div>
-            <div class="meta-item"><label>Threshold viols </label><span>${violations}</span></div>
-            <div class="meta-item"><label>Expires </label><span>${expires}</span></div>
-          </div>
-          <div style="margin-top:0.75rem">
-            ${refreshBtn(a.label)}
-            <button class="btn" onclick="openPromoteModal('${escapeHtml(a.label)}')">Make fleet-active…</button>
-          </div>
-        </div>
-      `;
-      }).join('');
-      container.innerHTML = `
-        <div style="margin-bottom:0.6rem;display:flex;align-items:center;gap:0.75rem">
-          <button class="btn" onclick="refreshQuota(null, true)">↻ Refresh all quota</button>
-          <span style="font-size:0.78rem;color:var(--text-dim)">
-            5h/7d usage is cached (≤10 min); ↻ forces a live probe (one billed Anthropic call per account).
-          </span>
-        </div>
-        <div class="accounts-table-wrap">
-          <table class="accounts-table">
-            <thead><tr>
-              <th>Label</th><th>Health</th><th>Used by</th>
-              <th>5h&nbsp;%</th><th>7d&nbsp;%</th><th>Probed</th>
-              <th>Quota</th><th>Threshold viols</th><th>Expires</th><th></th>
-            </tr></thead>
-            <tbody>${rows}</tbody>
-          </table>
-        </div>
-        <div class="accounts-grid">${cards}</div>
-      `;
-    }
-    // Refresh cached quota. label=null → all accounts. force=true →
-    // bypass the server's 10-min TTL (the per-account / "all" buttons).
-    async function refreshQuota(label, force) {
-      try {
-        showToast(label ? `Probing ${label}…` : 'Probing all accounts…', true);
-        const res = await fetch(`${API}/api/accounts/quota/refresh`, {
-          method: 'POST',
-          headers: { ...authHeaders(), 'Content-Type': 'application/json' },
-          body: JSON.stringify(label ? { labels: [label], force: !!force } : { force: !!force }),
-        });
-        const data = await res.json();
-        if (!res.ok || !data.ok) {
-          showToast(`Quota probe failed: ${data.error || `HTTP ${res.status}`}`, false);
-        } else {
-          showToast('Quota updated', true);
-        }
-        fetchAccounts(); // re-pull; handleGetAccounts now serves the fresh cache
-      } catch (err) {
-        showToast(`Quota probe failed: ${err.message}`, false);
-      }
-    }
-    function renderUsedByCell(usedBy) {
-      // RFC-H: a single fleet-active account plus optional per-agent
-      // overrides. `usedBy` is the flat list of agents currently bound
-      // to this account (either via fleet-active or an override). No
-      // more primary/fallback split — binding is singular post-RFC-H.
-      if (!usedBy || usedBy.length === 0) {
-        return '<span style="color:var(--text-dim)">unused</span>';
-      }
-      const MAX_INLINE = 4;
-      const title = `bound: ${usedBy.join(', ')}`;
-      const shown = usedBy.length <= MAX_INLINE
-        ? usedBy.map(escapeHtml).join(', ')
-        : `${usedBy.slice(0, MAX_INLINE).map(escapeHtml).join(', ')} +${usedBy.length - MAX_INLINE}`;
-      return `<span class="usage-pill primary" title="${escapeHtml(title)}">${shown}</span>`;
-    }
-    function renderSystemHealth(h) {
-      const container = document.getElementById('system');
-      const b = h.broker || {};
-      const hs = h.hindsight || {};
-      const hd = h.hostd || {};
-      const dot = (ok) => `<span class="status-dot ${ok ? 'active' : 'inactive'}" style="display:inline-block;vertical-align:middle"></span>`;
-      const dim = (s) => `<span style="color:var(--text-dim)">${escapeHtml(s)}</span>`;
-      const brokerBody = b.reachable
-        ? `<div class="card-meta" style="padding:0">
-             <div class="meta-item"><label>Fleet-active </label><span>${escapeHtml(b.active || '—')}</span></div>
-             <div class="meta-item"><label>Accounts </label><span>${b.accounts ?? '—'}</span></div>
-             <div class="meta-item"><label>Agents </label><span>${b.agents ?? '—'}</span></div>
-             <div class="meta-item"><label>Consumers </label><span>${b.consumers ?? '—'}</span></div>
-           </div>`
-        : `<div style="color:var(--red)">unreachable${b.error ? ' — ' + escapeHtml(b.error) : ''}</div>`;
-      const statelessCell = hs.mcpStateless == null
-        ? dim('unknown')
-        : hs.mcpStateless ? 'stateless' : '<span style="color:var(--yellow)">stateful</span>';
-      const hindsightBody = `
-        <div class="card-meta" style="padding:0">
-          <div class="meta-item"><label>Container </label><span>${hs.containerStatus ? escapeHtml(hs.containerStatus) : dim('absent')}</span></div>
-          <div class="meta-item"><label>Model </label><span>${hs.model ? escapeHtml(hs.model) : dim('unknown')}</span></div>
-          <div class="meta-item"><label>Provider </label><span>${hs.provider ? escapeHtml(hs.provider) : dim('unknown')}</span></div>
-          <div class="meta-item"><label>MCP </label><span>${statelessCell}</span></div>
-        </div>`;
-      let hostdBody;
-      if (!hd.auditLogPresent) {
-        hostdBody = dim(hd.error ? `audit log error: ${hd.error}` : 'no audit log yet (hostd has handled no privileged verbs)');
-      } else if (!hd.recent || hd.recent.length === 0) {
-        hostdBody = dim('audit log present, no entries');
-      } else {
-        const rows = hd.recent.slice().reverse().map(e => {
-          const caller = e.caller && e.caller.kind === 'agent' ? escapeHtml(e.caller.name) : 'operator';
-          const ok = e.result === 'ok' || e.exit_code === 0;
-          return `<tr>
-            <td>${dot(ok)} ${escapeHtml(e.op || '?')}</td>
-            <td>${caller}</td>
-            <td>${escapeHtml(e.result || '?')}${e.exit_code != null ? ` (${e.exit_code})` : ''}</td>
-            <td>${escapeHtml(shortTs(e.ts))}</td>
-          </tr>`;
-        }).join('');
-        hostdBody = `<table class="accounts-table" style="margin-top:0.5rem">
-          <thead><tr><th>Verb</th><th>Caller</th><th>Result</th><th>When</th></tr></thead>
-          <tbody>${rows}</tbody></table>`;
-      }
-      container.innerHTML = `
-        <div class="agents-grid">
-          <div class="agent-card"><div class="card-header" style="cursor:default">
-            ${dot(b.reachable)}<span class="agent-name">auth-broker</span></div>
-            <div style="padding:0 1.25rem 1rem">${brokerBody}</div></div>
-          <div class="agent-card"><div class="card-header" style="cursor:default">
-            ${dot(hs.running)}<span class="agent-name">hindsight</span></div>
-            <div style="padding:0 1.25rem 1rem">${hindsightBody}</div></div>
-        </div>
-        <div class="agent-card" style="margin-top:1rem"><div class="card-header" style="cursor:default">
-          ${dot(hd.auditLogPresent)}<span class="agent-name">hostd — recent privileged verbs</span></div>
-          <div style="padding:0 1.25rem 1rem">${hostdBody}</div></div>`;
-    }
-    function shortTs(ts) {
-      if (!ts) return '—';
-      // 2026-05-15T04:15:13.465Z → 2026-05-15 04:15:13
-      return String(ts).replace('T', ' ').replace(/\.\d+Z?$/, '').replace(/Z$/, '');
-    }
-    function renderGoogleAccounts(rows) {
-      const container = document.getElementById('google');
-      if (!rows || rows.length === 0) {
-        container.innerHTML = '<div class="loading">No Google accounts. Add one under <code>google_accounts:</code> in switchroom.yaml and run <code>switchroom auth google account add</code>.</div>';
-        return;
-      }
-      const dim = (s) => `<span style="color:var(--text-dim)">${escapeHtml(s)}</span>`;
-      const cards = rows.map(a => {
-        const expires = a.expiresAt ? formatTimestamp(a.expiresAt) : dim('—');
-        const scope = a.scope ? escapeHtml(a.scope) : dim('broker offline');
-        const known = a.brokerKnown
-          ? '<span class="usage-pill primary">slot present</span>'
-          : '<span style="color:var(--yellow)">config-only (no broker slot)</span>';
-        const acl = (a.enabledFor && a.enabledFor.length)
-          ? a.enabledFor.map(escapeHtml).join(', ')
-          : dim('no agents enabled');
-        return `
-        <div class="account-card">
-          <div class="account-card-header">
-            <div class="account-label">${escapeHtml(a.account)}</div>
-            <span style="margin-left:auto">${known}</span>
-          </div>
-          <div class="account-usage"><label style="color:var(--text-dim);opacity:.7">Enabled for: </label>${acl}</div>
-          <div class="card-meta" style="padding:0">
-            <div class="meta-item"><label>Expires </label><span>${expires}</span></div>
-            <div class="meta-item" title="${a.scope ? escapeHtml(a.scope) : ''}"><label>Scope </label><span>${a.scope ? escapeHtml(a.scope.split(' ').length + ' scope(s)') : dim('—')}</span></div>
-            <div class="meta-item"><label>Client </label><span>${a.clientId ? escapeHtml(a.clientId.slice(0, 16) + '…') : dim('—')}</span></div>
-          </div>
-        </div>`;
-      }).join('');
-      container.innerHTML = `<div class="accounts-grid">${cards}</div>`;
-    }
-    function renderSchedule(data) {
-      const container = document.getElementById('schedule');
-      const entries = (data && data.entries) || [];
-      const recent = (data && data.recentByAgent) || {};
-      if (entries.length === 0) {
-        container.innerHTML = '<div class="loading">No <code>schedule:</code> entries in any agent\'s cascade-resolved config.</div>';
-        return;
-      }
-      const dim = (s) => `<span style="color:var(--text-dim)">${escapeHtml(s)}</span>`;
-      // Group entries by agent.
-      const byAgent = {};
-      for (const e of entries) (byAgent[e.agent] ||= []).push(e);
-      const cards = Object.keys(byAgent).sort().map(agent => {
-        const rows = byAgent[agent].map(e => `
-          <tr>
-            <td><code>${escapeHtml(e.cron)}</code></td>
-            <td title="${escapeHtml(e.prompt)}">${escapeHtml(e.prompt.length > 70 ? e.prompt.slice(0, 70) + '…' : e.prompt)}</td>
-          </tr>`).join('');
-        const fires = (recent[agent] || []).slice().reverse();
-        const fireRows = fires.length === 0
-          ? `<tr><td colspan="3">${dim('no recorded fires yet')}</td></tr>`
-          : fires.map(f => {
-              const ok = f.exitCode === 0;
-              return `<tr>
-                <td><span class="status-dot ${ok ? 'active' : 'inactive'}" style="display:inline-block;vertical-align:middle"></span> ${escapeHtml(shortTs(new Date(f.startedAt).toISOString()))}</td>
-                <td>${escapeHtml(String(f.outputSummary || '').slice(0, 80))}</td>
-                <td>${ok ? 'ok' : 'exit ' + escapeHtml(String(f.exitCode))}</td>
-              </tr>`;
-            }).join('');
-        return `
-        <div class="agent-card" style="margin-bottom:1rem">
-          <div class="card-header" style="cursor:default">
-            <span class="agent-name">${escapeHtml(agent)}</span>
-            <span class="agent-topic">${byAgent[agent].length} schedule entr${byAgent[agent].length === 1 ? 'y' : 'ies'}</span>
-          </div>
-          <div style="padding:0 1.25rem 1rem">
-            <table class="accounts-table"><thead><tr><th>Cron</th><th>Prompt</th></tr></thead><tbody>${rows}</tbody></table>
-            <div style="margin-top:0.6rem;font-size:0.8rem;color:var(--text-dim)">Recent fires (from scheduler.jsonl)</div>
-            <table class="accounts-table"><thead><tr><th>When</th><th>Result</th><th>Exit</th></tr></thead><tbody>${fireRows}</tbody></table>
-          </div>
-        </div>`;
-      }).join('');
-      container.innerHTML = cards;
-    }
-    function renderApprovals(data) {
-      const container = document.getElementById('approvals');
-      const dim = (s) => `<span style="color:var(--text-dim)">${escapeHtml(s)}</span>`;
-      if (!data || data.reachable === false) {
-        const why = (data && data.error) ? escapeHtml(data.error) : 'approval-kernel not reachable from host';
-        container.innerHTML = `<div class="loading">Approval ledger unavailable — ${why}</div>`;
-        return;
-      }
-      const decisions = data.decisions || [];
-      if (decisions.length === 0) {
-        container.innerHTML = '<div class="loading">No approval decisions recorded yet.</div>';
-        return;
-      }
-      const now = Date.now();
-      const statusOf = (d) => {
-        if (d.revoked_at) return ['revoked', 'inactive'];
-        if (d.ttl_expires_at && d.ttl_expires_at < now) return ['expired', 'inactive'];
-        return ['active', 'active'];
-      };
-      const rows = decisions.map(d => {
-        const [label, dot] = statusOf(d);
-        // Drive write scopes are the headline use of the approval flow —
-        // make them visually distinct.
-        const isDrive = /(^|:)(doc|drive|gdrive|sheets)/i.test(d.scope || '');
-        const scopeCell = isDrive
-          ? `<span class="usage-pill primary">${escapeHtml(d.scope)}</span>`
-          : escapeHtml(d.scope || '—');
-        return `
-        <tr>
-          <td><span class="status-dot ${dot}" style="display:inline-block;vertical-align:middle"></span> ${escapeHtml(label)}</td>
-          <td>${escapeHtml(d.agent_unit || '—')}</td>
-          <td>${scopeCell}</td>
-          <td>${escapeHtml(d.action || '—')}</td>
-          <td>${escapeHtml(d.decision || '—')}</td>
-          <td>${d.granted_at ? formatTimestamp(d.granted_at) : dim('—')}</td>
-          <td>${d.ttl_expires_at ? formatTimestamp(d.ttl_expires_at) : dim('—')}</td>
-          <td title="${d.revoke_reason ? escapeHtml(d.revoke_reason) : ''}">${d.revoked_at ? formatTimestamp(d.revoked_at) : dim('—')}</td>
-        </tr>`;
-      }).join('');
-      container.innerHTML = `
-        <div style="margin-bottom:0.6rem;font-size:0.8rem;color:var(--text-dim)">
-          Read-only view via the kernel operator socket — ${decisions.length} decision(s). Drive scopes highlighted.
-        </div>
-        <div class="accounts-table-wrap">
-          <table class="accounts-table">
-            <thead><tr>
-              <th>Status</th><th>Agent</th><th>Scope</th><th>Action</th>
-              <th>Decision</th><th>Granted</th><th>TTL expires</th><th>Revoked</th>
-            </tr></thead>
-            <tbody>${rows}</tbody>
-          </table>
-        </div>`;
-    }
-    function openPromoteModal(label) {
-      // RFC-H: there is no per-agent promote. Setting the fleet-active
-      // account is a single fleet-wide knob (POST /api/auth/use); the
-      // broker fans the new credentials out to every agent's per-agent
-      // mirror. Confirm intent, then call.
-      const html = `
-        <div class="modal-backdrop" id="promote-backdrop">
-          <div class="modal">
-            <h3>Make <code>${escapeHtml(label)}</code> the fleet-active account</h3>
-            <div style="margin-top:0.5rem; font-size:0.85rem;">
-              Every agent without a per-agent <code>auth.override</code> will
-              switch to <code>${escapeHtml(label)}</code>. The broker fans
-              the credentials out immediately; agents pick them up on their
-              next turn (no manual restart needed post-RFC-H).
-            </div>
-            <div class="modal-actions">
-              <button class="btn" onclick="closePromoteModal()">Cancel</button>
-              <button class="btn btn-restart" onclick="confirmPromote('${escapeHtml(label)}')">Make fleet-active</button>
-            </div>
-          </div>
-        </div>`;
-      document.body.insertAdjacentHTML('beforeend', html);
-    }
-    function closePromoteModal() {
-      const el = document.getElementById('promote-backdrop');
-      if (el) el.remove();
-    }
-    async function confirmPromote(label) {
-      closePromoteModal();
-      try {
-        // RFC-H endpoint. Body carries the label (avoids URL-encoding
-        // past the account-label charset). Response: { ok, active, fanned }.
-        const res = await fetch(`${API}/api/auth/use`, {
-          method: 'POST',
-          headers: { ...authHeaders(), 'Content-Type': 'application/json' },
-          body: JSON.stringify({ account: label }),
-        });
-        const data = await res.json();
-        if (!res.ok || !data.ok) {
-          showToast(`Set fleet-active failed: ${data.error || `HTTP ${res.status}`}`, false);
-          return;
-        }
-        const fanned = data.fanned || [];
-        const msg = fanned.length > 0
-          ? `Fleet-active is now ${data.active}. Broker fanned to: ${fanned.join(', ')}.`
-          : `Fleet-active is now ${data.active}.`;
-        showToast(msg, true);
-        fetchAccounts();
-      } catch (err) {
-        showToast(`Set fleet-active failed: ${err.message}`, false);
-      }
-    }
-    function showToast(msg, ok) {
-      const el = document.createElement('div');
-      el.className = `toast ${ok ? 'ok' : 'err'}`;
-      el.textContent = msg;
-      document.body.appendChild(el);
-      setTimeout(() => el.remove(), 6000);
-    }
-    function formatTimestamp(ms) {
-      if (!ms) return '—';
-      const d = new Date(ms);
-      if (isNaN(d.getTime())) return '—';
-      const diff = ms - Date.now();
-      const abs = Math.abs(diff);
-      const mins = Math.floor(abs / 60000);
-      if (mins < 60) return diff < 0 ? `${mins}m ago` : `in ${mins}m`;
-      const hrs = Math.floor(mins / 60);
-      if (hrs < 24) return diff < 0 ? `${hrs}h ago` : `in ${hrs}h`;
-      const days = Math.floor(hrs / 24);
-      return diff < 0 ? `${days}d ago` : `in ${days}d`;
-    }
-    function toggleDetails(name) {
-      if (openDetails.has(name)) {
-        openDetails.delete(name);
-        render();
-      } else {
-        openDetails.add(name);
-        render();
-        if (!agentDetails[name]) fetchAgentDetail(name);
-      }
-    }
-    async function toggleLogs(name) {
-      if (openLogs.has(name)) {
-        openLogs.delete(name);
-      } else {
-        openLogs.add(name);
-        await loadLogs(name);
-      }
-      render();
-    }
-    async function loadLogs(name) {
-      const el = document.getElementById(`log-output-${name}`);
-      if (!el) return;
-      el.textContent = 'Loading...';
-      try {
-        const res = await fetch(`${API}/api/agents/${encodeURIComponent(name)}/logs?lines=50`, { headers: authHeaders() });
-        const data = await res.json();
-        el.textContent = data.ok ? (data.logs || '(no output)') : `Error: ${data.error}`;
-        el.scrollTop = el.scrollHeight;
-      } catch (err) {
-        el.textContent = `Failed: ${err.message}`;
-      }
-    }
-    async function agentAction(name, action) {
-      try {
-        const res = await fetch(`${API}/api/agents/${encodeURIComponent(name)}/${action}`, {
-          method: 'POST',
-          headers: authHeaders()
-        });
-        const data = await res.json();
-        if (!data.ok) showError(`${action} ${name}: ${data.error}`);
-        // Refresh after brief delay to let systemd settle
-        setTimeout(fetchAgents, 1000);
-      } catch (err) {
-        showError(`${action} ${name}: ${err.message}`);
-      }
-    }
-    function connectWebSocket() {
-      let wsUrl = `${location.protocol === 'https:' ? 'wss:' : 'ws:'}//${location.host}/ws`;
-      if (TOKEN) wsUrl += `?token=${encodeURIComponent(TOKEN)}`;
-      ws = new WebSocket(wsUrl);
-      ws.onmessage = (event) => {
-        try {
-          const msg = JSON.parse(event.data);
-          if (msg.type === 'log' && msg.agent) {
-            const el = document.getElementById(`log-output-${msg.agent}`);
-            if (el && openLogs.has(msg.agent)) {
-              el.textContent += msg.data;
-              el.scrollTop = el.scrollHeight;
-            }
-          }
-        } catch {}
-      };
-      ws.onclose = () => {
-        setTimeout(connectWebSocket, 3000);
-      };
-      ws.onerror = () => {
-        ws.close();
-      };
-    }
-    // Init. Summary is the default visible tab; fetchAgents still runs
-    // (populates the agents tab + keeps the 10s fleet poll warm + the
-    // log WS depends on it). Summary is fetched on init + on tab-switch
-    // only — deliberately NOT on the 10s interval (it fans out to
-    // system-health etc.; on-demand refresh is enough).
-    fetchSummary();
-    fetchAgents();
-    connectWebSocket();
-    setInterval(fetchAgents, 10000);
-  </script>
-</body>
-</html>