create-walle 0.9.21 → 0.9.23

package/template/claude-task-manager/public/js/stream-view.js

@@ -37,6 +37,9 @@ const _streamState = {
   //   _pendingEvents: sessionId → [stream-event...] buffered during prime.
   //   _parentUuidSeen: sessionId → Set of parentUuids already rendered,
   //     used to dedup stream-events that overlap with primed history.
+  //   _messageFingerprintSeen: sessionId → Set of semantic message keys
+  //     rendered from HTTP history or live stream. This reconciles the two
+  //     data planes so stream-init cannot replay rows already in the snapshot.
   _primed: new Map(),
   _primedTarget: new Map(),
   _priming: new Map(),
@@ -44,6 +47,7 @@ const _streamState = {
   _primeToken: new Map(),
   _pendingEvents: new Map(),
   _parentUuidSeen: new Map(),
+  _messageFingerprintSeen: new Map(),
 };
 
 function _normalizeSessionViewMode(view) {
@@ -132,7 +136,7 @@ function _tooltipPhaseLabel(phase) {
   if (key === 'implementing') return 'Implementing';
   if (key === 'investigating') return 'Investigating';
   if (key === 'verifying') return 'Verifying';
-  if (key === 'waiting') return 'Waiting';
+  if (key === 'waiting') return 'Needs You';
   if (key === 'running') return 'Running';
   return key ? _tooltipStatusLabel(key) : 'Progress';
 }
@@ -496,8 +500,19 @@ function renderConversationEvent(evt) {
   return MR.renderConversationEvent(evt);
 }
 
+function _linkConversationDocumentReferences(container, root) {
+  if (!container || !root || !window.CTMDocLinks || typeof window.CTMDocLinks.linkifyElement !== 'function') return;
+  try {
+    const sessionId = container.dataset?.sessionId || '';
+    window.CTMDocLinks.linkifyElement(root, window.CTMDocLinks.contextForSession(sessionId));
+  } catch (e) {
+    console.warn('[stream-view] document linkification failed:', e && e.message ? e.message : e);
+  }
+}
+
 // When the new element AND the last existing child are compatible collapsible
-// operational rows (`.conv-tool-group` or `.conv-warning-group`), fold the new
+// operational rows (`.conv-tool-group`, `.conv-warning-group`, or
+// `.conv-system-group`), fold the new
 // one into the previous one's items list and bump the count + last-time.
 // Result: consecutive low-value activity rows render as ONE thought-group,
 // matching Review's `groupMessages` behavior. Returns true if merged (caller
@@ -505,12 +520,61 @@ function renderConversationEvent(evt) {
 function _mergeConsecutiveToolGroups(container, newEl) {
   const groupKind = (el) => {
     if (!el || !el.classList) return null;
+    if (el.classList.contains('conv-activity-group')) return 'activity';
     if (el.classList.contains('conv-tool-group')) return 'tool';
     if (el.classList.contains('conv-warning-group')) return 'warning';
+    if (el.classList.contains('conv-system-group')) return 'system';
     return null;
   };
+  const foldableKind = (kind) => kind === 'activity' || kind === 'tool' || kind === 'system';
+  const markCombined = (el) => {
+    if (!el || !el.classList) return;
+    el.classList.add('conv-activity-group');
+    el.classList.add('combined-activity-group');
+    el.classList.add('tool-activity-group');
+    if (el.dataset) el.dataset.activityKind = 'combined';
+  };
+  const refreshGroup = (el, kind) => {
+    if (kind === 'activity' && typeof MR !== 'undefined' && typeof MR.refreshConversationCombinedActivityGroup === 'function') {
+      MR.refreshConversationCombinedActivityGroup(el);
+    } else if (kind === 'warning' && typeof MR !== 'undefined' && typeof MR.refreshConversationWarningGroup === 'function') {
+      MR.refreshConversationWarningGroup(el);
+    } else if (kind === 'system' && typeof MR !== 'undefined' && typeof MR.refreshConversationSystemGroup === 'function') {
+      MR.refreshConversationSystemGroup(el);
+    } else if (typeof MR !== 'undefined' && typeof MR.refreshConversationActivityGroup === 'function') {
+      MR.refreshConversationActivityGroup(el);
+    }
+  };
   const kind = groupKind(newEl);
   if (!kind) return false;
+  if (foldableKind(kind)) {
+    const lastChild = container.lastElementChild;
+    const lastKind = groupKind(lastChild);
+    if (!foldableKind(lastKind)) return false;
+    const targetItems = lastChild.querySelector('.thought-group-items');
+    const newItems = newEl.querySelector('.thought-group-items');
+    if (!targetItems || !newItems) return false;
+    while (newItems.firstChild) targetItems.appendChild(newItems.firstChild);
+    const newLast = newEl.dataset.lastTime || '';
+    if (newLast) lastChild.dataset.lastTime = newLast;
+    const shouldPromote = lastKind === 'activity' || kind === 'activity' || lastKind !== kind;
+    if (shouldPromote) markCombined(lastChild);
+    refreshGroup(lastChild, shouldPromote ? 'activity' : lastKind);
+    return true;
+  }
+  if (kind === 'warning') {
+    const existingWarning = container.querySelector(':scope > .conv-warning-group');
+    if (existingWarning) {
+      const targetItems = existingWarning.querySelector('.thought-group-items');
+      const newItems = newEl.querySelector('.thought-group-items');
+      if (!targetItems || !newItems) return false;
+      while (newItems.firstChild) targetItems.appendChild(newItems.firstChild);
+      const newLast = newEl.dataset.lastTime || '';
+      if (newLast) existingWarning.dataset.lastTime = newLast;
+      refreshGroup(existingWarning, 'warning');
+      return true;
+    }
+  }
   const lastChild = container.lastElementChild;
   if (groupKind(lastChild) !== kind) return false;
   const targetItems = lastChild.querySelector('.thought-group-items');
@@ -522,17 +586,18 @@ function _mergeConsecutiveToolGroups(container, newEl) {
   // rows prevents a later update from replacing the whole merged group.
   const newLast = newEl.dataset.lastTime || '';
   if (newLast) lastChild.dataset.lastTime = newLast;
-  if (kind === 'warning' && typeof MR !== 'undefined' && typeof MR.refreshConversationWarningGroup === 'function') {
-    MR.refreshConversationWarningGroup(lastChild);
-  } else if (typeof MR !== 'undefined' && typeof MR.refreshConversationActivityGroup === 'function') {
-    MR.refreshConversationActivityGroup(lastChild);
-  }
+  refreshGroup(lastChild, kind);
   return true;
 }
 
 function _assignConversationParentUuid(el, parentUuid) {
   if (!el || !parentUuid) return;
-  if (el.classList && (el.classList.contains('conv-tool-group') || el.classList.contains('conv-warning-group'))) {
+  if (el.classList && (
+    el.classList.contains('conv-activity-group') ||
+    el.classList.contains('conv-tool-group') ||
+    el.classList.contains('conv-warning-group') ||
+    el.classList.contains('conv-system-group')
+  )) {
     const items = el.querySelector('.thought-group-items');
     const row = items && (items.lastElementChild || (items.children && items.children[items.children.length - 1]));
     if (row && row.dataset && !row.dataset.parentUuid) row.dataset.parentUuid = parentUuid;
@@ -554,11 +619,38 @@ function _replaceConversationParentEvent(existing, newEl) {
     else existing.remove();
     return true;
   }
-  const existingGroup = existing.closest ? (existing.closest('.conv-tool-group') || existing.closest('.conv-warning-group')) : null;
-  const existingKind = existingGroup && existingGroup.classList.contains('conv-warning-group') ? 'warning' : 'tool';
-  const newKind = newEl && newEl.classList && newEl.classList.contains('conv-warning-group') ? 'warning' : 'tool';
-  if (existingGroup && newEl && newEl.classList && (newEl.classList.contains('conv-tool-group') || newEl.classList.contains('conv-warning-group')) && existingKind === newKind) {
-    const targetRow = existing.closest('.tool-activity-item') || existing;
+  const conversationGroupKind = (el) => {
+    if (!el || !el.classList) return '';
+    if (el.classList.contains('conv-activity-group')) return 'activity';
+    if (el.classList.contains('conv-warning-group')) return 'warning';
+    if (el.classList.contains('conv-system-group')) return 'system';
+    if (el.classList.contains('conv-tool-group')) return 'tool';
+    return '';
+  };
+  const refreshConversationGroup = (group, kind) => {
+    if (!group || typeof MR === 'undefined') return;
+    if (kind === 'activity' && typeof MR.refreshConversationCombinedActivityGroup === 'function') {
+      MR.refreshConversationCombinedActivityGroup(group);
+    } else if (kind === 'warning' && typeof MR.refreshConversationWarningGroup === 'function') {
+      MR.refreshConversationWarningGroup(group);
+    } else if (kind === 'system' && typeof MR.refreshConversationSystemGroup === 'function') {
+      MR.refreshConversationSystemGroup(group);
+    } else if (typeof MR.refreshConversationActivityGroup === 'function') {
+      MR.refreshConversationActivityGroup(group);
+    }
+  };
+  const compatibleActivityReplacement = (existingKind, incomingKind) => {
+    if (existingKind === incomingKind) return true;
+    if (existingKind !== 'activity') return false;
+    return incomingKind === 'tool' || incomingKind === 'system' || incomingKind === 'activity';
+  };
+  const existingGroup = existing.closest
+    ? (existing.closest('.conv-activity-group') || existing.closest('.conv-tool-group') || existing.closest('.conv-warning-group') || existing.closest('.conv-system-group'))
+    : null;
+  const existingKind = conversationGroupKind(existingGroup);
+  const newKind = conversationGroupKind(newEl);
+  if (existingGroup && newEl && newEl.classList && newKind && compatibleActivityReplacement(existingKind, newKind)) {
+    const targetRow = existing.closest('.tool-activity-item') || existing.closest('.system-activity-item') || existing;
     const targetParent = targetRow.parentNode;
     const newItems = newEl.querySelector('.thought-group-items');
     if (!targetParent || !newItems) return false;
@@ -566,25 +658,17 @@ function _replaceConversationParentEvent(existing, newEl) {
     for (const row of rows) targetParent.insertBefore(row, targetRow);
     targetParent.removeChild(targetRow);
     if (newEl.dataset.lastTime) existingGroup.dataset.lastTime = newEl.dataset.lastTime;
-    if (existingKind === 'warning' && typeof MR !== 'undefined' && typeof MR.refreshConversationWarningGroup === 'function') {
-      MR.refreshConversationWarningGroup(existingGroup);
-    } else if (typeof MR !== 'undefined' && typeof MR.refreshConversationActivityGroup === 'function') {
-      MR.refreshConversationActivityGroup(existingGroup);
-    }
+    refreshConversationGroup(existingGroup, existingKind);
     refreshTurn();
     return true;
   }
   if (existingGroup && !newEl) {
-    const targetRow = existing.closest('.tool-activity-item') || existing;
+    const targetRow = existing.closest('.tool-activity-item') || existing.closest('.system-activity-item') || existing;
     const targetParent = targetRow.parentNode;
     if (targetParent) targetParent.removeChild(targetRow);
     const remaining = existingGroup.querySelector('.thought-group-items')?.children?.length || 0;
     if (remaining === 0) existingGroup.remove();
-    else if (existingKind === 'warning' && typeof MR !== 'undefined' && typeof MR.refreshConversationWarningGroup === 'function') {
-      MR.refreshConversationWarningGroup(existingGroup);
-    } else if (typeof MR !== 'undefined' && typeof MR.refreshConversationActivityGroup === 'function') {
-      MR.refreshConversationActivityGroup(existingGroup);
-    }
+    else refreshConversationGroup(existingGroup, existingKind);
     refreshTurn();
     return true;
   }
@@ -594,6 +678,96 @@ function _replaceConversationParentEvent(existing, newEl) {
   return true;
 }
 
+function _conversationScrollNearBottom(container) {
+  if (!container) return true;
+  const remaining = Number(container.scrollHeight || 0)
+    - Number(container.scrollTop || 0)
+    - Number(container.clientHeight || 0);
+  return remaining < 100;
+}
+
+function _conversationScrollAnchorCandidates(container) {
+  if (!container) return [];
+  const selector = [
+    ':scope > .prompt-turn',
+    ':scope > .review-msg',
+    ':scope > .thought-group',
+    ':scope > .conversation-state',
+    ':scope > .conversation-load-older',
+    ':scope .prompt-turn-header',
+    ':scope .review-msg',
+    ':scope .thought-group',
+    ':scope .tool-activity-item',
+    ':scope .system-activity-item',
+    ':scope .msg-text',
+  ].join(', ');
+  if (typeof container.querySelectorAll === 'function') {
+    try { return Array.from(container.querySelectorAll(selector)); } catch {}
+  }
+  return Array.from(container.children || []);
+}
+
+function _captureConversationScrollAnchor(container) {
+  if (!container) return null;
+  const followBottom = _conversationScrollNearBottom(container);
+  const anchor = {
+    followBottom,
+    scrollTop: Number(container.scrollTop || 0),
+    scrollHeight: Number(container.scrollHeight || 0),
+    element: null,
+    topOffset: 0,
+  };
+  if (followBottom) return anchor;
+  let containerRect = null;
+  try { containerRect = container.getBoundingClientRect && container.getBoundingClientRect(); } catch {}
+  if (!containerRect) return anchor;
+  const top = Number(containerRect.top || 0);
+  const bottom = top + Number(container.clientHeight || containerRect.height || 0);
+  for (const el of _conversationScrollAnchorCandidates(container)) {
+    if (!el || typeof el.getBoundingClientRect !== 'function') continue;
+    let rect = null;
+    try { rect = el.getBoundingClientRect(); } catch {}
+    if (!rect || Number(rect.height || 0) <= 0) continue;
+    if (Number(rect.bottom || 0) <= top + 2) continue;
+    if (Number(rect.top || 0) >= bottom - 2) continue;
+    anchor.element = el;
+    anchor.topOffset = Number(rect.top || 0) - top;
+    break;
+  }
+  return anchor;
+}
+
+function _restoreConversationScrollAnchor(container, anchor) {
+  if (!container || !anchor) return;
+  if (anchor.followBottom) {
+    container.scrollTop = container.scrollHeight;
+    return;
+  }
+  const fallback = () => { container.scrollTop = anchor.scrollTop; };
+  const el = anchor.element;
+  if (!el || el.isConnected === false || typeof el.getBoundingClientRect !== 'function') {
+    fallback();
+    return;
+  }
+  let containerRect = null;
+  let rect = null;
+  try {
+    containerRect = container.getBoundingClientRect && container.getBoundingClientRect();
+    rect = el.getBoundingClientRect();
+  } catch {}
+  if (!containerRect || !rect) {
+    fallback();
+    return;
+  }
+  const nextOffset = Number(rect.top || 0) - Number(containerRect.top || 0);
+  const delta = nextOffset - Number(anchor.topOffset || 0);
+  if (Number.isFinite(delta) && Math.abs(delta) > 0.5) {
+    container.scrollTop = Number(container.scrollTop || 0) + delta;
+  } else {
+    container.scrollTop = anchor.scrollTop;
+  }
+}
+
 function _isPromptTurnContainer(container) {
   return !!(container && container.dataset && (container.dataset.turnMode === 'conversation' || container.dataset.turnMode === 'review'));
 }
@@ -691,6 +865,117 @@ function _removePromptTurnEmpty(body) {
   }
 }
 
+function _conversationPromptTextKey(text) {
+  return String(text || '').replace(/\s+/g, ' ').trim();
+}
+
+function _conversationEventTimestampMs(evt) {
+  const raw = evt && evt.timestamp;
+  if (typeof raw === 'number' && Number.isFinite(raw)) return raw;
+  if (typeof raw === 'string' && /^\d{10,}$/.test(raw.trim())) {
+    const numeric = Number(raw.trim());
+    if (Number.isFinite(numeric)) return numeric;
+  }
+  const parsed = Date.parse(raw || '');
+  return Number.isFinite(parsed) ? parsed : 0;
+}
+
+function _conversationEventRole(evt) {
+  const role = String(evt?.data?.type || evt?.eventType || evt?.type || evt?.role || '').trim();
+  return role === 'user' || role === 'assistant' ? role : '';
+}
+
+function _conversationEventTextKey(evt) {
+  return _conversationPromptTextKey(evt?.data?.text ?? evt?.text ?? evt?.message ?? '');
+}
+
+function _conversationEventFingerprint(evt) {
+  const role = _conversationEventRole(evt);
+  const text = _conversationEventTextKey(evt);
+  if (!role || !text) return '';
+  const ts = _conversationEventTimestampMs(evt);
+  if (!ts) return '';
+  return [role, String(ts), text].join('\u001f');
+}
+
+function _conversationMessageFingerprintSet(sessionId, create) {
+  const id = String(sessionId || '').trim();
+  if (!id) return null;
+  let seen = _streamState._messageFingerprintSeen.get(id);
+  if (!seen && create) {
+    seen = new Set();
+    _streamState._messageFingerprintSeen.set(id, seen);
+  }
+  return seen || null;
+}
+
+function _markConversationEventSeen(sessionId, evt) {
+  const fingerprint = _conversationEventFingerprint(evt);
+  if (!fingerprint) return false;
+  const seen = _conversationMessageFingerprintSet(sessionId, true);
+  if (!seen) return false;
+  seen.add(fingerprint);
+  return true;
+}
+
+function _conversationEventAlreadySeen(sessionId, evt) {
+  const fingerprint = _conversationEventFingerprint(evt);
+  if (!fingerprint) return false;
+  const seen = _conversationMessageFingerprintSet(sessionId, false);
+  return !!(seen && seen.has(fingerprint));
+}
+
+function _conversationStampPromptTurn(turn, evt) {
+  if (!turn || !turn.dataset || !evt || !MR || typeof MR.isConversationPromptEvent !== 'function') return;
+  if (!MR.isConversationPromptEvent(evt)) return;
+  const key = _conversationEventTextKey(evt);
+  if (key) turn.dataset.promptTextKey = key;
+  const ts = _conversationEventTimestampMs(evt);
+  if (ts) turn.dataset.promptTimestampMs = String(ts);
+}
+
+function _conversationPromptTurnTextKey(turn) {
+  if (!turn || !turn.querySelector) return '';
+  const existing = turn.dataset && turn.dataset.promptTextKey;
+  if (existing) return existing;
+  const textEl = turn.querySelector('.prompt-turn-prompt .msg-text');
+  return _conversationPromptTextKey(textEl ? textEl.textContent : '');
+}
+
+function _conversationPromptTurnTimestampMs(turn) {
+  if (!turn || !turn.dataset) return 0;
+  const stored = Number(turn.dataset.promptTimestampMs || 0);
+  if (Number.isFinite(stored) && stored > 0) return stored;
+  return 0;
+}
+
+function _findDuplicateConversationPromptTurn(container, evt) {
+  if (!_isPromptTurnContainer(container)) return null;
+  if (!MR || typeof MR.isConversationPromptEvent !== 'function' || !MR.isConversationPromptEvent(evt)) return null;
+  const key = _conversationEventTextKey(evt);
+  if (!key) return null;
+  const ts = _conversationEventTimestampMs(evt);
+  const children = Array.from(container.children || []);
+  let checkedPromptTurns = 0;
+  for (let i = children.length - 1; i >= 0 && checkedPromptTurns < 6; i -= 1) {
+    const turn = children[i];
+    if (!turn || !turn.classList || !turn.classList.contains('prompt-turn')) continue;
+    if (turn.classList.contains('setup-turn')) continue;
+    checkedPromptTurns += 1;
+    if (_conversationPromptTurnTextKey(turn) !== key) continue;
+    const existingTs = _conversationPromptTurnTimestampMs(turn);
+    if (ts && existingTs) {
+      if (Math.abs(ts - existingTs) <= 5000) return turn;
+      continue;
+    }
+    // Missing timestamps only happen in legacy/import fallback paths. Keep this
+    // conservative: dedup only the current tail prompt so a user can still send
+    // the same short command again later.
+    if (checkedPromptTurns === 1) return turn;
+  }
+  return null;
+}
+
 function _ensureResponseTurn(container, opts) {
   let turn = _latestPromptTurn(container);
   if (turn) return turn;
@@ -705,23 +990,101 @@ function _ensureResponseTurn(container, opts) {
 
 function _renderConversationNodeForEvent(evt, opts) {
   if (MR && typeof MR.isConversationPromptEvent === 'function' && MR.isConversationPromptEvent(evt)) {
-    return MR.createConversationTurn(evt, { expanded: !!(opts && opts.expandPrompt) });
+    const turn = MR.createConversationTurn(evt, { expanded: !!(opts && opts.expandPrompt) });
+    _conversationStampPromptTurn(turn, evt);
+    return turn;
   }
   return renderConversationEvent(evt);
 }
 
+// A streaming assistant turn can be rendered once as a stale-cache PARTIAL (the large-session
+// stale-cache path serves it without a parentUuid, so the row has no data-parent-uuid) and then
+// again as the live FINAL. Their text differs (partial vs final), so neither the parentUuid match
+// nor the exact-fingerprint dedup in _applyStreamEvent catches it and the final appends a
+// duplicate. When the turn's last assistant text row is a long PREFIX of (or equal to) the
+// incoming assistant text, they are the same streamed turn: keep the longer copy in its slot
+// instead of stacking a duplicate. Mirrors the server-side messagesRepresentSameEvent prefix rule.
+const _STREAM_PREFIX_DEDUP_MIN = 200;
+function _conversationRowRawText(el) {
+  return el && typeof el._convRawText === 'string' ? el._convRawText : '';
+}
+function _supersedeStreamingAssistantPrefix(body, newEl, newText, evt) {
+  if (!body || !newEl || !newEl.classList
+      || !newEl.classList.contains('assistant') || newEl.classList.contains('tool-only')) return null;
+  const prev = body.lastElementChild;
+  if (!prev || !prev.classList || !prev.classList.contains('review-msg')
+      || !prev.classList.contains('assistant') || prev.classList.contains('tool-only')) return null;
+  const a = _conversationRowRawText(prev);
+  const b = String(newText || '');
+  if (a.length < _STREAM_PREFIX_DEDUP_MIN || b.length < _STREAM_PREFIX_DEDUP_MIN) return null;
+  const shorter = a.length <= b.length ? a : b;
+  const longer = a.length <= b.length ? b : a;
+  if (!longer.startsWith(shorter)) return null; // not the same streamed turn — keep both
+  const keep = b.length >= a.length ? newEl : prev;
+  if (keep === newEl) _replaceConversationParentEvent(prev, newEl); // newEl takes the partial's slot
+  keep._convRawText = longer;
+  if (evt && evt.data && evt.data.parentUuid) _assignConversationParentUuid(keep, evt.data.parentUuid);
+  return keep;
+}
+
+const _TOOL_CARD_EVENT_KINDS = new Set(['tool_call', 'shell', 'patch', 'web_search']);
+
+function _findToolCardByCallId(scopeEl, callId) {
+  if (!scopeEl || !callId || typeof scopeEl.querySelector !== 'function') return null;
+  const escaped = (window.CSS && CSS.escape) ? CSS.escape(callId) : callId.replace(/"/g, '\\"');
+  return scopeEl.querySelector('.tool-card[data-call-id="' + escaped + '"]');
+}
+
+// Structured tool events against the live DOM:
+// - a tool_result fills its call's card IN PLACE (matched on data-call-id) —
+//   no new node;
+// - a replayed tool_call/shell/patch whose card already exists dedups to it.
+// Returns the affected card element, or null to continue the normal path.
+function _applyStructuredToolEvent(scopeEl, evt) {
+  if (!MR || typeof MR.messageMeta !== 'function') return null;
+  const meta = MR.messageMeta(evt);
+  if (!meta || !meta.callId) return null;
+  const card = _findToolCardByCallId(scopeEl, meta.callId);
+  if (!card) return null;
+  if (meta.kind === 'tool_result') {
+    // Fill only a pending card; a replayed result against an already-filled
+    // card is a duplicate event — dedup to the existing node.
+    if (card.getAttribute('data-status') === 'pending' && typeof MR.fillToolCardResult === 'function') {
+      MR.fillToolCardResult(card, {
+        text: (evt.data && evt.data.text) || evt.text || '',
+        metadata: meta,
+        timestamp: evt.timestamp,
+      });
+    }
+    return card;
+  }
+  if (_TOOL_CARD_EVENT_KINDS.has(meta.kind)) return card; // dedup replayed call
+  return null;
+}
+
 function _appendConversationEventToTurns(container, evt, opts) {
   opts = opts || {};
   if (!container || !MR || typeof MR.isConversationPromptEvent !== 'function') return null;
   if (MR.isConversationPromptEvent(evt)) {
     if (opts.collapseExisting) _collapsePromptTurns(container);
     const turn = MR.createConversationTurn(evt, { expanded: !!opts.expandPrompt });
+    _conversationStampPromptTurn(turn, evt);
     _removeConversationState(container);
     container.appendChild(turn);
+    _linkConversationDocumentReferences(container, turn);
     if (typeof MR.refreshPromptTurnMeta === 'function') MR.refreshPromptTurnMeta(turn);
     return turn;
   }
 
+  const filledCard = _applyStructuredToolEvent(container, evt);
+  if (filledCard) {
+    if (typeof MR.refreshPromptTurnMeta === 'function') {
+      const cardTurn = filledCard.closest ? filledCard.closest('.prompt-turn') : null;
+      if (cardTurn) MR.refreshPromptTurnMeta(cardTurn);
+    }
+    return filledCard;
+  }
+
   const el = renderConversationEvent(evt);
   if (!el) return null;
   _removeConversationState(container);
@@ -729,8 +1092,18 @@ function _appendConversationEventToTurns(container, evt, opts) {
   const body = MR.getPromptTurnBody(turn);
   if (!body) return null;
   _removePromptTurnEmpty(body);
+  const rawText = (evt.data && evt.data.text) || evt.text || '';
+  el._convRawText = rawText;
   if (evt.data?.parentUuid) _assignConversationParentUuid(el, evt.data.parentUuid);
-  if (!_mergeConsecutiveToolGroups(body, el)) body.appendChild(el);
+  const superseded = _supersedeStreamingAssistantPrefix(body, el, rawText, evt);
+  if (superseded) {
+    _linkConversationDocumentReferences(container, body);
+    if (typeof MR.refreshPromptTurnMeta === 'function') MR.refreshPromptTurnMeta(turn);
+    return superseded;
+  }
+  const merged = _mergeConsecutiveToolGroups(body, el);
+  if (!merged) body.appendChild(el);
+  _linkConversationDocumentReferences(container, merged ? body : el);
   if (typeof MR.refreshPromptTurnMeta === 'function') MR.refreshPromptTurnMeta(turn);
   return el;
 }
@@ -738,6 +1111,7 @@ function _appendConversationEventToTurns(container, evt, opts) {
 function populateConversationView(container, events) {
   container.textContent = '';
   if (container.dataset) container.dataset.turnMode = container.dataset.turnMode || 'conversation';
+  const sessionId = container.dataset?.sessionId || '';
   if (!events || events.length === 0) {
     _renderConversationState(container, 'No transcript messages found for this session.');
     container.scrollTop = container.scrollHeight;
@@ -745,15 +1119,26 @@ function populateConversationView(container, events) {
   }
   for (const evt of events) {
     if (_isPromptTurnContainer(container)) {
-      _appendConversationEventToTurns(container, evt, { expandPrompt: false, collapseExisting: false, expandSetup: false });
+      if (_appendConversationEventToTurns(container, evt, { expandPrompt: false, collapseExisting: false, expandSetup: false })) {
+        _markConversationEventSeen(sessionId, evt);
+      }
+      continue;
+    }
+    if (_applyStructuredToolEvent(container, evt)) {
+      _markConversationEventSeen(sessionId, evt);
       continue;
     }
     const el = renderConversationEvent(evt);
     if (!el) continue;
     if (evt.data?.parentUuid) _assignConversationParentUuid(el, evt.data.parentUuid);
-    if (_mergeConsecutiveToolGroups(container, el)) continue;
+    if (_mergeConsecutiveToolGroups(container, el)) {
+      _markConversationEventSeen(sessionId, evt);
+      continue;
+    }
     container.appendChild(el);
+    _markConversationEventSeen(sessionId, evt);
   }
+  _linkConversationDocumentReferences(container, container);
   if (_isPromptTurnContainer(container)) _refreshLatestPromptTurnStatus(container.dataset?.sessionId || '', container);
   container.scrollTop = container.scrollHeight;
 }
@@ -912,12 +1297,37 @@ let _streamStatusRefreshInFlight = null;
 let _streamStatusLastRefreshAt = 0;
 let _streamStatusRenderTimer = null;
 
+function _clearStreamRestoreStateFallback(s) {
+  if (!s) return;
+  s._restoreDeferredStarting = false;
+  s._restoreStarting = false;
+  s._restoreResuming = false;
+  s._restoreStatus = '';
+  if (s.meta) {
+    s.meta.restoreStarting = false;
+    s.meta.restore_starting = false;
+    s.meta.restoreResuming = false;
+    s.meta.restore_resuming = false;
+    s.meta.restoreStatus = '';
+    s.meta.restore_status = '';
+  }
+}
+
+function _clearStreamRestoreState(s, root) {
+  if (root && typeof root._ctmClearSessionRestoreState === 'function') {
+    root._ctmClearSessionRestoreState(s);
+    return;
+  }
+  _clearStreamRestoreStateFallback(s);
+}
+
 function applyStreamStatus(msg) {
   const status = msg && (msg.newStatus || msg.status);
   const ctmId = msg && (msg.ctmSessionId || msg.sessionId);
   if (!ctmId || !status || typeof state === 'undefined' || !state.sessions) return false;
   const s = state.sessions.get(ctmId);
   if (!s) return false;
+  const root = typeof window !== 'undefined' ? window : globalThis;
 
   const beforeEffectiveStatus = typeof getSessionStatus === 'function'
     ? getSessionStatus(s).cls
@@ -928,8 +1338,11 @@ function applyStreamStatus(msg) {
   const normalizedStatus = typeof normalizeLiveSessionStatus === 'function'
     ? normalizeLiveSessionStatus(status)
     : String(status || '').toLowerCase();
+  const serverReady = !!(root && root._ctmState && root._ctmState._serverReady);
+  if (normalizedStatus === 'running' || (serverReady && normalizedStatus && normalizedStatus !== 'resuming')) {
+    _clearStreamRestoreState(s, root);
+  }
   if (normalizedStatus && normalizedStatus !== 'running') {
-    const root = typeof window !== 'undefined' ? window : globalThis;
     const heldNonRunningStatus = root && typeof root._ctmRecordClientCodexPendingNonRunning === 'function'
       ? root._ctmRecordClientCodexPendingNonRunning(
           s,
@@ -1037,10 +1450,17 @@ if (_streamStatusPollTimer && typeof _streamStatusPollTimer.unref === 'function'
 
 // --- View Toggle ---
 
-function createViewToggle(sessionId) {
-  const controls = document.createElement('div');
-  controls.className = 'stream-view-controls';
+// The Terminal/Conversation toggle only makes sense when the agent has a
+// structured transcript (Claude/Codex/Wall-E). Plain shells and terminal-only
+// agents have no conversation view, so the toggle would be a dead control.
+function _sessionHasConversationView(sessionId) {
+  const caps = (typeof window !== 'undefined' && typeof window._ctmAgentCapsForSession === 'function')
+    ? window._ctmAgentCapsForSession(sessionId)
+    : null;
+  return !caps || caps.structuredTranscript !== false;
+}
 
+function _buildViewToggleEl(sessionId) {
   const toggle = document.createElement('div');
   toggle.className = 'stream-view-toggle';
   toggle.setAttribute('role', 'group');
@@ -1064,22 +1484,48 @@ function createViewToggle(sessionId) {
   convBtn.setAttribute('aria-label', 'Show structured conversation');
   convBtn.innerHTML = '<span class="stream-view-icon" aria-hidden="true">C</span><span class="stream-view-label">Conversation</span>';
 
-  termBtn.onclick = () => {
-    setSessionView(sessionId, 'terminal');
-  };
-
-  convBtn.onclick = () => {
-    setSessionView(sessionId, 'conversation');
-  };
+  termBtn.onclick = () => { setSessionView(sessionId, 'terminal'); };
+  convBtn.onclick = () => { setSessionView(sessionId, 'conversation'); };
 
   toggle.appendChild(termBtn);
   toggle.appendChild(convBtn);
-  controls.appendChild(toggle);
-  controls.appendChild(_buildExportMenu(sessionId));
   _setViewButtonState([termBtn, convBtn], _streamState.activeView.get(sessionId) || getPreferredSessionView());
+  return toggle;
+}
+
+function createViewToggle(sessionId) {
+  const controls = document.createElement('div');
+  controls.className = 'stream-view-controls';
+  if (_sessionHasConversationView(sessionId)) controls.appendChild(_buildViewToggleEl(sessionId));
+  controls.appendChild(_buildExportMenu(sessionId));
   return controls;
 }
 
+// Reconcile the Term/Conv toggle's presence after the agent type resolves. A
+// freshly-restored session can be classified as 'shell' before its agentType is
+// known, so createViewToggle skips the toggle and nothing rebuilds the toolbar —
+// leaving a Claude/Codex session permanently without Term/Conv. Add the toggle in
+// place (before the ⋯ menu) once the session is known to have a conversation
+// view; drop a stale one otherwise. Located via the toolbar's data-session-id so
+// it works whether the toolbar is in its pane or merged onto the tab strip.
+function syncSessionViewToggle(sessionId) {
+  if (typeof document === 'undefined' || !sessionId) return;
+  const esc = (typeof window !== 'undefined' && window.CSS && CSS.escape) ? CSS.escape(sessionId) : sessionId;
+  const toolbar = document.querySelector(`.session-toolbar[data-session-id="${esc}"]`);
+  const controls = toolbar ? toolbar.querySelector('.stream-view-controls') : null;
+  if (!controls) return;
+  const wantToggle = _sessionHasConversationView(sessionId);
+  const existing = controls.querySelector('.stream-view-toggle');
+  if (wantToggle && !existing) {
+    const exportMenu = controls.querySelector('.stream-export-menu');
+    controls.insertBefore(_buildViewToggleEl(sessionId), exportMenu || null);
+    _syncViewToggle(sessionId);
+  } else if (!wantToggle && existing) {
+    existing.remove();
+  }
+}
+if (typeof window !== 'undefined') window.syncSessionViewToggle = syncSessionViewToggle;
+
 function _setViewButtonState(buttons, view) {
   buttons.forEach((btn) => {
     const active = btn.dataset.view === view;
@@ -1090,10 +1536,13 @@ function _setViewButtonState(buttons, view) {
 
 function _syncViewToggle(sessionId) {
   const view = _streamState.activeView.get(sessionId) || 'terminal';
-  const root = document.querySelector(`.term-container[data-session-id="${CSS.escape(sessionId)}"]`);
-  const buttons = root
-    ? root.querySelectorAll('.stream-view-btn[data-view]')
-    : document.querySelectorAll(`.stream-view-btn[data-view][data-session-id="${CSS.escape(sessionId)}"]`);
+  // Select by data-session-id globally rather than scoping to the session's
+  // .term-container: in the merged-row layout the toggle is relocated out of
+  // the container into #tabbar-session-controls, so a container-scoped query
+  // finds zero buttons and the active highlight never updates. Each button
+  // carries data-session-id, so this matches it wherever it lives (container,
+  // merged tab-strip slot, or a split pane).
+  const buttons = document.querySelectorAll(`.stream-view-btn[data-view][data-session-id="${CSS.escape(sessionId)}"]`);
   _setViewButtonState(buttons, view);
 }
 
@@ -1105,8 +1554,18 @@ function _latestAnswerUiEnabled() {
     window._ctmIsLatestAnswerUiEnabled();
 }
 
+function _finalSummaryUiEnabled() {
+  return typeof window !== 'undefined' &&
+    typeof window._ctmIsFinalSummaryUiEnabled === 'function' &&
+    window._ctmIsFinalSummaryUiEnabled();
+}
+
+function _latestAnswerHydrationEnabled() {
+  return _latestAnswerUiEnabled() || _finalSummaryUiEnabled();
+}
+
 function _hydrateLatestAnswerFromConversationMessages(sessionId, messages, source, opts) {
-  if (!_latestAnswerUiEnabled()) return false;
+  if (!_latestAnswerHydrationEnabled()) return false;
   if (typeof window === 'undefined' || typeof window._ctmHydrateLatestAnswerFromMessages !== 'function') return false;
   try {
     return window._ctmHydrateLatestAnswerFromMessages(sessionId, messages, {
@@ -1120,7 +1579,7 @@ function _hydrateLatestAnswerFromConversationMessages(sessionId, messages, sourc
 }
 
 async function _primeLatestAnswerForTerminal(sessionId, opts) {
-  if (!_latestAnswerUiEnabled()) return null;
+  if (!_latestAnswerHydrationEnabled()) return null;
   opts = opts || {};
   const now = Date.now();
   const cached = _latestAnswerTerminalPrime.get(sessionId);
@@ -1178,9 +1637,36 @@ function _buildExportMenu(sessionId) {
   menu.className = 'stream-export-menu-items';
   menu.setAttribute('role', 'menu');
 
+  // The dropdown is position:fixed (viewport-relative) so it escapes the
+  // #tabbar { overflow:hidden } clip when the controls are merged onto the tab
+  // strip. Anchor it under the trigger, right-aligned, clamped to the viewport.
+  const positionMenu = () => {
+    const rect = trigger.getBoundingClientRect();
+    const margin = 8;
+    menu.style.visibility = 'hidden';
+    menu.style.top = '0px';
+    menu.style.left = '0px';
+    const w = menu.offsetWidth || 168;
+    const h = menu.offsetHeight || 0;
+    const left = Math.max(margin, Math.min(rect.right - w, window.innerWidth - w - margin));
+    let top = rect.bottom + 4;
+    if (top + h > window.innerHeight - margin) {
+      top = Math.max(margin, window.innerHeight - h - margin);
+    }
+    menu.style.left = left + 'px';
+    menu.style.top = top + 'px';
+    menu.style.visibility = '';
+  };
+
+  let reposition = null;
   const closeMenu = () => {
     container.classList.remove('open');
     trigger.setAttribute('aria-expanded', 'false');
+    if (reposition) {
+      window.removeEventListener('scroll', reposition, true);
+      window.removeEventListener('resize', reposition);
+      reposition = null;
+    }
   };
 
   const addSection = (label) => {
@@ -1224,6 +1710,16 @@ function _buildExportMenu(sessionId) {
     }
   };
 
+  addSection('Session');
+  addItem('📋 Copy command', () => {
+    const sess = (typeof state !== 'undefined' && state.sessions) ? state.sessions.get(sessionId) : null;
+    const cwd = (sess && ((sess.meta && sess.meta.cwd) || sess.cwd)) || '';
+    if (typeof window.copySessionCommand === 'function') window.copySessionCommand(sessionId, cwd);
+  });
+  addItem('⬚ Split right', () => { if (typeof window.splitFocusedPane === 'function') window.splitFocusedPane('h'); });
+  addItem('⬚ Split down', () => { if (typeof window.splitFocusedPane === 'function') window.splitFocusedPane('v'); });
+  addDivider();
+
   addSection('Review');
   addItem('📝 Transcript', () => {
     const caps = (typeof window !== 'undefined' && typeof window._ctmAgentCapsForSession === 'function')
@@ -1291,6 +1787,14 @@ function _buildExportMenu(sessionId) {
     const open = !container.classList.contains('open');
     container.classList.toggle('open', open);
     trigger.setAttribute('aria-expanded', open ? 'true' : 'false');
+    if (open) {
+      positionMenu();
+      reposition = () => { if (container.classList.contains('open')) positionMenu(); };
+      window.addEventListener('scroll', reposition, true);
+      window.addEventListener('resize', reposition);
+    } else {
+      closeMenu();
+    }
   };
   document.addEventListener('click', closeMenu);
 
@@ -1328,7 +1832,12 @@ function setSessionView(sessionId, view, opts) {
     if (xtermEl) xtermEl.style.display = '';
     if (convView) convView.style.display = 'none';
     if (typeof _renderCodexFinalPanel === 'function') _renderCodexFinalPanel(sessionId);
-    if (_latestAnswerUiEnabled()) _primeLatestAnswerForTerminal(sessionId);
+    if (_latestAnswerHydrationEnabled()) _primeLatestAnswerForTerminal(sessionId);
+    if (!opts.skipTerminalRestore &&
+        typeof window !== 'undefined' &&
+        typeof window._ctmEnsureTerminalRestoreForVisibleView === 'function') {
+      window._ctmEnsureTerminalRestoreForVisibleView(sessionId, { reason: 'switch-to-terminal-view' });
+    }
     if (window._ws) unsubscribeFromStream(window._ws, sessionId);
   }
   return view;
@@ -1353,6 +1862,8 @@ function _applyStreamEvent(sessionId, container, msg) {
   const refreshLatestPromptStatus = () => {
     if (_isPromptTurnContainer(container)) _refreshLatestPromptTurnStatus(sessionId, container);
   };
+  const scrollAnchor = _captureConversationScrollAnchor(container);
+  const restoreScrollAnchor = () => _restoreConversationScrollAnchor(container, scrollAnchor);
 
   // Explicit update (server signaled _update=true): replace the row with
   // this parentUuid.
@@ -1364,11 +1875,14 @@ function _applyStreamEvent(sessionId, container, msg) {
         : renderConversationEvent(msg);
       if (newEl) {
         _assignConversationParentUuid(newEl, parentUuid);
+        _linkConversationDocumentReferences(container, newEl);
         _replaceConversationParentEvent(existing, newEl);
+        _markConversationEventSeen(sessionId, msg);
       } else {
         _replaceConversationParentEvent(existing, null); // Event became empty after update
       }
       refreshLatestPromptStatus();
+      restoreScrollAnchor();
       return;
     }
   }
@@ -1385,9 +1899,12 @@ function _applyStreamEvent(sessionId, container, msg) {
         : renderConversationEvent(msg);
       if (newEl) {
         _assignConversationParentUuid(newEl, parentUuid);
+        _linkConversationDocumentReferences(container, newEl);
         _replaceConversationParentEvent(existing, newEl);
+        _markConversationEventSeen(sessionId, msg);
       }
       refreshLatestPromptStatus();
+      restoreScrollAnchor();
       return;
     }
   }
@@ -1399,14 +1916,37 @@ function _applyStreamEvent(sessionId, container, msg) {
         : renderConversationEvent(msg);
       if (newEl) {
         _assignConversationParentUuid(newEl, parentUuid);
+        _linkConversationDocumentReferences(container, newEl);
         _replaceConversationParentEvent(existing, newEl);
         seen.add(parentUuid);
+        _markConversationEventSeen(sessionId, msg);
       }
       refreshLatestPromptStatus();
+      restoreScrollAnchor();
       return;
     }
   }
 
+  if (_conversationEventAlreadySeen(sessionId, msg)) {
+    if (parentUuid) seen.add(parentUuid);
+    refreshLatestPromptStatus();
+    restoreScrollAnchor();
+    return;
+  }
+
+  const duplicatePromptTurn = _findDuplicateConversationPromptTurn(container, msg);
+  if (duplicatePromptTurn) {
+    _conversationStampPromptTurn(duplicatePromptTurn, msg);
+    if (parentUuid) {
+      if (!duplicatePromptTurn.dataset?.parentUuid) _assignConversationParentUuid(duplicatePromptTurn, parentUuid);
+      seen.add(parentUuid);
+    }
+    _markConversationEventSeen(sessionId, msg);
+    refreshLatestPromptStatus();
+    restoreScrollAnchor();
+    return;
+  }
+
   const el = _isPromptTurnContainer(container)
     ? _appendConversationEventToTurns(container, msg, { expandPrompt: false, collapseExisting: true, expandSetup: true })
     : renderConversationEvent(msg);
@@ -1415,6 +1955,7 @@ function _applyStreamEvent(sessionId, container, msg) {
     _assignConversationParentUuid(el, parentUuid);
     if (seen) seen.add(parentUuid);
   }
+  _markConversationEventSeen(sessionId, msg);
   // If this is a tool-only thought-group AND the last rendered child is also
   // a tool-only thought-group, fold this one's single step into the existing
   // group instead of appending a new wrapper. Matches Review's grouping.
@@ -1425,6 +1966,7 @@ function _applyStreamEvent(sessionId, container, msg) {
   } else {
     container.appendChild(el);
   }
+  _linkConversationDocumentReferences(container, container);
   // Phase 4 reconciliation: respect the global "Hide tool calls" toggle
   // for newly-streamed tool-only rows so the user's preference applies
   // immediately to live updates, not just to the next full re-render.
@@ -1432,9 +1974,9 @@ function _applyStreamEvent(sessionId, container, msg) {
     const cb = document.getElementById('hide-tool-msgs');
     if (cb && cb.checked) el.style.display = 'none';
   }
+  _pruneConversationTurns(container);
   refreshLatestPromptStatus();
-  const atBottom = container.scrollHeight - container.scrollTop - container.clientHeight < 100;
-  if (atBottom) container.scrollTop = container.scrollHeight;
+  restoreScrollAnchor();
 }
 
 // Prime the conversation view with the full cached history from
@@ -1445,12 +1987,10 @@ function _applyStreamEvent(sessionId, container, msg) {
 // the same promise. If priming has already completed, returns immediately.
 // Call this on stream-init; stream-events arriving during the HTTP fetch
 // are buffered in _streamState._pendingEvents and flushed after prime.
-// Pagination support for chat-style conversation loading. Matches the
-// upstream claude-code-history-viewer contract (src-tauri's
-// load_session_messages_paginated): offset=0 returns the most recent N
-// messages; each successive page walks backward in history. See
-// gap-reports/viewer-2026-04-23.md item D.
-const CONVERSATION_PAGE_SIZE = 200;
+// Pagination support for chat-style conversation loading. The server returns
+// complete semantic turns for this view so pages never start inside a long
+// tool-heavy turn without the owning prompt.
+const CONVERSATION_TURN_PAGE_SIZE = 20;
 
 function _conversationViewHasRenderableContent(convView) {
   if (!convView || !convView.children || convView.children.length === 0) return false;
@@ -1489,24 +2029,54 @@ function _primeStillCurrent(sessionId, token, convView) {
 }
 
 function _cleanSystemXml(t) {
-  return t
+  return String(t || '')
     .replace(/<([a-z][a-z0-9]*(?:-[a-z0-9]+)+)[^>]*>[\s\S]*?<\/\1>/gi, '')
     .replace(/<\/?[a-z][a-z0-9]*(?:-[a-z0-9]+)+[^>]*>/gi, '')
     .trim();
 }
 
+function _messageTextForConversationEvent(message) {
+  if (!message || typeof message !== 'object') return '';
+  const direct = message.text ?? message.content ?? message.message ?? '';
+  if (typeof direct === 'string') return direct;
+  if (Array.isArray(direct)) {
+    return direct.map(part => {
+      if (typeof part === 'string') return part;
+      if (!part || typeof part !== 'object') return '';
+      return part.text || part.content || part.message || '';
+    }).filter(Boolean).join('\n');
+  }
+  if (direct && typeof direct === 'object') return direct.text || direct.content || direct.message || '';
+  return '';
+}
+
 function _messagesToEvents(messages) {
   return messages
-    .filter(m => m.role === 'user' || m.role === 'assistant')
-    .map(m => ({
-      type: m.role,
-      data: {
-        text: m.role === 'user' ? _cleanSystemXml(m.text || '') : (m.text || ''),
+    .filter(m => m.role === 'user' || m.role === 'assistant' || m.role === 'system')
+    .map(m => {
+      const rawText = _messageTextForConversationEvent(m);
+      const cleanedUserText = m.role === 'user' ? _cleanSystemXml(rawText) : rawText;
+      const isSystemOnlyUser = m.role === 'user' && rawText && !cleanedUserText;
+      const type = (m.role === 'system' || isSystemOnlyUser) ? 'summary' : m.role;
+      const data = {
+        text: type === 'summary' ? rawText : cleanedUserText,
         model: m.model || '',
         parentUuid: m.parentUuid,
-      },
-      timestamp: m.timestamp,
-    }));
+      };
+      if (m.image_refs) data.image_refs = m.image_refs;
+      if (m.imageRefs) data.imageRefs = m.imageRefs;
+      if (m.attachments) data.attachments = m.attachments;
+      if (m.images) data.images = m.images;
+      if (m.contentBlocks) data.contentBlocks = m.contentBlocks;
+      // Structured-capture rows (tool cards, reasoning, dividers) and subagent
+      // tags need their metadata on the event or MR.messageMeta can't see it.
+      if (m.metadata) data.metadata = m.metadata;
+      return {
+        type,
+        data,
+        timestamp: m.timestamp,
+      };
+    });
 }
 
 function _renderConversationState(container, text, kind = 'empty') {
@@ -1564,13 +2134,15 @@ function _removeConversationState(container) {
 
 function _normalizeConversationPage(body) {
   if (Array.isArray(body)) {
-    return { messages: body, total: body.length, has_more: false, next_offset: body.length };
+    return { messages: body, total: body.length, has_more: false, next_offset: body.length, page_kind: 'messages', turn_count: 0 };
   }
   return {
     messages: Array.isArray(body?.messages) ? body.messages : [],
     total: typeof body?.total === 'number' ? body.total : 0,
     has_more: !!body?.has_more,
     next_offset: typeof body?.next_offset === 'number' ? body.next_offset : 0,
+    page_kind: body?.page_kind || 'messages',
+    turn_count: typeof body?.turn_count === 'number' ? body.turn_count : 0,
     partial: !!body?.partial,
   };
 }
@@ -1634,8 +2206,8 @@ function _conversationLookupCandidates(sessionId) {
 }
 
 /**
- * Fetch one chat-style page of messages. offset=0 yields the most recent
- * CONVERSATION_PAGE_SIZE messages. Backend returns either an array
+ * Fetch one chat-style page of turns. offset=0 yields the most recent
+ * CONVERSATION_TURN_PAGE_SIZE turns. Backend returns either an array
  * (legacy/unpaginated response for other callers) or a structured page:
  *   { messages, total, has_more, next_offset, partial? }
  */
@@ -1645,7 +2217,7 @@ async function _fetchConversationPage(sessionId, offset, opts) {
   let firstEmptyPage = null;
   for (const candidate of candidates) {
     let url = `/api/session/messages?id=${encodeURIComponent(candidate.id)}`
-      + `&offset=${offset}&limit=${CONVERSATION_PAGE_SIZE}`;
+      + `&offset=${offset}&limit=${CONVERSATION_TURN_PAGE_SIZE}&mode=turns`;
     if (candidate.projectEntry) url += `&project=${encodeURIComponent(candidate.projectEntry)}`;
     if (opts.fresh && offset === 0) url += '&nocache=1';
     const resp = await fetch(url, { cache: 'no-store' });
@@ -1664,18 +2236,56 @@ function _ensureLoadOlderBar(convView, sessionId) {
   bar.className = 'conversation-load-older';
   bar.type = 'button';
   bar.style.cssText = 'display:none;margin:0 auto 8px;padding:6px 14px;border:1px solid var(--conversation-load-border, var(--border, #333));background:var(--conversation-load-bg, var(--surface-2, #1a1a2e));color:var(--conversation-load-fg, var(--fg-dim, #999));border-radius:6px;font-size:11px;cursor:pointer;';
-  bar.textContent = `Load ${CONVERSATION_PAGE_SIZE} older messages`;
+  bar.textContent = `Load ${CONVERSATION_TURN_PAGE_SIZE} older turns`;
   bar.onclick = () => _loadOlder(sessionId, convView);
   convView.insertBefore(bar, convView.firstChild);
+  // Auto-load when the bar scrolls into view (button stays as the fallback
+  // affordance). bar.disabled already provides re-entrancy guarding.
+  if (typeof IntersectionObserver === 'function') {
+    const observer = new IntersectionObserver((entries) => {
+      for (const entry of entries) {
+        if (!entry.isIntersecting) continue;
+        if (convView.dataset.hasMore !== '1' || bar.disabled || bar.style.display === 'none') continue;
+        _loadOlder(sessionId, convView);
+      }
+    }, { root: convView, threshold: 0 });
+    observer.observe(bar);
+  }
   return bar;
 }
 
+// Soft DOM cap: a very long live session accumulates turns without bound.
+// Above the cap, prune the OLDEST rendered turns and re-arm the load-older
+// bar at the recomputed offset — scroll-up refetches them (turn pages are
+// O(limit) on the server), which replaces height-placeholder bookkeeping.
+// Only prunes while the user is following the bottom, so it can never yank
+// the viewport from under someone reading history.
+const MAX_RENDERED_TURNS = 400;
+function _pruneConversationTurns(convView) {
+  if (!convView || typeof convView.querySelectorAll !== 'function') return;
+  if (!_isPromptTurnContainer(convView)) return;
+  if (!_conversationScrollNearBottom(convView)) return;
+  const turns = convView.querySelectorAll(':scope > .prompt-turn:not(.setup-turn)');
+  const excess = turns.length - MAX_RENDERED_TURNS;
+  if (excess <= 0) return;
+  for (let i = 0; i < excess; i++) turns[i].remove();
+  const nextOffset = Math.max(0, (parseInt(convView.dataset.nextOffset || '0', 10) || 0) - excess);
+  convView.dataset.nextOffset = String(nextOffset);
+  convView.dataset.hasMore = '1';
+  const bar = convView.querySelector(':scope > .conversation-load-older');
+  if (bar) {
+    bar.textContent = 'Load older turns';
+    bar.style.display = 'block';
+  }
+}
+
 function _updateLoadOlderBar(convView, page) {
   const bar = convView.querySelector(':scope > .conversation-load-older');
   if (!bar) return;
   if (page && page.has_more) {
     const remaining = Math.max(0, page.total - page.next_offset);
-    bar.textContent = `Load older messages (${remaining} remaining)`;
+    const unit = page.page_kind === 'turns' ? 'turns' : 'messages';
+    bar.textContent = `Load older ${unit} (${remaining} remaining)`;
     bar.style.display = 'block';
   } else {
     bar.style.display = 'none';
@@ -1711,18 +2321,22 @@ async function _loadOlder(sessionId, convView) {
 	    while (pageHost.firstChild) frag.appendChild(pageHost.firstChild);
 	    // Prepend below the bar so the bar stays at the very top.
 	    convView.insertBefore(frag, bar.nextSibling);
+    _linkConversationDocumentReferences(convView, convView);
     const newScrollHeight = convView.scrollHeight;
     convView.scrollTop = prevScrollTop + (newScrollHeight - prevScrollHeight);
     // Merge new parentUuids into the dedup set so live events for primed
     // turns still find and replace their older-page counterparts.
     const seen = _streamState._parentUuidSeen.get(sessionId) || new Set();
-    for (const e of events) if (e.data?.parentUuid) seen.add(e.data.parentUuid);
+    for (const e of events) {
+      if (e.data?.parentUuid) seen.add(e.data.parentUuid);
+      _markConversationEventSeen(sessionId, e);
+    }
     _streamState._parentUuidSeen.set(sessionId, seen);
     _updateLoadOlderBar(convView, page);
     _refreshLatestPromptTurnStatus(sessionId, convView);
   } catch (e) {
     console.error('[stream-view] load older failed:', e && e.message);
-    bar.textContent = `Load ${CONVERSATION_PAGE_SIZE} older messages`;
+    bar.textContent = `Load ${CONVERSATION_TURN_PAGE_SIZE} older turns`;
   } finally {
     bar.disabled = false;
   }
@@ -1742,6 +2356,7 @@ async function _primeConversationView(sessionId, convView, opts) {
   const token = _nextPrimeToken(sessionId);
   _streamState._primed.delete(sessionId);
   _streamState._primedTarget.delete(sessionId);
+  _streamState._messageFingerprintSeen.delete(sessionId);
   _setConversationBusy(convView, true);
   _renderConversationLoading(convView);
 
@@ -1836,6 +2451,7 @@ function _resetPrimingState(sessionId) {
   _streamState._primingTarget.delete(sessionId);
   _streamState._pendingEvents.delete(sessionId);
   _streamState._parentUuidSeen.delete(sessionId);
+  _streamState._messageFingerprintSeen.delete(sessionId);
 }
 
 // --- Tooltip hover binding ---
@@ -1963,6 +2579,8 @@ if (typeof module !== 'undefined' && module.exports) {
     renderConversationEvent,
     populateConversationView,
     _mergeConsecutiveToolGroups,
+    _captureConversationScrollAnchor,
+    _restoreConversationScrollAnchor,
     _streamState,
     getPreferredSessionView,
     setPreferredSessionView,