fix(mothership): stop-button transitions freeze in place (#5838)

* fix(mothership): freeze the transcript on user stop instead of settle-scrolling

* fix(mothership): swap stopped row into the shimmer slot and floor the sizer min-height

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

* improvement(mothership): net-zero settle — equal tail regions, drained floor, one growth signal

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

* fix(mothership): single stopped tail region and drain cleanup

* fix(mothership): clamp-aware chase interrupt so the floor drain can't park the settle follow

* fix(mothership): park the chase only on real upward top moves, not growth

* improvement(mothership): stack the stopped status above the actions row

* improvement(mothership): compact stopped-turn tail with the original 10px rhythm

* fix(mothership): single drain cadence and a settle-window gesture kill switch

* fix(mothership): debt-aware drain fast-path and settle-window handle retention

Author: TheodoreSpeaks

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

@@ -30,6 +30,14 @@ import { deriveMessagePhase, isToolDone, type MessagePhase } from './utils'
 const FILE_SUBAGENT_ID = 'file'
 /** Quiet period before the shimmer takes the slot back from streamed output. */
 const STREAM_IDLE_DELAY_MS = 1_500
+/**
+ * The vertical extent (10px gap + 36px row) shared by the shimmer slot and the
+ * actions row that replaces it at settle. The swap is only jump-free because
+ * these are equal; changing one side without the other reintroduces a scroll
+ * clamp at end of turn. (A stopped turn's stacked rows are exempt — their
+ * extra height is glided-in growth, not a swap.)
+ */
+const TAIL_REGION_CLASSES = 'mt-[10px] flex h-[36px] items-center'
 
 interface TextSegment {
   type: 'text'
@@ -853,8 +861,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)
@@ -905,13 +921,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
                   }
                 />
               )
@@ -943,22 +959,21 @@ function MessageContentInner({
                   <Options items={segment.items} onSelect={onOptionSelect} />
                 </div>
               )
+            // The stopped row renders in the tail region below, in the
+            // shimmer's place — a stop while the shimmer is visible must read
+            // as an in-place replacement, not the shimmer vanishing from the
+            // tail while a row mounts up here.
             case 'stopped':
-              return (
-                <div key={`stopped-${i}`} className='flex items-center gap-[8px]'>
-                  <CircleStop className='size-[16px] flex-shrink-0 text-[var(--text-icon)]' />
-                  <span className='text-[14px] text-[var(--text-body)]'>Stopped by user</span>
-                </div>
-              )
+              return null
           }
         })}
       </div>
       {thinkingExpanded && isLast ? (
         // Fixed-height placeholder for the NEXT piece of output: the shimmer
         // and arriving output trade places via opacity only, so mid-turn swaps
         // can't move layout. A sibling of the space-y stack (not a child), so
-        // it carries no stray sibling margin — pt-[10px] is its own gap.
-        <div aria-hidden={!showShimmer} className='pt-[10px]'>
+        // it carries no stray sibling margin.
+        <div aria-hidden={!showShimmer} className={TAIL_REGION_CLASSES}>
           <div
             className={cn(
               'transition-opacity duration-200 ease-out',
@@ -968,11 +983,22 @@ function MessageContentInner({
             <PendingTagIndicator label={thinkingLabel ?? 'Thinking…'} />
           </div>
         </div>
+      ) : // The settled tail takes the slot's place in the SAME render and at the
+      // SAME extent (TAIL_REGION_CLASSES), so the swap is height-neutral by
+      // construction — no reflow for the pinned scroller to absorb. A stopped
+      // turn instead stacks compact natural rows (10px gaps, no 36px boxes):
+      // its extra height is glided-in growth either way, so only the
+      // shimmer-swap occupant needs the fixed extent.
+      lastSegment?.type === 'stopped' ? (
+        <>
+          <div className='mt-[10px] flex items-center gap-[8px]'>
+            <CircleStop className='size-[16px] flex-shrink-0 text-[var(--text-icon)]' />
+            <span className='text-[14px] text-[var(--text-body)]'>Stopped by user</span>
+          </div>
+          {actions && <div className='mt-[10px]'>{actions}</div>}
+        </>
       ) : (
-        // The actions row takes the slot's place in the SAME render — a single
-        // ~10px reflow instead of a collapse the buttons would ride upward or a
-        // late mount the chase would visibly scroll to.
-        actions && <div className='mt-2.5'>{actions}</div>
+        actions && <div className={TAIL_REGION_CLASSES}>{actions}</div>
       )}
     </div>
   )

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

@@ -12,6 +12,7 @@ import {
 } from 'react'
 import { cn } from '@sim/emcn'
 import { defaultRangeExtractor, type Range, useVirtualizer } from '@tanstack/react-virtual'
+import { SMOOTH_CHASE_RATE } from '@/lib/core/utils/smooth-bottom-chase'
 import { MessageActions } from '@/app/workspace/[workspaceId]/components'
 import { ChatMessageAttachments } from '@/app/workspace/[workspaceId]/home/components/chat-message-attachments'
 import { ChatSurfaceProvider } from '@/app/workspace/[workspaceId]/home/components/chat-surface-context'
@@ -109,7 +110,7 @@ const UNSCROLLED = Symbol('unscrolled')
 const LAYOUT_STYLES = {
   'mothership-view': {
     scrollContainer:
-      'min-h-0 flex-1 overflow-y-auto overflow-x-hidden px-6 pt-4 pb-2 [scrollbar-gutter:stable_both-edges]',
+      'min-h-0 flex-1 overflow-y-auto overflow-x-hidden px-6 pt-4 pb-2 [overflow-anchor:none] [scrollbar-gutter:stable_both-edges]',
     sizer: 'relative mx-auto w-full max-w-[48rem]',
     rowGap: 'pb-6',
     userRow: 'flex flex-col items-end gap-[6px] pt-3',
@@ -120,7 +121,8 @@ const LAYOUT_STYLES = {
     footerInner: 'mx-auto max-w-[48rem]',
   },
   'copilot-view': {
-    scrollContainer: 'min-h-0 flex-1 overflow-y-auto overflow-x-hidden px-3 pt-2 pb-4',
+    scrollContainer:
+      'min-h-0 flex-1 overflow-y-auto overflow-x-hidden px-3 pt-2 pb-4 [overflow-anchor:none]',
     sizer: 'relative w-full',
     rowGap: 'pb-4',
     userRow: 'flex flex-col items-end gap-[6px] pt-2',
@@ -302,6 +304,9 @@ export function MothershipChat({
   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)
+  const floorDrainRafRef = useRef(0)
+  useEffect(() => () => cancelAnimationFrame(floorDrainRafRef.current), [])
 
   /**
    * Sizer floor while streaming: `scrollHeight` must never dip below the
@@ -318,16 +323,57 @@ export function MothershipChat({
    * Active on the same signal as auto-scroll: the reveal keeps re-parsing
    * markdown (and shrinking) after the network stream closes, so the floor
    * must hold through `lastRowAnimating` too.
+   *
+   * Release is DRAINED, not cliffed: while active the floor forbids
+   * scrollHeight from dropping, so permanent shrinks over the turn accrue as
+   * phantom space (debt). Clearing min-height in one commit released that
+   * whole debt as a single clamp — the end-of-turn downward jump. Instead the
+   * floor glides down to the natural size at the chase's rate; the browser's
+   * clamp follows a few px per frame, which reads as the same eased settle as
+   * the rest of the stream. Instant-clears when the debt is sub-pixel or the
+   * user isn't pinned (shrinking below-viewport space is invisible then).
    */
   const floorActive = isStreamActive || lastRowAnimating
   useLayoutEffect(() => {
     const sizer = sizerRef.current
     const el = scrollElementRef.current
     if (!sizer || !el) return
     if (!floorActive) {
-      sizer.style.minHeight = ''
+      if (sizerFloorAppliedRef.current === 0) return
+      // A drain already in flight keeps its own rAF cadence — settle-burst
+      // commits re-enter this branch and must not add extra steps in layout,
+      // which would accelerate the release past the eased rate.
+      if (floorDrainRafRef.current !== 0) return
+      scrollerPaddingRef.current = null
+      const drain = () => {
+        const target = virtualizer.getTotalSize()
+        const current = sizerFloorAppliedRef.current
+        if (current === 0) {
+          floorDrainRafRef.current = 0
+          return
+        }
+        // Instant-clear only when the whole remaining debt sits BELOW the
+        // viewport (debt ≤ distance-from-bottom) — then the shrink is
+        // invisible. A merely-unpinned viewport with debt larger than its
+        // slack would still clamp, so it keeps the eased drain instead.
+        const distance = el.scrollHeight - el.scrollTop - el.clientHeight
+        const debt = current - target
+        if (debt <= 1 || debt <= distance) {
+          sizerFloorAppliedRef.current = 0
+          floorDrainRafRef.current = 0
+          sizer.style.minHeight = ''
+          return
+        }
+        const next = Math.floor(current - Math.max(1, debt * SMOOTH_CHASE_RATE))
+        sizerFloorAppliedRef.current = next
+        sizer.style.minHeight = `${next}px`
+        floorDrainRafRef.current = requestAnimationFrame(drain)
+      }
+      floorDrainRafRef.current = requestAnimationFrame(drain)
       return
     }
+    cancelAnimationFrame(floorDrainRafRef.current)
+    floorDrainRafRef.current = 0
     if (!scrollerPaddingRef.current) {
       const style = getComputedStyle(el)
       scrollerPaddingRef.current = {
@@ -336,7 +382,21 @@ export function MothershipChat({
       }
     }
     const padding = scrollerPaddingRef.current
-    const floor = Math.max(0, el.scrollTop + el.clientHeight - padding.top - padding.bottom)
+    // Math.floor, not the raw float: a fractional min-height can round
+    // scrollHeight 1px ABOVE the scrolled-to extent, and that phantom 1px gap
+    // re-derives 1px higher after every chase step — a visible 1px/frame
+    // upward creep whenever the floor is what's holding scrollHeight.
+    const floor = Math.max(
+      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(