fix(chat): render subagent content as collapsible thinking blocks

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

@@ -5,6 +5,7 @@ import { ChevronDown } from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
 import type { ToolCallData } from '../../../../types'
 import { getAgentIcon } from '../../utils'
+import { SubagentThinkingBlock } from './subagent-thinking-block'
 import { ToolCallItem } from './tool-call-item'
 
 export type AgentGroupItem =
@@ -16,6 +17,8 @@ interface AgentGroupProps {
   agentLabel: string
   items: AgentGroupItem[]
   autoCollapse?: boolean
+  duration?: number
+  isStreaming?: boolean
 }
 
 const FADE_MS = 300
@@ -25,9 +28,18 @@ export function AgentGroup({
   agentLabel,
   items,
   autoCollapse = false,
+  duration,
+  isStreaming: isStreamingProp = false,
 }: AgentGroupProps) {
   const AgentIcon = getAgentIcon(agentName)
   const hasItems = items.length > 0
+  let lastTextIdx = -1
+  for (let i = items.length - 1; i >= 0; i--) {
+    if (items[i].type === 'text') {
+      lastTextIdx = i
+      break
+    }
+  }
   const toolItems = items.filter(
     (item): item is Extract<AgentGroupItem, { type: 'tool' }> => item.type === 'tool'
   )
@@ -100,12 +112,12 @@ export function AgentGroup({
                 status={item.data.status}
               />
             ) : (
-              <p
+              <SubagentThinkingBlock
                 key={`text-${idx}`}
-                className='whitespace-pre-wrap pl-[24px] font-base text-[13px] text-[var(--text-secondary)]'
-              >
-                {item.content.trim()}
-              </p>
+                content={item.content}
+                isStreaming={!!isStreamingProp && duration === undefined && idx === lastTextIdx}
+                duration={duration}
+              />
             )
           )}
         </div>

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/subagent-thinking-block.module.css

@@ -0,0 +1,26 @@
+@keyframes subagent-shimmer {
+  0% {
+    background-position: 150% 0;
+  }
+  50% {
+    background-position: 0% 0;
+  }
+  100% {
+    background-position: -150% 0;
+  }
+}
+
+.shimmer {
+  background-image: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0) 0%,
+    rgba(255, 255, 255, 0.85) 50%,
+    rgba(255, 255, 255, 0) 100%
+  );
+  background-size: 200% 100%;
+  background-repeat: no-repeat;
+  -webkit-background-clip: text;
+  background-clip: text;
+  animation: subagent-shimmer 1.4s ease-in-out infinite;
+  mix-blend-mode: screen;
+}

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/subagent-thinking-block.tsx

@@ -0,0 +1,156 @@
+'use client'
+
+import { memo, useEffect, useRef, useState } from 'react'
+import { ChevronDown } from '@/components/emcn'
+import { cn } from '@/lib/core/utils/cn'
+import { formatDuration } from '@/lib/core/utils/formatting'
+import styles from './subagent-thinking-block.module.css'
+
+const CHARS_PER_FRAME = 3
+const SCROLL_INTERVAL_MS = 50
+
+interface SubagentThinkingBlockProps {
+  content: string
+  isStreaming: boolean
+  duration?: number
+}
+
+/**
+ * Streams text character-by-character via rAF during streaming,
+ * then snaps to full content when done.
+ */
+const StreamingText = memo(
+  ({ content, isStreaming }: { content: string; isStreaming: boolean }) => {
+    const [displayed, setDisplayed] = useState(() => (isStreaming ? '' : content))
+    const contentRef = useRef(content)
+    const indexRef = useRef(isStreaming ? 0 : content.length)
+    const rafRef = useRef<number | null>(null)
+
+    useEffect(() => {
+      contentRef.current = content
+
+      if (!isStreaming) {
+        if (rafRef.current) cancelAnimationFrame(rafRef.current)
+        setDisplayed(content)
+        indexRef.current = content.length
+        return
+      }
+
+      if (indexRef.current >= content.length) return
+
+      const step = () => {
+        const cur = contentRef.current
+        const next = Math.min(indexRef.current + CHARS_PER_FRAME, cur.length)
+        indexRef.current = next
+        setDisplayed(cur.slice(0, next))
+        if (next < cur.length) {
+          rafRef.current = requestAnimationFrame(step)
+        }
+      }
+      rafRef.current = requestAnimationFrame(step)
+
+      return () => {
+        if (rafRef.current) cancelAnimationFrame(rafRef.current)
+      }
+    }, [content, isStreaming])
+
+    return (
+      <p className='whitespace-pre-wrap text-[12px] leading-[1.4] text-[var(--text-muted)]'>
+        {displayed}
+      </p>
+    )
+  },
+  (prev, next) => prev.content === next.content && prev.isStreaming === next.isStreaming
+)
+StreamingText.displayName = 'StreamingText'
+
+/**
+ * Collapsible thinking block for subagent content in the home chat.
+ *
+ * Streaming: "Thinking" shimmer label, auto-expands with scrolling carousel.
+ * Done: collapses to "Thought for Xs", click to re-expand.
+ */
+export function SubagentThinkingBlock({
+  content,
+  isStreaming,
+  duration,
+}: SubagentThinkingBlockProps) {
+  const trimmed = content.trim()
+  const hasContent = trimmed.length > 0
+
+  const [expanded, setExpanded] = useState(false)
+  const userCollapsedRef = useRef(false)
+  const scrollRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (isStreaming && hasContent && !userCollapsedRef.current) {
+      setExpanded(true)
+    }
+    if (!isStreaming) {
+      setExpanded(false)
+      // Reset so the next streaming session auto-expands by default
+      userCollapsedRef.current = false
+    }
+  }, [isStreaming, hasContent])
+
+  useEffect(() => {
+    if (!isStreaming || !expanded) return
+    const id = window.setInterval(() => {
+      const el = scrollRef.current
+      if (el) el.scrollTop = el.scrollHeight
+    }, SCROLL_INTERVAL_MS)
+    return () => window.clearInterval(id)
+  }, [isStreaming, expanded])
+
+  const toggle = () => {
+    setExpanded((v) => {
+      const next = !v
+      if (!next && isStreaming) userCollapsedRef.current = true
+      return next
+    })
+  }
+
+  const roundedMs = duration != null ? Math.max(1000, Math.round(duration / 1000) * 1000) : null
+  const label = isStreaming ? 'Thinking' : `Thought for ${formatDuration(roundedMs) ?? '…'}`
+
+  return (
+    <div className='pl-[24px]'>
+      <button
+        type='button'
+        onClick={toggle}
+        disabled={!hasContent && !isStreaming}
+        className='group inline-flex items-center gap-1 text-left text-[13px] text-[var(--text-secondary)] transition-colors hover:text-[var(--text-primary)]'
+      >
+        <span className='relative inline-block'>
+          <span className='text-[var(--text-tertiary)]'>{label}</span>
+          {isStreaming && (
+            <span
+              aria-hidden='true'
+              className='pointer-events-none absolute inset-0 select-none overflow-hidden'
+            >
+              <span className={cn('block text-transparent', styles.shimmer)}>{label}</span>
+            </span>
+          )}
+        </span>
+        {hasContent && (
+          <ChevronDown
+            className={cn(
+              'h-[7px] w-[9px] transition-all group-hover:opacity-100',
+              expanded ? 'opacity-100' : '-rotate-90 opacity-0'
+            )}
+          />
+        )}
+      </button>
+
+      <div
+        ref={scrollRef}
+        className={cn(
+          'overflow-y-auto transition-all duration-150 ease-out',
+          expanded ? 'mt-1 max-h-[150px] opacity-100' : 'max-h-0 opacity-0'
+        )}
+      >
+        <StreamingText content={trimmed} isStreaming={isStreaming} />
+      </div>
+    </div>
+  )
+}

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

@@ -16,6 +16,7 @@ interface AgentGroupSegment {
   agentName: string
   agentLabel: string
   items: AgentGroupItem[]
+  duration?: number
 }
 
 interface OptionsSegment {
@@ -94,7 +95,10 @@ function parseBlocks(blocks: ContentBlock[]): MessageSegment[] {
     if (block.type === 'subagent') {
       if (!block.content) continue
       const key = block.content
-      if (group && group.agentName === key) continue
+      if (group && group.agentName === key) {
+        if (block.duration != null) group.duration = block.duration
+        continue
+      }
       if (group) {
         segments.push(group)
         group = null
@@ -105,6 +109,7 @@ function parseBlocks(blocks: ContentBlock[]): MessageSegment[] {
         agentName: key,
         agentLabel: resolveAgentLabel(key),
         items: [],
+        duration: block.duration,
       }
       continue
     }
@@ -246,6 +251,8 @@ export function MessageContent({
                   agentLabel={segment.agentLabel}
                   items={segment.items}
                   autoCollapse={allToolsDone && hasFollowingText}
+                  duration={segment.duration}
+                  isStreaming={isStreaming}
                 />
               </div>
             )