switchroom 0.15.26 → 0.15.27

package/dist/cli/ui/index.html

@@ -227,6 +227,57 @@
       font-size: 0.85rem;
     }
 
+    /* ProblemDetail block — an actionable error/degraded state with a
+       remediation. Reuses the error-banner palette but in a muted card so it
+       reads as "here is what to do", not just "something is broken". */
+    .problem {
+      background: rgba(248,113,113,0.08);
+      border: 1px solid rgba(248,113,113,0.28);
+      border-radius: var(--radius);
+      padding: 0.75rem 1rem;
+      margin-bottom: 1rem;
+      font-size: 0.85rem;
+    }
+    .problem.muted {
+      background: var(--surface-hover);
+      border-color: var(--border);
+    }
+    .problem-title { font-weight: 600; color: var(--text); }
+    .problem.muted .problem-title { color: var(--text); }
+    .problem:not(.muted) .problem-title { color: var(--red); }
+    .problem-detail { color: var(--text-dim); margin-top: 0.25rem; }
+    .problem-remediation { margin-top: 0.55rem; }
+    .problem-remediation .rem-label { color: var(--text-dim); display: block; margin-bottom: 0.3rem; }
+    .problem-cmd {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5rem;
+      flex-wrap: wrap;
+    }
+    .problem-cmd code {
+      background: rgba(0,0,0,0.35);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      padding: 0.3rem 0.5rem;
+      font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace;
+      font-size: 0.75rem;
+      color: var(--text);
+      user-select: all;
+      word-break: break-all;
+    }
+    .problem-copy {
+      padding: 0.25rem 0.6rem;
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      background: transparent;
+      color: var(--blue);
+      font-size: 0.72rem;
+      cursor: pointer;
+      flex-shrink: 0;
+    }
+    .problem-copy:hover { background: var(--surface-hover); }
+    .problem-remediation a { color: var(--blue); }
+
     .loading {
       text-align: center;
       padding: 4rem;
@@ -507,15 +558,30 @@
 
     async function fetchAgentDetail(name) {
       try {
-        const [accRes, subRes, cfgRes] = await Promise.all([
+        const [accRes, subRes, cfgRes, turnsRes] = 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() }),
+          // Recent turns — resilient: a failure leaves turns null and the
+          // other sections still render (see renderAgentDetailInner).
+          fetch(`${API}/api/agents/${encodeURIComponent(name)}/turns?limit=10`, { headers: authHeaders() }),
         ]);
+        // The /turns success response is a BARE Turn[] array (same
+        // convention as /accounts + /subagents above); only the error
+        // path sends { ok:false, error }. So read the array directly —
+        // null on a non-ok response / malformed payload.
+        let turns = null;
+        if (turnsRes.ok) {
+          try {
+            const body = await turnsRes.json();
+            turns = Array.isArray(body) ? body : null;
+          } catch { turns = null; }
+        }
         agentDetails[name] = {
           accounts: accRes.ok ? await accRes.json() : null,
           subagents: subRes.ok ? await subRes.json() : null,
           config: cfgRes.ok ? await cfgRes.json() : null,
+          turns,
         };
         render();
       } catch (err) {
@@ -548,11 +614,7 @@
     function renderMemoryHealth(m) {
       const container = document.getElementById('memory');
       if (!m.reachable) {
-        container.innerHTML = `<div class="agent-card" style="padding:1rem">
-          <span class="status-dot inactive" style="display:inline-block;vertical-align:middle"></span>
-          <strong> Hindsight unreachable</strong>
-          <div style="color:var(--text-dim);margin-top:.5rem">${escapeHtml(m.url || '')} is not serving — agent memory (recall, retain, mental models) is down.</div>
-        </div>`;
+        container.innerHTML = renderProblem(problemFor('hindsight-down', { url: m.url }));
         return;
       }
       const statusDot = (s) => `<span class="status-dot ${s === 'ok' ? 'active' : s === 'warn' ? 'auth-warning' : 'inactive'}" style="display:inline-block;vertical-align:middle"></span>`;
@@ -563,7 +625,16 @@
         if (isNaN(d)) return '';
         return d < 1 ? 'today' : `${Math.round(d)}d ago`;
       };
+      // A bank "has a user-profile model" if any mental model is named
+      // like user-profile (mirrors hindsight's exact-name check, but
+      // tolerant of the "User Profile" display variant for the UI hint).
+      const hasUserProfile = (b) => (b.mentalModels || []).some(mm =>
+        /^user[- ]?profile$/i.test(String(mm.name || '')));
+      // JSON for a single-quoted onclick attribute: escape the quote
+      // chars that could break out of the attribute (', &, <, >).
+      const attrJson = (v) => escapeHtml(JSON.stringify(v));
       const cards = (m.banks || []).map(b => {
+        const bankJs = attrJson(b.bank);
         const models = (b.mentalModels || []).map(mm => {
           const ts = mm.lastRefreshedAt || mm.createdAt;
           const stale = ts && (Date.now() - Date.parse(ts)) > 7 * 86400000;
@@ -575,6 +646,38 @@
         const corruptLine = (b.corruptedMentalModelNames || []).length > 0
           ? `<div style="color:var(--red);margin-top:.4rem">⚠ corrupted mental model(s): ${escapeHtml(b.corruptedMentalModelNames.join(', '))} — content is an LLM failure message; refresh once quota recovers</div>`
           : '';
+        // --- Remediation buttons (audit ranks 7 + 22) ---
+        // Each triggers an HTTP poke at hindsight; hindsight does the LLM
+        // work on its own provider — the dashboard makes NO model call.
+        const buttons = [];
+        // Reprocess the extraction-gap docs.
+        if (b.recentUnextractedCount > 0) {
+          const n = Math.min(b.recentUnextractedCount, (b.unextractedDocIds || []).length) || b.recentUnextractedCount;
+          buttons.push(`<button class="btn" type="button" onclick='memReprocess(${bankJs}, this)'>Reprocess ${n} doc${n === 1 ? '' : 's'}</button>`);
+        }
+        // Refresh each corrupted/stale model (map corrupted NAME → id).
+        const affectedIds = new Set();
+        for (const name of (b.corruptedMentalModelNames || [])) {
+          const mm = (b.mentalModels || []).find(x => x.name === name);
+          if (mm && mm.id) affectedIds.add(mm.id);
+        }
+        for (const mm of (b.mentalModels || [])) {
+          const ts = mm.lastRefreshedAt || mm.createdAt;
+          const stale = ts && (Date.now() - Date.parse(ts)) > 7 * 86400000;
+          if (stale && mm.id) affectedIds.add(mm.id);
+        }
+        for (const mm of (b.mentalModels || [])) {
+          if (!affectedIds.has(mm.id)) continue;
+          const idJs = attrJson(mm.id), nameJs = attrJson(mm.name);
+          buttons.push(`<button class="btn" type="button" onclick='memRefreshModel(${bankJs}, ${idJs}, ${nameJs}, this)'>Refresh ${escapeHtml(mm.name)}</button>`);
+        }
+        // Build the user-profile model when the bank has data but no profile.
+        if (b.totalDocuments > 0 && !hasUserProfile(b)) {
+          buttons.push(`<button class="btn" type="button" onclick='memBuildProfile(${bankJs}, this)'>Build profile</button>`);
+        }
+        const buttonRow = buttons.length
+          ? `<div class="rem-actions" style="margin-top:.6rem;display:flex;flex-wrap:wrap;gap:.4rem">${buttons.join('')}</div>`
+          : '';
         return `<div class="agent-card">
           <div class="card-header" style="cursor:default">
             ${statusDot(b.status)}<span class="agent-name">${escapeHtml(b.bank)}</span>
@@ -591,12 +694,59 @@
             ${models ? `<div class="card-meta" style="padding:.4rem 0 0">${models}</div>` : ''}
             ${corruptLine}
             ${gapLine}
+            ${buttonRow}
           </div>
         </div>`;
       }).join('');
       container.innerHTML = `<div class="agents-grid">${cards || '<div style="color:var(--text-dim)">No agent banks configured.</div>'}</div>`;
     }
 
+    // --- Memory remediation actions ---
+    // Each pokes a hindsight REST/MCP endpoint via the web's POST routes.
+    // Hindsight does the LLM extraction on its OWN claude-code provider;
+    // the dashboard never calls a model. A confirm() gates each because
+    // it consumes subscription quota (low-risk, but explicit).
+    const REM_CONFIRM = 'This triggers memory re-processing on the subscription. Continue?';
+
+    // `label` names the action for the failure toast; `successMsg(data)`
+    // builds the success toast from the response body.
+    async function memRemediate(btn, url, payload, working, label, successMsg) {
+      if (!confirm(REM_CONFIRM)) return;
+      const orig = btn ? btn.textContent : '';
+      if (btn) { btn.disabled = true; btn.textContent = working; }
+      try {
+        const res = await fetch(`${API}${url}`, {
+          method: 'POST',
+          headers: { ...authHeaders(), 'Content-Type': 'application/json' },
+          body: JSON.stringify(payload),
+        });
+        const data = await res.json().catch(() => ({}));
+        if (!res.ok || !data.ok) {
+          showToast(`${label} failed: ${data.error || `HTTP ${res.status}`}`, false);
+        } else {
+          showToast(successMsg(data), true);
+        }
+      } catch (err) {
+        showToast(`${label} failed: ${err.message}`, false);
+      } finally {
+        if (btn) { btn.disabled = false; btn.textContent = orig; }
+        fetchMemoryHealth();
+      }
+    }
+
+    function memReprocess(bank, btn) {
+      memRemediate(btn, '/api/memory/reprocess', { bank }, 'Reprocessing…', 'Reprocess',
+        (d) => `Reprocess triggered (${d.triggered ?? 0} doc${(d.triggered ?? 0) === 1 ? '' : 's'}${d.failed ? `, ${d.failed} failed` : ''})`);
+    }
+    function memRefreshModel(bank, modelId, name, btn) {
+      memRemediate(btn, '/api/memory/refresh-model', { bank, modelId }, 'Refreshing…', 'Refresh',
+        () => `Refresh triggered for ${name}`);
+    }
+    function memBuildProfile(bank, btn) {
+      memRemediate(btn, '/api/memory/build-profile', { bank }, 'Building…', 'Build profile',
+        () => 'Profile build triggered');
+    }
+
     async function fetchConnections() {
       // Each fetch falls back independently (.catch → default). A single
       // network blip — e.g. one endpoint momentarily unreachable — must NOT
@@ -783,10 +933,21 @@
     }
 
     async function fetchApprovals() {
+      // Fetch the kernel decision ledger AND the standing capability grants
+      // in parallel, INDEPENDENTLY: a failure of one must not blank the
+      // other (mirror the resilient `safe` pattern in fetchConnections).
+      // Standing grants (the broker grants DB) are the section that's
+      // actually useful — the kernel ledger is honestly empty on most
+      // installs.
+      const safe = (p, fallback) =>
+        p.then(r => r.ok ? r.json() : fallback).catch(() => fallback);
       try {
-        const res = await fetch(`${API}/api/approvals`, { headers: authHeaders() });
-        if (!res.ok) throw new Error(`HTTP ${res.status}`);
-        renderApprovals(await res.json());
+        const [approvals, grants] = await Promise.all([
+          safe(fetch(`${API}/api/approvals`, { headers: authHeaders() }), null),
+          safe(fetch(`${API}/api/grants`, { headers: authHeaders() }),
+            { reachable: false, grants: [], error: 'Failed to fetch standing grants.' }),
+        ]);
+        renderApprovals(approvals, grants);
         clearError();
       } catch (err) {
         showError(`Failed to fetch approvals: ${err.message}`);
@@ -808,22 +969,29 @@
       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.
+    // Fleet overview — ONE round-trip to the server-side aggregate
+    // (/api/summary), which pulls each part through the same per-tab
+    // cache so a Summary open warms the tabs and they can never disagree.
+    // Each tile still degrades independently: the server nulls any part
+    // whose producer threw, and a whole-fetch failure leaves the prior
+    // render in place.
     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'),
-      ]);
+      let summary;
+      try {
+        const r = await fetch(`${API}/api/summary`, { headers: authHeaders() });
+        if (!r.ok) throw new Error(`HTTP ${r.status}`);
+        summary = await r.json();
+      } catch (err) {
+        // Degraded: keep whatever's already rendered (don't blank the
+        // tab on a transient blip) and surface the error.
+        el.classList.remove('loading');
+        showError(`Failed to fetch summary: ${err.message}`);
+        return;
+      }
+      const ag = summary.agents, sys = summary.systemHealth,
+            appr = summary.approvals, sched = summary.schedule,
+            accts = summary.accounts;
       clearError();
       const tile = (title, body, ok) => `
         <div class="agent-card" style="min-width:220px">
@@ -899,7 +1067,37 @@
       } 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>`;
+      // "data as of" — the summary's freshness is its OLDEST part (server
+      // sends the min dataAsOf). A tiny muted line; refreshed on every
+      // tab-open. `formatTimestamp` renders it as "Ns/Nm ago".
+      const asOf = (typeof summary.dataAsOf === 'number' && summary.dataAsOf > 0)
+        ? `<div style="color:var(--text-dim);font-size:.75rem;margin:.25rem 0 .5rem">data as of ${escapeHtml(formatTimestamp(summary.dataAsOf))}</div>`
+        : '';
+      el.innerHTML = `${renderAttention(summary.attention)}${asOf}<div class="agents-grid">${agentsTile}${brokerTile}${hsTile}${hostdTile}${apprTile}${schedTile}${quotaTile}</div>`;
+    }
+
+    // "Needs attention" triage strip — the FIRST block on the Summary tab.
+    // The server derives `attention: AttentionItem[]` (severity-sorted,
+    // capped) from the parts the summary already carries; each item is
+    // clickable → switchTab(item.tab). Reuses the .problem styling
+    // (red title for critical/warn, muted for info). Empty → a calm
+    // "nothing needs attention" line. Every interpolated value is escaped.
+    function renderAttention(items) {
+      if (!Array.isArray(items) || items.length === 0) {
+        return `<div class="problem muted" style="margin-bottom:.75rem"><div class="problem-title">✓ Nothing needs attention</div></div>`;
+      }
+      const rows = items.map((it) => {
+        const sev = (it && it.severity) || 'info';
+        const muted = sev === 'info' ? ' muted' : '';
+        const tab = String((it && it.tab) || 'summary');
+        const title = `<div class="problem-title">${escapeHtml((it && it.title) || 'Attention')}</div>`;
+        const detail = it && it.detail
+          ? `<div class="problem-detail">${escapeHtml(it.detail)}</div>`
+          : '';
+        // Whole row clickable → jump to the tab to act on it.
+        return `<div class="problem${muted}" role="button" tabindex="0" style="cursor:pointer;margin-bottom:.4rem" onclick="switchTab('${escapeHtml(tab)}')" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();switchTab('${escapeHtml(tab)}')}">${title}${detail}</div>`;
+      }).join('');
+      return `<div style="margin-bottom:.75rem">${rows}</div>`;
     }
 
     function showError(msg) {
@@ -922,6 +1120,206 @@
       }[c]));
     }
 
+    // ───────────────────────────────────────────────────────────────────
+    // ProblemDetail — actionable error/degraded rendering.
+    //
+    // A ProblemDetail is `{ title, detail?, remediation? }` where
+    // `remediation = { kind, label, value }` and kind ∈
+    // 'command' | 'link' | 'telegram' | 'none'. renderProblem() turns it into
+    // a styled block; problemFor() is a small catalog mapping a KNOWN
+    // condition → a ProblemDetail (with the next-step command baked in).
+    //
+    // XSS: every server-derived string (title/detail/error text) goes through
+    // escapeHtml. Remediation `value` for 'command' is always a static
+    // literal from the catalog, but it's escaped anyway for defence in depth.
+    // ───────────────────────────────────────────────────────────────────
+
+    // Copy a command to the clipboard. Degrades gracefully where the
+    // Clipboard API is unavailable (insecure context / old browser): the
+    // <code> is `user-select:all` so the operator can still copy by hand.
+    function copyProblemCmd(btn) {
+      const text = btn && btn.getAttribute('data-copy');
+      if (text == null) return;
+      const flash = (label) => {
+        const prev = btn.textContent;
+        btn.textContent = label;
+        setTimeout(() => { btn.textContent = prev; }, 1200);
+      };
+      try {
+        if (navigator.clipboard && navigator.clipboard.writeText) {
+          navigator.clipboard.writeText(text).then(() => flash('Copied'), () => flash('Copy failed'));
+        } else {
+          flash('Select & copy');
+        }
+      } catch {
+        flash('Select & copy');
+      }
+    }
+
+    // Allowlist link schemes for remediation hrefs. escapeHtml prevents
+    // attribute breakout but NOT a `javascript:`/`data:` scheme; today no
+    // catalog entry uses a server-derived href, but guard it so a future
+    // `link`/`telegram` remediation can never become an injection vector.
+    function safeHref(url) {
+      const u = String(url || '').trim();
+      return /^(https?:|tg:|mailto:)/i.test(u) ? u : '#';
+    }
+
+    function renderProblem(problem) {
+      if (!problem) return '';
+      const muted = problem.muted ? ' muted' : '';
+      const title = `<div class="problem-title">${escapeHtml(problem.title || 'Problem')}</div>`;
+      const detail = problem.detail
+        ? `<div class="problem-detail">${escapeHtml(problem.detail)}</div>`
+        : '';
+      let rem = '';
+      const r = problem.remediation;
+      if (r && r.kind && r.kind !== 'none') {
+        if (r.kind === 'command') {
+          const cmd = escapeHtml(r.value || '');
+          // data-copy holds the RAW (unescaped) command for clipboard write;
+          // attribute context is still escaped via escapeHtml so the value
+          // can't break out of the attribute.
+          rem = `<div class="problem-remediation">
+            ${r.label ? `<span class="rem-label">${escapeHtml(r.label)}</span>` : ''}
+            <span class="problem-cmd"><code>${cmd}</code><button class="problem-copy" type="button" data-copy="${escapeHtml(r.value || '')}" onclick="copyProblemCmd(this)">Copy</button></span>
+          </div>`;
+        } else if (r.kind === 'link') {
+          rem = `<div class="problem-remediation">
+            <a href="${escapeHtml(safeHref(r.value))}" target="_blank" rel="noopener">${escapeHtml(r.label || r.value || 'Open')}</a>
+          </div>`;
+        } else if (r.kind === 'telegram') {
+          const note = r.value
+            ? `<a href="${escapeHtml(safeHref(r.value))}" target="_blank" rel="noopener">${escapeHtml(r.label || 'Act in Telegram')}</a>`
+            : escapeHtml(r.label || 'Act from Telegram (no model call is made from the dashboard).');
+          rem = `<div class="problem-remediation">${note}</div>`;
+        }
+      } else if (r && r.label) {
+        // kind:'none' but a label hint was supplied (e.g. a "Refresh" nudge).
+        rem = `<div class="problem-remediation"><span class="rem-label">${escapeHtml(r.label)}</span></div>`;
+      }
+      return `<div class="problem${muted}">${title}${detail}${rem}</div>`;
+    }
+
+    // Catalog: known condition → ProblemDetail. Keep small + readable. Error
+    // strings are pattern-matched defensively (case-insensitive, optional).
+    function problemFor(kind, ctx) {
+      ctx = ctx || {};
+      switch (kind) {
+        case 'hindsight-down':
+          return {
+            title: 'Hindsight (agent memory) is not serving',
+            detail: (ctx.url ? `${ctx.url} is not responding. ` : '') +
+              'Agent memory — recall, retain, mental models — is down until it recovers.',
+            remediation: {
+              kind: 'command',
+              label: 'Run on the host:',
+              value: 'switchroom memory setup --stop && switchroom memory setup',
+            },
+          };
+        case 'broker-socket-absent':
+          return {
+            title: 'Auth-broker socket not mounted into the dashboard',
+            detail: (ctx.error ? `${ctx.error} ` : '') +
+              'The web container has no broker socket — re-mount it so the dashboard can read live account state.',
+            remediation: {
+              kind: 'command',
+              label: 'Re-mount on the host:',
+              value: 'switchroom web install',
+            },
+          };
+        case 'broker-down':
+          return {
+            title: 'Auth-broker unreachable',
+            detail: (ctx.error ? `${ctx.error} ` : '') +
+              'The socket is present but the broker is not answering.',
+            remediation: {
+              kind: 'command',
+              label: 'Check broker status on the host:',
+              value: 'switchroom vault broker status',
+            },
+          };
+        case 'hostd-no-audit':
+          return {
+            muted: true,
+            title: 'hostd has handled no privileged verbs yet',
+            detail: 'This is informational — the audit log is empty because no privileged operation has run, not because hostd is broken.',
+            remediation: { kind: 'none' },
+          };
+        case 'schedule-degraded':
+          return {
+            title: 'Schedule view is incomplete',
+            detail: ctx.reason
+              ? `${ctx.reason} Showing the base-config-only view (per-agent cascade overrides may be missing).`
+              : 'hostd is unreachable — showing the base-config-only view (per-agent cascade overrides may be missing).',
+            remediation: {
+              kind: 'command',
+              label: 'Diagnose on the host:',
+              value: 'switchroom doctor',
+            },
+          };
+        case 'approvals-socket-absent':
+          return {
+            title: 'Approval-kernel operator socket not present',
+            detail: (ctx.error ? `${ctx.error} ` : '') +
+              'The dashboard has no operator socket to read the approval ledger — re-apply to (re)create it.',
+            remediation: {
+              kind: 'command',
+              label: 'Run on the host:',
+              value: 'switchroom apply',
+            },
+          };
+        case 'approvals-kernel-down':
+          return {
+            title: 'Approval-kernel unreachable',
+            detail: (ctx.error ? `${ctx.error} ` : '') +
+              'The kernel socket is present but the kernel is not answering.',
+            remediation: {
+              kind: 'command',
+              label: 'Check the singletons on the host:',
+              value: 'docker compose -p switchroom ps',
+            },
+          };
+        case 'grants-unreachable':
+          return {
+            title: 'Standing capability grants unavailable',
+            detail: (ctx.error ? `${ctx.error} ` : '') +
+              'The vault-broker (which owns the grants DB) is not host-reachable, so the operator\'s standing grants can\'t be listed.',
+            remediation: {
+              kind: 'command',
+              label: 'Check broker status on the host:',
+              value: 'switchroom vault broker status',
+            },
+          };
+        case 'connections-degraded':
+          return {
+            muted: true,
+            title: 'Live broker data unavailable — showing configured accounts only',
+            detail: 'These accounts are from the config; the broker did not return live slot state, so connection status may be stale.',
+            remediation: { kind: 'none', label: 'Refresh the tab once the broker is reachable to see live status.' },
+          };
+        default:
+          return { title: String(kind || 'Problem'), remediation: { kind: 'none' } };
+      }
+    }
+
+    // Classify an auth-broker error string into the right catalog condition.
+    // "socket file not found" / ENOENT / "no such file" ⇒ socket not mounted;
+    // anything else (connection refused, etc.) ⇒ broker is down.
+    function brokerProblem(error) {
+      return /not found|enoent|no such file/i.test(String(error || ''))
+        ? problemFor('broker-socket-absent', { error })
+        : problemFor('broker-down', { error });
+    }
+
+    // Classify an approvals error string. "operator socket not present" /
+    // operatorUid ⇒ socket absent (apply); otherwise kernel is down.
+    function approvalsProblem(error) {
+      return /not present|operatoruid/i.test(String(error || ''))
+        ? problemFor('approvals-socket-absent', { error })
+        : problemFor('approvals-kernel-down', { error });
+    }
+
     function statusClass(agent) {
       if (agent.active === 'active') {
         if (agent.auth && agent.auth.expiresAt) {
@@ -958,7 +1356,7 @@
       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="status-dot ${statusClass(a)}" title="${escapeHtml(a.active)} · bridge heartbeat (not a claude-liveness signal)"></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>
@@ -966,6 +1364,7 @@
             <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>Last turn </label><span>${a.lastTurnAt ? formatTimestamp(a.lastTurnAt) : '—'}</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>
@@ -992,23 +1391,39 @@
     }
 
     function renderAgentDetail(name) {
+      // Wrapped so a single malformed detail can NEVER throw into render()'s
+      // agents.map and blank the whole grid. (The accounts.assigned crash this
+      // replaces did exactly that: it read a field the API renamed to
+      // {active, details} post-RFC-H, threw a TypeError on every open panel,
+      // and aborted the map → the entire Agents tab went blank on each poll.)
+      try {
+        return renderAgentDetailInner(name);
+      } catch (err) {
+        return `<div style="color:var(--red)">Detail render failed: ${escapeHtml((err && err.message) || String(err))}</div>`;
+      }
+    }
+
+    function renderAgentDetailInner(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;
 
+      // handleGetAgentAccounts returns { active: string|null, details: AccountInfo[] }
+      // — the single bound account (fleet-active or per-agent auth.override),
+      // NOT the pre-RFC-H assigned[] list.
       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>';
+      const activeLabel = accounts && accounts.active;
+      if (!activeLabel) {
+        accountsHtml = '<div style="color:var(--text-dim)">No per-agent account override — uses the fleet-active account.</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('');
+        const info = (accounts.details || []).find(x => x && x.label === activeLabel);
+        if (!info) {
+          accountsHtml = `<span class="chip missing" title="bound account not found in ~/.switchroom/accounts/">${escapeHtml(activeLabel)} · missing</span>`;
+        } else {
+          accountsHtml = `<span class="chip"><span class="health-badge ${escapeHtml(info.health)}" style="margin-right:0.4rem">${escapeHtml(info.health)}</span>${escapeHtml(activeLabel)} · bound</span>`;
+        }
       }
 
       let subHtml;
@@ -1018,11 +1433,37 @@
         subHtml = subagents.map(s => `<span class="chip">${escapeHtml(s.name || s.id || '?')}${s.status ? ' · ' + escapeHtml(s.status) : ''}</span>`).join('');
       }
 
+      // Recent turns — each Turn carries `started_at` (unix ms),
+      // `ended_at` (null while in-flight), and `user_prompt_preview` (the
+      // first ~200 chars of the user message). We render the start time,
+      // an ended/in-flight status, and a truncated prompt. A null `turns`
+      // (fetch failed) renders nothing different from "no turns" — the
+      // other sections are unaffected either way.
+      const turns = d.turns;
+      let turnsHtml;
+      if (!Array.isArray(turns) || turns.length === 0) {
+        turnsHtml = '<div style="color:var(--text-dim)">No turns recorded.</div>';
+      } else {
+        turnsHtml = turns.map(t => {
+          const when = escapeHtml(formatTimestamp(t.started_at));
+          const status = t.ended_at ? 'ended' : 'in-flight';
+          const raw = (t.user_prompt_preview || '').replace(/\s+/g, ' ').trim();
+          const summary = raw
+            ? escapeHtml(raw.length > 80 ? raw.slice(0, 80) + '…' : raw)
+            : '<span style="color:var(--text-dim)">(no prompt)</span>';
+          return `<div style="margin-bottom:.4rem">
+            <span style="color:var(--text-dim);font-size:.8rem">${when} · ${escapeHtml(status)}</span><br>
+            <span>${summary}</span>
+          </div>`;
+        }).join('');
+      }
+
       const configText = config ? JSON.stringify(config, null, 2) : '(unavailable)';
 
       return `
-        <h4>Accounts</h4>${accountsHtml}
+        <h4>Account</h4>${accountsHtml}
         <h4>Sub-agents</h4>${subHtml}
+        <h4>Recent turns</h4>${turnsHtml}
         <h4>Resolved config</h4><pre class="config-pre">${escapeHtml(configText)}</pre>
       `;
     }
@@ -1071,7 +1512,7 @@
           fiveH: pctCell(u ? u.fiveHourPct : null, '5h', a.quotaStale, u ? u.fiveHourResetAt : null),
           sevenD: pctCell(u ? u.sevenDayPct : null, '7d', a.quotaStale, u ? u.sevenDayResetAt : null),
           captured: u && u.capturedAt
-            ? formatTimestamp(u.capturedAt)
+            ? `${formatTimestamp(u.capturedAt)}${a.quotaUsageSource === 'broker-cache' ? '<div style="font-size:.7rem;color:var(--text-dim)">broker cache (free)</div>' : ''}`
             : '<span style="color:var(--text-dim)">never</span>',
           exhaustedCell: q == null
             ? '<span style="color:var(--text-dim)">broker offline</span>'
@@ -1202,41 +1643,74 @@
              <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>`;
+        : renderProblem(brokerProblem(b.error));
 
       const statelessCell = hs.mcpStateless == null
         ? dim('unknown')
         : hs.mcpStateless ? 'stateless' : '<span style="color:var(--yellow)">stateful</span>';
-      const hindsightBody = `
+      const hindsightMeta = `
         <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>`;
+      // When hindsight isn't serving, lead with the actionable remediation,
+      // then still show the (now-stale) container/model meta beneath it.
+      const hindsightBody = hs.running === false
+        ? renderProblem(problemFor('hindsight-down', {})) + hindsightMeta
+        : hindsightMeta;
 
       let hostdBody;
       if (!hd.auditLogPresent) {
-        hostdBody = dim(hd.error ? `audit log error: ${hd.error}` : 'no audit log yet (hostd has handled no privileged verbs)');
+        // A genuine read error stays a red dim line; the benign "empty audit
+        // log" case is an informational ProblemDetail (not an error state).
+        hostdBody = hd.error
+          ? `<div style="color:var(--red)">${escapeHtml('audit log error: ' + hd.error)}</div>`
+          : renderProblem(problemFor('hostd-no-audit', {}));
       } else if (!hd.recent || hd.recent.length === 0) {
         hostdBody = dim('audit log present, no entries');
       } else {
+        // Tri-state, not a binary ok/!ok — async mutations log a `started`
+        // row (exit_code null) that is NOT a failure; painting it red made the
+        // panel a wall of false-alarm red. Map: error/non-zero exit → red,
+        // denied → grey, started/in-flight → blue, completed+exit0 → green.
+        const verbStatus = (e) => {
+          if (e.result === 'denied') return { cls: 'denied', dotStyle: 'background:var(--text-dim)', label: 'denied' };
+          if (e.result === 'error' || (e.exit_code != null && e.exit_code !== 0))
+            return { cls: 'err', dotStyle: 'background:var(--red)', label: e.result || 'error' };
+          if (e.result === 'started' || e.exit_code == null)
+            return { cls: 'started', dotStyle: 'background:var(--blue);box-shadow:0 0 6px var(--blue)', label: e.result || 'in progress' };
+          return { cls: 'ok', dotStyle: 'background:var(--green);box-shadow:0 0 6px var(--green)', label: e.result || 'ok' };
+        };
         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;
+          const st = verbStatus(e);
+          // The one diagnostic field — stderr_tail/error — was previously
+          // dropped, making EROFS/reconcile failures unreadable. Surface it.
+          const detail = e.stderr_tail || e.error;
+          const detailRow = (st.cls === 'err' || st.cls === 'denied') && detail
+            ? `<tr><td colspan="4" style="color:var(--red);font-size:.72rem;white-space:pre-wrap;word-break:break-word;padding-top:0">${escapeHtml(String(detail).slice(0, 400))}</td></tr>`
+            : '';
           return `<tr>
-            <td>${dot(ok)} ${escapeHtml(e.op || '?')}</td>
+            <td><span class="status-dot" style="display:inline-block;vertical-align:middle;${st.dotStyle}"></span> ${escapeHtml(e.op || '?')}</td>
             <td>${caller}</td>
-            <td>${escapeHtml(e.result || '?')}${e.exit_code != null ? ` (${e.exit_code})` : ''}</td>
+            <td>${escapeHtml(st.label)}${e.exit_code != null ? ` (${e.exit_code})` : ''}</td>
             <td>${escapeHtml(shortTs(e.ts))}</td>
-          </tr>`;
+          </tr>${detailRow}`;
         }).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>`;
       }
 
+      // Subtle freshness hint: the cached object carries `stale:true` when
+      // it's being served past its TTL while a background refresh runs.
+      const updating = h.stale
+        ? `<span style="color:var(--text-dim);font-size:.7rem;margin-left:.4rem">(updating…)</span>`
+        : '';
       container.innerHTML = `
+        ${updating ? `<div style="margin-bottom:.4rem">System health ${updating}</div>` : ''}
         <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>
@@ -1267,9 +1741,18 @@
     function renderOAuthAccountCard(a, opts) {
       const provider = (opts && opts.provider) || '';
       const agentNames = (opts && opts.agentNames) || [];
-      const expires = a.expiresAt ? formatTimestamp(a.expiresAt) : _dimC('—');
+      // expiresAt is the SHORT-LIVED access-token expiry, NOT connection
+      // health. For a broker-known slot the refresh token keeps it alive, so a
+      // past value means "lazily refreshes on next use" — rendering it as
+      // "Expires 23d ago" made healthy connected accounts look broken (the
+      // "connections aren't accurate" complaint). Don't alarm on it.
+      const expires = !a.expiresAt
+        ? _dimC('—')
+        : (a.brokerKnown && a.expiresAt < Date.now())
+          ? '<span style="color:var(--text-dim)">auto-refreshes</span>'
+          : formatTimestamp(a.expiresAt);
       const known = a.brokerKnown
-        ? '<span class="usage-pill primary">slot present</span>'
+        ? '<span class="usage-pill primary">connected</span>'
         : '<span style="color:var(--yellow)">config-only (no broker slot)</span>';
       const acl = (a.enabledFor && a.enabledFor.length)
         ? a.enabledFor.map(escapeHtml).join(', ')
@@ -1395,15 +1878,41 @@
           ${fullAccessBanner}${notionBody}
         </div>`;
 
-      container.innerHTML = googleSection + microsoftSection + notionSection;
+      // Tab-level degraded banner: when every OAuth account (Google +
+      // Microsoft) is config-only (no live broker slot) and there's at least
+      // one, the broker data is unavailable — surface that ABOVE the sections
+      // without blanking the config-only cards.
+      const oauth = [...google, ...microsoft];
+      const allConfigOnly = oauth.length > 0 && oauth.every(a => a.brokerKnown === false);
+      const degradedBanner = allConfigOnly
+        ? renderProblem(problemFor('connections-degraded', {}))
+        : '';
+
+      container.innerHTML = degradedBanner + googleSection + microsoftSection + notionSection;
     }
 
     function renderSchedule(data) {
       const container = document.getElementById('schedule');
       const entries = (data && data.entries) || [];
       const recent = (data && data.recentByAgent) || {};
+      const degraded = !!(data && data.degraded);
+      const truncated = !!(data && data.truncated);
+      // Degraded banner: hostd is unreachable, so this is the base-config-only
+      // view (per-agent cascade overrides may be absent). Render it ABOVE the
+      // cards — never instead of them — so the operator sees both the
+      // incompleteness AND whatever entries we DO have.
+      const degradedBanner = degraded
+        ? renderProblem(problemFor('schedule-degraded', { reason: data && data.reason }))
+        : '';
+      const truncatedNote = truncated
+        ? '<div style="font-size:.78rem;color:var(--text-dim);margin-bottom:.75rem">(some entries trimmed to fit)</div>'
+        : '';
       if (entries.length === 0) {
-        container.innerHTML = '<div class="loading">No <code>schedule:</code> entries in any agent\'s cascade-resolved config.</div>';
+        // A bare "No schedule entries" is misleading when hostd is just down —
+        // show the actionable degraded banner instead.
+        container.innerHTML = degraded
+          ? degradedBanner
+          : '<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>`;
@@ -1440,21 +1949,84 @@
           </div>
         </div>`;
       }).join('');
-      container.innerHTML = cards;
+      container.innerHTML = degradedBanner + truncatedNote + cards;
     }
 
-    function renderApprovals(data) {
+    function renderApprovals(data, grants) {
       const container = document.getElementById('approvals');
+      // Two independent sections: the operator's REAL standing capability
+      // grants (broker grants DB — the actually-useful one), then the
+      // kernel decision ledger (honestly empty on most installs). They
+      // degrade independently — one being unreachable never blanks the
+      // other.
+      container.innerHTML =
+        renderStandingGrants(grants) + renderApprovalDecisions(data);
+    }
+
+    // Standing capability grants from the vault-broker grants DB — what
+    // `switchroom vault grants` lists. write_allow grants are the sensitive
+    // ones (highlighted), mirroring the Drive-scope highlight below.
+    function renderStandingGrants(grants) {
       const dim = (s) => `<span style="color:var(--text-dim)">${escapeHtml(s)}</span>`;
+      const heading = '<h3 style="margin:0 0 0.5rem;font-size:0.95rem">Standing capability grants</h3>';
+      if (!grants || grants.reachable === false) {
+        return heading +
+          renderProblem(problemFor('grants-unreachable', { error: grants && grants.error }));
+      }
+      const rows = grants.grants || [];
+      if (rows.length === 0) {
+        return heading +
+          '<div class="loading" style="color:var(--text-dim)">No standing capability grants.</div>';
+      }
+      const now = Date.now();
+      const chipList = (keys) => (keys && keys.length)
+        ? keys.map(k => `<span class="chip">${escapeHtml(k)}</span>`).join(' ')
+        : dim('—');
+      const body = rows.map(g => {
+        const expired = g.expiresAt != null && g.expiresAt < now;
+        const writeCell = (g.writeKeys && g.writeKeys.length)
+          ? `<span class="usage-pill primary" title="write grants are the sensitive ones">write</span> ` +
+            g.writeKeys.map(k => `<span class="chip">${escapeHtml(k)}</span>`).join(' ')
+          : dim('read-only');
+        const expiresCell = g.expiresAt == null
+          ? dim('never')
+          : `<span style="${expired ? 'color:var(--text-dim)' : ''}">${formatTimestamp(g.expiresAt)}${expired ? ' (expired)' : ''}</span>`;
+        return `
+        <tr>
+          <td>${escapeHtml(g.agent || '—')}</td>
+          <td>${chipList(g.keys)}</td>
+          <td>${writeCell}</td>
+          <td>${expiresCell}</td>
+          <td>${g.createdAt ? formatTimestamp(g.createdAt) : dim('—')}</td>
+          <td>${g.description ? escapeHtml(g.description) : dim('—')}</td>
+        </tr>`;
+      }).join('');
+      return heading + `
+        <div style="margin-bottom:0.6rem;font-size:0.8rem;color:var(--text-dim)">
+          Read-only view via the vault-broker operator socket — ${rows.length} grant(s). Write grants highlighted.
+        </div>
+        <div class="accounts-table-wrap">
+          <table class="accounts-table">
+            <thead><tr>
+              <th>Agent</th><th>Keys (read)</th><th>Write</th>
+              <th>Expires</th><th>Granted</th><th>Description</th>
+            </tr></thead>
+            <tbody>${body}</tbody>
+          </table>
+        </div>`;
+    }
+
+    // Kernel decision ledger (RFC B) — kept as-is. Honestly empty on most
+    // installs (the daily Allow/Deny taps don't write it); that's correct.
+    function renderApprovalDecisions(data) {
+      const dim = (s) => `<span style="color:var(--text-dim)">${escapeHtml(s)}</span>`;
+      const heading = '<h3 style="margin:1.25rem 0 0.5rem;font-size:0.95rem">Approval decision ledger</h3>';
       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;
+        return heading + renderProblem(approvalsProblem(data && data.error));
       }
       const decisions = data.decisions || [];
       if (decisions.length === 0) {
-        container.innerHTML = '<div class="loading">No approval decisions recorded yet.</div>';
-        return;
+        return heading + '<div class="loading">No approval decisions recorded yet.</div>';
       }
       const now = Date.now();
       const statusOf = (d) => {
@@ -1482,7 +2054,7 @@
           <td title="${d.revoke_reason ? escapeHtml(d.revoke_reason) : ''}">${d.revoked_at ? formatTimestamp(d.revoked_at) : dim('—')}</td>
         </tr>`;
       }).join('');
-      container.innerHTML = `
+      return heading + `
         <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>
@@ -1604,9 +2176,15 @@
     async function toggleLogs(name) {
       if (openLogs.has(name)) {
         openLogs.delete(name);
+        unsubscribeLogs(name);
       } else {
         openLogs.add(name);
+        // One-shot paint for instant feedback, then subscribe to the
+        // hostd-poll live stream (replaces the panel every few seconds).
         await loadLogs(name);
+        render();
+        subscribeLogs(name);
+        return;
       }
       render();
     }
@@ -1641,9 +2219,14 @@
     }
 
     function connectWebSocket() {
-      let wsUrl = `${location.protocol === 'https:' ? 'wss:' : 'ws:'}//${location.host}/ws`;
-      if (TOKEN) wsUrl += `?token=${encodeURIComponent(TOKEN)}`;
-      ws = new WebSocket(wsUrl);
+      const wsUrl = `${location.protocol === 'https:' ? 'wss:' : 'ws:'}//${location.host}/ws`;
+      // Browsers can't set Authorization on a WS upgrade, but they CAN set
+      // Sec-WebSocket-Protocol. The server already reads the bearer token
+      // from that header (extractBearerToken → ["bearer", token]) and
+      // ignores any ?token= query param — so ride the subprotocol. No
+      // token (Tailscale-identified bind) → no subprotocol → the server
+      // falls back to the Tailscale-User-Login header, unchanged.
+      ws = TOKEN ? new WebSocket(wsUrl, ['bearer', TOKEN]) : new WebSocket(wsUrl);
 
       ws.onmessage = (event) => {
         try {
@@ -1651,13 +2234,31 @@
           if (msg.type === 'log' && msg.agent) {
             const el = document.getElementById(`log-output-${msg.agent}`);
             if (el && openLogs.has(msg.agent)) {
-              el.textContent += msg.data;
+              // hostd-poll stream sends REPLACE (the latest tail). The
+              // legacy docker-follow stream appended; keep both shapes so
+              // an old payload (no `replace`) still works.
+              if (msg.replace) {
+                el.textContent = msg.data || '(no output)';
+              } else {
+                el.textContent += msg.data;
+              }
               el.scrollTop = el.scrollHeight;
             }
+          } else if (msg.type === 'log_error' && msg.agent) {
+            const el = document.getElementById(`log-output-${msg.agent}`);
+            if (el && openLogs.has(msg.agent)) {
+              el.textContent = `Error: ${msg.data || 'log stream unavailable'}`;
+            }
           }
         } catch {}
       };
 
+      ws.onopen = () => {
+        // Re-subscribe any panels that were left open across a reconnect
+        // so a dropped socket doesn't leave a permanently-dead log panel.
+        for (const name of openLogs) subscribeLogs(name);
+      };
+
       ws.onclose = () => {
         setTimeout(connectWebSocket, 3000);
       };
@@ -1667,6 +2268,20 @@
       };
     }
 
+    // Send a {subscribe} for an agent's live-log poll stream, guarded on
+    // an OPEN socket (a closed socket re-subscribes via ws.onopen above).
+    function subscribeLogs(name) {
+      if (ws && ws.readyState === WebSocket.OPEN) {
+        try { ws.send(JSON.stringify({ type: 'subscribe', agent: name })); } catch {}
+      }
+    }
+
+    function unsubscribeLogs(name) {
+      if (ws && ws.readyState === WebSocket.OPEN) {
+        try { ws.send(JSON.stringify({ type: 'unsubscribe', agent: name })); } catch {}
+      }
+    }
+
     // 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
@@ -1675,7 +2290,14 @@
     fetchSummary();
     fetchAgents();
     connectWebSocket();
-    setInterval(fetchAgents, 10000);
+    // Fleet poll — gated on tab visibility. A phone with the dashboard
+    // backgrounded (or a laptop tab the operator switched away from)
+    // shouldn't keep hitting the host every 10s; the cache absorbs the
+    // cost, but skipping the request entirely is strictly better. The
+    // next foregrounded tick refreshes immediately.
+    setInterval(() => {
+      if (document.visibilityState === 'visible') fetchAgents();
+    }, 10000);
   </script>
 </body>
 </html>