fix(web): find shows its match after a thread switch, and the timeline hears scrolling through one viewport signal

apps/web/src/components/ChatView.tsx

@@ -1999,9 +1999,7 @@ export default function ChatView(props: ChatViewProps) {
   const {
     showScrollToBottom,
     timelineLiveFollowEnabled,
-    cancelPositionRestoreRef,
     isTimelineAtLogicalEndStable,
-    cancelTimelineLiveFollowForUserNavigationStable,
     onComposerPageScrollKeyDownStable,
     onComposerPageScrollKeyUpStable,
     onComposerPageScrollReleaseStable,
@@ -2011,14 +2009,14 @@ export default function ChatView(props: ChatViewProps) {
     onToolOutputCollapsedAtEndStable,
     onIsAtEndChangeStable,
     anchorNewTurn,
+    attachTimelineViewport,
+    attachComposerOverlay: attachFollowComposerOverlay,
   } = useTimelineFollow({
     legendListRef,
     composerRef,
-    composerOverlayElement,
     composerTimelineInset,
     routeThreadKey,
     activeThreadKey,
-    activeThreadId: activeThread?.id,
     isServerThread,
     serverProjection,
     threadStatus,
@@ -3365,8 +3363,7 @@ export default function ChatView(props: ChatViewProps) {
                 onIsAtEndChange={onIsAtEndChangeStable}
                 onContentOverflowChange={setTimelineOverflows}
                 onToolOutputCollapsedAtEnd={onToolOutputCollapsedAtEndStable}
-                onManualNavigation={cancelTimelineLiveFollowForUserNavigationStable}
-                cancelPositionRestoreRef={cancelPositionRestoreRef}
+                onViewportAttach={attachTimelineViewport}
                 hideEmptyPlaceholder={isDraftHeroState || threadDetailLoading}
                 emptyPlaceholderInset={composerReservedHeight}
                 topFadeEnabled={!hasTimelineTopBanner}
@@ -3387,7 +3384,10 @@ export default function ChatView(props: ChatViewProps) {
             </div>
 
             <div
-              ref={setComposerOverlayElement}
+              ref={(overlay: HTMLDivElement | null) => {
+                setComposerOverlayElement(overlay);
+                attachFollowComposerOverlay(overlay);
+              }}
               inert={isRevertingCheckpoint}
               data-chat-composer-overlay="true"
               className={

apps/web/src/components/chat/MessagesTimeline.browser.test.tsx

@@ -24,6 +24,8 @@ import { parseMarkdownWithMath } from "@t3tools/shared/markdownMath";
 import { collectThreadFindRanges } from "./threadFindHighlights";
 import { toastManager } from "../ui/toast";
 import type { CitedHistory } from "./citationProcedure";
+import type { TimelineNavigation } from "./timelineViewport";
+import { rememberTimelinePosition } from "./timelineScrollAnchoring";
 
 const environmentQuery = vi.hoisted(() => ({
   error: "Pull request not found",
@@ -91,7 +93,6 @@ function baseProps(): Omit<TimelineProps, "timelineEntries"> {
     emptyPlaceholderInset: 0,
     liveFollowEnabled: true,
     onIsAtEndChange: () => {},
-    onManualNavigation: () => {},
   };
 }
 
@@ -638,6 +639,125 @@ describe("MessagesTimeline attachments", () => {
   });
 });
 
+describe("MessagesTimeline thread find", () => {
+  // Opening find is navigation; on a list already showing the thread the open
+  // action navigates, so the list itself releases follow only when it starts
+  // showing a thread whose find is already open.
+  function renderObserved() {
+    const navigations: TimelineNavigation[] = [];
+    const base = baseProps();
+    const element = (next: Partial<TimelineProps>) => (
+      <MessagesTimeline
+        {...base}
+        timelineEntries={[message("Where is the sidebar fix?")]}
+        onViewportAttach={(viewport) =>
+          viewport.subscribe((navigation) => navigations.push(navigation))
+        }
+        {...next}
+      />
+    );
+    return { navigations, element };
+  }
+  const released = { source: "command", releasesFollow: true };
+
+  it("releases follow once when it starts showing a thread whose find is open", async () => {
+    setup();
+    const { navigations, element } = renderObserved();
+    await using screen = await renderElement(element({}));
+    expect(navigations).toEqual([]);
+
+    const other = "environment-local:thread-find-open";
+    await screen.rerender(element({ routeThreadKey: other, findOpen: true }));
+    expect(navigations).toEqual([released]);
+    await screen.rerender(element({ routeThreadKey: other, findOpen: false }));
+    await screen.rerender(element({ routeThreadKey: other, findOpen: true }));
+    expect(navigations).toEqual([released]);
+  });
+
+  it("releases follow once when it mounts on a thread whose find is open", async () => {
+    setup();
+    const { navigations, element } = renderObserved();
+    await using screen = await renderElement(element({ findOpen: true }));
+    await screen.rerender(element({ findOpen: true }));
+    expect(navigations).toEqual([released]);
+  });
+
+  it("still restores the position of a thread it switches to whose find is open", async () => {
+    setup();
+    const base = baseProps();
+    const other = "environment-local:thread-find-open-positioned";
+    const replies = Array.from({ length: 40 }, (_, index) =>
+      message(`Reply ${index}\n\n${"line\n\n".repeat(8)}`, { role: "assistant" }, `r-${index}`),
+    );
+    rememberTimelinePosition(
+      other,
+      { rowId: "entry-r-20", offsetWithinRow: 0, scrollOffset: 0, atEnd: false },
+      false,
+    );
+    await using screen = await renderElement(
+      <MessagesTimeline {...base} timelineEntries={[message("Short thread")]} />,
+    );
+    await screen.rerender(
+      <MessagesTimeline
+        {...base}
+        routeThreadKey={other}
+        timelineEntries={replies}
+        liveFollowEnabled={false}
+        findOpen
+      />,
+    );
+    const viewport = base.listRef.current!.getScrollableNode()!;
+    await vi.waitFor(() => {
+      const row = screen.container.querySelector('[data-timeline-row-id="entry-r-20"]');
+      expect(row).not.toBeNull();
+      expect(
+        Math.abs(row!.getBoundingClientRect().top - viewport.getBoundingClientRect().top),
+      ).toBeLessThanOrEqual(2);
+    });
+  });
+  it("reveals find's match, not the remembered row, on a thread it switches to", async () => {
+    setup();
+    const base = baseProps();
+    const other = "environment-local:thread-find-open-match";
+    const replies = Array.from({ length: 40 }, (_, index) =>
+      message(
+        `${index === 5 ? "Needle here" : `Reply ${index}`}\n\n${"line\n\n".repeat(8)}`,
+        { role: "assistant" },
+        `r-${index}`,
+      ),
+    );
+    rememberTimelinePosition(
+      other,
+      { rowId: "entry-r-20", offsetWithinRow: 0, scrollOffset: 0, atEnd: false },
+      false,
+    );
+    await using screen = await renderElement(
+      <MessagesTimeline {...base} timelineEntries={[message("Short thread")]} />,
+    );
+    await screen.rerender(
+      <MessagesTimeline
+        {...base}
+        routeThreadKey={other}
+        timelineEntries={replies}
+        liveFollowEnabled={false}
+        findOpen
+        findExpanded
+        findQuery="Needle"
+        activeFindMatch={{ entryId: "entry-r-5", runId: null, occurrence: 0 }}
+      />,
+    );
+    const viewport = base.listRef.current!.getScrollableNode()!;
+    await vi.waitFor(() => {
+      const row = screen.container.querySelector('[data-timeline-row-id="entry-r-5"]');
+      expect(row).not.toBeNull();
+      const bounds = viewport.getBoundingClientRect();
+      const top = row!.getBoundingClientRect().top;
+      expect(top).toBeGreaterThanOrEqual(bounds.top);
+      expect(top).toBeLessThan(bounds.bottom);
+    });
+  });
+});
+
 describe("compact reasoning math", () => {
   it("keeps formulas while flattening compact reasoning previews", () => {
     const tree = parseMarkdownWithMath("## Reasoning\n\nUse **norm** $|x|$ and \\[x^2\\]");