From c1873669613e512b80a6fe7970c2e48b4c7c4183 Mon Sep 17 00:00:00 2001 From: iris Date: Tue, 16 Jun 2026 09:56:02 +0200 Subject: [PATCH] dashboard: dedent call.js moved blocks to module top level MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Cosmetic follow-up to the Y3R C4LL extraction (argus nit on #1705): the approvals + questions sections kept their original 2-space IIFE indentation from tabs.js, which read as if they were inside a block and was inconsistent with the unindented operator-inbox section + the other domain modules. Uniform dedent — no logic change, build unaffected. --- frontend/packages/dashboard/src/call.js | 1288 +++++++++++------------ 1 file changed, 644 insertions(+), 644 deletions(-) diff --git a/frontend/packages/dashboard/src/call.js b/frontend/packages/dashboard/src/call.js index f0b68da3..d71f812e 100644 --- a/frontend/packages/dashboard/src/call.js +++ b/frontend/packages/dashboard/src/call.js @@ -99,684 +99,684 @@ export function operatorInboxAppendFromEvent(ev) { } // ─── approvals — the operator config-change / spawn approval queue ──────── - const APPROVAL_TAB_KEY = 'hyperhive:approvals:tab'; - // Derived approval state — cold-loaded from /api/state, then mutated - // live by `approval_added` / `approval_resolved` dashboard events. - // `pending` is the open queue (newest-first); `history` is the last - // 30 resolved rows. - const APPROVAL_HISTORY_LIMIT = 30; - const approvalsState = { pending: [], history: [] }; - export function activeApprovalCount() { return approvalsState.pending.length; } - export function syncApprovalsFromSnapshot(s) { - approvalsState.pending = (s.approvals || []).slice(); - approvalsState.history = (s.approval_history || []).slice(); - } - export function applyApprovalAdded(ev) { - // Upsert by id so a snapshot that already included the row (cold - // load + event lands at the same tick) doesn't double it. - const existing = approvalsState.pending.findIndex((a) => a.id === ev.id); - const row = { +const APPROVAL_TAB_KEY = 'hyperhive:approvals:tab'; +// Derived approval state — cold-loaded from /api/state, then mutated +// live by `approval_added` / `approval_resolved` dashboard events. +// `pending` is the open queue (newest-first); `history` is the last +// 30 resolved rows. +const APPROVAL_HISTORY_LIMIT = 30; +const approvalsState = { pending: [], history: [] }; +export function activeApprovalCount() { return approvalsState.pending.length; } +export function syncApprovalsFromSnapshot(s) { + approvalsState.pending = (s.approvals || []).slice(); + approvalsState.history = (s.approval_history || []).slice(); +} +export function applyApprovalAdded(ev) { + // Upsert by id so a snapshot that already included the row (cold + // load + event lands at the same tick) doesn't double it. + const existing = approvalsState.pending.findIndex((a) => a.id === ev.id); + const row = { + id: ev.id, + agent: ev.agent, + kind: ev.approval_kind, + sha_short: ev.sha_short || null, + diff: ev.diff || null, + description: ev.description || null, + // The ApprovalAdded event carries no requested_at; a live-added + // approval was queued just now, so client-now is accurate — and + // consistent with how fmtAgo compares everything to client-now. + // A later /api/state cold-load swaps in the server value. + requested_at: ev.requested_at != null + ? ev.requested_at : Math.floor(Date.now() / 1000), + }; + if (existing >= 0) approvalsState.pending[existing] = row; + else approvalsState.pending.push(row); + renderApprovals(); +} +export function applyApprovalResolved(ev) { + // Drop from pending; prepend to history (newest-first), cap at 30. + approvalsState.pending = approvalsState.pending.filter((a) => a.id !== ev.id); + // Idempotent: a snapshot re-sync (post-disconnect SSE catchup) can + // carry this same resolved row in `approval_history` while a live + // event also delivers it — guard the unshift so history can't + // double a row. + if (!approvalsState.history.some((h) => h.id === ev.id)) { + approvalsState.history.unshift({ id: ev.id, agent: ev.agent, kind: ev.approval_kind, sha_short: ev.sha_short || null, - diff: ev.diff || null, + status: ev.status, + resolved_at: ev.resolved_at, + note: ev.note || null, description: ev.description || null, - // The ApprovalAdded event carries no requested_at; a live-added - // approval was queued just now, so client-now is accurate — and - // consistent with how fmtAgo compares everything to client-now. - // A later /api/state cold-load swaps in the server value. - requested_at: ev.requested_at != null - ? ev.requested_at : Math.floor(Date.now() / 1000), - }; - if (existing >= 0) approvalsState.pending[existing] = row; - else approvalsState.pending.push(row); + }); + if (approvalsState.history.length > APPROVAL_HISTORY_LIMIT) { + approvalsState.history.length = APPROVAL_HISTORY_LIMIT; + } + } + renderApprovals(); +} +// Classify each unified-diff line by its leading char so +// `.diff-add` / `.diff-del` / `.diff-hunk` / `.diff-file` / +// `.diff-ctx` colour the output. Built as text-only spans (no +// innerHTML) so there's no HTML-escape surface. +function buildDiffPre(text) { + const pre = el('pre', { class: 'diff' }); + for (const raw of String(text).split('\n')) { + let cls = 'diff-ctx'; + if (raw.startsWith('--- ') || raw.startsWith('+++ ')) cls = 'diff-file'; + else if (raw.startsWith('@')) cls = 'diff-hunk'; + else if (raw.startsWith('+')) cls = 'diff-add'; + else if (raw.startsWith('-')) cls = 'diff-del'; + const span = document.createElement('span'); + span.className = cls; + span.textContent = raw + '\n'; + pre.appendChild(span); + } + return pre; +} + +// Open an approval's diff in the side panel with a 3-way base +// toggle: vs applied (running tree), vs last-approved, vs previous +// proposal. `applied` uses the diff already shipped on the approval +// for instant paint; the other two fetch /api/approval-diff. +function openDiffPanel(a) { + const bases = [ + ['applied', 'vs applied'], + ['approved', 'vs last-approved'], + ['previous', 'vs previous proposal'], + ]; + const tabs = el('div', { class: 'diff-base-tabs' }); + const host = el('div', { class: 'diff-host' }); + async function selectBase(base) { + for (const btn of tabs.children) { + btn.classList.toggle('active', btn.dataset.base === base); + } + if (base === 'applied' && a.diff != null) { + host.replaceChildren(buildDiffPre(a.diff)); + return; + } + host.replaceChildren(el('div', { class: 'meta' }, 'loading…')); + try { + const resp = await fetch('/api/approval-diff/' + a.id + '?base=' + base); + const text = await resp.text(); + host.replaceChildren(resp.ok + ? buildDiffPre(text) + : el('div', { class: 'meta' }, 'error: ' + text)); + } catch (e) { + host.replaceChildren(el('div', { class: 'meta' }, 'error: ' + e)); + } + } + for (const [base, label] of bases) { + const btn = el('button', + { type: 'button', class: 'diff-base-tab', 'data-base': base }, label); + btn.addEventListener('click', () => selectBase(base)); + tabs.append(btn); + } + const wrap = el('div', { class: 'diff-panel' }, tabs, host); + Panel.open('diff · ' + a.agent + ' #' + a.id, wrap); + selectBase('applied'); +} + +export function renderApprovals() { + const root = $('approvals-section'); + // #approvals-section only lives on /dashboard.html (Y3R C4LL tab); + // no-op elsewhere — `approval_added` / `approval_resolved` SSE + // events route through here on every page that loads the bundle. + if (!root) return; + // Save spawn form input + focus state before the DOM wipe so a live + // approval_added/resolved event doesn't erase a partially-typed name + // or steal focus from the operator. + const savedSpawnName = root.querySelector('.spawnform input[name="name"]')?.value ?? ''; + const spawnHadFocus = document.activeElement === root.querySelector('.spawnform input[name="name"]'); + root.replaceChildren(); + + // Spawn request form: submitting it queues a Spawn approval that + // lands in this same list, so the form belongs here rather than on + // the containers list (the agent doesn't exist yet). + const spawnNameInput = el('input', { + name: 'name', + placeholder: 'new agent name (≤9 chars)', + maxlength: '9', required: '', autocomplete: 'off', + }); + if (savedSpawnName) spawnNameInput.value = savedSpawnName; + if (spawnHadFocus) spawnNameInput.focus(); + const spawn = el('form', { + method: 'POST', action: '/request-spawn', + class: 'spawnform', 'data-async': '', 'data-no-refresh': '', + }); + spawn.append( + spawnNameInput, + el('button', { type: 'submit', class: 'btn btn-spawn' }, '◆ R3QU3ST SP4WN'), + ); + root.append(spawn); + + const pending = approvalsState.pending; + const history = approvalsState.history; + const active = localStorage.getItem(APPROVAL_TAB_KEY) || 'pending'; + const tabs = el('div', { class: 'approval-tabs' }); + const pendingTab = el( + 'button', + { + type: 'button', + class: 'approval-tab' + (active === 'pending' ? ' active' : ''), + }, + `pending · ${pending.length}`, + ); + const historyTab = el( + 'button', + { + type: 'button', + class: 'approval-tab' + (active === 'history' ? ' active' : ''), + }, + `history · ${history.length}`, + ); + pendingTab.addEventListener('click', () => { + localStorage.setItem(APPROVAL_TAB_KEY, 'pending'); renderApprovals(); - } - export function applyApprovalResolved(ev) { - // Drop from pending; prepend to history (newest-first), cap at 30. - approvalsState.pending = approvalsState.pending.filter((a) => a.id !== ev.id); - // Idempotent: a snapshot re-sync (post-disconnect SSE catchup) can - // carry this same resolved row in `approval_history` while a live - // event also delivers it — guard the unshift so history can't - // double a row. - if (!approvalsState.history.some((h) => h.id === ev.id)) { - approvalsState.history.unshift({ - id: ev.id, - agent: ev.agent, - kind: ev.approval_kind, - sha_short: ev.sha_short || null, - status: ev.status, - resolved_at: ev.resolved_at, - note: ev.note || null, - description: ev.description || null, - }); - if (approvalsState.history.length > APPROVAL_HISTORY_LIMIT) { - approvalsState.history.length = APPROVAL_HISTORY_LIMIT; - } - } + }); + historyTab.addEventListener('click', () => { + localStorage.setItem(APPROVAL_TAB_KEY, 'history'); renderApprovals(); - } - // Classify each unified-diff line by its leading char so - // `.diff-add` / `.diff-del` / `.diff-hunk` / `.diff-file` / - // `.diff-ctx` colour the output. Built as text-only spans (no - // innerHTML) so there's no HTML-escape surface. - function buildDiffPre(text) { - const pre = el('pre', { class: 'diff' }); - for (const raw of String(text).split('\n')) { - let cls = 'diff-ctx'; - if (raw.startsWith('--- ') || raw.startsWith('+++ ')) cls = 'diff-file'; - else if (raw.startsWith('@')) cls = 'diff-hunk'; - else if (raw.startsWith('+')) cls = 'diff-add'; - else if (raw.startsWith('-')) cls = 'diff-del'; - const span = document.createElement('span'); - span.className = cls; - span.textContent = raw + '\n'; - pre.appendChild(span); - } - return pre; + }); + tabs.append(pendingTab, historyTab); + root.append(tabs); + + if (active === 'history') { + renderApprovalHistory(root, history); + return; } - // Open an approval's diff in the side panel with a 3-way base - // toggle: vs applied (running tree), vs last-approved, vs previous - // proposal. `applied` uses the diff already shipped on the approval - // for instant paint; the other two fetch /api/approval-diff. - function openDiffPanel(a) { - const bases = [ - ['applied', 'vs applied'], - ['approved', 'vs last-approved'], - ['previous', 'vs previous proposal'], - ]; - const tabs = el('div', { class: 'diff-base-tabs' }); - const host = el('div', { class: 'diff-host' }); - async function selectBase(base) { - for (const btn of tabs.children) { - btn.classList.toggle('active', btn.dataset.base === base); - } - if (base === 'applied' && a.diff != null) { - host.replaceChildren(buildDiffPre(a.diff)); - return; - } - host.replaceChildren(el('div', { class: 'meta' }, 'loading…')); - try { - const resp = await fetch('/api/approval-diff/' + a.id + '?base=' + base); - const text = await resp.text(); - host.replaceChildren(resp.ok - ? buildDiffPre(text) - : el('div', { class: 'meta' }, 'error: ' + text)); - } catch (e) { - host.replaceChildren(el('div', { class: 'meta' }, 'error: ' + e)); - } - } - for (const [base, label] of bases) { - const btn = el('button', - { type: 'button', class: 'diff-base-tab', 'data-base': base }, label); - btn.addEventListener('click', () => selectBase(base)); - tabs.append(btn); - } - const wrap = el('div', { class: 'diff-panel' }, tabs, host); - Panel.open('diff · ' + a.agent + ' #' + a.id, wrap); - selectBase('applied'); + if (!pending.length) { + root.append(el('p', { class: 'empty' }, 'queue empty')); + return; } + // forge link base — only when the hive-forge container is up. + const fs = window.__hyperhive_state; + const hostname = (fs && fs.hostname) || window.location.hostname; + // Prefer state.forge_public_url (set when forge.behindGateway=true, + // e.g. "https://forge.pr1ma.darkest.space") over the direct :3000 port. + const forgeBase = (fs && fs.forge_present) + ? (fs.forge_public_url || `http://${hostname}:3000`) + : null; - export function renderApprovals() { - const root = $('approvals-section'); - // #approvals-section only lives on /dashboard.html (Y3R C4LL tab); - // no-op elsewhere — `approval_added` / `approval_resolved` SSE - // events route through here on every page that loads the bundle. - if (!root) return; - // Save spawn form input + focus state before the DOM wipe so a live - // approval_added/resolved event doesn't erase a partially-typed name - // or steal focus from the operator. - const savedSpawnName = root.querySelector('.spawnform input[name="name"]')?.value ?? ''; - const spawnHadFocus = document.activeElement === root.querySelector('.spawnform input[name="name"]'); - root.replaceChildren(); + const ul = el('ul', { class: 'approvals' }); + for (const a of pending) { + const isApply = a.kind === 'apply_commit'; + const isInit = a.kind === 'init_config'; + const li = el('li', { class: 'approval-card' }); - // Spawn request form: submitting it queues a Spawn approval that - // lands in this same list, so the form belongs here rather than on - // the containers list (the agent doesn't exist yet). - const spawnNameInput = el('input', { - name: 'name', - placeholder: 'new agent name (≤9 chars)', - maxlength: '9', required: '', autocomplete: 'off', - }); - if (savedSpawnName) spawnNameInput.value = savedSpawnName; - if (spawnHadFocus) spawnNameInput.focus(); - const spawn = el('form', { - method: 'POST', action: '/request-spawn', - class: 'spawnform', 'data-async': '', 'data-no-refresh': '', - }); - spawn.append( - spawnNameInput, - el('button', { type: 'submit', class: 'btn btn-spawn' }, '◆ R3QU3ST SP4WN'), + // ── identity header ────────────────────────────────────────── + const head = el('div', { class: 'approval-head' }, + el('span', { class: 'glyph' }, isApply ? '→' : '⊕'), + el('span', { class: 'id' }, '#' + a.id), + el('span', { class: 'agent' }, a.agent), + el('span', { class: 'kind' + (isApply ? '' : ' kind-spawn') }, + isApply ? 'apply' : isInit ? 'init' : 'spawn'), ); - root.append(spawn); + if (isApply && a.sha_short) head.append(el('code', {}, a.sha_short)); + // When the approval was requested — relative time, right-aligned. + // Goes amber once it's been pending an hour so a stale request is + // obvious at a glance (see docs/web-ui.md::Approval card). + if (a.requested_at != null) { + const ageSec = Math.max(0, Math.floor(Date.now() / 1000 - a.requested_at)); + head.append(el('span', { + class: 'approval-ts' + (ageSec >= 3600 ? ' stale' : ''), + title: 'requested ' + new Date(a.requested_at * 1000).toLocaleString(), + 'data-requested-at': String(a.requested_at), + }, 'requested ' + fmtAgo(a.requested_at))); + } + li.append(head); - const pending = approvalsState.pending; - const history = approvalsState.history; - const active = localStorage.getItem(APPROVAL_TAB_KEY) || 'pending'; - const tabs = el('div', { class: 'approval-tabs' }); - const pendingTab = el( - 'button', - { - type: 'button', - class: 'approval-tab' + (active === 'pending' ? ' active' : ''), - }, - `pending · ${pending.length}`, - ); - const historyTab = el( - 'button', - { - type: 'button', - class: 'approval-tab' + (active === 'history' ? ' active' : ''), - }, - `history · ${history.length}`, - ); - pendingTab.addEventListener('click', () => { - localStorage.setItem(APPROVAL_TAB_KEY, 'pending'); - renderApprovals(); + // ── what-changed body ──────────────────────────────────────── + const body = el('div', { class: 'approval-body' }); + if (a.description) { + body.append(el('div', { class: 'approval-description' }, a.description)); + } + if (isApply) { + const drill = el('div', { class: 'drill-ins' }); + const diffBtn = el('button', { type: 'button', class: 'panel-trigger' }, + '↳ view diff'); + diffBtn.addEventListener('click', () => openDiffPanel(a)); + drill.append(diffBtn); + if (forgeBase && a.sha_short) { + drill.append(el('a', { + class: 'panel-trigger', target: '_blank', rel: 'noopener', + href: `${forgeBase}/agent-configs/${a.agent}/commit/${a.sha_short}`, + title: 'this proposal commit on the hive forge', + }, '↳ commit on forge ↗')); + } + body.append(drill); + } else { + body.append(el('span', { class: 'meta' }, + isInit + ? 'scaffold proposed config repo — manager customises agent.nix before spawn' + : 'new sub-agent — container will be created on approve')); + } + li.append(body); + + // ── decision actions ───────────────────────────────────────── + // Deny prompts the operator for an optional reason; the submit + // handler stashes it into a hidden `note` input that rides along + // on the POST and is surfaced to the manager via + // HelperEvent::ApprovalResolved { note }. + const denyForm = el('form', { + method: 'POST', action: '/deny/' + a.id, + class: 'inline', 'data-async': '', 'data-no-refresh': '', + 'data-prompt': 'reason for denying (optional, sent to manager):', }); - historyTab.addEventListener('click', () => { - localStorage.setItem(APPROVAL_TAB_KEY, 'history'); - renderApprovals(); - }); - tabs.append(pendingTab, historyTab); - root.append(tabs); + denyForm.append(el('button', { type: 'submit', class: 'btn btn-deny' }, 'DENY')); + li.append(el('div', { class: 'approval-actions' }, + form('/approve/' + a.id, 'btn-approve', '◆ APPR0VE', null, {}, { noRefresh: true }), + denyForm, + )); - if (active === 'history') { - renderApprovalHistory(root, history); - return; - } - - if (!pending.length) { - root.append(el('p', { class: 'empty' }, 'queue empty')); - return; - } - // forge link base — only when the hive-forge container is up. - const fs = window.__hyperhive_state; - const hostname = (fs && fs.hostname) || window.location.hostname; - // Prefer state.forge_public_url (set when forge.behindGateway=true, - // e.g. "https://forge.pr1ma.darkest.space") over the direct :3000 port. - const forgeBase = (fs && fs.forge_present) - ? (fs.forge_public_url || `http://${hostname}:3000`) - : null; - - const ul = el('ul', { class: 'approvals' }); - for (const a of pending) { - const isApply = a.kind === 'apply_commit'; - const isInit = a.kind === 'init_config'; - const li = el('li', { class: 'approval-card' }); - - // ── identity header ────────────────────────────────────────── - const head = el('div', { class: 'approval-head' }, - el('span', { class: 'glyph' }, isApply ? '→' : '⊕'), - el('span', { class: 'id' }, '#' + a.id), - el('span', { class: 'agent' }, a.agent), - el('span', { class: 'kind' + (isApply ? '' : ' kind-spawn') }, - isApply ? 'apply' : isInit ? 'init' : 'spawn'), - ); - if (isApply && a.sha_short) head.append(el('code', {}, a.sha_short)); - // When the approval was requested — relative time, right-aligned. - // Goes amber once it's been pending an hour so a stale request is - // obvious at a glance (see docs/web-ui.md::Approval card). - if (a.requested_at != null) { - const ageSec = Math.max(0, Math.floor(Date.now() / 1000 - a.requested_at)); - head.append(el('span', { - class: 'approval-ts' + (ageSec >= 3600 ? ' stale' : ''), - title: 'requested ' + new Date(a.requested_at * 1000).toLocaleString(), - 'data-requested-at': String(a.requested_at), - }, 'requested ' + fmtAgo(a.requested_at))); - } - li.append(head); - - // ── what-changed body ──────────────────────────────────────── - const body = el('div', { class: 'approval-body' }); - if (a.description) { - body.append(el('div', { class: 'approval-description' }, a.description)); - } - if (isApply) { - const drill = el('div', { class: 'drill-ins' }); - const diffBtn = el('button', { type: 'button', class: 'panel-trigger' }, - '↳ view diff'); - diffBtn.addEventListener('click', () => openDiffPanel(a)); - drill.append(diffBtn); - if (forgeBase && a.sha_short) { - drill.append(el('a', { - class: 'panel-trigger', target: '_blank', rel: 'noopener', - href: `${forgeBase}/agent-configs/${a.agent}/commit/${a.sha_short}`, - title: 'this proposal commit on the hive forge', - }, '↳ commit on forge ↗')); - } - body.append(drill); - } else { - body.append(el('span', { class: 'meta' }, - isInit - ? 'scaffold proposed config repo — manager customises agent.nix before spawn' - : 'new sub-agent — container will be created on approve')); - } - li.append(body); - - // ── decision actions ───────────────────────────────────────── - // Deny prompts the operator for an optional reason; the submit - // handler stashes it into a hidden `note` input that rides along - // on the POST and is surfaced to the manager via - // HelperEvent::ApprovalResolved { note }. - const denyForm = el('form', { - method: 'POST', action: '/deny/' + a.id, - class: 'inline', 'data-async': '', 'data-no-refresh': '', - 'data-prompt': 'reason for denying (optional, sent to manager):', - }); - denyForm.append(el('button', { type: 'submit', class: 'btn btn-deny' }, 'DENY')); - li.append(el('div', { class: 'approval-actions' }, - form('/approve/' + a.id, 'btn-approve', '◆ APPR0VE', null, {}, { noRefresh: true }), - denyForm, - )); - - ul.append(li); - } - root.append(ul); + ul.append(li); } + root.append(ul); +} - function renderApprovalHistory(root, history) { - if (!history.length) { - root.append(el('p', { class: 'empty' }, 'no resolved approvals yet')); - return; - } - const ul = el('ul', { class: 'approvals approvals-history' }); - for (const a of history) { - const li = el('li'); - const row = el('div', { class: 'row' }); - const glyph = a.status === 'approved' ? '✓' - : a.status === 'denied' ? '✗' - : a.status === 'cancelled' ? '⊘' - : '⚠'; - row.append( - el('span', { class: 'glyph glyph-' + a.status }, glyph), ' ', - el('span', { class: 'id' }, '#' + a.id), ' ', - el('span', { class: 'agent' }, a.agent), ' ', - el('span', { class: 'kind' }, a.kind === 'apply_commit' ? 'apply' : a.kind === 'init_config' ? 'init' : 'spawn'), ' ', - ); - if (a.sha_short) row.append(el('code', {}, a.sha_short), ' '); - row.append( - el('span', { class: 'status status-' + a.status }, a.status), ' ', - el('span', { class: 'msg-ts' }, fmtAgo(a.resolved_at)), - ); - li.append(row); - if (a.note) { - li.append(el('div', { class: 'history-note' }, a.note)); - } - ul.append(li); - } - root.append(ul); +function renderApprovalHistory(root, history) { + if (!history.length) { + root.append(el('p', { class: 'empty' }, 'no resolved approvals yet')); + return; } + const ul = el('ul', { class: 'approvals approvals-history' }); + for (const a of history) { + const li = el('li'); + const row = el('div', { class: 'row' }); + const glyph = a.status === 'approved' ? '✓' + : a.status === 'denied' ? '✗' + : a.status === 'cancelled' ? '⊘' + : '⚠'; + row.append( + el('span', { class: 'glyph glyph-' + a.status }, glyph), ' ', + el('span', { class: 'id' }, '#' + a.id), ' ', + el('span', { class: 'agent' }, a.agent), ' ', + el('span', { class: 'kind' }, a.kind === 'apply_commit' ? 'apply' : a.kind === 'init_config' ? 'init' : 'spawn'), ' ', + ); + if (a.sha_short) row.append(el('code', {}, a.sha_short), ' '); + row.append( + el('span', { class: 'status status-' + a.status }, a.status), ' ', + el('span', { class: 'msg-ts' }, fmtAgo(a.resolved_at)), + ); + li.append(row); + if (a.note) { + li.append(el('div', { class: 'history-note' }, a.note)); + } + ul.append(li); + } + root.append(ul); +} // ─── questions — the operator question queue (Y3R C4LL) ─────────────────── - // questionsState + QUESTION_HISTORY_LIMIT are imported from state.js (shared - // with the SW4RM per-agent question-count badges). - // Keyed row cache: question id → {el, fingerprint}. Allows renderQuestions - // to reuse
  • elements whose state hasn't changed. The main benefit is - // preserving textarea draft text and radio/checkbox selections when an - // unrelated question arrives while the operator is composing a reply. - const questionRowCache = new Map(); - export function activeQuestionCount() { return questionsState.pending.length; } - export function syncQuestionsFromSnapshot(s) { - questionsState.pending = (s.questions || []).slice(); - questionsState.history = (s.question_history || []).slice(); - } - export function applyQuestionAdded(ev) { - if (questionsState.pending.some((q) => q.id === ev.id)) return; - questionsState.pending.push({ +// questionsState + QUESTION_HISTORY_LIMIT are imported from state.js (shared +// with the SW4RM per-agent question-count badges). +// Keyed row cache: question id → {el, fingerprint}. Allows renderQuestions +// to reuse
  • elements whose state hasn't changed. The main benefit is +// preserving textarea draft text and radio/checkbox selections when an +// unrelated question arrives while the operator is composing a reply. +const questionRowCache = new Map(); +export function activeQuestionCount() { return questionsState.pending.length; } +export function syncQuestionsFromSnapshot(s) { + questionsState.pending = (s.questions || []).slice(); + questionsState.history = (s.question_history || []).slice(); +} +export function applyQuestionAdded(ev) { + if (questionsState.pending.some((q) => q.id === ev.id)) return; + questionsState.pending.push({ + id: ev.id, + asker: ev.asker, + question: ev.question, + options: ev.options || [], + multi: !!ev.multi, + asked_at: ev.asked_at, + deadline_at: ev.deadline_at ?? null, + target: ev.target || null, + question_refs: ev.question_refs || [], + }); + renderQuestions(); + renderContainersFromState(); +} +export function applyQuestionResolved(ev) { + const idx = questionsState.pending.findIndex((q) => q.id === ev.id); + const existing = idx >= 0 ? questionsState.pending[idx] : null; + if (idx >= 0) questionsState.pending.splice(idx, 1); + // Idempotent: a snapshot re-sync (post-disconnect SSE catchup) can + // carry this same answered row in `question_history` while a live + // event also delivers it — guard the unshift so history can't + // double a row. + if (!questionsState.history.some((h) => h.id === ev.id)) { + questionsState.history.unshift({ id: ev.id, - asker: ev.asker, - question: ev.question, - options: ev.options || [], - multi: !!ev.multi, - asked_at: ev.asked_at, - deadline_at: ev.deadline_at ?? null, - target: ev.target || null, - question_refs: ev.question_refs || [], + asker: existing?.asker || '?', + question: existing?.question || '', + options: existing?.options || [], + multi: existing?.multi || false, + asked_at: existing?.asked_at || ev.answered_at, + answered_at: ev.answered_at, + answer: ev.answer, + answerer: ev.answerer, + target: existing?.target ?? ev.target ?? null, + question_refs: existing?.question_refs || [], + answer_refs: ev.answer_refs || [], }); - renderQuestions(); - renderContainersFromState(); - } - export function applyQuestionResolved(ev) { - const idx = questionsState.pending.findIndex((q) => q.id === ev.id); - const existing = idx >= 0 ? questionsState.pending[idx] : null; - if (idx >= 0) questionsState.pending.splice(idx, 1); - // Idempotent: a snapshot re-sync (post-disconnect SSE catchup) can - // carry this same answered row in `question_history` while a live - // event also delivers it — guard the unshift so history can't - // double a row. - if (!questionsState.history.some((h) => h.id === ev.id)) { - questionsState.history.unshift({ - id: ev.id, - asker: existing?.asker || '?', - question: existing?.question || '', - options: existing?.options || [], - multi: existing?.multi || false, - asked_at: existing?.asked_at || ev.answered_at, - answered_at: ev.answered_at, - answer: ev.answer, - answerer: ev.answerer, - target: existing?.target ?? ev.target ?? null, - question_refs: existing?.question_refs || [], - answer_refs: ev.answer_refs || [], - }); - if (questionsState.history.length > QUESTION_HISTORY_LIMIT) { - questionsState.history.length = QUESTION_HISTORY_LIMIT; - } + if (questionsState.history.length > QUESTION_HISTORY_LIMIT) { + questionsState.history.length = QUESTION_HISTORY_LIMIT; } - renderQuestions(); - renderContainersFromState(); } - // Filter selection for the questions section. Persisted so the - // operator's preferred view (all / operator-targeted / peer) - // survives a reload. - const QUESTIONS_FILTER_KEY = 'hyperhive:questions:filter'; - function getQuestionsFilter() { - return localStorage.getItem(QUESTIONS_FILTER_KEY) || 'all'; + renderQuestions(); + renderContainersFromState(); +} +// Filter selection for the questions section. Persisted so the +// operator's preferred view (all / operator-targeted / peer) +// survives a reload. +const QUESTIONS_FILTER_KEY = 'hyperhive:questions:filter'; +function getQuestionsFilter() { + return localStorage.getItem(QUESTIONS_FILTER_KEY) || 'all'; +} +function setQuestionsFilter(v) { + localStorage.setItem(QUESTIONS_FILTER_KEY, v); + renderQuestions(); +} +function questionMatchesFilter(q, filter) { + if (filter === 'all') return true; + if (filter === 'operator') return !q.target; + if (filter === 'peer') return !!q.target; + // `agent:` matches when the agent appears as asker OR target. + if (filter.startsWith('agent:')) { + const name = filter.slice('agent:'.length); + return q.asker === name || q.target === name; } - function setQuestionsFilter(v) { - localStorage.setItem(QUESTIONS_FILTER_KEY, v); - renderQuestions(); - } - function questionMatchesFilter(q, filter) { - if (filter === 'all') return true; - if (filter === 'operator') return !q.target; - if (filter === 'peer') return !!q.target; - // `agent:` matches when the agent appears as asker OR target. - if (filter.startsWith('agent:')) { - const name = filter.slice('agent:'.length); - return q.asker === name || q.target === name; - } - return true; - } - // Serialise the fields that determine a pending-question
  • 's DOM - // structure. Used by questionRowCache to skip rebuilds when nothing - // visible has changed. deadline_at controls whether the TTL chip node - // exists at all (its text is kept current by the global 1s ticker). - function questionRowFingerprint(q) { - return JSON.stringify({ - asker: q.asker, target: q.target, asked_at: q.asked_at, - deadline_at: q.deadline_at, question: q.question, - question_refs: q.question_refs, options: q.options, multi: q.multi, + return true; +} +// Serialise the fields that determine a pending-question
  • 's DOM +// structure. Used by questionRowCache to skip rebuilds when nothing +// visible has changed. deadline_at controls whether the TTL chip node +// exists at all (its text is kept current by the global 1s ticker). +function questionRowFingerprint(q) { + return JSON.stringify({ + asker: q.asker, target: q.target, asked_at: q.asked_at, + deadline_at: q.deadline_at, question: q.question, + question_refs: q.question_refs, options: q.options, multi: q.multi, + }); +} + +// Build a single pending-question
  • . Extracted from renderQuestions so +// questionRowCache can reuse unchanged nodes without re-running this body. +// Event listeners attached here (keydown on textarea, submit on form) are +// preserved in the reused node — no re-attachment needed. +function buildQuestionLi(q) { + const fmt = (n) => new Date(n * 1000).toISOString().replace('T', ' ').slice(0, 19); + const targetLabel = q.target || 'operator'; + const li = el('li', { class: 'question' + (q.target ? ' question-peer' : '') }); + const head = el('div', { class: 'q-head' }, + el('span', { class: 'msg-ts' }, fmt(q.asked_at)), ' ', + el('span', { class: 'msg-from' }, q.asker), ' ', + el('span', { class: 'msg-sep' }, '→'), ' ', + el('span', { class: q.target ? 'msg-to msg-to-peer' : 'msg-to' }, targetLabel), ' ', + el('span', { class: 'msg-sep' }, 'asks:'), + ); + if (q.deadline_at) { + // Tag the chip with its deadline so the global 1s ticker + // can refresh the text without re-rendering the questions section. + const ttlEl = el('span', { + class: 'q-ttl', 'data-deadline': String(q.deadline_at), }); + ttlEl.textContent = formatTtl( + q.deadline_at - Math.floor(Date.now() / 1000), + ); + head.append(' ', ttlEl); + } + const qBody = el('div', { class: 'q-body' }); + appendLinkified(qBody, q.question, q.question_refs); + li.append(head, qBody); + const f = el('form', { + method: 'POST', action: '/answer-question/' + q.id, + class: 'qform', 'data-async': '', 'data-no-refresh': '', + }); + const hasOptions = q.options && q.options.length; + const isMulti = !!q.multi && hasOptions; + const freeText = el('textarea', { + name: 'answer-free', rows: '2', autocomplete: 'off', + placeholder: (hasOptions ? 'or type your own…' : 'your answer') + + ' (shift+enter for newline)', + }); + // Enter submits; shift+enter inserts a newline (textarea default). + freeText.addEventListener('keydown', (e) => { + if (e.key === 'Enter' && !e.shiftKey) { + e.preventDefault(); + f.requestSubmit(); + } + }); + const optionGroup = el('div', { class: 'q-options' }); + if (hasOptions) { + for (const opt of q.options) { + const inputType = isMulti ? 'checkbox' : 'radio'; + const id = 'q' + q.id + '-' + Math.random().toString(36).slice(2, 8); + const input = el('input', { type: inputType, name: 'choice', value: opt, id }); + const label = el('label', { for: id }, ' ' + opt); + optionGroup.append(el('div', { class: 'q-option' }, input, label)); + } + } + // On submit, build the final `answer` field from selected + // options + free-text, joined by ', '. This lets the operator + // pick options AND add free text in the same form. + f.addEventListener('submit', (ev) => { + const parts = []; + for (const cb of f.querySelectorAll('input[name="choice"]:checked')) { + parts.push(cb.value); + } + const ft = (freeText.value || '').trim(); + if (ft) parts.push(ft); + const merged = parts.join(', '); + // Replace the existing hidden `answer` (if any) with the merged value. + const existing = f.querySelector('input[name="answer"]'); + if (existing) existing.remove(); + f.append(el('input', { type: 'hidden', name: 'answer', value: merged })); + if (!merged) { ev.preventDefault(); alert('pick an option or type an answer'); } + }, true); + if (hasOptions) f.append(optionGroup); + const buttons = el('div', { class: 'q-buttons' }); + // On peer threads the operator's answer is an override — + // mark the button so it's clear what the click does (the + // backend permits it via OperatorQuestions::answer's + // answerer-auth rule). + const answerLabel = q.target + ? (isMulti ? '⤿ 0V3RR1D3 · ' + q.options.length + ' opts' : '⤿ 0V3RR1D3') + : (isMulti ? '▸ ANSW3R · ' + q.options.length + ' opts' : '▸ ANSW3R'); + buttons.append( + el('button', { + type: 'submit', + class: 'btn btn-approve' + (q.target ? ' btn-override' : ''), + title: q.target ? `override-answer on behalf of operator (target was ${q.target})` : '', + }, answerLabel), + ); + f.append( + el('div', { class: 'q-free' }, freeText), + buttons, + ); + li.append(f); + // Separate form so the cancel button doesn't get the answer + // merge-on-submit handler attached to the main form. + const cancelTargetLabel = q.target ? q.target : 'asker'; + const cancelForm = el('form', { + method: 'POST', action: '/cancel-question/' + q.id, + class: 'qform-cancel', 'data-async': '', 'data-no-refresh': '', + 'data-confirm': `cancel this question? ${cancelTargetLabel} will see ` + + '"[cancelled]" as the answer.', + }); + cancelForm.append( + el('button', { type: 'submit', class: 'btn btn-deny' }, '✗ CANC3L'), + ); + li.append(cancelForm); + return li; +} + +export function renderQuestions() { + const root = $('questions-section'); + // #questions-section only lives on /dashboard.html (Y3R C4LL tab); + // no-op when the section is missing. `question_added` / + // `question_resolved` SSE events route through here. + if (!root) return; + // Snapshot open
    state so SSE-triggered re-renders restore + // any expanded sections. The keyed-cache approach reuses question + //
  • nodes (preserving textarea/checkbox state) and only rebuilds + // cache-miss rows, so we no longer wipe the DOM at the start. + const openDetails = snapshotOpenDetails(); + const fmt = (n) => new Date(n * 1000).toISOString().replace('T', ' ').slice(0, 19); + const allPending = questionsState.pending; + + // Filter chips. Always include `all` / `operator` / `peer`; add + // per-agent chips for any agent that appears as asker or target + // in the pending list so the operator can isolate a single + // thread without typing. + const participants = new Set(); + for (const q of allPending) { + participants.add(q.asker); + if (q.target) participants.add(q.target); } - // Build a single pending-question
  • . Extracted from renderQuestions so - // questionRowCache can reuse unchanged nodes without re-running this body. - // Event listeners attached here (keydown on textarea, submit on form) are - // preserved in the reused node — no re-attachment needed. - function buildQuestionLi(q) { - const fmt = (n) => new Date(n * 1000).toISOString().replace('T', ' ').slice(0, 19); - const targetLabel = q.target || 'operator'; - const li = el('li', { class: 'question' + (q.target ? ' question-peer' : '') }); - const head = el('div', { class: 'q-head' }, - el('span', { class: 'msg-ts' }, fmt(q.asked_at)), ' ', - el('span', { class: 'msg-from' }, q.asker), ' ', - el('span', { class: 'msg-sep' }, '→'), ' ', - el('span', { class: q.target ? 'msg-to msg-to-peer' : 'msg-to' }, targetLabel), ' ', - el('span', { class: 'msg-sep' }, 'asks:'), - ); - if (q.deadline_at) { - // Tag the chip with its deadline so the global 1s ticker - // can refresh the text without re-rendering the questions section. - const ttlEl = el('span', { - class: 'q-ttl', 'data-deadline': String(q.deadline_at), - }); - ttlEl.textContent = formatTtl( - q.deadline_at - Math.floor(Date.now() / 1000), - ); - head.append(' ', ttlEl); - } - const qBody = el('div', { class: 'q-body' }); - appendLinkified(qBody, q.question, q.question_refs); - li.append(head, qBody); - const f = el('form', { - method: 'POST', action: '/answer-question/' + q.id, - class: 'qform', 'data-async': '', 'data-no-refresh': '', - }); - const hasOptions = q.options && q.options.length; - const isMulti = !!q.multi && hasOptions; - const freeText = el('textarea', { - name: 'answer-free', rows: '2', autocomplete: 'off', - placeholder: (hasOptions ? 'or type your own…' : 'your answer') - + ' (shift+enter for newline)', - }); - // Enter submits; shift+enter inserts a newline (textarea default). - freeText.addEventListener('keydown', (e) => { - if (e.key === 'Enter' && !e.shiftKey) { - e.preventDefault(); - f.requestSubmit(); - } - }); - const optionGroup = el('div', { class: 'q-options' }); - if (hasOptions) { - for (const opt of q.options) { - const inputType = isMulti ? 'checkbox' : 'radio'; - const id = 'q' + q.id + '-' + Math.random().toString(36).slice(2, 8); - const input = el('input', { type: inputType, name: 'choice', value: opt, id }); - const label = el('label', { for: id }, ' ' + opt); - optionGroup.append(el('div', { class: 'q-option' }, input, label)); - } - } - // On submit, build the final `answer` field from selected - // options + free-text, joined by ', '. This lets the operator - // pick options AND add free text in the same form. - f.addEventListener('submit', (ev) => { - const parts = []; - for (const cb of f.querySelectorAll('input[name="choice"]:checked')) { - parts.push(cb.value); - } - const ft = (freeText.value || '').trim(); - if (ft) parts.push(ft); - const merged = parts.join(', '); - // Replace the existing hidden `answer` (if any) with the merged value. - const existing = f.querySelector('input[name="answer"]'); - if (existing) existing.remove(); - f.append(el('input', { type: 'hidden', name: 'answer', value: merged })); - if (!merged) { ev.preventDefault(); alert('pick an option or type an answer'); } - }, true); - if (hasOptions) f.append(optionGroup); - const buttons = el('div', { class: 'q-buttons' }); - // On peer threads the operator's answer is an override — - // mark the button so it's clear what the click does (the - // backend permits it via OperatorQuestions::answer's - // answerer-auth rule). - const answerLabel = q.target - ? (isMulti ? '⤿ 0V3RR1D3 · ' + q.options.length + ' opts' : '⤿ 0V3RR1D3') - : (isMulti ? '▸ ANSW3R · ' + q.options.length + ' opts' : '▸ ANSW3R'); - buttons.append( - el('button', { - type: 'submit', - class: 'btn btn-approve' + (q.target ? ' btn-override' : ''), - title: q.target ? `override-answer on behalf of operator (target was ${q.target})` : '', - }, answerLabel), - ); - f.append( - el('div', { class: 'q-free' }, freeText), - buttons, - ); - li.append(f); - // Separate form so the cancel button doesn't get the answer - // merge-on-submit handler attached to the main form. - const cancelTargetLabel = q.target ? q.target : 'asker'; - const cancelForm = el('form', { - method: 'POST', action: '/cancel-question/' + q.id, - class: 'qform-cancel', 'data-async': '', 'data-no-refresh': '', - 'data-confirm': `cancel this question? ${cancelTargetLabel} will see ` - + '"[cancelled]" as the answer.', - }); - cancelForm.append( - el('button', { type: 'submit', class: 'btn btn-deny' }, '✗ CANC3L'), - ); - li.append(cancelForm); + // Auto-reset a stale per-agent filter: if the operator had `agent:foo` + // selected and all of foo's questions resolved, foo's chip disappears + // from the row. Without a reset the section would show "no questions + // match this filter" with no active chip visible — confusing. Fall back + // to `all` whenever the stored value is no longer a valid chip value. + let activeFilter = getQuestionsFilter(); + const validFilters = new Set(['all', 'operator', 'peer', + ...Array.from(participants).map((n) => 'agent:' + n)]); + if (!validFilters.has(activeFilter)) { + activeFilter = 'all'; + // Write directly to localStorage to avoid the re-render that + // setQuestionsFilter() triggers (we're already mid-render). + localStorage.setItem(QUESTIONS_FILTER_KEY, 'all'); + } + + const pending = allPending.filter((q) => questionMatchesFilter(q, activeFilter)); + + const filterRow = el('div', { class: 'questions-filters' }); + const mkChip = (value, label) => { + const b = el('button', { + type: 'button', + class: 'q-filter-chip' + (activeFilter === value ? ' active' : ''), + }, label); + b.addEventListener('click', () => setQuestionsFilter(value)); + return b; + }; + // Count pending questions per filter value so each chip shows its + // own hit count — the operator can see "operator · 2 / peer · 3" + // at a glance without clicking through each tab. + const operatorCount = allPending.filter((q) => !q.target).length; + const peerCount = allPending.filter((q) => !!q.target).length; + const agentCount = (name) => allPending.filter( + (q) => q.asker === name || q.target === name).length; + filterRow.append( + mkChip('all', `all · ${allPending.length}`), + mkChip('operator', `@operator · ${operatorCount}`), + mkChip('peer', `@peer · ${peerCount}`), + ); + for (const name of Array.from(participants).sort()) { + filterRow.append(mkChip('agent:' + name, `@${name} · ${agentCount(name)}`)); + } + + // Evict resolved/cancelled questions from the row cache. + const allPendingIds = new Set(allPending.map((q) => q.id)); + for (const id of questionRowCache.keys()) { + if (!allPendingIds.has(id)) questionRowCache.delete(id); + } + + // Build the ordered list of
  • elements, reusing cached nodes whose + // serialised state hasn't changed. This is what preserves textarea + // draft text and radio/checkbox selections across re-renders. + const orderedLis = pending.map((q) => { + const fp = questionRowFingerprint(q); + const cached = questionRowCache.get(q.id); + if (cached && cached.fingerprint === fp) return cached.el; + const li = buildQuestionLi(q); + questionRowCache.set(q.id, { el: li, fingerprint: fp }); return li; + }); + + // Save the history
    open state before the DOM swap so it + // isn't collapsed every time a question arrives while it's open. + const historyWasOpen = root.querySelector('.q-history')?.open ?? false; + + const children = [filterRow]; + if (!pending.length) { + children.push(el('p', { class: 'empty' }, + activeFilter === 'all' ? 'no pending questions' : 'no questions match this filter')); + } else { + const ul = el('ul', { class: 'questions' }); + for (const li of orderedLis) ul.append(li); + children.push(ul); } - export function renderQuestions() { - const root = $('questions-section'); - // #questions-section only lives on /dashboard.html (Y3R C4LL tab); - // no-op when the section is missing. `question_added` / - // `question_resolved` SSE events route through here. - if (!root) return; - // Snapshot open
    state so SSE-triggered re-renders restore - // any expanded sections. The keyed-cache approach reuses question - //
  • nodes (preserving textarea/checkbox state) and only rebuilds - // cache-miss rows, so we no longer wipe the DOM at the start. - const openDetails = snapshotOpenDetails(); - const fmt = (n) => new Date(n * 1000).toISOString().replace('T', ' ').slice(0, 19); - const allPending = questionsState.pending; - - // Filter chips. Always include `all` / `operator` / `peer`; add - // per-agent chips for any agent that appears as asker or target - // in the pending list so the operator can isolate a single - // thread without typing. - const participants = new Set(); - for (const q of allPending) { - participants.add(q.asker); - if (q.target) participants.add(q.target); + // Answered question history (read-only, no inputs — built fresh each render). + const hist = questionsState.history; + if (hist.length) { + const details = el('details', { class: 'q-history', 'data-restore-key': 'q-history' }); + details.append(el('summary', {}, '◆ answ3red (' + hist.length + ')')); + const hul = el('ul', { class: 'questions questions-answered' }); + for (const q of hist) { + const targetLabel = q.target || 'operator'; + const li = el('li', { class: 'question question-answered' + (q.target ? ' question-peer' : '') }); + const head = el('div', { class: 'q-head' }, + el('span', { class: 'msg-ts' }, fmt(q.answered_at)), ' ', + el('span', { class: 'msg-from' }, q.asker), ' ', + el('span', { class: 'msg-sep' }, '→'), ' ', + el('span', { class: q.target ? 'msg-to msg-to-peer' : 'msg-to' }, targetLabel), ' ', + el('span', { class: 'msg-sep' }, 'asked:'), + ); + const histBody = el('div', { class: 'q-body' }); + appendLinkified(histBody, q.question, q.question_refs); + const ansText = el('span', { class: 'q-answer-text' }); + appendLinkified(ansText, q.answer || '(none)', q.answer_refs); + const ansLine = el('div', { class: 'q-answer' }, + el('span', { class: 'msg-sep' }, `${q.answerer || '?'}: `), + ansText, + ); + li.append(head, histBody, ansLine); + hul.append(li); } - - // Auto-reset a stale per-agent filter: if the operator had `agent:foo` - // selected and all of foo's questions resolved, foo's chip disappears - // from the row. Without a reset the section would show "no questions - // match this filter" with no active chip visible — confusing. Fall back - // to `all` whenever the stored value is no longer a valid chip value. - let activeFilter = getQuestionsFilter(); - const validFilters = new Set(['all', 'operator', 'peer', - ...Array.from(participants).map((n) => 'agent:' + n)]); - if (!validFilters.has(activeFilter)) { - activeFilter = 'all'; - // Write directly to localStorage to avoid the re-render that - // setQuestionsFilter() triggers (we're already mid-render). - localStorage.setItem(QUESTIONS_FILTER_KEY, 'all'); - } - - const pending = allPending.filter((q) => questionMatchesFilter(q, activeFilter)); - - const filterRow = el('div', { class: 'questions-filters' }); - const mkChip = (value, label) => { - const b = el('button', { - type: 'button', - class: 'q-filter-chip' + (activeFilter === value ? ' active' : ''), - }, label); - b.addEventListener('click', () => setQuestionsFilter(value)); - return b; - }; - // Count pending questions per filter value so each chip shows its - // own hit count — the operator can see "operator · 2 / peer · 3" - // at a glance without clicking through each tab. - const operatorCount = allPending.filter((q) => !q.target).length; - const peerCount = allPending.filter((q) => !!q.target).length; - const agentCount = (name) => allPending.filter( - (q) => q.asker === name || q.target === name).length; - filterRow.append( - mkChip('all', `all · ${allPending.length}`), - mkChip('operator', `@operator · ${operatorCount}`), - mkChip('peer', `@peer · ${peerCount}`), - ); - for (const name of Array.from(participants).sort()) { - filterRow.append(mkChip('agent:' + name, `@${name} · ${agentCount(name)}`)); - } - - // Evict resolved/cancelled questions from the row cache. - const allPendingIds = new Set(allPending.map((q) => q.id)); - for (const id of questionRowCache.keys()) { - if (!allPendingIds.has(id)) questionRowCache.delete(id); - } - - // Build the ordered list of
  • elements, reusing cached nodes whose - // serialised state hasn't changed. This is what preserves textarea - // draft text and radio/checkbox selections across re-renders. - const orderedLis = pending.map((q) => { - const fp = questionRowFingerprint(q); - const cached = questionRowCache.get(q.id); - if (cached && cached.fingerprint === fp) return cached.el; - const li = buildQuestionLi(q); - questionRowCache.set(q.id, { el: li, fingerprint: fp }); - return li; - }); - - // Save the history
    open state before the DOM swap so it - // isn't collapsed every time a question arrives while it's open. - const historyWasOpen = root.querySelector('.q-history')?.open ?? false; - - const children = [filterRow]; - if (!pending.length) { - children.push(el('p', { class: 'empty' }, - activeFilter === 'all' ? 'no pending questions' : 'no questions match this filter')); - } else { - const ul = el('ul', { class: 'questions' }); - for (const li of orderedLis) ul.append(li); - children.push(ul); - } - - // Answered question history (read-only, no inputs — built fresh each render). - const hist = questionsState.history; - if (hist.length) { - const details = el('details', { class: 'q-history', 'data-restore-key': 'q-history' }); - details.append(el('summary', {}, '◆ answ3red (' + hist.length + ')')); - const hul = el('ul', { class: 'questions questions-answered' }); - for (const q of hist) { - const targetLabel = q.target || 'operator'; - const li = el('li', { class: 'question question-answered' + (q.target ? ' question-peer' : '') }); - const head = el('div', { class: 'q-head' }, - el('span', { class: 'msg-ts' }, fmt(q.answered_at)), ' ', - el('span', { class: 'msg-from' }, q.asker), ' ', - el('span', { class: 'msg-sep' }, '→'), ' ', - el('span', { class: q.target ? 'msg-to msg-to-peer' : 'msg-to' }, targetLabel), ' ', - el('span', { class: 'msg-sep' }, 'asked:'), - ); - const histBody = el('div', { class: 'q-body' }); - appendLinkified(histBody, q.question, q.question_refs); - const ansText = el('span', { class: 'q-answer-text' }); - appendLinkified(ansText, q.answer || '(none)', q.answer_refs); - const ansLine = el('div', { class: 'q-answer' }, - el('span', { class: 'msg-sep' }, `${q.answerer || '?'}: `), - ansText, - ); - li.append(head, histBody, ansLine); - hul.append(li); - } - details.append(hul); - children.push(details); - } - - root.replaceChildren(...children); - // Restore history open state after the DOM swap. - if (historyWasOpen) { - const histEl = root.querySelector('.q-history'); - if (histEl) histEl.open = true; - } - restoreOpenDetails(openDetails); + details.append(hul); + children.push(details); } - // Format a remaining-seconds count as the `⏳ …` TTL chip text on a - // question card. Bucketed at minutes / hours so a long deadline stays - // readable; "expiring…" once the deadline has passed (the host-side - // ttl-watchdog will fire shortly). - function formatTtl(remaining) { - if (remaining <= 0) return 'expiring…'; - if (remaining < 60) return '⏳ ' + remaining + 's'; - if (remaining < 3600) { - return '⏳ ' + Math.floor(remaining / 60) + 'm ' - + (remaining % 60) + 's'; - } - return '⏳ ' + Math.floor(remaining / 3600) + 'h ' - + Math.floor((remaining % 3600) / 60) + 'm'; + root.replaceChildren(...children); + // Restore history open state after the DOM swap. + if (historyWasOpen) { + const histEl = root.querySelector('.q-history'); + if (histEl) histEl.open = true; } + restoreOpenDetails(openDetails); +} - // Single page-wide ticker that refreshes every TTL chip in place - // each second. Renderers stamp `data-deadline` on the - // chip; this just updates `textContent`, no re-render of the - // questions section. No-op when no chips are on screen, so the - // cost is negligible. - setInterval(() => { - const now = Math.floor(Date.now() / 1000); - document.querySelectorAll('.q-ttl[data-deadline]').forEach((node) => { - const deadline = Number(node.getAttribute('data-deadline')); - if (!Number.isFinite(deadline)) return; - node.textContent = formatTtl(deadline - now); - }); - }, 1000); +// Format a remaining-seconds count as the `⏳ …` TTL chip text on a +// question card. Bucketed at minutes / hours so a long deadline stays +// readable; "expiring…" once the deadline has passed (the host-side +// ttl-watchdog will fire shortly). +function formatTtl(remaining) { + if (remaining <= 0) return 'expiring…'; + if (remaining < 60) return '⏳ ' + remaining + 's'; + if (remaining < 3600) { + return '⏳ ' + Math.floor(remaining / 60) + 'm ' + + (remaining % 60) + 's'; + } + return '⏳ ' + Math.floor(remaining / 3600) + 'h ' + + Math.floor((remaining % 3600) / 60) + 'm'; +} + +// Single page-wide ticker that refreshes every TTL chip in place +// each second. Renderers stamp `data-deadline` on the +// chip; this just updates `textContent`, no re-render of the +// questions section. No-op when no chips are on screen, so the +// cost is negligible. +setInterval(() => { + const now = Math.floor(Date.now() / 1000); + document.querySelectorAll('.q-ttl[data-deadline]').forEach((node) => { + const deadline = Number(node.getAttribute('data-deadline')); + if (!Number.isFinite(deadline)) return; + node.textContent = formatTtl(deadline - now); + }); +}, 1000);