fix(ui): thinking loader and rool names

Author: Sg312

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

@@ -310,6 +310,8 @@ interface ChatContentProps {
   onOptionSelect?: (id: string) => void
   onWorkspaceResourceSelect?: (resource: MothershipResource) => void
   onRevealStateChange?: (isRevealing: boolean) => void
+  /** Reports whether this segment is actively painting text or its own pending-tag indicator. */
+  onStreamActivityChange?: (active: boolean) => void
 }
 
 function ChatContentInner({
@@ -319,6 +321,7 @@ function ChatContentInner({
   onOptionSelect,
   onWorkspaceResourceSelect,
   onRevealStateChange,
+  onStreamActivityChange,
 }: ChatContentProps) {
   const onWorkspaceResourceSelectRef = useRef(onWorkspaceResourceSelect)
   onWorkspaceResourceSelectRef.current = onWorkspaceResourceSelect
@@ -328,7 +331,8 @@ function ChatContentInner({
 
   const displayContent = useMemo(() => sanitizeChatDisplayContent(content), [content])
   const streamedContent = useSmoothText(displayContent, isStreaming)
-  const isRevealing = isStreaming || streamedContent.length < displayContent.length
+  const hasRevealBacklog = streamedContent.length < displayContent.length
+  const isRevealing = isStreaming || hasRevealBacklog
 
   useEffect(() => {
     onRevealStateChangeRef.current?.(isRevealing)
@@ -438,6 +442,12 @@ function ChatContentInner({
     () => parseSpecialTags(streamedContent, isRevealing),
     [streamedContent, isRevealing]
   )
+  const hasPendingIndicator = parsed.hasPendingTag && isRevealing
+
+  useEffect(() => {
+    onStreamActivityChange?.(hasRevealBacklog || hasPendingIndicator)
+    return () => onStreamActivityChange?.(false)
+  }, [hasPendingIndicator, hasRevealBacklog, onStreamActivityChange])
 
   type BlockSegment = Exclude<
     ContentSegment,
@@ -524,7 +534,7 @@ function ChatContentInner({
           />
         )
       })}
-      {parsed.hasPendingTag && isRevealing && <PendingTagIndicator />}
+      {hasPendingIndicator && <PendingTagIndicator />}
     </div>
   )
 }

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

@@ -6,6 +6,7 @@ import type { ContentBlock } from '../../types'
 import {
   assistantMessageHasRunningWork,
   parseBlocks,
+  shouldShowTrailingThinking,
   shouldSmoothTextSegment,
 } from './message-content'
 
@@ -40,6 +41,35 @@ function mainToolCall(id: string, name: string): ContentBlock {
 }
 
 describe('parseBlocks span-identity tree', () => {
+  it('refines a completed credential rename with its previous and new names', () => {
+    const segments = parseBlocks([
+      {
+        type: 'tool_call',
+        toolCall: {
+          id: 'rename-credential',
+          name: 'manage_credential',
+          status: 'success',
+          params: { operation: 'rename', displayName: 'Production Stripe' },
+          result: {
+            success: true,
+            output: {
+              previousDisplayName: 'Stripe',
+              displayName: 'Production Stripe',
+            },
+          },
+        },
+        timestamp: 1,
+      },
+    ])
+
+    expect(segments).toHaveLength(1)
+    const group = segments[0]
+    if (group.type !== 'agent_group') throw new Error('expected mothership group')
+    const tool = group.items[0]
+    if (tool?.type !== 'tool') throw new Error('expected credential tool')
+    expect(tool.data.displayTitle).toBe('Renaming Stripe to Production Stripe')
+  })
+
   it('nests a deploy subagent inside the workflow subagent that spawned it', () => {
     const blocks: ContentBlock[] = [
       subagentStart('workflow', 'S1', 'main'),
@@ -338,6 +368,62 @@ describe('shouldSmoothTextSegment', () => {
   })
 })
 
+describe('shouldShowTrailingThinking', () => {
+  it('shows one turn-level indicator while an open subagent waits between completed steps', () => {
+    expect(
+      shouldShowTrailingThinking({
+        isStreaming: true,
+        isStreamIdle: true,
+        isRenderingStream: false,
+        hasExecutingTool: false,
+        lastSegmentType: 'agent_group',
+      })
+    ).toBe(true)
+  })
+
+  it('stays hidden while a chunk is rendering or before the stream becomes idle', () => {
+    expect(
+      shouldShowTrailingThinking({
+        isStreaming: true,
+        isStreamIdle: true,
+        isRenderingStream: true,
+        hasExecutingTool: false,
+        lastSegmentType: 'text',
+      })
+    ).toBe(false)
+    expect(
+      shouldShowTrailingThinking({
+        isStreaming: true,
+        isStreamIdle: false,
+        isRenderingStream: false,
+        hasExecutingTool: false,
+        lastSegmentType: 'agent_group',
+      })
+    ).toBe(false)
+  })
+
+  it('does not duplicate an executing tool row or survive a stopped turn', () => {
+    expect(
+      shouldShowTrailingThinking({
+        isStreaming: true,
+        isStreamIdle: true,
+        isRenderingStream: false,
+        hasExecutingTool: true,
+        lastSegmentType: 'agent_group',
+      })
+    ).toBe(false)
+    expect(
+      shouldShowTrailingThinking({
+        isStreaming: true,
+        isStreamIdle: true,
+        isRenderingStream: false,
+        hasExecutingTool: false,
+        lastSegmentType: 'stopped',
+      })
+    ).toBe(false)
+  })
+})
+
 describe('parseBlocks legacy — thinking between top-level tools', () => {
   it('keeps consecutive mothership tools in one group across intervening thinking', () => {
     const blocks: ContentBlock[] = [

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

@@ -1,6 +1,6 @@
 'use client'
 
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
 import { Read as ReadTool, WorkspaceFile } from '@/lib/copilot/generated/tool-catalog-v1'
 import { isToolHiddenInUi } from '@/lib/copilot/tools/client/hidden-tools'
 import { resolveToolDisplay } from '@/lib/copilot/tools/client/store-utils'
@@ -14,6 +14,7 @@ import { AgentGroup, ChatContent, CircleStop, Options, PendingTagIndicator } fro
 import { deriveMessagePhase, isToolDone, type MessagePhase } from './utils'
 
 const FILE_SUBAGENT_ID = 'file'
+const STREAM_IDLE_DELAY_MS = 1_500
 
 interface TextSegment {
   type: 'text'
@@ -96,6 +97,17 @@ function getOverrideDisplayTitle(tc: NonNullable<ContentBlock['toolCall']>): str
   if (tc.name === ReadTool.id || tc.name === 'respond' || tc.name.endsWith('_respond')) {
     return resolveToolDisplay(tc.name, mapToolStatusToClientState(tc.status), tc.params)?.text
   }
+  if (tc.name === 'manage_credential' && tc.params?.operation === 'rename') {
+    const output = tc.result?.output
+    const result = output && typeof output === 'object' ? (output as Record<string, unknown>) : null
+    const previousDisplayName = result?.previousDisplayName
+    if (typeof previousDisplayName === 'string' && previousDisplayName.trim()) {
+      return getToolDisplayTitle(tc.name, {
+        ...tc.params,
+        previousDisplayName: previousDisplayName.trim(),
+      })
+    }
+  }
   return undefined
 }
 
@@ -734,6 +746,28 @@ export function shouldSmoothTextSegment({
   return isStreaming && segmentIndex === segmentCount - 1
 }
 
+export function shouldShowTrailingThinking({
+  isStreaming,
+  isStreamIdle,
+  isRenderingStream,
+  hasExecutingTool,
+  lastSegmentType,
+}: {
+  isStreaming: boolean
+  isStreamIdle: boolean
+  isRenderingStream: boolean
+  hasExecutingTool: boolean
+  lastSegmentType?: 'text' | 'agent_group' | 'options' | 'stopped'
+}): boolean {
+  return (
+    isStreaming &&
+    isStreamIdle &&
+    !isRenderingStream &&
+    !hasExecutingTool &&
+    lastSegmentType !== 'stopped'
+  )
+}
+
 interface MessageContentProps {
   blocks: ContentBlock[]
   fallbackContent: string
@@ -759,6 +793,25 @@ function MessageContentInner({
   const handleTrailingRevealChange = useCallback((revealing: boolean) => {
     setTrailingRevealing(revealing)
   }, [])
+  const [trailingStreamActivity, setTrailingStreamActivity] = useState(false)
+  const handleTrailingStreamActivityChange = useCallback((active: boolean) => {
+    setTrailingStreamActivity(active)
+  }, [])
+  const [isStreamIdle, setIsStreamIdle] = useState(false)
+
+  // Every rendered stream snapshot restarts the quiet-period clock. A layout
+  // effect clears an already-visible indicator before paint, so a chunk from
+  // any parallel lane hides the one turn-level loader without a stale flash.
+  useLayoutEffect(() => {
+    if (!isStreaming) {
+      setIsStreamIdle(false)
+      return
+    }
+
+    setIsStreamIdle(false)
+    const timeout = setTimeout(() => setIsStreamIdle(true), STREAM_IDLE_DELAY_MS)
+    return () => clearTimeout(timeout)
+  }, [blocks, fallbackContent, isStreaming])
 
   const segments: MessageSegment[] =
     parsed.length > 0
@@ -789,14 +842,18 @@ function MessageContentInner({
     return null
   }
 
-  const hasTrailingContent = lastSegment.type === 'text' || lastSegment.type === 'stopped'
-
-  // Deterministic "between steps" signal: the turn is still streaming, nothing
-  // is actively running (a running tool/subagent renders its own spinner), and
-  // no trailing text is being revealed. Derived from explicit node state rather
-  // than guessing from the shape of the last segment.
-  const hasRunningWork = assistantMessageHasRunningWork(blocks)
-  const showTrailingThinking = phase === 'streaming' && !hasTrailingContent && !hasRunningWork
+  // Executing tools already render an active row. An open subagent lane does
+  // not suppress the turn-level indicator: once its latest visible chunk has
+  // settled, the loader can bridge the wait until that lane (or a parallel
+  // sibling) emits again.
+  const hasExecutingTool = blocks.some((b) => b.toolCall?.status === 'executing')
+  const showTrailingThinking = shouldShowTrailingThinking({
+    isStreaming: phase === 'streaming',
+    isStreamIdle,
+    isRenderingStream: trailingStreamActivity,
+    hasExecutingTool,
+    lastSegmentType: lastSegment.type,
+  })
 
   return (
     <div className='space-y-[10px]'>
@@ -818,6 +875,9 @@ function MessageContentInner({
                 onRevealStateChange={
                   i === segments.length - 1 ? handleTrailingRevealChange : undefined
                 }
+                onStreamActivityChange={
+                  i === segments.length - 1 ? handleTrailingStreamActivityChange : undefined
+                }
               />
             )
           case 'agent_group': {
@@ -854,11 +914,7 @@ function MessageContentInner({
             )
         }
       })}
-      {showTrailingThinking && (
-        <div className='animate-stream-fade-in-delayed opacity-0'>
-          <PendingTagIndicator />
-        </div>
-      )}
+      {showTrailingThinking && <PendingTagIndicator />}
     </div>
   )
 }