('[data-markdown-content]') ?? container;
if (!target) return;
+ const decorationId = getMarkdownDecorationId(ctx);
if (text && target.childNodes.length === 0) {
- const block = document.createElement('div');
- block.setAttribute('data-md-block', '');
- // `display:contents` keeps margin-collapsing/spacing identical to a flat
- // HTML body — the wrapper exists only for per-block reconciliation.
- block.style.display = 'contents';
- block.innerHTML = renderMarkdownSync(text, imageMode);
- // Decorate synchronously too: wrap code blocks in their framed card,
- // mark inline code, build table controls, etc. The async pass re-decorates
- // its own DOM before morphing, so without this the first paint shows bare
- // /tables that "snap" into their decorated form a tick later. Matching
- // the structure here keeps the async morph to syntax colors only.
- decorateMarkdown(block, ctx);
- target.appendChild(block);
- if (shouldRefreshMermaidViewers(block)) {
- refreshMermaidViewers();
+ const cachedBlocks = !streaming ? getCachedMarkdownBlocks(text, imageMode) : null;
+ if (cachedBlocks) {
+ let hasMermaidBlock = false;
+ for (const cachedBlock of cachedBlocks) {
+ const block = document.createElement('div');
+ block.setAttribute('data-md-block', '');
+ block.style.display = 'contents';
+ block.innerHTML = cachedBlock.html;
+ decorateMarkdown(block, ctx);
+ block.setAttribute('data-md-id', cachedBlock.id);
+ block.setAttribute(MARKDOWN_DECORATION_ID_ATTR, decorationId);
+ hasMermaidBlock ||= shouldRefreshMermaidViewers(block);
+ target.appendChild(block);
+ }
+ if (hasMermaidBlock) refreshMermaidViewers();
+ } else {
+ const block = document.createElement('div');
+ block.setAttribute('data-md-block', '');
+ block.style.display = 'contents';
+ block.innerHTML = renderMarkdownSync(text, imageMode);
+ decorateMarkdown(block, ctx);
+ block.setAttribute(MARKDOWN_DECORATION_ID_ATTR, decorationId);
+ target.appendChild(block);
+ if (shouldRefreshMermaidViewers(block)) refreshMermaidViewers();
}
+ } else if (!mermaidViewerRef.current && shouldRefreshMermaidViewers(target)) {
+ // StrictMode re-runs this setup after the cleanup probe. The DOM remains,
+ // but the viewer registry does not, so recreate it without reinstalling
+ // or re-decorating ordinary blocks.
+ refreshMermaidViewers();
}
- }, [containerRef, text, imageMode, ctx, refreshMermaidViewers]);
+ }, [containerRef, text, streaming, imageMode, ctx, refreshMermaidViewers]);
React.useEffect(() => () => {
mermaidViewerRef.current?.cleanup();
@@ -905,27 +936,70 @@ const useMorphdomMarkdown = ({
if (!container) return;
const target = container.querySelector('[data-markdown-content]') ?? container;
let active = true;
+ const renderRevision = renderRevisionRef.current;
+ const decorationId = getMarkdownDecorationId(ctx);
void renderMarkdownBlocks(text, streaming, imageMode).then((blocks) => {
- if (!active) return;
+ if (!active || renderRevisionRef.current !== renderRevision) return;
const existing = Array.from(target.children) as HTMLElement[];
// Reconcile per block: only re-morph blocks whose content changed, leaving
// stable leading blocks untouched. Keeps per-stream-step DOM work bounded
// to the trailing (growing) block instead of the whole message.
+ let enteredThisPass = 0;
blocks.forEach((block, index) => {
let el = existing[index];
+ let isNewBlock = false;
if (!el) {
el = document.createElement('div');
el.setAttribute('data-md-block', '');
el.style.display = 'contents';
target.appendChild(el);
+ isNewBlock = true;
+ }
+ if (el.getAttribute('data-md-id') === block.id) {
+ if (el.getAttribute(MARKDOWN_DECORATION_ID_ATTR) !== decorationId) {
+ const hasMermaidBlock = shouldRefreshMermaidViewers(el);
+ if (hasMermaidBlock) {
+ mermaidViewerRef.current?.cleanup();
+ mermaidViewerRef.current = null;
+ }
+ const replacement = document.createElement('div');
+ replacement.setAttribute('data-md-block', '');
+ replacement.style.display = 'contents';
+ replacement.innerHTML = block.html;
+ decorateMarkdown(replacement, ctx);
+ replacement.setAttribute('data-md-id', block.id);
+ replacement.setAttribute(MARKDOWN_DECORATION_ID_ATTR, decorationId);
+ el.replaceWith(replacement);
+ if (hasMermaidBlock || shouldRefreshMermaidViewers(replacement)) refreshMermaidViewers();
+ }
+ if (!mermaidViewerRef.current && shouldRefreshMermaidViewers(el)) {
+ refreshMermaidViewers();
+ }
+ return;
}
- if (el.getAttribute('data-md-id') === block.id) return;
const temp = document.createElement('div');
temp.innerHTML = block.html;
decorateMarkdown(temp, ctx);
+ if (isNewBlock && streaming && index > 0) {
+ // A freshly committed block enters with a short reveal. The class
+ // goes on the block's children — the wrapper is display:contents
+ // and cannot animate — and the transform never changes layout, so
+ // row measurement stays exact. Skipped for the first block so a
+ // full initial render does not shimmer. Several blocks committed
+ // in one tick cascade with a small stagger instead of popping in
+ // together.
+ const delayMs = Math.min(enteredThisPass, 4) * 55;
+ enteredThisPass += 1;
+ for (const child of Array.from(temp.children)) {
+ child.classList.add('oc-md-block-enter');
+ if (delayMs > 0 && child instanceof HTMLElement) {
+ child.style.setProperty('--oc-md-enter-delay', `${delayMs}ms`);
+ }
+ }
+ }
const hadMermaidBlock = shouldRefreshMermaidViewers(el);
const tempHasMermaidBlock = shouldRefreshMermaidViewers(temp);
morphdom(el, temp, {
@@ -933,12 +1007,12 @@ const useMorphdomMarkdown = ({
onBeforeElUpdated: (fromEl, toEl) => !fromEl.isEqualNode(toEl),
});
el.setAttribute('data-md-id', block.id);
+ el.setAttribute(MARKDOWN_DECORATION_ID_ATTR, decorationId);
if (hadMermaidBlock || tempHasMermaidBlock || shouldRefreshMermaidViewers(el)) {
refreshMermaidViewers();
}
});
- // Remove any trailing block elements no longer present.
const hadMermaidBeforeTrailingCleanup = shouldRefreshMermaidViewers(target);
let removedMermaidBlock = false;
for (let i = existing.length - 1; i >= blocks.length; i -= 1) {
@@ -951,13 +1025,15 @@ const useMorphdomMarkdown = ({
if (removedMermaidBlock || (existing.length > blocks.length && hadMermaidBeforeTrailingCleanup)) {
refreshMermaidViewers();
}
-
+ mountedDomRef.current = domCacheKey
+ ? { key: domCacheKey, copiedLabel: ctx.labels.copied }
+ : null;
});
return () => {
active = false;
};
- }, [containerRef, text, streaming, imageMode, ctx, refreshMermaidViewers]);
+ }, [containerRef, ctx, domCacheKey, imageMode, refreshMermaidViewers, streaming, text]);
React.useEffect(() => {
const container = containerRef.current;
@@ -1034,10 +1110,37 @@ const MarkdownRendererImpl: React.FC = ({
preferRuntimeEditor: runtime.isVSCode,
enabled: enableFileReferences && !isStreaming,
});
- useExternalLinkInteractions({ containerRef });
+ useLinkInteractions({ containerRef });
const syntaxVars = React.useMemo(() => getMarkdownSyntaxVars(currentTheme), [currentTheme]);
const ctx = useDecorateContext(currentTheme, live, effectiveDirectory ? handlePreviewLoopback : undefined, DEFAULT_MERMAID_CONTROLS);
+ const { locale } = useI18n();
+ const imageMode: MarkdownImageMode = variant === 'assistant' ? 'label' : 'inline';
+ const settledPart = part
+ && (part.type === 'text' || part.type === 'reasoning')
+ && part.time?.end !== undefined
+ ? part
+ : null;
+ const runtimeKey = getRuntimeKey();
+ // Memoized on scalar identities, not the part object: sync-store reducers
+ // recreate part objects on unrelated updates, and an object-identity dep
+ // re-ran the async render pipeline for identical content.
+ const settledSessionID = settledPart?.sessionID;
+ const settledMessageID = settledPart?.messageID;
+ const settledPartID = settledPart?.id;
+ const domCacheKey = React.useMemo(() => {
+ // Streaming, unfinished, oversized, and identity-less Markdown continues
+ // through the normal rendering pipeline and never retains detached DOM.
+ if (isStreaming || !settledSessionID || !settledMessageID || !settledPartID || content.length === 0 || content.length > MARKDOWN_DOM_CACHE_MAX_SOURCE_CHARS) return null;
+ // content.length is a cheap fingerprint: an edited or reverted part that
+ // re-materializes under the same id must not restore the old DOM.
+ return {
+ scope: `${runtimeKey}\0${settledSessionID}`,
+ id: `${settledMessageID}\0${settledPartID}\0${imageMode}\0${content.length}`,
+ locale,
+ directory: effectiveDirectory,
+ };
+ }, [content.length, effectiveDirectory, imageMode, isStreaming, locale, runtimeKey, settledSessionID, settledMessageID, settledPartID]);
// Identity for the fade-in wrapper: a new part/message restarts the animation.
const fadeKey = `markdown-${part?.id ? `part-${part.id}` : `message-${messageId}`}`;
@@ -1045,9 +1148,10 @@ const MarkdownRendererImpl: React.FC = ({
containerRef,
text: content,
streaming: live,
- imageMode: variant === 'assistant' ? 'label' : 'inline',
+ imageMode,
syntaxVars,
ctx,
+ domCacheKey,
});
const markdownContent = (
@@ -1085,6 +1189,7 @@ const SimpleMarkdownRendererImpl: React.FC<{
content: string;
className?: string;
variant?: MarkdownVariant;
+ // App links remain confirmed even where ordinary HTTP link handling is off.
disableLinkSafety?: boolean;
stripFrontmatter?: boolean;
onShowPopup?: (content: ToolPopupContent) => void;
@@ -1126,7 +1231,7 @@ const SimpleMarkdownRendererImpl: React.FC<{
preferRuntimeEditor: runtime.isVSCode,
enabled: enableFileReferences,
});
- useExternalLinkInteractions({ containerRef, enabled: !disableLinkSafety });
+ useLinkInteractions({ containerRef, enabled: !disableLinkSafety });
const syntaxVars = React.useMemo(() => getMarkdownSyntaxVars(currentTheme), [currentTheme]);
const ctx = useDecorateContext(currentTheme, false, undefined, mermaidControls);
diff --git a/packages/ui/src/components/chat/MessageList.tsx b/packages/ui/src/components/chat/MessageList.tsx
index d573c1a9..4197f067 100644
--- a/packages/ui/src/components/chat/MessageList.tsx
+++ b/packages/ui/src/components/chat/MessageList.tsx
@@ -1,11 +1,10 @@
import React from 'react';
import type { Part } from '@opencode-ai/sdk/v2';
-import { elementScroll, useVirtualizer as useTanstackVirtualizer, type ReactVirtualizer, type VirtualItem } from '@tanstack/react-virtual';
+import { LegendList, type LegendListRef } from '@legendapp/list/react';
import ChatMessage from './ChatMessage';
import { areOptionalRenderRelevantMessagesEqual, areRelevantTurnGroupingContextsEqual, areRenderRelevantMessagesEqual } from './message/renderCompare';
import TurnItem from './components/TurnItem';
-import type { AnimationHandlers, ContentChangeReason } from '@/hooks/useChatAutoFollow';
import type { ChatMessageEntry, TurnRecord, TurnGroupingContext } from './lib/turns/types';
import { useTurnRecords } from './hooks/useTurnRecords';
import { applyRetryOverlay } from './lib/turns/applyRetryOverlay';
@@ -19,9 +18,9 @@ import { hasPendingUserSendAnimation, consumePendingUserSendAnimation } from '@/
import { streamPerfCount, streamPerfMark, streamPerfMeasure } from '@/stores/utils/streamDebug';
import type { StreamPhase } from './message/types';
import { useGlobalSessionsStore } from '@/stores/useGlobalSessionsStore';
-import { useSessionParts } from '@/sync/sync-context';
-import { isMobileSurfaceRuntime } from '@/lib/runtimeSurface';
+import { useSessionPartsForMessages } from '@/sync/sync-context';
import type { ReviewTransferDirection } from '@/lib/reviewFlow';
+import { resolveChatListAnchoredEndSpace, resolveTimelineIsAtEnd } from './lib/scroll/timelineScrollAnchoring';
import {
USER_SHELL_MARKER,
isUserShellMarkerMessage,
@@ -29,96 +28,52 @@ import {
type ShellBridgeDetails,
} from './lib/shellBridge';
-const MESSAGE_LIST_VIRTUALIZE_THRESHOLD = 5;
const EMPTY_STATIC_ENTRY_MESSAGES: ChatMessageEntry[] = [];
const EMPTY_UNGROUPED_MESSAGE_IDS = new Set();
-const TIMELINE_CACHE_LIMIT = 16;
-const sameKeys = (a: readonly string[] | undefined, b: readonly string[] | undefined): boolean => {
- if (a === b) return true;
- if (!a || !b) return false;
- if (a.length !== b.length) return false;
- return a.every((key, index) => key === b[index]);
-};
+// --- Timeline virtualization (@legendapp/list) -----------------------------
+// The timeline is a single virtualized list on every surface: history turns
+// AND the live streaming tail are rows of the same list, so the list owns one
+// coherent scroll position instead of arbitrating between a virtualizer and a
+// separately-rendered tail.
+//
+// Scroll behavior the list owns natively, which is why none of it exists here
+// any more:
+// • `maintainScrollAtEnd` keeps the live edge pinned as rows grow.
+// • `maintainVisibleContentPosition` preserves the read position when older
+// history is prepended, replacing the manual anchor-hold and the mobile
+// quiet-window prepend deferral.
+// • `anchoredEndSpace` reserves the tail space that parks a just-sent
+// message near the top of the viewport.
+const TIMELINE_ESTIMATED_ENTRY_SIZE = 320;
-// --- History virtualization (@tanstack/react-virtual) ----------------------
-// The history list virtualizes with @tanstack/react-virtual on all surfaces:
-// its core has bottom anchoring (anchorTo: 'end'), key-stable prepend
-// preservation, and native iOS touch/momentum deferral for scroll
-// adjustments — the failure modes that historically forced virtua off on
-// mobile and required manual prepend compensation on desktop.
-type TanstackVirtualizerInstance = ReactVirtualizer;
-type HistoryEngine = 'none' | 'tanstack';
-
-const TANSTACK_ESTIMATED_ENTRY_SIZE = 320;
-const TANSTACK_OVERSCAN = 8;
-// Touch flings cover more distance between paints than desktop wheels; a
-// larger window keeps fast mobile scrolling over mounted rows.
-const TANSTACK_MOBILE_OVERSCAN = 16;
-const resolveTanstackOverscan = (): number => (
- isMobileSurfaceRuntime() ? TANSTACK_MOBILE_OVERSCAN : TANSTACK_OVERSCAN
-);
-// Post-prepend anchor hold: measurements of freshly
-// prepended rows settle over multiple frames, so a single restore can be
-// invalidated by the next measurement pass. Re-assert the anchor until it
-// holds still for STABLE_FRAMES consecutive frames, giving up at MAX_FRAMES.
+// Anchor hold for an explicit viewport restore (session re-entry): row
+// measurements settle over several frames, so a single restore can be
+// invalidated by the next measurement pass. Re-assert until it holds still for
+// STABLE_FRAMES consecutive frames, giving up at MAX_FRAMES.
const ANCHOR_HOLD_STABLE_FRAMES = 30;
const ANCHOR_HOLD_MAX_FRAMES = 180;
-// Adaptive estimate bounds: only trust the session average once a few rows
-// are measured, and keep it inside sane turn-height bounds.
-const TANSTACK_ESTIMATE_MIN_SAMPLES = 5;
-const TANSTACK_ESTIMATE_MIN = 120;
-const TANSTACK_ESTIMATE_MAX = 1200;
-// "At bottom" tolerance for resize-adjustment decisions.
-const TANSTACK_AT_END_THRESHOLD_PX = 80;
-// Quiet-window prepend on mobile: while a touch drag or momentum scroll is
-// active, iOS owns the scroll position and ANY geometry change above the
-// viewport races against the native animation — a race that compensation
-// logic can only lose sometimes. So freshly loaded older history is held
-// (data already fetched, store already updated) and inserted into the
-// rendered list only once the gesture goes quiet. Safety valves: flush when
-// the user gets close to the top (a blank top is worse than a small hop) or
-// after MAX_HOLD_MS.
-const HISTORY_PREPEND_QUIET_MS = 160;
-const HISTORY_PREPEND_MAX_HOLD_MS = 1500;
-const HISTORY_PREPEND_NEAR_TOP_VIEWPORTS = 1.5;
-const HISTORY_PREPEND_MONITOR_INTERVAL_MS = 90;
-
-// A commit is a deferable prepend when older entries were inserted strictly
-// above the known content: the previous first key still exists deeper in the
-// list and the tail is unchanged. Anything else renders immediately.
-const isPrependAboveCommit = (previous: RenderEntry[], next: RenderEntry[]): boolean => {
- if (previous.length === 0 || next.length <= previous.length) return false;
- if (previous[previous.length - 1]?.key !== next[next.length - 1]?.key) return false;
- const previousFirstKey = previous[0]?.key;
- const insertedIndex = next.findIndex((entry) => entry.key === previousFirstKey);
- return insertedIndex > 0;
+// Reserved tail space that parks an anchored row near the top of the viewport.
+// `onReady` fires once the list has measured the anchor, `onSizeChanged` when
+// the reserved size is recomputed.
+// Presentation-only props forwarded to the scroll container the list renders.
+// Deliberately narrow: the list owns scroll and layout callbacks on that
+// element, so only styling, focus and click-through are caller-controlled.
+type TimelineScrollContainerProps = {
+ className?: string;
+ style?: React.CSSProperties;
+ tabIndex?: number;
+ onClick?: React.MouseEventHandler;
+ 'data-scrollbar'?: string;
+ 'data-scroll-shadow'?: string;
};
-const tanstackTimelineCache = new Map();
-
-const readTanstackTimelineCache = (sessionKey: string, keys: readonly string[]): VirtualItem[] | undefined => {
- const entry = tanstackTimelineCache.get(sessionKey);
- if (!entry) return undefined;
- if (sameKeys(entry.keys, keys)) return entry.items;
- tanstackTimelineCache.delete(sessionKey);
- return undefined;
-};
-
-const writeTanstackTimelineCache = (
- sessionKey: string,
- keys: readonly string[],
- virtualizer: TanstackVirtualizerInstance | null | undefined,
-): void => {
- if (!virtualizer || keys.length === 0) return;
- tanstackTimelineCache.delete(sessionKey);
- tanstackTimelineCache.set(sessionKey, { keys: keys.slice(), items: virtualizer.takeSnapshot() });
- while (tanstackTimelineCache.size > TIMELINE_CACHE_LIMIT) {
- const oldest = tanstackTimelineCache.keys().next().value;
- if (typeof oldest !== 'string') break;
- tanstackTimelineCache.delete(oldest);
- }
+type TimelineAnchoredEndSpace = {
+ anchorIndex: number;
+ anchorOffset?: number;
+ onReady?: (info: { anchorIndex: number | undefined; anchorKey: string | undefined; size: number }) => void;
+ onSizeChanged?: (size: number) => void;
};
const useStableEvent = (handler: (...args: TArgs) => TResult) => {
@@ -350,7 +305,6 @@ const withShellBridgeDetails = (message: ChatMessageEntry, details: ShellBridgeD
interface MessageListProps {
sessionKey: string;
- disableStaging?: boolean;
messages: ChatMessageEntry[];
sessionIsWorking?: boolean;
activeStreamingMessageId?: string | null;
@@ -361,12 +315,29 @@ interface MessageListProps {
confirmedAt?: number;
fallbackTimestamp?: number;
} | null;
- onMessageContentChange: (reason?: ContentChangeReason) => void;
- getAnimationHandlers: (messageId: string) => AnimationHandlers;
isLoadingOlder: boolean;
scrollToBottom?: () => void;
- scrollRef?: React.RefObject;
directory?: string;
+ // The list owns its scroll container; the timeline scroll hook drives it
+ // through this ref and observes it through the callbacks below.
+ registerList?: (list: LegendListRef | null) => void;
+ // True while a real gesture owns the scroll; releases the list's own
+ // end pinning so the state machine, not the library heuristic, decides.
+ endPinningReleased?: boolean;
+ // The anchored row is identified by message id; the index it maps to is a
+ // property of the row model, which only this component knows.
+ anchorMessageId?: string | null;
+ onAnchorReady?: (messageId: string, anchorIndex: number) => void;
+ onAnchorSizeChanged?: (messageId: string) => void;
+ composerOverlayHeight?: number;
+ onIsAtEndChange?: (isAtEnd: boolean) => void;
+ onTimelineDataChange?: () => void;
+ // Content that used to sit as siblings of the list inside the scroll
+ // container. The list owns that container now, so they render as its
+ // header/footer and scroll with the rows exactly as before.
+ listHeader?: React.ReactNode;
+ listFooter?: React.ReactNode;
+ scrollContainerProps?: TimelineScrollContainerProps;
}
export interface MessageListHandle {
@@ -403,8 +374,6 @@ interface MessageRowProps {
activeStreamingPhase?: StreamPhase | null;
animateUserOnMount?: boolean;
onUserAnimationConsumed?: (messageId: string) => void;
- onContentChange: (reason?: ContentChangeReason) => void;
- animationHandlers: AnimationHandlers;
scrollToBottom?: () => void;
reviewTransferDirection?: ReviewTransferDirection | null;
}
@@ -419,8 +388,6 @@ const MessageRow = React.memo(({
activeStreamingPhase,
animateUserOnMount,
onUserAnimationConsumed,
- onContentChange,
- animationHandlers,
scrollToBottom,
reviewTransferDirection,
}) => {
@@ -431,8 +398,6 @@ const MessageRow = React.memo(({
nextMessage={nextMessage}
animateUserOnMount={animateUserOnMount}
onUserAnimationConsumed={onUserAnimationConsumed}
- onContentChange={onContentChange}
- animationHandlers={animationHandlers}
scrollToBottom={scrollToBottom}
turnGroupingContext={turnGroupingContext}
assistantHeaderMessageId={assistantHeaderMessageId}
@@ -450,20 +415,12 @@ const MessageRow = React.memo(({
&& areOptionalRenderRelevantMessagesEqual(prev.nextMessage, next.nextMessage)
&& prev.animateUserOnMount === next.animateUserOnMount
&& prev.onUserAnimationConsumed === next.onUserAnimationConsumed
- && prev.onContentChange === next.onContentChange
&& prev.scrollToBottom === next.scrollToBottom
&& areRelevantTurnGroupingContextsEqual(prevTurn, nextTurn, prev.message.info.id, resolveMessageRole(prev.message) === 'user')
&& prev.assistantHeaderMessageId === next.assistantHeaderMessageId
&& prev.isInActiveTurn === next.isInActiveTurn
&& prev.activeStreamingPhase === next.activeStreamingPhase
- && prev.reviewTransferDirection === next.reviewTransferDirection
- && prev.animationHandlers?.onChunk === next.animationHandlers?.onChunk
- && prev.animationHandlers?.onComplete === next.animationHandlers?.onComplete
- && prev.animationHandlers?.onStreamingCandidate === next.animationHandlers?.onStreamingCandidate
- && prev.animationHandlers?.onAnimationStart === next.animationHandlers?.onAnimationStart
- && prev.animationHandlers?.onReservationCancelled === next.animationHandlers?.onReservationCancelled
- && prev.animationHandlers?.onReasoningBlock === next.animationHandlers?.onReasoningBlock
- && prev.animationHandlers?.onAnimatedHeightChange === next.animationHandlers?.onAnimatedHeightChange;
+ && prev.reviewTransferDirection === next.reviewTransferDirection;
});
MessageRow.displayName = 'MessageRow';
@@ -477,8 +434,6 @@ interface TurnBlockProps {
turnUiStates: Map;
onToggleTurnGroup: (turnId: string) => void;
chatRenderMode: 'sorted' | 'live';
- onMessageContentChange: (reason?: ContentChangeReason) => void;
- getAnimationHandlers: (messageId: string) => AnimationHandlers;
scrollToBottom?: () => void;
stickyUserHeader?: boolean;
shouldAnimateUserMessage: (message: ChatMessageEntry) => boolean;
@@ -497,8 +452,6 @@ const TurnBlock = React.memo(({
turnUiStates,
onToggleTurnGroup,
chatRenderMode,
- onMessageContentChange,
- getAnimationHandlers,
scrollToBottom,
stickyUserHeader = true,
shouldAnimateUserMessage,
@@ -507,6 +460,7 @@ const TurnBlock = React.memo(({
activeStreamingPhase,
reviewTransferDirection,
}: TurnBlockProps) => {
+
const planModeEnabled = useFeatureFlagsStore((state) => state.planModeEnabled);
const userMessageHidden = React.useMemo(
() => isHiddenUserMessage(turn.userMessage, { planModeEnabled }),
@@ -735,19 +689,15 @@ const TurnBlock = React.memo(({
reviewTransferDirection={reviewTransferDirection}
animateUserOnMount={shouldAnimateUserMessage(message)}
onUserAnimationConsumed={onUserAnimationConsumed}
- onContentChange={onMessageContentChange}
- animationHandlers={getAnimationHandlers(message.info.id)}
scrollToBottom={scrollToBottom}
/>
);
},
[
- getAnimationHandlers,
isLastTurn,
nextEntryFirstMessage,
messageOrder.lookup,
messageOrder.ordered,
- onMessageContentChange,
scrollToBottom,
sessionIsWorking,
chatRenderMode,
@@ -796,8 +746,6 @@ interface UngroupedMessageRowProps {
message: ChatMessageEntry;
previousMessage?: ChatMessageEntry;
nextMessage?: ChatMessageEntry;
- onMessageContentChange: (reason?: ContentChangeReason) => void;
- getAnimationHandlers: (messageId: string) => AnimationHandlers;
scrollToBottom?: () => void;
shouldAnimateUserMessage: (message: ChatMessageEntry) => boolean;
onUserAnimationConsumed: (messageId: string) => void;
@@ -810,8 +758,6 @@ const UngroupedMessageRow = React.memo(({
message,
previousMessage,
nextMessage,
- onMessageContentChange,
- getAnimationHandlers,
scrollToBottom,
shouldAnimateUserMessage,
onUserAnimationConsumed,
@@ -826,8 +772,6 @@ const UngroupedMessageRow = React.memo(({
nextMessage={nextMessage}
animateUserOnMount={shouldAnimateUserMessage(message)}
onUserAnimationConsumed={onUserAnimationConsumed}
- onContentChange={onMessageContentChange}
- animationHandlers={getAnimationHandlers(message.info.id)}
scrollToBottom={scrollToBottom}
isInActiveTurn={Boolean(activeStreamingMessageId) && message.info.id === activeStreamingMessageId}
activeStreamingPhase={message.info.id === activeStreamingMessageId ? activeStreamingPhase : null}
@@ -840,8 +784,6 @@ UngroupedMessageRow.displayName = 'UngroupedMessageRow';
interface MessageListEntryProps {
entry: RenderEntry;
- onMessageContentChange: (reason?: ContentChangeReason) => void;
- getAnimationHandlers: (messageId: string) => AnimationHandlers;
scrollToBottom?: () => void;
stickyUserHeader?: boolean;
sessionIsWorking: boolean;
@@ -870,8 +812,6 @@ const turnContainsMessageId = (turn: TurnRecord, messageId: string | null | unde
const MessageListEntry = React.memo(({
entry,
- onMessageContentChange,
- getAnimationHandlers,
scrollToBottom,
stickyUserHeader,
sessionIsWorking,
@@ -892,8 +832,6 @@ const MessageListEntry = React.memo(({
message={entry.message}
previousMessage={entry.previousMessage}
nextMessage={entry.nextMessage}
- onMessageContentChange={onMessageContentChange}
- getAnimationHandlers={getAnimationHandlers}
scrollToBottom={scrollToBottom}
shouldAnimateUserMessage={shouldAnimateUserMessage}
onUserAnimationConsumed={onUserAnimationConsumed}
@@ -919,8 +857,6 @@ const MessageListEntry = React.memo(({
activeStreamingMessageId={activeStreamingMessageId}
activeStreamingPhase={activeStreamingPhase}
reviewTransferDirection={reviewTransferDirection}
- onMessageContentChange={onMessageContentChange}
- getAnimationHandlers={getAnimationHandlers}
scrollToBottom={scrollToBottom}
stickyUserHeader={stickyUserHeader}
/>
@@ -929,264 +865,241 @@ const MessageListEntry = React.memo(({
MessageListEntry.displayName = 'MessageListEntry';
-// Inner component that renders staged turn entries.
-type StaticHistoryListProps = {
- entries: RenderEntry[];
- engine: HistoryEngine;
- contentRef: React.RefObject;
- scrollRef?: React.RefObject;
- registerTanstackVirtualizer?: (virtualizer: TanstackVirtualizerInstance | null) => void;
- virtualizerKey: string;
- onMessageContentChange: (reason?: ContentChangeReason) => void;
- getAnimationHandlers: (messageId: string) => AnimationHandlers;
+// Shared row state. Passed through context rather than closed over by
+// `renderItem` so the render callback keeps a stable identity — a changing
+// `renderItem` makes the list re-render every mounted row on every commit.
+type TimelineRowContextValue = {
scrollToBottom?: () => void;
stickyUserHeader: boolean;
defaultActivityExpanded: boolean;
turnUiStates: Map;
onToggleTurnGroup: (turnId: string) => void;
chatRenderMode: 'sorted' | 'live';
+ showTurnChangedFiles: boolean;
shouldAnimateUserMessage: (message: ChatMessageEntry) => boolean;
onUserAnimationConsumed: (messageId: string) => void;
reviewTransferDirection?: ReviewTransferDirection | null;
+ // The live tail row renders through StreamingTailContent, which subscribes
+ // to streaming parts; every other row renders statically.
+ streamingTailKey: string | null;
+ directory?: string;
+ sessionIsWorking: boolean;
+ activeStreamingMessageId: string | null;
+ activeStreamingPhase: StreamPhase | null;
};
-const StaticHistoryList = React.memo(({ entries, engine, contentRef, scrollRef, registerTanstackVirtualizer, virtualizerKey, onMessageContentChange, getAnimationHandlers, scrollToBottom, stickyUserHeader, defaultActivityExpanded, turnUiStates, onToggleTurnGroup, chatRenderMode, shouldAnimateUserMessage, onUserAnimationConsumed, reviewTransferDirection }: StaticHistoryListProps) => {
- const isTanstack = engine === 'tanstack';
+const TimelineRowContext = React.createContext(null);
- // --- Quiet-window prepend (mobile) --------------------------------------
- // Gesture tracking for the deferred-prepend decision. Refs only: reading
- // them never re-renders, and the render-phase reconcile below needs them.
- const touchActiveRef = React.useRef(false);
- const lastScrollAtRef = React.useRef(0);
- const holdSinceRef = React.useRef(null);
- const deferPrepends = isTanstack && isMobileSurfaceRuntime();
+const TimelineRow = React.memo(({ entry }: { entry: RenderEntry }) => {
+ const context = React.useContext(TimelineRowContext);
+ if (!context) return null;
- React.useEffect(() => {
- if (!deferPrepends) return;
- const element = scrollRef?.current;
- if (!element) return;
- const onTouchStart = () => { touchActiveRef.current = true; };
- const onTouchEnd = () => { touchActiveRef.current = false; };
- const onScroll = () => { lastScrollAtRef.current = performance.now(); };
- element.addEventListener('touchstart', onTouchStart, { passive: true });
- element.addEventListener('touchend', onTouchEnd, { passive: true });
- element.addEventListener('touchcancel', onTouchEnd, { passive: true });
- element.addEventListener('scroll', onScroll, { passive: true });
- return () => {
- element.removeEventListener('touchstart', onTouchStart);
- element.removeEventListener('touchend', onTouchEnd);
- element.removeEventListener('touchcancel', onTouchEnd);
- element.removeEventListener('scroll', onScroll);
- };
- }, [deferPrepends, scrollRef]);
-
- const isGestureActive = React.useCallback(() => (
- touchActiveRef.current
- || performance.now() - lastScrollAtRef.current < HISTORY_PREPEND_QUIET_MS
- ), []);
-
- const isNearTop = React.useCallback(() => {
- const element = scrollRef?.current;
- if (!element) return true;
- return element.scrollTop < element.clientHeight * HISTORY_PREPEND_NEAR_TOP_VIEWPORTS;
- }, [scrollRef]);
-
- const [displayEntries, setDisplayEntries] = React.useState(entries);
- // Render-phase reconcile (official derived-state pattern): adopt the new
- // entries immediately unless this commit is a pure prepend-above landing
- // in the middle of an active touch gesture — those wait for quiet.
- let renderEntries = displayEntries;
- if (entries !== displayEntries) {
- const shouldHold = deferPrepends
- && isPrependAboveCommit(displayEntries, entries)
- && isGestureActive()
- && !isNearTop()
- && (holdSinceRef.current === null
- || performance.now() - holdSinceRef.current < HISTORY_PREPEND_MAX_HOLD_MS);
- if (shouldHold) {
- if (holdSinceRef.current === null) holdSinceRef.current = performance.now();
- } else {
- holdSinceRef.current = null;
- setDisplayEntries(entries);
- renderEntries = entries;
- }
- } else if (holdSinceRef.current !== null) {
- holdSinceRef.current = null;
- }
-
- // While a prepend is held, poll for the quiet window (touch/momentum have
- // no completion event we can await) and flush by re-rendering.
- const [, forceFlushTick] = React.useReducer((tick: number) => tick + 1, 0);
- React.useEffect(() => {
- if (!deferPrepends) return;
- const timer = window.setInterval(() => {
- if (holdSinceRef.current === null) return;
- const expired = performance.now() - holdSinceRef.current >= HISTORY_PREPEND_MAX_HOLD_MS;
- if (!isGestureActive() || isNearTop() || expired) {
- forceFlushTick();
- }
- }, HISTORY_PREPEND_MONITOR_INTERVAL_MS);
- return () => window.clearInterval(timer);
- }, [deferPrepends, isGestureActive, isNearTop]);
-
- const entriesRef = React.useRef(renderEntries);
- entriesRef.current = renderEntries;
- // Initial-only read: measurement cache restore is a mount-time concern;
- // afterwards the live virtualizer owns measurements.
- const [initialMeasurements] = React.useState(() => (
- isTanstack
- ? readTanstackTimelineCache(virtualizerKey, entries.map((entry) => entry.key))
- : undefined
- ));
-
- const sizeContainerRef = React.useRef(null);
- // Adaptive estimate: rows this session has actually measured are a far
- // better predictor for the still-unmeasured ones than a fixed constant.
- // Smaller estimate error → smaller anchor corrections when prepended rows
- // measure in → less visible drift. The ref keeps estimateSize's identity
- // stable so updating the average never triggers a global remeasure.
- const estimatedEntrySizeRef = React.useRef(TANSTACK_ESTIMATED_ENTRY_SIZE);
- const tanstackVirtualizer = useTanstackVirtualizer({
- count: renderEntries.length,
- enabled: isTanstack,
- getScrollElement: () => scrollRef?.current ?? null,
- estimateSize: () => estimatedEntrySizeRef.current,
- overscan: resolveTanstackOverscan(),
- scrollToFn: (offset, options, instance) => {
- // Expose the new total height before core writes an anchor
- // correction so the browser does not clamp the offset to the old
- // height.
- const sizeElement = sizeContainerRef.current;
- if (sizeElement) sizeElement.style.height = `${instance.getTotalSize()}px`;
- elementScroll(offset, options, instance);
- },
- getItemKey: (index) => entriesRef.current[index]?.key ?? `index:${index}`,
- // Bottom-anchored chat semantics: prepending older entries above the
- // viewport must not move what the user is reading, and iOS-specific
- // touch/momentum deferral for those adjustments lives in the core.
- anchorTo: 'end',
- initialOffset: () => Number.MAX_SAFE_INTEGER,
- initialMeasurementsCache: initialMeasurements,
- });
- // Only compensate scroll for rows growing ABOVE the viewport (history
- // remeasures, prepended pages). A row growing inside the viewport —
- // expanding a tool call or thinking block — must grow DOWNWARD naturally;
- // the end-anchored default made it expand upward. At the bottom,
- // app-level auto-follow owns pinning, so skip there too instead of
- // double-writing. (This is an instance field, not a constructor option.)
- tanstackVirtualizer.shouldAdjustScrollPositionOnItemSizeChange = (item, _delta, instance) => {
- if (instance.isAtEnd(TANSTACK_AT_END_THRESHOLD_PX)) return false;
- const firstVisibleIndex = instance.range?.startIndex;
- return firstVisibleIndex !== undefined && item.index < firstVisibleIndex;
- };
-
- React.useEffect(() => {
- if (!isTanstack) return;
- const sizes = tanstackVirtualizer.itemSizeCache;
- if (sizes.size >= TANSTACK_ESTIMATE_MIN_SAMPLES) {
- let total = 0;
- for (const size of sizes.values()) total += size;
- estimatedEntrySizeRef.current = Math.min(
- TANSTACK_ESTIMATE_MAX,
- Math.max(TANSTACK_ESTIMATE_MIN, Math.round(total / sizes.size)),
- );
- }
- });
-
- React.useEffect(() => {
- if (!isTanstack) return;
- registerTanstackVirtualizer?.(tanstackVirtualizer);
- return () => {
- writeTanstackTimelineCache(
- virtualizerKey,
- entriesRef.current.map((entry) => entry.key),
- tanstackVirtualizer,
- );
- registerTanstackVirtualizer?.(null);
- };
- }, [isTanstack, registerTanstackVirtualizer, tanstackVirtualizer, virtualizerKey]);
-
- const renderEntry = React.useCallback((entry: RenderEntry) => {
+ if (context.streamingTailKey === entry.key) {
return (
-
);
- }, [chatRenderMode, defaultActivityExpanded, getAnimationHandlers, onMessageContentChange, onToggleTurnGroup, onUserAnimationConsumed, reviewTransferDirection, scrollToBottom, shouldAnimateUserMessage, stickyUserHeader, turnUiStates]);
-
- if (engine === 'none') {
- return (
-
- {renderEntries.map((entry) => (
-
- {renderEntry(entry)}
-
- ))}
-
-
- {virtualItems.map((item) => {
- const entry = renderEntries[item.index];
- if (!entry) return null;
- return (
-
- {renderEntry(entry)}
-
- );
- })}
-
-
-
-
- {/* Virtualized history rows unmount/remount during scroll;
- re-running the reveal fade on every remount reads as
- blinking. History content is never "new", so fade-in
- is disabled there — the streaming tail keeps it. */}
-
-
-
- {trailingStreamingEntry ? (
-
- ) : null}
-
-
-
-
@@ -2375,6 +2370,7 @@ export const ModelControls: React.FC = ({
);
}}
+ maxHeightClassName="max-h-[min(400px,calc(var(--available-height)-4rem))] flex-1"
tooltipsEnabled={agentMenuOpen}
onEscape={() => setAgentMenuOpen(false)}
/>
@@ -2618,7 +2614,7 @@ export const ModelControls: React.FC = ({