fix(admin): stop main-thread freeze when opening admin after a run

Root cause: the /api/events SSE 'init' handler replayed the server log
buffer by calling appendLog() once per line:
  for (const logMsg of msg.logs) appendLog(logMsg);
appendLog sets `body.scrollTop = body.scrollHeight` every call — a
forced synchronous reflow. The buffer holds up to LOG_BUFFER_MAX = 5000
lines (hydrated from disk on boot + during a run), so opening admin
after a run meant ~5000 back-to-back reflows on the main thread and the
tab locked up. It also built 5000 DOM nodes only to trim back to 500.

live.html already solved this (seedLogBacklog guards the per-line scroll
behind _logSeeding and scrolls once); admin.html never got the parity.

Fix:
- Extract _buildLogEntry(msg, cat): builds one entry div with no DOM
  insertion/scroll/reflow. Shared by live appendLog + batch replay so
  categorization / escHtml escaping / linkification stay byte-identical.
- appendLogBatch(msgs): keep only the last LOG_DOM_MAX (=500) lines —
  the cap appendLog enforces anyway, so the visible result is identical
  — build them into ONE DocumentFragment, insert + scroll exactly once.
  One reflow instead of thousands; 500 nodes built instead of 5000.
- init handler calls appendLogBatch(msg.logs).
- Hoist the magic 500 into a named LOG_DOM_MAX const (both trim sites).

Test: new test/admin-log-batch.test.js (11) runs the REAL extracted
functions against a fake DOM and asserts O(cap) work + a single reflow
for a 5000-line buffer, last-500 retention/order, reconnect bounding,
guards, and live-path trim. Wired into npm test. Adversarial review:
SHIP (7/7 parity risks verified).

Author: Sentinel-Bluebuilder

admin.html

@@ -1440,9 +1440,11 @@ <h1 style="margin:0;flex:0 0 auto">SENTINEL NODE TEST</h1>
         if (msg.type === 'init' || msg.type === 'state') {
           state = Object.assign(state, msg.state);
           if (msg.results) { resultsArr = msg.results; renderTable(); }
-          // Restore logs from server buffer on init
+          // Restore logs from server buffer on init — batch-render in a single
+          // DocumentFragment so a full 5000-line buffer doesn't trigger one
+          // forced reflow per line (that froze the admin tab on open).
           if (msg.type === 'init' && msg.logs && msg.logs.length > 0) {
-            for (const logMsg of msg.logs) appendLog(logMsg);
+            appendLogBatch(msg.logs);
           }
           // Reset retest button when done
           if (state.status === 'done' || state.status === 'idle') {
@@ -2096,10 +2098,18 @@ <h1 style="margin:0;flex:0 0 auto">SENTINEL NODE TEST</h1>
       return (row.dataset.cat || 'node') === f;
     }
 
+    // Max log rows kept in the DOM. The server buffer (LOG_BUFFER_MAX) is far
+    // larger; replaying all of it would build thousands of rows we immediately
+    // trim away — see appendLogBatch for why that mattered.
+    const LOG_DOM_MAX = 500;
+
+    // Build ONE log-entry div — no DOM insertion, no scroll, no reflow. Shared
+    // by the live single-line appendLog and the batched init replay so
+    // categorization / escaping / linkification stay byte-identical between the
+    // two paths.
     // `cat` is the server-sent category for live SSE lines; replayed init buffer
     // lines arrive as plain strings (no cat), so re-derive via logCategory().
-    function appendLog(msg, cat) {
-      const body = document.getElementById('logBody');
+    function _buildLogEntry(msg, cat) {
       const div = document.createElement('div');
       let cls = '';
       if (/⚠|warn|pause|insufficient/i.test(msg)) cls = 'log-warn';
@@ -2116,9 +2126,34 @@ <h1 style="margin:0;flex:0 0 auto">SENTINEL NODE TEST</h1>
       const linkified = escaped.replace(/(https?:\/\/[^\s<]+)/g, (u) => `<a href="${u}" target="_blank" rel="noopener" style="color:var(--accent);text-decoration:underline">${u}</a>`);
       div.innerHTML = `<span class="log-time">${ts}</span>` + linkified;
       if (!_logEntryMatches(div, _logFilter)) div.style.display = 'none';
-      body.appendChild(div);
+      return div;
+    }
+
+    // Live single-line append: one row, one reflow — fine at live cadence.
+    function appendLog(msg, cat) {
+      const body = document.getElementById('logBody');
+      body.appendChild(_buildLogEntry(msg, cat));
+      body.scrollTop = body.scrollHeight;
+      if (body.children.length > LOG_DOM_MAX) body.removeChild(body.firstChild);
+    }
+
+    // Batch-replay the server's init log buffer (up to LOG_BUFFER_MAX=5000 lines)
+    // WITHOUT freezing the main thread. The old init path called appendLog() per
+    // line, and each call set `scrollTop = scrollHeight` — a forced synchronous
+    // reflow — so a full buffer meant thousands of reflows on page load and the
+    // tab locked up. Here we (a) keep only the last LOG_DOM_MAX lines (the cap
+    // appendLog enforces anyway, so the visible result is identical), (b) build
+    // them into a single DocumentFragment, and (c) insert + scroll exactly once.
+    // One reflow instead of thousands.
+    function appendLogBatch(msgs) {
+      if (!Array.isArray(msgs) || msgs.length === 0) return;
+      const body = document.getElementById('logBody');
+      const tail = msgs.length > LOG_DOM_MAX ? msgs.slice(-LOG_DOM_MAX) : msgs;
+      const frag = document.createDocumentFragment();
+      for (const m of tail) frag.appendChild(_buildLogEntry(m));
+      body.appendChild(frag);
       body.scrollTop = body.scrollHeight;
-      if (body.children.length > 500) body.removeChild(body.firstChild);
+      while (body.children.length > LOG_DOM_MAX) body.removeChild(body.firstChild);
     }
 
     // ─── Test Run Management ────────────────────────────────────────────────

package.json

@@ -38,7 +38,7 @@
     "postinstall": "node scripts/postinstall.js",
     "start": "node server.js",
     "audit": "node server.js",
-    "test": "node test/smoke.test.js && node test/db.smoke.test.js && node test/continuous.smoke.test.js && node test/security.test.js && node test/failure-log-ux.test.js && node test/public-no-action-buttons.test.js && node test/onchain-decode.test.js",
+    "test": "node test/smoke.test.js && node test/db.smoke.test.js && node test/continuous.smoke.test.js && node test/security.test.js && node test/failure-log-ux.test.js && node test/public-no-action-buttons.test.js && node test/onchain-decode.test.js && node test/admin-log-batch.test.js",
     "test:ui": "node test/ui.smoke.test.js",
     "test:integration": "node test/continuous.audit-integration.test.js && node test/continuous.live-db-write.test.js && node test/node-detail.smoke.test.js && node test/resume-results-seed.test.js",
     "verify:prod-db": "node scripts/verify-prod-db.mjs",

test/admin-log-batch.test.js

@@ -0,0 +1,150 @@
+/**
+ * Admin log-replay — main-thread regression test
+ *
+ * Bug: opening admin.html replayed the server log buffer (up to
+ * LOG_BUFFER_MAX = 5000 lines) by calling appendLog() once per line. Each
+ * appendLog set `body.scrollTop = body.scrollHeight`, a forced synchronous
+ * reflow — so a full buffer meant ~5000 reflows on page load and the tab froze.
+ * It also built 5000 DOM nodes only to trim back to 500.
+ *
+ * Fix: appendLogBatch() builds the (last 500) lines into one DocumentFragment
+ * and inserts + scrolls exactly once. This test runs the REAL functions from
+ * admin.html against a fake DOM and asserts the work is O(cap), single-reflow.
+ *
+ * Run: node test/admin-log-batch.test.js
+ */
+
+import { readFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { dirname, join } from 'node:path';
+import vm from 'node:vm';
+
+const out = { pass: 0, fail: 0, errors: [] };
+function ok(cond, name) {
+  if (cond) { out.pass++; console.log(`  PASS  ${name}`); }
+  else      { out.fail++; out.errors.push(name); console.log(`  FAIL  ${name}`); }
+}
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const html = readFileSync(join(__dirname, '..', 'admin.html'), 'utf8');
+
+// Extract a `function NAME(...) { ... }` block by balanced-brace scan. The
+// admin.html log helpers only contain balanced braces (template `${}` pairs),
+// so a simple depth counter is sufficient here.
+function extractFn(src, name) {
+  const m = new RegExp(`function\\s+${name}\\s*\\(`).exec(src);
+  if (!m) throw new Error(`function ${name} not found in admin.html`);
+  let depth = 0, started = false, j = m.index;
+  for (; j < src.length; j++) {
+    const c = src[j];
+    if (c === '{') { depth++; started = true; }
+    else if (c === '}') { depth--; if (started && depth === 0) { j++; break; } }
+  }
+  return src.slice(m.index, j);
+}
+
+const FNS = ['escHtml', 'logCategory', '_logEntryMatches', '_buildLogEntry', 'appendLog', 'appendLogBatch'];
+const extracted = FNS.map(n => extractFn(html, n)).join('\n\n');
+
+// ─── Fake DOM ──────────────────────────────────────────────────────────────
+let createElementCount = 0;
+let createFragCount = 0;
+
+function makeNode(tag) {
+  const node = {
+    tagName: tag,
+    dataset: {},
+    style: {},
+    _children: [],
+    _scrollWrites: 0,
+    className: '',
+    innerHTML: '',
+    scrollHeight: 1000,
+    __isFrag: tag === '#fragment',
+    get children() { return this._children; },
+    get firstChild() { return this._children[0]; },
+    appendChild(c) {
+      if (c && c.__isFrag) { for (const cc of c._children) this._children.push(cc); c._children = []; }
+      else this._children.push(c);
+      return c;
+    },
+    insertBefore(c) { this._children.unshift(c); return c; },
+    removeChild(c) { const i = this._children.indexOf(c); if (i >= 0) this._children.splice(i, 1); return c; },
+  };
+  // Count writes to scrollTop — each write is a forced reflow in the browser.
+  let _scrollTop = 0;
+  Object.defineProperty(node, 'scrollTop', {
+    get() { return _scrollTop; },
+    set(v) { _scrollTop = v; node._scrollWrites++; },
+  });
+  return node;
+}
+
+const logBody = makeNode('div');
+const fakeDocument = {
+  getElementById(id) { return id === 'logBody' ? logBody : null; },
+  createElement(tag) { createElementCount++; return makeNode(tag); },
+  createDocumentFragment() { createFragCount++; return makeNode('#fragment'); },
+};
+
+const sandbox = {
+  document: fakeDocument,
+  _logFilter: 'all',
+  LOG_DOM_MAX: 500,
+  Date,
+  console,
+};
+vm.createContext(sandbox);
+vm.runInContext(extracted, sandbox);
+
+const LOG_DOM_MAX = 500;
+
+console.log('\nAdmin log-replay — main-thread regression\n');
+
+// ─── 1. Full 5000-line buffer: O(cap) work, single reflow ────────────────────
+console.log('[1] appendLogBatch(5000 lines) is bounded + single-reflow');
+const big = Array.from({ length: 5000 }, (_, i) => `line ${i} — node sentnode1${i}`);
+createElementCount = 0; createFragCount = 0; logBody._scrollWrites = 0;
+vm.runInContext('appendLogBatch(globalThis.__big)', Object.assign(sandbox, { __big: big }));
+
+ok(logBody.children.length === LOG_DOM_MAX,
+   `DOM capped at ${LOG_DOM_MAX} rows (got ${logBody.children.length})`);
+ok(logBody._scrollWrites === 1,
+   `exactly ONE reflow for the whole buffer (got ${logBody._scrollWrites})`);
+ok(createElementCount === LOG_DOM_MAX,
+   `builds only ${LOG_DOM_MAX} nodes, not 5000 (got ${createElementCount})`);
+ok(createFragCount === 1, `uses one DocumentFragment (got ${createFragCount})`);
+// Only the LAST 500 lines are kept (matches the cap the live path enforces).
+ok(logBody.children[logBody.children.length - 1].innerHTML.includes('line 4999'),
+   'keeps the newest line (4999) at the tail');
+ok(logBody.children[0].innerHTML.includes('line 4500'),
+   'oldest kept line is 4500 (last 500 of 5000)');
+
+// ─── 2. Small buffer: appends all, still single reflow ───────────────────────
+console.log('[2] appendLogBatch(small buffer) appends all, single reflow');
+logBody._children = []; createElementCount = 0; logBody._scrollWrites = 0;
+const small = ['alpha', 'bravo', 'charlie'];
+vm.runInContext('appendLogBatch(globalThis.__small)', Object.assign(sandbox, { __small: small }));
+ok(logBody.children.length === 3, `appended all 3 (got ${logBody.children.length})`);
+ok(logBody._scrollWrites === 1, `single reflow (got ${logBody._scrollWrites})`);
+
+// ─── 3. Guards ───────────────────────────────────────────────────────────────
+console.log('[3] guards: empty / non-array are no-ops');
+logBody._children = []; logBody._scrollWrites = 0;
+vm.runInContext('appendLogBatch([]); appendLogBatch(null); appendLogBatch(undefined)', sandbox);
+ok(logBody.children.length === 0, 'no rows added for empty/null/undefined');
+ok(logBody._scrollWrites === 0, 'no reflow for empty/null/undefined');
+
+// ─── 4. Live single-line appendLog still trims to cap ────────────────────────
+console.log('[4] appendLog single-line path stays bounded');
+logBody._children = [];
+for (let i = 0; i < 600; i++) {
+  vm.runInContext(`appendLog(globalThis.__m)`, Object.assign(sandbox, { __m: `live ${i}` }));
+}
+ok(logBody.children.length === LOG_DOM_MAX,
+   `single-line appends trim to ${LOG_DOM_MAX} (got ${logBody.children.length})`);
+
+console.log(`\n${'='.repeat(60)}\nRESULTS: ${out.pass} passed, ${out.fail} failed (${out.pass + out.fail} total)`);
+if (out.errors.length) for (const e of out.errors) console.log(`  FAIL: ${e}`);
+console.log('='.repeat(60));
+process.exit(out.fail ? 1 : 0);