synabun 1.3.0 → 2.0.0

package/neural-interface/public/shared/assistant/asst-accounts.js

@@ -0,0 +1,318 @@
+// ═══════════════════════════════════════════
+// SynaBun Assistant — account profiles (Claude + Codex)
+// ═══════════════════════════════════════════
+// Claude: POST /api/assistant/claude/accounts → POST …/:id/login opens a
+// claude-code terminal tab under CLAUDE_CONFIG_DIR (emit terminal:attach-floating)
+// → wait for sync:assistant:accounts-changed. Codex: POST …/codex/accounts/add-start
+// → show the device-auth URL/code → poll fetchCodexAccounts(true).
+
+import { emit, on } from '../state.js';
+import { fetchClaudeAccounts, fetchCodexAccounts, getCachedClaudeAccounts, getCachedCodexAccounts } from '../agent-runtime-options.js';
+import { getProviderMeta } from '../provider-icons.js';
+import {
+  createClaudeAccount, deleteClaudeAccount, loginClaudeAccount, patchClaudeAccount,
+  deleteCodexAccount, patchCodexAccount, startCodexAccountAdd,
+} from './asst-api.js';
+
+const LOGIN_TIMEOUT_MS = 10 * 60 * 1000;
+const CODEX_POLL_MS = 3000;
+const ICON_X = '<svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>';
+
+function el(tag, className, text) {
+  const node = document.createElement(tag);
+  if (className) node.className = className;
+  if (text != null) node.textContent = text;
+  return node;
+}
+
+function esc(value) {
+  return String(value ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+
+function tf(t) {
+  return (key, fallback, params) => {
+    const v = typeof t === 'function' ? t(key, params) : undefined;
+    return v && v !== key ? v : fallback;
+  };
+}
+
+function listFor(provider) {
+  return provider === 'codex' ? getCachedCodexAccounts() : getCachedClaudeAccounts();
+}
+
+async function refreshFor(provider) {
+  return provider === 'codex' ? fetchCodexAccounts(true) : fetchClaudeAccounts(true);
+}
+
+/** Resolve once `sync:assistant:accounts-changed` fires for the provider (or times out). */
+function waitForAccountsChanged(provider, timeoutMs = LOGIN_TIMEOUT_MS) {
+  return new Promise((resolve) => {
+    let done = false;
+    const off = on('sync:assistant:accounts-changed', (msg) => {
+      if (done) return;
+      if (msg?.provider && msg.provider !== provider) return;
+      done = true;
+      off();
+      clearTimeout(timer);
+      resolve(true);
+    });
+    const timer = setTimeout(() => { if (!done) { done = true; off(); resolve(false); } }, timeoutMs);
+  });
+}
+
+/**
+ * Add-account flow. Returns { ok, account, cancelled }.
+ * ui: { t, setStatus(text), showLogin({ authUrl, userCode }), isCancelled() }
+ */
+export async function startAddAccount(provider, label, ui = {}) {
+  const t = tf(ui.t);
+  const name = String(label || '').trim() || (provider === 'codex' ? 'Codex account' : 'Claude account');
+  if (provider === 'claude-code') {
+    const created = await createClaudeAccount(name);
+    const account = created?.account || created;
+    if (!account?.id) throw new Error(t('assistant.accounts.createFailed', 'Account could not be created'));
+    ui.setStatus?.(t('assistant.accounts.openingLogin', 'Opening a Claude Code terminal for login…'));
+    const login = await loginClaudeAccount(account.id);
+    if (login?.terminalSessionId) {
+      emit('terminal:expect-managed');
+      emit('terminal:attach-floating', { terminalSessionId: login.terminalSessionId, profile: login.profile || 'claude-code', snapToPanel: true });
+    }
+    ui.setStatus?.(t('assistant.accounts.waitingLogin', 'Finish the login in the terminal window. Waiting…'));
+    const changed = await waitForAccountsChanged('claude-code');
+    const accounts = await refreshFor('claude-code');
+    const fresh = accounts.find(a => a.id === account.id) || account;
+    return { ok: changed || !!fresh?.email, account: fresh, timedOut: !changed };
+  }
+  if (provider === 'codex') {
+    const started = await startCodexAccountAdd(name);
+    const accountId = started?.accountId || started?.account?.id;
+    const login = started?.login || {};
+    ui.showLogin?.({ authUrl: login.authUrl || login.url || '', userCode: login.userCode || login.code || '' });
+    ui.setStatus?.(t('assistant.accounts.waitingDevice', 'Complete the sign-in in your browser. Waiting…'));
+    const deadline = Date.now() + LOGIN_TIMEOUT_MS;
+    let changedEarly = false;
+    const offChanged = on('sync:assistant:accounts-changed', (msg) => { if (!msg?.provider || msg.provider === 'codex') changedEarly = true; });
+    try {
+      while (Date.now() < deadline) {
+        if (ui.isCancelled?.()) return { ok: false, cancelled: true };
+        const accounts = await fetchCodexAccounts(true).catch(() => []);
+        const found = accounts.find(a => a.id === accountId);
+        if (found && (found.email || found.loggedIn === true || found.status === 'ready' || changedEarly)) return { ok: true, account: found };
+        await new Promise(r => setTimeout(r, CODEX_POLL_MS));
+      }
+    } finally {
+      offChanged();
+    }
+    return { ok: false, timedOut: true, account: { id: accountId, label: name } };
+  }
+  throw new Error(`Unsupported provider: ${provider}`);
+}
+
+/**
+ * Accounts manager modal. hooks: { t, onChanged(provider), onSelect(accountId) }
+ * Returns { el, close }.
+ */
+export function openAccountsManager({ provider = 'claude-code', t: tRaw, onChanged, onSelect } = {}) {
+  const t = tf(tRaw);
+  const meta = getProviderMeta(provider);
+  const overlay = el('div', 'asst-modal-overlay');
+  overlay.setAttribute('role', 'dialog');
+  overlay.setAttribute('aria-modal', 'true');
+  overlay.setAttribute('aria-label', t('assistant.accounts.title', '{provider} accounts', { provider: meta.label }));
+  const modal = el('div', 'asst-modal');
+  modal.innerHTML = `
+    <div class="asst-modal-head"><span class="asst-icon" style="color:${esc(meta.color)}">${meta.icon}</span><span>${esc(t('assistant.accounts.title', '{provider} accounts', { provider: meta.label }))}</span><button type="button" class="asst-iconbtn asst-modal-close" aria-label="${esc(t('common.close', 'Close'))}">${ICON_X}</button></div>
+    <div class="asst-modal-body">
+      <div class="asst-modal-note">${esc(provider === 'codex'
+        ? t('assistant.accounts.noteCodex', 'Each account maps to its own CODEX_HOME. Removing an account that a run is using is refused.')
+        : t('assistant.accounts.noteClaude', 'Each account gets its own CLAUDE_CONFIG_DIR (settings, credentials, sessions). "Default" is your ambient ~/.claude.'))}</div>
+      <div class="asst-account-list"></div>
+      <div class="asst-account-add"></div>
+    </div>
+    <div class="asst-modal-foot">
+      <button type="button" class="asst-btn asst-btn-primary asst-account-add-btn">${esc(t('assistant.accounts.add', 'Add account…'))}</button>
+      <span class="asst-modal-spacer"></span>
+      <button type="button" class="asst-btn asst-btn-secondary asst-account-done">${esc(t('common.done', 'Done'))}</button>
+    </div>
+  `;
+  overlay.appendChild(modal);
+  document.body.appendChild(overlay);
+
+  const list = modal.querySelector('.asst-account-list');
+  const addBox = modal.querySelector('.asst-account-add');
+  let cancelled = false;
+  let busy = false;
+
+  function close() {
+    cancelled = true;
+    document.removeEventListener('keydown', onKey, true);
+    overlay.remove();
+  }
+  function onKey(e) {
+    if (e.key === 'Escape') { e.preventDefault(); e.stopPropagation(); close(); }
+    else e.stopPropagation();
+  }
+  document.addEventListener('keydown', onKey, true);
+  overlay.addEventListener('mousedown', (e) => { if (e.target === overlay) close(); });
+  modal.querySelector('.asst-modal-close').addEventListener('click', close);
+  modal.querySelector('.asst-account-done').addEventListener('click', close);
+
+  function renderList() {
+    const accounts = listFor(provider);
+    list.innerHTML = '';
+    if (!accounts.length) { list.appendChild(el('div', 'asst-modal-note', t('assistant.accounts.empty', 'No accounts yet.'))); return; }
+    for (const acc of accounts) {
+      const row = el('div', 'asst-account-row');
+      row.dataset.id = acc.id;
+      const main = el('div', 'asst-account-main');
+      main.appendChild(el('div', 'asst-account-label', acc.label || acc.id));
+      const sub = [acc.email, acc.isDefault || acc.id === 'default' ? t('assistant.accounts.ambient', 'ambient config') : '', acc.inUse ? t('assistant.accounts.inUse', 'in use') : ''].filter(Boolean).join(' · ');
+      main.appendChild(el('div', 'asst-account-sub', sub || acc.id));
+      row.appendChild(main);
+
+      if (onSelect) {
+        const use = el('button', 'asst-btn asst-btn-secondary', t('assistant.accounts.use', 'Use'));
+        use.type = 'button';
+        use.addEventListener('click', () => { onSelect(acc.id); close(); });
+        row.appendChild(use);
+      }
+      if (provider === 'claude-code' && !acc.email && acc.id !== 'default') {
+        const login = el('button', 'asst-btn asst-btn-secondary', t('assistant.accounts.login', 'Log in'));
+        login.type = 'button';
+        login.addEventListener('click', async () => {
+          login.disabled = true;
+          try {
+            const res = await loginClaudeAccount(acc.id);
+            if (res?.terminalSessionId) {
+              emit('terminal:expect-managed');
+              emit('terminal:attach-floating', { terminalSessionId: res.terminalSessionId, profile: res.profile || 'claude-code', snapToPanel: true });
+            }
+            await waitForAccountsChanged('claude-code');
+            await refreshFor(provider);
+            onChanged?.(provider);
+            renderList();
+          } catch (err) {
+            addBox.textContent = err?.message || String(err);
+          } finally { login.disabled = false; }
+        });
+        row.appendChild(login);
+      }
+      const rename = el('button', 'asst-btn asst-btn-secondary', t('common.rename', 'Rename'));
+      rename.type = 'button';
+      rename.addEventListener('click', () => {
+        const input = document.createElement('input');
+        input.type = 'text';
+        input.className = 'asst-dd-input';
+        input.value = acc.label || '';
+        main.replaceWith(input);
+        input.focus();
+        input.select();
+        const commit = async () => {
+          const value = input.value.trim();
+          if (value && value !== acc.label) {
+            try {
+              if (provider === 'codex') await patchCodexAccount(acc.id, { label: value });
+              else await patchClaudeAccount(acc.id, { label: value });
+              await refreshFor(provider);
+              onChanged?.(provider);
+            } catch (err) { addBox.textContent = err?.message || String(err); }
+          }
+          renderList();
+        };
+        input.addEventListener('blur', commit, { once: true });
+        input.addEventListener('keydown', (e) => {
+          e.stopPropagation();
+          if (e.key === 'Enter') { e.preventDefault(); input.blur(); }
+          if (e.key === 'Escape') { input.value = acc.label || ''; input.blur(); }
+        });
+      });
+      row.appendChild(rename);
+      if (acc.id !== 'default' && !acc.isDefault) {
+        const remove = el('button', 'asst-btn asst-btn-danger', t('common.remove', 'Remove'));
+        remove.type = 'button';
+        remove.addEventListener('click', async () => {
+          if (!window.confirm(t('assistant.accounts.confirmRemove', 'Remove account "{label}"? Its config directory is kept on disk.', { label: acc.label || acc.id }))) return;
+          remove.disabled = true;
+          try {
+            if (provider === 'codex') await deleteCodexAccount(acc.id);
+            else await deleteClaudeAccount(acc.id);
+            await refreshFor(provider);
+            onChanged?.(provider);
+            renderList();
+          } catch (err) {
+            addBox.textContent = err?.status === 409 ? t('assistant.accounts.inUseError', 'That account is in use by a running session.') : (err?.message || String(err));
+            remove.disabled = false;
+          }
+        });
+        row.appendChild(remove);
+      }
+      list.appendChild(row);
+    }
+  }
+
+  function renderAddForm() {
+    if (busy) return;
+    addBox.innerHTML = '';
+    const form = el('div', 'asst-login-box');
+    const input = document.createElement('input');
+    input.type = 'text';
+    input.className = 'asst-dd-input';
+    input.placeholder = t('assistant.accounts.labelPlaceholder', 'Label (e.g. Work)');
+    input.setAttribute('aria-label', input.placeholder);
+    const actions = el('div', 'asst-control-actions');
+    const go = el('button', 'asst-btn asst-btn-primary', provider === 'codex' ? t('assistant.accounts.startDevice', 'Start sign-in') : t('assistant.accounts.createAndLogin', 'Create & log in'));
+    go.type = 'button';
+    const cancel = el('button', 'asst-btn asst-btn-secondary', t('common.cancel', 'Cancel'));
+    cancel.type = 'button';
+    const status = el('div', 'asst-modal-note');
+    const loginInfo = el('div', 'asst-login-box');
+    loginInfo.hidden = true;
+    actions.append(go, cancel);
+    form.append(input, actions, status, loginInfo);
+    addBox.appendChild(form);
+    input.focus();
+    input.addEventListener('keydown', (e) => { e.stopPropagation(); if (e.key === 'Enter') go.click(); });
+    cancel.addEventListener('click', () => { cancelled = true; addBox.innerHTML = ''; });
+    go.addEventListener('click', async () => {
+      if (busy) return;
+      busy = true;
+      cancelled = false;
+      go.disabled = true;
+      input.disabled = true;
+      try {
+        const result = await startAddAccount(provider, input.value, {
+          t: tRaw,
+          setStatus: (text) => { status.textContent = text; },
+          isCancelled: () => cancelled,
+          showLogin: ({ authUrl, userCode }) => {
+            loginInfo.hidden = false;
+            loginInfo.innerHTML = `${authUrl ? `<a class="asst-btn asst-btn-primary" href="${esc(authUrl)}" target="_blank" rel="noopener">${esc(t('assistant.accounts.openLogin', 'Open sign-in page'))}</a>` : ''}${userCode ? `<div>${esc(t('assistant.accounts.enterCode', 'Enter this code:'))} <span class="asst-login-code">${esc(userCode)}</span></div>` : ''}`;
+          },
+        });
+        await refreshFor(provider);
+        onChanged?.(provider);
+        renderList();
+        if (result.ok) {
+          addBox.innerHTML = '';
+          if (onSelect && result.account?.id) onSelect(result.account.id);
+        } else if (result.cancelled) {
+          addBox.innerHTML = '';
+        } else {
+          status.textContent = t('assistant.accounts.loginTimeout', 'Login was not confirmed. The account was created — use "Log in" to retry.');
+        }
+      } catch (err) {
+        status.textContent = err?.message || String(err);
+      } finally {
+        busy = false;
+        go.disabled = false;
+        input.disabled = false;
+      }
+    });
+  }
+
+  modal.querySelector('.asst-account-add-btn').addEventListener('click', renderAddForm);
+  renderList();
+  refreshFor(provider).then(() => { if (overlay.isConnected) renderList(); }).catch(() => {});
+
+  return { el: overlay, close, renderList, openAdd: renderAddForm };
+}

package/neural-interface/public/shared/assistant/asst-agents-dock.js

@@ -0,0 +1,296 @@
+// ═══════════════════════════════════════════
+// SynaBun Assistant — agents tray (bottom card)
+// ═══════════════════════════════════════════
+// Rows for every run dispatched by this assistant session: provider icon,
+// model, account, title, status pill, route tag, elapsed, cost, Focus / Stop /
+// Read (+ Escalate when the server offers one; Remove once the run finished).
+// Lives inside the bottom card
+// above the composer: a one-line head ("Agents · 2 running · 1 needs
+// approval"), collapsed by default, hidden entirely when there is nothing to
+// show. Sources: active and recent terminal GET /api/assistant/runs at
+// mount, then sync:sidepanel:run-* and sync:assistant:* bus events. A run
+// removed here (or in another window: sync:assistant:run-removed) never comes
+// back from a late event.
+
+import { on } from '../state.js';
+import { getProviderMeta } from '../provider-icons.js';
+import { listAssistantRuns } from './asst-api.js';
+import { buildRunCard, tickRunCard, updateRunCard } from './asst-render.js';
+import { isRemovableRun, isRunIdle, isTerminalRunStatus, mergeRunDescriptor, runFromPayload, runNeedsAttention, sortRuns } from './asst-state.js';
+
+const TICK_MS = 5000;
+const SHOW_ALL_LIMIT = 40;
+const RECENT_WINDOW_MS = 6 * 60 * 60 * 1000;
+
+function el(tag, className, text) {
+  const node = document.createElement(tag);
+  if (className) node.className = className;
+  if (text != null) node.textContent = text;
+  return node;
+}
+
+function esc(value) {
+  return String(value ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+
+/**
+ * createAgentsDock(hostEl, hooks)
+ * hooks: { t, sessionId, onFocus(runId), onStop(runId), onRead(runId), onEscalate(runId, target), onStopAll(),
+ *          onRemove(runId), onClearFinished(runIds),
+ *          open, showAll, onToggle(open), onShowAllChange(showAll),
+ *          onCountChange({ total, active, attention, visible }) }
+ */
+export function createAgentsDock(hostEl, hooks = {}) {
+  const t = (key, fallback, params) => {
+    const v = typeof hooks.t === 'function' ? hooks.t(key, params) : undefined;
+    if (v && v !== key && typeof v === 'string') return v;
+    return params ? String(fallback).replace(/\{(\w+)\}/g, (_, k) => (params[k] != null ? params[k] : `{${k}}`)) : fallback;
+  };
+
+  const root = el('div', 'asst-dock');
+  root.hidden = true;
+  const bodyId = `asst-dock-body-${Math.random().toString(36).slice(2, 8)}`;
+  root.innerHTML = `
+    <div class="asst-dock-head">
+      <button type="button" class="asst-dock-toggle" aria-expanded="false" aria-controls="${bodyId}"><span class="asst-dock-chev" aria-hidden="true">&#x203A;</span><span class="asst-dock-title">${esc(t('assistant.dock.title', 'Agents'))}</span><span class="asst-dock-summary"></span></button>
+      <span class="asst-dock-spacer"></span>
+      <button type="button" class="asst-tb-btn asst-dock-showall" aria-pressed="false" hidden>${esc(t('assistant.dock.showAll', 'Show all'))}</button>
+      <button type="button" class="asst-tb-btn asst-dock-clear" hidden>${esc(t('assistant.dock.clearFinished', 'Clear finished'))}</button>
+      <button type="button" class="asst-btn asst-btn-danger asst-dock-stopall" hidden>${esc(t('assistant.dock.stopAll', 'Stop all'))}</button>
+    </div>
+    <div class="asst-dock-body" id="${bodyId}" role="list" hidden></div>
+  `;
+  hostEl.appendChild(root);
+
+  const toggle = root.querySelector('.asst-dock-toggle');
+  const summaryEl = root.querySelector('.asst-dock-summary');
+  const showAllBtn = root.querySelector('.asst-dock-showall');
+  const stopAllBtn = root.querySelector('.asst-dock-stopall');
+  const clearBtn = root.querySelector('.asst-dock-clear');
+  const body = root.querySelector('.asst-dock-body');
+
+  const runs = new Map();   // runId → descriptor
+  const cards = new Map();  // runId → element
+  const removed = new Set(); // runIds the user removed: late events never revive them
+  let open = hooks.open === true;
+  let showAll = hooks.showAll === true;
+  let ticker = null;
+  let destroyed = false;
+  const unsubs = [];
+
+  function belongs(run) {
+    if (!run?.runId || removed.has(run.runId) || run.removed === true) return false;
+    if (!hooks.sessionId) return true;
+    return run.assistantSessionId === hooks.sessionId;
+  }
+
+  function visibleRuns() {
+    const all = sortRuns([...runs.values()]);
+    if (showAll) return all.slice(0, SHOW_ALL_LIMIT);
+    const cutoff = Date.now() - RECENT_WINDOW_MS;
+    return all.filter((run) => !isTerminalRunStatus(run.status) || new Date(run.completedAt || run.updatedAt || 0).getTime() >= cutoff).slice(0, SHOW_ALL_LIMIT);
+  }
+
+  function counts() {
+    const list = [...runs.values()];
+    return {
+      total: list.length,
+      active: list.filter(r => !isTerminalRunStatus(r.status)).length,
+      attention: list.filter(runNeedsAttention).length,
+      idle: list.filter(isRunIdle).length,
+      finished: list.length - list.filter(r => !isTerminalRunStatus(r.status)).length,
+      visible: list.length > 0,
+    };
+  }
+
+  function summaryText(c) {
+    const bits = [];
+    const running = c.active - c.attention - c.idle;
+    if (running > 0) bits.push(t('assistant.dock.running', '{n} running', { n: running }));
+    if (c.idle > 0) bits.push(t('assistant.dock.idle', '{n} idle', { n: c.idle }));
+    if (c.attention > 0) bits.push(t('assistant.dock.needsApproval', '{n} needs approval', { n: c.attention }));
+    if (!bits.length && c.total) bits.push(t('assistant.dock.done', '{n} finished', { n: c.total }));
+    return bits.join(' · ');
+  }
+
+  function cardOpts() {
+    return {
+      t: hooks.t,
+      compact: true,
+      providerIcon: (p) => getProviderMeta(p).icon,
+      providerColor: (p) => getProviderMeta(p).color,
+      onFocus: hooks.onFocus,
+      onStop: hooks.onStop,
+      onRead: hooks.onRead,
+      onEscalate: hooks.onEscalate,
+      onRemove: typeof hooks.onRemove === 'function' ? hooks.onRemove : null,
+    };
+  }
+
+  function render() {
+    if (destroyed) return;
+    const list = visibleRuns();
+    const seen = new Set();
+    const frag = document.createDocumentFragment();
+    for (const run of list) {
+      seen.add(run.runId);
+      let card = cards.get(run.runId);
+      if (!card) { card = buildRunCard(run, cardOpts()); cards.set(run.runId, card); }
+      else updateRunCard(card, run, cardOpts());
+      card.setAttribute('role', 'listitem');
+      frag.appendChild(card);
+    }
+    for (const [runId, card] of cards) { if (!seen.has(runId)) { card.remove(); cards.delete(runId); } }
+    body.innerHTML = '';
+    body.appendChild(frag);
+
+    const c = counts();
+    root.hidden = c.total === 0;
+    summaryEl.textContent = summaryText(c);
+    root.classList.toggle('attention', c.attention > 0);
+    stopAllBtn.hidden = c.active === 0;
+    clearBtn.hidden = !open || typeof hooks.onClearFinished !== 'function' || ![...runs.values()].some(isRemovableRun);
+    showAllBtn.hidden = !open;
+    showAllBtn.setAttribute('aria-pressed', showAll ? 'true' : 'false');
+    body.hidden = !open;
+    root.classList.toggle('open', open);
+    toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
+    hooks.onCountChange?.(c);
+    syncTicker();
+  }
+
+  function syncTicker() {
+    const needs = open && !root.hidden && [...runs.values()].some(r => !isTerminalRunStatus(r.status));
+    if (needs && !ticker) ticker = setInterval(() => { for (const [runId, card] of cards) tickRunCard(card, runs.get(runId)); }, TICK_MS);
+    if (!needs && ticker) { clearInterval(ticker); ticker = null; }
+  }
+
+  function upsertRun(run) {
+    const descriptor = runFromPayload(run) || run;
+    if (!belongs(descriptor)) return null;
+    const merged = mergeRunDescriptor(runs.get(descriptor.runId), descriptor);
+    runs.set(descriptor.runId, merged);
+    render();
+    return merged;
+  }
+
+  /** Drop runs the server removed (this window or another one). */
+  function dropRuns(runIds) {
+    let changed = false;
+    for (const runId of Array.isArray(runIds) ? runIds : [runIds]) {
+      if (!runId) continue;
+      removed.add(runId);
+      if (runs.delete(runId)) changed = true;
+    }
+    if (changed) render();
+    return changed;
+  }
+
+  function patchRun(runId, patch) {
+    const current = runs.get(runId);
+    if (!current) return null;
+    const next = { ...current, ...patch, updatedAt: new Date().toISOString() };
+    runs.set(runId, next);
+    render();
+    return next;
+  }
+
+  function patchUsageRun(runId, tokens, fidelity) {
+    const current = runs.get(runId);
+    if (!current) return null;
+    const next = { ...current, usageTokens: tokens, usageFidelity: fidelity, usageObserved: true };
+    runs.set(runId, next);
+    const card = cards.get(runId);
+    if (card?.isConnected) updateRunCard(card, next, cardOpts());
+    return next;
+  }
+
+  async function refresh() {
+    if (!hooks.sessionId) return;
+    const knownTerminal = [...runs].filter(([, run]) => isTerminalRunStatus(run.status)).map(([runId]) => runId);
+    try {
+      const [active, terminal] = await Promise.all([
+        listAssistantRuns({ assistantSessionId: hooks.sessionId, active: true }),
+        listAssistantRuns({ assistantSessionId: hooks.sessionId, status: 'terminal', limit: 100 }),
+      ]);
+      const listed = new Set();
+      const list = [...active, ...terminal].filter((run) => {
+        const id = run?.runId || run?.run?.runId;
+        if (!id || listed.has(id)) return false;
+        listed.add(id);
+        return true;
+      });
+      for (const run of list) { const d = runFromPayload(run) || run; if (belongs(d)) runs.set(d.runId, mergeRunDescriptor(runs.get(d.runId), d)); }
+      // When the terminal page was complete, previously known terminal runs
+      // absent from it were removed elsewhere. A run arriving during refresh
+      // must never be pruned by this older snapshot.
+      if (terminal.length < 100) {
+        for (const runId of knownTerminal) if (!listed.has(runId)) { runs.delete(runId); removed.add(runId); }
+      }
+      render();
+    } catch { /* offline or not built yet */ }
+  }
+
+  function setOpen(value) {
+    open = !!value;
+    render();
+    hooks.onToggle?.(open);
+  }
+
+  toggle.addEventListener('click', () => setOpen(!open));
+  showAllBtn.addEventListener('click', () => { showAll = !showAll; hooks.onShowAllChange?.(showAll); refresh().finally(render); });
+  stopAllBtn.addEventListener('click', () => hooks.onStopAll?.());
+  clearBtn.addEventListener('click', () => {
+    const ids = [...runs.values()].filter(isRemovableRun).map(r => r.runId);
+    if (ids.length) hooks.onClearFinished?.(ids);
+  });
+
+  // ── Bus subscriptions ──
+  const onRunEvent = (msg) => { const run = runFromPayload(msg); if (run) upsertRun(run); };
+  for (const ev of ['sync:sidepanel:run-created', 'sync:sidepanel:run-updated', 'sync:sidepanel:run-claimed', 'sync:sidepanel:run-completed', 'sync:sidepanel:run-failed', 'sync:sidepanel:run-stopped']) {
+    unsubs.push(on(ev, onRunEvent));
+  }
+  unsubs.push(on('sync:assistant:dispatch', onRunEvent));
+  unsubs.push(on('sync:assistant:run-removed', (msg) => {
+    if (hooks.sessionId && msg?.assistantSessionId && msg.assistantSessionId !== hooks.sessionId) return;
+    dropRuns(msg?.runIds || []);
+  }));
+  unsubs.push(on('sync:assistant:permission-request', (msg) => {
+    const runId = msg?.run?.runId || msg?.runId;
+    if (runId && runs.has(runId)) patchRun(runId, { turnState: 'awaiting_permission' });
+  }));
+  unsubs.push(on('sync:assistant:permission-resolved', (msg) => {
+    const runId = runFromPayload(msg)?.runId || msg?.runId;
+    if (runId && runs.get(runId)?.turnState === 'awaiting_permission') patchRun(runId, { turnState: 'running' });
+  }));
+  unsubs.push(on('sync:assistant:cost', (msg) => {
+    const runId = msg?.runId || runFromPayload(msg)?.runId;
+    if (runId && Number.isFinite(Number(msg?.costUsd))) patchRun(runId, { costUsd: Number(msg.costUsd) });
+  }));
+
+  render();
+  refresh();
+
+  return {
+    el: root,
+    upsertRun,
+    patchRun,
+    patchUsageRun,
+    dropRuns,
+    getRun: (runId) => runs.get(runId) || null,
+    getRuns: () => sortRuns([...runs.values()]),
+    activeRuns: () => [...runs.values()].filter(r => !isTerminalRunStatus(r.status)),
+    counts,
+    setOpen,
+    isOpen: () => open,
+    setShowAll(value) { showAll = !!value; refresh().finally(render); },
+    render,
+    refresh,
+    destroy() {
+      destroyed = true;
+      if (ticker) clearInterval(ticker);
+      unsubs.forEach(off => { try { off(); } catch { /* ignore */ } });
+      root.remove();
+    },
+  };
+}