fix(mobile): clipped thoughts no longer run into the next reply

Author: jason5545

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

@@ -0,0 +1,62 @@
+import { useId, useState, type ReactNode } from "react";
+import { ScrollView, View } from "react-native";
+import Svg, { Defs, LinearGradient, Rect, Stop } from "react-native-svg";
+
+import { WorkLogBlock } from "./work-log-layout";
+
+const FADE_HEIGHT = 24;
+
+/** A capped thought box; a clipped thought fades out so the next reply does not read as part of it. */
+export function ReasoningGroupScroll(props: {
+  readonly continues: boolean | undefined;
+  readonly fadeColor: string;
+  readonly children: ReactNode;
+}) {
+  const [viewportHeight, setViewportHeight] = useState(0);
+  const [contentHeight, setContentHeight] = useState(0);
+  const [atEnd, setAtEnd] = useState(false);
+  const clipped = contentHeight > viewportHeight + 1;
+  return (
+    <WorkLogBlock continues={props.continues}>
+      <View className="ml-7">
+        <ScrollView
+          nestedScrollEnabled
+          className="max-h-96 py-1"
+          scrollEventThrottle={64}
+          onLayout={(event) => setViewportHeight(event.nativeEvent.layout.height)}
+          onContentSizeChange={(_, height) => setContentHeight(height)}
+          onScroll={({ nativeEvent }) =>
+            setAtEnd(
+              nativeEvent.contentOffset.y + nativeEvent.layoutMeasurement.height >=
+                nativeEvent.contentSize.height - 1,
+            )
+          }
+        >
+          {props.children}
+        </ScrollView>
+        {clipped && !atEnd ? <BottomFade color={props.fadeColor} /> : null}
+      </View>
+    </WorkLogBlock>
+  );
+}
+
+function BottomFade(props: { readonly color: string }) {
+  const gradientId = `reasoning-fade-${useId().replaceAll(":", "")}`;
+  return (
+    <View
+      pointerEvents="none"
+      className="absolute inset-x-0 bottom-0"
+      style={{ height: FADE_HEIGHT }}
+    >
+      <Svg width="100%" height="100%">
+        <Defs>
+          <LinearGradient id={gradientId} x1="0%" x2="0%" y1="0%" y2="100%">
+            <Stop offset={0} stopColor={props.color} stopOpacity={0} />
+            <Stop offset={1} stopColor={props.color} stopOpacity={1} />
+          </LinearGradient>
+        </Defs>
+        <Rect width="100%" height="100%" fill={`url(#${gradientId})`} />
+      </Svg>
+    </View>
+  );
+}

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

@@ -2,6 +2,7 @@ import { Button } from "../../components/ui/Button";
 import { SubagentStatusDot } from "./SubagentStatusDot";
 import { ThreadSubagentGroup } from "./thread-subagent-group";
 import { ProposedPlanCard } from "./ProposedPlanCard";
+import { ReasoningGroupScroll } from "./ReasoningGroupScroll";
 import {
   WorkLogLabel,
   WorkLogBlock,
@@ -542,11 +543,11 @@ export function ThreadWorkLog(props: ThreadWorkLogProps) {
     props.activities.every((row) => row.projectedItem.item.type === "reasoning")
   ) {
     return (
-      <ScrollView nestedScrollEnabled className="ml-7 max-h-96 py-1">
+      <ReasoningGroupScroll continues={props.continuesWorkLog} fadeColor={props.edgeFadeColor}>
         {props.activities.map((row) => (
           <View key={row.id}>{props.renderReasoning(row.workEntry.detail ?? "")}</View>
         ))}
-      </ScrollView>
+      </ReasoningGroupScroll>
     );
   }
 

patches.md

@@ -129,6 +129,10 @@ Upstream baseline: `b3d382e100` (merged 2026-10-25).
 - The menu reports only the selected text and its offsets within one rendered block, so a mobile citation has block-relative offsets and an empty prefix and suffix: web finds the source when the quote occurs once in the response and otherwise shows the saved quote without jumping.
 - Upstream's new orchestrator (`de34391427`, #2829) dropped the `expandAssistantCitationsForProvider` call the old `ProviderService` made, so every provider received the raw link with its quote percent-encoded (a Chinese quote reads `%E5%BF%AB…`), from web as well. `ProviderTurnStartService` and `ProviderTurnControlService` (steering) expand it again after projecting composer context; the stored message keeps the link. `ProviderTurnStartService.fork.test.ts` covers sending and steering. Drop that part when upstream restores the expansion, and the rest when upstream mobile creates citations.
 
+## 14. Mobile thought groups keep their margin
+
+- An expanded group of thoughts scrolls inside a box capped at `max-h-96`. Upstream rendered it as a bare `ScrollView`, without the `WorkLogBlock` bottom margin the other work log rows get, so a clipped thought ended flush against the next reply and read as overlapping it. `ReasoningGroupScroll.tsx` wraps the box in `WorkLogBlock` and fades its bottom edge while the thought is clipped and not scrolled to the end; `thread-work-log.tsx` only swaps the `ScrollView` for it. Before/after captures were not taken.
+
 ## Fork tests
 
 - Fork test cases live in `*.fork.test.ts` beside the file they cover, each with a copy of the small harness it needs, so upstream can rewrite or delete its own tests without conflicts. Upstream test files carry no fork edits.