progress on streaming refactor

Author: icecrasher321

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

@@ -0,0 +1,71 @@
+/**
+ * @vitest-environment node
+ */
+import { describe, expect, it } from 'vitest'
+import type { ToolCallData, ToolCallStatus } from '../../../../types'
+import type { AgentGroupItem } from './agent-group'
+import { isAgentGroupResolved } from './agent-group'
+
+let toolSeq = 0
+
+function tool(status: ToolCallStatus): AgentGroupItem {
+  toolSeq += 1
+  const data: ToolCallData = {
+    id: `tool-${toolSeq}`,
+    toolName: 'grep',
+    displayTitle: 'Searching',
+    status,
+  }
+  return { type: 'tool', data }
+}
+
+function text(content: string): AgentGroupItem {
+  return { type: 'text', content }
+}
+
+function group(items: AgentGroupItem[], isDelegating = false): AgentGroupItem {
+  return {
+    type: 'agent_group',
+    group: {
+      id: `group-${toolSeq}`,
+      agentName: 'deploy',
+      agentLabel: 'Deploy',
+      items,
+      isDelegating,
+      isOpen: true,
+    },
+  }
+}
+
+describe('isAgentGroupResolved', () => {
+  it('is unresolved when there is no work yet', () => {
+    expect(isAgentGroupResolved([])).toBe(false)
+    expect(isAgentGroupResolved([text('thinking...')])).toBe(false)
+  })
+
+  it('resolves once every own tool is terminal', () => {
+    expect(isAgentGroupResolved([tool('success')])).toBe(true)
+    expect(isAgentGroupResolved([tool('success'), tool('error')])).toBe(true)
+  })
+
+  it('stays unresolved while any own tool is still executing', () => {
+    expect(isAgentGroupResolved([tool('success'), tool('executing')])).toBe(false)
+  })
+
+  it('resolves a parent whose only work is a finished child group', () => {
+    expect(isAgentGroupResolved([group([tool('success')])])).toBe(true)
+  })
+
+  it('stays unresolved while a nested child is still delegating', () => {
+    expect(isAgentGroupResolved([group([], true)])).toBe(false)
+  })
+
+  it('stays unresolved while a nested child has an executing tool', () => {
+    expect(isAgentGroupResolved([group([tool('executing')])])).toBe(false)
+  })
+
+  it('resolves deep nesting only when every descendant is terminal', () => {
+    expect(isAgentGroupResolved([group([group([tool('success')])])])).toBe(true)
+    expect(isAgentGroupResolved([group([group([tool('executing')])])])).toBe(false)
+  })
+})

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

@@ -4,7 +4,7 @@ import { useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { ChevronDown, Expandable, ExpandableContent, PillsRing } from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
 import type { ToolCallData } from '../../../../types'
-import { getAgentIcon } from '../../utils'
+import { getAgentIcon, isToolDone } from '../../utils'
 import { ToolCallItem } from './tool-call-item'
 
 /**
@@ -35,15 +35,18 @@ interface AgentGroupProps {
   defaultExpanded?: boolean
 }
 
-function isToolDone(status: ToolCallData['status']): boolean {
-  return (
-    status === 'success' ||
-    status === 'error' ||
-    status === 'cancelled' ||
-    status === 'skipped' ||
-    status === 'rejected' ||
-    status === 'interrupted'
-  )
+export function isAgentGroupResolved(items: AgentGroupItem[]): boolean {
+  let hasWork = false
+  for (const item of items) {
+    if (item.type === 'tool') {
+      hasWork = true
+      if (!isToolDone(item.data.status)) return false
+    } else if (item.type === 'agent_group') {
+      hasWork = true
+      if (item.group.isDelegating || !isAgentGroupResolved(item.group.items)) return false
+    }
+  }
+  return hasWork
 }
 
 export function AgentGroup({
@@ -56,20 +59,18 @@ export function AgentGroup({
 }: AgentGroupProps) {
   const AgentIcon = getAgentIcon(agentName)
   const hasItems = items.length > 0
-  const toolItems = items.filter(
-    (item): item is Extract<AgentGroupItem, { type: 'tool' }> => item.type === 'tool'
-  )
-  const allDone = toolItems.length > 0 && toolItems.every((t) => isToolDone(t.data.status))
-  // Only a live turn can be delegating. Once the turn is terminal (complete,
-  // errored, or stopped) no subagent should spin — even one aborted before its
-  // first tool call, where `allDone` is false because there are no tools yet.
-  const showDelegatingSpinner = isStreaming && isDelegating && !allDone
+  const resolved = isAgentGroupResolved(items)
+  // Pure projection of the run's own state: a subagent header spins while it is
+  // delegating with no resolved work yet. A terminal turn closes the lane (its
+  // subagent block is stamped ended), which clears `isDelegating`, so no
+  // transport gating is needed to stop an aborted-before-first-tool spinner.
+  const showDelegatingSpinner = isDelegating && !resolved
 
   // Expand only while the turn is live and the group is still open or working.
   // Once the turn ends (isStreaming false) — or a subagent closes mid-turn — the
   // group auto-collapses, so finished subagent blocks never stay expanded. A
   // manual toggle pins the choice for the rest of the message.
-  const autoExpanded = isStreaming && (defaultExpanded || !allDone)
+  const autoExpanded = isStreaming && (defaultExpanded || !resolved)
   const [manualExpanded, setManualExpanded] = useState<boolean | null>(null)
   const expanded = manualExpanded ?? autoExpanded
 

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

@@ -1,3 +1,3 @@
 export type { AgentGroupItem, NestedAgentGroup } from './agent-group'
-export { AgentGroup } from './agent-group'
+export { AgentGroup, isAgentGroupResolved } from './agent-group'
 export { CircleStop } from './tool-call-item'

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

@@ -2,7 +2,7 @@ import { useMemo } from 'react'
 import { PillsRing } from '@/components/emcn'
 import { WorkspaceFile } from '@/lib/copilot/generated/tool-catalog-v1'
 import type { ToolCallStatus } from '../../../../types'
-import { getToolIcon } from '../../utils'
+import { getToolIcon, resolveToolDisplayState } from '../../utils'
 
 function CircleCheck({ className }: { className?: string }) {
   return (
@@ -58,13 +58,14 @@ function Hyphen({ className }: { className?: string }) {
 }
 
 function StatusIcon({ status, toolName }: { status: ToolCallStatus; toolName: string }) {
-  if (status === 'executing') {
+  const display = resolveToolDisplayState(status)
+  if (display === 'spinner') {
     return <PillsRing className='size-[15px] text-[var(--text-tertiary)]' animate />
   }
-  if (status === 'cancelled') {
+  if (display === 'cancelled') {
     return <CircleStop className='size-[15px] text-[var(--text-tertiary)]' />
   }
-  if (status === 'interrupted') {
+  if (display === 'interrupted') {
     return <Hyphen className='size-[15px] text-[var(--text-tertiary)]' />
   }
   const Icon = getToolIcon(toolName)

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

@@ -279,21 +279,30 @@ interface ChatContentProps {
   isStreaming?: boolean
   onOptionSelect?: (id: string) => void
   onWorkspaceResourceSelect?: (resource: MothershipResource) => void
+  onRevealStateChange?: (isRevealing: boolean) => void
 }
 
 function ChatContentInner({
   content,
   isStreaming = false,
   onOptionSelect,
   onWorkspaceResourceSelect,
+  onRevealStateChange,
 }: ChatContentProps) {
   const onWorkspaceResourceSelectRef = useRef(onWorkspaceResourceSelect)
   onWorkspaceResourceSelectRef.current = onWorkspaceResourceSelect
 
+  const onRevealStateChangeRef = useRef(onRevealStateChange)
+  onRevealStateChangeRef.current = onRevealStateChange
+
   const displayContent = useMemo(() => sanitizeChatDisplayContent(content), [content])
   const streamedContent = useSmoothText(displayContent, isStreaming)
   const isRevealing = isStreaming || streamedContent.length < displayContent.length
 
+  useEffect(() => {
+    onRevealStateChangeRef.current?.(isRevealing)
+  }, [isRevealing])
+
   /**
    * One-way latch: once a message has streamed in this mount, keep rendering it
    * through Streamdown's streaming/animation pipeline for the rest of its life.

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

@@ -1,5 +1,5 @@
 export type { AgentGroupItem, NestedAgentGroup } from './agent-group'
-export { AgentGroup, CircleStop } from './agent-group'
+export { AgentGroup, CircleStop, isAgentGroupResolved } from './agent-group'
 export { ChatContent } from './chat-content'
 export { Options } from './options'
 export { PendingTagIndicator, parseSpecialTags, SpecialTags } from './special-tags'

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

@@ -2,3 +2,4 @@ export {
   assistantMessageHasRenderableContent,
   MessageContent,
 } from './message-content'
+export type { MessagePhase } from './utils'

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

@@ -56,6 +56,23 @@ describe('parseBlocks span-identity tree', () => {
     expect(nested.group.items.some((item) => item.type === 'tool')).toBe(true)
   })
 
+  it('clears the parent delegating flag once it has spawned a child, leaving only the child active', () => {
+    const blocks: ContentBlock[] = [
+      subagentStart('workflow', 'S1', 'main'),
+      subagentStart('deploy', 'S2', 'S1'),
+    ]
+
+    const segments = parseBlocks(blocks)
+    expect(segments).toHaveLength(1)
+    const workflow = segments[0]
+    if (workflow.type !== 'agent_group') throw new Error('expected workflow group')
+    expect(workflow.isDelegating).toBe(false)
+
+    const nested = workflow.items.find((item) => item.type === 'agent_group')
+    if (!nested || nested.type !== 'agent_group') throw new Error('expected nested deploy group')
+    expect(nested.group.isDelegating).toBe(true)
+  })
+
   it('keeps two top-level subagents as siblings', () => {
     const blocks: ContentBlock[] = [
       subagentStart('workflow', 'S1', 'main'),

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

@@ -1,6 +1,6 @@
 'use client'
 
-import { memo, useMemo } from 'react'
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { stripVersionSuffix } from '@sim/utils/string'
 import { Read as ReadTool, WorkspaceFile } from '@/lib/copilot/generated/tool-catalog-v1'
 import { isToolHiddenInUi } from '@/lib/copilot/tools/client/hidden-tools'
@@ -18,6 +18,7 @@ import {
   PendingTagIndicator,
   ThinkingBlock,
 } from './components'
+import { deriveMessagePhase, isToolDone, type MessagePhase } from './utils'
 
 const FILE_SUBAGENT_ID = 'file'
 
@@ -93,17 +94,6 @@ function resolveAgentLabel(key: string): string {
   return SUBAGENT_LABELS[key] ?? formatToolName(key)
 }
 
-function isToolDone(status: ToolCallData['status']): boolean {
-  return (
-    status === 'success' ||
-    status === 'error' ||
-    status === 'cancelled' ||
-    status === 'skipped' ||
-    status === 'rejected' ||
-    status === 'interrupted'
-  )
-}
-
 function isDelegatingTool(tc: NonNullable<ContentBlock['toolCall']>): boolean {
   return tc.status === 'executing'
 }
@@ -226,6 +216,7 @@ function parseBlocksWithSpanTree(blocks: ContentBlock[]): MessageSegment[] {
     if (parentSpanId && parentSpanId !== SPAN_ROOT) {
       const parent = groupsBySpanId.get(parentSpanId)
       if (parent) {
+        parent.isDelegating = false
         parent.items.push({ type: 'agent_group', group })
         return
       }
@@ -688,24 +679,42 @@ interface MessageContentProps {
   fallbackContent: string
   isStreaming: boolean
   onOptionSelect?: (id: string) => void
+  onPhaseChange?: (phase: MessagePhase) => void
 }
 
 function MessageContentInner({
   blocks,
   fallbackContent,
   isStreaming = false,
   onOptionSelect,
+  onPhaseChange,
 }: MessageContentProps) {
   const { onWorkspaceResourceSelect } = useChatSurface()
   const parsed = useMemo(() => (blocks.length > 0 ? parseBlocks(blocks) : []), [blocks])
 
+  const [trailingRevealing, setTrailingRevealing] = useState(false)
+  const handleTrailingRevealChange = useCallback((revealing: boolean) => {
+    setTrailingRevealing(revealing)
+  }, [])
+
   const segments: MessageSegment[] =
     parsed.length > 0
       ? parsed
       : fallbackContent?.trim()
         ? [{ type: 'text' as const, content: fallbackContent }]
         : []
 
+  const lastSegment = segments[segments.length - 1]
+  const hasTrailingTextSegment = lastSegment?.type === 'text'
+  const isRevealing = hasTrailingTextSegment && trailingRevealing
+  const phase = deriveMessagePhase({ isStreaming, isRevealing })
+
+  const onPhaseChangeRef = useRef(onPhaseChange)
+  onPhaseChangeRef.current = onPhaseChange
+  useEffect(() => {
+    onPhaseChangeRef.current?.(phase)
+  }, [phase])
+
   if (segments.length === 0) {
     if (isStreaming) {
       return (
@@ -717,21 +726,16 @@ function MessageContentInner({
     return null
   }
 
-  const lastSegment = segments[segments.length - 1]
   const hasTrailingContent = lastSegment.type === 'text' || lastSegment.type === 'stopped'
 
-  let allLastGroupToolsDone = false
-  if (lastSegment.type === 'agent_group') {
-    const toolItems = lastSegment.items.filter((item) => item.type === 'tool')
-    allLastGroupToolsDone =
-      toolItems.length > 0 && toolItems.every((t) => t.type === 'tool' && isToolDone(t.data.status))
-  }
-
-  const hasSubagentEnded = blocks.some((b) => b.type === 'subagent_end')
-  const showTrailingThinking =
-    isStreaming &&
-    !hasTrailingContent &&
-    (lastSegment.type === 'thinking' || hasSubagentEnded || allLastGroupToolsDone)
+  // 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 = blocks.some(
+    (b) => b.toolCall?.status === 'executing' || (b.type === 'subagent' && b.endedAt === undefined)
+  )
+  const showTrailingThinking = phase === 'streaming' && !hasTrailingContent && !hasRunningWork
 
   return (
     <div className='space-y-[10px]'>
@@ -749,6 +753,9 @@ function MessageContentInner({
                 })}
                 onOptionSelect={onOptionSelect}
                 onWorkspaceResourceSelect={onWorkspaceResourceSelect}
+                onRevealStateChange={
+                  i === segments.length - 1 ? handleTrailingRevealChange : undefined
+                }
               />
             )
           case 'thinking': {

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

@@ -0,0 +1,38 @@
+/**
+ * @vitest-environment node
+ */
+import { describe, expect, it } from 'vitest'
+import { deriveMessagePhase, resolveToolDisplayState } from './utils'
+
+describe('deriveMessagePhase', () => {
+  it('is streaming whenever the transport is live', () => {
+    expect(deriveMessagePhase({ isStreaming: true, isRevealing: false })).toBe('streaming')
+    expect(deriveMessagePhase({ isStreaming: true, isRevealing: true })).toBe('streaming')
+  })
+
+  it('is revealing when the transport stopped but text is still draining', () => {
+    expect(deriveMessagePhase({ isStreaming: false, isRevealing: true })).toBe('revealing')
+  })
+
+  it('is settled once neither the transport nor the reveal is active', () => {
+    expect(deriveMessagePhase({ isStreaming: false, isRevealing: false })).toBe('settled')
+  })
+})
+
+describe('resolveToolDisplayState', () => {
+  it('spins iff the tool is executing — a pure projection of its own status', () => {
+    expect(resolveToolDisplayState('executing')).toBe('spinner')
+  })
+
+  it('maps cancelled and interrupted to their own glyphs', () => {
+    expect(resolveToolDisplayState('cancelled')).toBe('cancelled')
+    expect(resolveToolDisplayState('interrupted')).toBe('interrupted')
+  })
+
+  it('renders terminal successes and errors as the tool icon', () => {
+    expect(resolveToolDisplayState('success')).toBe('icon')
+    expect(resolveToolDisplayState('error')).toBe('icon')
+    expect(resolveToolDisplayState('skipped')).toBe('icon')
+    expect(resolveToolDisplayState('rejected')).toBe('icon')
+  })
+})