fix(mothership): detach auto-scroll on stop and dead-band the sizer floor

Author: TheodoreSpeaks

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

@@ -299,24 +299,22 @@ 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
+  )
   /**
-   * True from the stop button until the next stream: a stopped turn must not
-   * settle-scroll — the user asked everything to freeze, and following the
-   * stopped-row/actions mount nudges the transcript up right after they did.
+   * 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 stopRequestedRef = useRef(false)
   const handleStopGeneration = useCallback(() => {
-    stopRequestedRef.current = true
+    detachAutoScroll()
     onStopGeneration()
-  }, [onStopGeneration])
-  useEffect(() => {
-    if (isStreamActive) stopRequestedRef.current = false
-  }, [isStreamActive])
-  const { ref: autoScrollRef } = useAutoScroll(isStreamActive || lastRowAnimating, {
-    shouldFollowSettle: () => !stopRequestedRef.current,
-  })
+  }, [detachAutoScroll, onStopGeneration])
   const sizerRef = useRef<HTMLDivElement | null>(null)
   const scrollerPaddingRef = useRef<{ top: number; bottom: number } | null>(null)
+  const sizerFloorAppliedRef = useRef(0)
 
   /**
    * Sizer floor while streaming: `scrollHeight` must never dip below the
@@ -340,6 +338,7 @@ export function MothershipChat({
     const el = scrollElementRef.current
     if (!sizer || !el) return
     if (!floorActive) {
+      sizerFloorAppliedRef.current = 0
       sizer.style.minHeight = ''
       return
     }
@@ -359,6 +358,13 @@ export function MothershipChat({
       0,
       Math.floor(el.scrollTop + el.clientHeight - padding.top - padding.bottom)
     )
+    // Dead-band: the floor feeds back into its own inputs (a floored value can
+    // land a fraction BELOW the extent, the browser clamps scrollTop, and the
+    // next commit re-derives from the clamped position — a visible ~1px×N
+    // downward cascade on fractional-scrollTop displays). Sub-pixel deltas are
+    // rounding noise from that loop, never real growth; only apply real moves.
+    if (Math.abs(floor - sizerFloorAppliedRef.current) <= 1) return
+    sizerFloorAppliedRef.current = floor
     sizer.style.minHeight = `${floor}px`
   })
   const setScrollElement = useCallback(

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

@@ -39,12 +39,6 @@ const POST_STREAM_SETTLE_WINDOW = 300
 
 interface UseAutoScrollOptions {
   scrollOnMount?: boolean
-  /**
-   * Consulted at stream teardown; return false to skip the post-stream settle
-   * follow. A user-initiated stop means "freeze" — chasing the stopped-row and
-   * actions mount would visibly nudge the transcript the user just halted.
-   */
-  shouldFollowSettle?: () => boolean
 }
 
 /**
@@ -56,17 +50,18 @@ interface UseAutoScrollOptions {
  * 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 `scrollToBottom`
- * for imperative use after layout-changing events like panel expansion.
+ * Returns `ref` (callback ref for the scroll container), `scrollToBottom` for
+ * imperative use after layout-changing events like panel expansion, 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.
  */
 export function useAutoScroll(
   isStreaming: boolean,
-  { scrollOnMount = false, shouldFollowSettle }: UseAutoScrollOptions = {}
+  { scrollOnMount = false }: UseAutoScrollOptions = {}
 ) {
   const containerRef = useRef<HTMLDivElement>(null)
   const stickyRef = useRef(true)
-  const shouldFollowSettleRef = useRef(shouldFollowSettle)
-  shouldFollowSettleRef.current = shouldFollowSettle
   const userDetachedRef = useRef(false)
   const prevScrollTopRef = useRef(0)
   const prevScrollHeightRef = useRef(0)
@@ -91,6 +86,11 @@ export function useAutoScroll(
     el.scrollTop = el.scrollHeight
   }, [])
 
+  const detach = useCallback(() => {
+    stickyRef.current = false
+    userDetachedRef.current = true
+  }, [])
+
   const callbackRef = useCallback((el: HTMLDivElement | null) => {
     containerRef.current = el
     if (el && scrollOnMountRef.current) el.scrollTop = el.scrollHeight
@@ -244,12 +244,11 @@ export function useAutoScroll(
       lastUserGestureAtRef.current = Number.NEGATIVE_INFINITY
       // End-of-turn content mounts just after teardown; follow it briefly. The
       // chase's own upward-move interrupt still protects a real user scroll
-      // even with the gesture listeners gone.
-      if (shouldFollowSettleRef.current?.() !== false) {
-        chase.kickUntil(POST_STREAM_SETTLE_WINDOW)
-      }
+      // even with the gesture listeners gone, and the per-frame sticky check
+      // makes this a no-op after a detach().
+      chase.kickUntil(POST_STREAM_SETTLE_WINDOW)
     }
   }, [isStreaming, scrollToBottom])
 
-  return { ref: callbackRef, scrollToBottom }
+  return { ref: callbackRef, scrollToBottom, detach }
 }