agenter-app 0.0.0-stage → 1.0.0

package/public/app.js

@@ -0,0 +1,1414 @@
+'use strict';
+
+// ---------- state & small utils ----------
+
+const state = {
+  sessions: [],
+  pending: [],
+  settings: {},
+  view: 'inbox', // 'inbox' | 'session'
+  selected: null,
+  filter: '',
+  transcript: { sessionId: null, epoch: '', messages: null },
+  openTools: new Set(),
+  seenPending: new Set(),
+  firstSnapshot: true,
+};
+
+const $ = (sel, root = document) => root.querySelector(sel);
+const esc = (s) => String(s ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c]);
+const clip = (s, n) => ((s = String(s ?? '')).length > n ? s.slice(0, n) + `\n… (${s.length - n} more chars)` : s);
+
+const store = {
+  get(k, d) {
+    try {
+      const v = localStorage.getItem('agenter.' + k);
+      return v === null ? d : JSON.parse(v);
+    } catch {
+      return d;
+    }
+  },
+  set(k, v) {
+    try {
+      localStorage.setItem('agenter.' + k, JSON.stringify(v));
+    } catch {}
+  },
+};
+
+function ago(t) {
+  const s = Math.max(0, Math.round((Date.now() - (typeof t === 'number' ? t : Date.parse(t))) / 1000));
+  if (s < 10) return 'now';
+  if (s < 60) return `${s}s`;
+  if (s < 3600) return `${Math.floor(s / 60)}m`;
+  if (s < 86400) return `${Math.floor(s / 3600)}h`;
+  return `${Math.floor(s / 86400)}d`;
+}
+
+const post = (url, body) => fetch(url, { method: 'POST', headers: { 'content-type': 'application/json', 'x-agenter': '1' }, body: JSON.stringify(body) });
+
+const STATUS_LABEL = { working: 'Working', waiting: 'Needs you', vscode: 'Waiting in VS Code', idle: 'Idle', dormant: 'Not connected', ended: 'Ended' };
+const isLive = (s) => s.status !== 'dormant' && s.status !== 'ended';
+const pendingFor = (sid) => state.pending.filter((p) => p.sessionId === sid);
+const sessionById = (sid) => state.sessions.find((s) => s.id === sid);
+const sessionLabel = (s) => s.project || (s.cwd ? s.cwd.split(/[\\/]/).pop() : '') || s.id.slice(0, 8);
+const isCodex = (s) => s.agent === 'codex';
+const agentTag = (s) => (isCodex(s) ? '<span class="agent-tag" title="Codex session">Codex</span>' : '');
+
+function pendingSummary(p) {
+  if (p.kind === 'permission') return `Wants to use ${p.tool}`;
+  if (p.kind === 'question') return 'Has a question for you';
+  return 'Finished, waiting for your reply';
+}
+
+// ---------- icons & avatars ----------
+
+const ICONS = {
+  terminal: '<polyline points="4 17 10 11 4 5"/><line x1="12" x2="20" y1="19" y2="19"/>',
+  file: '<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/>',
+  edit: '<path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z"/>',
+  search: '<circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>',
+  globe: '<circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>',
+  list: '<path d="m3 17 2 2 4-4"/><path d="m3 7 2 2 4-4"/><path d="M13 6h8"/><path d="M13 12h8"/><path d="M13 18h8"/>',
+  bot: '<rect width="18" height="10" x="3" y="11" rx="2"/><circle cx="12" cy="5" r="2"/><path d="M12 7v4"/><path d="M8 16h.01"/><path d="M16 16h.01"/>',
+  help: '<circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/>',
+  tool: '<path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/>',
+  code: '<polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/>',
+  send: '<path d="m22 2-7 20-4-9-9-4Z"/><path d="M22 2 11 13"/>',
+  check: '<path d="M20 6 9 17l-5-5"/>',
+  shield: '<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10"/>',
+  reply: '<path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/>',
+  sparkle: '<path d="M12 3l1.9 5.8L20 11l-6.1 2.2L12 19l-1.9-5.8L4 11l6.1-2.2z"/>',
+  info: '<circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/>',
+  menu: '<line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/>',
+  plug: '<path d="M12 22v-5"/><path d="M9 8V2"/><path d="M15 8V2"/><path d="M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z"/>',
+  refresh: '<path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/>',
+  gauge: '<path d="m12 14 4-4"/><path d="M3.34 19a10 10 0 1 1 17.32 0"/>',
+  preview: '<rect width="18" height="18" x="3" y="3" rx="2"/><path d="M15 3v18"/>',
+};
+const icon = (name) => `<svg class="ic" viewBox="0 0 24 24" aria-hidden="true">${ICONS[name] || ICONS.tool}</svg>`;
+
+function toolIcon(name = '') {
+  if (/^(Bash|PowerShell|BashOutput|KillShell|exec|wait|shell)$/.test(name)) return 'terminal';
+  if (/^(Read|NotebookRead)$/.test(name)) return 'file';
+  if (/^(Edit|MultiEdit|Write|NotebookEdit)$/.test(name)) return 'edit';
+  if (/^(Grep|Glob|LS)$/.test(name)) return 'search';
+  if (/^Web/.test(name)) return 'globe';
+  if (/^Todo/.test(name)) return 'list';
+  if (/^(Task|Agent)$/.test(name)) return 'bot';
+  if (name === 'AskUserQuestion') return 'help';
+  if (name === 'ExitPlanMode') return 'list';
+  return 'tool';
+}
+const toolName = (name = '') => (name.startsWith('mcp__') ? name.slice(5).replace('__', ' · ') : name);
+
+function hue(str) {
+  let h = 0;
+  for (const c of str) h = (h * 31 + c.charCodeAt(0)) % 360;
+  return h;
+}
+function initials(label) {
+  const parts = label.split(/[-_.\s]+/).filter(Boolean);
+  return ((parts.length > 1 ? parts[0][0] + parts[1][0] : label.slice(0, 2)) || '?').toUpperCase();
+}
+function avatar(s, cls = '') {
+  const label = sessionLabel(s);
+  return `<span class="avatar ${cls}" style="--h:${hue(label)}">${esc(initials(label))}<span class="st ${esc(s.status)}"></span></span>`;
+}
+
+// ---------- tiny markdown ----------
+
+function inline(text) {
+  let t = esc(text);
+  const codes = [];
+  t = t.replace(/`([^`\n]+)`/g, (_, c) => `\u0000${codes.push(c) - 1}\u0000`);
+  t = t.replace(/\*\*([^*\n]+)\*\*/g, '<strong>$1</strong>');
+  t = t.replace(/(^|[^*\w])\*([^*\n]+)\*(?=[^*\w]|$)/g, '$1<em>$2</em>');
+  t = t.replace(/\[([^\]\n]+)\]\((https?:\/\/[^)\s]+)\)/g, '<a href="$2" target="_blank" rel="noopener">$1</a>');
+  t = t.replace(/\[([^\]\n]+)\]\(([^)\s]+)\)/g, '<span class="file-ref" title="$2">$1</span>'); // file links only work inside VS Code
+  return t.replace(/\u0000(\d+)\u0000/g, (_, i) => `<code>${codes[i]}</code>`);
+}
+
+function blocks(text) {
+  const out = [];
+  let para = [];
+  let list = null; // { tag, items }
+  let table = [];
+  const flushPara = () => para.length && (out.push(`<p>${para.map(inline).join('<br>')}</p>`), (para = []));
+  const flushList = () => list && (out.push(`<${list.tag}>${list.items.map((i) => `<li>${inline(i)}</li>`).join('')}</${list.tag}>`), (list = null));
+  const flushTable = () => {
+    if (!table.length) return;
+    const rows = table.filter((r) => !/^\|[\s:|-]+\|$/.test(r)).map((r) => r.slice(1, -1).split('|').map((c) => c.trim()));
+    out.push(`<table>${rows.map((r, i) => `<tr>${r.map((c) => (i ? `<td>${inline(c)}</td>` : `<th>${inline(c)}</th>`)).join('')}</tr>`).join('')}</table>`);
+    table = [];
+  };
+  const flushAll = () => (flushPara(), flushList(), flushTable());
+
+  for (const raw of text.split('\n')) {
+    const line = raw.trimEnd();
+    let m;
+    if (!line.trim()) flushAll();
+    else if (/^\|.*\|$/.test(line.trim())) (flushPara(), flushList(), table.push(line.trim()));
+    else if ((m = line.match(/^(#{1,4})\s+(.*)/))) (flushAll(), out.push(`<h${m[1].length}>${inline(m[2])}</h${m[1].length}>`));
+    else if ((m = line.match(/^\s*[-*•]\s+(.*)/)) || (m = line.match(/^\s*\d+[.)]\s+(.*)/))) {
+      const tag = /^\s*\d/.test(line) ? 'ol' : 'ul';
+      flushPara();
+      flushTable();
+      if (list && list.tag !== tag) flushList();
+      (list = list || { tag, items: [] }).items.push(m[1]);
+    } else if ((m = line.match(/^>\s?(.*)/))) (flushAll(), out.push(`<blockquote>${inline(m[1])}</blockquote>`));
+    else (flushList(), flushTable(), para.push(line));
+  }
+  flushAll();
+  return out.join('');
+}
+
+const md = (src) =>
+  String(src ?? '')
+    .split('```')
+    .map((part, i) => {
+      if (i % 2 === 0) return blocks(part);
+      const nl = part.indexOf('\n');
+      return `<pre><code>${esc((nl >= 0 ? part.slice(nl + 1) : part).replace(/\n$/, ''))}</code></pre>`;
+    })
+    .join('');
+
+// ---------- live connection ----------
+
+// The server only holds sessions while this window has focus, so tell it whenever that changes.
+const CLIENT_ID = crypto.randomUUID();
+const hasAttention = () => document.visibilityState === 'visible' && document.hasFocus();
+let reportedFocus = null;
+function reportFocus(force = false) {
+  const focused = hasAttention();
+  if (focused === reportedFocus && !force) return;
+  reportedFocus = focused;
+  post('/api/focus', { client: CLIENT_ID, focused }).catch(() => {});
+}
+window.addEventListener('focus', () => reportFocus());
+// Clicking into the preview iframe blurs the window first; check once focus has landed.
+window.addEventListener('blur', () => setTimeout(reportFocus));
+document.addEventListener('visibilitychange', () => reportFocus());
+
+function connect() {
+  const es = new EventSource(`/events?client=${CLIENT_ID}&focused=${hasAttention() ? 1 : 0}`);
+  es.addEventListener('state', (e) => apply(JSON.parse(e.data)));
+  es.onopen = () => (setConn(true), reportFocus(true)); // after a reconnect the URL's focus flag may be stale
+  es.onerror = () => setConn(false);
+}
+
+function setConn(ok) {
+  const el = $('#conn');
+  el.className = `conn ${ok ? 'ok' : 'bad'}`;
+  el.title = ok ? 'Live' : 'Reconnecting to the Agenter server…';
+}
+
+function apply(snap) {
+  const prevEventAt = sessionById(state.selected)?.lastEventAt;
+  state.sessions = snap.sessions;
+  state.pending = snap.pending;
+  state.settings = snap.settings;
+  state.usage = snap.usage;
+  state.codexUsage = snap.codexUsage;
+  checkUsageAlerts(state.usage, 'Claude');
+  checkUsageAlerts(state.codexUsage, 'Codex');
+
+  for (const p of state.pending) {
+    if (state.seenPending.has(p.id)) continue;
+    state.seenPending.add(p.id);
+    if (!state.firstSnapshot) alertUser(p);
+  }
+  state.firstSnapshot = false;
+
+  // A session just started from here may reach us a moment after we switched to it.
+  if (sessionById(state.awaiting)) state.awaiting = null;
+  if (state.view === 'session' && !sessionById(state.selected) && state.selected !== state.awaiting) state.view = 'inbox';
+  render();
+  const sel = state.view === 'session' && sessionById(state.selected);
+  if (sel && (sel.id !== state.transcript.sessionId || sel.lastEventAt !== prevEventAt)) loadTranscript(sel.id);
+}
+
+function sortedSessions() {
+  const rank = { waiting: 0, vscode: 1, working: 2, idle: 3 };
+  const q = state.filter.toLowerCase();
+  return state.sessions
+    .filter((s) => !q || [sessionLabel(s), s.title, s.cwd].some((v) => (v || '').toLowerCase().includes(q)))
+    .sort((a, b) => (rank[a.status] ?? 4) - (rank[b.status] ?? 4) || b.lastEventAt - a.lastEventAt);
+}
+
+// ---------- alerts ----------
+
+let audioCtx;
+function beep() {
+  if (!store.get('sound', true)) return;
+  try {
+    audioCtx = audioCtx || new AudioContext();
+    const now = audioCtx.currentTime;
+    [880, 1175].forEach((f, i) => {
+      const o = audioCtx.createOscillator();
+      const g = audioCtx.createGain();
+      o.frequency.value = f;
+      g.gain.setValueAtTime(0.0001, now + i * 0.12);
+      g.gain.exponentialRampToValueAtTime(0.12, now + i * 0.12 + 0.02);
+      g.gain.exponentialRampToValueAtTime(0.0001, now + i * 0.12 + 0.18);
+      o.connect(g).connect(audioCtx.destination);
+      o.start(now + i * 0.12);
+      o.stop(now + i * 0.12 + 0.2);
+    });
+  } catch {}
+}
+
+function alertUser(p) {
+  beep();
+  const s = sessionById(p.sessionId);
+  if (document.hidden && 'Notification' in window && Notification.permission === 'granted') {
+    const n = new Notification(`${s ? sessionLabel(s) : 'Claude'} needs you`, { body: pendingSummary(p), tag: p.id });
+    n.onclick = () => {
+      window.focus();
+      select(p.sessionId);
+      n.close();
+    };
+  }
+}
+
+// One alert per limit window when usage crosses 80% and again at 95%.
+function checkUsageAlerts(u, agent) {
+  for (const l of u?.limits || []) {
+    const crossed = [95, 80].find((t) => l.percent >= t);
+    if (!crossed) continue;
+    // Claude's keys predate Codex support; keep them so old alerts don't fire again.
+    const key = `usage-alert:${agent === 'Claude' ? '' : 'codex:'}${l.kind}:${crossed}:${l.resetsAt}`;
+    if (store.get(key, false)) continue;
+    store.set(key, true);
+    const text = `${agent} ${l.label} at ${Math.round(l.percent)}%${l.resetsAt ? `, resets ${clockText(l.resetsAt)}` : ''}`;
+    beep();
+    toast(text);
+    if (document.hidden && 'Notification' in window && Notification.permission === 'granted') new Notification(`${agent} usage limit`, { body: text, tag: key });
+  }
+}
+
+// A window that reset since the numbers were recorded (Codex's come from its last turn) is back to 0.
+const freshLimits = (u) => (u?.limits || []).map((l) => (l.resetsAt && Date.parse(l.resetsAt) < Date.now() ? { ...l, percent: 0, resetsAt: null } : l));
+
+const usageLevel = (l) => (l.percent >= 90 || l.severity === 'critical' ? 'crit' : l.percent >= 75 || l.severity === 'warning' ? 'warn' : '');
+
+function untilText(iso) {
+  const m = Math.round((Date.parse(iso) - Date.now()) / 60000);
+  if (!(m > 0)) return 'any moment';
+  if (m < 60) return `${m}m`;
+  const h = Math.floor(m / 60);
+  return h < 24 ? `${h}h ${m % 60}m` : `${Math.floor(h / 24)}d ${h % 24}h`;
+}
+
+function clockText(iso) {
+  const d = new Date(iso);
+  const t = d.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
+  return d.toDateString() === new Date().toDateString() ? t : `${d.toLocaleDateString([], { weekday: 'short' })} ${t}`;
+}
+
+let usageRefreshing = false;
+function renderUsage() {
+  const el = $('#usage');
+  const claude = state.usage;
+  const codex = state.codexUsage;
+  el.hidden = !claude && !codex;
+  const meters = (u) =>
+    freshLimits(u)
+      .map(
+        (l) => `<div class="meter ${usageLevel(l)}">
+        <div class="meter-top"><span>${esc(l.label)}</span><b>${Math.round(l.percent)}%</b></div>
+        <div class="bar" role="progressbar" aria-label="${esc(l.label)}" aria-valuenow="${Math.round(l.percent)}" aria-valuemin="0" aria-valuemax="100"><i style="width:${Math.min(100, Math.max(0, l.percent))}%"></i></div>
+        ${l.resetsAt ? `<div class="meter-sub">Resets in ${untilText(l.resetsAt)} · ${clockText(l.resetsAt)}</div>` : ''}
+      </div>`
+      )
+      .join('');
+  // Folded by default to a one-line summary, so the session list keeps its room.
+  const SHORT = { session: '5h', weekly_all: 'Week', weekly_opus: 'Opus', weekly_sonnet: 'Sonnet' };
+  const summary = (u) =>
+    freshLimits(u)
+      .map((l) => `<span class="${usageLevel(l)}">${esc(SHORT[l.kind] || l.label)} ${Math.round(l.percent)}%</span>`)
+      .join('<i>·</i>');
+  const open = (agent) => store.get(`usageOpen:${agent}`, false);
+  const head = (agent, title, u, extra = '') =>
+    `<div class="usage-head"><button type="button" class="usage-toggle" data-usage-toggle="${agent}" aria-expanded="${open(agent)}" title="${open(agent) ? 'Hide details' : 'Show details'}">${icon('gauge')}<span>${title}</span>${u.plan ? `<span class="plan">${esc(u.plan)}</span>` : ''}${open(agent) ? '' : `<span class="usage-sum">${summary(u)}</span>`}</button>${extra}</div>`;
+  const updated = (t) => {
+    const age = ago(t);
+    return age === 'now' ? 'just now' : `${age} ago`;
+  };
+  let html = '';
+  if (claude) {
+    const note = claude.error ? `<div class="usage-note err">${esc(claude.error)}</div>` : open('claude') ? `<div class="usage-note">Updated ${updated(claude.fetchedAt)}</div>` : '';
+    html += `<div class="usage-block">${head('claude', codex ? 'Claude' : 'Plan usage', claude, `<button type="button" data-usage-refresh title="Check now" class="${usageRefreshing ? 'spin' : ''}">${icon('refresh')}</button>`)}
+      ${open('claude') ? meters(claude) : ''}${note}</div>`;
+  }
+  if (codex) {
+    const credits = codex.credits?.unlimited ? ' · unlimited credits' : typeof codex.credits?.balance === 'number' ? ` · ${codex.credits.balance} credits` : '';
+    html += `<div class="usage-block">${head('codex', 'Codex', codex)}${
+      open('codex')
+        ? `${meters(codex)}<div class="usage-note" title="Codex records your limits with each turn, so this is as of your last Codex turn">As of your last Codex turn, ${updated(codex.updatedAt)}${credits}</div>`
+        : ''
+    }</div>`;
+  }
+  el.innerHTML = html;
+}
+
+function usageBanner() {
+  return [
+    ['Claude', state.usage],
+    ['Codex', state.codexUsage],
+  ]
+    .map(([agent, u]) => {
+      const l = freshLimits(u).find((x) => x.kind === 'session' && x.percent >= 80);
+      if (!l) return '';
+      const crit = l.percent >= 95;
+      return `<div class="usage-banner ${crit ? 'crit' : ''}">${icon('gauge')}<div>
+    <b>${crit ? 'Almost out of' : "You've used most of"} your ${agent} 5-hour limit (${Math.round(l.percent)}%)</b>
+    <span>It resets in ${untilText(l.resetsAt)} at ${clockText(l.resetsAt)}. ${agent} will pause when it runs out.</span></div></div>`;
+    })
+    .join('');
+}
+
+function toast(text) {
+  const el = document.createElement('div');
+  el.className = 'toast';
+  el.innerHTML = `${icon('check')}<span>${esc(text)}</span>`;
+  $('#toasts').append(el);
+  setTimeout(() => el.classList.add('out'), 2200);
+  setTimeout(() => el.remove(), 2600);
+}
+
+// ---------- rendering ----------
+
+let built = ''; // which view the content area is currently built for
+const keys = {};
+
+function render() {
+  renderSidebar();
+  renderHead();
+  const want = state.view === 'inbox' ? 'inbox' : `session:${state.selected}`;
+  if (want !== built) {
+    built = want;
+    for (const k in keys) delete keys[k];
+    $('#content').innerHTML = state.view === 'inbox' ? '<div id="inboxBanner"></div><div id="inboxPending"></div><div id="inboxRest"></div>' : '<div class="convo" id="convo"></div><div id="liveRow"></div>';
+    if (state.view === 'session') renderConvo();
+  }
+  if (state.view === 'inbox') renderInbox();
+  else renderLiveRow();
+  renderDock();
+  renderPreview();
+  markKeyTarget();
+  renderUsage();
+  refreshAges();
+  const needs = state.pending.length;
+  document.title = needs ? `(${needs}) Agenter` : 'Agenter';
+}
+
+function keyed(id, key, html, after) {
+  if (keys[id] === key) return false;
+  keys[id] = key;
+  const el = document.getElementById(id);
+  if (el) {
+    const saved = saveCardInputs(el);
+    el.innerHTML = html();
+    restoreCardInputs(el, saved);
+    after?.(el);
+  }
+  return true;
+}
+
+// Rebuilding a list of cards must not lose a half-typed reply, a deny reason, picked
+// answers or focus. A card's markup is fixed for its pending item, so its controls
+// line up by position.
+function saveCardInputs(root) {
+  const saved = new Map();
+  const active = document.activeElement;
+  root.querySelectorAll('.card[data-id]').forEach((card) => {
+    const controls = [...card.querySelectorAll('button, input, textarea')];
+    const focus = controls.indexOf(active);
+    let sel = null;
+    try {
+      if (focus >= 0 && active.selectionStart !== null) sel = [active.selectionStart, active.selectionEnd];
+    } catch {}
+    saved.set(card.dataset.id, { values: controls.map((c) => ({ value: c.value, checked: c.checked, disabled: c.disabled })), focus, sel });
+  });
+  return saved;
+}
+
+function restoreCardInputs(root, saved) {
+  root.querySelectorAll('.card[data-id]').forEach((card) => {
+    const prev = saved.get(card.dataset.id);
+    if (!prev) return;
+    card.classList.add('kept'); // already on screen: don't replay the entrance animation
+    const controls = [...card.querySelectorAll('button, input, textarea')];
+    prev.values.forEach((v, i) => {
+      const c = controls[i];
+      if (!c) return;
+      if (c.type === 'radio' || c.type === 'checkbox') c.checked = v.checked;
+      else if (c.matches('input, textarea')) c.value = v.value;
+      c.disabled = v.disabled;
+      if (c.matches('.reply-box textarea')) fitTextarea(c);
+    });
+    const f = controls[prev.focus];
+    if (f) {
+      f.focus({ preventScroll: true });
+      if (prev.sel) f.setSelectionRange(...prev.sel);
+    }
+  });
+}
+
+function fitTextarea(ta) {
+  ta.style.height = 'auto';
+  ta.style.height = Math.min(ta.scrollHeight, 260) + 'px';
+}
+
+function refreshAges() {
+  document.querySelectorAll('[data-t]').forEach((el) => (el.textContent = ago(Number(el.dataset.t))));
+}
+
+function countdown(releaseAt) {
+  const s = Math.max(0, Math.round((releaseAt - Date.now()) / 1000));
+  return `Back to VS Code in ${Math.floor(s / 60)}:${String(s % 60).padStart(2, '0')}`;
+}
+
+function renderSidebar() {
+  const needs = state.pending.length;
+  $('#inboxCount').hidden = !needs;
+  $('#inboxCount').textContent = needs;
+  $('#navInbox').classList.toggle('active', state.view === 'inbox');
+  $('#holdAll').checked = !!state.settings.holdOnStop;
+  if (document.activeElement !== $('#holdMinutes')) $('#holdMinutes').value = String(state.settings.holdMinutes ?? 3);
+
+  const item = (s) => {
+    const pend = pendingFor(s.id);
+    const sub = pend.length ? pendingSummary(pend[0]) + (pend.length > 1 ? ` (+${pend.length - 1})` : '') : (isLive(s) && s.lastAction) || s.title || STATUS_LABEL[s.status];
+    const selected = state.view === 'session' && s.id === state.selected;
+    return `<div class="s-item ${selected ? 'selected' : ''} ${isLive(s) ? '' : 'dim'}" data-sid="${esc(s.id)}" title="${esc(s.title ? `${s.title}\n${s.cwd}` : s.cwd)}">
+      ${avatar(s)}
+      <div class="s-main">
+        <div class="s-name"><span class="s-label">${esc(sessionLabel(s))}</span>${agentTag(s)}</div>
+        <div class="s-sub ${pend.length ? 'needs' : ''}">${esc(sub)}</div>
+      </div>
+      <span class="s-when" data-t="${s.lastEventAt}">${ago(s.lastEventAt)}</span>
+    </div>`;
+  };
+  const all = sortedSessions();
+  const live = all.filter(isLive);
+  const earlier = all.filter((s) => !isLive(s));
+  let html = '';
+  if (live.length) html += `<div class="group-label"><span>Live</span><span>${live.length}</span></div>${live.map(item).join('')}`;
+  if (earlier.length) html += `<div class="group-label"><span>Earlier today</span><span>${earlier.length}</span></div>${earlier.map(item).join('')}`;
+  if (!html) html = `<div class="group-label">${state.filter ? 'No matches' : 'No sessions yet'}</div>`;
+  $('#sessionList').innerHTML = html;
+}
+
+function renderHead() {
+  const menu = `<button class="btn ghost icon menu-btn" data-nav-toggle title="Sessions">${icon('menu')}</button>`;
+  if (state.view === 'inbox') {
+    const count = (st) => state.sessions.filter((s) => s.status === st).length;
+    const parts = [
+      state.pending.length && `${state.pending.length} waiting for you`,
+      count('working') && `${count('working')} working`,
+      count('idle') + count('vscode') && `${count('idle') + count('vscode')} idle`,
+    ].filter(Boolean);
+    $('#mainHead').innerHTML = `${menu}<div class="head-text">
+      <div class="head-title"><span>Inbox</span></div>
+      <div class="head-sub">${esc(parts.join(' · ') || 'Nothing running right now')}</div></div>`;
+    return;
+  }
+  const s = sessionById(state.selected);
+  if (!s) return;
+  $('#mainHead').innerHTML = `${menu}
+    ${avatar(s, 'lg')}
+    <div class="head-text">
+      <div class="head-title"><span>${esc(sessionLabel(s))}</span>${agentTag(s)}
+        <span class="pill ${esc(s.status)}">${esc(isCodex(s) && s.status === 'dormant' ? 'Inactive' : STATUS_LABEL[s.status] || s.status)}</span>
+        ${s.permissionMode && s.permissionMode !== 'default' ? `<span class="pill plain">${esc(s.permissionMode)}</span>` : ''}
+      </div>
+      <div class="head-sub">${s.title ? `${esc(s.title)} · ` : ''}<button class="path-chip mono" data-copy="${esc(s.cwd)}" title="Copy path">${esc(s.cwd || s.id)}</button></div>
+    </div>
+    <div class="head-actions">
+      ${
+        isLive(s) && s.drive !== 'agenter' && !isCodex(s)
+          ? `<label class="switch" title="Keep this session waiting for your reply here when it finishes a turn">
+        <input type="checkbox" data-hold ${s.hold ? 'checked' : ''}><span class="track"></span><span class="label">Hold for reply</span></label>`
+          : ''
+      }
+      ${
+        s.cwd
+          ? `<div class="drive" title="Who runs this session's turns"><span class="label">Drive from</span><div class="segmented" role="radiogroup" aria-label="Drive from">
+        ${
+          isCodex(s)
+            ? `<button type="button" role="radio" data-drive="vscode" aria-checked="${s.drive !== 'agenter'}" title="Codex runs in its app (VS Code or desktop); messages from here are queued there">Codex app</button>`
+            : `<button type="button" role="radio" data-drive="vscode" aria-checked="${s.drive !== 'agenter'}" title="Claude runs in the VS Code panel; Agenter answers inside its turns">VS Code</button>`
+        }
+        <button type="button" role="radio" data-drive="agenter" aria-checked="${s.drive === 'agenter'}" title="Agenter runs the turns itself, so nothing waits on ${isCodex(s) ? 'the Codex app' : 'VS Code'}">Agenter</button>
+      </div></div>`
+          : ''
+      }
+      ${s.cwd ? `<button class="btn small ${preview.open ? 'on' : ''}" data-preview-toggle title="Show the running app next to the conversation" aria-pressed="${preview.open}">${icon('preview')}<span class="label">Preview</span></button>` : ''}
+      ${s.cwd ? `<button class="btn small" data-open-vscode title="Open this project in VS Code">${icon('code')}<span class="label">Open in VS Code</span></button>` : ''}
+    </div>`;
+}
+
+// ---------- app preview ----------
+// The project's running app, side by side with the conversation. An address you pick
+// or type is remembered per project; otherwise the first page detected is shown.
+
+const preview = { open: store.get('previewOpen', false), cwd: null, apps: [], scanning: false, detects: true, timer: null, shown: false };
+const previewKey = () => 'previewUrl:' + (preview.cwd || '').toLowerCase();
+const chosenUrl = () => store.get(previewKey(), '') || preview.apps.find((a) => a.html)?.url || preview.apps[0]?.url || '';
+
+function normalizeUrl(v) {
+  v = v.trim();
+  if (!v) return '';
+  if (/^\d+$/.test(v)) return `http://localhost:${v}`;
+  if (!/^https?:\/\//i.test(v)) v = 'http://' + v;
+  try {
+    return new URL(v).href;
+  } catch {
+    return '';
+  }
+}
+
+function renderPreview() {
+  const s = state.view === 'session' && sessionById(state.selected);
+  const show = !!(preview.open && s?.cwd);
+  $('#preview').hidden = $('#splitter').hidden = !show;
+  if (!show) {
+    preview.shown = false;
+    return clearTimeout(preview.timer);
+  }
+  if (s.cwd !== preview.cwd) {
+    preview.cwd = s.cwd;
+    preview.apps = [];
+    preview.shown = false;
+    loadFrame();
+  }
+  if (!preview.shown) {
+    preview.shown = true;
+    scanApps();
+  }
+}
+
+function loadFrame() {
+  const url = chosenUrl();
+  if (document.activeElement !== $('#pvUrl')) $('#pvUrl').value = url;
+  const body = $('#pvBody');
+  const frame = $('iframe', body);
+  if (url && frame?.dataset.src === url) return;
+  if (!url) {
+    body.innerHTML = `<div class="pv-empty">${
+      preview.scanning
+        ? `<b>Looking for your app…</b>Checking what's running from this project.`
+        : preview.detects
+          ? `<b>No app running for this project</b>Start its dev server (for example <code>npm run dev</code>) and it shows up here. Or type its address above.`
+          : `<b>Which app?</b>Type its address above, for example <code>localhost:5173</code>.`
+    }</div>`;
+    return;
+  }
+  const app = preview.apps.find((a) => a.url === url);
+  body.innerHTML =
+    `<iframe title="App preview" data-src="${esc(url)}" src="${esc(url)}"></iframe>` +
+    (app && !app.embeddable
+      ? `<div class="notice pv-warn">${icon('info')}<div><b>This app may refuse to show inside another page.</b> If it stays blank, open it in your browser.</div><button class="btn small" type="button" data-pv-pop>Open</button></div>`
+      : '');
+}
+
+function renderApps() {
+  const url = chosenUrl();
+  const chips = preview.apps
+    .map((a) => `<button class="pv-chip ${a.url === url ? 'on' : ''}" type="button" data-pv-app="${esc(a.url)}" title="${esc(a.url)}"><span class="mono">:${a.port}</span>${esc(a.label)}</button>`)
+    .join('');
+  $('#pvApps').innerHTML = preview.detects
+    ? `${chips ? `<span>Running:</span>${chips}` : ''}<button class="btn ghost small scan" type="button" data-pv-scan ${preview.scanning ? 'disabled' : ''}>${icon('refresh')}${preview.scanning ? 'Looking…' : 'Find apps'}</button>`
+    : '';
+}
+
+async function scanApps() {
+  clearTimeout(preview.timer);
+  const cwd = preview.cwd;
+  const sid = state.selected;
+  preview.scanning = true;
+  renderApps();
+  loadFrame();
+  let r = null;
+  try {
+    r = await fetch(`/api/preview/apps?session=${encodeURIComponent(sid)}`).then((res) => res.json());
+  } catch {}
+  if (cwd !== preview.cwd) return; // switched project meanwhile; that one has its own scan
+  preview.scanning = false;
+  if (r) {
+    preview.apps = r.apps || [];
+    preview.detects = r.detects !== false;
+  }
+  renderApps();
+  loadFrame();
+  // A dev server started later should show up without clicking Find apps.
+  if (!preview.apps.length && preview.detects && preview.shown) preview.timer = setTimeout(scanApps, 10000);
+}
+
+function pickUrl(url) {
+  store.set(previewKey(), url);
+  renderApps();
+  loadFrame();
+}
+
+function setPreviewWidth(pct) {
+  pct = Math.min(80, Math.max(20, pct));
+  $('#split').style.setProperty('--preview-w', `${pct}%`);
+  return pct;
+}
+setPreviewWidth(store.get('previewWidth', 50));
+
+$('#splitter').addEventListener('pointerdown', (e) => {
+  const split = $('#split');
+  const splitter = e.currentTarget;
+  const rect = split.getBoundingClientRect();
+  let pct = store.get('previewWidth', 50);
+  split.classList.add('resizing');
+  splitter.setPointerCapture(e.pointerId);
+  const move = (ev) => (pct = setPreviewWidth(((rect.right - ev.clientX) / rect.width) * 100));
+  const up = () => {
+    split.classList.remove('resizing');
+    splitter.removeEventListener('pointermove', move);
+    splitter.removeEventListener('pointerup', up);
+    store.set('previewWidth', pct);
+  };
+  splitter.addEventListener('pointermove', move);
+  splitter.addEventListener('pointerup', up);
+});
+$('#splitter').addEventListener('dblclick', () => store.set('previewWidth', setPreviewWidth(50)));
+
+$('#pvForm').addEventListener('submit', (e) => {
+  e.preventDefault();
+  const url = normalizeUrl($('#pvUrl').value);
+  if ($('#pvUrl').value.trim() && !url) return toast("That doesn't look like an address");
+  $('#pvUrl').blur();
+  pickUrl(url); // empty goes back to the detected app
+});
+
+function onPreviewClick(t) {
+  if (t.closest('[data-preview-toggle], [data-pv-close]')) {
+    preview.open = !!t.closest('[data-preview-toggle]') && !preview.open;
+    store.set('previewOpen', preview.open);
+    render();
+    return true;
+  }
+  if (t.closest('[data-pv-reload]')) {
+    const frame = $('#pvBody iframe');
+    if (frame) frame.src = frame.dataset.src;
+    return true;
+  }
+  if (t.closest('[data-pv-pop]')) {
+    const url = chosenUrl();
+    if (url) window.open(url, '_blank', 'noopener');
+    return true;
+  }
+  if (t.closest('[data-pv-app]')) return pickUrl(t.closest('[data-pv-app]').dataset.pvApp), true;
+  if (t.closest('[data-pv-scan]')) return scanApps(), true;
+  return false;
+}
+
+// ---------- inbox ----------
+
+function renderInbox() {
+  const banner = usageBanner();
+  if ($('#inboxBanner').innerHTML !== banner) $('#inboxBanner').innerHTML = banner;
+  keyed(
+    'inboxPending',
+    state.pending.map((p) => p.id).join(',') || 'clear',
+    () =>
+      `<div class="section-title">Needs you ${state.pending.length ? `<span>${state.pending.length}</span>` : ''}</div>` +
+      (state.pending.length
+        ? sortPending(state.pending).map((p) => renderCard(p, true)).join('')
+        : `<div class="all-clear"><span class="big">${icon('check')}</span><div><b>All clear</b><span>Nothing is waiting on you. Permission prompts, questions and finished turns from every session show up here.</span></div></div>`),
+    focusFirst
+  );
+
+  const all = sortedSessions();
+  const live = all.filter(isLive);
+  const earlier = all.filter((s) => !isLive(s));
+  const tile = (s, compact) => {
+    const pend = pendingFor(s.id);
+    return `<button class="tile ${compact ? 'compact' : ''} ${pend.length ? 'needs' : ''}" data-sid="${esc(s.id)}" type="button">
+      <div class="tile-top">${avatar(s)}<div style="min-width:0;flex:1"><div class="tile-name">${esc(sessionLabel(s))}${agentTag(s)}</div>
+        ${compact ? '' : `<div class="tile-when"><span class="pill ${esc(s.status)}">${esc(STATUS_LABEL[s.status])}</span> · <span data-t="${s.lastEventAt}">${ago(s.lastEventAt)}</span></div>`}</div></div>
+      <div class="tile-title">${esc(s.title || 'Untitled session')}</div>
+      ${compact ? `<span class="tile-when" data-t="${s.lastEventAt}">${ago(s.lastEventAt)}</span>` : `<div class="tile-action">${esc(pend.length ? pendingSummary(pend[0]) : s.lastAction || '—')}</div>`}
+    </button>`;
+  };
+  $('#inboxRest').innerHTML =
+    (live.length ? `<div class="section-title">Live sessions <span>${live.length}</span></div><div class="tiles">${live.map((s) => tile(s)).join('')}</div>` : '') +
+    (earlier.length ? `<div class="section-title">Earlier today <span>${earlier.length}</span></div><div class="tiles">${earlier.map((s) => tile(s, true)).join('')}</div>` : '') +
+    (!state.sessions.length
+      ? `<div class="empty"><h2>No Claude sessions yet</h2><p>Run <code>npm run install-hooks</code> once and reload your VS Code windows.<br>Sessions show up here as soon as they do something.</p></div>`
+      : '');
+}
+
+const sortPending = (list) => [...list].sort((a, b) => a.createdAt - b.createdAt);
+
+// ---------- session view ----------
+
+function renderLiveRow() {
+  const s = sessionById(state.selected);
+  const el = $('#liveRow');
+  if (!s || !el) return;
+  let html = '';
+  if (s.status === 'working') html = `<div class="live-row"><span class="dots"><i></i><i></i><i></i></span><span class="targ">${esc(s.lastAction || 'Working…')}</span></div>`;
+  else if (s.status === 'vscode') html = `<div class="live-row">${icon('info')}<span>Waiting for you in VS Code</span></div>`;
+  if (el.innerHTML !== html) {
+    const stick = nearBottom();
+    el.innerHTML = html;
+    if (stick) scrollToBottom();
+  }
+}
+
+function renderDock() {
+  if (state.view !== 'session') return keyed('dock', 'none', () => '');
+  const s = sessionById(state.selected);
+  if (!s) return;
+  const pend = sortPending(pendingFor(s.id));
+  let hintKey = '';
+  let hint = '';
+  if (!isCodex(s) && !pend.length && s.drive !== 'agenter') {
+    if (s.status === 'dormant') {
+      hintKey = 'dormant';
+      hint = `<div class="notice">${icon('plug')}<div><b>Not connected.</b> This session was closed, or it started before Agenter was running. To continue it, reopen it from the Claude panel's session history in VS Code. It moves to Live once you send a prompt.</div>${s.cwd ? `<button class="btn small" data-open-vscode>${icon('code')}Open in VS Code</button>` : ''}</div>`;
+    } else if (s.status === 'ended') {
+      hintKey = 'ended';
+      hint = `<div class="notice">${icon('info')}<div>This session has ended.</div></div>`;
+    }
+  }
+  // A finished turn has its own reply box; otherwise you can always steer from here.
+  // Codex always takes messages: its app queues them even for a session that isn't open.
+  const steerable = (isCodex(s) || isLive(s) || s.drive === 'agenter') && !pend.some((p) => p.kind === 'stop');
+  const steerKey = steerable ? `${s.status}|${s.drive}|${s.running}|${(s.queue || []).map((m) => m.id).join(',')}` : '';
+  keyed('dock', `${s.id}|${pend.map((p) => p.id).join(',')}|${hintKey}|${steerKey}`, () => pend.map((p) => renderCard(p, false)).join('') + hint + (steerable ? renderSteer(s) : ''), focusFirst);
+}
+
+function renderSteer(s) {
+  const agenter = s.drive === 'agenter';
+  const busy = s.running || s.status === 'working' || s.status === 'waiting' || s.status === 'vscode';
+  const queued = (s.queue || [])
+    .map((m) => `<div class="queued"><span class="pill plain">Queued</span><span class="q-text">${esc(m.text)}</span><button class="btn ghost small" type="button" data-unqueue="${esc(m.id)}">Cancel</button></div>`)
+    .join('');
+  let when;
+  if (isCodex(s)) {
+    if (agenter && busy) when = 'Codex gets this as its next turn, when the current one ends.';
+    else if (agenter) when = 'Runs here in Agenter, sandboxed to the project folder (no network).';
+    else when = `Queued in Codex: it runs as the next turn when this session is open in Codex (VS Code or the desktop app). Or <button class="link" type="button" data-drive="agenter">drive from Agenter</button>.`;
+  } else if (busy) when = 'Claude gets this after its current step.';
+  else if (agenter) when = "Runs here in Agenter. VS Code shows this turn once you reopen the session there.";
+  else when = `Claude is idle in VS Code and can't be woken from here. This goes with your next prompt there, or <button class="link" type="button" data-drive="agenter">drive from Agenter</button>.`;
+  return `<div class="card kind-steer" data-id="steer-${esc(s.id)}" data-steer><div class="card-body">
+    ${queued}
+    <div class="reply-box">
+      <textarea rows="1" placeholder="${busy ? `Steer ${isCodex(s) ? 'Codex' : 'Claude'} while it works…` : `Message ${isCodex(s) ? 'Codex' : 'Claude'}…`}"></textarea>
+      <div class="reply-row">
+        <span class="hint">${when}</span>
+        ${s.running ? `<button class="btn small" type="button" data-interrupt title="Stop the turn Agenter is running">Stop</button>` : ''}
+        <button class="btn primary small" type="button" data-steer-send>${icon('send')}Send</button>
+      </div>
+    </div></div></div>`;
+}
+
+const STEER_TOAST = { sent: 'Reply sent', queued: 'Queued', started: 'Running in Agenter', 'codex-queued': 'Queued in Codex' };
+
+async function steer(card) {
+  const ta = $('textarea', card);
+  const message = ta.value.trim();
+  if (!message) return ta.focus();
+  // Clear first: the queued message re-renders the dock, which would otherwise put the text back.
+  ta.value = '';
+  fitTextarea(ta);
+  const r = await post('/api/session/steer', { sessionId: state.selected, message }).catch(() => null);
+  if (!r?.ok) {
+    const box = $('#dock [data-steer] textarea');
+    if (box && !box.value) box.value = message;
+    return toast("Couldn't send that");
+  }
+  const { result } = await r.json();
+  const FAILED = {
+    'no-claude': "Couldn't find Claude Code. Install the VS Code extension, or set AGENTER_CLAUDE to claude.exe",
+    'no-codex': "Couldn't find Codex. Install the Codex VS Code extension, or set AGENTER_CODEX_BIN to codex.exe",
+    error: "Codex didn't accept the message",
+  };
+  if (FAILED[result]) {
+    const box = $('#dock [data-steer] textarea');
+    if (box && !box.value) box.value = message;
+    return toast(FAILED[result]);
+  }
+  toast(STEER_TOAST[result] || 'Sent');
+}
+
+async function setDrive(drive) {
+  const s = sessionById(state.selected);
+  const app = s && isCodex(s) ? 'the Codex app' : "VS Code's panel";
+  const r = await post('/api/session/drive', { sessionId: state.selected, drive });
+  if (!r.ok) return toast("Couldn't switch");
+  const { cli } = await r.json();
+  if (drive === 'vscode') return toast(s && isCodex(s) ? 'Driving from the Codex app' : 'Driving from VS Code');
+  toast(cli ? `Driving from Agenter. Don't type in ${app} for this session meanwhile.` : `Couldn't find ${s && isCodex(s) ? 'Codex' : 'Claude Code'}. See the README for setting its path.`);
+}
+
+// Only the reply box gets auto-focus, and only when it's alone. Focusing buttons
+// would let a stray Enter approve a command, and focus in a field disables shortcuts.
+function focusFirst(root) {
+  // Never pull focus out of a text box or the app preview you're clicking around in.
+  if (root.id !== 'dock' || document.activeElement?.matches('input, textarea, iframe')) return;
+  if (root.querySelector('.kind-permission, .kind-question')) return;
+  root.querySelector('textarea')?.focus({ preventScroll: true });
+}
+
+const nearBottom = () => {
+  const sc = $('#scroll');
+  return sc.scrollHeight - sc.scrollTop - sc.clientHeight < 120;
+};
+const scrollToBottom = () => {
+  const sc = $('#scroll');
+  sc.scrollTop = sc.scrollHeight;
+};
+
+function renderConvo(keepScroll = false) {
+  const el = $('#convo');
+  if (!el) return;
+  const msgs = state.transcript.sessionId === state.selected ? state.transcript.messages : null;
+  if (msgs === null) {
+    el.innerHTML = '<div class="skeleton" style="width:60%"></div><div class="skeleton" style="width:85%"></div><div class="skeleton" style="width:40%"></div>';
+    return;
+  }
+  if (!msgs.length) {
+    el.innerHTML = `<div class="notice">${icon('info')}<div>No conversation recorded yet.</div></div>`;
+    return;
+  }
+  const stick = !keepScroll || nearBottom();
+  const s = sessionById(state.selected);
+  const rel = relativizer(s?.cwd);
+  const results = new Map(msgs.filter((m) => m.kind === 'result' && m.toolUseId).map((m) => [m.toolUseId, m]));
+  const lastToolId = [...msgs].reverse().find((m) => m.kind === 'tool')?.id;
+
+  const chunks = []; // [key, html]: one per message or run of tool calls
+  let tools = [];
+  let toolsKey = '';
+  const flush = () => {
+    if (tools.length) chunks.push([toolsKey, `<div class="tools">${tools.join('')}</div>`]);
+    tools = [];
+  };
+  for (const m of msgs) {
+    if (m.kind === 'result') continue; // shown inside its tool call
+    if (m.kind === 'tool') {
+      if (!tools.length) toolsKey = `t${m.seq}`;
+      const r = results.get(m.id);
+      const lines = r?.text ? r.text.split('\n').length : 0;
+      const stateText = r
+        ? r.isError
+          ? '<span class="tstate err">error</span>'
+          : lines > 1
+            ? `<span class="tstate">${lines} lines</span>`
+            : ''
+        : m.id === lastToolId && s?.status === 'working'
+          ? '<span class="tstate">running…</span>'
+          : '';
+      const firstLine = rel(m.text.split('\n')[0]);
+      tools.push(`<details class="tool ${r?.isError ? 'err' : ''}" data-tid="${esc(m.id)}" ${state.openTools.has(m.id) ? 'open' : ''}>
+        <summary>${icon(toolIcon(m.name))}<span class="tname">${esc(toolName(m.name))}</span><span class="targ">${esc(firstLine)}</span>${stateText}</summary>
+        ${m.text.includes('\n') || firstLine.length > 90 ? `<div class="full-arg mono">${esc(m.text)}</div>` : ''}
+        ${r ? `<pre>${esc(r.text || '(no output)')}</pre>` : ''}
+      </details>`);
+      continue;
+    }
+    flush();
+    if (m.role === 'user') chunks.push([`m${m.seq}`, `<div class="msg-user">${esc(m.text)}</div>`]);
+    else chunks.push([`m${m.seq}`, `<div class="msg-claude"><span class="claude-mark">${icon('sparkle')}</span><div class="md">${md(m.text)}</div></div>`]);
+  }
+  flush();
+  patchChildren(el, chunks);
+  if (stick) scrollToBottom();
+}
+
+// Brings el's children in line with chunks, touching only the ones that changed, so
+// new messages don't reset text you've selected or re-render the whole conversation.
+function patchChildren(el, chunks) {
+  const old = new Map();
+  for (const c of [...el.children]) c.dataset.key ? old.set(c.dataset.key, c) : c.remove(); // skeletons, notices
+  const want = new Set(chunks.map(([k]) => k));
+  for (const [k, c] of old) if (!want.has(k)) c.remove();
+  chunks.forEach(([key, html], i) => {
+    let node = old.get(key);
+    if (!node || node._html !== html) {
+      const t = document.createElement('template');
+      t.innerHTML = html;
+      const fresh = t.content.firstElementChild;
+      fresh.dataset.key = key;
+      fresh._html = html;
+      if (node) node.replaceWith(fresh);
+      node = fresh;
+    }
+    if (el.children[i] !== node) el.insertBefore(node, el.children[i] || null);
+  });
+}
+
+// Shows paths inside the project relative to it: C:\proj\src\a.ts -> src\a.ts
+function relativizer(cwd) {
+  if (!cwd) return (t) => t;
+  const base = cwd.replace(/[\\/]+$/, '');
+  const re = new RegExp(base.replace(/[.*+?^${}()|[\]\\]/g, '\\$&').replace(/\\\\|\//g, '[\\\\/]') + '[\\\\/]', 'gi');
+  return (t) => t.replace(re, '');
+}
+
+// ---------- action cards ----------
+
+// Commands where one stray keypress shouldn't be enough: A / Shift+A won't approve these.
+const DESTRUCTIVE =
+  /\brm\s+-[a-z]*[rf]|\bRemove-Item\b[^|;]*-Recurse|\b(del|erase|rd|rmdir)\s+\/[sq]|\bgit\s+(push\b[^|;]*\s(--force|-f)\b|reset\s+--hard|clean\s+-[a-z]*f|branch\s+-D)|\bdrop\s+(table|database|schema)\b|\btruncate\s+table\b|\bformat\s+[a-z]:|\bmkfs\b|\bdd\s+if=/i;
+const isDestructive = (p) => p.kind === 'permission' && typeof p.input?.command === 'string' && DESTRUCTIVE.test(p.input.command);
+
+// The permission card A / D act on: the one in this session's dock, or the oldest in the inbox.
+const keyTarget = () => $('#dock .card.kind-permission, #inboxPending .card.kind-permission');
+
+function markKeyTarget() {
+  const target = keyTarget();
+  document.querySelectorAll('.card.kb-target').forEach((c) => c !== target && c.classList.remove('kb-target'));
+  target?.classList.add('kb-target');
+}
+
+// True when the card's buttons are actually visible, not scrolled away or covered.
+function onScreen(card) {
+  const r = $('.actions', card).getBoundingClientRect();
+  if (r.bottom <= 0 || r.top >= innerHeight) return false;
+  const hit = document.elementFromPoint(r.left + r.width / 2, Math.max(0, r.top) + Math.min(r.height, innerHeight - r.top) / 2);
+  return !!hit && card.contains(hit);
+}
+
+function keyAct(action) {
+  const card = keyTarget();
+  if (!card) return;
+  if (!onScreen(card)) {
+    card.scrollIntoView({ block: 'center', behavior: 'smooth' });
+    card.classList.remove('flash');
+    void card.offsetWidth; // restart the animation
+    card.classList.add('flash');
+    return toast('This is the request your key applies to. Press again to confirm');
+  }
+  const p = state.pending.find((x) => x.id === card.dataset.id);
+  if (action !== 'deny' && p && isDestructive(p)) return toast('This command looks destructive. Click Allow to approve it');
+  act(card, action);
+}
+
+function renderToolBody(tool, input = {}) {
+  input = input || {};
+  if (['Bash', 'PowerShell'].includes(tool) || typeof input.command === 'string') {
+    return `${input.description ? `<div class="desc">${esc(input.description)}</div>` : ''}<pre class="cmd shell">${esc(input.command)}</pre>`;
+  }
+  if (tool === 'Edit' || tool === 'MultiEdit') {
+    const edits = tool === 'MultiEdit' ? input.edits || [] : [input];
+    const lines = (text, sign, cls) =>
+      String(text ?? '')
+        .split('\n')
+        .map((l) => `<div class="${cls}">${sign} ${esc(l)}</div>`)
+        .join('');
+    return `<div class="path mono">${esc(input.file_path)}</div>` + edits.map((e) => `<div class="diff mono">${lines(e.old_string, '−', 'del')}${lines(e.new_string, '+', 'add')}</div>`).join('');
+  }
+  if (tool === 'Write') return `<div class="path mono">${esc(input.file_path)}</div><pre class="cmd">${esc(clip(input.content, 6000))}</pre>`;
+  if (tool === 'ExitPlanMode') return `<div class="desc">Claude wants to leave plan mode and start on this plan:</div><div class="last-msg md">${md(input.plan)}</div>`;
+  if (tool === 'WebFetch') return `<div class="path mono">${esc(input.url)}</div>${input.prompt ? `<div class="desc">${esc(input.prompt)}</div>` : ''}`;
+  return `<pre class="cmd">${esc(JSON.stringify(input, null, 2))}</pre>`;
+}
+
+function renderCard(p, showSession) {
+  const s = sessionById(p.sessionId);
+  const sessionBar =
+    showSession && s
+      ? `<div class="card-session" data-sid="${esc(s.id)}">${avatar(s)}<span class="cs-name">${esc(sessionLabel(s))}</span><span class="cs-title">${esc(s.title || '')}</span><span class="open">Open session →</span></div>`
+      : '';
+  const age = p.releaseAt
+    ? `<span class="age countdown" data-release="${p.releaseAt}" title="VS Code shows a spinner until this is answered or handed back">${countdown(p.releaseAt)}</span>`
+    : `<span class="age" data-t="${p.createdAt}">${ago(p.createdAt)}</span>`;
+  const head = (ic, title, sub) => `<div class="card-head"><span class="k-ic">${icon(ic)}</span><div><div class="k-title">${title}</div>${sub ? `<div class="k-sub">${sub}</div>` : ''}</div>${age}</div>`;
+
+  if (p.kind === 'permission') {
+    const risky = isDestructive(p);
+    return `<div class="card kind-permission ${risky ? 'risky' : ''}" data-id="${p.id}">${sessionBar}<div class="card-body">
+      ${head(toolIcon(p.tool), `Allow <span class="mono">${esc(toolName(p.tool))}</span>?`, 'Claude is asking for permission')}
+      <div class="tool-body">${renderToolBody(p.tool, p.input)}</div>
+      ${risky ? `<div class="risk-note">${icon('shield')}<span>This looks destructive, so the <kbd>A</kbd> shortcut is off. Read it, then click Allow if it's fine.</span></div>` : ''}
+      <div class="actions">
+        <button class="btn primary" data-act="allow">${icon('check')}Allow${risky ? '' : ' <kbd>A</kbd>'}</button>
+        ${p.canAlways ? `<button class="btn" data-act="always" title="Allow, and add the suggested rule so Claude won't ask again">Always allow</button>` : ''}
+        <input type="text" class="field grow deny-msg" placeholder="Optional: why not / what to do instead">
+        <button class="btn danger" data-act="deny">Deny <kbd>D</kbd></button>
+        ${p.headless ? '' : `<button class="btn ghost small" data-act="pass" title="Show the normal prompt in VS Code instead">Answer in VS Code</button>`}
+      </div></div></div>`;
+  }
+
+  if (p.kind === 'question') {
+    const qs = (p.questions || [])
+      .map(
+        (q, qi) => `<div class="question" data-q="${qi}">
+        <div class="q-title">${q.header ? `<span class="pill plain">${esc(q.header)}</span>` : ''}${esc(q.question)}</div>
+        <div class="options">${(q.options || [])
+          .map(
+            (o) => `<label class="option"><input type="${q.multiSelect ? 'checkbox' : 'radio'}" name="q-${p.id}-${qi}" value="${esc(o.label)}">
+            <span><span class="o-label">${esc(o.label)}</span>${o.description ? `<div class="o-desc">${esc(o.description)}</div>` : ''}</span></label>`
+          )
+          .join('')}</div>
+        <input type="text" class="field q-other" placeholder="Something else? Type your own answer">
+      </div>`
+      )
+      .join('');
+    return `<div class="card kind-question" data-id="${p.id}">${sessionBar}<div class="card-body">
+      ${head('help', 'Claude has a question', p.questions?.length > 1 ? `${p.questions.length} questions` : '')}
+      ${qs}
+      <div class="actions">
+        <button class="btn primary" data-act="answer">${icon('send')}Send answers</button>
+        ${p.headless ? '' : `<button class="btn ghost small" data-act="pass">Answer in VS Code</button>`}
+      </div></div></div>`;
+  }
+
+  return `<div class="card kind-stop" data-id="${p.id}">${sessionBar}<div class="card-body">
+    ${head('reply', 'Your turn', 'Claude finished. Reply to keep it going')}
+    ${p.message ? `<div class="last-msg md">${md(p.message)}</div>` : ''}
+    <div class="reply-box">
+      <textarea rows="2" placeholder="Tell Claude what to do next…"></textarea>
+      <div class="reply-row">
+        <span class="hint"><kbd>Enter</kbd> send · <kbd>Shift</kbd>+<kbd>Enter</kbd> new line</span>
+        <button class="btn ghost small" data-act="pass" title="Let the session stop normally so you can type in VS Code">Release to VS Code</button>
+        <button class="btn primary small" data-act="reply">${icon('send')}Send</button>
+      </div>
+    </div></div></div>`;
+}
+
+const ACTION_TOAST = { allow: 'Allowed', always: 'Always allowing', deny: 'Denied', pass: 'Opening VS Code', reply: 'Reply sent', answer: 'Answers sent' };
+
+async function act(card, action) {
+  const p = state.pending.find((x) => x.id === card.dataset.id);
+  if (!p) return;
+  const body = { id: p.id, action };
+  if (action === 'deny') body.message = $('.deny-msg', card)?.value || '';
+  if (action === 'reply') {
+    const ta = $('textarea', card);
+    body.message = ta.value.trim();
+    if (!body.message) return ta.focus();
+  }
+  if (action === 'answer') {
+    body.answers = {};
+    card.querySelectorAll('.question').forEach((qEl) => {
+      const q = p.questions[Number(qEl.dataset.q)];
+      const picked = [...qEl.querySelectorAll('input:checked')].map((i) => i.value);
+      const other = $('.q-other', qEl).value.trim();
+      if (other) picked.push(other);
+      if (picked.length) body.answers[q.question] = picked.join(', ');
+    });
+    if (Object.keys(body.answers).length < p.questions.length) return toast('Answer every question first');
+  }
+  card.querySelectorAll('button, input, textarea').forEach((b) => (b.disabled = true));
+  const r = await post('/api/respond', body);
+  const s = sessionById(p.sessionId);
+  const what = p.kind === 'permission' && ['allow', 'always', 'deny'].includes(action) ? ` ${toolName(p.tool)}` : '';
+  toast(r.ok ? `${ACTION_TOAST[action]}${what}${s ? ` · ${sessionLabel(s)}` : ''}` : 'That was already handled');
+}
+
+// ---------- transcript ----------
+
+// After the first load, only messages newer than the last one we have are fetched.
+const KEEP_MESSAGES = 300;
+let transcriptTimer;
+function loadTranscript(sid) {
+  clearTimeout(transcriptTimer);
+  transcriptTimer = setTimeout(async () => {
+    try {
+      const have = state.transcript.sessionId === sid && state.transcript.messages ? state.transcript : null;
+      const lastSeq = () => have?.messages.at(-1)?.seq ?? 0;
+      const since = have ? `&epoch=${encodeURIComponent(have.epoch)}&after=${lastSeq()}` : '';
+      const r = await fetch(`/api/transcript?session=${encodeURIComponent(sid)}${since}`);
+      if (!r.ok) return;
+      const { epoch, reset, messages } = await r.json();
+      if (sid !== state.selected) return;
+      const same = state.transcript.sessionId === sid;
+      // A request that overlapped another may repeat messages; seq tells them apart.
+      const merged = reset || !have ? messages : [...have.messages, ...messages.filter((m) => m.seq > lastSeq())].slice(-KEEP_MESSAGES);
+      state.transcript = { sessionId: sid, epoch, messages: merged };
+      renderConvo(same);
+    } catch {}
+  }, 150);
+}
+
+// ---------- navigation ----------
+
+function select(sid) {
+  closeNav();
+  if (state.view === 'session' && state.selected === sid) return;
+  state.view = 'session';
+  state.selected = sid;
+  state.openTools.clear();
+  setHash(`#/s/${sid}`);
+  render();
+  loadTranscript(sid);
+}
+
+function showInbox() {
+  closeNav();
+  state.view = 'inbox';
+  setHash('#/');
+  render();
+  $('#scroll').scrollTop = 0;
+}
+
+function setHash(h) {
+  if (location.hash !== h) history.pushState(null, '', h);
+}
+
+function routeFromHash() {
+  const m = location.hash.match(/^#\/s\/(.+)$/);
+  if (m) {
+    state.view = 'session';
+    state.selected = decodeURIComponent(m[1]);
+  } else state.view = 'inbox';
+}
+window.addEventListener('popstate', () => {
+  routeFromHash();
+  render();
+  if (state.view === 'session') loadTranscript(state.selected);
+});
+
+function step(dir) {
+  const list = sortedSessions();
+  if (!list.length) return;
+  const i = state.view === 'session' ? list.findIndex((s) => s.id === state.selected) : -1;
+  select(list[(i + dir + list.length) % list.length].id);
+}
+
+function nextNeedingYou() {
+  const ids = [...new Set(sortPending(state.pending).map((p) => p.sessionId))];
+  if (!ids.length) return toast('Nothing is waiting on you');
+  const i = ids.indexOf(state.selected);
+  select(ids[(i + 1) % ids.length]);
+}
+
+const closeNav = () => $('#app').classList.remove('nav-open');
+
+// ---------- events ----------
+
+document.addEventListener('click', (e) => {
+  const t = e.target;
+  if (onPreviewClick(t)) return;
+  if (t.closest('[data-steer-send]')) return steer(t.closest('.card'));
+  if (t.closest('[data-drive]')) return setDrive(t.closest('[data-drive]').dataset.drive);
+  if (t.closest('[data-interrupt]')) return post('/api/session/interrupt', { sessionId: state.selected });
+  if (t.closest('[data-unqueue]')) return post('/api/session/unqueue', { sessionId: state.selected, id: t.closest('[data-unqueue]').dataset.unqueue });
+  const actBtn = t.closest('[data-act]');
+  if (actBtn) return act(actBtn.closest('.card'), actBtn.dataset.act);
+  const sidEl = t.closest('[data-sid]');
+  if (sidEl) return select(sidEl.dataset.sid);
+  if (t.closest('[data-copy]')) {
+    navigator.clipboard?.writeText(t.closest('[data-copy]').dataset.copy).then(() => toast('Path copied'));
+    return;
+  }
+  if (t.closest('[data-open-vscode]')) {
+    post('/api/session/open', { sessionId: state.selected }).then((r) => toast(r.ok ? 'Opening in VS Code…' : "Couldn't open VS Code"));
+    return;
+  }
+  if (t.closest('[data-usage-toggle]')) {
+    const agent = t.closest('[data-usage-toggle]').dataset.usageToggle;
+    store.set(`usageOpen:${agent}`, !store.get(`usageOpen:${agent}`, false));
+    return renderUsage();
+  }
+  if (t.closest('[data-usage-refresh]')) {
+    usageRefreshing = true;
+    renderUsage();
+    post('/api/usage/refresh', {}).finally(() => {
+      usageRefreshing = false;
+      renderUsage();
+    });
+    return;
+  }
+  if (t.closest('[data-hold-on]')) return post('/api/session/hold', { sessionId: state.selected, hold: true });
+  if (t.closest('[data-nav-toggle]')) return $('#app').classList.toggle('nav-open');
+});
+
+document.addEventListener('change', (e) => {
+  if (e.target.matches('[data-hold]')) post('/api/session/hold', { sessionId: state.selected, hold: e.target.checked });
+});
+
+document.addEventListener(
+  'toggle',
+  (e) => {
+    const d = e.target;
+    if (!d.matches?.('details.tool')) return;
+    if (d.open) state.openTools.add(d.dataset.tid);
+    else state.openTools.delete(d.dataset.tid);
+  },
+  true
+);
+
+document.addEventListener('input', (e) => {
+  if (e.target.matches('.reply-box textarea')) fitTextarea(e.target);
+});
+
+document.addEventListener('keydown', (e) => {
+  const t = e.target instanceof Element ? e.target : document.body;
+  if (t.matches('.reply-box textarea') && e.key === 'Enter' && !e.shiftKey && !e.isComposing) {
+    e.preventDefault();
+    return t.closest('[data-steer]') ? steer(t.closest('.card')) : act(t.closest('.card'), 'reply');
+  }
+  if (t.matches('.deny-msg') && e.key === 'Enter') return act(t.closest('.card'), 'deny');
+  if (t.matches('input, textarea, select')) {
+    if (e.key === 'Escape') t.blur();
+    return;
+  }
+  if ($('#helpDialog').open || e.ctrlKey || e.metaKey || e.altKey) return;
+
+  const perm = keyTarget();
+  const k = e.key;
+  if (k === '/') (e.preventDefault(), $('#search').focus());
+  else if (k === '?') $('#helpDialog').showModal();
+  else if (k === 'i') showInbox();
+  else if (k === 't') {
+    const next = THEMES[(THEMES.indexOf(store.get('theme', 'system')) + 1) % THEMES.length];
+    chooseTheme(next);
+    toast(`Theme: ${next}`);
+  }
+  else if (k === 'j') step(1);
+  else if (k === 'k') step(-1);
+  else if (k === 'n') nextNeedingYou();
+  else if (k === 'a' && perm) keyAct('allow');
+  else if (k === 'A' && perm) keyAct($('[data-act="always"]', perm) ? 'always' : 'allow');
+  else if (k === 'd' && perm) keyAct('deny');
+  else if (k === 'r') {
+    const ta = $('#dock textarea, #inboxPending textarea');
+    if (ta) (e.preventDefault(), ta.focus());
+  } else if (k === 'Escape') closeNav();
+});
+
+$('#navInbox').addEventListener('click', showInbox);
+
+// ---------- new session ----------
+
+const NEW_SUB = {
+  claude: "Runs here in Agenter, no VS Code needed. You can open it in VS Code later from the Claude panel's session history.",
+  codex: 'Runs here in Agenter, sandboxed to the project folder (no network). It also shows up in the Codex app.',
+};
+function setNewAgent(agent) {
+  store.set('newAgent', agent);
+  document.querySelectorAll('#newAgent [data-new-agent]').forEach((b) => b.setAttribute('aria-checked', String(b.dataset.newAgent === agent)));
+  $('#newSub').textContent = NEW_SUB[agent];
+  $('#newMsg').placeholder = `What should ${agent === 'codex' ? 'Codex' : 'Claude'} do?`;
+}
+$('#newAgent').addEventListener('click', (e) => {
+  const b = e.target.closest('[data-new-agent]');
+  if (b) setNewAgent(b.dataset.newAgent);
+});
+
+function openNewSession() {
+  closeNav();
+  setNewAgent(store.get('newAgent', 'claude'));
+  // Folders you've worked in, most recent first; the last one used here goes on top.
+  const last = store.get('newCwd', '');
+  const cwds = [...new Set([last, ...[...state.sessions].sort((a, b) => b.lastEventAt - a.lastEventAt).map((s) => s.cwd)].filter(Boolean))];
+  $('#newCwdList').innerHTML = cwds.map((c) => `<option value="${esc(c)}"></option>`).join('');
+  const current = state.view === 'session' && sessionById(state.selected)?.cwd;
+  $('#newCwd').value = current || last || cwds[0] || '';
+  $('#newError').hidden = true;
+  $('#newStart').disabled = false;
+  $('#newDialog').showModal();
+  $('#newMsg').focus();
+}
+
+$('#navNew').addEventListener('click', openNewSession);
+$('#newDialog [data-new-cancel]').addEventListener('click', () => $('#newDialog').close());
+$('#newMsg').addEventListener('keydown', (e) => {
+  if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) (e.preventDefault(), $('#newForm').requestSubmit());
+});
+$('#newForm').addEventListener('submit', async (e) => {
+  e.preventDefault();
+  const cwd = $('#newCwd').value.trim();
+  const message = $('#newMsg').value.trim();
+  const showError = (text) => {
+    $('#newError').textContent = text;
+    $('#newError').hidden = false;
+    $('#newStart').disabled = false;
+  };
+  $('#newStart').disabled = true;
+  let r;
+  try {
+    r = await post('/api/session/new', { cwd, message, agent: store.get('newAgent', 'claude') });
+  } catch {
+    return showError("Couldn't reach the Agenter server.");
+  }
+  const data = await r.json().catch(() => ({}));
+  if (!r.ok) return showError(data.error || "Couldn't start the session.");
+  store.set('newCwd', cwd);
+  $('#newMsg').value = '';
+  $('#newDialog').close();
+  state.awaiting = data.sessionId;
+  select(data.sessionId);
+  toast('Session started');
+});
+$('#scrim').addEventListener('click', closeNav);
+$('#helpBtn').addEventListener('click', () => $('#helpDialog').showModal());
+$('#search').addEventListener('input', (e) => {
+  state.filter = e.target.value;
+  renderSidebar();
+  if (state.view === 'inbox') renderInbox();
+});
+$('#holdAll').addEventListener('change', (e) => post('/api/settings', { holdOnStop: e.target.checked }));
+$('#holdMinutes').addEventListener('change', (e) => {
+  post('/api/settings', { holdMinutes: Number(e.target.value) });
+  e.target.blur();
+  toast(e.target.value === '0' ? 'Waiting items stay until you answer' : `New waiting items go back to VS Code after ${e.target.value} min`);
+});
+$('#soundToggle').checked = store.get('sound', true);
+$('#soundToggle').addEventListener('change', (e) => {
+  store.set('sound', e.target.checked);
+  if (e.target.checked) beep();
+});
+$('#settingsPanel').open = store.get('settingsOpen', false);
+$('#settingsPanel').addEventListener('toggle', (e) => store.set('settingsOpen', e.target.open));
+
+const THEMES = ['system', 'light', 'dark'];
+const systemDark = matchMedia('(prefers-color-scheme: dark)');
+function setTheme(pref) {
+  const dark = pref === 'dark' || (pref === 'system' && systemDark.matches);
+  document.documentElement.dataset.theme = dark ? 'dark' : 'light';
+  document.querySelectorAll('#themePicker [data-theme-pick]').forEach((b) => b.setAttribute('aria-checked', String(b.dataset.themePick === pref)));
+}
+function chooseTheme(pref) {
+  store.set('theme', pref);
+  setTheme(pref);
+}
+setTheme(store.get('theme', 'system'));
+systemDark.addEventListener('change', () => setTheme(store.get('theme', 'system')));
+$('#themePicker').addEventListener('click', (e) => {
+  const b = e.target.closest('[data-theme-pick]');
+  if (b) chooseTheme(b.dataset.themePick);
+});
+
+function setAccent(name) {
+  if (name === 'sage') delete document.documentElement.dataset.accent;
+  else document.documentElement.dataset.accent = name;
+  document.querySelectorAll('#accentPicker [data-accent]').forEach((b) => b.setAttribute('aria-checked', String(b.dataset.accent === name)));
+}
+setAccent(store.get('accent', 'sage'));
+$('#accentPicker').addEventListener('click', (e) => {
+  const b = e.target.closest('[data-accent]');
+  if (!b) return;
+  store.set('accent', b.dataset.accent);
+  setAccent(b.dataset.accent);
+});
+$('#clearEnded').addEventListener('click', () => post('/api/session/remove', { sessionIds: state.sessions.filter((s) => !isLive(s)).map((s) => s.id) }));
+document.addEventListener('pointerdown', () => audioCtx?.resume?.(), { once: true });
+
+(function setupNotifyButton() {
+  const btn = $('#notifyBtn');
+  if (!('Notification' in window) || Notification.permission !== 'default') return;
+  btn.hidden = false;
+  btn.onclick = async () => {
+    await Notification.requestPermission();
+    btn.hidden = true;
+  };
+})();
+
+setInterval(() => (refreshAges(), renderUsage()), 10000);
+setInterval(() => document.querySelectorAll('[data-release]').forEach((el) => (el.textContent = countdown(Number(el.dataset.release)))), 1000);
+routeFromHash();
+render();
+connect();