fix(mothership): follow the post-stop drain to the end instead of freezing

Author: TheodoreSpeaks

apps/sim/app/workspace/[workspaceId]/home/components/message-content/message-content.tsx

@@ -860,8 +860,16 @@ function MessageContentInner({
   }, [visibleStreamActivityKey, isStreaming])
 
   const lastSegment = segments[segments.length - 1]
-  const hasTrailingTextSegment = lastSegment?.type === 'text'
-  const isRevealing = hasTrailingTextSegment && trailingRevealing
+  // The reveal tail is the last TEXT segment — a stopped block appends AFTER
+  // the text that is still visibly draining, and treating the turn as settled
+  // the moment it lands tears down the scroll machinery mid-reveal.
+  const revealTailIndex =
+    lastSegment?.type === 'stopped' && segments[segments.length - 2]?.type === 'text'
+      ? segments.length - 2
+      : lastSegment?.type === 'text'
+        ? segments.length - 1
+        : -1
+  const isRevealing = revealTailIndex >= 0 && trailingRevealing
   const phase = deriveMessagePhase({ isStreaming, isRevealing })
 
   const onPhaseChangeRef = useRef(onPhaseChange)
@@ -912,13 +920,13 @@ function MessageContentInner({
                   onQuestionDismiss={onQuestionDismiss}
                   onWorkspaceResourceSelect={onWorkspaceResourceSelect}
                   onRevealStateChange={
-                    i === segments.length - 1 ? handleTrailingRevealChange : undefined
+                    i === revealTailIndex ? handleTrailingRevealChange : undefined
                   }
                   onStreamActivityChange={
-                    i === segments.length - 1 ? handleTrailingStreamActivityChange : undefined
+                    i === revealTailIndex ? handleTrailingStreamActivityChange : undefined
                   }
                   onPendingTagChange={
-                    i === segments.length - 1 ? handleTrailingPendingTagChange : undefined
+                    i === revealTailIndex ? handleTrailingPendingTagChange : undefined
                   }
                 />
               )

apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/mothership-chat.tsx

@@ -301,19 +301,7 @@ export function MothershipChat({
   const messages = useDeferredValue(messagesProp)
   const [lastRowAnimating, setLastRowAnimating] = useState(false)
   const scrollElementRef = useRef<HTMLDivElement | null>(null)
-  const { ref: autoScrollRef, detach: detachAutoScroll } = useAutoScroll(
-    isStreamActive || lastRowAnimating
-  )
-  /**
-   * Stop means freeze: detach auto-scroll exactly like a user scroll-away, so
-   * every chase path — mutation kicks while the reveal drains, animation
-   * follows, the settle window — parks instead of nudging the transcript the
-   * user just halted. The next stream re-seeds stickiness from position.
-   */
-  const handleStopGeneration = useCallback(() => {
-    detachAutoScroll()
-    onStopGeneration()
-  }, [detachAutoScroll, onStopGeneration])
+  const { ref: autoScrollRef } = useAutoScroll(isStreamActive || lastRowAnimating)
   const sizerRef = useRef<HTMLDivElement | null>(null)
   const scrollerPaddingRef = useRef<{ top: number; bottom: number } | null>(null)
   const sizerFloorAppliedRef = useRef(0)
@@ -676,7 +664,7 @@ export function MothershipChat({
               ref={userInputRef}
               onSubmit={onSubmit}
               isSending={isStreamActive}
-              onStopGeneration={handleStopGeneration}
+              onStopGeneration={onStopGeneration}
               isInitialView={false}
               onSendQueuedHead={handleSendQueuedHead}
               onEditQueuedTail={handleEditQueuedTail}

apps/sim/hooks/use-auto-scroll.ts

@@ -25,6 +25,12 @@ const USER_GESTURE_WINDOW = 250
  * in the listener) is the other upward shortcut; plain `Space` pages down.
  */
 const SCROLL_UP_KEYS = new Set(['ArrowUp', 'PageUp', 'Home'])
+/**
+ * How long the chase idle-follows after stream teardown. Covers content that
+ * mounts with the observers already gone — a stop's stopped-row and actions
+ * append only after the abort round-trips.
+ */
+const POST_STOP_SETTLE_WINDOW = 800
 /**
  * Manages sticky auto-scroll for a streaming chat container.
  *
@@ -34,10 +40,7 @@ const SCROLL_UP_KEYS = new Set(['ArrowUp', 'PageUp', 'Home'])
  * of the bottom to re-engage. Each streaming start re-seeds stickiness from the
  * current scroll position, so a user who scrolled up beforehand stays put.
  *
- * Returns `ref` (callback ref for the scroll container) and `detach` for
- * programmatic freezes (a user stop) — it parks every chase path exactly like
- * a user scroll-away, until the user scrolls back to the bottom or the next
- * stream re-seeds stickiness.
+ * Returns `ref`, the callback ref for the scroll container.
  */
 export function useAutoScroll(isStreaming: boolean) {
   const containerRef = useRef<HTMLDivElement>(null)
@@ -59,11 +62,6 @@ export function useAutoScroll(isStreaming: boolean) {
    */
   const lastUserGestureAtRef = useRef(Number.NEGATIVE_INFINITY)
 
-  const detach = useCallback(() => {
-    stickyRef.current = false
-    userDetachedRef.current = true
-  }, [])
-
   const callbackRef = useCallback((el: HTMLDivElement | null) => {
     containerRef.current = el
   }, [])
@@ -210,13 +208,14 @@ export function useAutoScroll(isStreaming: boolean) {
       chase.cancel()
       pointerDownRef.current = false
       lastUserGestureAtRef.current = Number.NEGATIVE_INFINITY
-      // Teardown can land mid-glide (options mounted late in the reveal, gap
-      // not yet closed) — canceling there strands the follow-ups behind the
-      // input. One plain kick runs the loop to rest and parks; a stopped turn
-      // stays frozen because the detached sticky check parks it on frame one.
-      chase.kick()
+      // Growth can land after teardown with no observer alive: options mounted
+      // late in the reveal, and a stop's stopped-row/actions appending once the
+      // abort completes. Idle-follow briefly so that content isn't stranded
+      // behind the input; a user who scrolled away stays put via the sticky
+      // check.
+      chase.kickUntil(POST_STOP_SETTLE_WINDOW)
     }
   }, [isStreaming])
 
-  return { ref: callbackRef, detach }
+  return { ref: callbackRef }
 }

apps/sim/lib/core/utils/smooth-bottom-chase.ts

@@ -26,6 +26,13 @@ export interface SmoothBottomChaseHandle {
   isActive: () => boolean
   /** Start the loop if parked. Call after content growth. */
   kick: () => void
+  /**
+   * Keep the loop alive for `durationMs` even while the gap is at rest,
+   * re-checking every frame. For growth that lands with no observable trigger
+   * — content mounting just after a stream's observers tear down (a stop's
+   * stopped-row/actions). Repeat calls extend the deadline; one loop only.
+   */
+  kickUntil: (durationMs: number) => void
   cancel: () => void
 }
 
@@ -47,11 +54,13 @@ export function createSmoothBottomChase(
 ): SmoothBottomChaseHandle {
   let raf: number | null = null
   let lastTop: number | null = null
+  let deadline = 0
 
   const park = () => {
     if (raf !== null) cancelAnimationFrame(raf)
     raf = null
     lastTop = null
+    deadline = 0
   }
 
   const step = () => {
@@ -71,7 +80,14 @@ export function createSmoothBottomChase(
     }
     const gap = target.getBottomTop() - top
     if (gap <= CHASE_REST_GAP) {
-      park()
+      // Within a kickUntil deadline, idle at rest instead of parking so
+      // trigger-less growth inside the window is still chased.
+      if (performance.now() >= deadline) {
+        park()
+        return
+      }
+      lastTop = top
+      raf = requestAnimationFrame(step)
       return
     }
     target.setTop(top + Math.max(1, gap * SMOOTH_CHASE_RATE))
@@ -97,6 +113,10 @@ export function createSmoothBottomChase(
   return {
     isActive: () => raf !== null,
     kick: start,
+    kickUntil: (durationMs: number) => {
+      deadline = Math.max(deadline, performance.now() + durationMs)
+      start()
+    },
     cancel: park,
   }
 }