create-walle 0.9.13 → 0.9.15

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

@@ -14,6 +14,11 @@ const _streamState = {
   activeView: new Map(),
   tooltipEl: null,
   tooltipTimer: null,
+  tooltipAnchorEl: null,
+  tooltipRefreshTimer: null,
+  tooltipRefreshDebounceTimer: null,
+  _tooltipActiveSessionId: null,
+  _tooltipPendingSessionId: null,
   _tooltipReqId: 0,
   // Per-session priming bookkeeping.
   //   _primed: sessionId → true once _primeConversationView() has rendered
@@ -22,11 +27,20 @@ const _streamState = {
   //   _priming: sessionId → in-flight Promise while the HTTP fetch is
   //     running — prevents duplicate primes when stream-init fires twice
   //     (e.g. reconnect).
+  //   _primedTarget/_primingTarget: sessionId → conversation DOM node that
+  //     owns the completed/in-flight prime. Tab activation can recreate the
+  //     node while keeping the same sessionId; stale state must not make the
+  //     new empty node skip its HTTP prime.
+  //   _primeToken: sessionId → monotonic generation that invalidates older
+  //     in-flight primes when the view is reset or recreated.
   //   _pendingEvents: sessionId → [stream-event...] buffered during prime.
   //   _parentUuidSeen: sessionId → Set of parentUuids already rendered,
   //     used to dedup stream-events that overlap with primed history.
   _primed: new Map(),
+  _primedTarget: new Map(),
   _priming: new Map(),
+  _primingTarget: new Map(),
+  _primeToken: new Map(),
   _pendingEvents: new Map(),
   _parentUuidSeen: new Map(),
 };
@@ -41,9 +55,13 @@ function initStreamTooltip() {
     background: var(--surface-2, #1a1a2e); color: var(--fg, #e0e0e0);
     border: 1px solid var(--border, #333); border-radius: 8px;
     width: min(420px, calc(100vw - 24px)); max-height: min(520px, calc(100vh - 16px));
-    overflow: hidden; font-size: 12px; line-height: 1.45; pointer-events: none;
+    overflow: hidden; font-size: 12px; line-height: 1.45; pointer-events: auto;
+    user-select: text; cursor: text;
     box-shadow: 0 10px 28px rgba(0,0,0,0.42), 0 0 0 1px rgba(255,255,255,0.02) inset;
   `;
+  tooltip.tabIndex = -1;
+  tooltip.setAttribute('role', 'dialog');
+  tooltip.setAttribute('aria-label', 'Session summary');
   document.body.appendChild(tooltip);
   _streamState.tooltipEl = tooltip;
 }
@@ -79,6 +97,7 @@ function _tooltipStatusLabel(status) {
 function _tooltipSourceLabel(source) {
   const key = _tooltipText(source).toLowerCase();
   if (key === 'ai-summary') return 'AI summary';
+  if (key === 'latest-prompt') return 'Latest prompt';
   if (key === 'prompt-fallback') return 'Prompt fallback';
   if (key === 'title-fallback') return 'Title fallback';
   if (key === 'missing') return 'Intent missing';
@@ -95,6 +114,25 @@ function _tooltipPhaseLabel(phase) {
   return key ? _tooltipStatusLabel(key) : 'Progress';
 }
 
+function _tooltipFreshnessLabel(freshness) {
+  const key = _tooltipText(freshness).toLowerCase();
+  if (key === 'fresh') return 'Fresh';
+  if (key === 'updating') return 'Updating';
+  if (key === 'stale') return 'Stale AI';
+  if (key === 'fallback') return 'No AI';
+  if (key === 'rejected') return 'Rejected AI';
+  if (key === 'missing') return 'Missing';
+  return key ? _tooltipStatusLabel(key) : 'Freshness';
+}
+
+function _tooltipFreshnessTone(freshness) {
+  const key = _tooltipText(freshness).toLowerCase();
+  if (key === 'fresh') return 'intent';
+  if (key === 'updating') return 'progress';
+  if (key === 'stale' || key === 'rejected') return 'fallback';
+  return 'idle';
+}
+
 function _tooltipAgentLabel(session, anchorEl) {
   const agent = _tooltipText(anchorEl?.dataset?.agent).toLowerCase();
   if (agent) {
@@ -192,10 +230,96 @@ function _tooltipAppendProgress(container, progress) {
   container.appendChild(_tooltipSection('Progress', body));
 }
 
-async function showStreamTooltip(sessionId, anchorEl) {
-  if (_streamState.tooltipTimer) clearTimeout(_streamState.tooltipTimer);
+function _tooltipCurrentTask(summary, session) {
+  const currentTask = summary?.currentTask || null;
+  if (currentTask && (currentTask.text || currentTask.source)) return currentTask;
+  const intent = summary?.intent || {};
+  const displayText = _tooltipText(intent.text || summary?.summary || summary?.displayPrompt || summary?.lastPrompt || session?.meta?.label);
+  return {
+    text: displayText || null,
+    source: intent.source || (summary?.summary ? 'ai-summary' : 'prompt-fallback'),
+    confidence: intent.confidence || (summary?.summary ? 'high' : 'low'),
+    freshness: intent.freshness || (summary?.summary ? 'fresh' : 'fallback'),
+    timestamp: intent.timestamp || 0,
+    updatedAt: intent.updatedAt || 0,
+    prompt: intent.prompt || summary?.displayPrompt || summary?.lastPrompt || null,
+    fullPrompt: intent.fullPrompt || summary?.displayPrompt || summary?.lastPrompt || null,
+  };
+}
+
+function _tooltipAppendAiSummary(container, aiSummary, currentTask) {
+  const aiText = _tooltipText(aiSummary?.text);
+  if (!aiText) return;
+  if (_tooltipText(currentTask?.source) === 'ai-summary' && aiText === _tooltipText(currentTask?.text)) return;
+
+  const body = document.createElement('div');
+  const row = document.createElement('div');
+  row.style.cssText = 'display:flex;flex-wrap:wrap;gap:6px;margin-bottom:5px;';
+  row.appendChild(_tooltipPill(_tooltipFreshnessLabel(aiSummary.status || aiSummary.freshness), _tooltipFreshnessTone(aiSummary.status || aiSummary.freshness)));
+  if (aiSummary.model) row.appendChild(_tooltipPill(_tooltipCap(aiSummary.model, 24), 'idle'));
+  const age = _tooltipAge(aiSummary.updatedAt);
+  if (age) {
+    const ageEl = document.createElement('span');
+    ageEl.style.cssText = 'align-self:center;color:var(--fg-dim,#727aa1);font-size:11px;';
+    ageEl.textContent = age;
+    row.appendChild(ageEl);
+  }
+  body.appendChild(row);
+  body.appendChild(_tooltipTextBlock(aiText, false));
+  container.appendChild(_tooltipSection('AI Summary', body));
+}
+
+function _resolveStreamTooltipAnchor(sessionId) {
+  const current = _streamState.tooltipAnchorEl;
+  if (current && typeof current.getBoundingClientRect === 'function' && (current.isConnected !== false)) return current;
+  if (typeof document === 'undefined' || !document.querySelector) return current;
+  try {
+    return document.querySelector(`#session-list .session-item[data-session-id="${CSS.escape(sessionId)}"]`) || current;
+  } catch {
+    return current;
+  }
+}
+
+function _clearTooltipRefreshTimers() {
+  if (_streamState.tooltipRefreshTimer) {
+    clearTimeout(_streamState.tooltipRefreshTimer);
+    _streamState.tooltipRefreshTimer = null;
+  }
+  if (_streamState.tooltipRefreshDebounceTimer) {
+    clearTimeout(_streamState.tooltipRefreshDebounceTimer);
+    _streamState.tooltipRefreshDebounceTimer = null;
+  }
+}
+
+function _scheduleVisibleStreamTooltipRefresh() {
+  if (_streamState.tooltipRefreshTimer) clearTimeout(_streamState.tooltipRefreshTimer);
+  _streamState.tooltipRefreshTimer = null;
+  if (!_streamTooltipVisible() || !_streamState._tooltipActiveSessionId) return;
+  _streamState.tooltipRefreshTimer = setTimeout(() => {
+    _streamState.tooltipRefreshTimer = null;
+    if (!_streamTooltipVisible() || !_streamState._tooltipActiveSessionId) return;
+    const id = _streamState._tooltipActiveSessionId;
+    showStreamTooltip(id, _resolveStreamTooltipAnchor(id), { refresh: true });
+  }, 10000);
+  if (typeof _streamState.tooltipRefreshTimer.unref === 'function') _streamState.tooltipRefreshTimer.unref();
+}
+
+function _refreshVisibleStreamTooltip(delayMs = 250) {
+  if (!_streamTooltipVisible() || !_streamState._tooltipActiveSessionId) return;
+  if (_streamState.tooltipRefreshDebounceTimer) clearTimeout(_streamState.tooltipRefreshDebounceTimer);
+  _streamState.tooltipRefreshDebounceTimer = setTimeout(() => {
+    _streamState.tooltipRefreshDebounceTimer = null;
+    if (!_streamTooltipVisible() || !_streamState._tooltipActiveSessionId) return;
+    const id = _streamState._tooltipActiveSessionId;
+    showStreamTooltip(id, _resolveStreamTooltipAnchor(id), { refresh: true });
+  }, delayMs);
+}
+
+async function showStreamTooltip(sessionId, anchorEl, opts = {}) {
+  _clearPendingStreamTooltip(false);
   const tooltip = _streamState.tooltipEl;
   if (!tooltip) return;
+  if (anchorEl) _streamState.tooltipAnchorEl = anchorEl;
 
   // Tag this request so we can detect staleness after await
   const requestId = ++_streamState._tooltipReqId;
@@ -239,14 +363,15 @@ async function showStreamTooltip(sessionId, anchorEl) {
     header.appendChild(_tooltipPill(_tooltipStatusLabel(status), statusTone));
     content.appendChild(header);
 
-    const intent = summary.intent || {};
-    const displayText = _tooltipText(intent.text || summary.summary || summary.displayPrompt || summary.lastPrompt || session?.meta?.label);
+    const currentTask = _tooltipCurrentTask(summary, session);
+    const displayText = _tooltipText(currentTask.text || summary.displayPrompt || summary.lastPrompt || session?.meta?.label);
     const intentBody = document.createElement('div');
     const sourceRow = document.createElement('div');
     sourceRow.style.cssText = 'display:flex;flex-wrap:wrap;gap:6px;margin-bottom:5px;';
-    sourceRow.appendChild(_tooltipPill(_tooltipSourceLabel(intent.source), intent.source === 'ai-summary' ? 'intent' : 'fallback'));
-    if (intent.confidence) sourceRow.appendChild(_tooltipPill(_tooltipStatusLabel(intent.confidence), 'idle'));
-    const intentAge = _tooltipAge(intent.updatedAt || intent.timestamp);
+    sourceRow.appendChild(_tooltipPill(_tooltipSourceLabel(currentTask.source), currentTask.source === 'ai-summary' ? 'intent' : 'fallback'));
+    if (currentTask.freshness) sourceRow.appendChild(_tooltipPill(_tooltipFreshnessLabel(currentTask.freshness), _tooltipFreshnessTone(currentTask.freshness)));
+    if (currentTask.confidence) sourceRow.appendChild(_tooltipPill(_tooltipStatusLabel(currentTask.confidence), 'idle'));
+    const intentAge = _tooltipAge(currentTask.updatedAt || currentTask.timestamp || currentTask.promptTimestamp);
     if (intentAge) {
       const ageEl = document.createElement('span');
       ageEl.style.cssText = 'align-self:center;color:var(--fg-dim,#727aa1);font-size:11px;';
@@ -255,7 +380,9 @@ async function showStreamTooltip(sessionId, anchorEl) {
     }
     intentBody.appendChild(sourceRow);
     intentBody.appendChild(_tooltipTextBlock(displayText || 'No intent captured yet.', !displayText));
-    content.appendChild(_tooltipSection('Intent', intentBody));
+    content.appendChild(_tooltipSection('Current Task', intentBody));
+
+    _tooltipAppendAiSummary(content, summary.aiSummary, currentTask);
 
     _tooltipAppendProgress(content, summary.progress);
 
@@ -273,32 +400,47 @@ async function showStreamTooltip(sessionId, anchorEl) {
 
     tooltip.appendChild(content);
 
+    tooltip.dataset.sessionId = sessionId;
+    _streamState._tooltipActiveSessionId = sessionId;
+    _streamState.tooltipAnchorEl = anchorEl || _streamState.tooltipAnchorEl;
     tooltip.style.display = 'block';
 
-    // Position next to anchor (right of sidebar)
-    const rect = anchorEl.getBoundingClientRect();
-    const sidebar = document.getElementById('sidebar');
-    const sidebarRight = sidebar ? sidebar.getBoundingClientRect().right : rect.right;
-    tooltip.style.left = (sidebarRight + 8) + 'px';
-    tooltip.style.top = Math.max(8, rect.top - 10) + 'px';
-
-    // Keep within viewport
-    const tr = tooltip.getBoundingClientRect();
-    if (tr.right > window.innerWidth - 8) {
-      tooltip.style.left = (rect.left - tr.width - 8) + 'px';
-    }
-    if (tr.bottom > window.innerHeight - 8) {
-      tooltip.style.top = (window.innerHeight - tr.height - 8) + 'px';
+    const anchor = anchorEl || _resolveStreamTooltipAnchor(sessionId);
+    if (anchor && typeof anchor.getBoundingClientRect === 'function') {
+      // Position next to anchor (right of sidebar)
+      const rect = anchor.getBoundingClientRect();
+      const sidebar = document.getElementById && document.getElementById('sidebar');
+      const sidebarRight = sidebar ? sidebar.getBoundingClientRect().right : rect.right;
+      tooltip.style.left = (sidebarRight + 8) + 'px';
+      tooltip.style.top = Math.max(8, rect.top - 10) + 'px';
+
+      // Keep within viewport
+      const tr = tooltip.getBoundingClientRect();
+      const viewportWidth = Number.isFinite(window.innerWidth) ? window.innerWidth : 1200;
+      const viewportHeight = Number.isFinite(window.innerHeight) ? window.innerHeight : 800;
+      if (tr.right > viewportWidth - 8) {
+        tooltip.style.left = (rect.left - tr.width - 8) + 'px';
+      }
+      if (tr.bottom > viewportHeight - 8) {
+        tooltip.style.top = (viewportHeight - tr.height - 8) + 'px';
+      }
     }
+    if (!opts.noRefresh) _scheduleVisibleStreamTooltipRefresh();
   } catch {
     hideStreamTooltip();
   }
 }
 
 function hideStreamTooltip() {
-  if (_streamState.tooltipTimer) { clearTimeout(_streamState.tooltipTimer); _streamState.tooltipTimer = null; }
+  _clearPendingStreamTooltip(false);
+  _clearTooltipRefreshTimers();
   _streamState._tooltipReqId++; // Invalidate any in-flight fetch
-  if (_streamState.tooltipEl) _streamState.tooltipEl.style.display = 'none';
+  _streamState._tooltipActiveSessionId = null;
+  _streamState.tooltipAnchorEl = null;
+  if (_streamState.tooltipEl) {
+    _streamState.tooltipEl.style.display = 'none';
+    delete _streamState.tooltipEl.dataset.sessionId;
+  }
 }
 
 // --- Conversation View ---
@@ -307,6 +449,7 @@ function createConversationView(sessionId) {
   const container = document.createElement('div');
   container.className = 'conversation-view';
   container.dataset.sessionId = sessionId;
+  container.dataset.turnMode = 'conversation';
   container.style.cssText = `
     display: none; flex-direction: column; height: 100%;
     overflow-y: auto; padding: 12px 16px; background: var(--surface-1, #111);
@@ -364,6 +507,11 @@ function _assignConversationParentUuid(el, parentUuid) {
 
 function _replaceConversationParentEvent(existing, newEl) {
   if (!existing) return false;
+  if (existing.classList && existing.classList.contains('prompt-turn')) {
+    if (newEl) existing.replaceWith(newEl);
+    else existing.remove();
+    return true;
+  }
   const existingGroup = existing.closest ? existing.closest('.conv-tool-group') : null;
   if (existingGroup && newEl && newEl.classList && newEl.classList.contains('conv-tool-group')) {
     const targetRow = existing.closest('.tool-activity-item') || existing;
@@ -395,20 +543,102 @@ function _replaceConversationParentEvent(existing, newEl) {
   return true;
 }
 
+function _isPromptTurnContainer(container) {
+  return !!(container && container.dataset && (container.dataset.turnMode === 'conversation' || container.dataset.turnMode === 'review'));
+}
+
+function _latestPromptTurn(container) {
+  if (!container || !container.children) return null;
+  for (let i = container.children.length - 1; i >= 0; i--) {
+    const child = container.children[i];
+    if (child && child.classList && child.classList.contains('prompt-turn')) return child;
+  }
+  return null;
+}
+
+function _collapsePromptTurns(container) {
+  if (!container || !container.children || !MR || typeof MR.setPromptTurnExpanded !== 'function') return;
+  for (const child of Array.from(container.children)) {
+    if (child && child.classList && child.classList.contains('prompt-turn')) MR.setPromptTurnExpanded(child, false);
+  }
+}
+
+function _expandLatestPromptTurn(container) {
+  const latest = _latestPromptTurn(container);
+  if (latest && MR && typeof MR.setPromptTurnExpanded === 'function') MR.setPromptTurnExpanded(latest, true);
+}
+
+function _removePromptTurnEmpty(body) {
+  if (!body || !body.children) return;
+  for (const child of Array.from(body.children)) {
+    if (child && child.classList && child.classList.contains('prompt-turn-empty')) child.remove();
+  }
+}
+
+function _ensureResponseTurn(container, opts) {
+  let turn = _latestPromptTurn(container);
+  if (turn) return turn;
+  turn = MR.createConversationTurn(null, {
+    setup: true,
+    expanded: !!(opts && opts.expandSetup),
+    setupLabel: 'Session setup and context',
+  });
+  container.appendChild(turn);
+  return turn;
+}
+
+function _renderConversationNodeForEvent(evt, opts) {
+  if (MR && typeof MR.isConversationPromptEvent === 'function' && MR.isConversationPromptEvent(evt)) {
+    return MR.createConversationTurn(evt, { expanded: !!(opts && opts.expandPrompt) });
+  }
+  return renderConversationEvent(evt);
+}
+
+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 });
+    _removeConversationState(container);
+    container.appendChild(turn);
+    if (typeof MR.refreshPromptTurnMeta === 'function') MR.refreshPromptTurnMeta(turn);
+    return turn;
+  }
+
+  const el = renderConversationEvent(evt);
+  if (!el) return null;
+  _removeConversationState(container);
+  const turn = _ensureResponseTurn(container, opts);
+  const body = MR.getPromptTurnBody(turn);
+  if (!body) return null;
+  _removePromptTurnEmpty(body);
+  if (evt.data?.parentUuid) _assignConversationParentUuid(el, evt.data.parentUuid);
+  if (!_mergeConsecutiveToolGroups(body, el)) body.appendChild(el);
+  if (typeof MR.refreshPromptTurnMeta === 'function') MR.refreshPromptTurnMeta(turn);
+  return el;
+}
+
 function populateConversationView(container, events) {
   container.textContent = '';
+  if (container.dataset) container.dataset.turnMode = container.dataset.turnMode || 'conversation';
   if (!events || events.length === 0) {
     _renderConversationState(container, 'No transcript messages found for this session.');
     container.scrollTop = container.scrollHeight;
     return;
   }
   for (const evt of events) {
+    if (_isPromptTurnContainer(container)) {
+      _appendConversationEventToTurns(container, evt, { expandPrompt: false, collapseExisting: false, expandSetup: false });
+      continue;
+    }
     const el = renderConversationEvent(evt);
     if (!el) continue;
     if (evt.data?.parentUuid) _assignConversationParentUuid(el, evt.data.parentUuid);
     if (_mergeConsecutiveToolGroups(container, el)) continue;
     container.appendChild(el);
   }
+  if (_isPromptTurnContainer(container)) _expandLatestPromptTurn(container);
   container.scrollTop = container.scrollHeight;
 }
 
@@ -442,6 +672,13 @@ function handleStreamMessage(msg) {
       _primeConversationView(_domId, container);
     }
   } else if (msg.type === 'stream-event') {
+    const eventType = msg.data?.type || msg.role || msg.eventType || '';
+    if (eventType === 'user' && typeof window !== 'undefined' && typeof window._ctmRecordLivePromptPreview === 'function') {
+      window._ctmRecordLivePromptPreview(_domId, msg.data?.text || msg.text || '');
+    }
+    if (_streamState._tooltipActiveSessionId === _domId && ['user', 'assistant', 'summary'].includes(eventType)) {
+      _refreshVisibleStreamTooltip(eventType === 'summary' ? 50 : 250);
+    }
     const container = document.querySelector(`.conversation-view[data-session-id="${CSS.escape(_domId)}"]`);
     if (container) {
       // If we haven't finished priming yet, queue the event and replay it later.
@@ -465,7 +702,11 @@ function handleStreamMessage(msg) {
       if (reviewEl) _applyStreamEvent('__review_' + _domId, reviewEl, msg);
     }
   } else if (msg.type === 'stream-status') {
-    if (applyStreamStatus(msg)) queueStreamStatusRender();
+    if (applyStreamStatus(msg)) {
+      queueStreamStatusRender();
+      const ctmId = msg.ctmSessionId || msg.sessionId;
+      if (_streamState._tooltipActiveSessionId === ctmId) _refreshVisibleStreamTooltip(400);
+    }
   }
 }
 
@@ -486,6 +727,7 @@ function applyStreamStatus(msg) {
   if (msg.lastActivity && s.meta) {
     s.meta.lastActivity = msg.lastActivity;
   }
+  if (changed && typeof scheduleStandupRefresh === 'function') scheduleStandupRefresh();
   return changed;
 }
 
@@ -668,14 +910,15 @@ function setSessionView(sessionId, view) {
   if (view === 'conversation') {
     if (xtermEl) xtermEl.style.display = 'none';
     if (convView) convView.style.display = 'flex';
+    if (typeof _renderCodexFinalPanel === 'function') _renderCodexFinalPanel(sessionId);
     if (window._ws) subscribeToStream(window._ws, sessionId);
-    // Fallback: if stream returns empty or takes too long, fetch from HTTP API
-    if (convView && !convView.children.length) {
-      _primeConversationView(sessionId, convView);
-    }
+    // Prime immediately. _primeConversationView is idempotent for the current
+    // DOM node, but will re-prime if tab activation recreated an empty view.
+    if (convView) _primeConversationView(sessionId, convView);
   } else {
     if (xtermEl) xtermEl.style.display = '';
     if (convView) convView.style.display = 'none';
+    if (typeof _renderCodexFinalPanel === 'function') _renderCodexFinalPanel(sessionId);
     if (window._ws) unsubscribeFromStream(window._ws, sessionId);
   }
 }
@@ -690,13 +933,20 @@ function setSessionView(sessionId, view) {
 // rendered) replace instead of duplicate.
 function _applyStreamEvent(sessionId, container, msg) {
   const parentUuid = msg.data?.parentUuid;
+  let seen = _streamState._parentUuidSeen.get(sessionId);
+  if (!seen) {
+    seen = new Set();
+    _streamState._parentUuidSeen.set(sessionId, seen);
+  }
 
   // Explicit update (server signaled _update=true): replace the row with
   // this parentUuid.
   if (msg._update && parentUuid) {
     const existing = container.querySelector(`[data-parent-uuid="${CSS.escape(parentUuid)}"]`);
     if (existing) {
-      const newEl = renderConversationEvent(msg);
+      const newEl = _isPromptTurnContainer(container)
+        ? _renderConversationNodeForEvent(msg, { expandPrompt: true })
+        : renderConversationEvent(msg);
       if (newEl) {
         _assignConversationParentUuid(newEl, parentUuid);
         _replaceConversationParentEvent(existing, newEl);
@@ -711,11 +961,12 @@ function _applyStreamEvent(sessionId, container, msg) {
   // (either from priming or an earlier stream-event), treat the new one as
   // a replace rather than an append. Claude Code sends the same parentUuid
   // for streaming chunks of one assistant turn.
-  const seen = _streamState._parentUuidSeen.get(sessionId);
   if (parentUuid && seen && seen.has(parentUuid)) {
     const existing = container.querySelector(`[data-parent-uuid="${CSS.escape(parentUuid)}"]`);
     if (existing) {
-      const newEl = renderConversationEvent(msg);
+      const newEl = _isPromptTurnContainer(container)
+        ? _renderConversationNodeForEvent(msg, { expandPrompt: true })
+        : renderConversationEvent(msg);
       if (newEl) {
         _assignConversationParentUuid(newEl, parentUuid);
         _replaceConversationParentEvent(existing, newEl);
@@ -723,10 +974,25 @@ function _applyStreamEvent(sessionId, container, msg) {
       return;
     }
   }
+  if (parentUuid && !seen.has(parentUuid)) {
+    const existing = container.querySelector(`[data-parent-uuid="${CSS.escape(parentUuid)}"]`);
+    if (existing) {
+      const newEl = _isPromptTurnContainer(container)
+        ? _renderConversationNodeForEvent(msg, { expandPrompt: true })
+        : renderConversationEvent(msg);
+      if (newEl) {
+        _assignConversationParentUuid(newEl, parentUuid);
+        _replaceConversationParentEvent(existing, newEl);
+        seen.add(parentUuid);
+      }
+      return;
+    }
+  }
 
-  const el = renderConversationEvent(msg);
+  const el = _isPromptTurnContainer(container)
+    ? _appendConversationEventToTurns(container, msg, { expandPrompt: true, collapseExisting: true, expandSetup: true })
+    : renderConversationEvent(msg);
   if (!el) return; // Skip empty events
-  _removeConversationState(container);
   if (parentUuid) {
     _assignConversationParentUuid(el, parentUuid);
     if (seen) seen.add(parentUuid);
@@ -734,7 +1000,9 @@ function _applyStreamEvent(sessionId, container, 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.
-  if (_mergeConsecutiveToolGroups(container, el)) {
+  if (_isPromptTurnContainer(container)) {
+    // Already inserted into the prompt-turn body above.
+  } else if (_mergeConsecutiveToolGroups(container, el)) {
     // Already merged into the previous group — no separate row to insert.
   } else {
     container.appendChild(el);
@@ -765,6 +1033,26 @@ function _applyStreamEvent(sessionId, container, msg) {
 // gap-reports/viewer-2026-04-23.md item D.
 const CONVERSATION_PAGE_SIZE = 200;
 
+function _conversationViewHasRenderableContent(convView) {
+  if (!convView || !convView.children || convView.children.length === 0) return false;
+  return Array.from(convView.children).some((child) => {
+    if (!child) return false;
+    if (child.classList && child.classList.contains('conversation-load-older')) return false;
+    return true;
+  });
+}
+
+function _nextPrimeToken(sessionId) {
+  const next = (_streamState._primeToken.get(sessionId) || 0) + 1;
+  _streamState._primeToken.set(sessionId, next);
+  return next;
+}
+
+function _primeStillCurrent(sessionId, token, convView) {
+  return _streamState._primeToken.get(sessionId) === token
+    && _streamState._primingTarget.get(sessionId) === convView;
+}
+
 function _cleanSystemXml(t) {
   return t
     .replace(/<([a-z][a-z0-9]*(?:-[a-z0-9]+)+)[^>]*>[\s\S]*?<\/\1>/gi, '')
@@ -940,20 +1228,18 @@ async function _loadOlder(sessionId, convView) {
     // Preserve scroll position: measure before + after prepending so
     // the user's current viewport doesn't jump when older content is
     // inserted above.
-    const prevScrollHeight = convView.scrollHeight;
-    const prevScrollTop = convView.scrollTop;
-    const events = _messagesToEvents(page.messages);
-    const frag = document.createDocumentFragment();
-    for (const evt of events) {
-      const el = renderConversationEvent(evt);
-      if (el) {
-        if (evt.data?.parentUuid) _assignConversationParentUuid(el, evt.data.parentUuid);
-        if (_mergeConsecutiveToolGroups(frag, el)) continue;
-        frag.appendChild(el);
-      }
-    }
-    // Prepend below the bar so the bar stays at the very top.
-    convView.insertBefore(frag, bar.nextSibling);
+	    const prevScrollHeight = convView.scrollHeight;
+	    const prevScrollTop = convView.scrollTop;
+	    const events = _messagesToEvents(page.messages);
+	    const frag = document.createDocumentFragment();
+	    const pageHost = document.createElement('div');
+	    pageHost.dataset.turnMode = 'conversation';
+	    for (const evt of events) {
+	      _appendConversationEventToTurns(pageHost, evt, { expandPrompt: false, collapseExisting: false, expandSetup: false });
+	    }
+	    while (pageHost.firstChild) frag.appendChild(pageHost.firstChild);
+	    // Prepend below the bar so the bar stays at the very top.
+	    convView.insertBefore(frag, bar.nextSibling);
     const newScrollHeight = convView.scrollHeight;
     convView.scrollTop = prevScrollTop + (newScrollHeight - prevScrollHeight);
     // Merge new parentUuids into the dedup set so live events for primed
@@ -971,13 +1257,22 @@ async function _loadOlder(sessionId, convView) {
 }
 
 async function _primeConversationView(sessionId, convView) {
-  if (_streamState._primed.get(sessionId)) return;
+  if (_streamState._primed.get(sessionId)
+    && _streamState._primedTarget.get(sessionId) === convView
+    && _conversationViewHasRenderableContent(convView)) {
+    return;
+  }
   const inflight = _streamState._priming.get(sessionId);
-  if (inflight) return inflight;
+  if (inflight && _streamState._primingTarget.get(sessionId) === convView) return inflight;
+
+  const token = _nextPrimeToken(sessionId);
+  _streamState._primed.delete(sessionId);
+  _streamState._primedTarget.delete(sessionId);
 
   const promise = (async () => {
     try {
       const page = await _fetchConversationPage(sessionId, 0);
+      if (!_primeStillCurrent(sessionId, token, convView)) return;
       if (!page) {
         _renderConversationState(convView, 'Transcript unavailable for this session.', 'error');
         return;
@@ -999,11 +1294,16 @@ async function _primeConversationView(sessionId, convView) {
       if (page.has_more) _ensureLoadOlderBar(convView, sessionId);
       _updateLoadOlderBar(convView, page);
     } catch {
-      _renderConversationState(convView, 'Transcript unavailable for this session.', 'error');
+      if (_primeStillCurrent(sessionId, token, convView)) {
+        _renderConversationState(convView, 'Transcript unavailable for this session.', 'error');
+      }
     }
     finally {
+      if (!_primeStillCurrent(sessionId, token, convView)) return;
       _streamState._primed.set(sessionId, true);
+      _streamState._primedTarget.set(sessionId, convView);
       _streamState._priming.delete(sessionId);
+      _streamState._primingTarget.delete(sessionId);
       // Replay any stream-events that arrived during the prime.
       const queue = _streamState._pendingEvents.get(sessionId);
       if (queue && queue.length) {
@@ -1013,14 +1313,18 @@ async function _primeConversationView(sessionId, convView) {
     }
   })();
   _streamState._priming.set(sessionId, promise);
+  _streamState._primingTarget.set(sessionId, convView);
   return promise;
 }
 
 // Called when a session is destroyed / tab closes. Clears per-session
 // priming state so a re-subscribe on the same session later starts clean.
 function _resetPrimingState(sessionId) {
+  _nextPrimeToken(sessionId);
   _streamState._primed.delete(sessionId);
+  _streamState._primedTarget.delete(sessionId);
   _streamState._priming.delete(sessionId);
+  _streamState._primingTarget.delete(sessionId);
   _streamState._pendingEvents.delete(sessionId);
   _streamState._parentUuidSeen.delete(sessionId);
 }
@@ -1054,17 +1358,38 @@ function _streamTooltipClosestSessionItem(target, root) {
   return item;
 }
 
+function _streamTooltipVisible() {
+  const tooltip = _streamState.tooltipEl;
+  return !!(tooltip && tooltip.style.display !== 'none');
+}
+
+function _clearPendingStreamTooltip(invalidateRequest) {
+  if (_streamState.tooltipTimer) {
+    clearTimeout(_streamState.tooltipTimer);
+    _streamState.tooltipTimer = null;
+  }
+  _streamState._tooltipPendingSessionId = null;
+  if (invalidateRequest) _streamState._tooltipReqId++;
+}
+
 function _scheduleStreamTooltip(item) {
   const id = item?.dataset?.sessionId;
   if (!id) return;
-  _streamState.tooltipTimer = setTimeout(() => showStreamTooltip(id, item), 500);
+  if (_streamState._tooltipPendingSessionId === id) return;
+  if (_streamState._tooltipActiveSessionId === id && _streamTooltipVisible()) return;
+  _clearPendingStreamTooltip(true);
+  _streamState._tooltipPendingSessionId = id;
+  _streamState.tooltipTimer = setTimeout(() => {
+    _streamState.tooltipTimer = null;
+    _streamState._tooltipPendingSessionId = null;
+    showStreamTooltip(id, item);
+  }, 500);
 }
 
 function _handleStreamTooltipMouseOver(e, list) {
   const item = _streamTooltipClosestSessionItem(e.target, list);
   if (!item) return;
   if (e.relatedTarget && _streamTooltipContains(item, e.relatedTarget)) return;
-  hideStreamTooltip();
   _scheduleStreamTooltip(item);
 }
 
@@ -1072,6 +1397,14 @@ function _handleStreamTooltipMouseOut(e, list) {
   const item = _streamTooltipClosestSessionItem(e.target, list);
   if (!item) return;
   if (e.relatedTarget && _streamTooltipContains(item, e.relatedTarget)) return;
+  const id = item?.dataset?.sessionId;
+  if (_streamState._tooltipPendingSessionId === id) _clearPendingStreamTooltip(true);
+}
+
+function _handleStreamTooltipDocumentPointerDown(e) {
+  const tooltip = _streamState.tooltipEl;
+  if (!tooltip || !_streamTooltipVisible()) return;
+  if (_streamTooltipContains(tooltip, e.target)) return;
   hideStreamTooltip();
 }
 
@@ -1083,6 +1416,7 @@ function bindStreamTooltips() {
 
   list.addEventListener('mouseover', (e) => _handleStreamTooltipMouseOver(e, list));
   list.addEventListener('mouseout', (e) => _handleStreamTooltipMouseOut(e, list));
+  document.addEventListener('pointerdown', _handleStreamTooltipDocumentPointerDown, true);
 }
 
 // --- Init ---
@@ -1109,6 +1443,7 @@ if (typeof module !== 'undefined' && module.exports) {
   module.exports = {
     handleStreamMessage,
     _primeConversationView,
+    _conversationViewHasRenderableContent,
     _applyStreamEvent,
     _resetPrimingState,
     _conversationLookupCandidates,
@@ -1118,9 +1453,15 @@ if (typeof module !== 'undefined' && module.exports) {
     _mergeConsecutiveToolGroups,
     _streamState,
     bindStreamTooltips,
+    showStreamTooltip,
+    hideStreamTooltip,
+    _refreshVisibleStreamTooltip,
+    _scheduleVisibleStreamTooltipRefresh,
     _handleStreamTooltipMouseOver,
     _handleStreamTooltipMouseOut,
+    _handleStreamTooltipDocumentPointerDown,
     _streamTooltipClosestSessionItem,
     _streamTooltipContains,
+    _streamTooltipVisible,
   };
 }