improvement(mothership): swap actions into the thinking slot at settle, quicken the chase

Author: TheodoreSpeaks

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

@@ -1,6 +1,15 @@
 'use client'
 
-import { memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
+import {
+  memo,
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 import { cn } from '@sim/emcn'
 import { Read as ReadTool, WorkspaceFile } from '@/lib/copilot/generated/tool-catalog-v1'
 import { isToolHiddenInUi } from '@/lib/copilot/tools/client/hidden-tools'
@@ -21,8 +30,6 @@ 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
-/** Unmount the loader after the slot's 300ms collapse, with margin. */
-const SLOT_EXIT_DELAY_MS = 400
 
 interface TextSegment {
   type: 'text'
@@ -785,6 +792,14 @@ interface MessageContentProps {
   onOptionSelect?: (id: string) => void
   onQuestionDismiss?: () => void
   onPhaseChange?: (phase: MessagePhase) => void
+  /**
+   * The message's actions row (copy/thumbs). Rendered here, in the thinking
+   * slot's position, so at settle the shimmer and the actions trade places in
+   * one render — a single tiny reflow instead of a collapse the buttons ride
+   * or a late mount the chase visibly scrolls to. The caller gates it on
+   * content/question eligibility only; the settle timing is owned here.
+   */
+  actions?: ReactNode
 }
 
 function MessageContentInner({
@@ -796,6 +811,7 @@ function MessageContentInner({
   onOptionSelect,
   onQuestionDismiss,
   onPhaseChange,
+  actions,
 }: MessageContentProps) {
   const { onWorkspaceResourceSelect } = useChatSurface()
   const parsed = useMemo(() => (blocks.length > 0 ? parseBlocks(blocks) : []), [blocks])
@@ -813,16 +829,6 @@ function MessageContentInner({
     setTrailingPendingTag(pending)
   }, [])
   const [isStreamIdle, setIsStreamIdle] = useState(false)
-  /**
-   * True once the slot's collapse has finished (seeded true so a settled mount
-   * never runs the loader). The loader must stay mounted through the collapse:
-   * with `grid-rows` transitioning 1fr→0fr, unmounting the content in the same
-   * flip zeroes the track instantly — the slot snaps instead of sliding out,
-   * clamping `scrollTop` at settle. Timed rather than transitionend-latched:
-   * motion-reduce (`transition-none`) and browsers that can't animate
-   * `grid-template-rows` never fire the event.
-   */
-  const [slotExited, setSlotExited] = useState(true)
 
   const segments: MessageSegment[] =
     parsed.length > 0
@@ -864,15 +870,6 @@ function MessageContentInner({
   // winking out early while everything shifts.
   const thinkingExpanded = phase !== 'settled' && lastSegment?.type !== 'stopped'
 
-  useEffect(() => {
-    if (thinkingExpanded) return
-    const timeout = setTimeout(() => setSlotExited(true), SLOT_EXIT_DELAY_MS)
-    return () => clearTimeout(timeout)
-  }, [thinkingExpanded])
-
-  // Guarded render adjust (see sim-hooks): a live turn re-arms the exit latch.
-  if (thinkingExpanded && slotExited) setSlotExited(false)
-
   if (segments.length === 0 && !isLast) return null
 
   // A visible executing tool row already spins — the turn-level shimmer would
@@ -956,37 +953,26 @@ function MessageContentInner({
           }
         })}
       </div>
-      {isLast && (
+      {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; the grid-rows collapse slides it out once, at
-        // settle. A sibling of the space-y stack (not a child), so collapsed
-        // it carries no leftover sibling margin — pt-[10px] is its own gap.
-        <div
-          aria-hidden={!showShimmer}
-          className={cn(
-            'grid transition-[grid-template-rows,opacity] duration-300 ease-out motion-reduce:transition-none',
-            thinkingExpanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'
-          )}
-        >
-          <div className='overflow-hidden'>
-            <div
-              className={cn(
-                'pt-[10px] transition-transform duration-300 ease-out motion-reduce:transition-none',
-                thinkingExpanded ? 'translate-y-0' : 'translate-y-[8px]'
-              )}
-            >
-              <div
-                className={cn(
-                  'transition-opacity duration-200 ease-out',
-                  showShimmer ? 'opacity-100' : 'opacity-0'
-                )}
-              >
-                {!slotExited && <PendingTagIndicator label={thinkingLabel ?? 'Thinking…'} />}
-              </div>
-            </div>
+        // 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]'>
+          <div
+            className={cn(
+              'transition-opacity duration-200 ease-out',
+              showShimmer ? 'opacity-100' : 'opacity-0'
+            )}
+          >
+            <PendingTagIndicator label={thinkingLabel ?? 'Thinking…'} />
           </div>
         </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>
       )}
     </div>
   )

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

@@ -219,8 +219,11 @@ const AssistantMessageRow = memo(function AssistantMessageRow({
   const handleQuestionDismiss = () => {
     if (questionTag) setDismissedQuestionTag(questionTag)
   }
-  const showActions = shouldShowAssistantMessageActions({
-    phase,
+  // Settle timing lives in MessageContent (the actions take the thinking
+  // slot's place in the same render), so eligibility here is phase-free:
+  // `phase: 'settled'` asks the helper "would a settled turn show them?".
+  const actionsEligible = shouldShowAssistantMessageActions({
+    phase: 'settled',
     hasContent: Boolean(message.content) || hasAnyBlocks,
     endsWithQuestion,
     questionDismissed,
@@ -237,17 +240,17 @@ const AssistantMessageRow = memo(function AssistantMessageRow({
         onOptionSelect={onOptionSelect}
         onQuestionDismiss={handleQuestionDismiss}
         onPhaseChange={setPhase}
+        actions={
+          actionsEligible ? (
+            <MessageActions
+              content={message.content}
+              userQuery={precedingUserContent}
+              requestId={message.requestId}
+              messageId={message.id}
+            />
+          ) : undefined
+        }
       />
-      {showActions && (
-        <div className='mt-2.5'>
-          <MessageActions
-            content={message.content}
-            userQuery={precedingUserContent}
-            requestId={message.requestId}
-            messageId={message.id}
-          />
-        </div>
-      )}
     </div>
   )
 })

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

@@ -30,9 +30,10 @@ const ANIMATION_FOLLOW_WINDOW = 500
 /**
  * How long to keep chasing the bottom after streaming stops. End-of-turn content
  * mounts just after `isStreaming` flips false — the suggested-follow-up options,
- * the actions row (gated on `!isStreaming`), and the virtualizer's re-measure of
- * the grown row — so a single final scroll fires before it lays out and leaves it
- * clipped behind the input. Following for a short window pulls it into view.
+ * the actions row (swapped into the thinking slot's place), and the
+ * virtualizer's re-measure of the grown row — so a single final scroll fires
+ * before it lays out and leaves it clipped behind the input. Following for a
+ * short window pulls it into view.
  */
 const POST_STREAM_SETTLE_WINDOW = 300
 

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

@@ -2,12 +2,12 @@
  * Fraction of the remaining gap to close per frame while chasing the bottom —
  * an exponential glide (originating in the subagent viewport's stick-to-bottom,
  * see BoundedViewport in agent-group.tsx) instead of snapping `scrollTop` to
- * `scrollHeight` on every content append. Closes ~90% of any gap within ~18
- * frames (~300ms) — deliberately lazier than the subagent viewport's 0.18 so a
- * large content burst reads as a calm upward drift of the transcript rather
+ * `scrollHeight` on every content append. Closes ~90% of any gap within ~13
+ * frames (~220ms) — slightly lazier than the subagent viewport's 0.18 so a
+ * large content burst reads as a brisk upward drift of the transcript rather
  * than a lurch.
  */
-export const SMOOTH_CHASE_RATE = 0.12
+export const SMOOTH_CHASE_RATE = 0.16
 
 /** Gap (px) below which the chase parks until new growth reopens it. */
 export const CHASE_REST_GAP = 0.5