Merge pull request #249 from pylon-code/upstream/2026-09-02-scroll-bounds

fix(mobile): keep thread scroll bounds current after animations

Author: rynfar

apps/mobile/src/features/threads/ThreadDetailScreen.tsx

@@ -789,7 +789,7 @@ export const ThreadDetailScreen = memo(function ThreadDetailScreen(props: Thread
           onTouchCancel={handleFeedTouchCancel}
         >
           <ThreadFeed
-            key={props.selectedThread.id}
+            key={selectedThreadKey}
             environmentId={props.environmentId}
             threadId={props.selectedThread.id}
             workspaceRoot={props.threadCwd}

apps/mobile/src/features/threads/ThreadFeed.tsx

@@ -71,7 +71,6 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
 import Animated, {
   FadeIn,
   FadeInUp,
-  FadeOut,
   LinearTransition,
   type SharedValue,
 } from "react-native-reanimated";
@@ -133,6 +132,7 @@ import {
 } from "./thread-feed-live-follow";
 import {
   collapsedWorkLogHeight,
+  ThreadDisclosureChevron,
   ThreadWorkGroupToggle,
   ThreadWorkLog,
   THREAD_DISCLOSURE_TRANSITION_MS,
@@ -167,11 +167,12 @@ function formatMessageTime(input: string): string {
 // text-sm line at every supported base font size (26px at the 22pt maximum),
 // so its height is a constant; a drifted value costs one correction on
 // measure, not a persistent offset.
-const TURN_FOLD_HEIGHT = 56; // min-h-11 (44) + mb-3 (12)
+const TURN_FOLD_HEIGHT = 48; // min-h-11 (44) + mb-1 (4)
 const THREAD_FEED_LAYOUT_TRANSITION = LinearTransition.duration(THREAD_DISCLOSURE_TRANSITION_MS);
-const THREAD_FEED_DISCLOSURE_ENTER_TRANSITION = FadeIn.duration(140);
-const THREAD_FEED_DISCLOSURE_EXIT_TRANSITION = FadeOut.duration(120);
-const EMPTY_DISCLOSURE_ENTRY_IDS: ReadonlySet<string> = new Set();
+// Let neighboring rows move out of the new rows' space before showing their text.
+const THREAD_FEED_DISCLOSURE_ENTER_TRANSITION = FadeIn.delay(
+  THREAD_DISCLOSURE_TRANSITION_MS,
+).duration(140);
 
 // Entering animations must only play for rows born just now — LegendList
 // remounts rows when they scroll back into view, and replaying an entrance for
@@ -1357,16 +1358,16 @@ function renderFeedEntry(
         accessibilityState={{ expanded: entry.expanded }}
         onPress={() => props.onToggleTurnFold(entry.turnId)}
         hitSlop={4}
-        className="mb-3 min-h-11 flex-row items-center gap-2 border-b border-adaptive-neutral-200-a80-white-a8 px-2"
+        className="mb-1 min-h-11 flex-row items-center gap-2 border-b border-adaptive-neutral-200-a80-white-a8 px-2"
       >
         <Text className="font-t3-medium text-sm tabular-nums text-foreground-muted">
           {entry.label}
         </Text>
-        <SymbolView
-          name={entry.expanded ? "chevron.down" : "chevron.right"}
+        <ThreadDisclosureChevron
+          expanded={entry.expanded}
+          collapsedDirection="right"
           size={15}
-          tintColorClassName={"accent-icon-subtle"}
-          type="monochrome"
+          tintColor={iconSubtleColor}
         />
       </Pressable>
     );
@@ -1490,7 +1491,7 @@ function renderFeedEntry(
     const enterAnimated = isFreshTimestamp(message.createdAt);
     return (
       <Animated.View
-        className={cn(showAssistantMeta ? "mb-5 px-1" : "mb-2 px-1")}
+        className={cn(showAssistantMeta ? "mb-5 px-1" : "mb-1 px-1")}
         {...(enterAnimated ? { entering: FadeIn.duration(220) } : {})}
       >
         {renderedText.trim().length > 0 ? (
@@ -1840,7 +1841,6 @@ export const ThreadFeed = memo(function ThreadFeed(props: ThreadFeedProps) {
   const disclosureSettleFrameRef = useRef<number | null>(null);
   const disclosureSettleSecondFrameRef = useRef<number | null>(null);
   const disclosureAnchorKeyRef = useRef<string | null>(null);
-  const previousPresentedFeedRef = useRef<ReadonlyArray<ThreadFeedEntry> | null>(null);
   const headerMaterialVisibleRef = useRef(false);
   const previousLatestTurnRef = useRef(props.latestTurn);
   const userScrollSettleTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -1853,12 +1853,12 @@ export const ThreadFeed = memo(function ThreadFeed(props: ThreadFeedProps) {
   // Live-follow latch. LegendList's maintainScrollAtEnd alone re-pins the feed
   // whenever the viewport drifts back inside its geometric threshold, which
   // yanked users off history they were reading every time a stream chunk grew
-  // a row. Follow breaks when the user scrolls up and away, and re-arms only
-  // when the list actually returns to the end (or on send / thread switch).
+  // a row. Scrolling away or expanding a disclosure above the end breaks
+  // follow; reaching the end (or sending / switching threads) re-arms it.
   const [endFollowEnabled, setEndFollowEnabled] = useState(true);
   const endFollowEnabledRef = useRef(true);
   // A "user scroll session" spans from drag start through the end of its
-  // momentum; only motion inside a session can break follow, so MVCP
+  // momentum; scroll events only break follow inside that session, so MVCP
   // compensations and programmatic scrolls never strand a follower.
   const userScrollSessionRef = useRef(false);
   const setEndFollow = useCallback(
@@ -2173,33 +2173,6 @@ export const ThreadFeed = memo(function ThreadFeed(props: ThreadFeedProps) {
       props.latestTurn,
     ],
   );
-  const disclosureEnteringEntryIds = useMemo(() => {
-    const anchorKey = disclosureAnchorKeyRef.current;
-    const previousPresentedFeed = previousPresentedFeedRef.current;
-    if (!disclosureToggleSettling || anchorKey === null || previousPresentedFeed === null) {
-      return EMPTY_DISCLOSURE_ENTRY_IDS;
-    }
-
-    const previousIds = new Set(previousPresentedFeed.map((entry) => entry.id));
-    const anchorIndex = presentedFeed.findIndex((entry) => entry.id === anchorKey);
-    const enteringIds = new Set<string>();
-    if (anchorIndex < 0) {
-      return enteringIds;
-    }
-    for (let index = anchorIndex + 1; index < presentedFeed.length; index += 1) {
-      const entryId = presentedFeed[index]!.id;
-      if (previousIds.has(entryId)) {
-        break;
-      }
-      enteringIds.add(entryId);
-    }
-    return enteringIds;
-  }, [disclosureToggleSettling, presentedFeed]);
-
-  useLayoutEffect(() => {
-    previousPresentedFeedRef.current = presentedFeed;
-  }, [presentedFeed]);
-
   // The empty↔filled key below remounts the list and resets its imperative
   // content-inset override. Seed the fresh instance synchronously with the
   // current overlay height before the scroll integration's next reaction;
@@ -2286,13 +2259,23 @@ export const ThreadFeed = memo(function ThreadFeed(props: ThreadFeedProps) {
     }
     disclosureSettleFrameRef.current = requestAnimationFrame(() => {
       disclosureSettleSecondFrameRef.current = requestAnimationFrame(() => {
+        // A disclosure can leave the reader above the end without a drag.
+        // Reconcile follow before a later layout or resume can re-pin it.
+        const listState = props.listRef.current?.getState();
+        if (listState) {
+          transitionEndFollow({
+            type: "disclosure-settled",
+            isAtEnd: listState.isAtEnd,
+            userScrollSessionActive: userScrollSessionRef.current,
+          });
+        }
         disclosureAnchorKeyRef.current = null;
         setDisclosureToggleSettling(false);
         disclosureSettleFrameRef.current = null;
         disclosureSettleSecondFrameRef.current = null;
       });
     });
-  }, []);
+  }, [props.listRef, transitionEndFollow]);
 
   const suspendEndScrollMaintenanceForDisclosure = useCallback((anchorKey: string | null) => {
     disclosureAnchorKeyRef.current = anchorKey;
@@ -2433,16 +2416,13 @@ export const ThreadFeed = memo(function ThreadFeed(props: ThreadFeedProps) {
     [expandedWorkRows],
   );
 
+  // Disclosures can mount existing offscreen rows as well as new work rows.
+  // Fade those in after movement; never retain removed rows over replacements.
   const renderItem = useCallback(
     (info: { item: ThreadFeedEntry; index: number }) => (
       <Animated.View
         key={info.item.id}
-        entering={
-          disclosureEnteringEntryIds.has(info.item.id)
-            ? THREAD_FEED_DISCLOSURE_ENTER_TRANSITION
-            : undefined
-        }
-        exiting={THREAD_FEED_DISCLOSURE_EXIT_TRANSITION}
+        entering={disclosureToggleSettling ? THREAD_FEED_DISCLOSURE_ENTER_TRANSITION : undefined}
       >
         {renderFeedEntry(info, {
           environmentId: props.environmentId,
@@ -2471,7 +2451,7 @@ export const ThreadFeed = memo(function ThreadFeed(props: ThreadFeedProps) {
     ),
     [
       copiedRowId,
-      disclosureEnteringEntryIds,
+      disclosureToggleSettling,
       expandedWorkRows,
       terminalAssistantMessageIds,
       unsettledTurnId,

apps/mobile/src/features/threads/thread-feed-live-follow.test.ts

@@ -102,6 +102,17 @@ describe("resolveThreadFeedLiveFollow", () => {
     ).toBe(false);
   });
 
+  it.each([
+    { isAtEnd: false, userScrollSessionActive: false, expected: false },
+    { isAtEnd: true, userScrollSessionActive: false, expected: true },
+    { isAtEnd: false, userScrollSessionActive: true, expected: false },
+    { isAtEnd: true, userScrollSessionActive: true, expected: false },
+  ])("reconciles follow after a disclosure settles: %j", ({ expected, ...state }) => {
+    expect(resolveThreadFeedLiveFollow(!expected, { type: "disclosure-settled", ...state })).toBe(
+      expected,
+    );
+  });
+
   it("re-arms at the actual end only after the user scroll session ends", () => {
     expect(
       resolveThreadFeedLiveFollow(false, {

apps/mobile/src/features/threads/thread-feed-live-follow.ts

@@ -7,7 +7,7 @@ export type ThreadFeedLiveFollowEvent =
       readonly userScrollSessionActive: boolean;
     }
   | {
-      readonly type: "scroll";
+      readonly type: "scroll" | "disclosure-settled";
       readonly isAtEnd: boolean;
       readonly userScrollSessionActive: boolean;
     };
@@ -41,6 +41,8 @@ export function resolveThreadFeedLiveFollow(
       return false;
     case "user-scroll-end":
       return event.userScrollSessionActive ? event.isAtEnd : current;
+    case "disclosure-settled":
+      return !event.userScrollSessionActive && event.isAtEnd;
     case "scroll":
       if (event.userScrollSessionActive) {
         return false;

apps/mobile/src/features/threads/thread-work-log.tsx

@@ -2,7 +2,7 @@ import * as Haptics from "expo-haptics";
 import { type AppSymbolName, SymbolView } from "../../components/AppSymbol";
 import { MaskedView } from "@expo/ui/community/masked-view";
 import { useIsFocused } from "@react-navigation/native";
-import { useEffect, useId, useState, type ComponentProps } from "react";
+import { useEffect, useId, useLayoutEffect, useState, type ComponentProps } from "react";
 import {
   AccessibilityInfo,
   AppState,
@@ -41,6 +41,44 @@ const WORK_LOG_LAYOUT_TRANSITION = LinearTransition.duration(THREAD_DISCLOSURE_T
 const WORK_LOG_DETAIL_ENTER_TRANSITION = FadeIn.duration(140);
 const WORK_LOG_DETAIL_EXIT_TRANSITION = FadeOut.duration(120);
 
+export function ThreadDisclosureChevron(props: {
+  readonly expanded: boolean;
+  readonly collapsedDirection: "right" | "down";
+  readonly size: number;
+  readonly tintColor: ColorValue;
+}) {
+  const expandedAngle = props.collapsedDirection === "right" ? 90 : 180;
+  const rotation = useSharedValue(props.expanded ? expandedAngle : 0);
+
+  useLayoutEffect(() => {
+    rotation.value = withTiming(props.expanded ? expandedAngle : 0, {
+      duration: THREAD_DISCLOSURE_TRANSITION_MS,
+      reduceMotion: ReduceMotion.System,
+    });
+  }, [expandedAngle, props.expanded, rotation]);
+
+  const rotationStyle = useAnimatedStyle(() => ({
+    transform: [{ rotate: `${rotation.value}deg` }],
+  }));
+
+  return (
+    <Animated.View
+      accessible={false}
+      accessibilityElementsHidden
+      importantForAccessibility="no-hide-descendants"
+      pointerEvents="none"
+      style={[{ width: props.size, height: props.size }, rotationStyle]}
+    >
+      <SymbolView
+        name={props.collapsedDirection === "right" ? "chevron.right" : "chevron.down"}
+        size={props.size}
+        tintColor={props.tintColor}
+        type="monochrome"
+      />
+    </Animated.View>
+  );
+}
+
 function ShimmerWorkContent(props: {
   readonly highlighted: boolean;
   readonly icon: AppSymbolName;
@@ -264,7 +302,7 @@ const WORK_ROW_HEIGHT = 32; // min-h-8
 const WORK_ROW_GAP = 1; // gap-px
 const WORK_LOG_BOTTOM_MARGIN = 4; // mb-1
 
-export const WORK_GROUP_TOGGLE_HEIGHT = 36; // min-h-8 (32) + mb-1 (4)
+export const WORK_GROUP_TOGGLE_HEIGHT = 32; // min-h-8
 
 export function collapsedWorkLogHeight(activities: ReadonlyArray<ThreadFeedActivity>): number {
   if (activities.length === 0) {
@@ -395,15 +433,11 @@ export function ThreadWorkLog(props: {
                     ) : null}
                     <View className="h-4 w-4 items-center justify-center">
                       {canExpand ? (
-                        <SymbolView
-                          name={
-                            expanded
-                              ? { ios: "chevron.up", android: "keyboard_arrow_up" }
-                              : { ios: "chevron.down", android: "keyboard_arrow_down" }
-                          }
+                        <ThreadDisclosureChevron
+                          expanded={expanded}
+                          collapsedDirection="down"
                           size={11}
                           tintColor={props.iconSubtleColor}
-                          type="monochrome"
                         />
                       ) : null}
                     </View>
@@ -458,7 +492,7 @@ export function ThreadWorkGroupToggle(props: {
   const icon = toolGroupSummarySymbolName(props.summaryKind);
 
   return (
-    <View className="-mx-1 mb-1 px-1 py-0">
+    <View className="-mx-1 px-1 py-0">
       <Pressable
         accessibilityRole="button"
         accessibilityState={{ expanded: props.expanded }}
@@ -493,15 +527,11 @@ export function ThreadWorkGroupToggle(props: {
             </Text>
           </>
         )}
-        <SymbolView
-          name={
-            props.expanded
-              ? { ios: "chevron.up", android: "keyboard_arrow_up" }
-              : { ios: "chevron.down", android: "keyboard_arrow_down" }
-          }
+        <ThreadDisclosureChevron
+          expanded={props.expanded}
+          collapsedDirection="down"
           size={11}
           tintColor={props.iconSubtleColor}
-          type="monochrome"
         />
       </Pressable>
     </View>