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

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(