fix(chat): collapse main tool groups into action summaries

Author: Sg312

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

@@ -2,8 +2,8 @@
  * @vitest-environment jsdom
  */
 import { act, createElement } from 'react'
-import { createRoot } from 'react-dom/client'
-import { describe, expect, it, vi } from 'vitest'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import type { ToolCallData, ToolCallStatus } from '../../../../types'
 import type { AgentGroupItem } from './agent-group'
 import { AgentGroup, isAgentGroupResolved } from './agent-group'
@@ -12,6 +12,10 @@ vi.mock('@/lib/browser-agent/transport', () => ({
   isBrowserAgentAvailable: () => true,
 }))
 
+vi.mock('./tool-permission-card', () => ({
+  ToolPermissionCard: () => createElement('div', { 'data-permission-card': true }, 'Allow tool'),
+}))
+
 vi.mock('../special-tags', () => ({
   CredentialDisplay: ({ data }: { data: Array<{ name?: string }> }) => data[0]?.name ?? '',
   BrowserTakeoverQuestion: ({ reason, answer }: { reason?: string; answer?: string }) =>
@@ -110,7 +114,6 @@ describe('AgentGroup browser takeover', () => {
           agentLabel: 'Browser Agent',
           items: [tool('success'), browserTakeover(reason)],
           isStreaming: true,
-          isCurrentSection: true,
           isLaneOpen: true,
         })
       )
@@ -184,7 +187,6 @@ describe('AgentGroup browser takeover', () => {
           agentLabel: 'Browser Agent',
           items: [takeover],
           isStreaming: true,
-          isCurrentSection: true,
           isLaneOpen: true,
         })
       )
@@ -206,7 +208,6 @@ describe('AgentGroup browser takeover', () => {
           agentLabel: 'Browser Agent',
           items: [completedTakeover],
           isStreaming: true,
-          isCurrentSection: true,
           isLaneOpen: true,
         })
       )
@@ -303,3 +304,91 @@ describe('AgentGroup nested status line', () => {
     expect(header).toContain('Workflow Agent — Deploying Invoice Sync as API')
   })
 })
+
+describe('AgentGroup main tool summary', () => {
+  let container: HTMLDivElement
+  let root: Root
+
+  beforeEach(() => {
+    ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+    container = document.createElement('div')
+    root = createRoot(container)
+  })
+
+  afterEach(() => act(() => root.unmount()))
+
+  const render = (items: AgentGroupItem[], isStreaming = true) => {
+    act(() => {
+      root.render(
+        createElement(AgentGroup, {
+          agentName: 'mothership',
+          agentLabel: 'Sim',
+          items,
+          isStreaming,
+          isLaneOpen: isStreaming,
+        })
+      )
+    })
+    return container.querySelector<HTMLButtonElement>('button[aria-expanded]')!
+  }
+
+  it('starts collapsed while streaming, shows the tool and count, and preserves manual expansion', () => {
+    const items = [tool('success'), tool('executing')]
+    const header = render(items)
+    expect(header.textContent).toBe('Searching + 1')
+    expect(header.textContent).not.toContain('Sim')
+    expect(header.getAttribute('aria-expanded')).toBe('false')
+    act(() => header.click())
+    expect(header.getAttribute('aria-expanded')).toBe('true')
+    render([...items, tool('executing')])
+    expect(header.textContent).toBe('Searching + 2')
+    expect(header.getAttribute('aria-expanded')).toBe('true')
+    act(() => header.click())
+    render([...items, tool('executing')])
+    expect(header.getAttribute('aria-expanded')).toBe('false')
+  })
+
+  it.each(['success', 'error', 'cancelled'] as const)(
+    'shows an honest terminal label for %s without losing the collapsed history count',
+    (status) => {
+      const header = render([tool('success'), tool(status)], false)
+      expect(header.textContent).toBe(
+        {
+          success: 'Searched + 1',
+          error: 'Failed searching + 1',
+          cancelled: 'Stopped searching + 1',
+        }[status]
+      )
+      expect(header.getAttribute('aria-expanded')).toBe('false')
+    }
+  )
+
+  it('keeps nested permission decisions visible even after a manual collapse', () => {
+    const header = render([tool('success'), group([tool('awaiting_approval')])])
+    expect(header.getAttribute('aria-expanded')).toBe('true')
+    expect(container.querySelector('[data-permission-card]')).not.toBeNull()
+    act(() => header.click())
+    expect(header.getAttribute('aria-expanded')).toBe('true')
+  })
+
+  it('opens a terminal handoff so the user can unblock it', () => {
+    const handoff: AgentGroupItem = {
+      type: 'tool',
+      data: {
+        id: 'terminal-handoff',
+        toolName: 'terminal',
+        displayTitle: 'Waiting for terminal input',
+        status: 'executing',
+        params: {
+          operation: 'handoff',
+          args: { terminalId: 'terminal-1', reason: 'Finish login' },
+        },
+      },
+    }
+    const header = render([handoff])
+    expect(header.getAttribute('aria-expanded')).toBe('true')
+    expect(container.textContent).toContain('Finish login')
+    render([tool('success')])
+    expect(header.getAttribute('aria-expanded')).toBe('false')
+  })
+})

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

@@ -1,11 +1,12 @@
 'use client'
 
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
-import { ChevronDown, cn, Expandable, ExpandableContent, OverflowText } from '@sim/emcn'
+import { ChevronDown, cn, Expandable, ExpandableContent, OverflowText, Wrench } from '@sim/emcn'
 import { ShimmerText } from '@/components/ui'
 import { isBrowserAgentAvailable } from '@/lib/browser-agent/transport'
+import { Terminal as TerminalTool } from '@/lib/mothership/generated/tool-catalog-v1'
 import { RETIRED_BROWSER_REQUEST_TAKEOVER_ID } from '@/lib/mothership/tools/retired-tools'
-import { getToolDisplayTitle } from '@/lib/mothership/tools/tool-display'
+import { getToolDisplayTitle, getToolStatusDisplayTitle } from '@/lib/mothership/tools/tool-display'
 import { useSmoothText } from '@/hooks/use-smooth-text'
 import { type ToolCallData, ToolCallStatus } from '../../../../types'
 import { getAgentIcon, isToolDone } from '../../utils'
@@ -40,16 +41,14 @@ interface AgentGroupProps {
   items: AgentGroupItem[]
   isDelegating?: boolean
   isStreaming?: boolean
-  /** This group is the latest section in its parent sequence (drives collapse). */
-  isCurrentSection?: boolean
   /** The subagent lane is still open (no subagent_end yet) — i.e. actively running. */
   isLaneOpen?: boolean
 }
 
 function toolStatusTitle(tool: ToolCallData): string {
   // Raw tool names must never surface — derive a human title when no display
   // title was resolved upstream.
-  return tool.displayTitle || getToolDisplayTitle(String(tool.toolName ?? ''), undefined)
+  return tool.displayTitle || getToolDisplayTitle(String(tool.toolName ?? ''), tool.params)
 }
 
 /**
@@ -69,12 +68,18 @@ function collectGroupTools(items: AgentGroupItem[]): ToolCallData[] {
   return tools
 }
 
-/** True when any row in this group (or a nested one) is waiting on a permission decision. */
-function hasAwaitingApproval(items: AgentGroupItem[]): boolean {
+/** Blocking decisions must stay visible even when the surrounding log is collapsed. */
+function hasBlockingInteraction(items: AgentGroupItem[]): boolean {
   return items.some((item) => {
-    if (item.type === 'tool') return item.data.status === ToolCallStatus.awaiting_approval
-    // Text rows carry no tool calls, so only nested groups need recursing into.
-    return item.type === 'agent_group' ? hasAwaitingApproval(item.group.items) : false
+    if (item.type === 'tool') {
+      return (
+        item.data.status === ToolCallStatus.awaiting_approval ||
+        (item.data.toolName === TerminalTool.id &&
+          item.data.status === ToolCallStatus.executing &&
+          item.data.params?.operation === 'handoff')
+      )
+    }
+    return item.type === 'agent_group' ? hasBlockingInteraction(item.group.items) : false
   })
 }
 
@@ -136,39 +141,41 @@ export function AgentGroup({
   items,
   isDelegating = false,
   isStreaming = false,
-  isCurrentSection = false,
   isLaneOpen = false,
   error,
 }: AgentGroupProps) {
-  const AgentIcon = getAgentIcon(agentName)
   const isMainAgent = agentName === 'mothership'
-  // Collapsed status line: the latest tool call, always in its RUNNING
-  // phrasing — it never flips to the completed rewrite (that lives in the
-  // expanded log). Work delegated further down bubbles up, so a group whose
-  // own turn is idle still narrates what its nested agent is doing rather
-  // than freezing on its last own tool. With several tools running at any
-  // depth, the most recently started wins and the rest become "+ n"; between
-  // rounds the last tool's title stays frozen; a closed lane shows the bare
-  // name.
+  /** Main groups summarize their tool log; subagents retain their named live status. */
   const status = useMemo(() => {
-    if (isMainAgent || !isLaneOpen) return undefined
+    if (!isMainAgent && !isLaneOpen) return undefined
     const tools = collectGroupTools(items)
     const running = tools.filter((tool) => tool.status === ToolCallStatus.executing)
-    if (running.length > 0) {
-      const latest = running.reduce((newest, tool) =>
-        (tool.startedAt ?? 0) >= (newest.startedAt ?? 0) ? tool : newest
-      )
-      const title = toolStatusTitle(latest)
-      return running.length > 1 ? `${title} + ${running.length - 1}` : title
+    const latest = running.length
+      ? running.reduce((newest, tool) =>
+          (tool.startedAt ?? 0) >= (newest.startedAt ?? 0) ? tool : newest
+        )
+      : tools.at(-1)
+    if (!latest) return undefined
+    return {
+      toolName: latest.toolName,
+      title: isMainAgent
+        ? getToolStatusDisplayTitle(toolStatusTitle(latest), latest.status, latest.toolName)
+        : toolStatusTitle(latest),
+      additionalCount: isMainAgent ? tools.length - 1 : Math.max(0, running.length - 1),
     }
-    const last = tools.at(-1)
-    return last ? toolStatusTitle(last) : undefined
   }, [isLaneOpen, isMainAgent, items])
+  const AgentIcon = isMainAgent
+    ? getAgentIcon(status?.toolName ?? '', Wrench)
+    : getAgentIcon(agentName)
   const headerText = error
-    ? `${agentLabel} — Failed`
-    : status
-      ? `${agentLabel} — ${status}`
-      : agentLabel
+    ? isMainAgent
+      ? 'Tool call failed'
+      : `${agentLabel} — Failed`
+    : isMainAgent
+      ? (status?.title ?? 'Working')
+      : status
+        ? `${agentLabel} — ${status.title}`
+        : agentLabel
   const hasItems = items.length > 0
   const resolved = isAgentGroupResolved(items)
   const browserAgentAvailable = isBrowserAgentAvailable()
@@ -178,24 +185,16 @@ export function AgentGroup({
   const isWorking =
     !activeBrowserTakeover && ((isDelegating && !resolved) || (isStreaming && isLaneOpen))
 
-  // SUBAGENT groups never auto-expand: the collapsed row IS the live view —
-  // label plus latest running tool title. Expanding is a deliberate user
-  // action; only a pending permission prompt or a browser hand-back forces
-  // one open. The MAIN lane ("Sim") is not a delegation card: its narration
-  // and tool calls are the turn itself, so it keeps the original live-expand
-  // behavior (open while streaming/current, settles when superseded).
-  const autoExpanded = isMainAgent && isStreaming && (isCurrentSection || isLaneOpen || !resolved)
-  const [manualExpanded, setManualExpanded] = useState<boolean | null>(null)
+  /** Keep every log collapsed until opened, except for blocking user interactions. */
+  const [manualExpanded, setManualExpanded] = useState(false)
   const [expandedTakeoverId, setExpandedTakeoverId] = useState<string | null>(null)
   // An outstanding permission prompt overrides a manual collapse: the turn
   // cannot proceed until it is answered, so hiding it would deadlock the chat
   // with nothing on screen to explain why.
   const expanded =
-    hasAwaitingApproval(items) ||
+    hasBlockingInteraction(items) ||
     nestedBrowserTakeover ||
-    (activeBrowserTakeover
-      ? expandedTakeoverId === activeBrowserTakeover.id
-      : (manualExpanded ?? autoExpanded))
+    (activeBrowserTakeover ? expandedTakeoverId === activeBrowserTakeover.id : manualExpanded)
 
   const toggleExpanded = () => {
     if (activeBrowserTakeover) {
@@ -211,6 +210,7 @@ export function AgentGroup({
         <button
           type='button'
           onClick={toggleExpanded}
+          aria-expanded={expanded}
           className='group/agent flex w-full min-w-0 cursor-pointer items-center gap-2 text-left'
         >
           <div className='flex size-[16px] shrink-0 items-center justify-center'>
@@ -221,6 +221,12 @@ export function AgentGroup({
           ) : (
             <OverflowText label={headerText} className='text-[var(--text-body)] text-sm' />
           )}
+          {status && status.additionalCount > 0 && (
+            <span className='shrink-0 text-[var(--text-secondary)] text-sm'>
+              {' + '}
+              {status.additionalCount}
+            </span>
+          )}
           <ChevronDown
             className={cn(
               'size-[14px] shrink-0 text-[var(--text-icon)] opacity-0 transition-[transform,opacity] duration-150 group-hover/agent:opacity-100 group-focus-visible/agent:opacity-100',
@@ -271,7 +277,6 @@ export function AgentGroup({
                           items={item.group.items}
                           isDelegating={item.group.isDelegating}
                           isStreaming={isStreaming}
-                          isCurrentSection={idx === items.length - 1}
                           isLaneOpen={item.group.isOpen}
                           error={item.group.error}
                         />

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

@@ -1068,7 +1068,6 @@ function MessageContentInner({
                     items={segment.items}
                     isDelegating={segment.isDelegating}
                     isStreaming={isStreaming}
-                    isCurrentSection={i === segments.length - 1}
                     isLaneOpen={segment.isOpen}
                     error={segment.error}
                   />

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

@@ -131,8 +131,8 @@ const TOOL_ICONS: Record<string, IconComponent> = {
   wait: Clock,
 }
 
-export function getAgentIcon(name: string): IconComponent {
-  return TOOL_ICONS[name as keyof typeof TOOL_ICONS] ?? Blimp
+export function getAgentIcon(name: string, fallback: IconComponent = Blimp): IconComponent {
+  return TOOL_ICONS[name as keyof typeof TOOL_ICONS] ?? fallback
 }
 
 export type MessagePhase = 'streaming' | 'revealing' | 'settled'