From 6ea4e8b2e708ecbad39f9b12b587ae784bc27cc0 Mon Sep 17 00:00:00 2001 From: Waleed Latif Date: Thu, 10 Sep 2026 17:42:34 -0700 Subject: [PATCH 1/3] improvement(chat): unify expandable inline tool activity --- .../hero-chat-loop/hero-tool-call-item.tsx | 3 +- .../knowledge-search-results.tsx | 8 +- .../agent-group/activity-viewport.tsx | 112 +++++++ .../agent-group/agent-group-view.tsx | 288 ++++++------------ .../agent-group/agent-group.test.ts | 183 ++++++++++- .../agent-group/main-agent-activity.ts | 29 -- .../agent-group/main-agent-activity.tsx | 69 +++++ .../agent-group/tool-activity-group.test.ts | 61 ++++ .../agent-group/tool-activity-group.tsx | 152 +++++++++ .../agent-group/tool-call-item.test.tsx | 4 +- .../components/agent-group/tool-call-item.tsx | 14 +- .../agent-group/tool-interactions.ts | 12 + .../message-content/message-content.test.ts | 42 +-- .../message-content/message-content.tsx | 21 +- .../home/components/message-content/utils.ts | 4 + .../suggested-actions/suggested-actions.tsx | 10 +- apps/sim/components/ui/activity-status.tsx | 23 +- 17 files changed, 744 insertions(+), 291 deletions(-) create mode 100644 apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/activity-viewport.tsx delete mode 100644 apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/main-agent-activity.ts create mode 100644 apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/main-agent-activity.tsx create mode 100644 apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-activity-group.test.ts create mode 100644 apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-activity-group.tsx create mode 100644 apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-interactions.ts diff --git a/apps/sim/app/(landing)/components/hero/components/hero-chat-loop/hero-tool-call-item.tsx b/apps/sim/app/(landing)/components/hero/components/hero-chat-loop/hero-tool-call-item.tsx index 8f744159736..647bb1cd239 100644 --- a/apps/sim/app/(landing)/components/hero/components/hero-chat-loop/hero-tool-call-item.tsx +++ b/apps/sim/app/(landing)/components/hero/components/hero-chat-loop/hero-tool-call-item.tsx @@ -3,6 +3,7 @@ import { SlackIcon } from '@/components/icons' import { ActivityStatus } from '@/components/ui/activity-status' import { getToolStatusDisplayTitle } from '@/lib/copilot/tools/tool-display' import type { ToolCallItemProps } from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-call-item' +import { getToolIcon } from '@/app/workspace/[workspaceId]/home/components/message-content/utils' /** Demo fixtures have known brands, so the landing page never loads the block registry. */ export function HeroToolCallItem({ @@ -16,7 +17,7 @@ export function HeroToolCallItem({ ? SlackIcon : toolCallId === 'hero-read-table' ? Table - : undefined + : getToolIcon(toolName) return ( - Searching… -

+
+ +
) } diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/activity-viewport.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/activity-viewport.tsx new file mode 100644 index 00000000000..af9ad2fc87f --- /dev/null +++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/activity-viewport.tsx @@ -0,0 +1,112 @@ +'use client' + +import { type ReactNode, useEffect, useLayoutEffect, useRef, useState } from 'react' +import { cn } from '@sim/emcn' + +interface ActivityViewportProps { + children: ReactNode + isStreaming: boolean + /** A nested blocking interaction must not be clipped by this ancestor's log viewport. */ + unbounded?: boolean +} + +const BOTTOM_STICK_THRESHOLD_PX = 8 + +export function ActivityViewport({ + children, + isStreaming, + unbounded = false, +}: ActivityViewportProps) { + const ref = useRef(null) + const rafRef = useRef(null) + const stickToBottomRef = useRef(true) + const prevScrollTopRef = useRef(0) + const [hasOverflow, setHasOverflow] = useState(false) + + useEffect(() => { + if (unbounded) { + stickToBottomRef.current = true + return + } + const el = ref.current + if (!el) return + // Upward user input detaches auto-stick; a downward scroll reaching the + // bottom re-attaches it (a small upward flick can't re-stick itself). + const handleWheel = (e: WheelEvent) => { + if (e.deltaY < 0) stickToBottomRef.current = false + } + const handleScroll = () => { + const distance = el.scrollHeight - el.scrollTop - el.clientHeight + if (distance < BOTTOM_STICK_THRESHOLD_PX && el.scrollTop > prevScrollTopRef.current) { + stickToBottomRef.current = true + } + prevScrollTopRef.current = el.scrollTop + } + el.addEventListener('wheel', handleWheel, { passive: true }) + el.addEventListener('scroll', handleScroll, { passive: true }) + return () => { + el.removeEventListener('wheel', handleWheel) + el.removeEventListener('scroll', handleScroll) + } + }, [unbounded]) + + useLayoutEffect(() => { + const el = ref.current + if (rafRef.current !== null) { + window.cancelAnimationFrame(rafRef.current) + rafRef.current = null + } + if (unbounded) { + setHasOverflow(false) + return + } + if (el) { + const next = el.scrollHeight > el.clientHeight + setHasOverflow((prev) => (prev === next ? prev : next)) + } + if (!isStreaming) return + const tick = () => { + const node = ref.current + if (!node || !stickToBottomRef.current) { + rafRef.current = null + return + } + const target = node.scrollHeight - node.clientHeight + const gap = target - node.scrollTop + if (gap < 1) { + rafRef.current = null + return + } + node.scrollTop = node.scrollTop + Math.max(1, gap * 0.18) + rafRef.current = window.requestAnimationFrame(tick) + } + rafRef.current = window.requestAnimationFrame(tick) + return () => { + if (rafRef.current !== null) { + window.cancelAnimationFrame(rafRef.current) + rafRef.current = null + } + } + }) + + return ( +
+
+ {children} +
+ {!unbounded && hasOverflow && ( + <> +
+
+ + )} +
+ ) +} diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group-view.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group-view.tsx index 0b8d1f3886e..412b08b7fe3 100644 --- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group-view.tsx +++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group-view.tsx @@ -1,22 +1,17 @@ 'use client' -import { - type ComponentType, - type ReactNode, - useEffect, - useLayoutEffect, - useMemo, - useRef, - useState, -} from 'react' -import { ChevronDown, cn, Expandable, ExpandableContent, OverflowText } from '@sim/emcn' -import { ShimmerText } from '@/components/ui' +import { type ComponentType, type ReactNode, useId, useMemo, useState } from 'react' +import { ChevronDown, cn, Expandable, ExpandableContent } from '@sim/emcn' +import { ActivityStatus } from '@/components/ui/activity-status' import { isBrowserAgentAvailable } from '@/lib/browser-agent/transport' import { RETIRED_BROWSER_REQUEST_TAKEOVER_ID } from '@/lib/copilot/tools/retired-tools' +import { ActivityViewport } from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/activity-viewport' import { BrowserAgentIcon } from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/browser-agent-icon' import { renderInlineMarkdown } from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/inline-markdown' -import { getVisibleMainAgentItems } from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/main-agent-activity' +import { MainAgentActivity } from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/main-agent-activity' +import { getToolActivitySummary } from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-activity-group' import type { ToolCallItemProps } from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-call-item' +import { needsToolInput } from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-interactions' import { getAgentIcon, isToolDone, @@ -53,7 +48,7 @@ export interface AgentGroupProps { isLaneOpen?: boolean /** Opens a subagent group on first render. */ defaultExpanded?: boolean - /** Keeps the activity viewport anchored at the top while new rows stream in. */ + /** Follows incoming activity until the user scrolls up. */ autoScrollActivity?: boolean } @@ -78,12 +73,12 @@ 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 { +/** Reveal blocking interactions even when a parent group was manually collapsed. */ +function hasPendingInteraction(items: AgentGroupItem[]): boolean { return items.some((item) => { - if (item.type === 'tool') return item.data.status === ToolCallStatus.awaiting_approval + if (item.type === 'tool') return needsToolInput(item.data) // Text rows carry no tool calls, so only nested groups need recursing into. - return item.type === 'agent_group' ? hasAwaitingApproval(item.group.items) : false + return item.type === 'agent_group' ? hasPendingInteraction(item.group.items) : false }) } @@ -157,6 +152,7 @@ export function AgentGroupView({ ToolCallComponent, renderBrowserTakeover, }: AgentGroupViewProps) { + const contentId = useId() const AgentIcon = getAgentIcon(agentName) const agentIcon = agentName === 'browser' ? ( @@ -165,14 +161,7 @@ export function AgentGroupView({ ) 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. + /** Open lanes surface their latest work, including work delegated to nested agents. */ const status = useMemo(() => { if (isMainAgent || !isLaneOpen) return undefined const tools = collectGroupTools(items) @@ -187,7 +176,12 @@ export function AgentGroupView({ const last = tools.at(-1) return last ? toolStatusTitle(last) : undefined }, [isLaneOpen, isMainAgent, items]) - const headerText = status ? `${agentLabel} — ${status}` : agentLabel + const completedTools = !isMainAgent && !isLaneOpen ? collectGroupTools(items) : [] + const headerText = status + ? `${agentLabel} — ${status}` + : completedTools.length > 0 + ? `${agentLabel} — ${getToolActivitySummary(completedTools)}` + : agentLabel const hasItems = items.length > 0 const resolved = isAgentGroupResolved(items) const browserAgentAvailable = isBrowserAgentAvailable() @@ -199,11 +193,12 @@ export function AgentGroupView({ const [manualExpanded, setManualExpanded] = useState(defaultExpanded) const [expandedTakeoverId, setExpandedTakeoverId] = useState(null) + const pendingInteraction = hasPendingInteraction(items) // 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) || + pendingInteraction || nestedBrowserTakeover || (activeBrowserTakeover ? expandedTakeoverId === activeBrowserTakeover.id : manualExpanded) @@ -215,49 +210,64 @@ export function AgentGroupView({ setManualExpanded(!expanded) } - const visibleItems = isMainAgent ? getVisibleMainAgentItems(items) : items - const activity = ( -
- {visibleItems.map((item, idx) => { - if (item.type === 'tool') { - return ( - - ) - } - if (item.type === 'agent_group') { - return ( - - ) - } - return ( - - ) - })} -
+ const renderItem = (item: AgentGroupItem, idx: number) => { + if (item.type === 'tool') { + return ( + + ) + } + if (item.type === 'agent_group') { + return ( + + ) + } + return ( + + ) + } + + const activity = isMainAgent ? ( + + ) : ( +
{items.map(renderItem)}
+ ) + const header = ( + {agentIcon} + } + /> ) return ( @@ -265,43 +275,35 @@ export function AgentGroupView({ {isMainAgent ? null : hasItems ? ( ) : ( -
-
{agentIcon}
- {isWorking ? ( - {headerText} - ) : ( - - )} -
+ header )} {isMainAgent ? ( activity ) : hasItems ? ( - - + {activity} - + ) : null} @@ -329,112 +331,8 @@ function NarrationText({ content, isStreaming }: NarrationTextProps) { const revealed = useSmoothText(content, isStreaming) return ( - + {renderInlineMarkdown(revealed.trim())} ) } - -interface BoundedViewportProps { - children: React.ReactNode - isStreaming: boolean - /** A nested blocking interaction must not be clipped by this ancestor's log viewport. */ - unbounded?: boolean -} - -const BOTTOM_STICK_THRESHOLD_PX = 8 - -function BoundedViewport({ children, isStreaming, unbounded = false }: BoundedViewportProps) { - const ref = useRef(null) - const rafRef = useRef(null) - const stickToBottomRef = useRef(true) - const prevScrollTopRef = useRef(0) - const [hasOverflow, setHasOverflow] = useState(false) - - useEffect(() => { - if (unbounded) { - stickToBottomRef.current = true - return - } - const el = ref.current - if (!el) return - // Upward user input detaches auto-stick; a downward scroll reaching the - // bottom re-attaches it (a small upward flick can't re-stick itself). - const handleWheel = (e: WheelEvent) => { - if (e.deltaY < 0) stickToBottomRef.current = false - } - const handleScroll = () => { - const distance = el.scrollHeight - el.scrollTop - el.clientHeight - if (distance < BOTTOM_STICK_THRESHOLD_PX && el.scrollTop > prevScrollTopRef.current) { - stickToBottomRef.current = true - } - prevScrollTopRef.current = el.scrollTop - } - el.addEventListener('wheel', handleWheel, { passive: true }) - el.addEventListener('scroll', handleScroll, { passive: true }) - return () => { - el.removeEventListener('wheel', handleWheel) - el.removeEventListener('scroll', handleScroll) - } - }, [unbounded]) - - useLayoutEffect(() => { - const el = ref.current - if (rafRef.current !== null) { - window.cancelAnimationFrame(rafRef.current) - rafRef.current = null - } - if (unbounded) { - setHasOverflow(false) - return - } - if (el) { - const next = el.scrollHeight > el.clientHeight - setHasOverflow((prev) => (prev === next ? prev : next)) - } - if (!isStreaming) return - const tick = () => { - const node = ref.current - if (!node || !stickToBottomRef.current) { - rafRef.current = null - return - } - const target = node.scrollHeight - node.clientHeight - const gap = target - node.scrollTop - if (gap < 1) { - rafRef.current = null - return - } - node.scrollTop = node.scrollTop + Math.max(1, gap * 0.18) - rafRef.current = window.requestAnimationFrame(tick) - } - rafRef.current = window.requestAnimationFrame(tick) - return () => { - if (rafRef.current !== null) { - window.cancelAnimationFrame(rafRef.current) - rafRef.current = null - } - } - }) - - return ( -
-
- {children} -
- {!unbounded && hasOverflow && ( - <> -
-
- - )} -
- ) -} diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group.test.ts b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group.test.ts index ee1df0a2380..2531afb75da 100644 --- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group.test.ts +++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group.test.ts @@ -116,7 +116,7 @@ describe('AgentGroup inline main activity', () => { afterEach(() => act(() => root.unmount())) - it('replaces the previous tool in place and settles without restoring the nested log', () => { + it('replaces the active status in place and expands the full completed history', () => { const first: AgentGroupItem = { type: 'tool', data: { id: 'first', toolName: 'grep', displayTitle: 'Searching files', status: 'executing' }, @@ -146,7 +146,9 @@ describe('AgentGroup inline main activity', () => { expect(container.firstElementChild).toBe(activity) expect(container.textContent).toBe('Reading notes') expect(container.querySelector('[class*="shimmer"]')).not.toBeNull() - expect(container.querySelector('button, svg, [data-state], .pl-6')).toBeNull() + expect(container.querySelector('button')?.getAttribute('aria-expanded')).toBe('false') + expect(container.querySelector('svg')).not.toBeNull() + expect(container.textContent).not.toContain('Sim') render( [ @@ -155,9 +157,171 @@ describe('AgentGroup inline main activity', () => { ], false ) - expect(container.textContent).toBe('Read notes') + expect(container.textContent).toBe('Searched files, read files') expect(container.querySelector('[class*="shimmer"]')).toBeNull() - expect(container.querySelector('button, svg, [data-state], .pl-6')).toBeNull() + const header = container.querySelector('button') + act(() => header?.click()) + expect(header?.getAttribute('aria-expanded')).toBe('true') + expect(container.querySelector('[data-state="open"]')?.textContent).toBe( + 'Searched filesRead notes' + ) + act(() => header?.click()) + expect(header?.getAttribute('aria-expanded')).toBe('false') + expect(container.textContent).toBe('Searched files, read files') + }) + + it('keeps history expanded as new tools arrive', () => { + const first: AgentGroupItem = { + type: 'tool', + data: { id: 'first', toolName: 'read', displayTitle: 'Reading notes', status: 'success' }, + } + const render = (items: AgentGroupItem[]) => + act(() => + root.render( + createElement(AgentGroup, { + agentName: 'mothership', + agentLabel: 'Sim', + items, + isStreaming: true, + }) + ) + ) + render([first]) + act(() => container.querySelector('button')?.click()) + render([ + first, + { + type: 'tool', + data: { + id: 'second', + toolName: 'terminal_run', + displayTitle: 'Running checks', + status: 'executing', + }, + }, + ]) + expect(container.querySelector('button')?.getAttribute('aria-expanded')).toBe('true') + expect(container.querySelector('[data-state="open"]')?.textContent).toBe( + 'Read notesRunning checks' + ) + }) + + it('starts a fresh countdown when the latest wait tool changes', () => { + vi.useFakeTimers() + try { + const wait: AgentGroupItem = { + type: 'tool', + data: { + id: 'wait-first', + toolName: 'wait', + displayTitle: 'Waiting', + status: 'executing', + params: { seconds: 3 }, + }, + } + const render = (items: AgentGroupItem[]) => + act(() => + root.render( + createElement(AgentGroup, { + agentName: 'mothership', + agentLabel: 'Sim', + items, + isStreaming: true, + }) + ) + ) + render([wait]) + act(() => vi.advanceTimersByTime(2000)) + expect(container.textContent).toBe('Waiting 1s') + render([ + { ...wait, data: { ...wait.data, status: 'success' } }, + { ...wait, data: { ...wait.data, id: 'wait-second' } }, + ]) + expect(container.textContent).toBe('Waiting 3s') + } finally { + vi.clearAllTimers() + vi.useRealTimers() + } + }) + + it.each(['browser', 'workflow', 'research', 'deploy', 'file', 'table'])( + 'summarizes and expands the full %s activity history', + (agentName) => { + const items: AgentGroupItem[] = [ + { + type: 'tool', + data: { id: 'read', toolName: 'read', displayTitle: 'Reading notes', status: 'success' }, + }, + { + type: 'tool', + data: { + id: 'run', + toolName: 'terminal_run', + displayTitle: 'Running checks', + status: 'success', + }, + }, + ] + act(() => + root.render( + createElement(AgentGroupView, { + agentName, + agentLabel: 'Agent', + items, + ToolCallComponent: ({ toolCallId, displayTitle }: ToolCallItemProps) => + createElement('div', { 'data-tool-call-id': toolCallId }, displayTitle), + }) + ) + ) + const header = container.querySelector('button') + expect(header?.getAttribute('aria-label')).toBe('Agent — Read files, ran commands') + expect(container.querySelectorAll('[data-tool-call-id]')).toHaveLength(0) + act(() => header?.click()) + expect( + Array.from(container.querySelectorAll('[data-tool-call-id]'), (row) => + row.getAttribute('data-tool-call-id') + ) + ).toEqual(['read', 'run']) + act(() => header?.click()) + expect(header?.getAttribute('aria-expanded')).toBe('false') + } + ) + + it('reveals a nested terminal handoff through collapsed ancestors', () => { + act(() => + root.render( + createElement(AgentGroupView, { + agentName: 'workflow', + agentLabel: 'Workflow', + isLaneOpen: true, + isStreaming: true, + items: [ + group([ + { + type: 'tool', + data: { + id: 'handoff', + toolName: 'terminal', + displayTitle: 'Finish signing in', + status: 'executing', + params: { operation: 'handoff' }, + }, + }, + ]), + ], + ToolCallComponent: ({ toolCallId, displayTitle }: ToolCallItemProps) => + createElement('div', { 'data-tool-call-id': toolCallId }, displayTitle), + }) + ) + ) + const headers = Array.from(container.querySelectorAll('button')) + expect(headers).toHaveLength(2) + expect(headers.every((header) => header.getAttribute('aria-expanded') === 'true')).toBe(true) + act(() => headers[0].click()) + expect(headers[0].getAttribute('aria-expanded')).toBe('true') + expect( + container.querySelector('[data-tool-call-id="handoff"]')?.closest('[data-state="closed"]') + ).toBeNull() }) it('keeps a browser question and answer after the main agent resumes tool activity', () => { @@ -197,7 +361,9 @@ describe('AgentGroup inline main activity', () => { 'Choose a result.: Open the second result.' ) expect(container.textContent).toContain('Searched files') - expect(container.querySelector('button, svg, [data-state], .pl-6')).toBeNull() + expect( + container.querySelector('[data-takeover-answer="true"]')?.closest('[data-state]') + ).toBeNull() }) it('keeps pending permissions and terminal handoffs visible when newer tools arrive', () => { @@ -258,7 +424,12 @@ describe('AgentGroup inline main activity', () => { row.getAttribute('data-tool-call-id') ) ).toEqual(['permission', 'handoff', 'latest']) - expect(container.querySelector('[data-state], .pl-6')).toBeNull() + expect( + container.querySelector('[data-tool-call-id="permission"]')?.closest('[data-state]') + ).toBeNull() + expect( + container.querySelector('[data-tool-call-id="handoff"]')?.closest('[data-state]') + ).toBeNull() }) }) diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/main-agent-activity.ts b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/main-agent-activity.ts deleted file mode 100644 index f8514d9c8a5..00000000000 --- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/main-agent-activity.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { Terminal as TerminalTool } from '@/lib/copilot/generated/tool-catalog-v1' -import { RETIRED_BROWSER_REQUEST_TAKEOVER_ID } from '@/lib/copilot/tools/retired-tools' -import type { AgentGroupItem } from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group-view' -import { ToolCallStatus } from '@/app/workspace/[workspaceId]/home/types' - -export function getLatestToolId(items: AgentGroupItem[]): string | undefined { - for (let index = items.length - 1; index >= 0; index--) { - const item = items[index] - if (item.type === 'tool') return item.data.id - } -} - -/** Keep interaction controls and answers when a newer tool replaces the activity text. */ -export function getVisibleMainAgentItems( - items: AgentGroupItem[], - latestToolId = getLatestToolId(items) -): AgentGroupItem[] { - return items.filter( - (item) => - item.type !== 'tool' || - item.data.id === latestToolId || - item.data.status === ToolCallStatus.awaiting_approval || - (item.data.toolName === RETIRED_BROWSER_REQUEST_TAKEOVER_ID && - item.data.status === ToolCallStatus.success) || - (item.data.status === ToolCallStatus.executing && - item.data.toolName === TerminalTool.id && - item.data.params?.operation === 'handoff') - ) -} diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/main-agent-activity.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/main-agent-activity.tsx new file mode 100644 index 00000000000..82e62b4e3a4 --- /dev/null +++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/main-agent-activity.tsx @@ -0,0 +1,69 @@ +import { type ComponentType, Fragment, type ReactNode } from 'react' +import { RETIRED_BROWSER_REQUEST_TAKEOVER_ID } from '@/lib/copilot/tools/retired-tools' +import type { AgentGroupItem } from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group-view' +import { ToolActivityGroup } from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-activity-group' +import type { ToolCallItemProps } from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-call-item' +import { needsToolInput } from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-interactions' +import type { ToolCallData } from '@/app/workspace/[workspaceId]/home/types' + +interface MainAgentActivityProps { + items: AgentGroupItem[] + ToolCallComponent: ComponentType + renderItem: (item: AgentGroupItem, index: number) => ReactNode + autoScrollActivity: boolean +} + +/** Keep answers and interactions in the transcript, outside collapsible tool history. */ +function isStandaloneItem(item: AgentGroupItem): boolean { + return ( + item.type !== 'tool' || + needsToolInput(item.data) || + item.data.toolName === RETIRED_BROWSER_REQUEST_TAKEOVER_ID + ) +} + +export function MainAgentActivity({ + items, + ToolCallComponent, + renderItem, + autoScrollActivity, +}: MainAgentActivityProps) { + const activity: ReactNode[] = [] + let tools: ToolCallData[] = [] + const flushTools = () => { + if (tools.length === 0) return + activity.push( + + ) + tools = [] + } + + for (const [index, item] of items.entries()) { + if (item.type === 'tool' && !isStandaloneItem(item)) { + tools.push(item.data) + continue + } + flushTools() + activity.push( + + {renderItem(item, index)} + + ) + } + flushTools() + + return
{activity}
+} diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-activity-group.test.ts b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-activity-group.test.ts new file mode 100644 index 00000000000..125b15065c4 --- /dev/null +++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-activity-group.test.ts @@ -0,0 +1,61 @@ +/** + * @vitest-environment node + */ +import { describe, expect, it } from 'vitest' +import { getToolActivitySummary } from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-activity-group' +import type { ToolCallData, ToolCallStatus } from '@/app/workspace/[workspaceId]/home/types' + +function tool(toolName: string, status: ToolCallStatus = 'success'): ToolCallData { + return { id: toolName, toolName, displayTitle: `Running ${toolName}`, status } +} + +describe('getToolActivitySummary', () => { + it('summarizes distinct actions in the order they occurred', () => { + expect( + getToolActivitySummary([tool('read'), tool('terminal_run'), tool('read'), tool('grep')]) + ).toBe('Read files, ran commands, searched files') + }) + + it('summarizes browser navigation and interactions without repeating actions', () => { + expect( + getToolActivitySummary([ + tool('browser_navigate'), + tool('browser_read_text'), + tool('browser_type'), + tool('browser_navigate'), + ]) + ).toBe('Navigated pages, read pages, entered text') + }) + + it('does not describe unsuccessful work as completed actions', () => { + expect( + getToolActivitySummary([ + tool('read'), + tool('apply_file_edit', 'error'), + tool('terminal_run', 'cancelled'), + tool('browser_type', 'rejected'), + ]) + ).toBe('Read files · 1 failed · 1 stopped · 1 skipped') + }) + + it('does not invent actions when all calls failed or were stopped', () => { + expect( + getToolActivitySummary([ + tool('apply_file_edit', 'error'), + tool('terminal_run', 'interrupted'), + ]) + ).toBe('Tool activity · 1 failed · 1 stopped') + }) + + it('keeps an individual tool’s descriptive title', () => { + expect( + getToolActivitySummary([{ ...tool('read'), displayTitle: 'Reading project notes' }]) + ).toBe('Read project notes') + }) + + it('describes terminal runs from their operation', () => { + expect( + getToolActivitySummary([{ ...tool('terminal'), params: { operation: 'run' } }, tool('read')]) + ).toBe('Ran commands, read files') + }) +}) diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-activity-group.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-activity-group.tsx new file mode 100644 index 00000000000..f5ca43bda29 --- /dev/null +++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-activity-group.tsx @@ -0,0 +1,152 @@ +'use client' + +import { type ComponentType, useId, useState } from 'react' +import { ChevronDown, cn, Expandable, ExpandableContent } from '@sim/emcn' +import { ActivityStatus } from '@/components/ui/activity-status' +import { getToolStatusDisplayTitle } from '@/lib/copilot/tools/tool-display' +import { ActivityViewport } from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/activity-viewport' +import type { ToolCallItemProps } from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-call-item' +import { getToolIcon } from '@/app/workspace/[workspaceId]/home/components/message-content/utils' +import { type ToolCallData, ToolCallStatus } from '@/app/workspace/[workspaceId]/home/types' + +const ACTIVITY_LABELS: Record = { + read: 'read files', + glob: 'found files', + grep: 'searched files', + web_search: 'searched the web', + web_fetch: 'read web pages', + web_scrape: 'read web pages', + search_library_docs: 'read documentation', + search_knowledge_base: 'searched sources', + call_integration_tool: 'used integrations', + prepare_file_edit: 'prepared file edits', + apply_file_edit: 'edited files', + create_workflow: 'created workflows', + edit_workflow: 'edited workflows', + terminal: 'used the terminal', + terminal_run: 'ran commands', + terminal_input: 'sent terminal input', + terminal_read: 'read terminal output', + run_function: 'ran code', + run_code: 'ran code', + browser_navigate: 'navigated pages', + browser_open_tab: 'opened tabs', + browser_switch_tab: 'switched tabs', + browser_close_tab: 'closed tabs', + browser_snapshot: 'read pages', + browser_read_text: 'read pages', + browser_extract: 'read pages', + browser_find: 'searched pages', + browser_click: 'clicked elements', + browser_type: 'entered text', + browser_screenshot: 'captured screenshots', + browser_scroll: 'scrolled pages', + browser_select_option: 'selected options', + browser_set_checked: 'updated selections', + open_resource: 'opened resources', + wait: 'waited', +} + +/** Summarize completed actions without describing failed or skipped work as successful. */ +export function getToolActivitySummary(tools: ToolCallData[]): string { + if (tools.length === 1) { + const tool = tools[0] + return getToolStatusDisplayTitle(tool.displayTitle, tool.status, tool.toolName) + } + const labels = new Set() + let failed = 0 + let stopped = 0 + let skipped = 0 + for (const tool of tools) { + if (tool.status === ToolCallStatus.success) { + const label = + tool.toolName === 'terminal' && tool.params?.operation === 'run' + ? 'ran commands' + : (ACTIVITY_LABELS[tool.toolName] ?? + (tool.toolName.startsWith('browser_') ? 'used the browser' : 'used tools')) + labels.add(label) + } else if (tool.status === ToolCallStatus.error) failed++ + else if (tool.status === ToolCallStatus.cancelled || tool.status === ToolCallStatus.interrupted) + stopped++ + else if (tool.status === ToolCallStatus.skipped || tool.status === ToolCallStatus.rejected) + skipped++ + } + const summary = Array.from(labels).join(', ') + const outcomes = [ + failed && `${failed} failed`, + stopped && `${stopped} stopped`, + skipped && `${skipped} skipped`, + ].filter(Boolean) + return [ + summary ? summary[0].toUpperCase() + summary.slice(1) : 'Tool activity', + ...outcomes, + ].join(' · ') +} + +interface ToolActivityGroupProps { + tools: ToolCallData[] + ToolCallComponent: ComponentType + autoScrollActivity?: boolean +} + +export function ToolActivityGroup({ + tools, + ToolCallComponent, + autoScrollActivity = true, +}: ToolActivityGroupProps) { + const contentId = useId() + const [expanded, setExpanded] = useState(false) + let activeTool: ToolCallData | undefined + for (let index = tools.length - 1; index >= 0; index--) { + if (tools[index].status === ToolCallStatus.executing) { + activeTool = tools[index] + break + } + } + const headerTool = activeTool ?? (tools.length === 1 ? tools[0] : undefined) + const summary = headerTool + ? getToolStatusDisplayTitle(headerTool.displayTitle, headerTool.status, headerTool.toolName) + : getToolActivitySummary(tools) + const SummaryIcon = getToolIcon(tools[0].toolName) + + return ( +
+ + + + +
+ {tools.map((tool) => ( + + ))} +
+ + + +
+ ) +} diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-call-item.test.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-call-item.test.tsx index 065448ac4e7..b52d7b1b0e6 100644 --- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-call-item.test.tsx +++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-call-item.test.tsx @@ -20,7 +20,7 @@ describe('ToolCallItem', () => { }) it.each(['executing', 'success', 'error', 'cancelled'] as const)( - 'renders the %s tool row without an icon', + 'renders the %s tool row with its EMCN icon', (status) => { const markup = renderToStaticMarkup( { /> ) - expect(markup).not.toContain('} + icon={ + BlockIcon ? ( + + ) : ( + + ) + } /> ) } diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-interactions.ts b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-interactions.ts new file mode 100644 index 00000000000..245c0f4a112 --- /dev/null +++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-interactions.ts @@ -0,0 +1,12 @@ +import { Terminal as TerminalTool } from '@/lib/copilot/generated/tool-catalog-v1' +import { type ToolCallData, ToolCallStatus } from '@/app/workspace/[workspaceId]/home/types' + +/** A permission decision or terminal handoff must stay reachable while an agent is waiting. */ +export function needsToolInput(tool: ToolCallData): boolean { + return ( + tool.status === ToolCallStatus.awaiting_approval || + (tool.status === ToolCallStatus.executing && + tool.toolName === TerminalTool.id && + tool.params?.operation === 'handoff') + ) +} diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/message-content.test.ts b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/message-content.test.ts index 12c57a11c7e..c89261507ee 100644 --- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/message-content.test.ts +++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/message-content.test.ts @@ -335,7 +335,7 @@ describe('parseBlocks span-identity tree', () => { expect(segments[0].items.some((item) => item.type === 'tool')).toBe(true) }) - it('replaces earlier main activity across prose and subagents while preserving stream order', () => { + it('retains main activity around prose and subagents in stream order', () => { const blocks: ContentBlock[] = [ mainText('Let me search.'), mainToolCall('t1', 'grep'), @@ -349,18 +349,19 @@ describe('parseBlocks span-identity tree', () => { const segments = parseBlocks(blocks) const shape = segments.map((s) => (s.type === 'agent_group' ? s.agentName : s.type)) - expect(shape).toEqual(['text', 'research', 'text', 'mothership']) + expect(shape).toEqual(['text', 'mothership', 'research', 'text', 'mothership']) const mothershipGroups = segments.filter( (s) => s.type === 'agent_group' && s.agentName === 'mothership' ) - expect(mothershipGroups).toHaveLength(1) - const [latest] = mothershipGroups - if (latest.type !== 'agent_group') { - throw new Error('expected mothership group') - } - expect(latest.items).toHaveLength(1) - expect(latest.items[0].type === 'tool' && latest.items[0].data.id).toBe('t2') + expect(mothershipGroups).toHaveLength(2) + expect( + mothershipGroups.flatMap((group) => + group.type === 'agent_group' + ? group.items.flatMap((item) => (item.type === 'tool' ? [item.data.id] : [])) + : [] + ) + ).toEqual(['t1', 't2']) }) it('absorbs the dispatch tool of a nested file subagent from its parent span group', () => { @@ -715,7 +716,7 @@ describe('narration text seams', () => { }) describe('parseBlocks legacy — thinking between top-level tools', () => { - it('shows only the latest main tool across intervening thinking', () => { + it('retains every main tool across intervening thinking', () => { const blocks: ContentBlock[] = [ { type: 'thinking', content: 'planning the search', timestamp: 1 }, mainToolCall('t1', 'grep'), @@ -728,11 +729,14 @@ describe('parseBlocks legacy — thinking between top-level tools', () => { expect(groups).toHaveLength(1) if (groups[0].type !== 'agent_group') throw new Error('expected group') expect(groups[0].agentName).toBe('mothership') - expect(groups[0].items).toHaveLength(1) - expect(groups[0].items[0].type === 'tool' && groups[0].items[0].data.id).toBe('t3') + expect(groups[0].items.map((item) => item.type === 'tool' && item.data.id)).toEqual([ + 't1', + 't2', + 't3', + ]) }) - it('replaces earlier main tools across prose without leaving an empty activity segment', () => { + it('keeps separate activity groups around assistant prose', () => { const blocks: ContentBlock[] = [ mainToolCall('t1', 'grep'), mainText('Here is what I found so far.'), @@ -740,8 +744,8 @@ describe('parseBlocks legacy — thinking between top-level tools', () => { ] const segments = parseBlocks(blocks) const groups = segments.filter((s) => s.type === 'agent_group') - expect(groups).toHaveLength(1) - expect(segments.map((segment) => segment.type)).toEqual(['text', 'agent_group']) + expect(groups).toHaveLength(2) + expect(segments.map((segment) => segment.type)).toEqual(['agent_group', 'text', 'agent_group']) }) it('does not let main thinking affect subagent lane grouping', () => { @@ -783,7 +787,7 @@ describe('parseBlocks legacy — thinking between top-level tools', () => { }) describe('assistantMessageHasVisibleExecutingTool', () => { - it.each([undefined, 'main'])('ignores a replaced running tool with spanId=%s', (spanId) => { + it.each([undefined, 'main'])('retains an earlier running tool with spanId=%s', (spanId) => { const blocks: ContentBlock[] = [ { type: 'tool_call', @@ -795,8 +799,8 @@ describe('assistantMessageHasVisibleExecutingTool', () => { mainToolCall('latest', 'read'), ] const segments = parseBlocks(blocks) - expect(segments.map((segment) => segment.type)).toEqual(['text', 'agent_group']) - expect(assistantMessageHasVisibleExecutingTool(segments)).toBe(false) + expect(segments.map((segment) => segment.type)).toEqual(['agent_group', 'text', 'agent_group']) + expect(assistantMessageHasVisibleExecutingTool(segments)).toBe(true) }) it('does not treat an open subagent lane as an executing tool row', () => { @@ -897,6 +901,7 @@ describe('parseBlocks main activity controls', () => { 'permission', 'handoff', 'answered-takeover', + 'older', 'latest', ]) const completed = blocks.map((block) => @@ -908,6 +913,7 @@ describe('parseBlocks main activity controls', () => { 'permission', 'handoff', 'answered-takeover', + 'older', 'latest', ]) expect(visibleTools(completed).at(-1)?.status).toBe('success') diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/message-content.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/message-content.tsx index 76495ca4bb9..54931cf07dd 100644 --- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/message-content.tsx +++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/message-content.tsx @@ -21,10 +21,6 @@ import { humanizeToolName, } from '@/lib/copilot/tools/tool-display' import { useChatSurface } from '@/app/workspace/[workspaceId]/home/components/chat-surface-context' -import { - getLatestToolId, - getVisibleMainAgentItems, -} from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/main-agent-activity' import type { CredentialSubmissionPayload } from '@/app/workspace/[workspaceId]/home/components/message-content/components/special-tags' import { collectMessageSources } from '@/app/workspace/[workspaceId]/home/components/message-content/message-sources' import { resolveMessageCitations } from '@/app/workspace/[workspaceId]/home/components/message-content/resolve-citations' @@ -494,7 +490,7 @@ function parseBlocksWithSpanTree(blocks: ContentBlock[]): MessageSegment[] { * Groups content blocks into agent-scoped segments. * Dispatch tool_calls (name matches a subagent key, no calledBy) are absorbed * into the agent header. Inner tool_calls are nested underneath their agent. - * Main-agent tool calls share one latest activity status across all segments. + * Main-agent segments retain their tool history for inline activity summaries. * * New backends stamp every subagent block with deterministic span identity; in * that case {@link parseBlocksWithSpanTree} builds a real nested tree. The @@ -502,22 +498,9 @@ function parseBlocksWithSpanTree(blocks: ContentBlock[]): MessageSegment[] { * span identity existed. */ export function parseBlocks(blocks: ContentBlock[]): MessageSegment[] { - const segments = blocks.some((block) => Boolean(block.spanId)) + return blocks.some((block) => Boolean(block.spanId)) ? parseBlocksWithSpanTree(blocks) : parseBlocksLegacy(blocks) - let latestToolId: string | undefined - for (let index = segments.length - 1; index >= 0; index--) { - const segment = segments[index] - if (segment.type !== 'agent_group' || segment.agentName !== 'mothership') continue - latestToolId = getLatestToolId(segment.items) - if (latestToolId !== undefined) break - } - - return segments.flatMap((segment) => { - if (segment.type !== 'agent_group' || segment.agentName !== 'mothership') return [segment] - const items = getVisibleMainAgentItems(segment.items, latestToolId) - return items.length > 0 ? [{ ...segment, items }] : [] - }) } function joinRenderableText(parts: string[]): string { diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/utils.ts b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/utils.ts index 722770fbfa9..db816f21082 100644 --- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/utils.ts +++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/utils.ts @@ -112,6 +112,10 @@ export function getAgentIcon(name: string): IconComponent { return TOOL_ICONS[name as keyof typeof TOOL_ICONS] ?? Blimp } +export function getToolIcon(name: string): IconComponent { + return TOOL_ICONS[name] ?? Wrench +} + export type MessagePhase = 'streaming' | 'revealing' | 'settled' interface DeriveMessagePhaseArgs { diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/suggested-actions/suggested-actions.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/suggested-actions/suggested-actions.tsx index 87a86f21752..4901e6b2dca 100644 --- a/apps/sim/app/workspace/[workspaceId]/home/components/suggested-actions/suggested-actions.tsx +++ b/apps/sim/app/workspace/[workspaceId]/home/components/suggested-actions/suggested-actions.tsx @@ -1,7 +1,7 @@ 'use client' import { useMemo, useState } from 'react' -import { ArrowRight, ChevronDown, cn, Expandable, ExpandableContent } from '@sim/emcn' +import { ArrowRight, ChevronDown, cn, Expandable, ExpandableContent, OverflowText } from '@sim/emcn' import { Table } from '@sim/emcn/icons' import { stripVersionSuffix } from '@sim/utils/string' import { useParams } from 'next/navigation' @@ -361,9 +361,11 @@ export function SuggestedActions({ onSelectPrompt }: SuggestedActionsProps) { )} > - - {action.label} - + ) diff --git a/apps/sim/components/ui/activity-status.tsx b/apps/sim/components/ui/activity-status.tsx index e6e66c12d0e..43b66444e5b 100644 --- a/apps/sim/components/ui/activity-status.tsx +++ b/apps/sim/components/ui/activity-status.tsx @@ -1,4 +1,5 @@ import type { ReactNode } from 'react' +import { OverflowText } from '@sim/emcn' import { ShimmerText } from '@/components/ui/shimmer-text' interface ActivityStatusProps { @@ -10,17 +11,17 @@ interface ActivityStatusProps { /** Inline tool status with the shared shimmer while active. */ export function ActivityStatus({ label, isActive, icon }: ActivityStatusProps) { return ( -
+ {icon} - {isActive ? ( - - {label} - - ) : ( - - {label} - - )} -
+ + {isActive ? ( + {label} + ) : undefined} + + ) } From b970af91c2559080da01205acba1753861759b6f Mon Sep 17 00:00:00 2001 From: Waleed Latif Date: Thu, 10 Sep 2026 18:01:38 -0700 Subject: [PATCH 2/3] fix(chat): share activity disclosure and status lifecycle --- .../hero-chat-loop/hero-tool-call-item.tsx | 4 +- .../agent-group/activity-disclosure.tsx | 59 +++++++++++ .../agent-group/activity-viewport.tsx | 46 +++------ .../agent-group/agent-group-view.tsx | 56 +++-------- .../agent-group/agent-group.test.ts | 54 ++++++++-- .../agent-group/tool-activity-group.test.ts | 31 ++++++ .../agent-group/tool-activity-group.tsx | 98 ++++++++++--------- .../components/agent-group/tool-call-item.tsx | 29 +++--- .../home/components/message-content/utils.ts | 10 ++ .../lib/copilot/tools/tool-display.test.ts | 21 ++++ apps/sim/lib/copilot/tools/tool-display.ts | 31 +++--- 11 files changed, 284 insertions(+), 155 deletions(-) create mode 100644 apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/activity-disclosure.tsx diff --git a/apps/sim/app/(landing)/components/hero/components/hero-chat-loop/hero-tool-call-item.tsx b/apps/sim/app/(landing)/components/hero/components/hero-chat-loop/hero-tool-call-item.tsx index 647bb1cd239..e39953a37af 100644 --- a/apps/sim/app/(landing)/components/hero/components/hero-chat-loop/hero-tool-call-item.tsx +++ b/apps/sim/app/(landing)/components/hero/components/hero-chat-loop/hero-tool-call-item.tsx @@ -8,6 +8,7 @@ import { getToolIcon } from '@/app/workspace/[workspaceId]/home/components/messa /** Demo fixtures have known brands, so the landing page never loads the block registry. */ export function HeroToolCallItem({ toolCallId, + renderStatus, toolName, displayTitle, status, @@ -18,11 +19,12 @@ export function HeroToolCallItem({ : toolCallId === 'hero-read-table' ? Table : getToolIcon(toolName) - return ( + const activity = ( } /> ) + return renderStatus ? renderStatus(activity) : activity } diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/activity-disclosure.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/activity-disclosure.tsx new file mode 100644 index 00000000000..c25f9b774e3 --- /dev/null +++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/activity-disclosure.tsx @@ -0,0 +1,59 @@ +'use client' + +import { type ReactNode, useId } from 'react' +import { ChevronDown, cn, Expandable, ExpandableContent } from '@sim/emcn' +import { ActivityViewport } from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/activity-viewport' + +interface ActivityDisclosureProps { + header: ReactNode + children: ReactNode + expanded: boolean + onToggle: () => void + isStreaming: boolean + unbounded?: boolean +} + +/** Shared disclosure chrome; callers own expansion and blocking-interaction decisions. */ +export function ActivityDisclosure({ + header, + children, + expanded, + onToggle, + isStreaming, + unbounded = false, +}: ActivityDisclosureProps) { + const contentId = useId() + const headerId = useId() + + return ( +
+ + + + + {children} + + + +
+ ) +} diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/activity-viewport.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/activity-viewport.tsx index af9ad2fc87f..977a74557aa 100644 --- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/activity-viewport.tsx +++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/activity-viewport.tsx @@ -1,7 +1,7 @@ 'use client' -import { type ReactNode, useEffect, useLayoutEffect, useRef, useState } from 'react' -import { cn } from '@sim/emcn' +import { type ReactNode, useEffect, useLayoutEffect, useRef } from 'react' +import { cn, scrollFadeAttributes, scrollFadeClass, useScrollEdges } from '@sim/emcn' interface ActivityViewportProps { children: ReactNode @@ -21,7 +21,7 @@ export function ActivityViewport({ const rafRef = useRef(null) const stickToBottomRef = useRef(true) const prevScrollTopRef = useRef(0) - const [hasOverflow, setHasOverflow] = useState(false) + const edges = useScrollEdges(ref, { enabled: !unbounded }) useEffect(() => { if (unbounded) { @@ -30,8 +30,7 @@ export function ActivityViewport({ } const el = ref.current if (!el) return - // Upward user input detaches auto-stick; a downward scroll reaching the - // bottom re-attaches it (a small upward flick can't re-stick itself). + /** Upward input detaches auto-stick; reaching the bottom while scrolling down resumes it. */ const handleWheel = (e: WheelEvent) => { if (e.deltaY < 0) stickToBottomRef.current = false } @@ -51,20 +50,11 @@ export function ActivityViewport({ }, [unbounded]) useLayoutEffect(() => { - const el = ref.current if (rafRef.current !== null) { window.cancelAnimationFrame(rafRef.current) rafRef.current = null } - if (unbounded) { - setHasOverflow(false) - return - } - if (el) { - const next = el.scrollHeight > el.clientHeight - setHasOverflow((prev) => (prev === next ? prev : next)) - } - if (!isStreaming) return + if (unbounded || !isStreaming) return const tick = () => { const node = ref.current if (!node || !stickToBottomRef.current) { @@ -90,23 +80,17 @@ export function ActivityViewport({ }) return ( -
-
- {children} -
- {!unbounded && hasOverflow && ( - <> -
-
- +
+ {children}
) } diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group-view.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group-view.tsx index 412b08b7fe3..584387a69f8 100644 --- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group-view.tsx +++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group-view.tsx @@ -1,11 +1,10 @@ 'use client' -import { type ComponentType, type ReactNode, useId, useMemo, useState } from 'react' -import { ChevronDown, cn, Expandable, ExpandableContent } from '@sim/emcn' +import { type ComponentType, type ReactNode, useMemo, useState } from 'react' import { ActivityStatus } from '@/components/ui/activity-status' import { isBrowserAgentAvailable } from '@/lib/browser-agent/transport' import { RETIRED_BROWSER_REQUEST_TAKEOVER_ID } from '@/lib/copilot/tools/retired-tools' -import { ActivityViewport } from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/activity-viewport' +import { ActivityDisclosure } from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/activity-disclosure' import { BrowserAgentIcon } from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/browser-agent-icon' import { renderInlineMarkdown } from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/inline-markdown' import { MainAgentActivity } from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/main-agent-activity' @@ -77,7 +76,6 @@ function collectGroupTools(items: AgentGroupItem[]): ToolCallData[] { function hasPendingInteraction(items: AgentGroupItem[]): boolean { return items.some((item) => { if (item.type === 'tool') return needsToolInput(item.data) - // Text rows carry no tool calls, so only nested groups need recursing into. return item.type === 'agent_group' ? hasPendingInteraction(item.group.items) : false }) } @@ -152,7 +150,6 @@ export function AgentGroupView({ ToolCallComponent, renderBrowserTakeover, }: AgentGroupViewProps) { - const contentId = useId() const AgentIcon = getAgentIcon(agentName) const agentIcon = agentName === 'browser' ? ( @@ -194,9 +191,7 @@ export function AgentGroupView({ const [manualExpanded, setManualExpanded] = useState(defaultExpanded) const [expandedTakeoverId, setExpandedTakeoverId] = useState(null) const pendingInteraction = hasPendingInteraction(items) - // 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. + /** Blocking interactions override manual collapse so the user can resume the turn. */ const expanded = pendingInteraction || nestedBrowserTakeover || @@ -238,6 +233,7 @@ export function AgentGroupView({ isDelegating={item.group.isDelegating} isStreaming={isStreaming} isLaneOpen={item.group.isOpen} + autoScrollActivity={autoScrollActivity} /> ) } @@ -271,42 +267,22 @@ export function AgentGroupView({ ) return ( -
- {isMainAgent ? null : hasItems ? ( - + {activity} + ) : ( header )} - {isMainAgent ? ( - activity - ) : hasItems ? ( - - - - {activity} - - - - ) : null} {activeBrowserTakeover && (
{renderBrowserTakeover?.(activeBrowserTakeover.reason)} diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group.test.ts b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group.test.ts index 2531afb75da..10e7f827292 100644 --- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group.test.ts +++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group.test.ts @@ -111,10 +111,14 @@ describe('AgentGroup inline main activity', () => { beforeEach(() => { ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true container = document.createElement('div') + document.body.appendChild(container) root = createRoot(container) }) - afterEach(() => act(() => root.unmount())) + afterEach(() => { + act(() => root.unmount()) + container.remove() + }) it('replaces the active status in place and expands the full completed history', () => { const first: AgentGroupItem = { @@ -206,8 +210,10 @@ describe('AgentGroup inline main activity', () => { ) }) - it('starts a fresh countdown when the latest wait tool changes', () => { + it('shares one countdown and preserves the viewport across active tool changes', () => { vi.useFakeTimers() + const setIntervalSpy = vi.spyOn(globalThis, 'setInterval') + const clearIntervalSpy = vi.spyOn(globalThis, 'clearInterval') try { const wait: AgentGroupItem = { type: 'tool', @@ -233,12 +239,36 @@ describe('AgentGroup inline main activity', () => { render([wait]) act(() => vi.advanceTimersByTime(2000)) expect(container.textContent).toBe('Waiting 1s') + const header = container.querySelector('button') + act(() => header?.click()) + expect(header?.hasAttribute('aria-label')).toBe(false) + expect(header?.textContent).toBe('Waiting 1s') + expect(header).toHaveAccessibleName('Waiting 1s') + expect(container.querySelector('[data-state="open"]')?.textContent).toBe('Waiting 1s') + expect(setIntervalSpy).toHaveBeenCalledTimes(1) + act(() => header?.click()) + act(() => header?.click()) + expect(container.querySelector('[data-state="open"]')?.textContent).toBe('Waiting 1s') + const viewport = container.querySelector('.overflow-y-auto') render([ { ...wait, data: { ...wait.data, status: 'success' } }, { ...wait, data: { ...wait.data, id: 'wait-second' } }, ]) - expect(container.textContent).toBe('Waiting 3s') + expect(header?.textContent).toBe('Waiting 3s') + expect(header).toHaveAccessibleName('Waiting 3s') + expect(container.querySelector('.overflow-y-auto')).toBe(viewport) + expect(container.querySelector('[data-state="open"]')?.textContent).toBe('WaitedWaiting 3s') + expect(setIntervalSpy).toHaveBeenCalledTimes(2) + render([ + { ...wait, data: { ...wait.data, status: 'success' } }, + { ...wait, data: { ...wait.data, id: 'wait-second', status: 'success' } }, + ]) + expect(header?.textContent).toBe('Waited') + expect(container.querySelector('.overflow-y-auto')).toBe(viewport) + expect(clearIntervalSpy).toHaveBeenCalledTimes(2) } finally { + setIntervalSpy.mockRestore() + clearIntervalSpy.mockRestore() vi.clearAllTimers() vi.useRealTimers() } @@ -256,9 +286,10 @@ describe('AgentGroup inline main activity', () => { type: 'tool', data: { id: 'run', - toolName: 'terminal_run', + toolName: 'terminal', displayTitle: 'Running checks', status: 'success', + params: { operation: 'run' }, }, }, ] @@ -274,7 +305,8 @@ describe('AgentGroup inline main activity', () => { ) ) const header = container.querySelector('button') - expect(header?.getAttribute('aria-label')).toBe('Agent — Read files, ran commands') + expect(header?.textContent).toBe('Agent — Read files, ran commands') + expect(header).toHaveAccessibleName('Agent — Read files, ran commands') expect(container.querySelectorAll('[data-tool-call-id]')).toHaveLength(0) act(() => header?.click()) expect( @@ -309,8 +341,10 @@ describe('AgentGroup inline main activity', () => { }, ]), ], - ToolCallComponent: ({ toolCallId, displayTitle }: ToolCallItemProps) => - createElement('div', { 'data-tool-call-id': toolCallId }, displayTitle), + ToolCallComponent: ({ toolCallId, displayTitle, renderStatus }: ToolCallItemProps) => { + const status = createElement('div', { 'data-tool-call-id': toolCallId }, displayTitle) + return renderStatus ? renderStatus(status) : status + }, }) ) ) @@ -413,8 +447,10 @@ describe('AgentGroup inline main activity', () => { agentLabel: 'Sim', items, isStreaming: true, - ToolCallComponent: ({ toolCallId, displayTitle }: ToolCallItemProps) => - createElement('div', { 'data-tool-call-id': toolCallId }, displayTitle), + ToolCallComponent: ({ toolCallId, displayTitle, renderStatus }: ToolCallItemProps) => { + const status = createElement('div', { 'data-tool-call-id': toolCallId }, displayTitle) + return renderStatus ? renderStatus(status) : status + }, }) ) }) diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-activity-group.test.ts b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-activity-group.test.ts index 125b15065c4..7f096504bc6 100644 --- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-activity-group.test.ts +++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-activity-group.test.ts @@ -53,6 +53,37 @@ describe('getToolActivitySummary', () => { ).toBe('Read project notes') }) + it.each([ + ['skipped', 'Skipped running checks'], + ['interrupted', 'Stopped running checks'], + ] as const)('labels a single %s tool as finished', (status, expected) => { + expect( + getToolActivitySummary([{ ...tool('terminal', status), displayTitle: 'Running checks' }]) + ).toBe(expected) + }) + + it('keeps unknown tools visible with a neutral summary', () => { + expect(getToolActivitySummary([tool('future_tool'), tool('browser_future_action')])).toBe( + 'Used tools, used the browser' + ) + }) + + it('describes current browser and workflow tools', () => { + expect( + getToolActivitySummary([ + tool('browser_open_url'), + tool('browser_fill_form'), + tool('browser_insert_text'), + tool('read_document'), + tool('run_workflow'), + tool('deploy_as_api'), + tool('table_rows'), + ]) + ).toBe( + 'Navigated pages, filled forms, entered text, read documents, ran workflows, deployed workflows, used tables' + ) + }) + it('describes terminal runs from their operation', () => { expect( getToolActivitySummary([{ ...tool('terminal'), params: { operation: 'run' } }, tool('read')]) diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-activity-group.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-activity-group.tsx index f5ca43bda29..87e165806f5 100644 --- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-activity-group.tsx +++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-activity-group.tsx @@ -1,16 +1,16 @@ 'use client' -import { type ComponentType, useId, useState } from 'react' -import { ChevronDown, cn, Expandable, ExpandableContent } from '@sim/emcn' +import { type ComponentType, Fragment, useState } from 'react' import { ActivityStatus } from '@/components/ui/activity-status' import { getToolStatusDisplayTitle } from '@/lib/copilot/tools/tool-display' -import { ActivityViewport } from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/activity-viewport' +import { ActivityDisclosure } from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/activity-disclosure' import type { ToolCallItemProps } from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-call-item' import { getToolIcon } from '@/app/workspace/[workspaceId]/home/components/message-content/utils' import { type ToolCallData, ToolCallStatus } from '@/app/workspace/[workspaceId]/home/types' -const ACTIVITY_LABELS: Record = { +const ACTIVITY_LABELS: Readonly> = { read: 'read files', + read_document: 'read documents', glob: 'found files', grep: 'searched files', web_search: 'searched the web', @@ -23,6 +23,10 @@ const ACTIVITY_LABELS: Record = { apply_file_edit: 'edited files', create_workflow: 'created workflows', edit_workflow: 'edited workflows', + run_workflow: 'ran workflows', + run_workflow_until_block: 'ran workflows', + deploy_as_api: 'deployed workflows', + table_rows: 'used tables', terminal: 'used the terminal', terminal_run: 'ran commands', terminal_input: 'sent terminal input', @@ -30,6 +34,7 @@ const ACTIVITY_LABELS: Record = { run_function: 'ran code', run_code: 'ran code', browser_navigate: 'navigated pages', + browser_open_url: 'navigated pages', browser_open_tab: 'opened tabs', browser_switch_tab: 'switched tabs', browser_close_tab: 'closed tabs', @@ -38,14 +43,18 @@ const ACTIVITY_LABELS: Record = { browser_extract: 'read pages', browser_find: 'searched pages', browser_click: 'clicked elements', + browser_click_at: 'clicked elements', + browser_drag: 'dragged elements', browser_type: 'entered text', + browser_insert_text: 'entered text', + browser_fill_form: 'filled forms', browser_screenshot: 'captured screenshots', browser_scroll: 'scrolled pages', browser_select_option: 'selected options', browser_set_checked: 'updated selections', open_resource: 'opened resources', wait: 'waited', -} +} as const /** Summarize completed actions without describing failed or skipped work as successful. */ export function getToolActivitySummary(tools: ToolCallData[]): string { @@ -94,7 +103,6 @@ export function ToolActivityGroup({ ToolCallComponent, autoScrollActivity = true, }: ToolActivityGroupProps) { - const contentId = useId() const [expanded, setExpanded] = useState(false) let activeTool: ToolCallData | undefined for (let index = tools.length - 1; index >= 0; index--) { @@ -103,50 +111,44 @@ export function ToolActivityGroup({ break } } - const headerTool = activeTool ?? (tools.length === 1 ? tools[0] : undefined) - const summary = headerTool - ? getToolStatusDisplayTitle(headerTool.displayTitle, headerTool.status, headerTool.toolName) - : getToolActivitySummary(tools) + const statusTool = activeTool ?? tools[tools.length - 1] + const showToolHeader = Boolean(activeTool) || tools.length === 1 const SummaryIcon = getToolIcon(tools[0].toolName) return ( -
- - - - -
- {tools.map((tool) => ( - - ))} -
- - - -
+ ( + } + /> + ) + } + expanded={expanded} + onToggle={() => setExpanded(!expanded)} + isStreaming={Boolean(activeTool) && autoScrollActivity} + > +
+ {tools.map((tool) => ( + + {tool.id === statusTool.id ? ( + status + ) : ( + + )} + + ))} +
+ + )} + /> ) } diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-call-item.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-call-item.tsx index 665f535c2f1..57dd4c107cb 100644 --- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-call-item.tsx +++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-call-item.tsx @@ -1,4 +1,4 @@ -import { useEffect, useMemo, useState } from 'react' +import { type ReactNode, useEffect, useMemo, useState } from 'react' import { isPlainRecord } from '@sim/utils/object' import { ActivityStatus } from '@/components/ui/activity-status' import { @@ -53,6 +53,8 @@ export interface ToolCallItemProps { toolCallId?: string /** When the call started, used to count down a running `wait`. */ startedAt?: number + /** Projects one computed status into a header and history without duplicating tool state. */ + renderStatus?: (status: ReactNode) => ReactNode } function stringParam(params: Record | undefined, key: string): string { @@ -88,22 +90,23 @@ const COUNTDOWN_TICK_MS = 250 * mid-countdown instead of restarting; falls back to activation time when the * caller has no start to give. */ -function useElapsedMs(active: boolean, startedAt: number | undefined): number { - const [elapsedMs, setElapsedMs] = useState(0) +function useElapsedMs( + active: boolean, + startedAt: number | undefined, + toolCallId: string | undefined +): number { + const [sample, setSample] = useState({ toolCallId, elapsedMs: 0 }) useEffect(() => { - if (!active) { - setElapsedMs(0) - return - } + if (!active) return const anchor = startedAt ?? Date.now() - const tick = () => setElapsedMs(Date.now() - anchor) + const tick = () => setSample({ toolCallId, elapsedMs: Date.now() - anchor }) tick() const interval = setInterval(tick, COUNTDOWN_TICK_MS) return () => clearInterval(interval) - }, [active, startedAt]) + }, [active, startedAt, toolCallId]) - return elapsedMs + return active && sample.toolCallId === toolCallId ? sample.elapsedMs : 0 } /** @@ -128,6 +131,7 @@ export function ToolCallItem({ streamingArgs, toolCallId, startedAt, + renderStatus, }: ToolCallItemProps) { useCustomBlockOverlayVersion() const readPath = params?.path @@ -179,7 +183,7 @@ export function ToolCallItem({ const isBrowserTakeover = toolName === RETIRED_BROWSER_REQUEST_TAKEOVER_ID const isCountingDown = toolName === WaitTool.id && isExecuting - const elapsedMs = useElapsedMs(isCountingDown, startedAt) + const elapsedMs = useElapsedMs(isCountingDown, startedAt, toolCallId) const liveTitle = isCountingDown ? getWaitCountdownTitle(params, elapsedMs) @@ -236,7 +240,7 @@ export function ToolCallItem({ ) } - return ( + const activity = ( ) + return renderStatus ? renderStatus(activity) : activity } diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/utils.ts b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/utils.ts index db816f21082..b2d3d27d499 100644 --- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/utils.ts +++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/utils.ts @@ -30,6 +30,7 @@ const TOOL_ICONS: Record = { glob: FolderCode, grep: Search, read: File, + read_document: File, mv: FolderCode, cp: Layout, mkdir: FolderCode, @@ -48,6 +49,10 @@ const TOOL_ICONS: Record = { apply_file_edit: File, create_workflow: Layout, edit_workflow: Pencil, + run_workflow: PlayOutline, + run_workflow_until_block: PlayOutline, + deploy_as_api: Rocket, + table_rows: TableIcon, workflow: Hammer, debug: Bug, run: PlayOutline, @@ -75,6 +80,7 @@ const TOOL_ICONS: Record = { ffmpeg: Wrench, browser: Globe, browser_navigate: Cursor, + browser_open_url: Cursor, browser_go_back: Cursor, browser_go_forward: Cursor, browser_reload: Cursor, @@ -91,7 +97,11 @@ const TOOL_ICONS: Record = { browser_screenshot: Eye, browser_extract: Search, browser_click: Cursor, + browser_click_at: Cursor, + browser_drag: Cursor, browser_type: Pencil, + browser_insert_text: Pencil, + browser_fill_form: Pencil, browser_press_key: Cursor, browser_scroll: Cursor, browser_select_option: Cursor, diff --git a/apps/sim/lib/copilot/tools/tool-display.test.ts b/apps/sim/lib/copilot/tools/tool-display.test.ts index 89e15b8c3fd..9eae8f49e93 100644 --- a/apps/sim/lib/copilot/tools/tool-display.test.ts +++ b/apps/sim/lib/copilot/tools/tool-display.test.ts @@ -795,3 +795,24 @@ describe('resource-naming titles', () => { ) }) }) + +/** Skipped live calls and interrupted history must not retain running titles. */ +describe('getToolStatusDisplayTitle for skipped and interrupted calls', () => { + it.each([ + ['skipped', 'Skipped running checks'], + ['interrupted', 'Stopped running checks'], + ] as const)('projects %s titles once', (status, expected) => { + expect(getToolStatusDisplayTitle('Running checks', status)).toBe(expected) + expect(getToolStatusDisplayTitle(expected, status)).toBe(expected) + }) + + it('preserves titles already describing a terminal outcome', () => { + expect(getToolStatusDisplayTitle('Skipped reading notes', 'interrupted')).toBe( + 'Skipped reading notes' + ) + expect(getToolStatusDisplayTitle('Attempted to run checks', 'skipped')).toBe( + 'Attempted to run checks' + ) + expect(getToolStatusDisplayTitle('Checks', 'skipped')).toBe('Skipped: Checks') + }) +}) diff --git a/apps/sim/lib/copilot/tools/tool-display.ts b/apps/sim/lib/copilot/tools/tool-display.ts index 166840b8c22..5d925212190 100644 --- a/apps/sim/lib/copilot/tools/tool-display.ts +++ b/apps/sim/lib/copilot/tools/tool-display.ts @@ -1439,6 +1439,16 @@ function statesTerminalOutcome(title: string): boolean { return TERMINAL_TITLE_PREFIXES.has(firstWordOf(title).replace(/:$/, '')) } +/** Apply one terminal outcome prefix while preserving already-resolved titles. */ +function getToolOutcomeTitle(title: string, outcome: 'Failed' | 'Stopped' | 'Skipped'): string { + if (statesTerminalOutcome(title)) return title + const firstWord = firstWordOf(title) + if (COMPLETED_VERB_REWRITES[firstWord]) { + return `${outcome} ${firstWord.charAt(0).toLowerCase()}${firstWord.slice(1)}${title.slice(firstWord.length)}` + } + return `${outcome}: ${title}` +} + /** * Rewrite a resolved display title for a FAILED tool call. A gerund title * becomes "Failed …" ("Searching for X" → "Failed searching for X"); @@ -1446,29 +1456,19 @@ function statesTerminalOutcome(title: string): boolean { * its present-tense activity title verbatim and read as still running. */ export function getToolFailedTitle(title: string): string { - if (statesTerminalOutcome(title)) return title - const firstWord = firstWordOf(title) - if (COMPLETED_VERB_REWRITES[firstWord]) { - return `Failed ${firstWord.charAt(0).toLowerCase()}${firstWord.slice(1)}${title.slice(firstWord.length)}` - } - return `Failed: ${title}` + return getToolOutcomeTitle(title, 'Failed') } /** Rewrite a resolved display title for a CANCELLED tool call ("Stopped …"). */ export function getToolStoppedTitle(title: string): string { - if (statesTerminalOutcome(title)) return title - const firstWord = firstWordOf(title) - if (COMPLETED_VERB_REWRITES[firstWord]) { - return `Stopped ${firstWord.charAt(0).toLowerCase()}${firstWord.slice(1)}${title.slice(firstWord.length)}` - } - return `Stopped: ${title}` + return getToolOutcomeTitle(title, 'Stopped') } /** * Resolve the final title for a tool status at a rendering boundary. Persisted * and live snapshots intentionally keep the present-tense activity title so a * RUNNING row remains truthful; terminal states project a tense that says the - * work is over — completed (past tense), failed, or stopped. + * work is over — completed (past tense), failed, stopped, or skipped. */ export function getToolStatusDisplayTitle( title: string, @@ -1480,6 +1480,9 @@ export function getToolStatusDisplayTitle( } if (status === 'success') return getToolCompletedTitle(title) ?? title if (status === 'error' || status === 'rejected') return getToolFailedTitle(title) - if (status === 'cancelled' || status === 'aborted') return getToolStoppedTitle(title) + if (status === 'cancelled' || status === 'aborted' || status === 'interrupted') { + return getToolStoppedTitle(title) + } + if (status === 'skipped') return getToolOutcomeTitle(title, 'Skipped') return title } From f1c093f7fc5cc6e44b2e8224e315ea7756faf416 Mon Sep 17 00:00:00 2001 From: Waleed Latif Date: Thu, 10 Sep 2026 18:14:16 -0700 Subject: [PATCH 3/3] improvement(chat): keep activity summaries concise --- .../agent-group/tool-activity-group.test.ts | 24 ++++++++++++++----- .../agent-group/tool-activity-group.tsx | 8 +++++-- 2 files changed, 24 insertions(+), 8 deletions(-) diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-activity-group.test.ts b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-activity-group.test.ts index 7f096504bc6..6a24458b245 100644 --- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-activity-group.test.ts +++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-activity-group.test.ts @@ -10,10 +10,10 @@ function tool(toolName: string, status: ToolCallStatus = 'success'): ToolCallDat } describe('getToolActivitySummary', () => { - it('summarizes distinct actions in the order they occurred', () => { + it('caps distinct actions in order and counts the remaining categories, not repeated calls', () => { expect( getToolActivitySummary([tool('read'), tool('terminal_run'), tool('read'), tool('grep')]) - ).toBe('Read files, ran commands, searched files') + ).toBe('Read files, ran commands +1 more') }) it('summarizes browser navigation and interactions without repeating actions', () => { @@ -24,7 +24,7 @@ describe('getToolActivitySummary', () => { tool('browser_type'), tool('browser_navigate'), ]) - ).toBe('Navigated pages, read pages, entered text') + ).toBe('Navigated pages, read pages +1 more') }) it('does not describe unsuccessful work as completed actions', () => { @@ -79,9 +79,21 @@ describe('getToolActivitySummary', () => { tool('deploy_as_api'), tool('table_rows'), ]) - ).toBe( - 'Navigated pages, filled forms, entered text, read documents, ran workflows, deployed workflows, used tables' - ) + ).toBe('Navigated pages, filled forms +5 more') + }) + + it('keeps failure and interruption counts visible when action categories are capped', () => { + expect( + getToolActivitySummary([ + tool('read'), + tool('grep'), + tool('terminal'), + tool('browser_navigate'), + tool('apply_file_edit', 'error'), + tool('wait', 'interrupted'), + tool('browser_type', 'skipped'), + ]) + ).toBe('Read files, searched files +2 more · 1 failed · 1 stopped · 1 skipped') }) it('describes terminal runs from their operation', () => { diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-activity-group.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-activity-group.tsx index 87e165806f5..90922371b8c 100644 --- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-activity-group.tsx +++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-activity-group.tsx @@ -8,6 +8,8 @@ import type { ToolCallItemProps } from '@/app/workspace/[workspaceId]/home/compo import { getToolIcon } from '@/app/workspace/[workspaceId]/home/components/message-content/utils' import { type ToolCallData, ToolCallStatus } from '@/app/workspace/[workspaceId]/home/types' +const MAX_SUMMARY_ACTIONS = 2 + const ACTIVITY_LABELS: Readonly> = { read: 'read files', read_document: 'read documents', @@ -80,14 +82,16 @@ export function getToolActivitySummary(tools: ToolCallData[]): string { else if (tool.status === ToolCallStatus.skipped || tool.status === ToolCallStatus.rejected) skipped++ } - const summary = Array.from(labels).join(', ') + const summary = Array.from(labels).slice(0, MAX_SUMMARY_ACTIONS).join(', ') + const summaryLabel = summary ? summary[0].toUpperCase() + summary.slice(1) : 'Tool activity' + const additionalActions = Math.max(0, labels.size - MAX_SUMMARY_ACTIONS) const outcomes = [ failed && `${failed} failed`, stopped && `${stopped} stopped`, skipped && `${skipped} skipped`, ].filter(Boolean) return [ - summary ? summary[0].toUpperCase() + summary.slice(1) : 'Tool activity', + additionalActions > 0 ? `${summaryLabel} +${additionalActions} more` : summaryLabel, ...outcomes, ].join(' · ') }