synabun 2.0.10 → 2.2.0

package/neural-interface/public/shared/context-menu.js

@@ -0,0 +1,372 @@
+// ═══════════════════════════════════════════
+// SynaBun Neural Interface — Context menu component
+// One menu at a time, at the pointer or by the focused element, in the box of
+// the menubar's dropdown and with its rows (.menu-item, .menu-shortcut,
+// .menu-submenu-arrow, .menu-sep). Items are data (context-menu-logic.js);
+// this module draws them, places the menu and its submenus inside the window,
+// takes the keys while it is open and closes on a press outside, Escape,
+// Tab, scroll, resize, window blur and after an action. Any area can open
+// one; the app's global right-click menu is ui-context-menu.js.
+// ═══════════════════════════════════════════
+
+import {
+  anchorPoint, firstIndex, lastIndex, normalizeItems, placeMenu, placeSubmenu, stepIndex, typeaheadIndex,
+} from './context-menu-logic.js';
+import { boundsForPoint, frameRect } from './app-frame.js';
+
+const SUBMENU_OPEN_DELAY = 120; // hover intent before a submenu opens
+const SUBMENU_GRACE = 300;      // the pointer may cross other rows on its way into an open submenu
+const TYPEAHEAD_RESET = 600;
+const ARROW_SVG = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>';
+
+let _open = null; // the open menu's handle
+
+/** Whether a menu is open. */
+export const isContextMenuOpen = () => !!_open;
+
+/** Close the open menu, if there is one. `refocus: false` leaves the keyboard where it is. */
+export function closeContextMenu(o) { _open?.close(o); }
+
+/** The root element of the open menu, or null. */
+export const openContextMenuElement = () => _open?.element || null;
+
+/**
+ * Open a menu.
+ * @param {object} o
+ * @param {import('./context-menu-logic.js').MenuItem[]} o.items
+ * @param {number} [o.x] @param {number} [o.y] where the press was (client px)
+ * @param {DOMRect | null} [o.anchorRect] opened from the keyboard: the focused element's box, used when x/y are missing
+ * @param {string} [o.label] the menu's accessible name
+ * @param {boolean} [o.keyboard] opened from the keyboard: the first row has the focus from the start
+ * @param {Element | null} [o.returnFocus] where the keyboard goes back to when the menu closes
+ * @param {() => void} [o.onClose]
+ * @returns {{ close: Function, element: HTMLElement } | null} null when no item is left to show
+ */
+export function openContextMenu({ items, x, y, anchorRect = null, label = '', keyboard = false,
+  returnFocus = document.activeElement, onClose } = {}) {
+  // A menu opened over another one hands the keyboard back to where the first one would have.
+  if (_open && (!returnFocus || _open.contains(returnFocus))) returnFocus = _open.returnFocus;
+  closeContextMenu({ refocus: false });
+  const list = normalizeItems(items);
+  if (!list.length) return null;
+
+  const levels = []; // [{ el, items, rows, active, parentRow }]
+  let bounds = null;  // the app frame for a menu opened inside it (it and its submenus stay in it), else the window
+  let closed = false;
+  let subTimer = 0;
+  let subPending = null;
+  let typed = '';
+  let typedAt = 0;
+
+  // ── Drawing ──
+  function drawRow(item) {
+    if (item.separator) {
+      const sep = document.createElement('div');
+      sep.className = 'menu-sep';
+      sep.setAttribute('role', 'separator');
+      return sep;
+    }
+    const row = document.createElement('div');
+    row.className = 'menu-item';
+    row.tabIndex = -1;
+    const checkable = typeof item.checked === 'boolean';
+    row.setAttribute('role', checkable ? 'menuitemcheckbox' : 'menuitem');
+    if (checkable) {
+      row.setAttribute('aria-checked', String(item.checked));
+      row.classList.toggle('active', item.checked);
+    }
+    if (item.id) row.dataset.ctxId = item.id;
+    if (item.disabled) {
+      row.classList.add('disabled');
+      row.setAttribute('aria-disabled', 'true');
+    }
+    const check = document.createElement('span');
+    check.className = 'menu-check';
+    check.setAttribute('aria-hidden', 'true');
+    check.textContent = checkable ? '✓' : '';
+    const text = document.createElement('span');
+    text.className = 'menu-text';
+    if (item.icon) {
+      const icon = document.createElement('span');
+      icon.className = 'menu-icon';
+      icon.setAttribute('aria-hidden', 'true');
+      icon.innerHTML = item.icon; // the app's own markup, never text from the page
+      text.append(icon);
+    }
+    const name = document.createElement('span');
+    name.className = 'app-ctx-label';
+    name.textContent = item.label;
+    text.append(name);
+    row.append(check, text);
+    if (item.submenu) {
+      row.setAttribute('aria-haspopup', 'menu');
+      row.setAttribute('aria-expanded', 'false');
+      const arrow = document.createElement('span');
+      arrow.className = 'menu-submenu-arrow';
+      arrow.setAttribute('aria-hidden', 'true');
+      arrow.innerHTML = ARROW_SVG;
+      row.append(arrow);
+    } else if (item.shortcut) {
+      const key = document.createElement('span');
+      key.className = 'menu-shortcut';
+      key.textContent = item.shortcut;
+      row.append(key);
+    }
+    return row;
+  }
+
+  function drawLevel(levelItems, name) {
+    const el = document.createElement('div');
+    el.className = 'app-ctx-menu';
+    el.setAttribute('role', 'menu');
+    if (name) el.setAttribute('aria-label', name);
+    el.tabIndex = -1;
+    el.style.visibility = 'hidden';
+    const rows = levelItems.map(drawRow);
+    el.append(...rows);
+    const level = { el, items: levelItems, rows, active: -1, parentRow: null };
+    el.addEventListener('pointermove', (event) => onHover(level, event));
+    el.addEventListener('click', (event) => {
+      const index = rowIndex(level, event.target);
+      if (index >= 0) activate(level, index);
+    });
+    // The press stays off the page: nothing selected there is cleared, nothing behind the menu is focused.
+    el.addEventListener('pointerdown', (event) => event.preventDefault());
+    el.addEventListener('mousedown', (event) => event.preventDefault());
+    el.addEventListener('contextmenu', (event) => event.preventDefault());
+    document.body.appendChild(el);
+    return level;
+  }
+
+  const rowIndex = (level, node) => {
+    const row = node?.closest?.('.menu-item');
+    return row ? level.rows.indexOf(row) : -1;
+  };
+  const levelOf = (index) => levels[index];
+  const levelIndex = (level) => levels.indexOf(level);
+
+  // ── The row the keyboard and the pointer are on ──
+  function setActive(level, index, { focus = true } = {}) {
+    if (level.active >= 0) level.rows[level.active]?.classList.remove('focused');
+    level.active = index;
+    const row = index >= 0 ? level.rows[index] : null;
+    if (!row) { if (focus) level.el.focus({ preventScroll: true }); return; }
+    row.classList.add('focused');
+    if (focus) row.focus({ preventScroll: true });
+    row.scrollIntoView?.({ block: 'nearest' });
+  }
+
+  // The level the keyboard is in: the deepest one with a row on, else the deepest one open.
+  function keyLevel() {
+    for (let i = levels.length - 1; i >= 0; i--) if (levels[i].active >= 0) return levels[i];
+    return levels[levels.length - 1];
+  }
+
+  // ── Submenus ──
+  function openSubmenu(level, index, { focusFirst = false } = {}) {
+    cancelTimer();
+    const item = level.items[index];
+    const row = level.rows[index];
+    if (!item?.submenu || item.disabled) return;
+    const depth = levelIndex(level);
+    const next = levelOf(depth + 1);
+    if (next?.parentRow !== row) {
+      closeFrom(depth + 1);
+      const sub = drawLevel(item.submenu, item.label);
+      sub.parentRow = row;
+      levels.push(sub);
+      row.classList.add('submenu-open');
+      row.setAttribute('aria-expanded', 'true');
+      const menuRect = level.el.getBoundingClientRect();
+      const rowRect = row.getBoundingClientRect();
+      const box = sub.el.getBoundingClientRect();
+      const at = placeSubmenu({ menuRect, rowRect, width: box.width, height: box.height,
+        viewportWidth: window.innerWidth, viewportHeight: window.innerHeight, bounds });
+      sub.el.style.left = `${at.left}px`;
+      sub.el.style.top = `${at.top}px`;
+      sub.el.dataset.side = at.side;
+      sub.el.style.visibility = '';
+    }
+    if (focusFirst) setActive(levelOf(depth + 1), firstIndex(item.submenu));
+  }
+
+  // Close every level from `depth` down; the row that opened the first of them is no longer open.
+  function closeFrom(depth) {
+    while (levels.length > Math.max(depth, 1)) {
+      const level = levels.pop();
+      level.parentRow?.classList.remove('submenu-open');
+      level.parentRow?.setAttribute('aria-expanded', 'false');
+      level.el.remove();
+    }
+  }
+
+  function scheduleTimer(row, fn, ms) {
+    clearTimeout(subTimer);
+    subPending = row;
+    subTimer = setTimeout(() => { subTimer = 0; subPending = null; if (!closed) fn(); }, ms);
+  }
+  function cancelTimer() {
+    clearTimeout(subTimer);
+    subTimer = 0;
+    subPending = null;
+  }
+
+  function onHover(level, event) {
+    const index = rowIndex(level, event.target);
+    if (index < 0) return;
+    const item = level.items[index];
+    const row = level.rows[index];
+    if (item.disabled) return;
+    if (level.active !== index) setActive(level, index);
+    // Back in a parent level: the deeper ones lose their highlight, not their place.
+    const depth = levelIndex(level);
+    for (let i = depth + 1; i < levels.length; i++) setActive(levels[i], -1, { focus: false });
+    if (row === subPending) return;
+    const next = levelOf(depth + 1);
+    if (next) {
+      if (next.parentRow === row) { cancelTimer(); return; }
+      scheduleTimer(row, () => (item.submenu ? openSubmenu(level, index) : closeFrom(depth + 1)), SUBMENU_GRACE);
+    } else if (item.submenu) {
+      scheduleTimer(row, () => openSubmenu(level, index), SUBMENU_OPEN_DELAY);
+    } else {
+      cancelTimer();
+    }
+  }
+
+  // ── Choosing ──
+  function activate(level, index) {
+    const item = level.items[index];
+    if (!item || item.separator || item.disabled) return;
+    if (item.submenu) { openSubmenu(level, index, { focusFirst: true }); return; }
+    close({ refocus: true });
+    try {
+      const result = item.run?.();
+      if (result && typeof result.catch === 'function') result.catch((err) => console.warn('[context-menu] action failed:', err));
+    } catch (err) {
+      console.warn('[context-menu] action failed:', err);
+    }
+  }
+
+  // ── Keys (at the window, before anything in the page; the app's single-key shortcuts must not fire) ──
+  function onKey(event) {
+    if (event.ctrlKey || event.metaKey || event.altKey) {
+      if (event.key === 'Escape') { event.preventDefault(); close({ refocus: true }); }
+      return; // the browser's and the system's keys stay theirs
+    }
+    const level = keyLevel();
+    const depth = levelIndex(level);
+    const deepest = levels.length - 1; // a submenu the pointer opened may be open without the keyboard in it
+    const { key } = event;
+    const handled = () => { event.preventDefault(); event.stopPropagation(); };
+    // Moving to another row closes a submenu that belongs to the row left.
+    const move = (index) => {
+      setActive(level, index);
+      if (levelOf(depth + 1) && levelOf(depth + 1).parentRow !== level.rows[level.active]) closeFrom(depth + 1);
+    };
+    switch (key) {
+      case 'ArrowDown': handled(); move(stepIndex(level.items, level.active, 1)); return;
+      case 'ArrowUp': handled(); move(stepIndex(level.items, level.active, -1)); return;
+      case 'Home': handled(); move(firstIndex(level.items)); return;
+      case 'End': handled(); move(lastIndex(level.items)); return;
+      case 'ArrowRight':
+        handled();
+        if (level.items[level.active]?.submenu) openSubmenu(level, level.active, { focusFirst: true });
+        return;
+      case 'ArrowLeft':
+        handled();
+        if (deepest > 0) backTo(deepest);
+        return;
+      case 'Escape':
+        handled();
+        if (deepest > 0) backTo(deepest); else close({ refocus: true });
+        return;
+      case 'Tab': handled(); close({ refocus: true }); return;
+      case 'Enter':
+      case ' ':
+        handled();
+        if (level.active >= 0) activate(level, level.active);
+        return;
+      default:
+        if (key.length !== 1) return;
+        handled();
+        {
+          const now = Date.now();
+          typed = now - typedAt > TYPEAHEAD_RESET ? key : typed + key;
+          typedAt = now;
+          const index = typeaheadIndex(level.items, level.active, typed);
+          if (index >= 0) move(index);
+        }
+    }
+  }
+  // A Space released on a row must not reach it as a click either.
+  function onKeyUp(event) {
+    if (!event.ctrlKey && !event.metaKey && !event.altKey && (event.key === ' ' || event.key === 'Enter')) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  }
+
+  // Leave a submenu for the row that opened it.
+  function backTo(depth) {
+    const parent = levelOf(depth - 1);
+    const row = levelOf(depth).parentRow;
+    closeFrom(depth);
+    setActive(parent, parent.rows.indexOf(row));
+  }
+
+  // ── Closing ──
+  const inside = (node) => levels.some((level) => level.el.contains(node));
+  const onOutsidePress = (event) => { if (!inside(event.target)) close({ refocus: false }); };
+  const onScroll = (event) => { if (!inside(event.target)) close({ refocus: false }); };
+  const onGone = () => close({ refocus: false });
+
+  function close({ refocus = true } = {}) {
+    if (closed) return;
+    closed = true;
+    if (_open === handle) _open = null;
+    cancelTimer();
+    window.removeEventListener('keydown', onKey, true);
+    window.removeEventListener('keyup', onKeyUp, true);
+    document.removeEventListener('pointerdown', onOutsidePress, true);
+    document.removeEventListener('scroll', onScroll, true);
+    document.removeEventListener('wheel', onScroll, true);
+    window.removeEventListener('resize', onGone);
+    window.removeEventListener('blur', onGone);
+    // The keyboard goes back where it was, unless the press outside already took it somewhere.
+    const active = document.activeElement;
+    const held = !active || active === document.body || inside(active);
+    for (const level of levels.splice(0)) level.el.remove();
+    if (refocus && held && returnFocus?.isConnected && typeof returnFocus.focus === 'function') {
+      try { returnFocus.focus({ preventScroll: true }); } catch { /* not focusable any more */ }
+    }
+    try { onClose?.(); } catch (err) { console.warn('[context-menu] onClose failed:', err); }
+  }
+
+  // ── Open ──
+  const root = drawLevel(list, label);
+  levels.push(root);
+  const box = root.el.getBoundingClientRect();
+  let px = x;
+  let py = y;
+  if (!Number.isFinite(px) || !Number.isFinite(py)) ({ x: px, y: py } = anchorPoint(anchorRect, window.innerWidth, window.innerHeight));
+  bounds = boundsForPoint(frameRect(), px, py);
+  const at = placeMenu({ x: px, y: py, width: box.width, height: box.height,
+    viewportWidth: window.innerWidth, viewportHeight: window.innerHeight, bounds });
+  root.el.style.left = `${at.left}px`;
+  root.el.style.top = `${at.top}px`;
+  root.el.style.visibility = '';
+  root.el.classList.add('app-ctx-menu--root');
+
+  const handle = { close, element: root.el, returnFocus, contains: inside };
+  _open = handle;
+  window.addEventListener('keydown', onKey, true);
+  window.addEventListener('keyup', onKeyUp, true);
+  document.addEventListener('pointerdown', onOutsidePress, true);
+  document.addEventListener('scroll', onScroll, true);
+  document.addEventListener('wheel', onScroll, { capture: true, passive: true });
+  window.addEventListener('resize', onGone);
+  window.addEventListener('blur', onGone);
+  if (keyboard) setActive(root, firstIndex(list));
+  else root.el.focus({ preventScroll: true });
+  return handle;
+}

package/neural-interface/public/shared/cp/cp-context-menu.js

@@ -12,6 +12,7 @@
 
 import { cpCtx } from './cp-ctx.js';
 import { contextReading, contextMenuModel, isUnset } from './cp-context-model.js';
+import { frameRect } from '../app-frame.js';
 
 const POP_ID = 'cp-context-popover';
 const LABEL = 'Context settings';
@@ -149,24 +150,24 @@ function tipClipped() {
 }
 
 // Below the cog, its right edge on the cog's; above it when there is more room
-// there; always inside the viewport, scrolling inside when it is taller.
+// there; always inside the app frame, scrolling inside when it is taller.
 function place() {
   const $cog = cog();
   if (!_open || !_pop || !$cog) return;
   const r = $cog.getBoundingClientRect();
-  const vw = window.innerWidth;
-  const vh = window.innerHeight;
-  const width = Math.max(0, Math.min(WIDTH, vw - MARGIN * 2));
+  // Inside the app frame (app-frame.js; the whole window on a page without it)
+  const f = frameRect();
+  const width = Math.max(0, Math.min(WIDTH, f.width - MARGIN * 2));
   _pop.style.width = `${width}px`;
-  const below = vh - r.bottom - GAP - MARGIN;
-  const above = r.top - GAP - MARGIN;
+  const below = f.bottom - r.bottom - GAP - MARGIN;
+  const above = r.top - f.top - GAP - MARGIN;
   const up = below < 220 && above > below;
   _pop.style.maxHeight = `${Math.max(120, up ? above : below)}px`;
   const height = _pop.offsetHeight;
-  const left = Math.max(MARGIN, Math.min(r.right - width, vw - width - MARGIN));
+  const left = Math.max(f.left + MARGIN, Math.min(r.right - width, f.right - width - MARGIN));
   const top = up
-    ? Math.max(MARGIN, r.top - GAP - height)
-    : Math.max(MARGIN, Math.min(r.bottom + GAP, vh - MARGIN - height));
+    ? Math.max(f.top + MARGIN, r.top - GAP - height)
+    : Math.max(f.top + MARGIN, Math.min(r.bottom + GAP, f.bottom - MARGIN - height));
   _pop.style.left = `${Math.round(left)}px`;
   _pop.style.top = `${Math.round(top)}px`;
   // Once it has its width: only now is a cut value known.

package/neural-interface/public/shared/cp/cp-restore.js

@@ -6,6 +6,7 @@
 
 import { normalizeSession } from './cp-session-model.js';
 import { TOOL_POLICIES, BYPASS_MODE } from './cp-permission-model.js';
+import { applyTaskTool } from './cp-tool-results.js';
 
 const ACCOUNT_ID = /^[A-Za-z0-9_-]{1,64}$/;
 const PERMISSION_MODES = new Set(['default', 'acceptEdits', 'plan', 'bypassPermissions', 'dontAsk', 'auto']);
@@ -222,3 +223,164 @@ export function pagerState(dataset, labelText = '') {
   if (!Number.isInteger(start) || !Number.isInteger(total) || start <= 0 || total <= start) return null;
   return { start, total };
 }
+
+/**
+ * Split a history page into `{ head, tail }` so the visible tail (~40 rows) can
+ * paint and scroll immediately while earlier rows prepend in chunked tasks.
+ * Never splits an `assistant` `tool_use` from its matching `tool_result`.
+ */
+export function splitHistoryTail(messages, tailSize = 40) {
+  const list = Array.isArray(messages) ? messages : [];
+  const cap = Math.max(1, Number(tailSize) || 40);
+  if (list.length <= Math.ceil(cap * 1.5)) return { head: [], tail: list };
+  let cut = list.length - cap;
+  const indexOfToolUse = new Map();
+  for (let i = 0; i < list.length; i++) {
+    const m = list[i];
+    if (m?.role === 'assistant' && Array.isArray(m.tools)) {
+      for (const t of m.tools) if (t?.id) indexOfToolUse.set(String(t.id), i);
+    }
+  }
+  for (let i = cut; i < list.length; i++) {
+    const m = list[i];
+    if (m?.role === 'tool_result' && m.toolUseId) {
+      const ownerIdx = indexOfToolUse.get(String(m.toolUseId));
+      if (ownerIdx !== undefined && ownerIdx < cut) cut = ownerIdx;
+    }
+  }
+  while (cut > 0 && list[cut]?.role === 'tool_result') cut--;
+  if (cut <= 0) return { head: [], tail: list };
+  return { head: list.slice(0, cut), tail: list.slice(cut) };
+}
+
+/**
+ * Chronologically replay TaskCreate / TaskUpdate / TaskList results from a
+ * history page so tail-first DOM rendering still preserves exact todo order.
+ */
+export function replayTodosFromMessages(messages, initialTodos = []) {
+  const list = Array.isArray(messages) ? messages : [];
+  const calls = new Map();
+  for (const m of list) {
+    if (m?.role === 'assistant' && Array.isArray(m.tools)) {
+      for (const t of m.tools) {
+        if (t?.id && (t.name === 'TaskCreate' || t.name === 'TaskUpdate' || t.name === 'TaskList')) {
+          calls.set(String(t.id), t);
+        }
+      }
+    }
+  }
+  if (!calls.size) return null;
+  let todos = Array.isArray(initialTodos) ? initialTodos : [];
+  let changed = false;
+  for (const m of list) {
+    if (m?.role !== 'tool_result' || m.isError || !m.toolUseId) continue;
+    const call = calls.get(String(m.toolUseId));
+    if (!call) continue;
+    const next = applyTaskTool(todos, call.name, call.input || {}, m.structured);
+    if (next) {
+      todos = next;
+      changed = true;
+    }
+  }
+  return changed ? todos : null;
+}
+
+// ── One transcript container, several history loads ──
+// A container can be asked for its history more than once while a load is still
+// running (a restored tab shown while its reattach says "resynced", an in-tab
+// session switch). Loads of one container run one after the other, and only the
+// newest asked for renders; rows a rebuild put in are marked so the next one
+// takes them out instead of appending a second copy after them. Rows that came
+// live stay, after the history.
+
+/** The property a history row carries: the load (ticket) that rendered it. */
+export const HISTORY_ROW = '_cpHistoryRow';
+
+export function markHistoryRows(nodes, ticket) {
+  for (const n of nodes || []) if (n && typeof n === 'object') n[HISTORY_ROW] = ticket;
+}
+
+/** Rows an earlier rebuild (finished, aborted, or a snapshot put back) left in the container. */
+export function earlierHistoryRows(children, ticket) {
+  return [...(children || [])].filter((n) => n && n[HISTORY_ROW] != null && n[HISTORY_ROW] !== ticket);
+}
+
+/** Rows that came live: no history mark and not the empty-state placeholder. */
+export function liveRows(children) {
+  return [...(children || [])].filter((n) => n && n[HISTORY_ROW] == null && !n.classList?.contains?.('cp-empty'));
+}
+
+/**
+ * Starts a load of `$msgs`: it waits for the one running there and is skipped when
+ * a newer load was asked for meanwhile. `run(isStale)` does the work; `isStale()`
+ * is true as soon as a newer load was asked for (the running one stops at its next
+ * yield). Returns the promise of this load.
+ */
+export function queueHistoryLoad(container, run) {
+  const ticket = (container._historyTicket || 0) + 1;
+  container._historyTicket = ticket;
+  const isStale = () => container._historyTicket !== ticket;
+  const prev = container._historyChain || Promise.resolve();
+  const job = prev.catch(() => {}).then(() => (isStale() ? undefined : run(isStale, ticket)));
+  container._historyChain = job;
+  return job;
+}
+
+// Messages that put rows in a transcript. One of these for a restored tab whose
+// history is still deferred loads that history first; while any history load of
+// the tab runs, they wait in the tab's buffer, so the history always comes first.
+const TRANSCRIPT_MESSAGES = new Set(['event', 'turn_started', 'stderr', 'done', 'aborted', 'error']);
+
+/** 'load' (start the deferred history, then hold the message), 'hold', or 'pass'. */
+export function historyGate(tab, msg, bypass = false) {
+  if (!tab || bypass) return 'pass';
+  const deferred = !!tab._historyDeferred && tab._historyDeferred === tab.sessionId && !tab.automationRunId;
+  if (deferred && TRANSCRIPT_MESSAGES.has(msg?.type)) return 'load';
+  if (tab._historyHold > 0) return 'hold';
+  return 'pass';
+}
+
+/**
+ * A live tool result whose card a running replay has not rendered yet (it sits in
+ * a head chunk still to come) is kept here and applied when the card is built.
+ */
+export function holdPendingResult(tab, ev) {
+  if (!tab || !ev?.tool_use_id || !(tab._historyRendering > 0) || tab._replayRow) return false;
+  if (!(tab._pendingResults instanceof Map)) tab._pendingResults = new Map();
+  tab._pendingResults.set(String(ev.tool_use_id), ev);
+  return true;
+}
+
+export function takePendingResult(tab, toolUseId) {
+  const map = tab?._pendingResults;
+  if (!(map instanceof Map) || !toolUseId) return null;
+  const ev = map.get(String(toolUseId)) || null;
+  if (ev) map.delete(String(toolUseId));
+  return ev;
+}
+
+/** Whether a task tool's result may change the todo list now (a replayed one is in the precomputed list). */
+export function taskResultAppliesTodos(tab, ev) {
+  if (!tab || tab._agentScope || ev?.is_error) return false;
+  return !(tab._skipReplayTodos && tab._replayRow);
+}
+
+/**
+ * Renders `rows` with `render(row)` (which appends to `container`), marks the
+ * nodes it added as load `ticket`'s and moves them before `before` (a live row,
+ * or the first row of the tail already shown), so rows already on screen are
+ * never moved or rebuilt: the browser's scroll anchoring keeps a reader who
+ * scrolled up where they were while older rows go in above. `skip` holds nodes
+ * that are never taken as added (the live rows). Returns the added nodes.
+ */
+export function renderHistoryRowsInto(container, rows, render, { before = null, ticket = null, skip = null } = {}) {
+  const marker = container.lastElementChild;
+  for (const row of rows || []) render(row);
+  const added = [];
+  for (let n = marker ? marker.nextElementSibling : container.firstElementChild; n; n = n.nextElementSibling) {
+    if (!skip || !skip.has(n)) added.push(n);
+  }
+  markHistoryRows(added, ticket);
+  if (before && before.parentNode === container) for (const n of added) container.insertBefore(n, before);
+  return added;
+}

package/neural-interface/public/shared/cp/cp-tool-cards.js

@@ -3,6 +3,7 @@
 // puts that on the card. Live tool results and replayed history take the same
 // path, so a reopened session looks like the live one did.
 
+import { taskResultAppliesTodos } from './cp-restore.js';
 import { cpCtx } from './cp-ctx.js';
 import { escapeHtml } from './cp-markdown.js';
 import {
@@ -212,11 +213,12 @@ export function applyStructuredResult(tab, card, ev) {
     body.appendChild(stats);
   }
   // The task tools keep the list the todo dock shows (root conversation only).
-  if (!tab._agentScope && !ev.is_error) {
+  // A replayed result is already in the list the replay computed; a live one is applied over it.
+  if (taskResultAppliesTodos(tab, ev)) {
     const next = applyTaskTool(tab.todos, name, input, ev.tool_use_result);
     if (next) {
       tab.todos = next;
-      try { cpCtx.renderTodoWidget(tab); } catch {}
+      if (!tab._replaying) { try { cpCtx.renderTodoWidget(tab); } catch {} }
     }
   }
   return { view, content: view.content };
@@ -285,7 +287,12 @@ export function buildHistoryPlanCard(block) {
 
 /** A replayed result for one of the two cards above. True when it was one of them. */
 export function fillHistoryCard($msgs, row) {
-  const card = $msgs.querySelector(`.cp-history-card[data-tool-id="${CSS.escape(String(row.toolUseId || ''))}"]`);
+  const id = String(row.toolUseId || '');
+  let card = null;
+  // A replay indexes the cards it builds (no selector scan per result); a card it did not build is looked up.
+  const indexed = $msgs?._replayCards instanceof Map ? $msgs._replayCards.get(id) : null;
+  if (indexed) card = indexed.classList?.contains('cp-history-card') ? indexed : null;
+  else card = $msgs.querySelector(`.cp-history-card[data-tool-id="${CSS.escape(id)}"]`);
   if (!card) return false;
   if (card.classList.contains('cp-ask-history')) {
     const rows = askAnswerRows(card._toolInput, row.structured, row.isError ? '' : (row.text || ''));