@prplkane/roundtable 0.0.0-stage → 0.6.4

package/src/ui/app.js

@@ -0,0 +1,1967 @@
+import { rollup, hasUsableRound, positions } from '/src/engine.js';
+import { optionLabel } from '/src/contract.js';
+import { poolKey, poolVendor, poolAccount, hostKey, seatKind, initialSeatVendors, nextSeatLens, fillMissingSeatLenses, seatSetupIssue, hiddenMood, lightestModel, keyEnvName, HIDDEN_MOODS } from '/src/seats.js';
+import { avatar } from '/ui/avatars.js';
+import { modelsByCapability, retired, quotaWindows, quotaGroup, modelEfforts } from '/src/adapters/models.js';
+import { project, projectedWindows, unknownUsageMessage } from '/src/estimate.js';
+import { PREFLIGHT_TTL_MS, lamp as preflightLamp } from '/src/preflight.js';
+import { createBrowserDiagnostics, requestAction } from '/ui/diagnostics.js';
+import { installHelp, revealText, MOOD_HELP } from '/ui/help.js';
+import { installCeremony } from '/ui/ceremony.js';
+import { scribeMarkup, startScribe, stopScribe } from '/ui/scribe.js';
+import { scanMarkup, startScan, stopScan } from '/ui/scan.js';
+import { icon } from '/ui/icons.js';
+import { loaderMarkup } from '/ui/loader.js';
+import { noteRecord, noteLabel } from '/src/notes.js';
+import { progressText } from '/src/progress.js';
+import { unlock as unlockSound, setSound, soundEnabled, playCue } from '/ui/sound.js';
+import { groupQuestions, answerMessage, stopExplanation, cancellationReason, remainingWindow, argumentHtml, ceremonyOutcome, verdictView, verdictResultText, verdictHeadline, defaultSearchQuery } from '/src/review-view.js';
+
+const $ = (id) => document.getElementById(id);
+const helpNotes = installHelp();
+const ceremony = installCeremony();
+let openingSlug = null;
+const replyReveals = new Map();
+// Reply cards mid-motion (folding cards, below): reply key -> { kind: 'unfold' | 'fold', at }.
+const cardMotion = new Map();
+const replyKey = (r) => `${r.type}:${r.attemptId || `${r.seat?.id || 'chairman'}:${r.round ?? -1}`}`;
+// The launch token the server put in the page; every POST carries it (server.js refuse()).
+const SEND = { 'content-type': 'application/json', 'x-roundtable-token': document.querySelector('meta[name="roundtable-token"]')?.content || '' };
+let diagnosticStorage;
+try { diagnosticStorage = sessionStorage; } catch { /* private browsing may disable storage */ }
+// The server has restarted since this page was served: its token opens nothing any more, so
+// every write would be refused (401) and retrying only fills the log. One banner, one Reload.
+let stale = false;
+function markStale() {
+  if (stale) return;
+  stale = true;
+  const banner = $('page-error');
+  banner.textContent = 'This board belongs to an earlier server session. Nothing here can be sent until the page is reloaded; copy any unsent note first. ';
+  const reload = document.createElement('button');
+  reload.type = 'button'; reload.className = 'btn btn-small'; reload.textContent = 'Reload';
+  reload.addEventListener('click', () => location.reload());
+  banner.append(reload); banner.hidden = false;
+}
+const clientDiagnostics = createBrowserDiagnostics({ storage: diagnosticStorage,
+  send: async (events) => {
+    if (stale) throw new Error('Diagnostic log unavailable until reload.');
+    const res = await fetch('/api/diagnostics/report', { method: 'POST', headers: SEND, body: JSON.stringify({ events }), signal: AbortSignal.timeout(5000) });
+    if (res.status === 401) markStale();
+    if (!res.ok) throw new Error('Diagnostic log unavailable.');
+    return res.json();
+  },
+  onPending: (count) => {
+    if (stale) return; // the banner says what to do; nothing will reach the log before a reload
+    if (count) { $('diagnostics-status').textContent = 'Some error details have not reached the local log. Keep this tab open; they will retry when the server is available. Save error log includes pending details.'; $('diagnostics-status').hidden = false; }
+    else if ($('diagnostics-status').textContent.startsWith('Some error details')) $('diagnostics-status').hidden = true;
+  },
+});
+const errorReference = (diagnostic) => diagnostic?.id ? ` Reference ${diagnostic.id}.${diagnostic.saved === false ? ' The local log could not save this entry.' : ''}` : '';
+const callDetails = (errors, progress) => {
+  const text = (errors || []).join('\n'), details = progressText(progress);
+  return details && !text.includes(details) ? `${text}\n${details}` : text;
+};
+function browserFailure(code, action, message, details) {
+  const id = clientDiagnostics.report(code, action, details);
+  return new Error(`${message}${errorReference({ id })}`);
+}
+function pageFailure(code, event) {
+  if (stale) return; // the banner already says what to do, and its Reload button must stay
+  const id = clientDiagnostics.report(code, 'unknown', { line: event?.lineno, column: event?.colno });
+  $('page-error').textContent = `A page error interrupted an action. Copy any unsent note, reload, then check the review before retrying.${errorReference({ id })}`;
+  $('page-error').hidden = false;
+}
+window.addEventListener('error', (e) => pageFailure('browser-error', e));
+window.addEventListener('unhandledrejection', () => pageFailure('browser-rejection'));
+window.addEventListener('online', () => void clientDiagnostics.flush());
+setInterval(() => { if (!stale) void clientDiagnostics.flush(); }, 15_000);
+void clientDiagnostics.flush();
+// A failed or timed-out write can already have reached the server. Never retry it automatically.
+async function requestJson(url, body, timeoutMs = 15_000) {
+  const action = requestAction(url, body !== undefined);
+  let res;
+  try {
+    res = await fetch(url, { ...(body === undefined ? {} : { method: 'POST', headers: SEND, body: JSON.stringify(body) }), signal: AbortSignal.timeout(timeoutMs) });
+  } catch (e) {
+    const timeout = ['TimeoutError', 'AbortError'].includes(e.name);
+    throw browserFailure(timeout ? 'browser-timeout' : 'browser-network', action,
+      `${timeout ? `The server did not respond within ${Math.round(timeoutMs / 1000)} seconds.` : 'Could not reach the local server.'} ${body === undefined ? 'Check that it is running, then reload.' : 'The action may already have happened. Keep your note and check the review before retrying.'}`);
+  }
+  let out;
+  try { out = await res.json(); } catch { throw browserFailure('browser-response', action, 'The server returned an unreadable response. Check the current state before retrying.', { status: res.status }); }
+  if (!out || typeof out !== 'object') throw browserFailure('browser-response', action, 'The server returned an unreadable response. Check the current state before retrying.', { status: res.status });
+  if (!res.ok || out.ok === false) {
+    const message = res.status === 401 ? 'This page is out of date. Copy any unsent note, reload, then check the review before retrying.' : out.error || 'This action is no longer available. Check the current state before retrying.';
+    if (res.status === 401) { markStale(); throw new Error(message); } // not a diagnostic: the banner explains it, and the log cannot be reached
+    if (out.diagnostic) throw Object.assign(new Error(message + errorReference(out.diagnostic)), { field: out.field, seatIndex: out.seatIndex });
+    throw browserFailure('browser-response', action, message, { status: res.status });
+  }
+  void clientDiagnostics.flush();
+  return out;
+}
+$('save-diagnostics').addEventListener('click', async () => {
+  const button = $('save-diagnostics'); button.disabled = true;
+  try {
+    await clientDiagnostics.flush();
+    const out = await requestJson('/api/diagnostics', {});
+    const blob = new Blob([JSON.stringify({ ...out, pendingBrowserEvents: clientDiagnostics.pending() }, null, 2)], { type: 'application/json' });
+    const url = URL.createObjectURL(blob), link = document.createElement('a');
+    link.href = url; link.download = `roundtable-errors-${new Date().toISOString().slice(0, 10)}.json`; link.click();
+    setTimeout(() => URL.revokeObjectURL(url), 1000);
+    $('diagnostics-status').textContent = `Error log saved. Nothing was uploaded.${!out.available ? ' The server could not read or write part of the log; check disk space and data-folder permissions.' : ''}${out.dropped ? ' Repeated errors exceeded the logging rate limit; some entries were omitted.' : ''}`;
+  } catch (e) { $('diagnostics-status').textContent = `Could not save the error log. ${e.message}`; }
+  finally { button.disabled = false; $('diagnostics-status').hidden = false; }
+});
+const initialDraft = (vendors) => vendors.map((vendor, i) => ({ vendor, lens: ['risk and failure modes', 'cost and effort'][i], mood: 'grill', moodText: '', model: '', effort: '' }));
+const VENDOR_LABEL = {};
+const VENDOR_META = {}; // vendor -> { kind, usageUrl, pool, catalogue, colour, profiles } from /api/seats
+let MOODS = {}, COLOURS = ['rust', 'olive', 'teal', 'dusk', 'steel'], BASELINES = {};
+// Known OpenAI-compatible endpoints, offered as the endpoint field's suggestions. A hosted API
+// names the environment variable its key is usually kept in; the card prefills it, never a key.
+const ENDPOINT_PRESETS = [
+  { label: 'Ollama (this machine)', url: 'http://localhost:11434/v1' },
+  { label: 'LM Studio (this machine)', url: 'http://localhost:1234/v1' },
+  { label: 'vLLM (this machine)', url: 'http://localhost:8000/v1' },
+  { label: 'llama.cpp server (this machine)', url: 'http://localhost:8080/v1' },
+  { label: 'DeepSeek', url: 'https://api.deepseek.com/v1', keyEnv: 'DEEPSEEK_API_KEY' },
+  { label: 'Moonshot (Kimi)', url: 'https://api.moonshot.ai/v1', keyEnv: 'MOONSHOT_API_KEY' },
+  { label: 'OpenAI', url: 'https://api.openai.com/v1', keyEnv: 'OPENAI_API_KEY' },
+];
+const isApi = (vendor) => VENDOR_META[vendor]?.kind === 'api';
+// The pool a drafted seat draws on: a CLI's login profile, or an endpoint's host.
+const seatAccount = (s) => (isApi(s.vendor) ? hostKey(s.endpoint || '') : (s.account || '').trim());
+const chairAccount = () => (isApi($('chairman').value) ? hostKey($('chairman-endpoint').value) : $('chairman-account').value.trim());
+
+// ---------- state ----------
+const S = {
+  down: {}, // board: logins out for this debate (pool-down events)
+  preflight: {}, preflighting: false, startConfirm: null, // setup screen: the lamps' answers per pool key
+  preflightError: null, preflightCheckedAt: null,
+  slug: null, seats: [], fieldNotes: null, rows: [], rounds: [], humanNotes: [], initialNotes: [], gate: null, deadline: null, held: false,
+  verdict: null, status: 'idle', startedAt: null, stopReason: null, pending: new Set(), quota: {}, calib: {}, pools: {}, chairman: null, configuredChairman: null,
+  conn: {}, // seat id -> connection state (idle, thinking, replied, reprompted, failed, timed-out), from seat-state events
+  positions: [], // per round: seat id -> agreed | disagreed | neutral | passed | null, from round-done
+  opened: new Set(), // reply keys opened by a click on the card head; every reply starts folded to its seat and stance
+  // Folds the person set by hand, so a redraw on the next event keeps them: roundOpen by round
+  // index (unset: the latest round is open), openDetails by reply key and details class.
+  roundOpen: {}, openDetails: new Set(), timedOut: {},
+  unattended: false, // the review skips every pause (from its options, so a replay from disk knows too)
+  draft: [], // setup screen: the seat rows being edited
+  budget: {}, // setup screen: vendor -> { tokens, usd } caps
+};
+const CONN_LABEL = { idle: 'idle', thinking: 'thinking', replied: 'replied', reprompted: 're-prompted', failed: 'failed', cancelled: 'cancelled', 'timed-out': 'timed out', down: 'out for this debate' };
+// What a failed call's kind means for the human, in one line (adapters/errors.js classifies).
+const ERROR_LINE = {
+  policy: 'The provider tool policy stopped this seat. Its rejected answer is excluded from the discussion.',
+  compatibility: 'The CLI does not support a required restriction. Update it before starting a new review.',
+  quota: 'Provider usage limit reached. Wait for the reset or choose another provider.',
+  auth: 'Provider login needs attention. Sign in with its CLI, then refresh status.',
+  missing: 'Provider CLI not found. Install it and restart Roundtable.',
+  network: 'Could not reach the provider. Check your connection and its service status.',
+  timeout: 'This provider reached its per-call time limit. Other replies are kept. Check the saved progress and provider status before retrying.',
+  killed: 'Stopped before it answered.', format: 'The reply did not follow the required format. Try another model.',
+  budget: 'The budget blocked this call. Check the cap and reported usage before continuing.',
+};
+const POSITION_LABEL = { agreed: 'with the majority', disagreed: 'against the majority', neutral: 'own stance', passed: 'passed' };
+const led = (state) => `<span class="led led-${esc(state || 'idle')}" title="${esc(CONN_LABEL[state] || 'idle')}" aria-label="${esc(CONN_LABEL[state] || 'idle')}"></span>`;
+
+// ---------- setup screen ----------
+async function setup() {
+  const { vendors, moods, colours, defaults, baselines, calibration, pools, runtime } = await requestJson('/api/seats');
+  const demo = runtime?.mode === 'demo';
+  $('run-mode').textContent = demo ? 'Demo' : 'Live';
+  $('run-mode').className = `run-mode ${demo ? 'demo' : 'live'}`;
+  $('mode-note').textContent = demo ? 'Demo: replies and usage are scripted. No model calls are made.' : 'Live: debates send your field notes to the providers you select and use their quota or billing.';
+  $('data-dir').textContent = runtime?.dataDir || 'unavailable — check the server terminal';
+  const legacy = Array.isArray(runtime?.legacyDataDirs) ? runtime.legacyDataDirs : [];
+  $('legacy-data').hidden = !legacy.length;
+  $('legacy-data').textContent = legacy.length ? `Older history remains at ${legacy.join('; ')}. Stop any server using ${legacy.length === 1 ? 'that folder before moving its reviews' : 'those folders before moving their reviews'}; see the user guide.` : '';
+  if (runtime?.diagnostics?.available === false) { $('diagnostics-status').textContent = 'The local error log is unavailable. Check disk space and data-folder permissions.'; $('diagnostics-status').hidden = false; }
+  MOODS = moods; COLOURS = colours; BASELINES = baselines || {}; S.calib = calibration || {}; S.pools = pools || {};
+  const chair = $('chairman');
+  for (const v of vendors) {
+    VENDOR_LABEL[v.vendor] = v.label;
+    VENDOR_META[v.vendor] = { kind: v.kind, usageUrl: v.usageUrl, pool: v.pool, catalogue: v.catalogue, colour: v.colour, profiles: v.profiles, limitedIsolation: v.limitedIsolation === true, terms: v.terms || null };
+    if (v.quota) S.quota[v.vendor] = v.quota;
+    chair.insertAdjacentHTML('beforeend', `<option value="${v.vendor}">${esc(v.label)}</option>`);
+    if (v.search) $('searcher-vendor').insertAdjacentHTML('beforeend', `<option value="${v.vendor}">${esc(v.label)}</option>`);
+    // one datalist per vendor, so the model field offers what that CLI is known to accept
+    $('datalists').insertAdjacentHTML('beforeend', `<datalist id="models-${v.vendor}">${(v.catalogue?.models || []).map((m) => `<option value="${esc(m.id)}">${esc(m.label)}</option>`).join('')}</datalist>`);
+  }
+  $('datalists').insertAdjacentHTML('beforeend', `<datalist id="endpoints">${ENDPOINT_PRESETS.map((e) => `<option value="${esc(e.url)}">${esc(e.label)}</option>`).join('')}</datalist>`);
+  $('critique-rounds').value = defaults.critiqueRounds;
+  $('auto').value = defaults.autoContinueMs / 1000;
+  $('question-wait').value = (defaults.questionWaitMs || 120000) / 1000;
+  $('wall').value = defaults.wallClockMs / 60000;
+  $('memory').value = defaults.memory || 'stateless';
+  try { const saved = JSON.parse(localStorage.getItem('roundtable.notes') || 'null'); if (saved) for (const [k, v] of Object.entries(saved)) if (k !== 'options' && $(k)) $(k).value = v; S.options = String(saved?.options || '').split('\n').map((o) => o.trim()).filter(Boolean); } catch {}
+  if (!S.options || S.options.length < 2) S.options = [...(S.options || []), '', ''].slice(0, Math.max(2, S.options?.length || 0));
+  renderOptions();
+  setupMoreContext();
+  let saved = null, settings = {};
+  try { saved = JSON.parse(localStorage.getItem('roundtable.seats') || 'null'); } catch {}
+  try { settings = JSON.parse(localStorage.getItem('roundtable.settings') || '{}') || {}; } catch {}
+  // Migrate old preferences before restoring inputs, including fields on a changed vendor.
+  if (Array.isArray(saved)) {
+    saved = saved.map((s) => s && typeof s === 'object' ? { ...s, keyEnv: keyEnvName(s.keyEnv) } : s);
+    try { localStorage.setItem('roundtable.seats', JSON.stringify(saved)); } catch {}
+  }
+  if (settings.chairman && typeof settings.chairman === 'object') {
+    settings.chairman = { ...settings.chairman, keyEnv: keyEnvName(settings.chairman.keyEnv) };
+    try { localStorage.setItem('roundtable.settings', JSON.stringify(settings)); } catch {}
+  }
+  const retained = Array.isArray(saved) ? saved.filter((s) => s && VENDOR_META[s.vendor]) : [];
+  S.draft = retained.length >= 2 ? fillMissingSeatLenses(retained) : initialDraft(initialSeatVendors(vendors));
+  const filled = retained.length >= 2 ? retained.filter((s) => !String(s.lens || '').trim()).length : 0;
+  $('seat-setup-note').hidden = !filled;
+  $('seat-setup-note').textContent = filled ? `Added starter lenses to ${filled} unfinished seat${filled === 1 ? '' : 's'}. Review or edit them before opening the table.` : '';
+  S.initialDraft = retained.length >= 2 ? null : JSON.stringify(S.draft);
+  S.initialChair = !settings.chairman;
+  for (const [key, id, scale, min, max] of [
+    ['critiqueRounds', 'critique-rounds', 1, 0, 8], ['autoContinueMs', 'auto', 1000, 100, 600_000], ['questionWaitMs', 'question-wait', 1000, 100, 600_000], ['wallClockMs', 'wall', 60_000, 60_000, 10_800_000],
+  ]) {
+    const value = settings.options?.[key];
+    if (Number.isInteger(value) && value >= min && value <= max) $(id).value = value / scale;
+  }
+  if (['stateless', 'resume'].includes(settings.options?.memory)) $('memory').value = settings.options.memory;
+  $('unattended').checked = settings.options?.unattended === true;
+  const research = settings.options?.research;
+  $('research-query').value = research?.query || '';
+  $('research-query-mode').value = settings.researchQueryMode === 'decision' || !research?.query ? 'decision' : 'custom';
+  syncResearchQuery();
+  $('notes').addEventListener('input', syncResearchQuery);
+  $('research-query-mode').addEventListener('change', () => { syncResearchQuery(); $('research-query').focus(); });
+  $('research-searches').value = research?.maxSearches || 4;
+  $('research-time').value = (research?.timeoutMs || 120000) / 1000;
+  // a new searcher starts on its vendor's lightest model at low effort; a saved one keeps its own
+  // (settings saved before the searcher had its own model name none, so they start light too)
+  const searchers = [...$('searcher-vendor').options].map((o) => o.value);
+  $('searcher-vendor').value = searchers.includes(research?.vendor) ? research.vendor : searchers.includes(DEFAULT_SEARCHER) ? DEFAULT_SEARCHER : searchers[0] || '';
+  const named = !!research && ['model', 'effort', 'account'].some((key) => Object.hasOwn(research, key)) && $('searcher-vendor').value === (research.vendor || DEFAULT_SEARCHER);
+  if (named) { $('searcher-model').value = research.model || ''; $('searcher-effort').value = research.effort || ''; } else lightSearcher($('searcher-vendor').value);
+  $('add-searcher').disabled = !searchers.length;
+  $('searcher-account').value = research?.account || '';
+  $('searcher-wrap').hidden = !research; $('add-searcher').hidden = !!research;
+  const ch = settings.chairman;
+  if (ch && VENDOR_META[ch.vendor]) {
+    chair.value = ch.vendor;
+    for (const field of ['model', 'account', 'endpoint', 'keyEnv']) if (typeof ch[field] === 'string') $(`chairman-${field === 'keyEnv' ? 'keyenv' : field}`).value = ch[field];
+  }
+  chairEffortOptions();
+  if (ch?.effort && [...$('chairman-effort').options].some((o) => o.value === ch.effort)) $('chairman-effort').value = ch.effort;
+  renderSeats();
+
+  $('add-seat').addEventListener('click', () => { S.initialDraft = null; clearSetupValidation(); S.draft.push({ vendor: vendors[0].vendor, lens: nextSeatLens(S.draft), mood: 'grill', moodText: '', model: '', effort: '' }); renderSeats(); });
+  $('seats').addEventListener('input', onSeatEdit);
+  $('seats').addEventListener('change', onSeatEdit);
+  $('seats').addEventListener('click', (ev) => {
+    const pip = ev.target.closest('.pip');
+    if (pip) {
+      S.initialDraft = null;
+      const s = S.draft[Number(pip.closest('.seat').dataset.i)];
+      const fam = s.vendor === 'agy' && familyOf('agy', s.model);
+      if (fam) Object.assign(s, pickedModel('agy', fam.id, pip.dataset.level)); // a variant is always one level
+      else s.effort = s.effort === pip.dataset.level ? '' : pip.dataset.level;
+      renderSeats(); return;
+    }
+    const btn = ev.target.closest('.remove'); if (!btn) return;
+    S.initialDraft = null;
+    if (S.draft.length <= 2) { $('seats-error').textContent = 'A table needs at least two seats.'; return; }
+    S.draft.splice(Number(btn.closest('.seat').dataset.i), 1); renderSeats();
+  });
+  chair.addEventListener('change', () => { S.customChairModel = false; $('chairman-model').value = ''; chairEffortOptions(); renderChair(); renderProjection(); });
+  $('chair-card').addEventListener('input', () => { S.initialChair = false; });
+  $('chair-card').addEventListener('change', () => { S.initialChair = false; });
+  $('chair-pips').addEventListener('click', (ev) => {
+    const pip = ev.target.closest('.pip'); if (!pip) return;
+    S.initialChair = false;
+    const sel = $('chairman-effort');
+    const fam = $('chairman').value === 'agy' && familyOf('agy', $('chairman-model').value.trim());
+    if (fam) { const p = pickedModel('agy', fam.id, pip.dataset.level); $('chairman-model').value = p.model; sel.value = p.effort; }
+    else sel.value = sel.value === pip.dataset.level ? '' : pip.dataset.level; // the filled last pip again: back to default
+    renderChair(); renderProjection();
+  });
+  $('chair-card').addEventListener('change', (ev) => {
+    if (ev.target.id !== 'chair-model-pick') return;
+    const v = ev.target.value;
+    S.customChairModel = v === '__other';
+    if (S.customChairModel) { $('chairman-model').value = ''; renderChair(); $('chairman-model').focus(); return; }
+    const p = pickedModel($('chairman').value, v, $('chairman-effort').value);
+    $('chairman-model').value = p.model; if (p.effort !== undefined) $('chairman-effort').value = p.effort || '';
+    renderChair(); renderProjection();
+  });
+  $('chairman-account').addEventListener('input', () => { renderChair(); requestPreflight(); });
+  $('chairman').addEventListener('change', () => requestPreflight());
+  $('refresh-status').addEventListener('click', () => requestPreflight({ fresh: true }));
+  // an endpoint chairman: a preset URL prefills the key variable's usual name (never a key)
+  $('chairman-endpoint').addEventListener('change', () => { const pre = ENDPOINT_PRESETS.find((e) => e.url === $('chairman-endpoint').value.trim()); if (pre?.keyEnv && !$('chairman-keyenv').value.trim()) $('chairman-keyenv').value = pre.keyEnv; renderChair(); requestPreflight(); });
+  for (const id of ['chairman-endpoint', 'chairman-keyenv']) $(id).addEventListener('input', () => { renderChair(); requestPreflight(); });
+  renderChair();
+  // first, so the projection below reads the level the new model takes, not the one it dropped
+  $('chairman-model').addEventListener('input', chairEffortOptions); // a model that takes fewer levels offers only those
+  for (const id of ['chairman-model', 'chairman-effort', 'critique-rounds', 'memory']) $(id).addEventListener('input', renderProjection);
+  for (const id of ['chairman-model', 'searcher-model']) $(id).addEventListener('input', () => updateLamps()); // agy: the lamp follows the model's quota group
+  $('add-searcher').addEventListener('click', () => { setSearcher(true); $('research-query').focus(); });
+  $('remove-searcher').addEventListener('click', () => { setSearcher(false); $('add-searcher').focus(); });
+  // another vendor: its own lightest model and login, not the last vendor's
+  $('searcher-vendor').addEventListener('change', () => { lightSearcher($('searcher-vendor').value); renderSearcher(); renderProjection(); requestPreflight(); });
+  $('searcher-card').addEventListener('change', (ev) => {
+    if (ev.target.id !== 'searcher-model-pick') return;
+    S.customSearcherModel = ev.target.value === '__other';
+    if (S.customSearcherModel) { $('searcher-model').value = ''; renderSearcher(); $('searcher-model').focus(); return; }
+    const p = pickedModel($('searcher-vendor').value, ev.target.value, $('searcher-effort').value);
+    $('searcher-model').value = p.model; if (p.effort !== undefined) $('searcher-effort').value = p.effort || '';
+    renderSearcher(); renderProjection();
+  });
+  $('searcher-pips').addEventListener('click', (ev) => {
+    const pip = ev.target.closest('.pip'); if (!pip) return;
+    const fam = $('searcher-vendor').value === 'agy' && familyOf('agy', $('searcher-model').value.trim());
+    if (fam) { const p = pickedModel('agy', fam.id, pip.dataset.level); $('searcher-model').value = p.model; $('searcher-effort').value = p.effort; }
+    else $('searcher-effort').value = $('searcher-effort').value === pip.dataset.level ? '' : pip.dataset.level; // the filled last pip again: back to default
+    renderSearcher(); renderProjection();
+  });
+  $('searcher-model').addEventListener('input', renderProjection);
+  $('searcher-account').addEventListener('input', () => { renderSearcher(); renderProjection(); requestPreflight(); });
+  renderSearcher();
+  $('start').addEventListener('click', start);
+  try { S.budget = JSON.parse(localStorage.getItem('roundtable.budget') || '{}') || {}; } catch {}
+  renderProjection();
+  $('projection').addEventListener('input', (ev) => {
+    const inp = ev.target.closest('.pool-cap input'); if (!inp) return;
+    const v = inp.closest('.pool-cap').dataset.vendor;
+    const b = (S.budget[v] ??= {});
+    b[inp.name] = inp.value === '' ? undefined : Number(inp.value);
+    const warning = inp.closest('.pool').querySelector('[data-dollar-warning]');
+    if (warning) warning.hidden = !(b.usd > 0);
+  });
+  $('projection').addEventListener('submit', async (ev) => {
+    const form = ev.target.closest('form.pool-entry'); if (!form) return;
+    ev.preventDefault();
+    const body = Object.fromEntries(new FormData(form).entries());
+    const button = form.querySelector('button');
+    if (button.disabled) return;
+    button.disabled = true;
+    try { const out = await requestJson(`/api/pools/${form.dataset.vendor}`, body); S.pools[form.dataset.vendor] = out.pool; renderProjection(); }
+    catch (e) { form.querySelector('.error').textContent = e.message; }
+    finally { button.disabled = false; }
+  });
+}
+
+// The pool figure a user entered for a vendor with no feed: remaining, its age, and what this
+// table would take from it when a units-per-token rate was given.
+function poolEntry(vendor, weightedTokens) {
+  const pl = S.pools[vendor];
+  const shown = pl ? `<p class="pool-note"><b>${esc(pl.remaining.toLocaleString())} ${esc(pl.unit)}</b> left, entered ${agoText(pl.at)}${pl.note ? `, ${esc(pl.note)}` : ''}.${pl.perToken ? ` This table takes about ${esc(Math.round(weightedTokens * pl.perToken).toLocaleString())} ${esc(pl.unit)}, ${pct(Math.min(1, weightedTokens * pl.perToken / (pl.remaining || 1)))} of it.` : ''}</p>` : '';
+  return `${shown}
+    <details class="pool-edit"><summary>${pl ? 'Update the remaining figure' : 'Track a remaining figure from the usage page'}</summary>
+      <form class="pool-entry" data-vendor="${esc(vendor)}">
+        <input name="remaining" type="number" min="0" step="any" placeholder="remaining" value="${pl ? esc(pl.remaining) : ''}" required>
+        <input name="unit" placeholder="unit" value="${esc(pl?.unit || 'credits')}">
+        <input name="perToken" type="number" min="0" step="any" placeholder="units per token (optional)" value="${pl?.perToken ?? ''}">
+        <input name="note" placeholder="note" value="${esc(pl?.note || '')}">
+        <button class="btn btn-small" type="submit">Save</button><span class="error"></span>
+      </form>
+    </details>`;
+}
+
+// "default (<level>)" when the catalogue knows the CLI's own default level; today no vendor
+// reports one (codex's config.toml is not a source: the seat runs with --ignore-user-config).
+const defaultEffortLabel = (vendor) => { const d = VENDOR_META[vendor]?.catalogue?.defaultEffort; return d ? `default (${d})` : 'default'; };
+// model: a model that takes fewer levels than its vendor offers (models.js modelEfforts) offers only those
+const effortOptions = (vendor, chosen, model = '', none = defaultEffortLabel(vendor)) => `<option value="">${esc(none)}</option>${modelEfforts(vendor, model, VENDOR_META[vendor]?.catalogue?.efforts || []).map((e) => `<option value="${e}" ${e === chosen ? 'selected' : ''}>${e}</option>`).join('')}`;
+
+function chairEffortOptions() {
+  const sel = $('chairman-effort');
+  const keep = sel.value;
+  sel.innerHTML = effortOptions($('chairman').value, keep, $('chairman-model').value.trim());
+  $('chairman-model').setAttribute('list', `models-${$('chairman').value}`);
+}
+
+// A seat's colour is its vendor's (signature-design family accents): rust Claude, olive Codex,
+// teal Antigravity. Two seats of one vendor share it and differ by number, lens and avatar.
+const vendorColour = (vendor) => VENDOR_META[vendor]?.colour || 'ink';
+
+// The model picker: capability order, simple names and a separate custom-id mode.
+// Antigravity lists one entry per model; its effort
+// pips pick the variant. Returns { html, other } (other: show the free-text id field).
+const familyOf = (vendor, model) => (VENDOR_META[vendor]?.catalogue?.families || []).find((f) => model === f.id || String(model).startsWith(`${f.id}-`));
+function modelPicker(vendor, value, idAttr = '', custom = false) {
+  const cat = VENDOR_META[vendor]?.catalogue || {};
+  const models = modelsByCapability(vendor === 'agy' ? cat.families || [] : cat.models || []);
+  const selected = vendor === 'agy' ? familyOf(vendor, value)?.id || value : value;
+  let current = !value ? '' : models.some((m) => m.id === selected) ? selected : '__other';
+  if (custom) current = '__other';
+  const opt = (m) => `<option value="${esc(m.id)}" ${m.id === current ? 'selected' : ''}>${esc(m.label)}${m.note ? ` · ${esc(m.note)}` : ''}</option>`;
+  const html = `<select class="flat model-pick" ${idAttr} aria-label="Model"><option value="">default</option>${models.length ? `<optgroup label="Models · most capable first">${models.map(opt).join('')}</optgroup>` : ''}<option value="__other" ${current === '__other' ? 'selected' : ''}>Custom model ID…</option></select>`;
+  return { html, other: current === '__other' };
+}
+// A picked model as the id to send: an Antigravity model takes its effort as the suffix.
+function pickedModel(vendor, picked, effort) {
+  // a level the newly picked model does not take is dropped, back to the CLI's default
+  if (vendor !== 'agy' || !picked) return { model: picked, effort: effort && !modelEfforts(vendor, picked, VENDOR_META[vendor]?.catalogue?.efforts || []).includes(effort) ? '' : effort };
+  const fam = familyOf(vendor, picked);
+  const level = fam?.levels.includes(effort) ? effort : fam?.levels.includes('medium') ? 'medium' : fam?.levels[0];
+  return { model: level ? `${picked}-${level}` : picked, effort: level || '' };
+}
+
+// Effort as pips, one per level the CLI accepts; none filled is the CLI's own default. An
+// Antigravity model offers the levels its id comes in.
+function pipsHtml(vendor, chosen, model = '') {
+  const levels = (vendor === 'agy' && familyOf(vendor, model)?.levels) || modelEfforts(vendor, model, VENDOR_META[vendor]?.catalogue?.efforts || []);
+  const at = levels.indexOf(chosen);
+  return '<span class="pip-buttons">' + levels.map((l, i) => `<button type="button" class="pip ${i <= at ? 'on' : ''}" data-level="${l}" title="${l}" aria-label="Effort ${l}" aria-pressed="${l === chosen}"></button>`).join('') + '</span>'
+    + `<span class="pip-label">${esc(chosen || defaultEffortLabel(vendor))}</span>`;
+}
+
+// The lamp: the pre-flight answer for the seat's pool when there is one (installed, logged in,
+// quota; authenticated POST /api/preflight), else what the quota alone says. model: the seat's,
+// for a quota in groups (agy), where only its group's windows count. The server's answer is for
+// the whole pool, so its quota part is redone here with the latest figure for this model.
+function poolLamp(vendor, account, model = '') {
+  const terms = VENDOR_META[vendor]?.terms;
+  if (terms && !terms.acknowledgedAt) return { cls: 'warn', kind: 'terms', note: 'Review the account notice before using this provider.' };
+  const key = poolKey(vendor, account, !!VENDOR_META[vendor]?.profiles);
+  const pf = S.preflight[key];
+  const q = S.quota[key];
+  if (S.preflighting) return { cls: 'idle', note: 'checking…' };
+  if (pf) {
+    const own = q && pf.installed && pf.loggedIn !== false && !['busy', 'check-failed'].includes(pf.kind)
+      ? preflightLamp({ vendor, installed: true, loggedIn: pf.loggedIn, quota: q, account, model }) : null;
+    const at = own ? { ...pf, ...own } : pf;
+    const stale = pf.stale || pf.checkedAt != null && Date.now() - pf.checkedAt >= PREFLIGHT_TTL_MS;
+    return { cls: stale && at.state === 'ok' ? 'warn' : at.state,
+      note: at.note + (stale && pf.checkedAt != null ? ' · refresh status' : ''), kind: at.kind };
+  }
+  if (!quotaWindows(q, [model]).length) return { cls: 'idle', note: 'not checked yet' };
+  const own = preflightLamp({ vendor, installed: true, loggedIn: null, quota: q, account, model });
+  return { cls: own.state, note: own.note, kind: own.kind };
+}
+
+// A custom mood that is a hidden mood's code word: its avatar, and the cheapest model and effort.
+const seatHidden = (s) => (s.mood === 'custom' ? hiddenMood(s.moodText) : null);
+function lockHidden(s) {
+  if (!seatHidden(s)) return;
+  s.customModel = false;
+  const lightest = lightestModel(s.vendor, VENDOR_META[s.vendor]?.catalogue?.models);
+  if (lightest) s.model = lightest;
+  s.effort = 'low';
+}
+
+function seatRow(s, i) {
+  const colour = vendorColour(s.vendor);
+  const hidden = seatHidden(s);
+  const api = isApi(s.vendor);
+  const same = S.draft.filter((x) => x.vendor === s.vendor);
+  const n = same.length > 1 ? ` ${same.indexOf(s) + 1}` : '';
+  const lamp = poolLamp(s.vendor, seatAccount(s), s.model);
+  // an endpoint seat has no catalogue: the model id is typed, and the card says it is required
+  const picker = api ? { html: '', other: true } : modelPicker(s.vendor, s.model || '', '', s.customModel);
+  const gone = retired(s.vendor, (s.model || '').trim());
+  const issue = S.seatIssue?.seatIndex === i ? S.seatIssue : null;
+  const invalid = (field) => issue?.field === field ? 'aria-invalid="true"' : '';
+  return `<article class="seat seat-card ${issue ? 'seat-invalid' : ''}" role="listitem" data-i="${i}" style="--seat: var(--seat-${colour})">
+    <div class="seat-hd">
+      <span class="avatar" title="${esc(s.mood === 'custom' ? 'custom mood' : s.mood)}">${avatar(hidden ? hidden.art : s.mood === 'custom' ? 'custom' : s.mood, hidden?.sprite)}</span>
+      <div class="seat-id">
+        <span class="chair-title"><select class="flat vendor" aria-label="Vendor">${Object.keys(VENDOR_META).map((v) => `<option value="${v}" ${v === s.vendor ? 'selected' : ''}>${esc(VENDOR_LABEL[v])}</option>`).join('')}</select>${n ? `<span class="seat-note">${n.trim()}</span>` : ''}<span class="kind-tag ${api ? 'api' : ''}" title="${api ? 'Billed by the endpoint, not a subscription' : 'The vendor CLI on your subscription'}">${esc(seatKind(VENDOR_META[s.vendor], s.endpoint))}</span></span>
+        ${hidden && !api ? picker.html.replace('<select', '<select disabled title="Locked to the lightest model"') : picker.html}<input class="flat model" aria-label="Model id" list="models-${s.vendor}" value="${esc(s.model)}" placeholder="${api ? 'model id (required)' : 'model id'}" ${picker.other ? '' : 'hidden'}>
+      </div>
+      <span class="lamp ${lamp.cls}" title="${esc(lamp.note)}"></span>
+    </div>
+    <button class="btn remove" type="button" aria-label="Remove seat" title="Remove seat">×</button>
+    <div class="seat-bd">
+      <div class="f"><label class="label help-label" data-help="lens" tabindex="0" for="seat-lens-${i}" aria-describedby="help-lens">Lens</label><input id="seat-lens-${i}" class="flat lens" value="${esc(s.lens)}" placeholder="e.g. long-term effects" aria-describedby="help-lens seat-error-${i}" ${invalid('lens')}></div>
+      <div class="f"><label class="label help-label" data-help="mood" tabindex="0" for="seat-mood-${i}" aria-describedby="help-mood seat-mood-help-${i}">Mood</label><select id="seat-mood-${i}" class="flat mood" title="${esc(MOOD_HELP[s.mood] || '')}" aria-describedby="help-mood seat-mood-help-${i}">${Object.keys(MOODS).map((m) => `<option value="${m}" title="${esc(MOOD_HELP[m] || '')}" ${m === s.mood ? 'selected' : ''}>${m}</option>`).join('')}<option value="custom" title="${esc(MOOD_HELP.custom)}" ${s.mood === 'custom' ? 'selected' : ''}>custom…</option></select></div>
+      <span class="sr-only" id="seat-mood-help-${i}">${esc(MOOD_HELP[s.mood] || '')}</span>
+      <input class="flat mood-text" aria-label="Custom mood" aria-describedby="seat-error-${i}" ${invalid('moodText')} value="${esc(s.moodText)}" placeholder="One sentence: how this seat approaches the question" ${s.mood === 'custom' ? '' : 'hidden'}>
+      <p class="seat-field-error error" id="seat-error-${i}" ${issue ? '' : 'hidden'}>${esc(issue?.message || '')}</p>
+      ${gone ? `<span class="seat-note danger">${esc(s.model)} was retired (${esc(gone.date)}); use ${esc(gone.instead)}.</span>` : ''}
+      ${api ? `<label class="f"><span class="label">Endpoint</span><input class="flat endpoint" aria-label="Endpoint base URL" list="endpoints" value="${esc(s.endpoint || '')}" placeholder="http://localhost:11434/v1" title="The base URL of an OpenAI-compatible server, ending in /v1. Plain http only on this machine or a private network."></label>
+      <label class="f"><span class="label">Key var</span><input class="flat keyenv" aria-label="Key environment variable" value="${esc(s.keyEnv || '')}" placeholder="none (local server)" title="The NAME of the environment variable that holds the key, set in the shell roundtable was started from. Never the key itself."></label>` : ''}
+      <div class="f"><span class="label help-label" data-help="effort" tabindex="0" aria-describedby="help-effort">Effort</span><span class="pips ${hidden ? 'locked' : ''}">${pipsHtml(s.vendor, s.effort, s.model)}</span><select class="effort" hidden>${effortOptions(s.vendor, s.effort, s.model)}</select></div>
+      <span class="seat-note lamp-note ${lamp.cls === 'danger' || lamp.cls === 'warn' ? lamp.cls : ''}" title="${esc(lamp.note)}" tabindex="0">${esc(lamp.note)}</span>
+      ${cardNotices(s.vendor)}
+      ${api ? '' : `<details class="seat-more"><summary>Login profile${s.account ? `: ${esc(s.account)}` : ''}</summary><input class="flat account" aria-label="Login profile" value="${esc(s.account || '')}" placeholder="none: your usual login" title="A second login of this CLI, for example a work subscription; node src/doctor.js shows how to log a profile in"></details>`}
+    </div>
+  </article>`;
+}
+
+// Ask the server for every pool on the table (seats and chairman), then relight the lamps in
+// place, so a field being typed in keeps its focus. Debounced: one request per pause.
+let preflightTimer = null;
+let preflightRevision = 0;
+function requestPreflight({ fresh = false } = {}) {
+  const revision = ++preflightRevision;
+  clearTimeout(preflightTimer);
+  preflightTimer = setTimeout(async () => {
+    const seats = [...S.draft, { vendor: $('chairman').value, account: $('chairman-account').value.trim(), endpoint: $('chairman-endpoint').value, keyEnv: $('chairman-keyenv').value }];
+    if (searcherOn()) seats.push(draftSearcher());
+    const keys = [...new Set([...seats.map((s) => poolKey(s.vendor, seatAccount(s), !!VENDOR_META[s.vendor]?.profiles)),
+      ...(S.initialDraft ? Object.keys(VENDOR_META).filter((v) => !isApi(v)) : [])])];
+    // an API pool is checked from its URL and key-variable NAME (no request leaves the server);
+    // those travel in the body, so its lamp follows every edit
+    const endpoints = {};
+    for (const s of seats) if (isApi(s.vendor)) endpoints[poolKey(s.vendor, seatAccount(s), true)] = { url: (s.endpoint || '').trim(), keyEnv: (s.keyEnv || '').trim() || null };
+    const epSig = JSON.stringify(endpoints);
+    const needsCheck = keys.some((k2) => !S.preflight[k2] || S.preflight[k2].stale ||
+      S.preflight[k2].checkedAt != null && Date.now() - S.preflight[k2].checkedAt >= PREFLIGHT_TTL_MS);
+    if (!needsCheck && !fresh && epSig === S.preflightEndpoints) { S.preflighting = false; updateLamps(); return; }
+    S.preflighting = true; S.preflightError = null; updateLamps();
+    try {
+      const { pools } = await requestJson('/api/preflight', { pools: keys, endpoints, fresh });
+      if (revision !== preflightRevision) return; // a slow answer cannot overwrite a later edit
+      S.preflightError = pools.some((p) => ['busy', 'check-failed'].includes(p.kind)) ? 'Some checks could not finish. Try Refresh status again.' : null;
+      const times = pools.map((p) => p.checkedAt).filter((t) => t != null);
+      S.preflightCheckedAt = times.length ? Math.min(...times) : Date.now();
+      S.preflightEndpoints = epSig;
+      for (const p of pools) {
+        S.preflight[p.key] = p;
+        if (p.quota && (p.quota.at ?? 0) >= (S.quota[p.key]?.at ?? 0)) S.quota[p.key] = p.quota;
+      }
+      if (S.initialDraft) {
+        const unchanged = JSON.stringify(S.draft) === S.initialDraft;
+        S.initialDraft = null; // choose once; a refresh never replaces an existing table
+        if (unchanged) {
+          const chosen = initialDraft(initialSeatVendors(Object.entries(VENDOR_META).map(([vendor, meta]) => ({ vendor, ...meta })), pools));
+          if (JSON.stringify(chosen) !== JSON.stringify(S.draft)) {
+            S.draft = chosen;
+            if (S.initialChair && chosen.length) { $('chairman').value = chosen[0].vendor; chairEffortOptions(); }
+            S.preflighting = false; renderSeats(); renderChair(); return;
+          }
+        }
+      }
+    } catch (e) {
+      if (revision === preflightRevision) S.preflightError = e.message || 'Could not refresh status. Try Refresh status again.';
+    } finally {
+      if (revision === preflightRevision) { S.preflighting = false; updateLamps(); }
+    }
+  }, 400);
+}
+function updateLamps() {
+  $('refresh-status').disabled = S.preflighting;
+  $('refresh-status').textContent = S.preflighting ? 'Checking…' : 'Refresh status';
+  $('preflight-status').textContent = S.preflighting ? 'Checking provider status…' : S.preflightError ||
+    (S.preflightCheckedAt != null ? `Last check ${new Date(S.preflightCheckedAt).toLocaleTimeString()}` : '');
+  if (searcherOn()) { const lamp = poolLamp($('searcher-vendor').value, searcherAccount(), $('searcher-model').value.trim()); $('searcher-lamp').className = `lamp ${lamp.cls}`; $('searcher-lamp').title = lamp.note; $('searcher-note').textContent = lamp.note; $('searcher-note').title = lamp.note; }
+  $('seats').querySelectorAll('.seat').forEach((card) => {
+    const s = S.draft[Number(card.dataset.i)]; if (!s) return;
+    const l = poolLamp(s.vendor, seatAccount(s), s.model);
+    const lampEl = card.querySelector('.lamp'); lampEl.className = `lamp ${l.cls}`; lampEl.title = l.note;
+    const note = card.querySelector('.lamp-note');
+    if (note) { note.textContent = l.note; note.title = l.note; note.className = `seat-note lamp-note ${l.cls === 'danger' || l.cls === 'warn' ? l.cls : ''}`; }
+  });
+  const c = poolLamp($('chairman').value, chairAccount(), $('chairman-model').value.trim());
+  $('chair-lamp').className = `lamp ${c.cls}`; $('chair-lamp').title = c.note;
+  $('chair-note').textContent = c.note; $('chair-note').title = c.note; $('chair-note').className = `seat-note lamp-note ${c.cls === 'danger' || c.cls === 'warn' ? c.cls : ''}`;
+  S.startConfirm = null; $('start').disabled = !!S.startPending; $('start').textContent = S.startPending ? 'Opening…' : 'Open the table';
+}
+
+// The chairman card: vendor colour, the gavel, effort pips; its controls keep their ids.
+function renderChair() {
+  const restoreFocus = rememberFocus($('chair-card'));
+  const v = $('chairman').value;
+  const card = $('chair-card');
+  card.style.setProperty('--seat', `var(--seat-${vendorColour(v)})`);
+  $('chair-avatar').innerHTML = avatar('chairman');
+  const api = isApi(v);
+  $('chair-kind').textContent = seatKind(VENDOR_META[v], $('chairman-endpoint').value);
+  $('chair-kind').classList.toggle('api', api);
+  $('chair-api').hidden = !api; $('chair-profile').hidden = api;
+  const picker = api ? { html: '', other: true } : modelPicker(v, $('chairman-model').value.trim(), 'id="chair-model-pick"', S.customChairModel);
+  $('chair-model-slot').innerHTML = picker.html;
+  $('chairman-model').hidden = !picker.other;
+  $('chairman-model').placeholder = api ? 'model id (required)' : 'model id';
+  $('chair-pips').innerHTML = pipsHtml(v, $('chairman-effort').value, $('chairman-model').value.trim());
+  $('chair-iso').innerHTML = cardNotices(v);
+  updateLamps();
+  restoreFocus();
+}
+
+// Antigravity cannot be sealed off (config.js limitedIsolation). The card that runs on it says so,
+// its tip explains, and choosing it there is the consent the board sends (isolationAccepted).
+// An agent request has no card, so it must send options.allowLimitedIsolation itself.
+const isoNote = (vendor) => (VENDOR_META[vendor]?.limitedIsolation
+  ? '<span class="seat-note warn iso-note help-label" data-help="isolation" tabindex="0" aria-describedby="help-isolation">Limited isolation: your Antigravity customizations and MCP servers still load</span>' : '');
+const isolationAccepted = () => [...draftSeats(), draftChairman(), searcherOn() ? draftSearcher() : null].some((s) => VENDOR_META[s?.vendor]?.limitedIsolation);
+
+// A vendor whose own docs say wrapping its CLI is unsupported on some plans (config.js terms,
+// src/terms.js). The card that runs on it opens the notice; until the person acknowledges it
+// there, the server sends nothing to that CLI and the table does not open with it. The
+// acknowledgment is kept by the server, so every board and the next start know it.
+const termsNote = (vendor) => {
+  const t = VENDOR_META[vendor]?.terms;
+  if (!t) return '';
+  return t.acknowledgedAt
+    ? `<button type="button" class="seat-note warn terms-note" data-terms="${esc(vendor)}">Account risk acknowledged · review</button>`
+    : `<button type="button" class="seat-note danger terms-note" data-terms="${esc(vendor)}">Account risk: read before using ${esc(VENDOR_LABEL[vendor])}</button>`;
+};
+function cardNotices(vendor) {
+  const meta = VENDOR_META[vendor] || {};
+  const count = Number(!!meta.limitedIsolation) + Number(!!meta.terms);
+  if (!count) return '<span class="card-notices-empty" aria-hidden="true"></span>';
+  const pending = meta.terms && !meta.terms.acknowledgedAt;
+  return `<details class="card-notices ${pending ? 'danger' : 'warn'}"><summary title="Expand provider warnings"><span aria-hidden="true">⚠</span> ${pending ? 'Review required' : 'Warnings'} · ${count}</summary><div class="card-notices-body">${isoNote(vendor)}${termsNote(vendor)}</div></details>`;
+}
+const termsCards = () => [...draftSeats(), draftChairman(), searcherOn() ? draftSearcher() : null].filter((s) => VENDOR_META[s?.vendor]?.terms);
+const termsPending = () => [...new Set(termsCards().map((s) => s.vendor))].filter((v) => !VENDOR_META[v].terms.acknowledgedAt);
+const termsAccepted = () => termsCards().length > 0 && !termsPending().length;
+
+let termsVendor = null;
+function openTerms(vendor) {
+  const t = VENDOR_META[vendor]?.terms;
+  if (!t) return;
+  termsVendor = vendor;
+  const label = VENDOR_LABEL[vendor];
+  $('vendor-terms-title').textContent = `${label} in a third-party app`;
+  $('vendor-terms-notice').textContent = t.notice;
+  $('vendor-terms-what').textContent = `Roundtable runs the ${label} CLI for every seat, chairman or searcher card set to ${label}, and reads its model list and remaining quota. Until you acknowledge this, it sends nothing to that CLI. Roundtable cannot tell which plan your login is on: check your plan's terms, or choose another provider.`;
+  $('vendor-terms-link').href = t.url;
+  $('vendor-terms-link').textContent = `Read the FAQ (${new URL(t.url).host})`;
+  $('vendor-terms-state').textContent = t.acknowledgedAt ? `You acknowledged this on ${new Date(t.acknowledgedAt).toLocaleDateString()}. Withdrawing it stops new reads; a review already running keeps its calls.` : '';
+  $('vendor-terms-state').hidden = !t.acknowledgedAt;
+  $('vendor-terms-confirm').hidden = !!t.acknowledgedAt;
+  $('vendor-terms-withdraw').hidden = !t.acknowledgedAt;
+  $('vendor-terms-error').hidden = true;
+  $('vendor-terms').showModal();
+}
+async function answerTerms(acknowledged) {
+  const vendor = termsVendor;
+  if (!vendor) return;
+  const buttons = ['vendor-terms-confirm', 'vendor-terms-withdraw', 'vendor-terms-cancel'].map($);
+  for (const b of buttons) b.disabled = true;
+  if (acknowledged) $('vendor-terms-confirm').textContent = 'Reading the model list…';
+  $('vendor-terms-error').hidden = true;
+  try {
+    // acknowledging waits for the CLI's model list, a network call of up to 30 s
+    const out = await requestJson(`/api/terms/${vendor}`, { acknowledged }, 45_000);
+    VENDOR_META[vendor].terms = out.terms;
+    // The old held/ready snapshot no longer describes this consent state. An ordinary
+    // card edit may replace the queued refresh, so invalidate it before any redraw.
+    for (const key of Object.keys(S.preflight)) if (poolVendor(key) === vendor) delete S.preflight[key];
+    if (out.catalogue) {
+      VENDOR_META[vendor].catalogue = out.catalogue;
+      const list = $(`models-${vendor}`);
+      if (list) list.innerHTML = (out.catalogue.models || []).map((m) => `<option value="${esc(m.id)}">${esc(m.label)}</option>`).join('');
+    }
+    $('vendor-terms').close();
+    renderSeats(); renderChair(); renderSearcher(); requestPreflight({ fresh: true });
+  } catch (e) {
+    $('vendor-terms-error').textContent = e.message; $('vendor-terms-error').hidden = false;
+  } finally {
+    for (const b of buttons) b.disabled = false;
+    $('vendor-terms-confirm').textContent = 'I understand, use it';
+  }
+}
+document.addEventListener('click', (ev) => { const note = ev.target.closest?.('.terms-note'); if (note) openTerms(note.dataset.terms); });
+$('vendor-terms-confirm').addEventListener('click', () => answerTerms(true));
+$('vendor-terms-withdraw').addEventListener('click', () => answerTerms(false));
+$('vendor-terms').addEventListener('cancel', (event) => { if ($('vendor-terms-cancel').disabled) event.preventDefault(); });
+
+// ---------- the searcher ----------
+// Not a seat: one call before round 0 that gathers cited sources from its visible query. A card
+// next to the chairman's, added and removed like a seat, with its own vendor, model, effort and
+// login. The vendor list holds only CLIs that can search with every other tool off (/api/seats).
+const DEFAULT_SEARCHER = 'codex'; // research.js: what an agent request without a vendor gets
+const searcherOn = () => !$('searcher-wrap').hidden;
+const searcherAccount = () => (VENDOR_META[$('searcher-vendor').value]?.profiles ? $('searcher-account').value.trim() : '');
+function draftSearcher() {
+  return { vendor: $('searcher-vendor').value, model: $('searcher-model').value.trim() || undefined, effort: $('searcher-effort').value || undefined, account: searcherAccount() || undefined };
+}
+// The lightest model at low effort: finding and quoting sources needs little reasoning. An
+// Antigravity id carries its level, so its "low" is part of the model.
+function lightSearcher(vendor) {
+  S.customSearcherModel = false;
+  const cat = VENDOR_META[vendor]?.catalogue || {};
+  const model = lightestModel(vendor, cat.models || []) || '';
+  const p = vendor === 'agy' ? pickedModel(vendor, familyOf(vendor, model)?.id || model, 'low') : { model, effort: (cat.efforts || []).includes('low') ? 'low' : '' };
+  $('searcher-model').value = p.model || ''; $('searcher-effort').value = p.effort || '';
+}
+function setSearcher(on) {
+  $('searcher-wrap').hidden = !on; $('add-searcher').hidden = on;
+  syncResearchQuery();
+  renderSearcher(); renderProjection(); requestPreflight();
+}
+function syncResearchQuery() {
+  const automatic = $('research-query-mode').value === 'decision';
+  const query = $('research-query');
+  query.readOnly = automatic;
+  if (automatic) query.value = defaultSearchQuery({ decision: $('notes').querySelector('[name="decision"]').value, options: S.options });
+  $('research-query-note').textContent = automatic
+    ? 'The question and options below will be used for web research. Choose Custom query to edit or remove private details. Other context and answers stay out.'
+    : 'Only this query is used for web research. Keep private details out. The searcher gathers evidence; it does not vote.';
+}
+function renderSearcher() {
+  if (!searcherOn()) return;
+  const restoreFocus = rememberFocus($('searcher-card'));
+  const v = $('searcher-vendor').value;
+  $('searcher-card').style.setProperty('--seat', `var(--seat-${vendorColour(v)})`);
+  $('searcher-avatar').innerHTML = avatar('searcher');
+  $('searcher-profile').hidden = !VENDOR_META[v]?.profiles; // no login profiles for a CLI without a state directory
+  const picker = modelPicker(v, $('searcher-model').value.trim(), 'id="searcher-model-pick"', S.customSearcherModel);
+  $('searcher-model-slot').innerHTML = picker.html;
+  $('searcher-model').hidden = !picker.other;
+  $('searcher-model').setAttribute('list', `models-${v}`);
+  $('searcher-pips').innerHTML = pipsHtml(v, $('searcher-effort').value, $('searcher-model').value.trim());
+  const lamp = poolLamp(v, searcherAccount(), $('searcher-model').value.trim());
+  $('searcher-lamp').className = `lamp ${lamp.cls}`; $('searcher-lamp').title = lamp.note;
+  $('searcher-note').textContent = lamp.note; $('searcher-note').title = lamp.note;
+  $('searcher-iso').innerHTML = cardNotices(v);
+  restoreFocus();
+}
+
+// Options as chips: opt-1, opt-2 ... as the seats will see them. Enter adds the next one,
+// Backspace in an empty chip removes it, a repeated option is marked.
+function renderOptions(focus = null) {
+  const seen = new Map();
+  for (const o of S.options) { const kk = o.trim().toLowerCase(); if (kk) seen.set(kk, (seen.get(kk) || 0) + 1); }
+  $('options-editor').innerHTML = S.options.map((o, i) => `<span class="opt ${seen.get(o.trim().toLowerCase()) > 1 ? 'dup' : ''}" data-i="${i}"><b>opt-${i + 1}</b><input value="${esc(o)}" size="${Math.max(8, o.length + 1)}" aria-label="Option ${i + 1}" placeholder="${i === 0 ? 'Stay as we are' : i === 1 ? 'Change it' : 'Another option'}"><button type="button" class="opt-x" aria-label="Remove option ${i + 1}" ${S.options.length <= 2 ? 'hidden' : ''}>×</button></span>`).join('')
+    + `<button type="button" class="btn btn-small opt-add" ${S.options.length >= 12 ? 'hidden' : ''}>+ option</button>`;
+  if (focus != null) $('options-editor').querySelectorAll('.opt input')[focus]?.focus();
+  syncResearchQuery();
+}
+function wireOptions() {
+  const ed = $('options-editor');
+  ed.addEventListener('input', (ev) => {
+    const chip = ev.target.closest('.opt'); if (!chip) return;
+    S.options[Number(chip.dataset.i)] = ev.target.value;
+    syncResearchQuery();
+    ev.target.size = Math.max(8, ev.target.value.length + 1);
+    const seen = S.options.map((o) => o.trim().toLowerCase());
+    ed.querySelectorAll('.opt').forEach((c, i) => c.classList.toggle('dup', !!seen[i] && seen.indexOf(seen[i]) !== seen.lastIndexOf(seen[i])));
+  });
+  ed.addEventListener('keydown', (ev) => {
+    const chip = ev.target.closest('.opt'); if (!chip) return;
+    const i = Number(chip.dataset.i);
+    if (ev.key === 'Enter') { ev.preventDefault(); if (S.options.length < 12) { S.options.splice(i + 1, 0, ''); renderOptions(i + 1); } }
+    if (ev.key === 'Backspace' && !ev.target.value && S.options.length > 2) { ev.preventDefault(); S.options.splice(i, 1); renderOptions(Math.max(0, i - 1)); }
+  });
+  ed.addEventListener('click', (ev) => {
+    if (ev.target.closest('.opt-add')) { S.options.push(''); renderOptions(S.options.length - 1); return; }
+    const x = ev.target.closest('.opt-x'); if (!x) return;
+    S.options.splice(Number(x.closest('.opt').dataset.i), 1); renderOptions();
+  });
+}
+
+// "More context" starts folded like every fold; its summary says how many fields have content.
+const MORE = ['known', 'assumed', 'reversibility', 'deadline', 'exportTo'];
+function setupMoreContext() {
+  const count = () => MORE.filter((id) => $(id).value.trim()).length;
+  const show = () => { const n = count(); $('more-filled').textContent = n ? `· ${n} filled` : ''; };
+  show();
+  for (const id of MORE) $(id).addEventListener('input', show);
+  wireOptions();
+}
+
+// Replacing a card must keep keyboard users on the same control, including effort pips.
+function rememberFocus(root) {
+  const active = document.activeElement;
+  if (!root.contains(active)) return () => {};
+  const index = active.closest('.seat')?.dataset.i;
+  const control = ['vendor', 'model-pick', 'lens', 'mood', 'mood-text', 'model', 'account', 'endpoint', 'keyenv', 'remove'].find((c) => active.classList.contains(c));
+  const selector = active.id ? `#${CSS.escape(active.id)}` : active.matches('.pip') ? `.pip[data-level="${CSS.escape(active.dataset.level)}"]` : control ? `.${control}` : null;
+  return () => {
+    if (!selector || active.isConnected) return;
+    const row = index === undefined ? root : root.querySelectorAll('.seat')[Math.min(Number(index), S.draft.length - 1)];
+    row?.querySelector(selector)?.focus({ preventScroll: true });
+  };
+}
+function renderSeats() {
+  helpNotes.close();
+  const restoreFocus = rememberFocus($('seats'));
+  $('seats').innerHTML = S.draft.map(seatRow).join('');
+  requestPreflight();
+  renderProjection();
+  restoreFocus();
+}
+
+function onSeatEdit(ev) {
+  const row = ev.target.closest('.seat'); if (!row) return;
+  clearSetupValidation();
+  S.initialDraft = null;
+  const s = S.draft[Number(row.dataset.i)];
+  if (ev.target.classList.contains('model-pick')) {
+    if (ev.type !== 'change') return;
+    const v = ev.target.value;
+    s.customModel = v === '__other';
+    if (s.customModel) { s.model = ''; renderSeats(); $('seats').querySelectorAll('.seat')[S.draft.indexOf(s)]?.querySelector('.model')?.focus(); return; }
+    Object.assign(s, pickedModel(s.vendor, v, s.effort));
+    renderSeats(); renderProjection(); return;
+  }
+  const vendorBefore = s.vendor;
+  s.vendor = row.querySelector('.vendor').value;
+  s.lens = row.querySelector('.lens').value;
+  s.mood = row.querySelector('.mood').value;
+  s.moodText = row.querySelector('.mood-text').value;
+  s.model = row.querySelector('.model').value;
+  s.effort = row.querySelector('.effort').value;
+  s.account = row.querySelector('.account')?.value ?? ''; // an endpoint card has no login profile
+  if (row.querySelector('.endpoint')) {
+    s.endpoint = row.querySelector('.endpoint').value;
+    s.keyEnv = row.querySelector('.keyenv').value;
+    // a preset URL prefills the key variable's usual NAME, once, never a key
+    const pre = ev.type === 'change' && ev.target.classList.contains('endpoint') && ENDPOINT_PRESETS.find((e) => e.url === s.endpoint.trim());
+    if (pre?.keyEnv && !s.keyEnv.trim()) s.keyEnv = pre.keyEnv;
+  }
+  if (s.vendor !== vendorBefore) { s.customModel = false; s.model = ''; s.effort = ''; lockHidden(s); renderSeats(); return; } // the catalogue changed
+  if (ev.type === 'change' && (ev.target.classList.contains('mood-text') || ev.target.classList.contains('mood'))) lockHidden(s);
+  if (ev.type === 'change' && ev.target.classList.contains('mood-text')) { renderSeats(); renderProjection(); return; }
+  // the avatar follows the mood, the lamp the login profile or the endpoint: redraw the cards (not while typing)
+  if (['account', 'endpoint', 'keyenv'].some((c) => ev.target.classList.contains(c))) requestPreflight();
+  if (ev.type === 'change' && ['mood', 'account', 'endpoint', 'keyenv'].some((c) => ev.target.classList.contains(c))) { renderSeats(); if (s.mood === 'custom') $('seats').querySelectorAll('.seat')[S.draft.indexOf(s)]?.querySelector('.mood-text')?.focus(); return; }
+  row.querySelector('.mood-text').hidden = s.mood !== 'custom';
+  if (ev.target.classList.contains('model')) {
+    // a typed id: drop a level that model does not take, and redraw its pips
+    if (s.vendor !== 'agy' && s.effort && !modelEfforts(s.vendor, s.model, VENDOR_META[s.vendor]?.catalogue?.efforts || []).includes(s.effort)) { s.effort = ''; row.querySelector('.effort').value = ''; }
+    const pips = row.querySelector('.pips'); if (pips) pips.innerHTML = pipsHtml(s.vendor, s.effort, s.model);
+    updateLamps(); // agy: the lamp follows the model's quota group
+  }
+  renderProjection();
+}
+
+function draftSeats() {
+  return S.draft.map((s, i) => ({
+    vendor: s.vendor, lens: s.lens.trim(), colour: vendorColour(s.vendor),
+    mood: s.mood === 'custom' ? { preset: 'custom', text: s.moodText.trim() } : { preset: s.mood },
+    model: s.model.trim() || undefined, effort: s.effort || undefined, account: seatAccount(s) || undefined,
+    ...(isApi(s.vendor) ? { endpoint: (s.endpoint || '').trim(), keyEnv: (s.keyEnv || '').trim() || undefined } : {}),
+  }));
+}
+// The chairman as the server takes it (normaliseChairman): an endpoint chairman carries its URL,
+// key variable name and host-derived account, like a seat.
+function draftChairman() {
+  const vendor = $('chairman').value;
+  return { vendor, model: $('chairman-model').value.trim() || undefined, effort: $('chairman-effort').value || undefined, account: chairAccount() || undefined,
+    ...(isApi(vendor) ? { endpoint: $('chairman-endpoint').value.trim(), keyEnv: $('chairman-keyenv').value.trim() || undefined } : {}) };
+}
+
+const k = (n) => (n >= 1000 ? `${(n / 1000).toFixed(n >= 100000 ? 0 : 1)}k` : String(Math.round(n)));
+const pct = (x) => `${(x * 100).toFixed(x * 100 < 10 ? 1 : 0)}%`;
+const level = (x) => (x >= 0.9 ? 'danger' : x >= 0.7 ? 'warn' : '');
+const width = (x) => Math.max(0, Math.min(100, x * 100)).toFixed(1);
+
+// The measured draw of one window per 100k tokens: a short form for the readout and the full
+// sentence (every model key that has one) for its title.
+function rateFor(vendor, label) {
+  const keys = Object.keys(S.calib).filter((k2) => k2 === vendor || k2.startsWith(`${vendor}:`));
+  const long = [], short = [];
+  for (const key of keys) {
+    const x = S.calib[key][label]; if (!x || !(x.samples > 0 || x.ceilPerToken)) continue;
+    const who = key === vendor ? '' : `, ${key.split(':')[1]}`;
+    if (x.samples > 0) { long.push(`${label}: ${pct(x.pctPerToken * 100000)} per 100k tokens (${x.samples} measured move${x.samples === 1 ? '' : 's'}${who})`); if (key === vendor || !short.length) short[0] = `${pct(x.pctPerToken * 100000)}/100k`; }
+    else { long.push(`${label}: no movement seen over ${k(x.pending)} tokens yet${who}`); if (!short.length) short[0] = 'no move seen'; }
+  }
+  return { short: short[0] || '', long: long.join('\n') };
+}
+
+// Which window to show first, given each window's used share (0..1), its reset (epoch seconds
+// or null) and, on the setup screen, this debate's projected draw `adds` (0..1, else null).
+// A display order only: every window stays visible at every width. Returns an index.
+function leadWindow(windows) {
+  const now = Date.now() / 1000;
+  const horizon = (Number($('wall').value) || 30) * 60; // the debate's wall clock
+  const score = (w) => {
+    const after = w.used + (w.adds || 0);
+    if (after >= 1) return 2 + after; // this debate would not finish inside it
+    if (after >= 0.9) return 1 + after; // nearly spent: first, whatever its reset
+    // a window that resets before the debate could end frees itself, so it counts for half
+    return w.resetsAt != null && w.resetsAt - now < horizon ? after / 2 : after;
+  };
+  return windows.reduce((best, w, i) => (score(w) > score(windows[best]) ? i : best), 0);
+}
+
+// One limit window: figure, window name, a track with the used share and the projected draw,
+// and the reset beneath (signature-design "Window readout").
+function readout(vendor, w, { lead = false, adds = null, upper = false } = {}) {
+  const after = w.used + (adds || 0);
+  const rate = rateFor(vendor, w.label);
+  const sub = [
+    w.resetsAt ? `resets ${untilText(w.resetsAt * 1000).replace(/^in /, '')}` : '',
+    adds != null ? (upper ? 'no move seen yet' : `+${pct(adds)} this debate`) : rate.short,
+  ].filter(Boolean).join(' · ');
+  return `<div class="readout ${lead ? 'lead' : ''} ${level(after) ? `lvl-${level(after)}` : ''}" title="${esc(rate.long)}">
+    <div class="readout-fig"><b>${pct(w.used)}</b><span>${esc(w.label)} used</span></div>
+    <div class="track"><span class="used" style="width: ${width(w.used)}%"></span>${adds ? `<span class="adds" style="width: ${width(Math.min(adds, 1 - w.used))}%"></span>` : ''}</div>
+    <div class="readout-sub">${esc(sub)}</div>
+  </div>`;
+}
+
+// Lead window first; the rest keep their order.
+function readouts(vendor, windows) {
+  const i = windows.length > 1 ? leadWindow(windows) : 0;
+  const lead = Number.isInteger(i) && i >= 0 && i < windows.length ? i : 0;
+  const order = [lead, ...windows.map((_, i) => i).filter((i) => i !== lead)];
+  return order.map((i) => readout(vendor, windows[i], { lead: i === lead, adds: windows[i].adds ?? null, upper: windows[i].upper })).join('');
+}
+
+// key: a vendor or a pool key (seats.poolKey); a named profile shows as "Codex (work)"
+const seatPool = (s) => poolKey(s.vendor, s.account, !!VENDOR_META[s.vendor]?.profiles);
+// Out for this debate (pool-down events): the seat's whole login, or the limit group its model
+// draws on (agy), told the way the server tells it (models.js quotaGroup on the quota read).
+const seatDown = (s) => Object.values(S.down).find((x) => x.vendor === s.vendor && (x.account || '') === (s.account || '')
+  && (!x.group || x.group === quotaGroup(S.quota[seatPool(s)]?.groups, s.model))) || null;
+const poolId = (key) => { const vendor = poolVendor(key), account = poolAccount(key); return `<div class="pool-id"><b>${esc(VENDOR_LABEL[vendor] || vendor)}${account ? ` (${esc(account)})` : ''}</b><span title="${esc(VENDOR_META[vendor]?.pool || '')}">${esc(VENDOR_META[vendor]?.pool || '')}</span></div>`; };
+const usageLink = (key) => { const m = VENDOR_META[poolVendor(key)]; return m?.usageUrl ? `<a href="${esc(m.usageUrl)}" target="_blank" rel="noopener">usage page &#8599;</a>` : ''; };
+
+// One block per vendor pool: live windows, the projected draw for this table stacked per seat,
+// and the measured per-round share where a calibration exists.
+function renderProjection() {
+  const seats = draftSeats().map((s, i) => ({ ...s, id: `seat-${i}` }));
+  const chairman = draftChairman();
+  const p = project({ seats, chairman, critiqueRounds: Number($('critique-rounds').value) || 0, baselines: BASELINES, memory: $('memory').value, research: searcherOn() ? draftSearcher() : null });
+  const researcher = draftSearcher();
+  const label = (id) => (id === 'chairman' ? 'chairman' : id === 'research' ? 'searcher' : `${seats[Number(id.slice(5))]?.lens || id}`);
+  const colourOf = (id) => (id === 'chairman' ? vendorColour(chairman.vendor) : id === 'research' ? vendorColour(researcher.vendor) : seats[Number(id.slice(5))]?.colour || 'ink');
+  $('projection').innerHTML = Object.values(p.byVendor).map((v) => {
+    // the vendor's seats all on one account: that account's pool; mixed: the default one
+    const seatOf = (id) => (id === 'chairman' ? chairman : id === 'research' ? researcher : seats[Number(id.slice(5))]);
+    const keys = new Set(v.seats.map((id) => seatPool(seatOf(id))));
+    const pool = keys.size === 1 ? [...keys][0] : v.vendor;
+    const q = S.quota[pool];
+    const pw = projectedWindows(S.calib, pool, v.seats.map((id) => p.bySeat[id])) || [];
+    // Live windows carry this debate's projected draw; without a live figure the projection is
+    // all there is, so it stays a sentence. A quota in groups (agy) shows the seated models' groups.
+    const windows = q ? quotaWindows(q, v.seats.map((id) => seatOf(id)?.model || '')).map((w) => { const x = pw.find((y) => y.label === w.label); return { ...w, adds: x ? x.pct : null, upper: !!x?.upperBound }; }) : [];
+    const projected = q ? '' : pw.length ? pw.map((w) => (w.upperBound
+      ? `No movement of the ${esc(w.label)} window seen over ${k(w.pending)} tokens yet.`
+      : `About +${pct(w.pct)} of the ${esc(w.label)} window (${w.samples} measured move${w.samples === 1 ? '' : 's'}).`)).join(' ')
+      : 'Window share is unmeasured until a debate runs.';
+    const cap = S.budget[v.vendor];
+    // Seats of one vendor share its colour, so each segment of the bar gets its own shade and the
+    // chairman a hatch; the legend beside each seat uses the same fill, so the split reads.
+    const fill = (id, i) => (id === 'chairman' ? 'chair' : `shade-${Math.min(i, 3)}`);
+    const segments = v.seats.filter((id) => id !== 'chairman');
+    const order = [...segments, ...v.seats.filter((id) => id === 'chairman')];
+    return `<div class="pool">
+      <div class="pool-top">${poolId(pool)}<div class="pool-total"><b>≈ ${k(v.total)}</b><span>tokens${v.cost != null ? ` · ≈ $${v.cost.toFixed(2)}` : ''}</span></div></div>
+      <div class="bar" aria-label="Projected share of the pool per seat">${order.map((id) => `<span class="${fill(id, segments.indexOf(id))}" style="--seat: var(--seat-${colourOf(id)}); width: ${(100 * p.bySeat[id].weighted / (v.weighted || 1)).toFixed(1)}%" title="${esc(label(id))}"></span>`).join('')}</div>
+      <div class="pool-seats">${order.map((id) => {
+        const row = p.bySeat[id];
+        return `<span class="chip ${fill(id, segments.indexOf(id))}" style="--seat: var(--seat-${colourOf(id)})" title="${esc(row.calls)} calls${row.model ? ', ' + esc(row.model) : ''}${row.weight !== 1 ? `, model weight ×${row.weight}` : ''}"><span>${esc(label(id))}</span><b>${k(row.total)}</b><span>${row.cost != null ? `$${row.cost.toFixed(2)}` : ''}</span></span>`;
+      }).join('')}</div>
+      ${v.weighted !== v.total ? `<p class="pool-note">≈ ${k(v.weighted)} pool units after model weight.</p>` : ''}
+      <div class="pool-window-section">${windows.length ? `<div class="readouts">${readouts(pool, windows)}</div>` : `<p class="pool-note">${projected}</p>${poolEntry(v.vendor, v.weighted)}`}</div>
+      <div class="pool-cap" data-vendor="${esc(v.vendor)}"><label for="cap-${esc(v.vendor)}" title="Projected before each call, with the calls in flight and the verdict reserved. The vendor does not enforce it.">Cap</label><input id="cap-${esc(v.vendor)}" name="tokens" type="number" min="0" step="1000" placeholder="tokens" value="${cap?.tokens ?? ''}" aria-label="Token cap for ${esc(VENDOR_LABEL[v.vendor] || v.vendor)}">${v.cost != null || cap?.usd > 0 ? `<input name="usd" type="number" min="0" step="0.05" placeholder="$" value="${cap?.usd ?? ''}" aria-label="Dollar cap for ${esc(VENDOR_LABEL[v.vendor] || v.vendor)}">` : ''}${cap?.tokens > 0 && v.total > cap.tokens ? '<span class="warn">the projection is over this cap</span>' : ''}${usageLink(v.vendor)}</div>
+      ${cap?.usd > 0 && v.cost == null ? '<p class="pool-note warn" data-dollar-warning>No dollar estimate is available. This dollar cap blocks calls; clear it to proceed with a token cap instead.</p>' : ''}
+    </div>`;
+  }).join('') || '<span class="muted">Seat at least one instance.</span>';
+  $('projection-summary').textContent = Object.values(p.byVendor).map((v) => `${VENDOR_LABEL[v.vendor] || v.vendor} ≈ ${k(v.total)}`).join(' · ');
+  const vs = Object.values(p.byVendor);
+  const rounds = Number($('critique-rounds').value) || 0;
+  const priced = vs.filter((v) => v.cost != null);
+  $('start-summary').innerHTML = seats.length ? `<b>${seats.length} seats</b> · ${seats.length * (rounds + 1) + 1 + (searcherOn() ? 1 : 0)} planned calls before retries · ≈ ${k(vs.reduce((n, v) => n + v.total, 0))} tokens${priced.length ? ` · ≈ $${priced.reduce((n, v) => n + v.cost, 0).toFixed(2)} for ${priced.map((v) => esc(VENDOR_LABEL[v.vendor] || v.vendor)).join(', ')}` : ''}` : '';
+}
+
+function clearSetupValidation() {
+  S.seatIssue = null;
+  $('setup-error').textContent = ''; $('seats-error').textContent = '';
+  for (const el of $('seats').querySelectorAll('[aria-invalid]')) el.removeAttribute('aria-invalid');
+  for (const el of $('seats').querySelectorAll('.seat-invalid')) el.classList.remove('seat-invalid');
+  for (const el of $('seats').querySelectorAll('.seat-field-error')) { el.textContent = ''; el.hidden = true; }
+}
+
+function showSetupError(error) {
+  $('setup-error').textContent = error.message;
+  if (!['lens', 'moodText'].includes(error.field) || !Number.isInteger(error.seatIndex) || !S.draft[error.seatIndex]) return;
+  S.seatIssue = error; renderSeats();
+  const row = $('seats').querySelectorAll('.seat')[error.seatIndex];
+  const field = row.querySelector(error.field === 'lens' ? '.lens' : '.mood-text');
+  field.focus({ preventScroll: true });
+  row.scrollIntoView({ block: 'center', behavior: matchMedia('(prefers-reduced-motion: reduce)').matches ? 'instant' : 'smooth' });
+}
+
+async function start() {
+  if (S.startPending) return;
+  unlockSound(); // inside the click, so the opening cue may play once the board is up
+  clearSetupValidation();
+  const f = $('notes');
+  const modelInputs = [...$('seats').querySelectorAll('.model:not([hidden])'), $('chairman-model'), ...(searcherOn() ? [$('searcher-model')] : [])];
+  const emptyModel = modelInputs.find((input) => !input.hidden && !input.value.trim());
+  if (emptyModel) { $('setup-error').textContent = 'Enter a model ID, or choose a model from the list.'; emptyModel.focus(); return; }
+  syncResearchQuery();
+  if (searcherOn() && $('research-query').value.length > 2000) { $('setup-error').textContent = 'The search query exceeds 2,000 characters. Choose Custom query and shorten it.'; $('research-query-mode').focus(); return; }
+  const notes = {};
+  for (const el of f.querySelectorAll('input[name], textarea[name]')) notes[el.name] = el.value.trim();
+  notes.options = S.options.map((o) => o.trim()).filter(Boolean).join('\n');
+  const fieldNotes = { ...notes, options: notes.options.split('\n').filter(Boolean) };
+  const body = {
+    fieldNotes, seats: draftSeats(),
+    chairman: draftChairman(),
+    options: { critiqueRounds: Number($('critique-rounds').value), autoContinueMs: Number($('auto').value) * 1000, questionWaitMs: Number($('question-wait').value) * 1000, wallClockMs: Number($('wall').value) * 60000, memory: $('memory').value, unattended: $('unattended').checked, allowLimitedIsolation: isolationAccepted(), acknowledgeTermsRisk: termsAccepted(), budget: budgetBody(),
+      ...(searcherOn() ? { research: { vendor: $('searcher-vendor').value, query: $('research-query').value.trim(), maxSearches: Number($('research-searches').value), timeoutMs: Number($('research-time').value) * 1000,
+        model: $('searcher-model').value.trim(), effort: $('searcher-effort').value, account: searcherAccount() } } : {}) },
+  };
+  try {
+    localStorage.setItem('roundtable.notes', JSON.stringify(notes));
+    localStorage.setItem('roundtable.seats', JSON.stringify(S.draft.map((s) => ({ ...s, keyEnv: keyEnvName(s.keyEnv) }))));
+    localStorage.setItem('roundtable.budget', JSON.stringify(S.budget));
+    localStorage.setItem('roundtable.settings', JSON.stringify({ options: body.options, researchQueryMode: $('research-query-mode').value, chairman: {
+      vendor: $('chairman').value, model: $('chairman-model').value, effort: $('chairman-effort').value,
+      account: $('chairman-account').value, endpoint: $('chairman-endpoint').value, keyEnv: keyEnvName($('chairman-keyenv').value),
+    } }));
+  } catch {}
+  const issue = seatSetupIssue(S.draft);
+  if (issue) {
+    const id = clientDiagnostics.report('browser-validation', 'create', { field: issue.field, seatIndex: issue.seatIndex });
+    showSetupError({ ...issue, message: issue.message + errorReference({ id }) });
+    return;
+  }
+  // A card on a vendor whose terms notice is not acknowledged: ask now, rather than send a table
+  // the server would refuse. The person opens the table again once they have answered.
+  const unacknowledged = termsPending();
+  if (unacknowledged.length) { openTerms(unacknowledged[0]); return; }
+  // Confirm a known unavailable provider only after the form itself is valid.
+  const red = [...S.draft.map((s) => ({ name: `${VENDOR_LABEL[s.vendor]} (${s.lens})`, l: poolLamp(s.vendor, seatAccount(s), s.model) })),
+    { name: `the chairman (${VENDOR_LABEL[$('chairman').value]})`, l: poolLamp($('chairman').value, chairAccount(), $('chairman-model').value.trim()) },
+    ...(searcherOn() ? [{ name: `the searcher (${VENDOR_LABEL[$('searcher-vendor').value]})`, l: poolLamp($('searcher-vendor').value, searcherAccount(), $('searcher-model').value.trim()) }] : [])].filter((x) => x.l.cls === 'danger');
+  const sig = red.map((x) => `${x.name}:${x.l.note}`).join('|');
+  if (red.length && S.startConfirm !== sig) {
+    S.startConfirm = sig;
+    showSetupError({ message: `${red.map((x) => `${x.name}: ${x.l.note}`).join('; ')}. Those calls will fail.` });
+    $('start').textContent = 'Open anyway';
+    return;
+  }
+  const revision = viewRevision;
+  S.startPending = true; updateLamps();
+  try {
+    const out = await requestJson('/api/debates', body);
+    if (revision === viewRevision) { openingSlug = out.slug; location.hash = out.slug; } // route() opens the board
+  } catch (e) {
+    showSetupError(e);
+    loadRecent();
+  } finally { S.startPending = false; updateLamps(); }
+}
+
+// Only vendors with a positive cap are sent; an empty field is no cap.
+function budgetBody() {
+  const out = {};
+  for (const [v, b] of Object.entries(S.budget)) {
+    const cap = {};
+    if (b?.tokens > 0) cap.tokens = b.tokens;
+    if (b?.usd > 0) cap.usd = b.usd;
+    if (Object.keys(cap).length) out[v] = cap;
+  }
+  return out;
+}
+
+// ---------- board ----------
+// The hash decides the screen: '#<slug>' is that debate's board, no hash is the setup screen with
+// the list of debates. Back and forward work, and a board link can be shared or bookmarked.
+let live = null; // the open board's { es, timer }
+let viewRevision = 0;
+function closeBoard() { ceremony.cancel(); if (live) { live.es.close(); clearInterval(live.timer); live = null; } }
+function route() {
+  viewRevision++;
+  closeBoard();
+  const slug = decodeURIComponent(location.hash.slice(1));
+  if (/^[a-z0-9-]+$/.test(slug)) openBoard(slug); else showSetup();
+}
+function showSetup() {
+  S.slug = null; resetBoard({ clearDrafts: true });
+  $('setup').hidden = false; $('board').hidden = true; $('humanbar').hidden = true; $('nav-debates').hidden = true;
+  $('sys').className = 'status ok'; $('sys').textContent = 'idle';
+  for (const id of ['st-round', 'st-seats', 'st-elapsed']) $(id).textContent = '';
+  document.title = 'Roundtable';
+  loadRecent();
+}
+
+// The debates on disk, newest first: status, the pick, size, and a link to each board.
+const STATE_CLASS = { running: 'warn', interrupted: 'warn', accepted: 'ok', recommended: 'info', 'no verdict': 'danger', corrupt: 'danger' };
+const STATE_LABEL = { running: 'live', interrupted: 'interrupted', accepted: 'accepted', recommended: 'recommended', split: 'split', stopped: 'stopped', 'no verdict': 'no verdict', corrupt: 'needs repair' };
+const deletableHistory = (entry) => ['finished', 'interrupted'].includes(entry.state);
+let recentRevision = 0;
+let historyEntries = [], historySelection = null, historyBusy = false;
+async function loadRecent() {
+  const revision = ++recentRevision;
+  let list;
+  try { list = (await requestJson('/api/debates')).debates || []; }
+  catch (e) {
+    if (revision !== recentRevision) return;
+    $('recent-count').textContent = 'unavailable';
+    historyEntries = []; $('clear-history').disabled = true; $('recent-foot').hidden = true;
+    $('recent-list').innerHTML = `<div class="empty"><span role="alert">Could not load history. ${esc(e.message)}</span><button class="btn btn-small" id="retry-recent" type="button">Retry history</button></div>`;
+    return;
+  }
+  if (revision !== recentRevision) return;
+  historyEntries = list;
+  $('clear-history').disabled = historyBusy || !list.some(deletableHistory);
+  $('recent-count').textContent = list.length ? `${list.length} on this machine` : '';
+  $('recent-foot').hidden = true;
+  if (!list.length) {
+    $('recent-list').innerHTML = '<div class="empty"><span><span class="prompt">&gt;</span> no debates yet<br>&nbsp;&nbsp;write the field notes below and open the table_</span></div>';
+    return;
+  }
+  const row = (d) => {
+    // the human's choice once accepted, otherwise the recommendation when there is a real one
+    const pick = d.status === 'accepted' ? d.accepted : ['no consensus', 'no pick', 'no verdict'].includes(d.recommended) ? '' : d.recommended;
+    const cost = d.cost != null ? ` · $${d.cost.toFixed(2)}${d.costPartial ? '+' : ''}` : '';
+    const tag = d.state === 'corrupt' ? 'div' : 'a';
+    const deletable = deletableHistory(d);
+    return `<div class="history-row"><${tag} class="debate-row" ${tag === 'a' ? `href="#${esc(d.slug)}"` : ''} title="${esc(d.decision)}">
+      <span class="data">${esc(d.date)}</span>
+      <span class="debate-title">${esc(d.decision)}</span>
+      <span class="status ${STATE_CLASS[d.status] || 'muted'}">${esc(STATE_LABEL[d.status] || d.status)}</span>
+      <span class="debate-pick">${esc(pick || '')}</span>
+      <span class="data">${d.state === 'corrupt' ? 'unavailable' : `${d.rounds} rd · ${d.tokens == null ? 'tokens unknown' : `${k(d.tokens)}${d.tokensPartial ? '+' : ''}`}${cost}`}</span>
+      ${d.warning ? `<span class="debate-warning">${esc(d.warning)}</span>` : ''}
+    </${tag}><button class="text-btn history-delete" type="button" data-delete="${esc(d.slug)}" aria-label="Delete ${esc(d.decision)}" ${historyBusy || !deletable ? 'disabled' : ''} title="${deletable ? 'Delete this saved session' : d.state === 'running' ? 'Stop this session before deleting it' : 'Repair this record before deleting it to preserve usage statistics'}">Delete</button></div>`;
+  };
+  const shown = S.showAllDebates ? list : list.slice(0, 5);
+  $('recent-list').innerHTML = shown.map(row).join('');
+  // the list's foot: Show all on the left, Clear on the right, both quiet text actions
+  $('debates-more-slot').innerHTML = list.length > 5 ? `<button class="text-btn" id="debates-more" type="button">${S.showAllDebates ? 'Show the latest 5' : `Show all ${list.length}`}</button>` : '';
+  $('recent-foot').hidden = false;
+}
+
+function confirmHistoryDeletion(id = null) {
+  if (historyBusy) return;
+  const selected = historyEntries.filter((d) => deletableHistory(d) && (!id || d.slug === id)).slice(0, 1000);
+  if (!selected.length) return;
+  historySelection = { ids: selected.map((d) => d.slug), bulk: !id };
+  $('delete-history-title').textContent = id ? 'Delete session?' : `Clear ${selected.length} session${selected.length === 1 ? '' : 's'}?`;
+  $('delete-history-detail').textContent = id ? selected[0].decision : 'Finished and interrupted sessions will be removed. Running sessions are kept.';
+  $('delete-history-error').hidden = true;
+  $('delete-history-confirm').textContent = id ? 'Delete session' : 'Clear';
+  $('delete-history').showModal();
+}
+$('clear-history').addEventListener('click', (ev) => { ev.preventDefault(); confirmHistoryDeletion(); });
+$('delete-history').addEventListener('cancel', (event) => { if (historyBusy) event.preventDefault(); });
+$('delete-history-confirm').addEventListener('click', async () => {
+  if (!historySelection || historyBusy) return;
+  const { ids, bulk } = historySelection;
+  historyBusy = true; $('delete-history-confirm').disabled = $('delete-history-cancel').disabled = true;
+  $('delete-history-error').hidden = true;
+  try {
+    await requestJson(bulk ? '/api/debates/clear' : `/api/debates/${ids[0]}/delete`, bulk ? { ids } : {});
+    $('delete-history').close(); historySelection = null;
+  } catch (error) {
+    $('delete-history-error').textContent = error.message; $('delete-history-error').hidden = false;
+  } finally {
+    historyBusy = false; $('delete-history-confirm').disabled = $('delete-history-cancel').disabled = false;
+    await loadRecent();
+  }
+});
+
+function openBoard(slug) {
+  resetBoard({ clearDrafts: true });
+  S.slug = slug;
+  $('setup').hidden = true; $('board').hidden = false; $('humanbar').hidden = false; $('nav-debates').hidden = false;
+  // EventSource reconnects by itself and sends Last-Event-ID, so a dropped connection costs
+  // nothing. After a server restart the stream begins again with `started`, which resets the
+  // board; a slug with no transcript keeps retrying and says so.
+  const es = new EventSource(`/api/debates/${slug}/events`);
+  es.onmessage = (m) => {
+    const event = JSON.parse(m.data);
+    if (event.type === 'deleted') { closeBoard(); location.hash = ''; return; }
+    S.connected = true; handle(event);
+  };
+  es.onerror = () => { if (S.connected !== false) clientDiagnostics.report('browser-stream', 'events'); S.connected = false; renderGate(); renderBanners(); };
+  es.onopen = () => { S.connected = true; void clientDiagnostics.flush(); renderGate(); renderBanners(); };
+  live = { es, timer: setInterval(tick, 1000) };
+  render(); // clear what the last board showed, before this one's first event (or a 404)
+  if (openingSlug === slug) ceremony.play('open');
+  openingSlug = null;
+}
+
+function resetBoard({ clearDrafts = false } = {}) {
+  replyReveals.clear();
+  Object.assign(S, { seats: [], fieldNotes: null, rows: [], rounds: [], opened: new Set(), roundOpen: {}, openDetails: new Set(), humanNotes: [], initialNotes: [], gate: null, deadline: null, held: false, verdict: null, status: 'idle', startedAt: null, stopReason: null, pending: new Set(), chairman: null, configuredChairman: null, interrupted: null, stopQueued: false, finishQueued: false, error: null, conn: {}, positions: [], accepted: null, synthesis: null, down: {},
+    budgetStop: null, exported: null, exportError: null, replayed: false, connected: null, chairmanFallback: null, transcriptWarning: null, unattended: false, research: null,
+    actionPending: null, actionError: null, holdPending: false, timedOut: {}, synthChoice: null, stopContext: null, reviewDeadline: null }); // hash routing reuses S: nothing from the last board
+  if (clearDrafts || !S.questionDrafts) S.questionDrafts = {};
+  cardMotion.clear(); // a fold still rolling up belongs to the board that is gone
+  if (clearDrafts) { $('question-inputs').replaceChildren(); delete $('question-inputs').dataset.signature; setUsageOpen(false); $('decision-actions').open = false; }
+  if (clearDrafts) {
+    $('human-msg').value = ''; $('accept-note').value = ''; $('export-status').textContent = '';
+    delete $('accept-option').dataset.applied;
+    S.acceptEdited = false; S.acceptNoteEdited = false;
+  }
+}
+
+function handle(e) {
+  if (!e.replayed && !e.failed && !e.skipped && ['reply', 'verdict'].includes(e.type)) replyReveals.set(replyKey(e), performance.now());
+  switch (e.type) {
+    case 'started': resetBoard(); S.seats = e.seats; S.fieldNotes = e.fieldNotes; S.unattended = !!e.options?.unattended; S.configuredChairman = e.chairman || null; S.reviewDeadline = e.deadlineAt; S.status = 'running'; S.startedAt = Date.now(); $('board-title').textContent = e.fieldNotes.decision; document.title = `${e.fieldNotes.decision} · Roundtable`; $('board-empty').hidden = false; break;
+    case 'resumed': S.status = 'running'; S.interrupted = null; S.reviewDeadline = e.deadlineAt; S.startedAt = Date.now(); S.pending.clear(); break;
+    case 'research': S.research = e; if (!e.replayed) S.status = e.status === 'running' ? 'researching' : 'running'; break;
+    case 'interrupted': S.status = 'interrupted'; S.interrupted = e; S.pending.clear(); break;
+    case 'round-start': S.rounds[e.round] = []; S.pending = new Set(S.seats.map((s) => s.index)); $('board-empty').hidden = true; break;
+    case 'seat-start': break;
+    case 'seat-state': S.conn[e.seat.id] = e.state; break;
+    case 'reprompt': S.pending.add(e.seat.index); break;
+    case 'reply': S.rows.push(e); S.rounds[e.round] = S.rounds[e.round] || []; S.rounds[e.round].push(e); S.pending.delete(e.seat.index); break;
+    case 'round-done': S.pending.clear(); if (e.positions) S.positions[e.round] = e.positions; break;
+    case 'gate':
+      S.gate = e; S.reviewDeadline = e.deadlineAt; S.deadline = null; S.held = false; S.status = 'waiting';
+      if (!e.replayed && e.questions.length) playCue('waiting'); // a real question, including in a background tab
+      break;
+    case 'gate-expired': S.stopContext = 'waiting'; S.gate = null; S.deadline = null; break;
+    case 'countdown': S.deadline = e.deadline; S.held = false; break;
+    case 'gate-timeout': S.timedOut[e.round] = e; break;
+    case 'held': S.held = true; S.deadline = null; break;
+    case 'gate-closed': S.gate = null; S.deadline = null; S.status = 'running'; break;
+    case 'stop-queued': S.stopQueued = true; S.finishQueued = false; break;
+    case 'finish-queued': S.finishQueued = true; break;
+    case 'human': (e.round === -1 ? S.initialNotes : (S.humanNotes[e.round] ??= [])).push(noteRecord(e)); break;
+    case 'quota': S.quota[e.vendor] = e.quota; break;
+    case 'calibration': S.calib[e.key || e.vendor] = e.windows; break;
+    case 'pool': S.pools[e.vendor] = e.pool; break;
+    case 'pool-down': S.down[e.key] = e; break;
+    case 'budget': S.budgetStop = e; break;
+    case 'stopped': S.stopReason = e.reason; S.stopContext = e.context || S.stopContext; S.gate = null; S.deadline = null; S.pending.clear(); S.status = 'verdict'; break;
+    case 'chairman-start': S.chairman = e.seat; S.finishQueued = false; break;
+    case 'chairman-fallback': S.chairmanFallback = e; break;
+    case 'attempt': S.rows.push(e); break;
+    case 'verdict': S.rows.push(e); S.verdict = e; break;
+    case 'done': S.status = 'done'; S.gate = null; S.deadline = null; S.pending.clear(); S.stopReason = e.reason || S.stopReason; S.replayed = !!e.replayed; S.synthesis = e.synthesis || (S.verdict ? (S.verdict.skipped ? 'skipped' : S.verdict.failed ? 'failed' : 'done') : 'missing'); break;
+    case 'synthesize': S.status = 'verdict'; S.verdict = null; S.stopQueued = false; S.finishQueued = false; break;
+    case 'accepted': S.accepted = e; break;
+    case 'exported': S.exported = e; S.exportError = null; break;
+    case 'export-failed': S.exportError = e.error + errorReference(e.diagnostic); break;
+    case 'transcript-warning': S.transcriptWarning = e; break;
+    case 'error':
+      S.status = e.recoverable ? e.recoveryFinished ? 'done' : 'interrupted' : 'error';
+      if (e.recoverable && !e.recoveryFinished) S.interrupted = { round: S.round };
+      S.gate = null; S.deadline = null; S.pending.clear(); S.error = e.message + errorReference(e.diagnostic);
+      if (e.fatal) { closeBoard(); $('board-title').textContent = 'Transcript needs repair'; document.title = 'Transcript needs repair · Roundtable'; }
+      break;
+  }
+  const cue = ceremonyOutcome(e);
+  if (cue) ceremony.play(cue);
+  render();
+}
+
+const esc = (s) => String(s ?? '').replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]));
+const list = (items) => (items && items.length ? `<ul>${items.map((i) => `<li>${esc(i)}</li>`).join('')}</ul>` : '<span class="muted">none</span>');
+const seatName = (seat) => seat.label || VENDOR_LABEL[seat.vendor] || seat.vendor;
+const seatMeta = (seat) => [seat.endpoint ? 'API' : 'CLI', seat.model, seat.effort].filter(Boolean).join(' · ');
+// What a folded card hides: everything under the seat and position (or a failed call's one line).
+const foldable = (html) => `<div class="reply-more"><div>${html}</div></div>`;
+
+// position: the seat's standing against the round's majority; provisional while the round is
+// still coming in (the majority so far), final from round-done.
+function card(r, position = null, provisional = false) {
+  const seat = r.seat;
+  const cancelled = cancellationReason(r, S.stopReason, S.rounds.length - 1);
+  const flags = [];
+  if (r.question) flags.push('<span class="status" title="This seat asked you a question">asked you</span>'); // visible on a folded card too
+  if (r.reprompted) flags.push('<span class="status warn">re-prompted</span>');
+  if (r.usedTools) flags.push(`<span class="status ${r.toolFail ? 'danger' : 'warn'}">used tools</span>`);
+  // a recovered stall, saved with the attempt (progress.reconnects): the reply is complete, the cost may not be
+  if (Number.isSafeInteger(r.progress?.reconnects) && r.progress.reconnects > 0) flags.push(`<span class="status warn" title="The provider connection went silent for the idle limit; the CLI reconnected ${r.progress.reconnects} time${r.progress.reconnects === 1 ? '' : 's'} and started the answer again. The interrupted attempt may have been charged without appearing in usage.">reconnected ×${r.progress.reconnects}</span>`);
+  if (r.failed) flags.push(`<span class="status ${cancelled ? 'warn' : 'danger'}">${cancelled ? 'cancelled' : r.timedOut ? 'call timed out' : 'no reply'}</span>`);
+  else if (!r.valid) flags.push('<span class="status warn">off contract</span>');
+  let body;
+  if (r.failed) {
+    const line = cancelled === 'human' ? 'Cancelled when you pressed Stop. Earlier replies are kept; this seat did not finish this round.'
+      : cancelled === 'finish' ? 'Discussion ended for the verdict. Earlier replies are kept; this seat did not finish this round.'
+      : cancelled === 'wall-clock' ? 'Cancelled because the review time limit expired. Earlier replies are kept.'
+      : (r.errorKind === 'policy' ? r.errors?.[0] || 'This seat is stopped by the provider tool policy.' : r.skipped ? `Skipped: ${VENDOR_LABEL[seat.vendor] || seat.vendor} is out for this debate.` :
+        (r.errorKind === 'budget' && r.errors?.[0] ? r.errors[0] : ERROR_LINE[r.errorKind] || 'The provider call failed. Check the details and save the error log.')) + errorReference(r.diagnostic);
+    body = `<p class="fail-line ${cancelled ? 'muted' : 'danger'}">${esc(line)}${r.resetsAt ? ` Resets ${esc(new Date(r.resetsAt).toLocaleString([], { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' }))}.` : ''}</p>${foldable(`<details class="fail-detail"><summary>Details</summary><pre>${esc(callDetails(r.errors, r.progress) + (cancelled ? errorReference(r.diagnostic) : ''))}</pre></details>`)}`;
+  }
+  else if (r.parsed.pass) body = '<span class="muted">Nothing new to add.</span>';
+  else if (!r.valid) body = foldable(`<pre>${esc(r.text)}</pre>`);
+  else {
+    const section = (title, items, tone) => `<section class="argument-section argument-${tone}"><h4>${title}</h4>${items.length ? `<ul>${items.map((text) => `<li>${argumentHtml(text, tone)}</li>`).join('')}</ul>` : '<span class="muted">None stated.</span>'}</section>`;
+    body = `<div class="seat-stance"><span class="label">Position</span><strong>${esc(optionLabel(r.stanceKey, S.fieldNotes?.options))}</strong></div>
+      ${foldable(`${r.parsed.agreeWith.length ? section('Agrees with', r.parsed.agreeWith, 'agree') : ''}
+      ${section('Disagrees with · why', r.parsed.disagree, 'disagree')}
+      ${section('New points', r.parsed.new, 'new')}
+      ${section('Assumptions', r.parsed.assumptions, 'assumptions')}
+      ${r.question ? `<details class="question"><summary>Question for you${S.gate?.round === r.round ? ' · answer above' : ''}</summary><p>${esc(r.question)}</p></details>` : ''}`)}`;
+  }
+  const meta = seatMeta(seat);
+  // the head's spoken name: its spans carry no separators, so a screen reader would run them together
+  const headLabel = [seatName(seat), seat.lens, ...flags.map((f) => f.replace(/<[^>]*>/g, ''))].join(', ');
+  // the dot is the live connection state in the current round, the recorded one in older rounds
+  const current = r.round === S.rounds.length - 1;
+  const conn = cancelled ? 'cancelled' : current ? (S.conn[seat.id] || r.state) : (r.state || (r.failed ? 'failed' : 'replied'));
+  return `<article class="card ${S.opened.has(replyKey(r)) ? '' : 'folded'}" data-key="${esc(replyKey(r))}" style="--seat: var(--seat-${esc(seat.colour)})" data-position="${esc(position || 'none')}" title="${esc(position ? POSITION_LABEL[position] + (provisional ? ' so far' : '') : '')}">
+    <div class="card-head" role="button" tabindex="0" aria-expanded="${S.opened.has(replyKey(r))}" aria-label="${esc(headLabel)}"><span class="vendor" title="${esc(meta)}">${esc(seatName(seat))}</span><span class="lens">${esc(seat.lens)}</span>${led(conn)}${seat.mood?.hidden ? `<span class="avatar card-avatar">${avatar(seat.mood.hidden, HIDDEN_MOODS.find((h) => h.art === seat.mood.hidden)?.sprite)}</span>` : seat.mood?.preset && seat.mood.preset !== 'grill' ? `<span class="muted" title="${esc(MOOD_HELP[seat.mood.preset] || '')}">${esc(seat.mood.preset)}</span>` : ''}<span class="flags">${flags.join('')}</span></div>
+    <div class="reply-text" data-reveal="${esc(replyKey(r))}">${body}</div>
+  </article>`;
+}
+
+function pendingCard(seat) {
+  return `<article class="card pending" style="--seat: var(--seat-${esc(seat.colour)})"><div class="card-head"><span class="vendor">${esc(seatName(seat))}</span><span class="lens">${esc(seat.lens)}</span>${led(S.conn[seat.id] || 'thinking')}</div></article>`;
+}
+
+// A round is one column per option, in option order, present from the first reply on and the
+// same in every round; a reply lands at the foot of its column and nothing else moves. Other
+// stances and failed calls get columns after those, only when there are any; seats still
+// thinking sit in a strip under the columns, so the strip shrinking moves nothing above it.
+function renderRound(i, replies, isCurrent) {
+  const options = S.fieldNotes?.options || [];
+  const groups = new Map(options.map((_, n) => [`opt-${n + 1}`, []]));
+  const keyOf = (r) => (r.failed ? (cancellationReason(r, S.stopReason, S.rounds.length - 1) ? 'Cancelled calls' : r.timedOut ? 'Calls that timed out' : 'No reply') : r.stanceKey || 'Unformatted reply');
+  for (const r of replies) { const k = keyOf(r); if (!groups.has(k)) groups.set(k, []); groups.get(k).push(r); }
+  const pendingSeats = isCurrent ? S.seats.filter((s) => S.pending.has(s.index) && !replies.some((r) => r.seat.index === s.index)) : [];
+  const final = S.positions[i] || null;
+  const pos = final || (isCurrent ? positions(replies) : {});
+  const tally = [...groups.entries()].filter(([, v]) => v.length).map(([k, v]) => `${optionLabel(k, options)} (${v.length})`).join(' · ') || (pendingSeats.length ? 'in progress' : '');
+  const groupHtml = [...groups.entries()].map(([k, v]) => `<section class="group ${v.length ? '' : 'empty'}">
+      <div class="group-title"><span>${esc(optionLabel(k, options))}</span><span class="count">${v.length ? `${v.length} seat${v.length > 1 ? 's' : ''}` : pendingSeats.length ? 'nobody yet' : 'nobody'}</span></div>
+      <div class="cards">${v.map((r) => card(r, pos[r.seat.id] || null, !final)).join('')}</div></section>`).join('');
+  const pendingHtml = pendingSeats.length ? `<section class="group thinking span"><div class="group-title"><span class="muted">thinking</span><span class="count">${pendingSeats.length} seat${pendingSeats.length > 1 ? 's' : ''}</span></div><div class="cards">${pendingSeats.map(pendingCard).join('')}</div></section>` : '';
+  // Unattended: once the round is in, say what the skipped pause left behind (counted from the
+  // replies themselves, so a review replayed from disk says it too).
+  const asked = replies.filter((r) => r.question).length;
+  const skipped = S.unattended && replies.length && !pendingSeats.length ? `<div class="human-note"><b>Unattended</b>${asked ? `${asked} question${asked > 1 ? 's' : ''} went unanswered.` : 'The pause was skipped.'}</div>` : '';
+  const timedOut = S.timedOut[i]?.unanswered ? '<div class="human-note"><b>Continued automatically</b>The answer window ended. Unanswered questions remain unknown.</div>' : '';
+  const note = skipped + timedOut + (S.humanNotes[i] || []).map((n) => `<div class="human-note"><b>${noteLabel(n)}</b>${esc(noteRecord(n).text)}</div>`).join('');
+  // Folded unless it is the round in progress: a finished review leads with its conclusion.
+  const live = isCurrent && !['done', 'error'].includes(S.status);
+  return `<details class="round" ${(S.roundOpen[i] ?? live) ? 'open' : ''} data-round="${i}">
+    <summary><span>${i === 0 ? 'Round 0 · blind' : `Round ${i}`}</span><span class="tally">${esc(tally)}</span></summary>
+    <div class="groups"><div class="columns">${groupHtml}</div>${pendingHtml}${note}</div>
+  </details>`;
+}
+
+// The strip: one pool row per vendor account (live windows, measured share per round, usage
+// link), its seats beneath it, then the current round and the debate total.
+function renderUsage() {
+  const u = rollup(S.rows);
+  const fmt = (n) => (n || 0).toLocaleString();
+  // A sum over calls of which some reported nothing carries a "+" (at least this much), the same
+  // mark the debates list uses; the counts are in its title. A figure nobody reported is a dash.
+  const plus = (cov, what) => (cov && cov.reported < cov.of ? `<span class="partial" title="${cov.reported} of ${cov.of} calls report ${what}">+</span>` : '');
+  const tokens = (n, x) => x.tokenCoverage?.reported === 0 ? '<span class="muted" title="No call reported token usage">unknown</span>'
+    : `${fmt(n)}${plus(x.tokenCoverage, 'token usage')}`;
+  const cost = (c, x) => (c == null ? '<span class="muted" title="This CLI does not report a cost">—</span>' : `$${c.toFixed(2)}${plus(x?.costCoverage, 'a cost')}`);
+  const secs = (ms) => `${Math.round((ms || 0) / 1000)}s`;
+  // last: the seat's input in the latest round it took part in (cache included), the figure that
+  // says whether rounds stay flat (stateless) or grow (resume)
+  const row = (name, x, cls = '', last = null, position = null) => `<tr class="${cls}" data-position="${esc(position || 'none')}"><td>${name}</td><td class="data num">${tokens(x.input, x)}</td><td class="data num">${tokens(x.cacheRead + x.cacheWrite, x)}</td><td class="data num">${tokens(x.output, x)}</td><td class="data num">${cost(x.cost, x)}</td><td class="data num">${secs(x.ms)}</td><td class="data num">${last ? `<span title="Round ${esc(last.round)}">${tokens(last.usage.input + last.usage.cacheRead + last.usage.cacheWrite, last.usage)}</span>` : ''}</td></tr>`;
+  const pools = [...new Set([...S.seats.map(seatPool), ...(S.chairman ? [seatPool(S.chairman)] : []), ...(u.bySeat.research ? [seatPool(u.bySeat.research.seat)] : [])])];
+  // the models this debate runs on a pool: a quota in groups (agy) shows only their groups
+  const seatedModels = (key) => [...S.seats, S.chairman || S.configuredChairman, u.bySeat.research?.seat].filter((s) => s && seatPool(s) === key).map((s) => s.model || '');
+  const rows = [];
+  for (const pool of pools) {
+    rows.push(`<tr class="pool-row"><td colspan="7">${poolLine(pool, seatedModels(pool))}</td></tr>`);
+    if (u.bySeat.research && seatPool(u.bySeat.research.seat) === pool) { const rs = u.bySeat.research.seat; rows.push(row(`<span class="seat-cell" style="--seat: var(--seat-${esc(vendorColour(rs.vendor))})"><span class="seat-dot"></span><span><span class="seat-lens">searcher</span><span class="seat-meta">${esc([VENDOR_LABEL[rs.vendor] || rs.vendor, seatMeta(rs)].filter(Boolean).join(' · '))}</span></span></span>`, u.bySeat.research.usage)); }
+    const seated = [...S.seats.filter((s) => seatPool(s) === pool), ...(S.chairman && seatPool(S.chairman) === pool ? [S.chairman] : [])];
+    for (const seat of seated) {
+      const x = u.bySeat[seat.id]?.usage;
+      const perRound = u.bySeatRound[seat.id] || {};
+      const lastRound = Object.keys(perRound).filter((k2) => k2 !== 'verdict').map(Number).sort((a, b) => b - a)[0];
+      const last = lastRound != null ? { round: lastRound, usage: perRound[String(lastRound)] } : null;
+      const isChair = seat.id === 'chairman';
+      const position = isChair ? null : S.positions[S.rounds.length - 1]?.[seat.id] || null;
+      // the lens reads first; who runs it and on what sits beneath in the data face
+      const name = `<span class="seat-cell" style="--seat: var(--seat-${esc(seat.colour)})"><span class="seat-dot"></span><span><span class="seat-lens">${esc(seat.lens)}${isChair ? '' : led(S.conn[seat.id] || 'idle')}</span><span class="seat-meta">${esc([seatName(seat), seatMeta(seat)].filter(Boolean).join(' · '))}</span></span></span>`;
+      const out = seatDown(seat);
+      rows.push(x ? row(name, x, '', last, position) : `<tr data-position="none"><td>${name}</td><td class="data ${out ? 'danger' : 'muted'}" colspan="6">${out ? `out: ${esc(ERROR_LINE[out.kind] || out.kind)} no tokens charged` : 'no call yet'}</td></tr>`);
+    }
+  }
+  const cur = S.rounds.length ? S.rounds.length - 1 : null;
+  if (cur != null && u.byRound[String(cur)]) rows.push(row(`Round ${cur}`, u.byRound[String(cur)], 'subtotal'));
+  rows.push(row('Debate total', u.total, 'total'));
+  $('usage').querySelector('tbody').innerHTML = rows.join('');
+  const keys = [...new Set([...S.seats, ...(S.chairman || S.configuredChairman ? [S.chairman || S.configuredChairman] : [])].map((seat) => poolKey(seat.vendor, seat.account, !!VENDOR_META[seat.vendor]?.profiles)))];
+  $('usage-summary').innerHTML = keys.map((key) => {
+    const q = S.quota[key];
+    const window = remainingWindow(q && { ...q, windows: quotaWindows(q, seatedModels(key)) });
+    const name = `${VENDOR_LABEL[poolVendor(key)] || poolVendor(key)}${poolAccount(key) ? ` · ${poolAccount(key)}` : ''}`;
+    const remaining = window && Math.floor(window.remaining);
+    const manual = S.pools[poolVendor(key)];
+    // One quiet chip per pool: name, a short track and the figure. The window and its age are
+    // the tooltip; Usage details has the rest.
+    return `<span class="quota-chip" title="${esc(window ? `${window.label} · reported ${agoText(window.at)}` : 'Open usage details for available figures')}"><b>${esc(name)}</b>${window
+      ? `<span class="quota-track ${remaining < 10 ? 'danger' : remaining < 25 ? 'warn' : 'ok'}" role="meter" aria-label="${esc(name)} quota remaining" aria-valuemin="0" aria-valuemax="100" aria-valuenow="${remaining}"><span style="width:${remaining}%"></span></span><span>${remaining}%</span>`
+      : `<span>${manual ? `${esc(manual.remaining.toLocaleString())} ${esc(manual.unit)} left` : 'not reported'}</span>`}</span>`;
+  }).join('');
+}
+
+// The pool row on the board: name, one readout per live window, then freshness and the usage link.
+// One line per pool in the usage table: who and on what plan, each live window as "used share
+// and window" with a short track, then the usage page. Resets and the read time are the title.
+// models: those seated on the pool, so a quota in groups (agy) shows the groups they draw on.
+function poolLine(key, models = []) {
+  const q = S.quota[key];
+  const pl = S.pools[poolVendor(key)];
+  const vendor = poolVendor(key), account = poolAccount(key);
+  const windows = quotaWindows(q, models);
+  const figure = windows.length
+    ? windows.map((w) => `<span class="pool-window ${level(w.used) ? level(w.used) : ''}" title="${esc([w.resetsAt ? `resets ${untilText(w.resetsAt * 1000)}` : '', `read ${agoText(q.at)}`].filter(Boolean).join(' · '))}"><span class="quota-track"><span style="width:${width(w.used)}%"></span></span>${pct(w.used)} of ${esc(w.label)} used</span>`).join('')
+    : pl ? `<span class="pool-window">${esc(pl.remaining.toLocaleString())} ${esc(pl.unit)} left · entered ${agoText(pl.at)}</span>`
+    : '<span class="pool-window muted">no live figure from this CLI</span>';
+  // AI credits (agy /credits): what takes over once a group's limits are used up
+  const credits = Number.isFinite(q?.credits?.remaining) ? `<span class="pool-window" title="${esc(`read ${agoText(q.credits.at)}`)}">${esc(q.credits.remaining.toLocaleString())} AI credits left</span>` : '';
+  return `<div class="pool-head"><span class="pool-name"><b>${esc(VENDOR_LABEL[vendor] || vendor)}${account ? ` (${esc(account)})` : ''}</b><span>${esc(VENDOR_META[vendor]?.pool || '')}</span></span><span class="pool-figures">${figure}${credits}</span>${usageLink(key)}</div>`;
+}
+
+function untilText(t) {
+  const s = Math.max(0, Math.round((t - Date.now()) / 1000));
+  if (s < 3600) return `in ${Math.ceil(s / 60)}m`;
+  if (s < 86400) return `in ${Math.floor(s / 3600)}h ${Math.round((s % 3600) / 60)}m`;
+  return `in ${Math.floor(s / 86400)}d ${Math.round((s % 86400) / 3600)}h`;
+}
+
+function agoText(t) {
+  const s = Math.max(0, Math.round((Date.now() - t) / 1000));
+  return s < 60 ? 'just now' : s < 3600 ? `${Math.floor(s / 60)}m ago` : `${Math.floor(s / 3600)}h ago`;
+}
+
+let shownVerdict = null, copyingResult = false;
+function renderVerdict() {
+  const v = S.verdict;
+  if (v !== shownVerdict) {
+    shownVerdict = v; copyingResult = false;
+    $('copy-result-status').textContent = '';
+    $('copy-result-text').hidden = true; $('copy-result-text').value = '';
+  }
+  $('copy-result').disabled = !v || !!v.failed || !!v.skipped || copyingResult;
+  // While the chairman writes, the panel shows the hand at work instead of staying hidden.
+  const writing = !v && (S.status === 'verdict' || S.finishQueued);
+  $('verdict').hidden = !v && !writing;
+  $('verdict').classList.toggle('is-writing', writing);
+  if (writing) {
+    const chair = S.chairman || S.configuredChairman;
+    if (!$('verdict-body').querySelector('.scribe')) $('verdict-body').innerHTML = `${scribeMarkup()}<p class="hint scribe-note">${esc(chair ? VENDOR_LABEL[chair.vendor] || chair.vendor : 'The chairman')} is writing the conclusion from ${S.rounds.length} round${S.rounds.length === 1 ? '' : 's'} of replies.</p>`;
+    startScribe($('verdict-body').querySelector('.scribe'));
+    return;
+  }
+  stopScribe();
+  if (!v) return;
+  if (v.skipped) { $('verdict-body').innerHTML = `<p class="wide">${esc(v.text)}</p><div class="verdict-meta">${S.rounds.length} rounds · stopped: ${esc(S.stopReason)} · debates/${esc(S.slug)}/</div>`; return; }
+  // A malformed or failed reply stays diagnostic; it cannot be copied as a completed result.
+  if (v.failed) { $('verdict-body').innerHTML = `<p class="wide danger">${esc(ERROR_LINE[v.errorKind] || 'The chairman could not write a verdict. Check the details and save the error log.')} After resolving the problem, write the verdict again from the bar below.${esc(errorReference(v.diagnostic))}</p><details class="wide"><summary>Details</summary><pre>${esc(callDetails(v.errors || [v.text], v.progress))}</pre></details>`; return; }
+  const view = verdictView(v.text, S.fieldNotes?.options);
+  const section = (title, items, cls = '') => items.length
+    ? `<section class="section ${cls}"><h3 class="label">${esc(title)}</h3>${items.length === 1 ? `<p>${esc(items[0])}</p>` : `<ul>${items.map((item) => `<li>${esc(item)}</li>`).join('')}</ul>`}</section>` : '';
+  const questionSection = (title, items, explanation, cls = '') => items.length
+    ? `<section class="section wide verdict-questions ${cls}"><h3 class="label">${esc(title)}</h3><p class="hint">${esc(explanation)}</p><ul>${items.map((item) => `<li>${esc(item)}</li>`).join('')}</ul></section>` : '';
+  // Count final eligible positions from replies, never from a model-generated tally.
+  const finals = Object.create(null);
+  for (const seat of S.seats) {
+    let k = null;
+    for (let i = S.rounds.length - 1; i >= 0; i--) {
+      const r = S.rounds[i]?.find((x) => x.seat.id === seat.id);
+      if (!r) continue;
+      if (r.failed || !r.valid) break;
+      if (r.stanceKey !== 'PASS') { k = r.stanceKey; break; }
+    }
+    const label = k ? optionLabel(k, S.fieldNotes?.options) : 'no eligible stance';
+    (finals[label] ??= []).push(seat.lens);
+  }
+  const positions = Object.entries(finals).map(([label, lenses]) => `<li><strong>${esc(label)}</strong> · ${lenses.length} ${lenses.length === 1 ? 'seat' : 'seats'}<span class="hint">${esc(lenses.join(', '))}</span></li>`).join('');
+  const detailsOpen = $('verdict-details')?.open;
+  $('verdict-body').innerHTML = view.parsed
+    ? `<section class="section wide verdict-answer"><h3 class="label">${view.questions.needed.length ? 'Answer · clarification needed' : 'Answer'}</h3>
+         ${verdictHeadline(view) ? `<p class="verdict-pick"><strong>${esc(verdictHeadline(view))}</strong></p>` : ''}<p>${esc(view.answer || 'No conclusion text was provided.')}</p></section>
+       ${view.reasons.length ? `<section class="section wide"><h3 class="label">Why</h3>${view.reasons.map((p) => `<p>${esc(p)}</p>`).join('')}</section>` : ''}
+       ${section('Main reservation', view.dissent)}${section('What could change this', view.reconsider)}
+       ${questionSection('Clarification needed from you', view.questions.needed, 'These answers could change the conclusion. The review is finished and will not continue automatically.', 'verdict-needed')}
+       ${questionSection('Questions for you', view.questions.unclassified, 'These questions remain unanswered. Their importance was not classified in this review; it will not continue automatically.')}
+       <details id="verdict-details" class="verdict-details wide" ${detailsOpen ? 'open' : ''}><summary>Discussion details</summary><div class="verdict-support">
+         ${questionSection('Further exploration', view.questions.optional, 'Optional follow-up for you; no answer is required to finish this review.')}
+         ${positions ? `<section class="section wide"><h3 class="label">Panel positions</h3><p class="hint">These are the seats’ final positions, not a confidence score. Agreement alone is not evidence.</p><ul class="verdict-positions">${positions}</ul></section>` : ''}
+         <div class="verdict-meta">chairman ${esc(VENDOR_LABEL[v.seat?.vendor] || v.seat?.vendor || 'unknown')}${v.seat && seatMeta(v.seat) ? ` (${esc(seatMeta(v.seat))})` : ''}${Number.isSafeInteger(v.progress?.reconnects) && v.progress.reconnects > 0 ? ` · reconnected ×${v.progress.reconnects}` : ''} · ${S.rounds.length} rounds · stopped: ${esc(S.stopReason)} · debates/${esc(S.slug)}/verdict.md</div>
+       </div></details>`
+    : `<pre class="wide">${esc(v.text)}</pre>`;
+}
+
+$('copy-result').addEventListener('click', async () => {
+  const v = S.verdict, revision = viewRevision;
+  if (!v || v.failed || v.skipped || copyingResult) return;
+  const text = verdictResultText(v.text, S.fieldNotes?.options, S.fieldNotes?.decision);
+  copyingResult = true; $('copy-result').disabled = true;
+  $('copy-result-status').textContent = 'Copying…'; $('copy-result-text').hidden = true;
+  try {
+    if (!navigator.clipboard?.writeText) throw new Error('Clipboard unavailable');
+    await navigator.clipboard.writeText(text);
+    if (revision === viewRevision && S.verdict === v) $('copy-result-status').textContent = 'Result copied.';
+  } catch {
+    if (revision === viewRevision && S.verdict === v) {
+      $('copy-result-status').textContent = 'Clipboard unavailable. Copy the selected text below.';
+      const field = $('copy-result-text'); field.value = text; field.hidden = false; field.focus(); field.select();
+    }
+  } finally {
+    if (revision === viewRevision && S.verdict === v) { copyingResult = false; $('copy-result').disabled = false; }
+  }
+});
+
+function renderGate() {
+  const g = S.gate;
+  const st = $('gate-status');
+  const interrupted = S.status === 'interrupted';
+  renderQuestions();
+  renderReviewState();
+  $('continue').disabled = !!S.actionPending || !g && !interrupted; $('stop').disabled = !!S.actionPending || S.stopQueued || ['done', 'error'].includes(S.status) || interrupted;
+  $('human-form').hidden = ['done', 'error', 'idle'].includes(S.status);
+  $('human-msg').hidden = $('continue').hidden = S.status === 'verdict';
+  const canFinish = hasUsableRound(S.rounds, S.seats.length);
+  $('finish').hidden = !canFinish || S.stopQueued || S.finishQueued || ['verdict', 'done', 'error', 'idle', 'interrupted'].includes(S.status);
+  $('finish').disabled = !!S.actionPending;
+  if (S.finishQueued) { $('human-msg').hidden = $('continue').hidden = true; }
+  $('continue').textContent = ['continue', 'resume'].includes(S.actionPending) ? 'Sending…' : interrupted ? 'Resume' : 'Continue';
+  $('stop').textContent = S.actionPending === 'stop' || S.stopQueued ? 'Stopping…' : 'Stop';
+  const actionError = S.actionError && !['accept', 'export'].includes(S.actionError.action) ? S.actionError.message : '';
+  $('human-error').textContent = actionError; $('human-error').hidden = !actionError;
+  const link = (S.connected === false ? '<span class="status danger">reconnecting</span> ' : '') + budgetLine();
+  if (!g) {
+    // a verdict skipped, failed or never written: write it, with this chairman or another vendor
+    // (the first one out of quota or logged out is not offered first)
+    const chairDown = S.verdict?.seat && seatDown(S.verdict.seat);
+    // the CLI vendors by name; an endpoint only as a seat already at this table (its URL, key
+    // variable and model are the seat's), since the endpoint vendor alone names no server
+    const pickable = Object.keys(VENDOR_LABEL).filter((v) => !isApi(v) && !Object.values(S.down).some((x) => x.vendor === v && !x.account && !x.group));
+    const apiSeats = S.seats.filter((s) => s.endpoint && !seatDown(s)).map((s) => ({ value: `seat:${s.id}`, label: `${s.label} (${s.model})` }));
+    const savedChair = S.configuredChairman || S.chairman;
+    const first = chairDown || ['quota', 'auth', 'missing'].includes(S.verdict?.errorKind) ? pickable.find((v) => v !== S.verdict?.seat?.vendor) || pickable[0] : (savedChair?.vendor || pickable[0]);
+    const synth = S.status === 'done' && S.synthesis && S.synthesis !== 'done' && canFinish
+      ? ` <span class="synth">Write the verdict with <select id="synth-chair" aria-label="Chairman for the verdict">${pickable.map((v) => `<option value="${v}" ${v === first ? 'selected' : ''}>${esc(VENDOR_LABEL[v])}${v === savedChair?.vendor ? esc([savedChair.model, savedChair.effort, savedChair.account].filter(Boolean).map((s) => ` · ${s}`).join('')) : ''}</option>`).join('')}${apiSeats.map((o) => `<option value="${esc(o.value)}">${esc(o.label)}</option>`).join('')}</select> <button class="btn btn-small" id="synthesize" type="button" ${S.actionPending ? 'disabled' : ''}>${S.actionPending === 'synthesize' ? 'Starting…' : 'Write'}</button></span>` : '';
+    const focused = st.contains(document.activeElement) ? document.activeElement.id : null;
+    st.innerHTML = link + (S.status === 'done' ? `<span class="status ${S.synthesis === 'done' ? 'ok' : 'warn'}">${S.synthesis === 'done' ? 'Review finished' : S.stopReason === 'human' ? 'Review stopped' : 'Review ended without a verdict'}</span> ${esc(stopExplanation(S.stopReason, S.stopContext))}${synth} Record saved locally.${S.exported ? ' Decision record exported.' : ''}${S.exportError ? ` <span class="danger">Export failed: ${esc(S.exportError)}</span>` : ''}${S.replayed ? ' <span class="muted">saved review</span>' : ''}`
+      : interrupted ? `<span class="status warn">interrupted</span> ${S.interrupted?.round ? `after round ${S.interrupted.round - 1}` : 'before round 0 finished'}${S.interrupted?.partialRound != null ? `, round ${S.interrupted.partialRound} will be re-run` : ''}. Add a note or resume.`
+      : S.status === 'idle' ? '<span class="status warn">loading</span> waiting for the transcript'
+      : S.stopQueued ? '<span class="status warn">Stopping review</span> Cancelling calls and saving their status. No further calls will start.'
+      : S.status === 'verdict' ? '<span class="status warn">Discussion finished</span> The chairman is writing the verdict. Stop cancels this call too.'
+      : S.finishQueued ? '<span class="status warn">Finishing discussion</span> Cancelling unfinished seat calls, then writing the verdict from collected replies.'
+      : S.status === 'error' ? `<span class="status danger">error</span> ${esc(S.error)}`
+      : `<span class="status warn">round ${S.rounds.length - 1} in flight</span> ${S.pending.size} seat${S.pending.size === 1 ? '' : 's'} still thinking`);
+    const select = $('synth-chair');
+    if (select && S.synthChoice && [...select.options].some((o) => o.value === S.synthChoice)) select.value = S.synthChoice;
+    if (focused) $(focused)?.focus({ preventScroll: true });
+    return;
+  }
+  const parts = [];
+  if (g.questions.length) parts.push(`<span class="status warn">${groupQuestions(g.questions).length} question${groupQuestions(g.questions).length === 1 ? '' : 's'} for you</span> <span class="gate-guidance">Answer above, or continue without answers.</span>`);
+  else parts.push(`<span class="status warn">review window</span> ${g.reason === 'round0' ? 'The blind positions are ready.' : 'The round is complete.'} Add a note, or let the review continue.`);
+  if (g.stop) parts.push(`<span class="hint gate-guidance">${g.reopenable ? 'Next: the verdict, or one more round if you add a note.' : 'Next: the verdict.'}</span>`);
+  if (g.mode === 'countdown') {
+    if (S.held) parts.push('<span class="status muted">countdown held</span> waiting for you');
+    else if (S.deadline) parts.push(`<span class="countdown">Auto-continue in <span id="cd">${Math.max(0, Math.ceil((S.deadline - Date.now()) / 1000))}</span> s</span>`);
+    parts.push(`<button class="btn btn-small" id="extend-window" type="button" ${S.holdPending || S.actionPending ? 'disabled' : ''}>More time</button>`);
+  }
+  if (S.reviewDeadline) parts.push(`<span class="hint">Review time left: <span id="review-time-left"></span>.<span class="gate-guidance"> Reading and answering count toward this limit.</span></span>`);
+  st.innerHTML = link + parts.join(' ');
+  updateReviewTime();
+}
+
+function updateReviewTime() {
+  const el = $('review-time-left');
+  if (el && S.reviewDeadline) { const seconds = Math.max(0, Math.ceil((S.reviewDeadline - Date.now()) / 1000)); el.textContent = `${Math.floor(seconds / 60)}m ${seconds % 60}s`; }
+}
+
+function renderReviewState() {
+  const questionCount = S.status === 'waiting' ? groupQuestions(S.gate?.questions).length : 0;
+  if (S.fieldNotes?.decision) document.title = `${questionCount ? `${questionCount} question${questionCount === 1 ? '' : 's'} for you · ` : ''}${S.fieldNotes.decision} · Roundtable`;
+  const terminal = ['done', 'error'].includes(S.status);
+  if (S.status === 'researching' && !S.stopQueued) {
+    $('review-state').className = 'review-state status warn';
+    $('review-state').title = 'Discussion starts after the sources are saved. Stop cancels this call.';
+    $('review-state').innerHTML = 'Searcher at work<span class="sr-only">. Discussion starts after the sources are saved. Stop cancels this call.</span>';
+    return;
+  }
+  const title = S.status === 'done' ? S.synthesis === 'done' ? 'Review finished' : S.stopReason === 'human' ? 'Review stopped' : 'Review ended · no verdict' : S.stopQueued ? 'Stopping review' : S.status === 'verdict' ? 'Discussion finished · writing verdict' : S.finishQueued ? 'Finishing discussion' : S.status === 'waiting' ? 'Waiting for your input' : S.status === 'interrupted' ? 'Review interrupted' : S.status === 'error' ? 'Review stopped unexpectedly' : 'Discussion in progress';
+  const text = S.status === 'done' ? `${stopExplanation(S.stopReason, S.stopContext)} ${S.synthesis === 'done' ? 'Read the conclusion below, then record your decision if ready.' : hasUsableRound(S.rounds, S.seats.length) ? 'You can request a verdict from the saved replies.' : 'No usable replies were collected. Start a new review to get a verdict.'}` : S.stopQueued ? 'Cancelling calls. No further calls will start.' : S.status === 'verdict' ? 'Your notes are saved. The chairman is preparing the recommendation.' : S.finishQueued ? 'Cancelling unfinished seat calls, then writing the verdict from collected replies.' : S.status === 'waiting' ? 'Questions are collected below. Your answers are sent together.' : terminal ? 'Review the saved replies and error log before retrying.' : '';
+  // A small tag beside the question. What to do next is the bar at the bottom's line, so here
+  // it is only the tooltip and the screen-reader text.
+  const tone = S.status === 'error' ? 'danger' : terminal && S.synthesis === 'done' ? 'ok' : 'warn';
+  $('review-state').className = `review-state status ${tone}`;
+  $('review-state').title = text;
+  $('review-state').innerHTML = `${esc(title)}${text ? `<span class="sr-only">. ${esc(text)}</span>` : ''}`;
+}
+
+const questionKey = (round, q) => `${round}:${q.id}:${q.question}`;
+// Who asked: the seat's dot, name and lens, with its mood where that is not the default (the
+// avatar for a persona). Lenses alone when the gate predates seat ids.
+function askersHtml(q) {
+  const seats = (q.seats || []).map((id) => S.seats.find((s) => s.id === id)).filter(Boolean);
+  if (!seats.length) return q.sources.map(esc).join(' · ');
+  return seats.map((s) => `<span class="asker" style="--seat: var(--seat-${esc(s.colour)})"><span class="seat-dot"></span>${esc(seatName(s))} · ${esc(s.lens)}${s.mood?.hidden ? `<span class="avatar card-avatar">${avatar(s.mood.hidden, HIDDEN_MOODS.find((h) => h.art === s.mood.hidden)?.sprite)}</span>` : s.mood?.preset && s.mood.preset !== 'grill' ? ` · <span title="${esc(MOOD_HELP[s.mood.preset] || '')}">${esc(s.mood.preset)}</span>` : ''}</span>`).join(' · ');
+}
+function renderQuestions() {
+  const groups = groupQuestions(S.gate?.questions);
+  const visible = S.status === 'waiting' && groups.length > 0;
+  $('questions-panel').hidden = !visible;
+  $('answer-questions').hidden = !visible;
+  if (!visible) return;
+  $('questions-count').textContent = `${groups.length} distinct · ${S.gate.questions.length} asked`;
+  const inputs = $('question-inputs'), signature = JSON.stringify([S.gate.round, groups]);
+  if (inputs.dataset.signature !== signature) {
+    inputs.dataset.signature = signature;
+    inputs.innerHTML = groups.map((q) => `<div class="question-answer"><label for="answer-${q.id}"><span class="question-sources">${askersHtml(q)}</span><strong>${esc(q.question)}</strong></label><textarea id="answer-${q.id}" data-question="${q.id}" rows="2" maxlength="1200" placeholder="Your answer, or leave blank">${esc(S.questionDrafts[questionKey(S.gate.round, q)] || '')}</textarea></div>`).join('');
+  }
+  const answered = groups.filter((q) => S.questionDrafts[questionKey(S.gate.round, q)]?.trim()).length;
+  $('answer-count').textContent = `${answered} of ${groups.length} answered · one send to all seats`;
+  $('send-answers').disabled = !!S.actionPending;
+  $('send-answers').textContent = S.actionPending === 'continue' ? 'Sending…' : answered ? 'Send answers and continue' : 'Continue without answers';
+  $('answer-questions').innerHTML = `<span class="answer-label-full">Answer ${groups.length} question${groups.length === 1 ? '' : 's'}</span><span class="answer-label-short" aria-hidden="true">Answer</span>`;
+  $('answer-questions').setAttribute('aria-label', `Answer ${groups.length} question${groups.length === 1 ? '' : 's'}`);
+  $('more-time').disabled = !!S.holdPending || !!S.actionPending;
+  updateQuestionTime();
+}
+
+function updateQuestionTime() {
+  if (!S.gate?.questions.length || !S.deadline) { $('question-timing').textContent = ''; return; }
+  const seconds = Math.max(0, Math.ceil((S.deadline - Date.now()) / 1000));
+  $('question-timing').textContent = `Continuing without answers in ${Math.floor(seconds / 60)}m ${seconds % 60}s. Writing requests more time; drafts are sent only when you submit.`;
+}
+
+// Which vendor would cross its cap, and by how much: shown wherever the gate status is.
+function budgetLine() {
+  const b = S.budgetStop; if (!b) return '';
+  const name = esc(VENDOR_LABEL[b.vendor] || b.vendor);
+  if (b.kind === 'usd-unknown') return `<span class="status danger">budget</span> ${name} has a dollar cap, but its cost is not reported, so the ${esc(b.what)} was not run. `;
+  if (b.kind === 'tokens-unknown') return `<span class="status danger">budget</span> ${name} did not report token usage. Further calls to this vendor are blocked under its token cap; ${esc(b.what)} was not run. `;
+  if (b.kind === 'seat-tokens-unknown') return `<span class="status warn">usage unknown</span> ${esc(unknownUsageMessage(b.cause))} Other seats can continue. `;
+  // one seat reached its own cap for this review: that seat sits out, the others go on
+  if (b.kind === 'seat-tokens') return `<span class="status warn">seat cap</span> the ${esc(b.what)} was not made: that seat has used ${esc(k(b.spent || 0))} of its ${esc(k(b.cap || 0))}-token cap for this review. The others go on. `;
+  const unit = b.kind === 'usd' ? (n) => `$${(n || 0).toFixed(2)}` : (n) => `${k(n || 0)} tokens`;
+  const figures = `${esc(unit(b.spent))} spent plus about ${esc(unit(b.projected))} projected, cap ${esc(unit(b.cap))}`;
+  // a refused re-prompt fails one seat for one round; the debate goes on
+  if (/^re-prompt/.test(b.what)) return `<span class="status warn">budget</span> the ${esc(b.what)} was not made (${name}: ${figures}); the debate goes on. `;
+  return `<span class="status danger">budget</span> ${name} would cross its cap at the ${esc(b.what)}: ${figures}. `;
+}
+
+// Above the board: a login that is out for this debate (quota, login, missing CLI), or one limit
+// group of it (agy), and a lost connection to the server. Each says what happened and what next.
+function renderBanners() {
+  const items = Object.values(S.down).map((x) => `<div class="banner danger"><span class="status danger">${esc(VENDOR_LABEL[x.vendor] || x.vendor)}${x.account ? ` (${esc(x.account)})` : ''}${x.group ? ` · ${esc(x.group)}` : ''} out</span> ${esc(x.message)} ${x.group ? 'Seats on these models are' : 'Its seats are'} skipped for the rest of this debate${S.verdict || S.status === 'done' ? '' : '; continue without them or stop'}.</div>`);
+  items.unshift(...S.initialNotes.map((note) => `<div class="human-note"><b>${noteLabel(note)} before round 0</b>${esc(noteRecord(note).text)}</div>`));
+  const unknown = rollup(S.rows).unknownAttempts;
+  if (unknown) items.push(`<div class="banner warn usage-warning"><span class="status warn">usage unknown</span> ${unknown} call${unknown === 1 ? ' did' : 's did'} not report usable token counts. Totals include reported figures only.</div>`);
+  if (S.transcriptWarning) items.unshift(`<div class="banner warn transcript-warning"><span class="status warn">record recovery</span> ${esc(S.transcriptWarning.message)}</div>`);
+  if (S.chairmanFallback) items.push(`<div class="banner warn"><span class="status warn">chairman</span> ${esc(VENDOR_LABEL[S.chairmanFallback.from.vendor] || S.chairmanFallback.from.vendor)} could not write the verdict (${esc(S.chairmanFallback.reason)}), so ${esc(VENDOR_LABEL[S.chairmanFallback.to] || S.chairmanFallback.to)} wrote it at its default model.</div>`);
+  if (S.connected === false && S.status !== 'done') items.unshift('<div class="banner warn"><span class="status warn">reconnecting</span> Lost the connection to the roundtable server. The debate keeps running there; this board catches up when it is back.</div>');
+  $('banners').innerHTML = items.join('');
+}
+
+function renderResearch() {
+  const r = S.research;
+  $('research-panel').hidden = !r;
+  if (r && !$('research-heading').querySelector('svg')) $('research-heading').innerHTML = `<span class="heading-avatar">${avatar('searcher')}</span>Sources from the searcher`;
+  if (!r) { stopScan(); $('research-body').textContent = ''; return; }
+  // While the searcher works, the panel shows its eye reading results, like the chairman's quill.
+  if (r.status === 'running') {
+    const note = `The searcher is collecting sources: at most ${r.maxSearches} reported search operations, ${Math.round(r.timeoutMs / 1000)} seconds.`;
+    if (!$('research-body').querySelector('.scan')) $('research-body').innerHTML = `${scanMarkup()}<p class="hint scan-note"></p>`;
+    $('research-body').querySelector('.scan-note').textContent = note;
+    startScan($('research-body').querySelector('.scan'));
+    return;
+  }
+  stopScan();
+  if (r.status !== 'done') { $('research-body').textContent = r.error || 'Research was interrupted. It will not rerun automatically.'; return; }
+  $('research-body').innerHTML = `<p class="hint">${r.searches} reported search operation${r.searches === 1 ? '' : 's'} · gathered ${esc(r.gatheredAt)}. Every seat and the chairman receive this same saved bundle. Citations, excerpts and publication dates are supplied by the searcher's provider and are not independently checked.</p>`
+    + (r.sources || []).map((s) => `<details><summary>${esc(s.id)} · ${esc(s.title)}</summary><p><a href="${esc(s.url)}" target="_blank" rel="noopener noreferrer">${esc(s.url)}</a></p><p>${esc(s.excerpt)}</p><p class="hint">Published: ${esc(s.publishedAt || 'not reported')}</p></details>`).join('');
+}
+
+function render() {
+  renderResearch();
+  const focusKey = document.activeElement?.matches?.('#rounds .card-head[role="button"]') ? document.activeElement.closest('.card[data-key]').dataset.key : null;
+  $('rounds').innerHTML = S.rounds.map((r, i) => renderRound(i, r, i === S.rounds.length - 1)).join('');
+  applyCardMotion();
+  if (focusKey) liveCard(focusKey)?.querySelector('.card-head')?.focus({ preventScroll: true });
+  for (const d of $('rounds').querySelectorAll('.card[data-key] details')) d.open = S.openDetails.has(`${d.closest('.card[data-key]').dataset.key}|${d.className}`);
+  renderUsage(); renderVerdict(); renderGate(); renderAccept(); renderExportStatus(); renderBanners();
+  $('verdict-body').dataset.reveal = S.verdict ? replyKey(S.verdict) : '';
+  for (const el of document.querySelectorAll('[data-reveal]')) {
+    const startedAt = replyReveals.get(el.dataset.reveal);
+    if (startedAt != null) revealText(el, { startedAt });
+  }
+  for (const [key, at] of replyReveals) if (performance.now() - at > 960) replyReveals.delete(key);
+  $('sys').className = `status ${S.status === 'error' ? 'danger' : S.status === 'waiting' ? 'warn' : 'ok'}`;
+  $('sys').textContent = S.status;
+  $('st-round').textContent = S.rounds.length ? `round ${S.rounds.length - 1}` : '';
+  $('st-seats').textContent = S.seats.length ? `${S.seats.length} seats` : '';
+}
+
+function tick() {
+  updateReviewTime();
+  updateQuestionTime();
+  if (S.startedAt && S.status !== 'done') $('st-elapsed').textContent = `${Math.floor((Date.now() - S.startedAt) / 60000)}m ${Math.floor(((Date.now() - S.startedAt) / 1000) % 60)}s`;
+  const cd = $('cd');
+  if (cd && S.deadline) cd.textContent = Math.max(0, Math.ceil((S.deadline - Date.now()) / 1000));
+  if (Date.now() % 30000 < 1000) renderUsage(); // keep "read Nm ago" and reset countdowns honest
+}
+
+// ---------- human bar ----------
+const post = (what, body = {}) => requestJson(`/api/debates/${S.slug}/${what}`, body);
+async function boardAction(action, body, onSuccess) {
+  if (S.actionPending) return;
+  const revision = viewRevision;
+  const focused = document.activeElement.id;
+  S.actionPending = action; S.actionError = null; render();
+  try {
+    const out = await post(action, body);
+    if (revision === viewRevision) onSuccess?.(out);
+  } catch (e) {
+    if (revision === viewRevision) S.actionError = { action, message: e.message };
+  } finally {
+    if (revision === viewRevision) {
+      S.actionPending = null; render();
+      const control = focused && $(focused);
+      if (document.activeElement === document.body && control && !control.disabled && control.getClientRects().length) control.focus({ preventScroll: true });
+    }
+  }
+}
+async function hold(ev) {
+  if (!S.gate || !S.deadline || S.holdPending || S.actionPending) return;
+  if (ev && !ev.target.closest('#question-inputs textarea, #human-msg')) return;
+  // Refresh while someone is writing, after ten seconds or halfway through a shorter
+  // window. Incidental clicks never pause the table, and abandoned drafts still expire.
+  const windowMs = S.gate.questionWaitMs || 120000;
+  if (ev && S.deadline - Date.now() > windowMs - Math.min(10000, windowMs / 2)) return;
+  const gate = S.gate, revision = viewRevision;
+  S.holdPending = true;
+  try {
+    const result = await post('hold', { round: gate.round });
+    if (revision === viewRevision && S.gate === gate) {
+      S.deadline = result.autoContinueAt; S.held = false;
+      if (S.actionError?.action === 'hold') S.actionError = null;
+    }
+  } catch (e) {
+    if (revision === viewRevision && S.gate === gate) S.actionError = { action: 'hold', message: `Could not extend the answer window. ${e.message}` };
+  } finally {
+    if (revision === viewRevision) { S.holdPending = false; renderGate(); renderQuestions(); }
+  }
+}
+document.addEventListener('focusin', hold, true);
+document.addEventListener('input', hold, true);
+$('more-time').addEventListener('click', () => hold());
+
+$('human-form').addEventListener('submit', (ev) => {
+  ev.preventDefault();
+  const action = S.status === 'interrupted' ? 'resume' : /^\/stop\b/i.test($('human-msg').value) ? 'stop' : 'continue';
+  sendHuman(action);
+});
+function sendHuman(action) {
+  const value = $('human-msg').value;
+  // Stop must not wait for question validation or depend on a gate that may have closed.
+  // Keep answer drafts; the general note can still explain why the review was stopped.
+  if (action === 'stop') return boardAction('stop', { message: value }, () => {
+    if ($('human-msg').value === value) $('human-msg').value = '';
+  });
+  const gate = S.gate, groups = groupQuestions(gate?.questions);
+  const drafts = groups.map((q) => ({ key: questionKey(gate.round, q), id: q.id, text: S.questionDrafts[questionKey(gate.round, q)] || '' }));
+  const answers = drafts.filter((a) => a.text.trim()).map(({ id, text }) => ({ id, text }));
+  const message = answerMessage(gate?.questions, answers, value);
+  if (message.length > 4000) { S.actionError = { action, message: 'The answers, questions and note together exceed 4,000 characters. Shorten your answers before sending; your draft is kept.' }; renderGate(); return; }
+  return boardAction(action, { message, ...(gate ? { round: gate.round } : {}) }, () => {
+    if ($('human-msg').value === value) $('human-msg').value = '';
+    for (const draft of drafts) if (S.questionDrafts[draft.key] === draft.text) delete S.questionDrafts[draft.key];
+    delete $('question-inputs').dataset.signature;
+  });
+}
+$('stop').addEventListener('click', () => sendHuman('stop'));
+$('finish').addEventListener('click', () => sendHuman('finish'));
+$('question-inputs').addEventListener('input', (event) => {
+  const q = groupQuestions(S.gate?.questions).find((q) => q.id === event.target.dataset.question);
+  if (!q || !S.gate) return;
+  S.questionDrafts[questionKey(S.gate.round, q)] = event.target.value;
+  renderQuestions();
+});
+$('send-answers').addEventListener('click', () => sendHuman('continue'));
+$('answer-questions').addEventListener('click', () => {
+  $('questions-panel').scrollIntoView({ block: 'start', behavior: matchMedia('(prefers-reduced-motion: reduce)').matches ? 'instant' : 'smooth' });
+  $('question-inputs').querySelector('textarea')?.focus({ preventScroll: true });
+});
+
+// ---------- export ----------
+try { $('export-target').value = localStorage.getItem('roundtable.exportTarget') || ''; } catch {}
+
+// Choose… beside an export field: the server opens this machine's own folder dialog (a page cannot
+// read a real path from the browser's picker) and the chosen folder fills the field. Typing still works.
+document.addEventListener('click', async (ev) => {
+  const button = ev.target.closest('.pick-folder');
+  if (!button) return;
+  const field = $(button.dataset.for), label = button.textContent;
+  const status = field.id === 'exportTo' ? $('export-folder-status') : $('export-status');
+  status.textContent = ''; field.removeAttribute('aria-invalid');
+  button.disabled = true; button.textContent = 'Opening…';
+  try {
+    // Allow the native dialog's ten-minute wait plus time for its result to reach the browser.
+    const out = await requestJson('/api/pick-folder', {}, 610_000);
+    if (out.path) {
+      field.value = out.path;
+      field.dispatchEvent(new Event('input', { bubbles: true }));
+      if (field.id === 'export-target') try { localStorage.setItem('roundtable.exportTarget', out.path); } catch {}
+    }
+  } catch (e) {
+    status.textContent = e.message; field.setAttribute('aria-invalid', 'true');
+  } finally { button.disabled = false; button.textContent = label; }
+});
+// A verdict skipped (budget, wall clock), failed or never written: run the chairman alone.
+$('gate-status').addEventListener('click', async (ev) => {
+  if (ev.target.id === 'extend-window') { await hold(); $('extend-window')?.focus({ preventScroll: true }); return; }
+  if (ev.target.id !== 'synthesize') return;
+  const revision = viewRevision;
+  const pick = $('synth-chair').value;
+  const seat = pick.startsWith('seat:') && S.seats.find((s) => s.id === pick.slice(5));
+  const savedChair = S.configuredChairman || S.chairman;
+  const chosen = seat || (pick === savedChair?.vendor ? savedChair : { vendor: pick });
+  const chairman = Object.fromEntries(['vendor', 'endpoint', 'keyEnv', 'model', 'effort', 'account'].filter((key) => chosen[key] != null).map((key) => [key, chosen[key]]));
+  await boardAction('synthesize', { chairman });
+  if (revision === viewRevision) $('synthesize')?.focus({ preventScroll: true });
+});
+$('gate-status').addEventListener('change', (ev) => { if (ev.target.id === 'synth-chair') S.synthChoice = ev.target.value; });
+
+// The human's decision: the recommended option preselected, any option or none allowed.
+function renderAccept() {
+  const opts = S.fieldNotes?.options || [];
+  const sel = $('accept-option');
+  const rec = verdictView(S.verdict?.text, opts).pick;
+  const want = S.accepted?.option || rec || '';
+  const html = [...opts.map((o, i) => `<option value="opt-${i + 1}">${esc(o)}</option>`), '<option value="none">none of these</option>'].join('');
+  if (sel.dataset.html !== html) { sel.innerHTML = html; sel.dataset.html = html; delete sel.dataset.applied; }
+  // follow the recommendation, then the acceptance, as they arrive (a replay sends them late);
+  // never overwrite what the human is choosing
+  if (want && !S.acceptEdited && sel.dataset.applied !== want && document.activeElement !== sel) { sel.value = want; sel.dataset.applied = want; }
+  if (!S.acceptNoteEdited && S.accepted) $('accept-note').value = S.accepted.note || '';
+  $('accept-form').hidden = S.status !== 'done'; // a finished debate, live or replayed, can be accepted
+  $('accept').disabled = !!S.actionPending;
+  $('accept-status').textContent = S.actionPending === 'accept' ? 'saving…' : S.actionError?.action === 'accept' ? S.actionError.message : S.accepted ? `accepted: ${S.accepted.option === 'none' ? 'none of these' : optionLabel(S.accepted.option, opts)}` : 'not yet accepted';
+}
+$('accept-option').addEventListener('change', () => { S.acceptEdited = true; });
+$('accept-note').addEventListener('input', () => { S.acceptNoteEdited = true; });
+$('accept-form').addEventListener('submit', async (ev) => {
+  ev.preventDefault();
+  const body = { option: $('accept-option').value, note: $('accept-note').value.trim() };
+  await boardAction('accept', body, () => { S.accepted = body; });
+});
+
+function renderExportStatus() {
+  $('export').disabled = !!S.actionPending;
+  $('export-status').textContent = S.actionPending === 'export' ? 'writing…' : S.actionError?.action === 'export' ? `failed: ${S.actionError.message}` : S.exported ? `written: ${S.exported.path} (${S.exported.status}: ${S.exported.chosen})` : '';
+}
+$('export-form').addEventListener('submit', async (ev) => {
+  ev.preventDefault();
+  const target = $('export-target').value.trim();
+  try { localStorage.setItem('roundtable.exportTarget', target); } catch {}
+  await boardAction('export', { target }, (out) => { S.exported = out; S.exportError = null; });
+});
+
+// Reserve the actual bar height so the final cards remain scrollable above it at any width.
+new ResizeObserver(() => document.documentElement.style.setProperty('--board-bar-height', `${Math.ceil($('humanbar').getBoundingClientRect().height)}px`)).observe($('humanbar'));
+
+// ---------- folding cards ----------
+// Every reply starts folded to its seat and position, also in the round still coming in. A
+// click on its head or position line, or Enter or Space on the head, opens it; again folds it.
+// A card the person opens stays open until the review changes.
+// The body moves on the board's motion tokens: it unrolls over --motion-base as the card opens
+// and rolls up over --motion-fast before it folds. The board redraws on every event, so a card
+// mid-motion takes its class again with the elapsed time taken off, as the word reveal does,
+// and a fold is committed only once the body is shut. Reduced motion sets both tokens to 0, so
+// the card changes at once.
+const motionMs = (token) => parseFloat(getComputedStyle(document.documentElement).getPropertyValue(token)) || 0;
+const liveCard = (key) => $('rounds').querySelector(`.card[data-key="${CSS.escape(key)}"]`);
+function toggleCard(card) {
+  const key = card.dataset.key;
+  if (cardMotion.has(key)) return; // one motion at a time per card
+  const opening = !S.opened.has(key);
+  const ms = motionMs(opening ? '--motion-base' : '--motion-fast');
+  if (opening) {
+    S.opened.add(key);
+    if (ms) {
+      cardMotion.set(key, { kind: 'unfold', at: performance.now() });
+      setTimeout(() => { cardMotion.delete(key); liveCard(key)?.classList.remove('is-unfolding'); }, ms);
+    }
+    render();
+  } else if (!ms) {
+    S.opened.delete(key); render();
+  } else {
+    cardMotion.set(key, { kind: 'fold', at: performance.now() });
+    applyCardMotion();
+    setTimeout(() => { cardMotion.delete(key); S.opened.delete(key); render(); }, ms);
+  }
+}
+function applyCardMotion() {
+  for (const el of $('rounds').querySelectorAll('.card[data-key]')) {
+    const m = cardMotion.get(el.dataset.key);
+    if (!m) continue;
+    el.classList.add(m.kind === 'fold' ? 'is-folding' : 'is-unfolding');
+    el.style.setProperty('--motion-elapsed', `${-Math.round(performance.now() - m.at)}ms`);
+  }
+}
+// A fold the person changes by hand is remembered until the review changes (the click lands
+// before the browser toggles the details, so the state it will have is the opposite of now).
+$('rounds').addEventListener('click', (ev) => {
+  const summary = ev.target.closest('summary');
+  if (!summary) return;
+  const details = summary.parentElement, willOpen = !details.open;
+  if (details.classList.contains('round')) { S.roundOpen[details.dataset.round] = willOpen; return; }
+  const card = details.closest('.card[data-key]');
+  if (card) S.openDetails[willOpen ? 'add' : 'delete'](`${card.dataset.key}|${details.className}`);
+});
+$('rounds').addEventListener('click', (ev) => {
+  if (ev.target.closest('a, button, summary, .question')) return;
+  if (String(getSelection?.() || '')) return; // the mouse-up that ends a text selection is a click too: keep the card as it is
+  const card = ev.target.closest('.card-head, .seat-stance')?.closest('.card[data-key]');
+  if (!card) return;
+  toggleCard(card);
+});
+$('rounds').addEventListener('keydown', (ev) => {
+  if (ev.key !== 'Enter' && ev.key !== ' ') return;
+  if (!ev.target.matches?.('.card-head[role="button"]')) return;
+  ev.preventDefault(); // Space would scroll the page
+  toggleCard(ev.target.closest('.card[data-key]'));
+});
+
+// ---------- theme ----------
+// The button shows where a click goes: a sun on the night theme, a moon on paper.
+function renderTheme() {
+  const night = document.documentElement.dataset.theme === 'night';
+  $('theme').innerHTML = icon(night ? 'sun' : 'moon');
+  const label = night ? 'Switch to the paper theme' : 'Switch to the night theme';
+  $('theme').setAttribute('aria-label', label); $('theme').title = label;
+}
+$('theme').addEventListener('click', () => {
+  const night = document.documentElement.dataset.theme !== 'night';
+  document.documentElement.dataset.theme = night ? 'night' : 'paper';
+  try { localStorage.setItem('roundtable.theme', night ? 'night' : 'paper'); } catch {}
+  renderTheme();
+});
+try { if (localStorage.getItem('roundtable.theme') === 'night') document.documentElement.dataset.theme = 'night'; } catch {}
+renderTheme();
+
+// Panel folds start closed; the browser remembers one the person opened. Clear sits in
+// the debates summary, so its click must not toggle the fold (its handler prevents that).
+for (const [id, key] of [['recent', 'roundtable.debates'], ['projection-panel', 'roundtable.quota']]) {
+  try { if (localStorage.getItem(key) === 'open') $(id).open = true; } catch {}
+  $(id).addEventListener('toggle', () => { try { localStorage.setItem(key, $(id).open ? 'open' : 'closed'); } catch {} });
+}
+
+// Usage details: a toggle that stays where it is; the table opens beneath the quota line.
+function setUsageOpen(open) {
+  $('usage-details').hidden = !open;
+  $('usage-toggle').setAttribute('aria-expanded', String(open));
+}
+$('usage-toggle').addEventListener('click', () => setUsageOpen($('usage-details').hidden));
+
+// ---------- sound ----------
+// Browsers let a page make sound only after the person has interacted with it.
+for (const type of ['pointerdown', 'keydown']) document.addEventListener(type, () => { if (soundEnabled()) unlockSound(); }, { passive: true });
+function renderSound() {
+  const on = soundEnabled();
+  $('sound').setAttribute('aria-pressed', String(on)); $('sound').innerHTML = icon(on ? 'sound' : 'muted');
+  $('sound').setAttribute('aria-label', on ? 'Sound on' : 'Sound off'); $('sound').title = on ? 'Sound on. Click to mute the session cues' : 'Sound off. Click to hear the session cues';
+}
+$('sound').addEventListener('click', () => { setSound(!soundEnabled()); renderSound(); playCue('open'); }); // a preview at the real volume
+renderSound();
+
+// ---------- boot ----------
+$('start').disabled = true;
+// Setup is usually instant, so the loading card waits a moment before it shows: a card that
+// flashes for a frame would be worse than none.
+$('boot-card').insertAdjacentHTML('afterbegin', loaderMarkup());
+const bootTimer = setTimeout(() => { $('boot').hidden = false; }, 300);
+try {
+  await setup();
+  $('recent').addEventListener('click', (ev) => {
+    const deletion = ev.target.closest('[data-delete]');
+    if (deletion) confirmHistoryDeletion(deletion.dataset.delete);
+    if (ev.target.id === 'debates-more') { S.showAllDebates = !S.showAllDebates; loadRecent(); }
+    if (ev.target.id === 'retry-recent') loadRecent();
+  });
+  window.addEventListener('hashchange', route);
+  route();
+} catch (e) {
+  $('start').disabled = true;
+  $('setup-error').textContent = `Could not load setup. ${e.message} `;
+  const retry = document.createElement('button'); retry.type = 'button'; retry.className = 'btn btn-small'; retry.textContent = 'Reload';
+  retry.addEventListener('click', () => location.reload()); $('setup-error').append(retry);
+} finally {
+  clearTimeout(bootTimer); $('boot').hidden = true;
+}