fix(chat): prevent stale timeline scroll and rerenders

- Disable LegendList end-maintenance that could snap after user scrolling - Cancel stale imperative scrolls and release settled turn anchors - Stabilize handoff run data to avoid per-event timeline rerenders

Julius Marminge committed 3 months ago

Commit f29edaf1 parent b76a0914 files · +113 −26Browse files

Unified · Split

4 files

apps/web/src/components/ChatView.tsx +49 −0
apps/web/src/components/chat/MessagesTimeline.test.tsx +4 −5
apps/web/src/components/chat/MessagesTimeline.tsx +47 −18
apps/web/src/components/chat/V2LifecycleRow.tsx +13 −3

apps/web/src/components/ChatView.tsx+49−0

@@ -309,6 +309,8 @@ import { useAssetUrls } from "../assets/assetUrls"; · 308 unmodified lines
309		309
310	const IMAGE_ONLY_BOOTSTRAP_PROMPT =	310	const IMAGE_ONLY_BOOTSTRAP_PROMPT =
311	"[User attached one or more images without additional text. Respond using the conversation context and the attached image(s).]";	311	"[User attached one or more images without additional text. Respond using the conversation context and the attached image(s).]";
		312	// Never part of timeline row data — see cancelTimelineLiveFollowForUserNavigation.
		313	const TIMELINE_SCROLL_CANCEL_SENTINEL = Object.freeze({});
312	const EMPTY_PROVIDERS: ServerProvider[] = [];	314	const EMPTY_PROVIDERS: ServerProvider[] = [];
313	// During an active turn the thread's updatedAt advances several times per	315	// During an active turn the thread's updatedAt advances several times per
314	// second, and every server-side visit is a full command dispatch plus a	316	// second, and every server-side visit is a full command dispatch plus a
@@ -1569,6 +1571,28 @@ function ChatViewContent(props: ChatViewProps) { · 1254 unmodified lines
1569	setTimelineAnchor({ threadKey: activeThreadKey, messageId: null });	1571	setTimelineAnchor({ threadKey: activeThreadKey, messageId: null });
1570	}	1572	}
1571	const timelineAnchorMessageId = timelineAnchor.messageId;	1573	const timelineAnchorMessageId = timelineAnchor.messageId;
		1574	// Release the turn anchor once its run finishes. LegendList sizes the
		1575	// anchored end-space filler for the geometry at anchor time and never
		1576	// recomputes it, so a lingering anchor leaves stale filler height behind
		1577	// the composer — phantom scroll range on threads whose content fits.
		1578	const anchorRunSettled = useMemo(() => {
		1579	if (timelineAnchorMessageId === null) return false;
		1580	const anchorRun = serverProjection?.runs.find(
		1581	(run) => run.userMessageId === timelineAnchorMessageId,
		1582	);
		1583	if (anchorRun === undefined) return false;
		1584	return (
		1585	anchorRun.status !== "preparing" &&
		1586	anchorRun.status !== "queued" &&
		1587	anchorRun.status !== "starting" &&
		1588	anchorRun.status !== "running" &&
		1589	anchorRun.status !== "waiting"
		1590	);
		1591	}, [serverProjection, timelineAnchorMessageId]);
		1592	useEffect(() => {
		1593	if (!anchorRunSettled) return;
		1594	setTimelineAnchor({ threadKey: activeThreadKey, messageId: null });
		1595	}, [anchorRunSettled, activeThreadKey]);
1572	const activeRightPanelKind = useRightPanelStore((state) =>	1596	const activeRightPanelKind = useRightPanelStore((state) =>
1573	selectActiveRightPanel(state.byThreadKey, activeThreadRef),	1597	selectActiveRightPanel(state.byThreadKey, activeThreadRef),
1574	);	1598	);
@@ -3479,6 +3503,7 @@ function ChatViewContent(props: ChatViewProps) { · 1904 unmodified lines
3479	const anchorScrollRestoreFrameRef = useRef<number \| null>(null);	3503	const anchorScrollRestoreFrameRef = useRef<number \| null>(null);
3480	const cancelTimelineLiveFollowForUserNavigation = useCallback(() => {	3504	const cancelTimelineLiveFollowForUserNavigation = useCallback(() => {
3481	anchorUserScrollGenerationRef.current += 1;	3505	anchorUserScrollGenerationRef.current += 1;
		3506	const wasProgrammaticScrollMode = timelineScrollModeRef.current !== "free-scrolling";
3482	timelineScrollModeRef.current = "free-scrolling";	3507	timelineScrollModeRef.current = "free-scrolling";
3483	liveFollowUserScrollGenerationRef.current = null;	3508	liveFollowUserScrollGenerationRef.current = null;
3484	pendingTimelineAnchorRef.current = null;	3509	pendingTimelineAnchorRef.current = null;
@@ -3490,6 +3515,30 @@ function ChatViewContent(props: ChatViewProps) { · 5 unmodified lines
3490	cancelAnimationFrame(anchorScrollRestoreFrameRef.current);	3515	cancelAnimationFrame(anchorScrollRestoreFrameRef.current);
3491	anchorScrollRestoreFrameRef.current = null;	3516	anchorScrollRestoreFrameRef.current = null;
3492	}	3517	}
		3518	if (wasProgrammaticScrollMode) {
		3519	// While following or anchoring, our scrollToEnd/scrollToOffset calls can
		3520	// sit in LegendList's pending-imperative-scroll queue (it defers them
		3521	// while layout settles) and fire seconds later with stale targets,
		3522	// yanking the view away after the user scrolled. Starting a new
		3523	// imperative scroll cancels everything queued; targeting an item that
		3524	// is not in the data makes the new request itself resolve without ever
		3525	// scrolling, so this is a pure cancel.
		3526	void legendListRef.current?.scrollToItem({
		3527	item: TIMELINE_SCROLL_CANCEL_SENTINEL,
		3528	animated: false,
		3529	});
		3530	// An already-started animated scroll (behavior: smooth) keeps running in
		3531	// the browser regardless of the queue; a same-position instant write is
		3532	// the only way to halt it where it is.
		3533	const scrollNode = legendListRef.current?.getScrollableNode() as
		3534	\| { scrollTop?: number }
		3535	\| null
		3536	\| undefined;
		3537	const currentScrollTop = scrollNode?.scrollTop;
		3538	if (scrollNode && typeof currentScrollTop === "number") {
		3539	scrollNode.scrollTop = currentScrollTop;
		3540	}
		3541	}
3493	}, []);	3542	}, []);
3494	const cancelTimelineLiveFollowForUserNavigationRef = useRef(	3543	const cancelTimelineLiveFollowForUserNavigationRef = useRef(
3495	cancelTimelineLiveFollowForUserNavigation,	3544	cancelTimelineLiveFollowForUserNavigation,

apps/web/src/components/chat/MessagesTimeline.test.tsx+4−5

     );
     expect(markup).toContain("Show full message");
-    expect(markup).toContain('data-maintain-scroll-at-end="enabled"');
+    // LegendList's internal maintainScrollAtEnd stays off: it races post-mount
-    expect(markup).toContain('data-maintain-scroll-at-end-animated="false"');
+    // measurement and snaps the view to stale content ends. End-following is
-    expect(markup).toContain('data-maintain-scroll-at-end-data-change="true"');
+    // owned by ChatView's live-follow, which respects user scroll gestures.
-    expect(markup).toContain('data-maintain-scroll-at-end-item-layout="true"');
+    expect(markup).not.toContain('data-maintain-scroll-at-end="enabled"');
-    expect(markup).toContain('data-maintain-scroll-at-end-layout="true"');
     expect(markup).toContain('data-user-message-collapsed="true"');
     expect(markup).toContain('data-user-message-fade="true"');
     expect(markup).toContain('data-user-message-footer="true"');

apps/web/src/components/chat/MessagesTimeline.tsx+47−18

 import {
   type EnvironmentId,
   type MessageId,
-  type OrchestrationV2Run,
   type OrchestrationV2TurnItem,
   type RunAttemptId,
   type ScopedThreadRef,
 import { formatChatTimestampTooltip, formatShortTimestamp } from "../../timestampFormat";
 import { V2ItemInspector } from "./V2ItemInspector";
 import { useV2ItemSupport } from "../../state/v2ItemSupport";
-import { isV2LifecycleItem, V2LifecycleRow } from "./V2LifecycleRow";
+import { isV2LifecycleItem, V2LifecycleRow, type HandoffTimelineRun } from "./V2LifecycleRow";
 import { TimelineSystemDivider } from "./TimelineSystemDivider";
 import {
   /** Provider snapshots for resolving handoff endpoints to icons + model names. */
   providerStatuses: ReadonlyArray<ServerProvider>;
   /** Projection runs, for recovering handoff models on legacy items. */
-  runs: ReadonlyArray<OrchestrationV2Run>;
+  runs: ReadonlyArray<HandoffTimelineRun>;
   activeThreadEnvironmentId: EnvironmentId;
   onRevertUserMessage: (messageId: MessageId) => void;
   onImageExpand: (preview: ExpandedImagePreview) => void;
 const TIMELINE_LIST_FOOTER = <div className="h-3 sm:h-4" />;
 const EMPTY_TIMELINE_SKILLS: ReadonlyArray<Pick<ServerProviderSkill, "name" | "displayName">> = [];
 const EMPTY_TIMELINE_PROVIDERS: ReadonlyArray<ServerProvider> = [];
-const EMPTY_TIMELINE_RUNS: ReadonlyArray<OrchestrationV2Run> = [];
+const EMPTY_TIMELINE_RUNS: ReadonlyArray<HandoffTimelineRun> = [];
 // ---------------------------------------------------------------------------
 // Props (public API)
   workspaceRoot: string | undefined;
   skills?: ReadonlyArray<Pick<ServerProviderSkill, "name" | "displayName">>;
   providerStatuses?: ReadonlyArray<ServerProvider>;
-  runs?: ReadonlyArray<OrchestrationV2Run>;
+  runs?: ReadonlyArray<HandoffTimelineRun>;
   anchorMessageId: MessageId | null;
   onAnchorReady: (messageId: MessageId, anchorIndex: number) => void;
   onAnchorSizeChanged: (messageId: MessageId, size: number) => void;
   workspaceRoot,
   skills = EMPTY_TIMELINE_SKILLS,
   providerStatuses = EMPTY_TIMELINE_PROVIDERS,
-  runs = EMPTY_TIMELINE_RUNS,
+  runs: runsProp = EMPTY_TIMELINE_RUNS,
   anchorMessageId,
   onAnchorReady,
   onAnchorSizeChanged,
     ],
   );
   const rows = useStableRows(rawRows);
+  // Run status/timestamps churn on every stream event; the shared row context
+  // must not change with them or every timeline row re-renders per event.
+  const runs = useStableHandoffRuns(runsProp);
   const minimapItems = useMemo(() => deriveTimelineMinimapItems(rows), [rows]);
   const [timelineViewportElement, setTimelineViewportElement] = useState<HTMLDivElement | null>(
     null,
             initialScrollAtEnd
             {...(anchoredEndSpace ? { anchoredEndSpace } : {})}
             contentInsetEndAdjustment={contentInsetEndAdjustment}
-            maintainScrollAtEnd={
+            // The app owns end-following (ChatView live-follow + scroll-to-end
-              anchoredEndSpace
+            // pill), which respects the user's scroll gestures. LegendList's
-                ? false
+            // internal maintainScrollAtEnd races post-mount measurement: it
-                : {
+            // caches its at-end flag while a maintain cycle is active, so
-                    animated: false,
+            // overlapping item-layout reconciliations keep snapping the view
-                    on: {
+            // to stale content ends even after the user scrolled away.
-                      dataChange: true,
+            maintainScrollAtEnd={false}
-                      itemLayout: true,
-                      layout: true,
-                    },
-                  }
-            }
             maintainVisibleContentPosition={maintainVisibleContentPosition}
             onScroll={handleScroll}
             className="messages-timeline-scroll scrollbar-gutter-both h-full min-h-0 overflow-x-hidden overscroll-y-contain [overflow-anchor:none]"
 // so LegendList (and React) can skip re-rendering unchanged items.
 // ---------------------------------------------------------------------------
+/** Content-stable projection of the runs the handoff rows read. The incoming
+ *  array is rebuilt on every projection event (status/timestamp churn), but
+ *  the returned reference only changes when a run's identity-relevant fields
+ *  (id, ordinal, instance, model) do — keeping TimelineRowCtx stable. */
+function useStableHandoffRuns(
+  runs: ReadonlyArray<HandoffTimelineRun>,
+): ReadonlyArray<HandoffTimelineRun> {
+  const prev = useRef<{
+    signature: string;
+    value: ReadonlyArray<HandoffTimelineRun>;
+  }>({ signature: "", value: EMPTY_TIMELINE_RUNS });
+  return useMemo(() => {
+    const signature = runs
+      .map(
+        (run) =>
+          `${run.id}\0${run.providerInstanceId}\0${run.ordinal}\0${run.modelSelection.instanceId}\0${run.modelSelection.model}`,
+      )
+      .join("\n");
+    if (signature === prev.current.signature) {
+      return prev.current.value;
+    }
+    const value = runs.map((run) => ({
+      id: run.id,
+      ordinal: run.ordinal,
+      providerInstanceId: run.providerInstanceId,
+      modelSelection: run.modelSelection,
+    }));
+    prev.current = { signature, value };
+    return value;
+  }, [runs]);
+}
 /** Returns a structurally-shared copy of `rows`: for each row whose content
  *  hasn't changed since last call, the previous object reference is reused. */
 function useStableRows(rows: MessagesTimelineRow[]): MessagesTimelineRow[] {

apps/web/src/components/chat/V2LifecycleRow.tsx+13−3

   "interrupted",
 ]);
+/**
+ * The subset of a projection run that handoff rows read. Kept minimal so the
+ * timeline can hold a content-stable snapshot: run status/timestamps churn on
+ * every stream event, but these fields only change when a run is added.
+ */
+export type HandoffTimelineRun = Pick<
+  OrchestrationV2Run,
+  "id" | "ordinal" | "providerInstanceId" | "modelSelection"
+>;
 export function V2LifecycleRow(props: {
   readonly item: OrchestrationV2TurnItem;
   readonly createdAt: string;
   readonly timestampFormat: TimestampFormat;
   readonly providerStatuses: ReadonlyArray<ServerProvider>;
-  readonly runs: ReadonlyArray<OrchestrationV2Run>;
+  readonly runs: ReadonlyArray<HandoffTimelineRun>;
   readonly onOpenThread: (threadId: ThreadId) => void;
 }) {
   const { item } = props;
  * covered runs are still in the projection.
  */
 function latestRunModelBefore(
-  runs: ReadonlyArray<OrchestrationV2Run>,
+  runs: ReadonlyArray<HandoffTimelineRun>,
   instanceId: ProviderInstanceId,
   beforeOrdinal: number | undefined,
 ): string | undefined {
-  let latest: OrchestrationV2Run | undefined;
+  let latest: HandoffTimelineRun | undefined;
   for (const run of runs) {
     if (run.providerInstanceId !== instanceId) continue;
     if (beforeOrdinal !== undefined && run.ordinal >= beforeOrdinal) continue;