feat(logs): newest-first log order (latest on top, older below) — admin + live

Logs now show the latest line at the TOP with older lines moving down, on both
the public /live page and admin. Implemented by prepending instead of appending:
- appendLog: insertBefore(div, firstChild) → newest at top; scrollTop=0 keeps it
  in view; trim removes lastChild (oldest) off the bottom.
- live seedLogBacklog: unchanged loop (oldest→newest) now lands newest on top via
  the prepend; final scroll to top.
- admin appendLogBatch: build the fragment newest→oldest and prepend the whole
  batch; trim the oldest off the tail.
- admin setLogFilter: scroll to top after filtering.

Optimized: writing scrollTop=0 (instead of reading scrollHeight) avoids the
forced synchronous layout reflow the old append path triggered per line — the
batch path stays single-reflow and O(cap).

Tests: admin-log-batch updated for newest-first (fake DOM insertBefore now
expands fragments + exposes lastChild; new assertions lock newest-at-head for
the batch, single-line, and trim paths). Full suite green.

Author: Sentinel-Bluebuilder

admin.html

@@ -2101,7 +2101,7 @@ <h1 style="margin:0;flex:0 0 auto">SENTINEL NODE TEST</h1>
       for (const row of body.children) {
         row.style.display = _logEntryMatches(row, f) ? '' : 'none';
       }
-      body.scrollTop = body.scrollHeight;
+      body.scrollTop = 0;
     }
 
     function _logEntryMatches(row, f) {
@@ -2161,9 +2161,12 @@ <h1 style="margin:0;flex:0 0 auto">SENTINEL NODE TEST</h1>
       const body = document.getElementById('logBody');
       const { msg, ts } = _logEntryFields(entry);
       const tsMs = (entry && typeof entry === 'object') ? ts : Date.now();
-      body.appendChild(_buildLogEntry(msg, cat, tsMs));
-      body.scrollTop = body.scrollHeight;
-      if (body.children.length > LOG_DOM_MAX) body.removeChild(body.firstChild);
+      // Newest-first: prepend at the TOP, scroll to the top to keep it in view,
+      // and trim the OLDEST off the bottom. Writing scrollTop=0 (vs reading
+      // scrollHeight) avoids a forced synchronous layout — one cheap reflow.
+      body.insertBefore(_buildLogEntry(msg, cat, tsMs), body.firstChild);
+      body.scrollTop = 0;
+      if (body.children.length > LOG_DOM_MAX) body.removeChild(body.lastChild);
     }
 
     // Batch-replay the server's init log buffer (up to LOG_BUFFER_MAX=5000 lines)
@@ -2179,14 +2182,18 @@ <h1 style="margin:0;flex:0 0 auto">SENTINEL NODE TEST</h1>
       const body = document.getElementById('logBody');
       const tail = entries.length > LOG_DOM_MAX ? entries.slice(-LOG_DOM_MAX) : entries;
       const frag = document.createDocumentFragment();
-      // Replay uses each line's STORED emission ts (null → blank) — never now.
-      for (const e of tail) {
-        const { msg, ts } = _logEntryFields(e);
+      // Newest-first order: walk the tail newest→oldest so the fragment's first
+      // child is the newest line. Replay uses each line's STORED emission ts
+      // (null → blank) — never now.
+      for (let i = tail.length - 1; i >= 0; i--) {
+        const { msg, ts } = _logEntryFields(tail[i]);
         frag.appendChild(_buildLogEntry(msg, undefined, ts));
       }
-      body.appendChild(frag);
-      body.scrollTop = body.scrollHeight;
-      while (body.children.length > LOG_DOM_MAX) body.removeChild(body.firstChild);
+      // Prepend the whole batch above anything already shown, scroll to the top,
+      // and trim the OLDEST off the bottom.
+      body.insertBefore(frag, body.firstChild);
+      body.scrollTop = 0;
+      while (body.children.length > LOG_DOM_MAX) body.removeChild(body.lastChild);
     }
 
     // ─── Test Run Management ────────────────────────────────────────────────

live.html

@@ -923,10 +923,10 @@ <h1 class="live-page-title">
     // changes — the SSE init only fires on the initial connection.
     // Replay a persisted log backlog into the panel without freezing the page.
     // The panel only ever keeps the last MAX_LOG entries, so replaying more is
-    // wasted work — cap to the tail. appendLog forces a layout reflow per call
-    // (scrollTop=scrollHeight); _logSeeding suppresses that during the bulk
-    // loop and we scroll once at the end. The server buffer is LOG_BUFFER_MAX
-    // (5000) lines, so the naive replay was up to ~5000 synchronous reflows.
+    // wasted work — cap to the tail. _logSeeding suppresses appendLog's per-line
+    // scroll during the bulk loop and we scroll once at the end. appendLog
+    // prepends (newest on top), so replaying the tail oldest→newest leaves the
+    // newest line at the top. The server buffer is LOG_BUFFER_MAX (5000) lines.
     function seedLogBacklog(lines) {
       const body = document.getElementById('logBody');
       if (!body || body.children.length !== 0) return;
@@ -938,7 +938,7 @@ <h1 class="live-page-title">
       } finally {
         _logSeeding = false;
       }
-      body.scrollTop = body.scrollHeight;
+      body.scrollTop = 0;
     }
 
     async function seedLogsFromRest() {
@@ -1128,8 +1128,8 @@ <h1 class="live-page-title">
     const LIVE_PAGE_SIZE = 50;
     let _livePage = 1;
     const MAX_LOG  = 400;
-    // Suppresses appendLog's per-line scrollTop=scrollHeight (a forced layout
-    // reflow) during bulk backlog replay — see seedLogBacklog().
+    // Suppresses appendLog's per-line scroll reset during bulk backlog replay,
+    // so we scroll once at the end — see seedLogBacklog().
     let _logSeeding = false;
 
     // ─── Helpers ───
@@ -1547,12 +1547,14 @@ <h1 class="live-page-title">
       }
 
       div.innerHTML = parts.join('');
-      body.appendChild(div);
+      // Newest-first: prepend each new line at the TOP, scroll to the top to
+      // keep it in view, and trim the OLDEST off the bottom.
+      body.insertBefore(div, body.firstChild);
       // During bulk backlog replay we scroll once at the end (seedLogBacklog) —
-      // reading scrollHeight here per line forces a synchronous layout reflow,
-      // which froze the page when replaying thousands of buffered lines.
-      if (!_logSeeding) body.scrollTop = body.scrollHeight;
-      if (body.children.length > MAX_LOG) body.removeChild(body.firstChild);
+      // reading scroll positions here per line forces a synchronous layout
+      // reflow, which froze the page when replaying thousands of buffered lines.
+      if (!_logSeeding) body.scrollTop = 0;
+      if (body.children.length > MAX_LOG) body.removeChild(body.lastChild);
     }
 
     // ─── Toast / status ───

test/admin-log-batch.test.js

@@ -11,6 +11,10 @@
  * 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.
  *
+ * Logs are newest-first: appendLog prepends and trims the oldest off the tail;
+ * appendLogBatch builds the fragment newest→oldest and prepends it. The order
+ * assertions below lock that (newest at the head/top).
+ *
  * Run: node test/admin-log-batch.test.js
  */
 
@@ -63,12 +67,18 @@ function makeNode(tag) {
     __isFrag: tag === '#fragment',
     get children() { return this._children; },
     get firstChild() { return this._children[0]; },
+    get lastChild() { return this._children[this._children.length - 1]; },
     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; },
+    // Prepend (newest-first). Expand a fragment at the front preserving order.
+    insertBefore(c) {
+      if (c && c.__isFrag) { this._children.unshift(...c._children); c._children = []; }
+      else 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.
@@ -115,10 +125,11 @@ 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)');
+// Newest-first: the newest line sits at the HEAD, oldest-kept at the tail.
+ok(logBody.children[0].innerHTML.includes('line 4999'),
+   'keeps the newest line (4999) at the head (top)');
+ok(logBody.children[logBody.children.length - 1].innerHTML.includes('line 4500'),
+   'oldest kept line is 4500 at the tail (last 500 of 5000)');
 
 // ─── 2. Small buffer: appends all, still single reflow ───────────────────────
 console.log('[2] appendLogBatch(small buffer) appends all, single reflow');
@@ -127,6 +138,10 @@ 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})`);
+// Newest-first: last-in (charlie) at the head, first-in (alpha) at the tail.
+ok(logBody.children[0].innerHTML.includes('charlie') &&
+   logBody.children[2].innerHTML.includes('alpha'),
+   'batch is newest-first (charlie at top, alpha at bottom)');
 
 // ─── 3. Guards ───────────────────────────────────────────────────────────────
 console.log('[3] guards: empty / non-array are no-ops');
@@ -143,6 +158,12 @@ for (let i = 0; i < 600; i++) {
 }
 ok(logBody.children.length === LOG_DOM_MAX,
    `single-line appends trim to ${LOG_DOM_MAX} (got ${logBody.children.length})`);
+// Newest-first: the last line appended (live 599) is at the head; the oldest
+// surviving line (live 100, after trimming 0–99) is at the tail.
+ok(logBody.children[0].innerHTML.includes('live 599'),
+   'newest single-line append is at the head (top)');
+ok(logBody.children[logBody.children.length - 1].innerHTML.includes('live 100'),
+   'oldest surviving line is at the tail (trimmed from the bottom)');
 
 // ─── 5. Emission-time: replay uses stored ts, never render-time ──────────────
 console.log('[5] replay shows EMISSION time, live shows current time');