{hasDetails ? (
@@ -101,16 +101,23 @@ export function AcpToolCallCard({ item }: { item: ToolCallItem }) {
aria-expanded={expanded}
aria-label={toggleLabel}
title={toggleLabel}
- className="flex min-w-0 p-1 flex-1 items-center gap-2 rounded-lg text-left transition-colors hover:bg-black/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 dark:hover:bg-white/10"
+ className={cn(
+ 'flex min-w-0 flex-1 items-center gap-2 rounded-lg text-left leading-5 transition-colors hover:bg-black/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 dark:hover:bg-white/10',
+ grouped ? 'px-1 py-1' : 'p-1',
+ )}
>
{expanded ?
-
-
{t('acp.tool')}
+
+ {!grouped && }
+ {!grouped && (
+ {t('acp.tool')}
+ )}
{item.title}
)}
diff --git a/src/pages/Chat/AcpToolCallsGroup.tsx b/src/pages/Chat/AcpToolCallsGroup.tsx
new file mode 100644
index 00000000..85d3bd38
--- /dev/null
+++ b/src/pages/Chat/AcpToolCallsGroup.tsx
@@ -0,0 +1,90 @@
+import { useEffect, useState } from 'react';
+import { ChevronDown, ChevronRight, Wrench } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import type { ToolCallItem } from '@/lib/acp/timeline-types';
+import { cn } from '@/lib/utils';
+import { AcpToolCallCard } from './AcpToolCallCard';
+
+const TOOL_GROUP_AUTO_COLLAPSE_DELAY_MS = 1_000;
+
+export function AcpToolCallsGroup({
+ items,
+ collapsedByDefault = false,
+}: {
+ items: ToolCallItem[];
+ collapsedByDefault?: boolean;
+}) {
+ const { t } = useTranslation('chat');
+ const shouldStartCollapsed = collapsedByDefault || items.every((item) => item.historical);
+ const [expanded, setExpanded] = useState(!shouldStartCollapsed);
+ const [manualOverride, setManualOverride] = useState(false);
+
+ useEffect(() => {
+ if (manualOverride || !collapsedByDefault || items.every((item) => item.historical)) return;
+
+ const timer = window.setTimeout(() => {
+ setExpanded(false);
+ }, TOOL_GROUP_AUTO_COLLAPSE_DELAY_MS);
+ return () => window.clearTimeout(timer);
+ }, [collapsedByDefault, items, manualOverride]);
+
+ const toggleLabel = expanded ? t('acp.collapseToolGroup') : t('acp.expandToolGroup');
+ const summary = t('acp.toolGroupSummary', { count: items.length });
+
+ if (!expanded) {
+ return (
+
+ );
+ }
+
+ return (
+
+
+
+
+
+
+ {items.map((item) => (
+
+ ))}
+
+
+
+
+ );
+}
diff --git a/tests/e2e/chat-acp-inline-timeline.spec.ts b/tests/e2e/chat-acp-inline-timeline.spec.ts
index 77d9d3fc..6fa5f716 100644
--- a/tests/e2e/chat-acp-inline-timeline.spec.ts
+++ b/tests/e2e/chat-acp-inline-timeline.spec.ts
@@ -1,5 +1,6 @@
import type { ElectronApplication } from '@playwright/test';
import { closeElectronApp, expect, getStableWindow, installIpcMocks, test } from './fixtures/electron';
+import { expandAcpToolCallsGroup } from './fixtures/acp-timeline';
const MAIN_SESSION_KEY = 'agent:main:main';
const MAIN_WORKSPACE = '/workspace';
@@ -769,6 +770,68 @@ test.describe('ClawX ACP inline timeline', () => {
}
});
+ test('collapses multiple replayed tool calls into one group after the turn completes', async ({ launchElectronApp }) => {
+ const app = await launchElectronApp({ skipSetup: true });
+
+ try {
+ await installAcpChatMocks(app);
+ await installAcpLoadReplayMock(app, [
+ {
+ sessionUpdate: 'user_message',
+ messageId: 'history-user',
+ content: [{ type: 'text', text: 'Check weather' }],
+ },
+ {
+ sessionUpdate: 'tool_call',
+ toolCallId: 'history-tool-1',
+ title: 'web_search',
+ status: 'completed',
+ content: [{ type: 'content', content: { type: 'text', text: 'search results' } }],
+ locations: [],
+ },
+ {
+ sessionUpdate: 'tool_call',
+ toolCallId: 'history-tool-2',
+ title: 'web_fetch',
+ status: 'completed',
+ content: [{ type: 'content', content: { type: 'text', text: 'fetch results' } }],
+ locations: [],
+ },
+ {
+ sessionUpdate: 'tool_call',
+ toolCallId: 'history-tool-3',
+ title: 'browser',
+ status: 'failed',
+ content: [{ type: 'content', content: { type: 'text', text: 'browser failed' } }],
+ locations: [],
+ },
+ {
+ sessionUpdate: 'agent_message',
+ messageId: 'history-assistant',
+ content: [{ type: 'text', text: 'Hangzhou is cloudy today.' }],
+ },
+ ], [{
+ normalizedUserText: 'Check weather',
+ userOccurrenceFromTail: 0,
+ durationMs: 12_000,
+ }]);
+
+ const page = await openChat(app);
+
+ await expect(page.getByTestId('acp-chat-timeline')).toBeVisible({ timeout: 30_000 });
+ const group = page.getByTestId('acp-tool-calls-group');
+ await expect(group).toBeVisible();
+ await expect(group).toHaveAttribute('data-collapsed', 'true');
+ await expect(page.getByTestId('acp-tool-call-card')).toHaveCount(0);
+
+ await expandAcpToolCallsGroup(page);
+ await expect(page.getByTestId('acp-tool-call-card')).toHaveCount(3);
+ await expect(page.getByTestId('acp-assistant-turn')).toContainText('Hangzhou is cloudy today.');
+ } finally {
+ await closeElectronApp(app);
+ }
+ });
+
test('hydrates historical image-generation completions from transcript history when ACP replay omits them', async ({ launchElectronApp }) => {
const app = await launchElectronApp({ skipSetup: true });
diff --git a/tests/e2e/chat-file-changes.spec.ts b/tests/e2e/chat-file-changes.spec.ts
index e47b8a20..3091efa5 100644
--- a/tests/e2e/chat-file-changes.spec.ts
+++ b/tests/e2e/chat-file-changes.spec.ts
@@ -9,6 +9,7 @@ import {
installIpcMocks,
test,
} from './fixtures/electron';
+import { expectVisibleToolCallCards } from './fixtures/acp-timeline';
const MAIN_SESSION_KEY = 'agent:main:main';
const OTHER_SESSION_KEY = 'agent:main:other';
@@ -419,7 +420,7 @@ test.describe('ClawX chat file changes', () => {
const page = await openChat(app);
await sendPrompt(page, 'Run non-file activity');
- await expect(page.getByTestId('acp-tool-call-card')).toHaveCount(2, { timeout: 30_000 });
+ await expectVisibleToolCallCards(page, 2);
const failedWrite = page.getByTestId('acp-tool-call-card').filter({ hasText: 'Write: failed.ts' });
const unsupportedRead = page.getByTestId('acp-tool-call-card').filter({ hasText: 'Read: unsupported.ts' });
await expect(failedWrite).toContainText('Failed');
diff --git a/tests/e2e/fixtures/acp-timeline.ts b/tests/e2e/fixtures/acp-timeline.ts
new file mode 100644
index 00000000..b06656b8
--- /dev/null
+++ b/tests/e2e/fixtures/acp-timeline.ts
@@ -0,0 +1,24 @@
+import { expect, type Page } from '@playwright/test';
+
+export async function expandAcpToolCallsGroup(page: Page) {
+ const group = page.getByTestId('acp-tool-calls-group');
+ await expect(group).toBeVisible({ timeout: 30_000 });
+
+ if (await group.getAttribute('data-collapsed') !== 'false') {
+ await group.click();
+ }
+
+ await expect(group).toHaveAttribute('data-collapsed', 'false', { timeout: 5_000 });
+}
+
+export async function expectVisibleToolCallCards(page: Page, count: number) {
+ const cards = page.getByTestId('acp-tool-call-card');
+
+ if (count <= 1) {
+ await expect(cards).toHaveCount(count, { timeout: 30_000 });
+ return;
+ }
+
+ await expandAcpToolCallsGroup(page);
+ await expect(cards).toHaveCount(count, { timeout: 30_000 });
+}
diff --git a/tests/unit/acp-chat-components.test.tsx b/tests/unit/acp-chat-components.test.tsx
index cea0d87b..028a949d 100644
--- a/tests/unit/acp-chat-components.test.tsx
+++ b/tests/unit/acp-chat-components.test.tsx
@@ -52,6 +52,9 @@ vi.mock('react-i18next', () => ({
'acp.tool': 'Tool',
'acp.expandTool': 'Expand tool result',
'acp.collapseTool': 'Collapse tool result',
+ 'acp.expandToolGroup': 'Expand tool calls',
+ 'acp.collapseToolGroup': 'Collapse tool calls',
+ 'acp.toolGroupSummary': '{{count}} tool calls',
'acp.permission': 'Permission',
'acp.plan': 'Plan',
'acp.running': 'Running',
@@ -561,6 +564,86 @@ describe('ACP chat timeline components', () => {
expect(screen.getByText('Second assistant segment.')).toBeInTheDocument();
});
+ it('collapses multiple completed tool calls into one group after the turn settles', () => {
+ const state = snapshot({
+ itemOrder: ['tool:exec-1', 'tool:image-1', 'tool:process-1', 'msg-a:0'],
+ itemsById: {
+ 'tool:exec-1': toolCallItem({ id: 'tool:exec-1', toolCallId: 'exec-1', title: 'exec' }),
+ 'tool:image-1': toolCallItem({ id: 'tool:image-1', toolCallId: 'image-1', title: 'image', outputParts: [] }),
+ 'tool:process-1': toolCallItem({ id: 'tool:process-1', toolCallId: 'process-1', title: 'process', outputParts: [] }),
+ 'msg-a:0': {
+ kind: 'message-segment',
+ id: 'msg-a:0',
+ role: 'assistant',
+ messageId: 'msg-a',
+ segmentIndex: 0,
+ parts: [{ kind: 'markdown', text: 'All done.' }],
+ },
+ },
+ });
+
+ render(
);
+
+ const group = screen.getByTestId('acp-tool-calls-group');
+ expect(group).toHaveAttribute('data-collapsed', 'true');
+ expect(group).toHaveTextContent('3 tool calls');
+ expect(screen.queryByTestId('acp-tool-call-card')).not.toBeInTheDocument();
+ });
+
+ it('expands the tool group to show individual tool cards when clicked', () => {
+ const state = snapshot({
+ itemOrder: ['tool:exec-1', 'tool:image-1', 'msg-a:0'],
+ itemsById: {
+ 'tool:exec-1': toolCallItem({ id: 'tool:exec-1', toolCallId: 'exec-1', title: 'exec' }),
+ 'tool:image-1': toolCallItem({ id: 'tool:image-1', toolCallId: 'image-1', title: 'image', outputParts: [] }),
+ 'msg-a:0': {
+ kind: 'message-segment',
+ id: 'msg-a:0',
+ role: 'assistant',
+ messageId: 'msg-a',
+ segmentIndex: 0,
+ parts: [{ kind: 'markdown', text: 'Done.' }],
+ },
+ },
+ });
+
+ render(
);
+
+ fireEvent.click(screen.getByTestId('acp-tool-calls-group'));
+ expect(screen.getByTestId('acp-tool-calls-group')).toHaveAttribute('data-collapsed', 'false');
+ expect(screen.getAllByTestId('acp-tool-call-card')).toHaveLength(2);
+ expect(screen.getByText('exec')).toBeInTheDocument();
+ expect(screen.getByText('image')).toBeInTheDocument();
+ });
+
+ it('keeps a running turn tool group expanded until the turn completes', () => {
+ const state = snapshot({
+ itemOrder: ['user-a:0', 'tool:exec-1', 'tool:image-1'],
+ itemsById: {
+ 'user-a:0': {
+ kind: 'message-segment',
+ id: 'user-a:0',
+ role: 'user',
+ messageId: 'user-a',
+ segmentIndex: 0,
+ parts: [{ kind: 'markdown', text: 'Generate assets' }],
+ },
+ 'tool:exec-1': toolCallItem({ id: 'tool:exec-1', toolCallId: 'exec-1', title: 'exec', status: 'running', outputParts: [] }),
+ 'tool:image-1': toolCallItem({ id: 'tool:image-1', toolCallId: 'image-1', title: 'image', status: 'completed', outputParts: [] }),
+ },
+ });
+
+ render(
);
+
+ expect(screen.getByTestId('acp-tool-calls-group')).toHaveAttribute('data-collapsed', 'false');
+ expect(screen.getAllByTestId('acp-tool-call-card')).toHaveLength(2);
+ });
+
it('keeps completed tool results expanded until the delayed auto-collapse runs', () => {
vi.useFakeTimers();
try {
diff --git a/tests/unit/chat-leading-orphan-tools.test.tsx b/tests/unit/chat-leading-orphan-tools.test.tsx
index 7b4f0b90..025cc833 100644
--- a/tests/unit/chat-leading-orphan-tools.test.tsx
+++ b/tests/unit/chat-leading-orphan-tools.test.tsx
@@ -93,6 +93,9 @@ vi.mock('react-i18next', () => ({
if (key === 'executionGraph.thinkingLabel') return 'Thinking';
if (key === 'acp.tool') return 'Tool';
if (key === 'acp.completed') return 'Completed';
+ if (key === 'acp.toolGroupSummary') return `${String(params?.count ?? '')} tool calls`;
+ if (key === 'acp.expandToolGroup') return 'Expand tool calls';
+ if (key === 'acp.collapseToolGroup') return 'Collapse tool calls';
if (key === 'welcome.subtitle') return 'What can I do for you?';
if (key.startsWith('taskPanel.stepStatus.')) return key.split('.').at(-1) ?? key;
return key;
@@ -205,9 +208,8 @@ describe('Chat leading ACP tool calls', () => {
render(
);
expect(screen.getByTestId('acp-chat-timeline')).toBeInTheDocument();
- expect(screen.getAllByTestId('acp-tool-call-card')).toHaveLength(2);
- expect(screen.getByText('exec')).toBeInTheDocument();
- expect(screen.getByText('image')).toBeInTheDocument();
+ expect(screen.getByTestId('acp-tool-calls-group')).toHaveAttribute('data-collapsed', 'true');
+ expect(screen.queryByTestId('acp-tool-call-card')).not.toBeInTheDocument();
expect(screen.getByText('Continue the task')).toBeInTheDocument();
expect(screen.getByText('Finished.')).toBeInTheDocument();
expect(screen.queryByTestId('chat-execution-graph')).not.toBeInTheDocument();
diff --git a/tests/unit/chat-tool-card-suppression.test.tsx b/tests/unit/chat-tool-card-suppression.test.tsx
index bcf39951..ef5b710c 100644
--- a/tests/unit/chat-tool-card-suppression.test.tsx
+++ b/tests/unit/chat-tool-card-suppression.test.tsx
@@ -93,6 +93,9 @@ vi.mock('react-i18next', () => ({
if (key === 'executionGraph.thinkingLabel') return 'Thinking';
if (key === 'acp.tool') return 'Tool';
if (key === 'acp.completed') return 'Completed';
+ if (key === 'acp.toolGroupSummary') return `${String(params?.count ?? '')} tool calls`;
+ if (key === 'acp.expandToolGroup') return 'Expand tool calls';
+ if (key === 'acp.collapseToolGroup') return 'Collapse tool calls';
if (key === 'welcome.subtitle') return 'What can I do for you?';
if (key.startsWith('taskPanel.stepStatus.')) return key.split('.').at(-1) ?? key;
return key;
@@ -219,10 +222,9 @@ describe('Chat tool card suppression', () => {
render(
);
expect(screen.getByTestId('acp-chat-timeline')).toBeInTheDocument();
- expect(screen.getAllByTestId('acp-tool-call-card')).toHaveLength(3);
- expect(screen.getByText('exec')).toBeInTheDocument();
- expect(screen.getByText('image')).toBeInTheDocument();
- expect(screen.getByText('process')).toBeInTheDocument();
+ expect(screen.getByTestId('acp-tool-calls-group')).toHaveAttribute('data-collapsed', 'true');
+ expect(screen.getByTestId('acp-tool-calls-group')).toHaveTextContent('3 tool calls');
+ expect(screen.queryByTestId('acp-tool-call-card')).not.toBeInTheDocument();
expect(screen.getByText('All done.')).toBeInTheDocument();
expect(screen.queryByTestId('chat-execution-graph')).not.toBeInTheDocument();
});