opencode-agent-flow 0.0.0-stage → 0.1.1

package/lib/upstream.mjs

@@ -0,0 +1,194 @@
+export function reconnectDelay(delay, connectedAt, now = Date.now()) { return connectedAt !== undefined && now - connectedAt >= 30000 ? 1000 : delay; }
+export function trimMessage(m) {
+  return { id: m.id, type: m.type, time: m.time, tokens: m.tokens, agent: m.agent, model: m.model, finish: m.finish, outcome: String(m.outcome || '').slice(0, 300), content: (m.content || []).map(c => ({ type: c.type, name: c.name || c.tool, id: c.id, time: c.time, text: String(c.text || '').slice(0, 300), state: { status: c.state?.status, time: c.state?.time, input: Object.fromEntries(Object.entries(c.state?.input || c.input || {}).filter(([key]) => ['code', 'filePath', 'path', 'pattern', 'command', 'query', 'url', 'agent', 'description'].includes(key)).map(([key, value]) => [key, String(value).slice(0, 300)])) } })) };
+}
+export class Upstream {
+  constructor(config, changed) {
+    Object.assign(this, { config, changed, sessions: new Map(), messages: new Map(), messageVersions: new Map(), fullHistory: new Set(), active: {}, approvals: [], health: { ok: false }, connection: 'connecting', dirty: new Set(), queue: [], jobs: 0, abort: new AbortController() });
+  }
+  async request(path, signal) {
+    const headers = this.config.password ? { Authorization: `Basic ${Buffer.from(`${this.config.username}:${this.config.password}`).toString('base64')}` } : {};
+    const response = await fetch(`${this.config.server}${path}`, { headers, redirect: 'error', signal: AbortSignal.any([this.abort.signal, signal || AbortSignal.timeout(15000)]) });
+    if (!response.ok) { await response.body?.cancel(); throw new Error(response.status === 401 ? 'OpenCode returned 401: set OPENCODE_SERVER_PASSWORD (and optionally OPENCODE_SERVER_USERNAME).' : `OpenCode API returned HTTP ${response.status}.`); }
+    return response;
+  }
+  async get(path) { return (await this.request(path)).json(); }
+  async limited(fn) {
+    if (this.jobs >= 4) await new Promise(resolve => this.queue.push(resolve));
+    else this.jobs++;
+    try { return await fn(); } finally { const next = this.queue.shift(); if (next) next(); else this.jobs--; }
+  }
+  cutoff() { return Math.min(Date.now() - Math.max(12, this.config.window) * 3600000, new Date().setHours(0, 0, 0, 0)); }
+  async pages(path, stop = () => false, compact = value => value) {
+    const all = []; let cursor; const seen = new Set();
+    do {
+      const body = await this.get(`${path}${path.includes('?') ? '&' : '?'}limit=100&${cursor ? `cursor=${encodeURIComponent(cursor)}` : 'order=desc'}`);
+      if (!Array.isArray(body.data)) throw new Error('Unsupported OpenCode V2 list response.');
+      all.push(...body.data.map(compact));
+      if (!body.data.length || stop(body.data)) break;
+      cursor = body.cursor?.next;
+      if (seen.has(cursor)) break; seen.add(cursor);
+    } while (cursor);
+    return all;
+  }
+  async loadMessages(id, full = false, recent = false) {
+    full ||= this.fullHistory.has(id);
+    return this.limited(async () => {
+      const version = this.sessions.get(id)?.time?.updated;
+      const previous = this.messages.get(id), known = new Set(previous?.map(m => m.id));
+      const list = await this.pages(`/api/session/${encodeURIComponent(id)}/message`, page => recent && page.some(m => known.has(m.id)) || !full && page.every(m => m.time?.created < this.cutoff()), trimMessage);
+      if (!this.sessions.has(id)) return;
+      const compact = list.map(trimMessage);
+      if (recent && previous) {
+        const merged = new Map(previous.map(m => [m.id, m]));
+        for (const message of compact.reverse()) merged.set(message.id, message);
+        this.messages.set(id, [...merged.values()].filter(m => full || Math.max(m.time?.created || 0, m.time?.completed || 0) >= this.cutoff()));
+      } else this.messages.set(id, compact.reverse().filter(m => full || Math.max(m.time?.created || 0, m.time?.completed || 0) >= this.cutoff()));
+      if (!recent) this.messageVersions.set(id, version);
+    });
+  }
+  async loadSession(id) {
+    const body = await this.get(`/api/session/${encodeURIComponent(id)}`);
+    if (body.data) this.sessions.set(id, body.data);
+  }
+  removeSession(id, seen = new Set()) {
+    if (seen.has(id)) return; seen.add(id);
+    for (const child of this.sessions.values()) if (child.parentID === id) this.removeSession(child.id, seen);
+    this.sessions.delete(id); this.messages.delete(id); this.fullHistory.delete(id); this.messageVersions.delete(id);
+  }
+  async descendants(ids) {
+    const seen = new Set(); let pending = [...ids];
+    while (pending.length) {
+      const batch = pending.filter(id => !seen.has(id)); pending = [];
+      if (!batch.length) break;
+      await Promise.all(batch.map(id => this.limited(async () => {
+        seen.add(id);
+        const children = await this.pages(`/api/session?parentID=${encodeURIComponent(id)}`), ids = new Set(children.map(child => child.id));
+        for (const child of this.sessions.values()) if (child.parentID === id && !ids.has(child.id)) this.removeSession(child.id);
+        for (const child of children) { this.sessions.set(child.id, child); pending.push(child.id); }
+      })));
+    }
+    return seen;
+  }
+  async sync(force = false) {
+    if (this.syncing) return this.syncing;
+    this.syncing = (async () => {
+      const list = await this.pages('/api/session', page => page.at(-1)?.time?.updated < this.cutoff());
+      const listed = new Set(list.map(s => s.id));
+      for (const s of this.sessions.values()) if (!this.fullHistory.has(s.id) && !s.parentID && (s.time?.updated < this.cutoff() || !listed.has(s.id))) this.removeSession(s.id);
+      for (const s of list) if (s.time?.updated >= this.cutoff() || this.fullHistory.has(s.id)) this.sessions.set(s.id, s);
+      for (const s of [...this.sessions.values()]) { let parent = s.parentID; const seen = new Set(); while (parent && !this.sessions.has(parent) && !seen.has(parent)) { seen.add(parent); await this.loadSession(parent); parent = this.sessions.get(parent)?.parentID; } }
+      const roots = [...this.sessions.values()].filter(s => !s.parentID && !s.time?.archived && s.time?.updated >= Date.now() - this.config.window * 3600000);
+      const tree = await this.descendants([...roots.map(s => s.id), ...this.fullHistory]);
+      this.evict(tree);
+      await Promise.all([...this.sessions.values()].filter(s => (tree.has(s.id) || s.time?.updated >= this.cutoff() || !this.messages.has(s.id)) && (force || !this.messages.has(s.id) || this.active[s.id] || this.messageVersions.get(s.id) !== s.time?.updated)).map(s => this.loadMessages(s.id)));
+      this.active = (await this.get('/api/session/active')).data || {};
+      await this.pollPending(); this.changed();
+    })().finally(() => { this.syncing = null; });
+    return this.syncing;
+  }
+  async ensureTree(id) {
+    await this.loadSession(id); const ids = await this.descendants([id]);
+    this.historyScopes ||= new Map(); this.historyScopes.delete(id); this.historyScopes.set(id, ids);
+    while (this.historyScopes.size > 20) this.historyScopes.delete(this.historyScopes.keys().next().value);
+    this.fullHistory = new Set([...this.historyScopes.values()].flatMap(scope => [...scope]));
+    await Promise.all([...ids].map(sid => this.loadMessages(sid, true))); this.changed();
+  }
+  evict(tree = new Set()) {
+    for (const s of [...this.sessions.values()]) if (!tree.has(s.id) && !this.fullHistory.has(s.id) && s.time?.updated < this.cutoff()) this.removeSession(s.id);
+    for (const [id, messages] of this.messages) if (!this.fullHistory.has(id)) this.messages.set(id, messages.filter(m => Math.max(m.time?.created || 0, m.time?.completed || 0) >= this.cutoff()));
+  }
+  touchScope(id) { const scope = this.historyScopes?.get(id); if (scope) { this.historyScopes.delete(id); this.historyScopes.set(id, scope); } }
+  async pollPending() {
+    if (this.pendingPoll) return;
+    this.pendingPoll = true;
+    const previous = JSON.stringify([this.approvals, this.health]);
+    try {
+      const locations = new Set([...this.sessions.values()].filter(s => this.active[s.id] || s.time?.updated >= Date.now() - this.config.window * 3600000).map(s => s.location?.directory).filter(Boolean));
+      const approvals = [];
+      await Promise.all([...locations].map(directory => this.limited(async () => {
+        const query = `?location%5Bdirectory%5D=${encodeURIComponent(directory)}`;
+        const permissions = await this.get(`/api/permission/request${query}`), forms = await this.get(`/api/form${query}`);
+        for (const p of permissions.data || []) approvals.push({ id: p.id, sessionID: p.sessionID, action: p.action || 'permission', resource: (p.resources || []).join(', '), time: this.approvals.find(a => a.id === p.id)?.time || Date.now() });
+        for (const f of forms.data || []) approvals.push({ id: f.id, sessionID: f.sessionID, action: 'form', resource: f.title || 'Input requested', time: this.approvals.find(a => a.id === f.id)?.time || Date.now() });
+      })));
+      this.approvals = approvals; this.health = { ok: true, status: 200 };
+    } catch { this.health = { ok: false, status: null }; }
+    finally { this.pendingPoll = false; if (previous !== JSON.stringify([this.approvals, this.health])) this.changed(); }
+  }
+  event(event) {
+    const data = event.data || {}, id = data.sessionID || data.form?.sessionID;
+    if (!id) return;
+    if (event.type === 'session.deleted') { this.removeSession(id); this.changed(); return; }
+    this.dirty.add(id);
+    if (/permission\.|form\./.test(event.type)) void this.pollPending();
+    if (!this.dirtyTimer) this.dirtyTimer = setTimeout(() => {
+      this.dirtyTimer = null; const ids = [...this.dirty]; this.dirty.clear();
+      void Promise.allSettled(ids.map(sid => this.limited(() => this.loadSession(sid)).then(() => this.loadMessages(sid, false, true)))).then(async () => { this.active = (await this.get('/api/session/active')).data || {}; this.changed(); }).catch(() => console.error('OpenCode live refresh failed; reconciliation will retry.'));
+    }, 250);
+  }
+  async stream() {
+    let delay = 1000;
+    while (!this.abort.signal.aborted) {
+      const controller = new AbortController(), abort = () => controller.abort();
+      this.abort.signal.addEventListener('abort', abort, { once: true });
+      let watchdog = setTimeout(abort, 45000), connectedAt;
+      try {
+        const response = await this.request('/api/event', controller.signal);
+        this.connection = 'connected'; this.changed();
+        connectedAt = Date.now();
+        if (!this.lastResync || Date.now() - this.lastResync >= 10000) { this.lastResync = Date.now(); void this.sync(true).catch(() => console.error('OpenCode resynchronization failed; retrying periodically.')); }
+        let buffer = ''; const decoder = new TextDecoder();
+        for await (const chunk of response.body) {
+          clearTimeout(watchdog); watchdog = setTimeout(abort, 45000);
+          buffer += decoder.decode(chunk, { stream: true }); buffer = buffer.replace(/\r\n/g, '\n');
+          let end;
+          while ((end = buffer.indexOf('\n\n')) >= 0) {
+            const frame = buffer.slice(0, end); buffer = buffer.slice(end + 2);
+            const text = frame.split('\n').filter(line => line.startsWith('data:')).map(line => line.slice(5).trimStart()).join('\n');
+            if (text) { try { this.event(JSON.parse(text)); } catch { /* Ignore unknown envelopes. */ } }
+          }
+          if (buffer.length > 8 * 1024 * 1024) throw new Error('Oversized SSE frame');
+        }
+        if (!this.abort.signal.aborted) throw new Error('SSE closed');
+      } catch {
+        if (this.abort.signal.aborted) break;
+        delay = reconnectDelay(delay, connectedAt);
+        this.connection = 'reconnecting'; this.changed();
+        console.error(`OpenCode event stream disconnected; reconnecting in ${delay / 1000}s.`);
+        await new Promise(resolve => { const finish = () => { clearTimeout(t); this.abort.signal.removeEventListener('abort', finish); resolve(); }; const t = setTimeout(finish, delay); this.abort.signal.addEventListener('abort', finish, { once: true }); });
+        delay = Math.min(delay * 2, 30000);
+      } finally {
+        clearTimeout(watchdog); this.abort.signal.removeEventListener('abort', abort); controller.abort();
+      }
+    }
+  }
+  async start() {
+    void this.initialize();
+  }
+  async initialize() {
+    let delay = 1000, lastError;
+    while (!this.abort.signal.aborted) {
+    try {
+    let info;
+    try { info = await this.get('/api/info'); } catch (error) { throw new Error(`Cannot connect to OpenCode V2. ${error.message}`); }
+    this.version = info.version || info.data?.version;
+    if (!/^2\./.test(this.version || '')) throw new Error('Unsupported server: OpenCode V2 /api/info version 2.x is required.');
+    await this.sync(); if (this.abort.signal.aborted) return; void this.stream();
+    console.log(`Connected to OpenCode ${this.version}.`);
+    this.syncTimer = setInterval(() => { void this.sync().catch(() => console.error('OpenCode reconciliation failed; retrying in 60s.')); }, 60000);
+    this.pendingTimer = setInterval(() => { void this.pollPending(); }, 5000);
+    return;
+    } catch (error) {
+      if (this.abort.signal.aborted) return;
+      // Keep retrying, but do not silently hide authentication/version failures.
+      const message = error.message;
+      if (message !== lastError) { console.error(message); lastError = message; }
+      this.connection = 'connecting'; this.changed();
+      await new Promise(resolve => { const finish = () => { clearTimeout(timer); this.abort.signal.removeEventListener('abort', finish); resolve(); }; const timer = setTimeout(finish, delay); this.abort.signal.addEventListener('abort', finish, { once: true }); });
+      delay = Math.min(delay * 2, 30000);
+    }
+    }
+  }
+  stop() { this.abort.abort(); clearInterval(this.syncTimer); clearInterval(this.pendingTimer); clearTimeout(this.dirtyTimer); }
+}

package/package.json

@@ -1,6 +1,48 @@
 {
   "name": "opencode-agent-flow",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.1",
+  "description": "Live agent flow visualization for OpenCode V2 over its public HTTP API and SSE",
+  "type": "module",
+  "bin": {
+    "opencode-agent-flow": "bin/cli.mjs"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "license": "MIT",
+  "author": "orybakov (https://github.com/orybakov)",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/orybakov/opencode-agent-flow.git"
+  },
+  "bugs": {
+    "url": "https://github.com/orybakov/opencode-agent-flow/issues"
+  },
+  "homepage": "https://github.com/orybakov/opencode-agent-flow#readme",
+  "keywords": [
+    "opencode",
+    "ai-agents",
+    "visualizer",
+    "observability",
+    "webgl"
+  ],
+  "exports": {},
+  "files": [
+    "bin",
+    "server.mjs",
+    "lib",
+    "public",
+    "prices.json",
+    "README.md",
+    "LICENSE",
+    "SECURITY.md",
+    "CONTRIBUTING.md",
+    "CHANGELOG.md",
+    "docs/*.md",
+    "docs/screenshot.png"
+  ],
+  "scripts": {
+    "start": "node bin/cli.mjs",
+    "test": "node --test"
+  }
+}

package/prices.json

@@ -0,0 +1,10 @@
+{
+  "note": "Illustrative placeholders, USD per 1M tokens, not subscription billing. Context limits are estimates; edit to match your provider.",
+  "default": { "input": 3, "output": 15, "cacheRead": 0.3, "contextLimit": 200000 },
+  "models": {
+    "claude-opus-5-5": { "input": 5, "output": 25, "cacheRead": 0.5, "contextLimit": 200000 },
+    "claude-sonnet-5-5": { "input": 3, "output": 15, "cacheRead": 0.3, "contextLimit": 200000 },
+    "gpt-6.1-sol": { "input": 2.5, "output": 15, "cacheRead": 0.25, "contextLimit": 200000 },
+    "gemini-3.8-flash-high": { "input": 0.5, "output": 3, "cacheRead": 0.05, "contextLimit": 1000000 }
+  }
+}

package/public/app.js

@@ -0,0 +1,223 @@
+const $ = s => document.querySelector(s);
+const esc = s => String(s ?? '').replace(/[&<>"']/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c]);
+const fmt = n => n >= 1e6 ? `${(n / 1e6).toFixed(1)}m` : n >= 1000 ? `${(n / 1000).toFixed(1)}k` : String(Math.round(n || 0));
+const agentCalls = (groups, calls) => `${groups} agent${groups === 1 ? '' : 's'} · ${calls} call${calls === 1 ? '' : 's'}`;
+const shortModel = m => /opus|sonnet|gemini|gpt/i.exec(m)?.[0] || m.slice(0, 12);
+const put = (selector, text) => { const el = $(selector); if (el.textContent !== text) el.textContent = text; };
+const html = (selector, text) => { const el = $(selector); if (el.innerHTML !== text) el.innerHTML = text; };
+let state, rootId, agents = [], edges = [], paused = matchMedia('(prefers-reduced-motion: reduce)').matches, connected = false;
+const storageKey = 'agent-flow.root';
+const urlRoot = new URL(location.href).searchParams.get('session');
+try { rootId = urlRoot || localStorage.getItem(storageKey); } catch { rootId = urlRoot; }
+const params = new URL(location.href).searchParams;
+let view = 'all', sessionId = null, sessionList = [], stream, requestVersion = 0;
+try { view = params.get('view') || (urlRoot ? 'session' : localStorage.getItem('agent-flow.view')) || 'all'; sessionId = params.has('view') || urlRoot ? urlRoot : localStorage.getItem('agent-flow.session'); } catch { view = params.get('view') || (urlRoot ? 'session' : 'all'); sessionId = urlRoot; }
+if (view !== 'session') view = 'all';
+function saveView() {
+  const url = new URL(location.href); url.searchParams.set('view', view);
+  if (view === 'session' ? sessionId : rootId) url.searchParams.set('session', view === 'session' ? sessionId : rootId); else url.searchParams.delete('session');
+  history.replaceState(null, '', url);
+  try { localStorage.setItem('agent-flow.view', view); if (sessionId) localStorage.setItem('agent-flow.session', sessionId); } catch { /* Storage may be disabled. */ }
+}
+function renderPicker() {
+  const query = $('#session-search').value.toLowerCase(), list = sessionList.filter(s => `${s.title} ${s.agent} ${s.model} ${s.id}`.toLowerCase().includes(query));
+  const summary = s => `${s.agent} · ${s.model} · ${activityTime(s.lastActivity)} · ${agentCalls(s.agentCount, s.callCount)} · ${fmt(s.tokens)} tokens · ${s.status}`;
+  html('#root', '<option value="">select a session…</option>' + list.map(s => `<option value="${esc(s.id)}">${esc(s.title)} · ${esc(summary(s))}</option>`).join('') + (sessionId && !list.some(s => s.id === sessionId) ? `<option value="${esc(sessionId)}">${esc(state?.roots[0]?.title || sessionId)}</option>` : ''));
+  $('#root').value = sessionId || ''; $('#root').disabled = false;
+  html('#session-cards', list.map(s => `<button type="button" class="session-card" data-session="${esc(s.id)}"><strong>${esc(s.title || s.id)}</strong><span class="${s.status}">● ${esc(s.status)} · ${esc(s.agent)} · ${esc(s.model)}</span><span>${activityTime(s.lastActivity)} · ${agentCalls(s.agentCount, s.callCount)} · ${fmt(s.tokens)} tokens</span></button>`).join('') || '<p class="muted">No sessions match this search.</p>');
+}
+function applyView() {
+  const picker = view === 'session' && !sessionId;
+  document.body.dataset.view = view;
+  $('#session-search').hidden = view !== 'session'; $('#session-picker').hidden = !picker; $('main').hidden = picker;
+  for (const mode of ['all', 'session']) $(`#view-${mode}`).setAttribute('aria-pressed', String(mode === view));
+  $('.panel:nth-child(5) h3').textContent = view === 'session' ? '// tokens · session' : '// tokens today';
+  if (view === 'session') renderPicker();
+  if (picker) { put('#title', 'select a session'); put('#subtitle', `opencode · ${sessionList.length} root sessions / live window`); put('#counts', ''); put('#connection', 'select session'); }
+}
+async function loadSessions() {
+  try { const response = await fetch('/api/sessions'); if (!response.ok) throw new Error(); sessionList = await response.json(); if (view === 'session') { renderPicker(); if (!sessionId) applyView(); } } catch { if (view === 'session' && !sessionId) put('#connection', 'sessions unavailable'); }
+}
+function selectSession(id) { sessionId = id || null; popover.hidePopover(); saveView(); connect(); }
+$('#session-search').addEventListener('input', renderPicker);
+$('#session-cards').addEventListener('click', e => { const card = e.target.closest('[data-session]'); if (card) selectSession(card.dataset.session); });
+for (const mode of ['all', 'session']) $(`#view-${mode}`).addEventListener('click', () => { if (view === mode) return; view = mode; saveView(); connect(); });
+const validDate = time => { const date = new Date(time); return Number.isFinite(date.getTime()) ? date : new Date(0); };
+const activityTime = time => validDate(time).toLocaleString([], { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' });
+const totalTokens = a => a.tokens.input + a.tokens.output + a.tokens.cacheRead;
+function rememberRoot() { try { if (rootId) localStorage.setItem(storageKey, rootId); } catch { /* Storage may be disabled. */ } }
+const popover = document.createElement('div');
+popover.id = 'group-sessions'; popover.setAttribute('popover', 'auto'); document.body.append(popover);
+popover.setAttribute('role', 'dialog'); popover.setAttribute('aria-label', 'Group sessions');
+let openGroupId, popoverAnchor;
+function showSessions(id, anchor) {
+  const group = agents.find(a => a.id === id);
+  if (!group) { popover.hidePopover(); return; }
+  openGroupId = id; popoverAnchor = anchor;
+  const scrollTop = popover.scrollTop, closeFocused = document.activeElement === popover.querySelector('button');
+  const content = `<div class="popover-heading"><strong>${esc(group.agent)} · ${group.count} sessions</strong><button type="button" aria-label="Close">×</button></div><div class="session-list">${group.sessions.map(s => `<div class="session-item"><strong title="${esc(s.title)}">${esc(s.title || s.id)}</strong><div><b class="${s.status}">${esc(s.status)}</b><span>${fmt(totalTokens(s))} tokens</span><time datetime="${validDate(s.lastActivity).toISOString()}">${activityTime(s.lastActivity)}</time></div></div>`).join('')}</div>`;
+  if (popover.innerHTML !== content) { popover.innerHTML = content; popover.scrollTop = scrollTop; if (closeFocused) popover.querySelector('button').focus({ preventScroll: true }); }
+  popover.querySelector('button').onclick = () => popover.hidePopover();
+  if (!popover.matches(':popover-open')) popover.showPopover();
+  const rect = anchor.getBoundingClientRect();
+  popover.style.left = `${Math.max(12, Math.min(rect.left, innerWidth - popover.offsetWidth - 12))}px`;
+  popover.style.top = `${Math.max(12, Math.min(rect.bottom + 8, innerHeight - popover.offsetHeight - 12))}px`;
+}
+popover.addEventListener('toggle', () => { if (!popover.matches(':popover-open')) openGroupId = null; for (const [id, el] of nodeElements) el.setAttribute('aria-expanded', String(id === openGroupId)); });
+let networkHeight = 540, hub = [682, 270], lastFrame = 0;
+const nodeElements = new Map();
+const canvas = $('#wires'), ctx = canvas.getContext('2d');
+let flow, motionTime = 1;
+window.__renderer = 'canvas2d';
+import('/flow-webgl.js').then(({ createFlow }) => {
+  flow = createFlow(canvas, () => { flow = null; canvas.hidden = false; window.__renderer = 'canvas2d'; draw(performance.now(), true); });
+  canvas.hidden = true; window.__renderer = 'webgl'; resize();
+}).catch(() => { window.__renderer = 'canvas2d'; draw(performance.now(), true); });
+$('#root').addEventListener('change', e => { if (view === 'session') return selectSession(e.target.value); rootId = e.target.value; rememberRoot(); saveView(); popover.hidePopover(); render(); });
+$('#motion').addEventListener('click', () => { paused = !paused; motionLabel(); draw(performance.now(), true); });
+function motionLabel() { put('#motion', paused ? 'resume motion' : 'pause motion'); $('#motion').setAttribute('aria-pressed', String(paused)); }
+motionLabel();
+function resize() {
+  const width = $('.viewport').clientWidth;
+  const scale = width < 650 ? .7 : Math.min(1, width / 1364);
+  $('.network').style.transform = width < 650 ? `scale(${scale})` : `translateX(-50%) scale(${scale})`;
+  $('.network').style.transformOrigin = width < 650 ? '0 0' : '50% 0';
+  $('.scene').style.height = `${Math.max(width < 650 ? 440 : 500, networkHeight * scale)}px`;
+  $('.network').style.height = `${networkHeight}px`;
+  const dpr = Math.min(devicePixelRatio || 1, 2);
+  canvas.width = 1364 * dpr; canvas.height = networkHeight * dpr;
+  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+  flow?.resize(1364, networkHeight, dpr);
+  updateAnchors();
+  draw(performance.now(), true);
+}
+addEventListener('resize', resize);
+function render() {
+  if (!state) return;
+   if (view === 'session') rootId = sessionId;
+   else if (!state.roots.some(r => r.id === rootId)) rootId = state.roots[0]?.id;
+   if (view === 'all') rememberRoot();
+  const options = state.roots.map(r => `<option value="${esc(r.id)}">${esc(r.title || r.id)} · ${activityTime(r.lastActivity)} · ${agentCalls(r.agentCount, r.callCount)}</option>`).join('');
+   if (view === 'all') { html('#root', options); $('#root').value = rootId || ''; $('#root').disabled = !rootId; } else renderPicker();
+  const selected = new Set(rootId ? [rootId] : []);
+  let added = true;
+  while (added) { added = false; for (const a of state.agents) if (selected.has(a.parentId) && !selected.has(a.id)) { selected.add(a.id); added = true; } }
+  agents = state.agents.filter(a => selected.has(a.id));
+  const root = agents.find(a => a.id === rootId), children = agents.filter(a => a.id !== rootId);
+  put('#title', root?.title || 'no active sessions');
+   put('#subtitle', `opencode ${state.serverVersion || ''}${state.demo ? ' · demo' : ''} · orchestration topology / ${agentCalls(agents.length, state.roots.find(r => r.id === rootId)?.callCount || 0)}`);
+   put('#connection', state.connection === 'connected' ? 'live' : state.connection || 'connecting');
+   $('.status').classList.toggle('offline', state.connection !== 'connected');
+   put('#counts', `${agents.filter(a => a.status === 'working').length} running · ${state.approvals.filter(p => agents.some(a => a.sessions.some(s => s.id === p.sessionID))).length} approvals · ${fmt(state.aggregates.totalToday)} tokens ${view === 'session' ? '· session' : 'today'}`);
+  put('#graphMeta', ` · ${children.length} children / ${state.windowHours}h window`);
+  $('.hub').hidden = !root; $('#empty').hidden = !!root;
+    put('#empty', view === 'session' ? 'Session not found' : `No active sessions in the last ${state.windowHours} hours`);
+  if (root) {
+    const ratio = root.context / root.contextLimit;
+    put('#lead', root.agent); put('#context', `${root.status} · ctx ${root.contextEstimated ? '≈ ' : ''}${fmt(root.context)}`); put('#model', root.model);
+    $('#context').title = root.contextEstimated ? 'Last reported usage; current response is streaming' : 'Latest assistant input + cache read + cache write';
+    put('#leadTool', root.currentTool ? `${root.currentTool.name} → ${root.currentTool.target}` : `${fmt(root.tokens.input + root.tokens.output + root.tokens.cacheRead)} tokens`);
+    $('#leadTool').title = root.currentTool?.target || '';
+    $('#contextRing').setAttribute('stroke-dasharray', `${Math.min(1, ratio) * 635} 635`);
+    put('#sceneSummary', `all agents connected to ${root.agent} / ${Math.round(ratio * 100)}% context pressure`);
+  } else put('#sceneSummary', 'read-only · waiting for session activity');
+  const sessionIds = new Set(agents.flatMap(a => a.sessions.map(s => s.id)));
+  const pending = state.approvals.filter(p => sessionIds.has(p.sessionID));
+  const items = [...children, ...(pending.length ? [{ id: '__approval', agent: 'user · approval', model: `${pending.length} pending`, status: 'waiting', currentTool: { name: pending[0].action, target: pending[0].resource }, tokens: { input: 0, output: 0, cacheRead: 0 } }] : [])];
+  const rows = Math.max(3, Math.ceil(items.length / 4));
+  networkHeight = Math.max(540, 120 + rows * 105);
+  hub = [682, networkHeight / 2]; $('.hub').style.top = `${hub[1] - 118}px`;
+  const points = new Map();
+  const ring = [[75,165],[330,55],[840,55],[1090,165],[75,355],[330,415],[840,415],[1090,355]];
+  items.forEach((a, i) => {
+    const p = items.length <= 8 ? ring[i] : [[55,295,865,1105][i % 4], 65 + Math.floor(i / 4) * 105];
+    points.set(a.id, [p[0] + 100, p[1] + 48]);
+    let el = nodeElements.get(a.id);
+    if (!el) { el = document.createElement('article'); $('#nodes').append(el); nodeElements.set(a.id, el); }
+    if (a.id !== '__approval') {
+      el.tabIndex = 0; el.setAttribute('role', 'button'); el.setAttribute('aria-haspopup', 'dialog');
+      el.setAttribute('aria-expanded', String(openGroupId === a.id));
+      el.onclick = () => openGroupId === a.id ? popover.hidePopover() : showSessions(a.id, el);
+      el.onkeydown = e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); el.click(); } };
+    }
+    el.className = `node ${a.status}${a.id === '__approval' ? ' approval' : ''}`;
+    el.style.transform = `translate(${p[0]}px,${p[1]}px)`;
+    el.title = `${a.agent} · ${a.model}\n${a.title || ''}\n${a.currentTool?.target || ''}`;
+    const content = `<div class="cap"><strong>${esc(a.agent)}${a.count > 1 ? ` <small>×${a.count}</small>` : ''}</strong><span class="tag">${esc(a.id === '__approval' ? a.model : shortModel(a.model))}</span></div><div class="rows"><div class="row"><span>${esc(a.currentTool?.name || 'state')}</span><span>${esc(a.currentTool?.target || a.status)}</span></div><div class="row"><span>${a.id === '__approval' ? 'action' : 'tokens'}</span><span>${a.id === '__approval' ? 'confirm in OpenCode' : fmt(totalTokens(a))}</span></div></div>`;
+    if (el.innerHTML !== content) el.innerHTML = content;
+  });
+  for (const [id, el] of nodeElements) if (!items.some(a => a.id === id)) { el.remove(); nodeElements.delete(id); }
+  edges = children.map((a, i) => {
+    const p = points.get(a.id), dx = p[0] - hub[0], dy = p[1] - hub[1], k = 116 / Math.hypot(dx, dy);
+    return { id: a.id, a: [hub[0] + dx * k, hub[1] + dy * k], b: p, status: a.status, active: a.status === 'working' || a.status === 'waiting', bend: i % 2 ? 30 : -25, returning: a.status === 'done' };
+  });
+  if (pending.length) for (const p of pending) { const sourceId = agents.find(a => a.sessions.some(s => s.id === p.sessionID))?.id; const source = points.get(sourceId) || hub; edges.push({ id: '__approval', sourceId, a: source, b: points.get('__approval'), status: 'waiting', active: true, bend: 22 }); }
+  put('#transport', `${edges.length} connections · ${paused ? 'motion paused' : 'white → pink / token transport'}`);
+  const events = state.events.filter(e => selected.has(e.groupId)).slice(-60).reverse();
+  html('#events', events.map(e => `<div class="event" title="${esc(e.agent + ' · ' + e.kind + ' · ' + e.text)}"><time>${validDate(e.time).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</time><em>${esc(e.kind === 'permission asked' ? 'wait' : e.kind === 'tool complete' ? 'done' : e.kind === 'tool start' ? 'tool' : e.kind)}</em>${esc(e.agent)} → ${esc(e.text)}</div>`).join('') || '<div class="muted">no recent events</div>');
+  const ag = state.aggregates, max = Math.max(1, ...ag.hourly.map(b => b.total));
+  html('#hourly', ag.hourly.map(b => `<div class="bars" title="${esc(Object.entries(b.models).map(([m, n]) => `${m}: ${fmt(n)}`).join('\n') || 'no tokens')}"><time>${validDate(b.time).getHours().toString().padStart(2, '0')}</time><div class="track"><i style="width:${b.total / max * 100}%"></i></div><b>${fmt(b.total)}</b></div>`).join(''));
+  put('#cacheValue', `${Math.round(ag.cacheHit * 100)}%`); $('#cacheRing').setAttribute('stroke-dasharray', `${ag.cacheHit * 270} 270`);
+  const heat = ag.heat.filter(a => selected.has(a.id)), peak = Math.max(1, ...heat.flatMap(a => a.values));
+  html('#heat', heat.map(a => `<div class="heat-row"><span title="${esc(a.agent)}">${esc(a.agent)}</span>${a.values.map((n, i) => `<i title="${esc(a.agent)} / ${(12 - i) * 5}–${(11 - i) * 5} min ago: ${n} events" style="opacity:${.1 + .9 * n / peak}"></i>`).join('')}</div>`).join('') || '<div class="muted">no activity</div>');
+  put('#total', fmt(ag.totalToday)); put('#estimate', `≈ $${ag.estimate.toFixed(2)} est.`);
+  html('#today', Object.entries(ag.today).sort((a, b) => b[1].total - a[1].total).map(([m, t]) => `<div title="${esc(m)} · input ${t.input} / output ${t.output} / cache ${t.cacheRead}">${esc(shortModel(m))} · ${fmt(t.total)} · ≈ $${t.estimate.toFixed(2)}</div>`).join('') || 'no tokens today');
+  html('#ledger', agents.map(a => `<div title="${esc(a.title)}"><b class="${a.status}">[ ${a.status.padEnd(7, ' ')} ]</b> ${esc(a.agent)}</div>`).join('') || '<span class="muted">no agents</span>');
+  put('#health', `transport / public HTTP + SSE · read-only${state.permissionHealth.ok ? '' : ' · approvals unavailable'}`);
+  put('#clock', `${validDate(state.updatedAt).toLocaleString()} · snapshot`);
+  resize();
+  if (openGroupId) showSessions(openGroupId, popoverAnchor);
+}
+// Seven-strand Bezier harnesses and particle transport, adapted from concept5-flow.
+function updateAnchors() {
+  const rect = $('.network').getBoundingClientRect(), scale = rect.width / 1364;
+  const center = el => { const r = el.getBoundingClientRect(); return [(r.left + r.width / 2 - rect.left) / scale, (r.top + r.height / 2 - rect.top) / scale]; };
+  if (!$('.hub').hidden) hub = center($('.hub'));
+  const dock = (el, target) => {
+    const c = center(el), r = el.getBoundingClientRect(), dx = target[0] - c[0], dy = target[1] - c[1];
+    const k = Math.min((r.width / scale / 2 + 3) / (Math.abs(dx) || .001), (r.height / scale / 2 + 3) / (Math.abs(dy) || .001));
+    return [c[0] + dx * k, c[1] + dy * k];
+  };
+  for (const e of edges) {
+    const node = nodeElements.get(e.id), source = nodeElements.get(e.sourceId);
+    if (!node) continue;
+    const target = center(node), start = source ? center(source) : hub;
+    const dx = target[0] - start[0], dy = target[1] - start[1], k = 116 / (Math.hypot(dx, dy) || 1);
+    e.a = source ? dock(source, target) : [hub[0] + dx * k, hub[1] + dy * k];
+    e.b = dock(node, start);
+  }
+}
+function curve(e, t, j) {
+  const [x,y] = e.a, [X,Y] = e.b, dx = X-x, dy = Y-y, l = Math.hypot(dx,dy) || 1, off = (j-3)*5+e.bend, u = 1-t;
+  const cx=x+dx*.34-dy/l*off, cy=y+dy*.34+dx/l*off, ex=x+dx*.68+dy/l*off*.6, ey=y+dy*.68-dx/l*off*.6;
+  return [u*u*u*x+3*u*u*t*cx+3*u*t*t*ex+t*t*t*X,u*u*u*y+3*u*u*t*cy+3*u*t*t*ey+t*t*t*Y];
+}
+function ball(x,y,r,alpha=1) { ctx.globalAlpha=alpha;ctx.shadowColor='#ff3d8b';ctx.shadowBlur=r*7;ctx.fillStyle='#ffeaf5';ctx.beginPath();ctx.arc(x,y,r,0,Math.PI*2);ctx.fill();ctx.shadowBlur=0; }
+function draw(ms, force = false) {
+  if (document.hidden) return;
+  if (!force && (paused || document.hidden || ms - lastFrame < 32)) return;
+  if (!paused && !document.hidden) motionTime += Math.min(.1, Math.max(0, (ms - lastFrame) / 1000));
+  lastFrame = ms; const t = motionTime;
+  if (flow) { flow.draw(edges, hub, agents.length > 0, t); return; }
+  ctx.clearRect(0,0,1364,networkHeight);ctx.globalCompositeOperation='lighter';
+  edges.forEach((e,ei)=>{for(let j=0;j<7;j++){ctx.globalAlpha=e.active?.29:.1;ctx.strokeStyle=j%3?'#ff448c':'#b57bff';ctx.lineWidth=.7;ctx.beginPath();for(let k=0;k<=45;k++){const p=curve(e,k/45,j);k?ctx.lineTo(...p):ctx.moveTo(...p)}ctx.stroke();for(let p=0;p<(e.active?4:1);p++){const f=(t*(.075+j*.008)+p*.237+j*.133+ei*.173)%1;const pos=curve(e,e.returning?1-f:f,j);ball(...pos,(p+j)%5===0?2.5:1.1,e.active?.9:.28)}}ball(...e.a,e.active?3:1.6,.9);ball(...e.b,e.active?3.4:1.8,.95)});
+  if (agents.length) for(let i=0;i<35;i++){const a=i*2.399+t*.012,r=118+Math.sin(i*7)*6;ball(hub[0]+Math.cos(a)*r,hub[1]+Math.sin(a)*r,i%6===0?1.5:.65,.35+(i%4)*.15)}
+  ctx.globalAlpha=1;ctx.globalCompositeOperation='source-over';
+}
+function animate(ms) { draw(ms); requestAnimationFrame(animate); }
+requestAnimationFrame(animate);
+function connect() {
+  stream?.close(); const version = ++requestVersion; connected = false; state = null; applyView();
+  if (view === 'session' && !sessionId) return;
+  const query = view === 'session' ? `?session=${encodeURIComponent(sessionId)}` : '';
+  put('#connection', 'connecting');
+  // Clear previous-session content immediately; late requests cannot replace the new scope.
+  $('main').hidden = true;
+  const accept = data => { if (version !== requestVersion) return; state = data; $('main').hidden = false; render(); };
+  stream = new EventSource(`/api/stream${query}`);
+  stream.addEventListener('state', e => { try { accept(JSON.parse(e.data)); } catch { put('#connection', 'invalid state'); } });
+  stream.onopen = () => { connected = true; put('#connection', 'live'); $('.status').classList.remove('offline'); };
+  stream.onerror = () => { connected = false; put('#connection', 'reconnecting'); $('.status').classList.add('offline'); };
+  fetch(`/api/state${query}`).then(r => { if (!r.ok) throw new Error(); return r.json(); }).then(data => { if (!state) accept(data); }).catch(() => { if (version === requestVersion && !connected) put('#connection', 'server unavailable'); });
+}
+saveView(); connect(); loadSessions(); setInterval(loadSessions, 10000);