{isInteractive ? (
{rowContent}
) : (
-
- {rowContent}
-
+
{rowContent}
)}
{isExpanded && inlineRenderPart && (
@@ -274,14 +277,7 @@ export function getTaskToolSessionId(toolPart: ToolPart): KiloSessionId | undefi
return undefined;
}
-/**
- * Find the currently running tool from child session messages.
- * Looks through all assistant messages to find a tool part with status 'running' or 'pending'.
- * Returns the tool name and optional context (e.g., filename for read/edit tools).
- */
-export function getCurrentRunningTool(
- childMessages: StoredMessage[]
-): { tool: string; context?: string } | undefined {
+function getLatestToolActivity(childMessages: StoredMessage[]): string | undefined {
for (let i = childMessages.length - 1; i >= 0; i--) {
const msg = childMessages[i];
if (msg.info.role !== 'assistant') continue;
@@ -290,38 +286,31 @@ export function getCurrentRunningTool(
const part = msg.parts[j];
if (!isToolPart(part)) continue;
- const status = part.state.status;
- if (status === 'running' || status === 'pending') {
- const tool = part.tool;
- let context: string | undefined;
-
- const input = part.state.input;
- if (tool === 'read' || tool === 'edit' || tool === 'write') {
- const filePath = getStringProperty(input, 'filePath');
- if (filePath) {
- context = filePath.split('/').pop();
- }
- } else if (tool === 'bash') {
- const command = getStringProperty(input, 'command');
- if (command) {
- const firstWord = command.split(/\s+/)[0];
- context = firstWord.length > 20 ? firstWord.slice(0, 20) + '...' : firstWord;
- }
- } else if (tool === 'glob' || tool === 'grep') {
- const pattern = getStringProperty(input, 'pattern');
- if (pattern) {
- context = pattern.length > 25 ? pattern.slice(0, 25) + '...' : pattern;
- }
- } else if (tool === 'task') {
- const taskDescription = getStringProperty(input, 'description');
- if (taskDescription) {
- context =
- taskDescription.length > 30 ? taskDescription.slice(0, 30) + '...' : taskDescription;
- }
+ const tool = part.tool;
+ let context: string | undefined;
+ const input = part.state.input;
+ if (tool === 'read' || tool === 'edit' || tool === 'write') {
+ const filePath = getStringProperty(input, 'filePath');
+ if (filePath) context = filePath.split('/').pop();
+ } else if (tool === 'bash') {
+ const command = getStringProperty(input, 'command');
+ if (command) {
+ const firstWord = command.split(/\s+/)[0];
+ context = firstWord.length > 20 ? firstWord.slice(0, 20) + '...' : firstWord;
+ }
+ } else if (tool === 'glob' || tool === 'grep') {
+ const pattern = getStringProperty(input, 'pattern');
+ if (pattern) context = pattern.length > 25 ? pattern.slice(0, 25) + '...' : pattern;
+ } else if (tool === 'task') {
+ const taskDescription = getStringProperty(input, 'description');
+ if (taskDescription) {
+ context =
+ taskDescription.length > 30 ? taskDescription.slice(0, 30) + '...' : taskDescription;
}
-
- return { tool, context };
}
+
+ const label = tool === 'bash' ? 'Shell' : tool.charAt(0).toUpperCase() + tool.slice(1);
+ return `${label}${context ? ` ${context}` : ''}${part.state.status === 'error' ? ' (failed)' : ''}`;
}
}
return undefined;
diff --git a/apps/web/src/components/cloud-agent-next/CloudChatPage.tsx b/apps/web/src/components/cloud-agent-next/CloudChatPage.tsx
index 320a077beb..00abae8678 100644
--- a/apps/web/src/components/cloud-agent-next/CloudChatPage.tsx
+++ b/apps/web/src/components/cloud-agent-next/CloudChatPage.tsx
@@ -1,6 +1,6 @@
'use client';
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { useAtomValue, useSetAtom } from 'jotai';
import { useSearchParams } from 'next/navigation';
import { useMutation, useQueryClient } from '@tanstack/react-query';
@@ -29,12 +29,10 @@ import {
getSessionTotalCostUsd,
isRenderableSessionCost,
} from './session-cost-breakdown';
-import { MessageErrorBoundary } from './MessageErrorBoundary';
-import { MessageBubble } from './MessageBubble';
+import { ConversationMessages } from './ConversationMessages';
import { ChildSessionDrawer } from './ChildSessionDrawer';
-import type { ChildSessionDrawerEntry, OpenChildSession } from './ChildSessionSection';
+import type { ChildSessionDrawerEntry } from './ChildSessionSection';
import { SessionStatusIndicator } from './SessionStatusIndicator';
-import { PreparationRow } from './PreparationRow';
import { isNoOpCompletedPreparationAttempt } from './preparation-summary';
import { PreparationDrawer } from './PreparationDrawer';
import { WorkingIndicator } from './WorkingIndicator';
@@ -64,7 +62,6 @@ import {
selectWorkspaceTab,
terminalTabId,
} from './terminal-tabs';
-import { isMessageStreaming } from './types';
import {
createRemoteModelOverride,
useSessionModels,
@@ -80,123 +77,10 @@ import type { CloudAgentAttachments } from '@/lib/cloud-agent/constants';
import { SetPageTitle } from '@/components/SetPageTitle';
import { formatShortModelDisplayName } from '@/lib/format-model-name';
import type { AgentMode } from './types';
-import type {
- MessageDeliveryState,
- PreparationAttempt,
- StoredMessage,
-} from '@kilocode/cloud-agent-sdk';
+import type { PreparationAttempt } from '@kilocode/cloud-agent-sdk';
import type { WorkspaceTabId } from './terminal-tabs';
import type { TerminalStatus } from './useCloudAgentTerminal';
-// ---------------------------------------------------------------------------
-// Static messages — memoized, never re-renders during streaming
-// ---------------------------------------------------------------------------
-const StaticMessages = memo(
- ({
- messages,
- pendingMessages,
- preparationByMessageId,
- getChildMessages,
- onOpenChildSession,
- onOpenPreparationDetails,
- }: {
- messages: StoredMessage[];
- pendingMessages: ReadonlyMap
;
- preparationByMessageId: ReadonlyMap;
- getChildMessages?: (sessionId: string) => StoredMessage[];
- onOpenChildSession?: OpenChildSession;
- onOpenPreparationDetails: (attemptId: string) => void;
- }) => (
- <>
- {messages.map(msg => (
-
-
- ))}
-
- )
-);
-StaticMessages.displayName = 'StaticMessages';
-
-// ---------------------------------------------------------------------------
-// Dynamic messages — re-renders as streaming progresses while chat is visible
-// ---------------------------------------------------------------------------
-type DynamicMessagesProps = {
- active: boolean;
- isStreaming: boolean;
- messages: StoredMessage[];
- pendingMessages: ReadonlyMap;
- preparationByMessageId: ReadonlyMap;
- getChildMessages?: (sessionId: string) => StoredMessage[];
- onOpenChildSession?: OpenChildSession;
- onOpenPreparationDetails: (attemptId: string) => void;
-};
-
-const DynamicMessages = memo(
- function DynamicMessages({
- isStreaming,
- messages,
- pendingMessages,
- preparationByMessageId,
- getChildMessages,
- onOpenChildSession,
- onOpenPreparationDetails,
- }: DynamicMessagesProps) {
- return (
- <>
- {messages.map(msg => {
- const streaming = isStreaming && isMessageStreaming(msg);
- return (
-
-
- );
- })}
-
- );
- },
- (previous, next) => {
- if (!previous.active && !next.active) return true;
-
- return (
- previous.active === next.active &&
- previous.isStreaming === next.isStreaming &&
- previous.messages === next.messages &&
- previous.pendingMessages === next.pendingMessages &&
- previous.preparationByMessageId === next.preparationByMessageId &&
- previous.getChildMessages === next.getChildMessages &&
- previous.onOpenChildSession === next.onOpenChildSession &&
- previous.onOpenPreparationDetails === next.onOpenPreparationDetails
- );
- }
-);
-DynamicMessages.displayName = 'DynamicMessages';
-
// ---------------------------------------------------------------------------
// CloudChatPage
// ---------------------------------------------------------------------------
@@ -1194,7 +1078,7 @@ export default function CloudChatPage({
@@ -1207,18 +1091,11 @@ export default function CloudChatPage({
olderMessagesOmittedItemCount={olderMessagesOmittedItemCount}
onRetry={requestOlderMessages}
/>
-
-
{
+ const actual = jest.requireActual('./ToolCardShell');
+ return {
+ ToolCardShell: (props: React.ComponentProps) =>
+ React.createElement(actual.ToolCardShell, {
+ ...props,
+ defaultExpanded: mockExpanded ? true : props.defaultExpanded,
+ }),
+ };
+});
+jest.mock('./CloudAgentProvider', () => ({ useOptionalManager: jest.fn() }));
+jest.mock('@/components/shared/TimeAgo', () => ({
+ TimeAgo: () => React.createElement('time', null, 'Message timestamp'),
+}));
+jest.mock('@/components/shared/CopyMessageButton', () => ({ CopyMessageButton: () => null }));
+jest.mock('react-markdown', () => ({
+ __esModule: true,
+ default: ({ children }: { children?: React.ReactNode }) =>
+ React.createElement('p', null, children),
+}));
+jest.mock('remark-gfm', () => ({ __esModule: true, default: () => undefined }));
+
+import { ConversationMessages } from './ConversationMessages';
+import { PartRenderer } from './PartRenderer';
+
+Object.assign(globalThis, { React });
+
+function assistantMessage(
+ id: string,
+ parts: Part[],
+ overrides: Partial = {}
+): StoredMessage {
+ const info: AssistantMessage = {
+ id,
+ sessionID: 'ses-1',
+ role: 'assistant',
+ time: { created: 1, completed: 2 },
+ parentID: 'user-1',
+ modelID: 'test-model',
+ providerID: 'test-provider',
+ mode: 'code',
+ agent: 'test-agent',
+ path: { cwd: '/', root: '/' },
+ cost: 0,
+ tokens: { input: 0, output: 0, reasoning: 0, cache: { read: 0, write: 0 } },
+ ...overrides,
+ };
+ return {
+ info,
+ parts: parts.map(part => ({ ...part, messageID: id, sessionID: info.sessionID })),
+ };
+}
+
+function textPart(id: string, text: string): TextPart {
+ return { id, sessionID: 'ses-1', messageID: 'assistant-1', type: 'text', text };
+}
+
+function reasoningPart(id: string, overrides: Partial = {}): ReasoningPart {
+ return {
+ id,
+ sessionID: 'ses-1',
+ messageID: 'assistant-1',
+ type: 'reasoning',
+ text: `Reasoning details for ${id}`,
+ time: { start: 1, end: 2 },
+ ...overrides,
+ };
+}
+
+function toolPart(
+ id: string,
+ tool = 'bash',
+ state: ToolPart['state'] = {
+ status: 'completed',
+ input: { command: `pnpm test -- ${id}` },
+ output: `Output for ${id}`,
+ title: tool,
+ metadata: {},
+ time: { start: 1, end: 2 },
+ }
+): ToolPart {
+ return {
+ id,
+ sessionID: 'ses-1',
+ messageID: 'assistant-1',
+ type: 'tool',
+ callID: id,
+ tool,
+ state,
+ };
+}
+
+function renderConversation(
+ staticMessages: StoredMessage[],
+ overrides: Partial> = {}
+): string {
+ return renderToStaticMarkup(
+ React.createElement(ConversationMessages, {
+ active: true,
+ isStreaming: false,
+ staticMessages,
+ dynamicMessages: [],
+ pendingMessages: new Map(),
+ preparationByMessageId: new Map(),
+ onOpenPreparationDetails: jest.fn(),
+ ...overrides,
+ })
+ );
+}
+
+function buttons(html: string): string[] {
+ return html.match(/]*>[\s\S]*?<\/button>/g) ?? [];
+}
+
+beforeEach(() => {
+ mockExpanded = false;
+ jest.mocked(useOptionalManager).mockReturnValue(null);
+});
+
+describe('ConversationMessages', () => {
+ it('shows individual rows in transcript order with collapsed details and metadata after the answer', () => {
+ const html = renderConversation([
+ assistantMessage('assistant-1', [
+ reasoningPart('reasoning-1'),
+ toolPart('bash-1'),
+ textPart('progress', 'First check passed.'),
+ toolPart('bash-2'),
+ textPart('answer', 'The implementation is ready.'),
+ ]),
+ ]);
+ const renderedButtons = buttons(html);
+
+ expect(renderedButtons).toEqual([
+ expect.stringContaining('Thought'),
+ expect.stringContaining('pnpm test -- bash-1'),
+ expect.stringContaining('pnpm test -- bash-2'),
+ ]);
+ for (const button of renderedButtons) {
+ expect(button).toContain('aria-expanded="false"');
+ expect(button).toContain('aria-controls=');
+ }
+ expect(html).not.toContain('Reasoning details');
+ expect(html).not.toContain('Output for');
+ expect(html).toContain('First check passed.');
+ expect(html).toContain('The implementation is ready.');
+ expect(html).toContain('Message timestamp');
+ expect(html.indexOf('pnpm test -- bash-1')).toBeLessThan(html.indexOf('First check passed.'));
+ expect(html.indexOf('First check passed.')).toBeLessThan(html.indexOf('pnpm test -- bash-2'));
+ expect(html.indexOf('pnpm test -- bash-2')).toBeLessThan(
+ html.indexOf('The implementation is ready.')
+ );
+ expect(html.indexOf('Message timestamp')).toBeGreaterThan(
+ html.indexOf('The implementation is ready.')
+ );
+ });
+
+ it('dispatches the new tool cards as independent rows without a group disclosure', () => {
+ const parts = [
+ { tool: 'background_process', input: { action: 'start', command: 'pnpm dev' } },
+ {
+ tool: 'apply_patch',
+ input: { patchText: '*** Begin Patch\n*** Add File: result.txt\n+Updated\n*** End Patch' },
+ },
+ { tool: 'webfetch', input: { url: 'https://example.com/docs' } },
+ { tool: 'codesearch', input: { query: 'findParser' } },
+ ].map(({ tool, input }) =>
+ toolPart(tool, tool, {
+ status: 'completed',
+ input,
+ output: `Output for ${tool}`,
+ title: tool,
+ metadata: {},
+ time: { start: 1, end: 2 },
+ })
+ );
+ const html = renderConversation([
+ assistantMessage('assistant-1', [...parts, textPart('answer', 'The tools finished.')]),
+ ]);
+ const renderedButtons = buttons(html);
+
+ expect(renderedButtons).toEqual([
+ expect.stringContaining('Start background process'),
+ expect.stringContaining('Apply patch'),
+ expect.stringContaining('CodeSearch'),
+ ]);
+ expect(renderedButtons[0]).toContain('pnpm dev');
+ expect(renderedButtons[2]).toContain('findParser');
+ for (const button of renderedButtons) {
+ expect(button).toContain('aria-expanded="false"');
+ expect(button).toContain('aria-controls=');
+ expect(button).not.toContain('disabled=');
+ }
+ expect(new Set(html.match(/aria-controls="[^"]+"/g)).size).toBe(3);
+ expect(html.match(/data-tool-card=/g)).toHaveLength(4);
+ expect(html).toContain('WebFetch');
+ expect(html).toContain('href="https://example.com/docs"');
+ expect(html).not.toContain('Output for');
+ expect(html.indexOf('Apply patch')).toBeLessThan(html.indexOf('WebFetch'));
+ expect(html.indexOf('WebFetch')).toBeLessThan(html.indexOf('CodeSearch'));
+ expect(html.indexOf('CodeSearch')).toBeLessThan(html.indexOf('The tools finished.'));
+ });
+
+ it('keeps every row visible across static and dynamic messages in the same assistant turn', () => {
+ const html = renderConversation(
+ [assistantMessage('assistant-1', [reasoningPart('reasoning-1'), toolPart('bash-1')])],
+ {
+ dynamicMessages: [
+ assistantMessage('assistant-2', [reasoningPart('reasoning-2'), toolPart('bash-2')]),
+ assistantMessage('assistant-3', [textPart('answer', 'Both checks passed.')]),
+ ],
+ }
+ );
+ const renderedButtons = buttons(html);
+
+ expect(renderedButtons).toEqual([
+ expect.stringContaining('Thought'),
+ expect.stringContaining('pnpm test -- bash-1'),
+ expect.stringContaining('Thought'),
+ expect.stringContaining('pnpm test -- bash-2'),
+ ]);
+ for (const button of renderedButtons) {
+ expect(button).toContain('aria-expanded="false"');
+ }
+ expect(html).toContain('Both checks passed.');
+ expect(html).not.toContain('Reasoning details');
+ expect(html).not.toContain('Output for');
+ expect(html.match(/data-message-role="assistant"/g)).toHaveLength(1);
+ expect(html.match(//g)).toHaveLength(1);
+ });
+
+ it.each([
+ {
+ name: 'failure',
+ error: { name: 'UnknownError', data: { message: 'Request was rate limited' } },
+ status: 'Failed',
+ detail: 'Request was rate limited',
+ absent: 'Interrupted',
+ },
+ {
+ name: 'interruption',
+ error: { name: 'MessageAbortedError', data: { message: 'aborted' } },
+ status: 'Interrupted',
+ detail: 'Partial answer',
+ absent: 'Failed',
+ },
+ ] satisfies {
+ name: string;
+ error: NonNullable;
+ status: string;
+ detail: string;
+ absent: string;
+ }[])('keeps assistant $name visible while a neighboring message streams', testCase => {
+ const html = renderConversation(
+ [
+ assistantMessage('assistant-1', [toolPart('bash-1')]),
+ assistantMessage(
+ 'assistant-2',
+ [
+ reasoningPart('unfinished', { time: { start: 1 } }),
+ textPart('partial-answer', 'Partial answer'),
+ ],
+ { time: { created: 3 }, error: testCase.error }
+ ),
+ ],
+ {
+ isStreaming: true,
+ dynamicMessages: [
+ assistantMessage(
+ 'assistant-3',
+ [
+ toolPart('active', 'bash', {
+ status: 'running',
+ input: { command: 'pnpm test' },
+ time: { start: 4 },
+ }),
+ ],
+ { time: { created: 4 } }
+ ),
+ ],
+ }
+ );
+
+ expect(html).toContain(testCase.status);
+ expect(html).toContain(testCase.detail);
+ expect(html).toContain('Partial answer');
+ expect(html).not.toContain(testCase.absent);
+ expect(html.match(/data-message-role="assistant"/g)).toHaveLength(3);
+ expect(buttons(html)).toEqual([
+ expect.stringContaining('Shell'),
+ expect.stringContaining('Thought'),
+ expect.stringContaining('Shell'),
+ ]);
+ });
+
+ it('keeps pending tools, running tools, and streaming reasoning individually collapsed', () => {
+ const html = renderConversation(
+ [assistantMessage('assistant-1', [reasoningPart('reasoning-1'), toolPart('bash-1')])],
+ {
+ isStreaming: true,
+ dynamicMessages: [
+ assistantMessage(
+ 'assistant-2',
+ [
+ toolPart('pending', 'bash', {
+ status: 'pending',
+ input: { command: 'pnpm lint' },
+ raw: '',
+ }),
+ toolPart('active', 'bash', {
+ status: 'running',
+ input: { command: 'pnpm typecheck' },
+ time: { start: 3 },
+ }),
+ reasoningPart('active-reasoning', { time: { start: 3 } }),
+ ],
+ { time: { created: 3 } }
+ ),
+ ],
+ }
+ );
+ const renderedButtons = buttons(html);
+
+ expect(renderedButtons).toEqual([
+ expect.stringContaining('Thought'),
+ expect.stringContaining('pnpm test -- bash-1'),
+ expect.stringContaining('pnpm lint'),
+ expect.stringContaining('pnpm typecheck'),
+ expect.stringContaining('Thinking'),
+ ]);
+ for (const button of renderedButtons) {
+ expect(button).toContain('aria-expanded="false"');
+ }
+ expect(html).not.toContain('Reasoning details');
+ expect(html).not.toContain('Output for');
+ expect(html).not.toContain('Waiting to execute');
+ expect(html).not.toContain('Running command');
+ });
+
+ it('does not show completed-answer metadata while the last message is streaming', () => {
+ const html = renderConversation(
+ [assistantMessage('assistant-1', [reasoningPart('completed-reasoning')])],
+ {
+ isStreaming: true,
+ dynamicMessages: [
+ assistantMessage(
+ 'assistant-2',
+ [{ ...textPart('answer', 'Here is the result so far'), time: { start: 3 } }],
+ { time: { created: 3 } }
+ ),
+ ],
+ }
+ );
+
+ expect(buttons(html)).toHaveLength(1);
+ expect(buttons(html)[0]).toContain('Thought: 1ms');
+ expect(buttons(html)[0]).toContain('aria-expanded="false"');
+ expect(html).toContain('Here is the result so far');
+ expect(html).not.toContain('Message timestamp');
+ expect(html).not.toContain('Reasoning details');
+ });
+
+ it('keeps a completed answer idle when an older tool is stale and a later turn starts', () => {
+ const html = renderConversation(
+ [
+ assistantMessage('assistant-1', [
+ toolPart('stale-read', 'read', {
+ status: 'running',
+ input: { filePath: 'README' },
+ time: { start: 1 },
+ }),
+ ]),
+ assistantMessage('assistant-2', [textPart('answer', 'The previous turn is complete.')]),
+ ],
+ {
+ isStreaming: true,
+ dynamicMessages: [
+ assistantMessage(
+ 'assistant-3',
+ [reasoningPart('active-reasoning', { time: { start: 5 } })],
+ { parentID: 'user-2', time: { created: 5 } }
+ ),
+ ],
+ }
+ );
+
+ expect(html).toContain('The previous turn is complete.');
+ expect(buttons(html)).toEqual([
+ expect.stringContaining('Read'),
+ expect.stringContaining('Thinking'),
+ ]);
+ expect(html.match(/data-message-role="assistant"/g)).toHaveLength(2);
+ expect(html.match(//g)).toHaveLength(1);
+ expect(html.indexOf('Message timestamp')).toBeGreaterThan(
+ html.indexOf('The previous turn is complete.')
+ );
+ expect(html.indexOf('Message timestamp')).toBeLessThan(html.indexOf('Thinking'));
+ });
+
+ it.each([false, true])(
+ 'shows a failed tool alert with the full normalized error despite missing input (streaming=%s)',
+ isStreaming => {
+ const details = Array.from(
+ { length: 40 },
+ (_, index) => `Failure detail ${index + 1}: the verification command could not finish.`
+ ).join('\n');
+ const html = renderConversation(
+ [
+ assistantMessage('assistant-1', [
+ reasoningPart('reasoning-1'),
+ toolPart('bash-1'),
+ toolPart('failed', 'bash', {
+ status: 'error',
+ input: {},
+ error: `\u001b[31mRetrying\rThe verification command failed\u001b[0m\r\n${details}`,
+ time: { start: 3, end: 4 },
+ }),
+ textPart('answer', 'The check needs attention.'),
+ ]),
+ ],
+ {
+ isStreaming,
+ dynamicMessages: [
+ assistantMessage(
+ 'assistant-2',
+ [{ ...textPart('next-answer', 'Checking the next step.'), time: { start: 5 } }],
+ { time: { created: 5 } }
+ ),
+ ],
+ }
+ );
+ const renderedButtons = buttons(html);
+
+ expect(renderedButtons).toEqual([
+ expect.stringContaining('Thought'),
+ expect.stringContaining('Shell'),
+ ]);
+ for (const button of renderedButtons) {
+ expect(button).toContain('aria-expanded="false"');
+ }
+ expect(html.match(/role="alert"/g)).toHaveLength(1);
+ expect(html.replace(/<[^>]*>/g, '')).toContain('Failed: bash');
+ expect(html).toContain(`The verification command failed\n${details}`);
+ expect(html).not.toContain('Retrying');
+ expect(html).not.toContain('\u001b');
+ expect(html).not.toContain('\r');
+ expect(html).not.toContain('Output for');
+ expect(html).not.toContain('Reasoning details');
+ expect(html).toContain('The check needs attention.');
+ expect(html).toContain('Checking the next step.');
+ expect(html.indexOf('The verification command failed')).toBeLessThan(
+ html.indexOf('The check needs attention.')
+ );
+ }
+ );
+
+ it('keeps live questions, suggestion actions, and child-session controls visible', () => {
+ const atoms: Pick<
+ SessionManager['atoms'],
+ 'activeQuestion' | 'isStreaming' | 'activeSuggestion'
+ > = {
+ activeQuestion: atom(null),
+ isStreaming: atom(true),
+ activeSuggestion: atom({
+ requestId: 'suggestion-1',
+ callId: 'suggest-1',
+ text: 'Run the focused checks next?',
+ actions: [{ label: 'Run checks', prompt: 'Run the focused verification' }],
+ }),
+ };
+ jest.mocked(useOptionalManager).mockReturnValue({ atoms } as SessionManager);
+ const childSessionId = `ses_${'a'.repeat(26)}`;
+ const childMessages = [
+ assistantMessage(
+ 'child-1',
+ [
+ reasoningPart('child-reasoning'),
+ toolPart('child-completed'),
+ textPart('child-answer', 'Child transcript stays in the drawer.'),
+ toolPart('child-running', 'read', {
+ status: 'running',
+ input: { filePath: '/repo/src/parser.ts' },
+ time: { start: 4 },
+ }),
+ ],
+ { sessionID: childSessionId, time: { created: 3 } }
+ ),
+ ];
+ const html = renderConversation(
+ [
+ assistantMessage('assistant-1', [
+ reasoningPart('reasoning-1'),
+ toolPart('bash-1'),
+ toolPart('question-1', 'question', { status: 'pending', input: {}, raw: '' }),
+ toolPart('suggest-1', 'suggest', { status: 'pending', input: {}, raw: '' }),
+ toolPart('task-1', 'task', {
+ status: 'running',
+ input: { description: 'Inspect the parser', subagent_type: 'explore' },
+ metadata: { sessionId: childSessionId },
+ time: { start: 3 },
+ }),
+ {
+ id: 'report',
+ sessionID: 'ses-1',
+ messageID: 'assistant-1',
+ type: 'file',
+ mime: 'text/plain',
+ filename: 'report.txt',
+ url: 'https://example.com/report.txt',
+ },
+ {
+ id: 'subtask',
+ sessionID: 'ses-1',
+ messageID: 'assistant-1',
+ type: 'subtask',
+ agent: 'explore',
+ description: 'Review the results',
+ prompt: 'Review the parser checks',
+ },
+ ]),
+ ],
+ {
+ isStreaming: true,
+ onOpenChildSession: jest.fn(),
+ getChildMessages: sessionId => (sessionId === childSessionId ? childMessages : []),
+ }
+ );
+ const renderedButtons = buttons(html);
+ const disclosures = renderedButtons.filter(button => button.includes('aria-expanded='));
+
+ expect(html).toContain('Waiting for answer');
+ expect(html).toContain('Run the focused checks next?');
+ for (const label of ['Run checks', 'Dismiss', 'Inspect the parser']) {
+ const control = renderedButtons.find(button => button.includes(label));
+ expect(control).toBeDefined();
+ expect(control).not.toContain('disabled=');
+ }
+ const childControl = renderedButtons.find(button => button.includes('Inspect the parser'));
+ expect(childControl).toContain('>Explore<');
+ expect(childControl).not.toContain('explore Agent');
+ expect(childControl).toContain('Latest: Read parser.ts');
+ expect(childControl).toContain('parser.ts');
+ expect(childControl).toContain('2 tool calls');
+ expect(childControl).toContain('aria-busy="true"');
+ expect(childControl).not.toContain('aria-expanded=');
+ expect(html).not.toContain('Child transcript stays in the drawer.');
+ expect(html).not.toContain('Reasoning details for child-reasoning');
+ expect(html).toContain('href="https://example.com/report.txt"');
+ expect(html).toContain('report.txt');
+ expect(html).toContain('Review the results');
+ expect(disclosures).toEqual([
+ expect.stringContaining('Thought'),
+ expect.stringContaining('Shell'),
+ ]);
+ for (const disclosure of disclosures) {
+ expect(disclosure).toContain('aria-expanded="false"');
+ }
+ expect(html).not.toContain('Reasoning details');
+ expect(html).not.toContain('Output for');
+ });
+
+ it.each(['pending', 'running', 'completed', 'error'] as const)(
+ 'keeps latest child activity visible after its state becomes %s',
+ status => {
+ const sessionId = `ses_${'c'.repeat(26)}`;
+ const input = { filePath: '/repo/package.json' };
+ const state: ToolPart['state'] =
+ status === 'pending'
+ ? { status, input, raw: '' }
+ : status === 'running'
+ ? { status, input, time: { start: 2 } }
+ : status === 'error'
+ ? { status, input, error: 'Read failed', time: { start: 2, end: 3 } }
+ : {
+ status,
+ input,
+ output: '{}',
+ title: 'Read package',
+ metadata: {},
+ time: { start: 2, end: 3 },
+ };
+ const childMessages = [
+ assistantMessage('child-1', [
+ toolPart('older-running', 'bash', {
+ status: 'running',
+ input: { command: 'pnpm test' },
+ time: { start: 1 },
+ }),
+ toolPart('latest-read', 'read', state),
+ reasoningPart('between-tools'),
+ ]),
+ ];
+ const parent = assistantMessage('parent', [
+ toolPart('task', 'task', {
+ status: 'running',
+ input: { description: 'Explore repository', subagent_type: 'explore' },
+ metadata: { sessionId },
+ time: { start: 1 },
+ }),
+ ]);
+ const render = () =>
+ renderConversation([parent], {
+ isStreaming: true,
+ onOpenChildSession: jest.fn(),
+ getChildMessages: () => childMessages,
+ });
+ const html = render();
+
+ expect(html).toContain(`Latest: Read package.json${status === 'error' ? ' (failed)' : ''}`);
+ expect(html).not.toContain('Latest: Shell');
+ expect(html).not.toContain('Working...');
+ expect(html).toContain('2 tool calls');
+ expect(html).toContain('aria-busy="true"');
+ expect(html.indexOf('Explore repository')).toBeLessThan(html.indexOf('>Explore<'));
+
+ childMessages.push(
+ assistantMessage('child-2', [
+ toolPart('next-read', 'read', {
+ status: 'running',
+ input: { filePath: '/repo/README.md' },
+ time: { start: 4 },
+ }),
+ ])
+ );
+ const next = render();
+ expect(next).toContain('Latest: Read README.md');
+ expect(next).not.toContain('Latest: Read package.json');
+ expect(next).toContain('3 tool calls');
+ expect(next).toContain('aria-busy="true"');
+ }
+ );
+
+ it.each(['pending', 'running'] as const)(
+ 'keeps a progress line before %s child activity arrives',
+ status => {
+ const state: ToolPart['state'] =
+ status === 'pending'
+ ? { status, input: { description: 'Explore repository' }, raw: '' }
+ : { status, input: { description: 'Explore repository' }, time: { start: 1 } };
+ const html = renderConversation([
+ assistantMessage('parent', [toolPart('task', 'task', state)]),
+ ]);
+
+ expect(html).toContain(status === 'pending' ? 'Delegating...' : 'Working...');
+ expect(html).not.toContain('0 tool calls');
+ expect(html).not.toContain('Completed');
+ }
+ );
+
+ it('retains an enabled inline child-session control when no drawer callback is provided', () => {
+ const sessionId = `ses_${'b'.repeat(26)}`;
+ const childMessages = [
+ assistantMessage(
+ 'child-1',
+ [toolPart('child-tool'), textPart('child-answer', 'The child session result.')],
+ { sessionID: sessionId }
+ ),
+ ];
+ const html = renderConversation(
+ [
+ assistantMessage('assistant-1', [
+ toolPart('task-1', 'task', {
+ status: 'completed',
+ input: { description: 'Inspect the parser', subagent_type: 'explore' },
+ output: '',
+ title: 'Parser inspection',
+ metadata: { sessionId },
+ time: { start: 1, end: 2 },
+ }),
+ ]),
+ ],
+ { getChildMessages: childSessionId => (childSessionId === sessionId ? childMessages : []) }
+ );
+
+ expect(buttons(html)).toEqual([expect.stringContaining('Inspect the parser')]);
+ expect(buttons(html)[0]).toContain('>Explore<');
+ expect(buttons(html)[0]).toContain('Completed');
+ expect(buttons(html)[0]).not.toContain('Latest:');
+ expect(buttons(html)[0]).toContain('1 tool call');
+ expect(buttons(html)[0]).not.toContain('1 tool calls');
+ expect(buttons(html)[0]).not.toContain('aria-busy="true"');
+ expect(buttons(html)[0]).not.toContain('disabled=');
+ expect(html).not.toContain('The child session result.');
+ });
+
+ it.each([false, true])(
+ 'renders no disclosure or spacing for a hidden-only reasoning transcript (streaming=%s)',
+ isStreaming => {
+ const hidden = [
+ reasoningPart('empty', { text: '', time: { start: 1 } }),
+ reasoningPart('blank', { text: ' \n\t ' }),
+ reasoningPart('redacted', { text: '[REDACTED]' }),
+ reasoningPart('repeated-redactions', { text: ' [REDACTED]\n[REDACTED][REDACTED]\t ' }),
+ reasoningPart('comment-placeholder', { text: '' }),
+ reasoningPart('comment-and-redaction', { text: '[REDACTED]' }),
+ reasoningPart('unfinished-comment', { text: '',
+ time: { start: 1, end: isStreaming ? undefined : 2 },
+ }),
+ ],
+ { time: { created: 1, completed: isStreaming ? undefined : 2 } }
+ ),
+ ],
+ { isStreaming }
+ );
+
+ expect(html).toContain(
+ isStreaming ? 'Thinking: Inspect the parser' : 'Thought: Inspect the parser · 1ms'
+ );
+ expect(html.match(/data-message-role="assistant"/g)).toHaveLength(1);
+ expect(buttons(html)).toHaveLength(0);
+ expect(html).not.toContain('aria-expanded=');
+ expect(html).not.toContain('[REDACTED]');
+ expect(html).not.toContain('placeholder');
+ expect(html).not.toContain('Message timestamp');
+ }
+ );
+
+ it('keeps preparation details between their triggering message and the next answer', () => {
+ const first = assistantMessage('assistant-1', [textPart('first-answer', 'First answer')]);
+ const second = assistantMessage('assistant-2', [textPart('second-answer', 'Second answer')]);
+ const attempt: PreparationAttempt = {
+ id: 'preparation-1',
+ triggerMessageId: first.info.id,
+ status: 'failed',
+ safeError: 'Workspace setup failed',
+ startedAt: 1,
+ revision: 1,
+ steps: [],
+ };
+ const html = renderConversation([first, second], {
+ preparationByMessageId: new Map([[first.info.id, [attempt]]]),
+ });
+
+ expect(html).toContain('First answer');
+ expect(html).toContain('Second answer');
+ expect(html).toContain('Workspace setup failed');
+ expect(html.indexOf('Preparation failed')).toBeGreaterThan(html.indexOf('First answer'));
+ expect(html.indexOf('Preparation failed')).toBeLessThan(html.indexOf('Second answer'));
+ expect(buttons(html).find(button => button.includes('View details'))).toBeDefined();
+ });
+});
+
+describe('PartRenderer tool lifecycle', () => {
+ const pendingState: ToolPart['state'] = { status: 'pending', input: {}, raw: '' };
+ const runningState: ToolPart['state'] = {
+ status: 'running',
+ input: {},
+ time: { start: 1 },
+ };
+ const completedState: ToolPart['state'] = {
+ status: 'completed',
+ input: {},
+ output: 'Stored tool result',
+ title: '',
+ metadata: {},
+ time: { start: 1, end: 2 },
+ };
+ const errorState: ToolPart['state'] = {
+ status: 'error',
+ input: {},
+ error: 'The tool could not finish.',
+ time: { start: 1, end: 2 },
+ };
+
+ it.each([
+ { tool: 'read', title: 'Read' },
+ { tool: 'edit', title: 'Edit' },
+ { tool: 'write', title: 'Write' },
+ { tool: 'bash', title: 'Shell' },
+ { tool: 'glob', title: 'Glob' },
+ { tool: 'grep', title: 'Grep' },
+ { tool: 'list', title: 'List' },
+ { tool: 'websearch', title: 'WebSearch' },
+ { tool: 'codesearch', title: 'CodeSearch' },
+ { tool: 'webfetch', title: 'WebFetch' },
+ { tool: 'background_process', title: 'Check background process' },
+ { tool: 'apply_patch', title: 'Apply patch' },
+ { tool: 'mcp', title: 'mcp' },
+ { tool: 'custom-tool', title: 'custom-tool' },
+ ])('waits for missing $tool input only while pending or running', ({ tool, title }) => {
+ for (const state of [pendingState, runningState]) {
+ const html = renderToStaticMarkup(
+ React.createElement(PartRenderer, { part: toolPart(tool, tool, state) })
+ );
+
+ expect(html).toContain(tool);
+ expect(html).toContain('...');
+ expect(buttons(html)).toHaveLength(0);
+ expect(html).not.toContain('data-tool-card');
+ }
+
+ const html = renderToStaticMarkup(
+ React.createElement(PartRenderer, { part: toolPart(tool, tool, completedState) })
+ );
+
+ expect(html).toContain(title);
+ expect(html).toContain('data-tool-card');
+ expect(html).not.toContain('animate-spin');
+ expect(html).not.toContain('Failed to render');
+ for (const button of buttons(html)) {
+ expect(button).toContain('aria-expanded="false"');
+ }
+ });
+
+ it.each([
+ 'read',
+ 'edit',
+ 'write',
+ 'bash',
+ 'background_process',
+ 'apply_patch',
+ 'webfetch',
+ 'codesearch',
+ 'task',
+ 'skill',
+ 'mcp',
+ 'custom-tool',
+ ])('surfaces %s errors even when the input object is missing', tool => {
+ const part = toolPart(tool, tool, { ...errorState });
+ Object.defineProperty(part.state, 'input', { value: undefined, enumerable: true });
+ const html = renderToStaticMarkup(
+ React.createElement(PartRenderer, { part, isStreaming: true })
+ );
+
+ expect(html).toContain('role="alert"');
+ expect(html.replace(/<[^>]*>/g, '')).toContain(`Failed: ${tool}`);
+ expect(html).toContain(errorState.error);
+ expect(buttons(html)).toHaveLength(0);
+ expect(html).not.toContain('animate-spin');
+ });
+
+ it.each([
+ { tool: 'question', title: 'Questions dismissed' },
+ { tool: 'suggest', title: 'Suggestion dismissed' },
+ { tool: 'chart', title: 'chart' },
+ { tool: 'permission', title: 'permission' },
+ ])(
+ 'preserves the existing $tool error UI instead of an ordinary tool alert',
+ ({ tool, title }) => {
+ const part = toolPart(tool, tool, errorState);
+ const html = renderToStaticMarkup(React.createElement(PartRenderer, { part }));
+
+ expect(buttons(html)).toHaveLength(1);
+ expect(buttons(html)[0]).toContain(title);
+ expect(buttons(html)[0]).toContain('aria-expanded="false"');
+ expect(html).not.toContain('role="alert"');
+ expect(html).not.toContain('Failed:');
+ expect(html).not.toContain(errorState.error);
+
+ mockExpanded = true;
+ const expanded = renderToStaticMarkup(React.createElement(PartRenderer, { part }));
+
+ expect(expanded).toContain(title);
+ if (tool === 'chart' || tool === 'permission') {
+ expect(expanded).toContain(errorState.error);
+ }
+ }
+ );
+
+ it('omits hidden tool rows and empty assistant messages while retaining completed todos', () => {
+ const hidden = [
+ toolPart('read-todos', 'todoread', completedState),
+ toolPart('enter-plan', 'plan_enter', completedState),
+ toolPart('exit-plan', 'plan_exit', completedState),
+ toolPart('pending-todos', 'todowrite', pendingState),
+ toolPart('running-todos', 'todowrite', runningState),
+ toolPart('failed-todos', 'todowrite', errorState),
+ ];
+
+ expect(renderConversation([assistantMessage('assistant-1', hidden)])).toBe('');
+ for (const part of hidden) {
+ expect(renderToStaticMarkup(React.createElement(PartRenderer, { part }))).toBe('');
+ }
+
+ const html = renderConversation([
+ assistantMessage('assistant-1', [
+ ...hidden,
+ toolPart('completed-todos', 'todowrite', completedState),
+ ]),
+ ]);
+
+ expect(buttons(html)).toEqual([expect.stringContaining('Todos')]);
+ expect(buttons(html)[0]).toContain('aria-expanded="false"');
+ expect(html).not.toContain('role="alert"');
+ });
+});
diff --git a/apps/web/src/components/cloud-agent-next/ConversationMessages.tsx b/apps/web/src/components/cloud-agent-next/ConversationMessages.tsx
new file mode 100644
index 0000000000..9ac9c10db3
--- /dev/null
+++ b/apps/web/src/components/cloud-agent-next/ConversationMessages.tsx
@@ -0,0 +1,118 @@
+'use client';
+
+import { memo } from 'react';
+import type { MessageDeliveryState, PreparationAttempt } from '@kilocode/cloud-agent-sdk';
+import type { OpenChildSession } from './ChildSessionSection';
+import { MessageBubble } from './MessageBubble';
+import { MessageErrorBoundary } from './MessageErrorBoundary';
+import { PreparationRow } from './PreparationRow';
+import { groupConversationMessages } from './message-presentation';
+import { isMessageStreaming, type StoredMessage } from './types';
+
+type ConversationMessageGroupProps = {
+ messages: StoredMessage[];
+ isStreaming: boolean;
+ deliveryState?: MessageDeliveryState;
+ preparations?: readonly PreparationAttempt[];
+ getChildMessages?: (sessionId: string) => StoredMessage[];
+ onOpenChildSession?: OpenChildSession;
+ onOpenPreparationDetails: (attemptId: string) => void;
+};
+
+const ConversationMessageGroup = memo(
+ function ConversationMessageGroup({
+ messages,
+ isStreaming,
+ deliveryState,
+ preparations,
+ getChildMessages,
+ onOpenChildSession,
+ onOpenPreparationDetails,
+ }: ConversationMessageGroupProps) {
+ const first = messages[0];
+ if (!first) return null;
+
+ const displayMessage =
+ messages.length === 1
+ ? first
+ : { info: first.info, parts: messages.flatMap(message => message.parts) };
+
+ return (
+
+
+ );
+ },
+ (previous, next) =>
+ previous.isStreaming === next.isStreaming &&
+ previous.deliveryState === next.deliveryState &&
+ previous.preparations === next.preparations &&
+ previous.getChildMessages === next.getChildMessages &&
+ previous.onOpenChildSession === next.onOpenChildSession &&
+ previous.onOpenPreparationDetails === next.onOpenPreparationDetails &&
+ previous.messages.length === next.messages.length &&
+ previous.messages.every((message, index) => message === next.messages[index])
+);
+
+type ConversationMessagesProps = {
+ active: boolean;
+ isStreaming: boolean;
+ staticMessages: StoredMessage[];
+ dynamicMessages: StoredMessage[];
+ pendingMessages: ReadonlyMap;
+ preparationByMessageId: ReadonlyMap;
+ getChildMessages?: (sessionId: string) => StoredMessage[];
+ onOpenChildSession?: OpenChildSession;
+ onOpenPreparationDetails: (attemptId: string) => void;
+};
+
+export const ConversationMessages = memo(
+ function ConversationMessages({
+ isStreaming,
+ staticMessages,
+ dynamicMessages,
+ pendingMessages,
+ preparationByMessageId,
+ getChildMessages,
+ onOpenChildSession,
+ onOpenPreparationDetails,
+ }: ConversationMessagesProps) {
+ const groups = groupConversationMessages(
+ [...staticMessages, ...dynamicMessages],
+ preparationByMessageId
+ );
+
+ return groups.map(messages => {
+ const first = messages[0];
+ const last = messages.at(-1);
+ if (!first || !last) return null;
+
+ return (
+ (replace all)
- ) : undefined
+ <>
+ {input.replaceAll === true && (
+ replace all
+ )}
+
-
Full path:
-
{input.filePath}
-
{filePath}
)}
- {/* Old string */}
-
-
Old:
-
- {input.oldString || '(empty)'}
-
-
-
New:
-
- {input.newString || '(empty)'}
-
-
+ {error}
+
)}
- {/* Running state */}
{state.status === 'running' && (
- Editing file...
+ Editing file…
)}
- {/* Pending state */}
{state.status === 'pending' && (
- Waiting to edit...
+ Waiting to edit…
)}
);
diff --git a/apps/web/src/components/cloud-agent-next/FileChangeToolCards.test.ts b/apps/web/src/components/cloud-agent-next/FileChangeToolCards.test.ts
new file mode 100644
index 0000000000..4e70aafaa3
--- /dev/null
+++ b/apps/web/src/components/cloud-agent-next/FileChangeToolCards.test.ts
@@ -0,0 +1,635 @@
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import type { DiffEditorProps } from '@monaco-editor/react';
+import { ApplyPatchToolCard } from './ApplyPatchToolCard';
+import { EditToolCard } from './EditToolCard';
+import { WriteToolCard } from './WriteToolCard';
+import { ToolDiff } from './ToolDiff';
+import { MAX_TOOL_DIFF_CHARACTERS, MAX_TOOL_DIFF_LINES } from './toolDiffUtils';
+import type { ToolPart } from './types';
+import type * as ToolCardShellModule from './ToolCardShell';
+
+jest.mock('react-markdown', () =>
+ process.getBuiltinModule('module').createRequire(__filename)('react-markdown')
+);
+jest.mock('remark-gfm', () =>
+ process.getBuiltinModule('module').createRequire(__filename)('remark-gfm')
+);
+
+Object.assign(globalThis, { React });
+
+let expanded: boolean | undefined;
+
+jest.mock('./ToolCardShell', () => {
+ const actual = jest.requireActual('./ToolCardShell');
+ return {
+ ToolCardShell: (props: React.ComponentProps) =>
+ React.createElement(
+ actual.ToolCardShell,
+ expanded === undefined ? props : { ...props, defaultExpanded: expanded }
+ ),
+ };
+});
+
+jest.mock('next/dynamic', () => ({
+ __esModule: true,
+ default: () =>
+ function MockDiffEditor({ original, modified }: DiffEditorProps) {
+ return React.createElement('div', {
+ 'data-monaco-diff': true,
+ 'data-original': original,
+ 'data-modified': modified,
+ });
+ },
+}));
+
+const filePath = '/workspace/src/file.ts';
+const patch = [
+ `--- ${filePath}`,
+ `+++ ${filePath}`,
+ '@@ -41,2 +41,2 @@',
+ ' context',
+ '-metadata before',
+ '+metadata after',
+ '',
+].join('\n');
+const rawPatch = '*** Begin Patch\n*** Add File: src/new.ts\n+new content\n*** End Patch';
+const cards = { edit: EditToolCard, write: WriteToolCard, apply_patch: ApplyPatchToolCard };
+
+function makePart(
+ tool: keyof typeof cards,
+ input: Record = {},
+ metadata: Record = {},
+ output = 'Done'
+): ToolPart {
+ return {
+ id: 'part_file_change',
+ sessionID: 'ses_test',
+ messageID: 'msg_test',
+ type: 'tool',
+ callID: 'call_test',
+ tool,
+ state: {
+ status: 'completed',
+ input,
+ output,
+ title: 'Change file',
+ metadata,
+ time: { start: 1, end: 2 },
+ },
+ };
+}
+
+function renderTool(
+ tool: keyof typeof cards,
+ input: Record = {},
+ metadata: Record = {},
+ output = 'Done'
+) {
+ return renderToStaticMarkup(
+ React.createElement(cards[tool], { toolPart: makePart(tool, input, metadata, output) })
+ );
+}
+
+beforeEach(() => {
+ expanded = true;
+});
+
+describe('file tool disclosures', () => {
+ it.each(['edit', 'write', 'apply_patch'] as const)(
+ '%s stays collapsed without mounting a diff',
+ tool => {
+ expanded = undefined;
+ const html = renderTool(
+ tool,
+ {
+ filePath,
+ oldString: 'before',
+ newString: 'after',
+ content: 'written',
+ patchText: rawPatch,
+ },
+ {
+ files: [
+ {
+ filePath,
+ relativePath: 'src/file.ts',
+ type: 'update',
+ patch,
+ additions: 1,
+ deletions: 1,
+ },
+ ],
+ }
+ );
+
+ expect(html).toContain('aria-expanded="false"');
+ expect(html).not.toContain('data-monaco-diff');
+ expect(html).not.toContain('metadata after');
+ expect(html).not.toContain('Patch input');
+ }
+ );
+});
+
+describe.each([
+ ['edit', { filePath, oldString: 'before' }],
+ ['write', { filePath }],
+ ['apply_patch', { patchText: '*** Begin Patch\n' }],
+] as const)('%s sparse completed results', (tool, partialInput) => {
+ const output = `Completed ${tool} output retained: parity-${tool}-missing-input.`;
+
+ it.each([{}, partialInput])(
+ 'retains the raw result alongside the unavailable notice: %p',
+ input => {
+ const html = renderTool(tool, input, {}, output);
+ expect(html).toContain('unavailable');
+ expect(html).toContain(output);
+ expect(html).toContain('aria-label="Output"');
+ expect(html).not.toContain('data-monaco-diff');
+ expect(html).not.toContain('additions');
+ expect(html).not.toContain('deletions');
+ }
+ );
+
+ it.each(['', ' \n\t'])('does not add an empty result block: %p', emptyOutput => {
+ const html = renderTool(tool, {}, {}, emptyOutput);
+ expect(html).toContain('unavailable');
+ expect(html).not.toContain('aria-label="Output"');
+ });
+
+ it('keeps retained results inside the individually collapsed details', () => {
+ expanded = undefined;
+ const html = renderTool(tool, {}, {}, output);
+ expect(html).toContain('aria-expanded="false"');
+ expect(html).not.toContain(output);
+ expect(html).not.toContain('aria-label="Copy output"');
+ });
+
+ it('does not duplicate success output when structured previews are available', () => {
+ const metadata =
+ tool === 'apply_patch'
+ ? {
+ files: [
+ {
+ filePath,
+ relativePath: 'src/file.ts',
+ type: 'update',
+ patch,
+ additions: 1,
+ deletions: 1,
+ },
+ ],
+ }
+ : { filediff: { file: filePath, patch, additions: 1, deletions: 1 } };
+ const html = renderTool(tool, {}, metadata, output);
+ expect(html).toContain('metadata after');
+ expect(html).not.toContain(output);
+ expect(html).not.toContain('aria-label="Output"');
+ });
+});
+
+describe('EditToolCard', () => {
+ it('prefers metadata patches and counts over input snippets', () => {
+ const html = renderTool(
+ 'edit',
+ { filePath, oldString: 'snippet before', newString: 'snippet after', replaceAll: true },
+ { filediff: { file: filePath, patch, additions: 4, deletions: 3 } }
+ );
+
+ expect(html).toContain('file.ts');
+ expect(html).toContain('/workspace/src/');
+ expect(html).toContain('replace all');
+ expect(html).toContain('aria-label="4 additions"');
+ expect(html).toContain('aria-label="3 deletions"');
+ expect(html).toContain('@@ -41,2 +41,2 @@');
+ expect(html).toContain('metadata after');
+ expect(html).not.toContain('snippet after');
+ expect(html).not.toContain('data-monaco-diff');
+ });
+
+ it.each([
+ ['', 'after'],
+ ['before', ''],
+ ['', ''],
+ ])('retains valid empty strings in snippet fallback: %p to %p', (original, modified) => {
+ const html = renderTool('edit', { filePath, oldString: original, newString: modified });
+ expect(html).toContain('Input snippets (not the full file)');
+ expect(html).toContain(`data-original="${original}"`);
+ expect(html).toContain(`data-modified="${modified}"`);
+ expect(html).not.toContain('unavailable');
+ expect(html).not.toContain('aria-label="Output"');
+ });
+
+ it.each([42, 'not a patch', rawPatch])(
+ 'uses valid snippets when the metadata patch is invalid: %p',
+ value => {
+ const html = renderTool(
+ 'edit',
+ { filePath, oldString: 'before', newString: 'after' },
+ { filediff: { file: filePath, patch: value, additions: 2, deletions: -1 } }
+ );
+ expect(html).toContain('data-original="before"');
+ expect(html).toContain('data-modified="after"');
+ expect(html).toContain('aria-label="2 additions"');
+ expect(html).not.toContain('deletions');
+ }
+ );
+
+ it.each([{ newString: 'after' }, { oldString: 'before' }, { oldString: 42, newString: 'after' }])(
+ 'does not turn absent or malformed snippets into empty strings: %p',
+ input => {
+ const html = renderTool('edit', { filePath, ...input }, { filediff: null });
+ expect(html).toContain(filePath);
+ expect(html).toContain('Diff preview unavailable');
+ expect(html).not.toContain('data-monaco-diff');
+ expect(html).not.toContain('Editing file');
+ }
+ );
+
+ it('shows at most three validated diagnostics without file-navigation actions', () => {
+ const html = renderTool(
+ 'edit',
+ { filePath, oldString: '', newString: 'after' },
+ {
+ diagnostics: {
+ [filePath]: [
+ { severity: 2, message: 'hidden warning' },
+ { severity: 1, message: 'first error', range: { start: { line: 1, character: 2 } } },
+ { severity: 1, message: 42 },
+ { severity: 1, message: 'second error' },
+ { severity: 1, message: 'third error' },
+ { severity: 1, message: 'hidden fourth error' },
+ ],
+ },
+ }
+ );
+ expect(html).toContain('[2:3]');
+ expect(html).toContain('first error');
+ expect(html).toContain('second error');
+ expect(html).toContain('third error');
+ expect(html).not.toContain('hidden warning');
+ expect(html).not.toContain('hidden fourth error');
+ expect(html).not.toContain('href=');
+ });
+});
+
+describe('WriteToolCard', () => {
+ it('uses the metadata patch even when input content is absent', () => {
+ const html = renderTool(
+ 'write',
+ {},
+ { filediff: { file: filePath, patch, additions: 1, deletions: 2 } }
+ );
+ expect(html).toContain(filePath);
+ expect(html).toContain('metadata after');
+ expect(html).toContain('aria-label="2 deletions"');
+ expect(html).not.toContain('data-monaco-diff');
+ });
+
+ it('does not replace a metadata patch with the written content', () => {
+ const html = renderTool(
+ 'write',
+ { filePath, content: 'input content' },
+ { filediff: { patch } }
+ );
+ expect(html).toContain('metadata after');
+ expect(html).not.toContain('input content');
+ });
+
+ it('keeps the labelled empty-file comparison without claiming file change counts', () => {
+ const html = renderTool('write', { filePath, content: 'one\ntwo\n' });
+ expect(html).toContain('data-original=""');
+ expect(html).toContain('data-modified="one\ntwo\n"');
+ expect(html).not.toContain('additions');
+ expect(html).not.toContain('deletions');
+ expect(html).toContain('compared with an empty file');
+ expect(html).not.toContain('aria-label="Output"');
+ });
+
+ it('retains empty content as a valid preview without inferring zero changes', () => {
+ const html = renderTool('write', { filePath, content: '' });
+ expect(html).toContain('data-original=""');
+ expect(html).toContain('data-modified=""');
+ expect(html).not.toContain('additions');
+ expect(html).not.toContain('deletions');
+ expect(html).toContain('Empty content.');
+ expect(html).not.toContain('unavailable');
+ expect(html).not.toContain('aria-label="Output"');
+ });
+
+ it('does not claim additions or deletions in a collapsed content-only write', () => {
+ expanded = undefined;
+ const html = renderTool('write', { filePath, content: 'one\ntwo\n' });
+ expect(html).toContain('aria-expanded="false"');
+ expect(html).not.toContain('additions');
+ expect(html).not.toContain('deletions');
+ });
+
+ it.each([
+ { additions: 3, deletions: 2 },
+ { additions: 0, deletions: 0 },
+ ])('retains supplied metadata counts in the collapsed header: %p', filediff => {
+ expanded = undefined;
+ const html = renderTool('write', { filePath, content: 'one\ntwo\n' }, { filediff });
+ expect(html).toContain('aria-expanded="false"');
+ expect(html).toContain(`aria-label="${filediff.additions} additions"`);
+ expect(html).toContain(`aria-label="${filediff.deletions} deletions"`);
+ });
+
+ it('does not infer a missing count when the other count is supplied', () => {
+ expanded = undefined;
+ const html = renderTool(
+ 'write',
+ { filePath, content: 'one\ntwo\n' },
+ { filediff: { deletions: 0 } }
+ );
+ expect(html).toContain('aria-label="0 deletions"');
+ expect(html).not.toContain('additions');
+ });
+
+ it.each([undefined, null, 42])(
+ 'keeps an honest unavailable state for invalid content: %p',
+ content => {
+ const html = renderTool('write', { filePath, content }, { filediff: { patch: null } });
+ expect(html).toContain(filePath);
+ expect(html).toContain('Diff preview unavailable');
+ expect(html).not.toContain('data-monaco-diff');
+ expect(html).not.toContain('Writing file');
+ expect(html).not.toContain('0 additions');
+ }
+ );
+});
+
+describe('ApplyPatchToolCard', () => {
+ it('shows add, update, delete, and move summaries with aggregate changes and distinct move paths', () => {
+ const html = renderTool(
+ 'apply_patch',
+ {},
+ {
+ files: [
+ {
+ filePath: '/workspace/src/add.ts',
+ relativePath: 'src/add.ts',
+ type: 'add',
+ patch,
+ additions: 2,
+ deletions: 0,
+ },
+ {
+ filePath,
+ relativePath: 'src/file.ts',
+ type: 'update',
+ patch,
+ additions: 3,
+ deletions: 1,
+ },
+ {
+ filePath: '/workspace/src/delete.ts',
+ relativePath: 'src/delete.ts',
+ type: 'delete',
+ patch,
+ additions: 0,
+ deletions: 2,
+ },
+ {
+ filePath: '/workspace/src/old.ts',
+ relativePath: 'src/new.ts',
+ movePath: '/workspace/src/new.ts',
+ type: 'move',
+ patch,
+ additions: 1,
+ deletions: 1,
+ },
+ ],
+ }
+ );
+ expect(html).toContain('4 files');
+ expect(html).toContain('aria-label="6 additions"');
+ expect(html).toContain('aria-label="4 deletions"');
+ for (const label of ['Added', 'Updated', 'Deleted', 'Moved']) expect(html).toContain(label);
+ expect(html).toContain('From: /workspace/src/old.ts');
+ expect(html).toContain('To: /workspace/src/new.ts');
+ expect(html).not.toContain('From: src/new.ts');
+ expect(html).not.toContain('data-monaco-diff');
+ expect(html).not.toContain('href=');
+ });
+
+ it('uses the relative destination for a move without movePath, never as the source', () => {
+ const html = renderTool(
+ 'apply_patch',
+ {},
+ {
+ files: [{ relativePath: 'src/new.ts', type: 'move', additions: 0, deletions: 0 }],
+ }
+ );
+ expect(html).toContain('new.ts');
+ expect(html).toContain('Unknown source');
+ expect(html).toContain('To: src/new.ts');
+ expect(html).toContain('Diff preview unavailable');
+ expect(html).not.toContain('aria-label="Output"');
+ });
+
+ it.each([undefined, '', 42, 'not a unified patch'])(
+ 'falls back to legacy file.diff when patch is unusable: %p',
+ value => {
+ const html = renderTool(
+ 'apply_patch',
+ {},
+ {
+ files: [
+ {
+ relativePath: 'src/file.ts',
+ type: 'update',
+ patch: value,
+ diff: patch,
+ additions: 1,
+ deletions: 1,
+ },
+ ],
+ }
+ );
+ expect(html).toContain('metadata after');
+ expect(html).not.toContain('unavailable');
+ }
+ );
+
+ it('keeps valid file summaries despite sparse, missing, or malformed patches and neighboring entries', () => {
+ const html = renderTool(
+ 'apply_patch',
+ {},
+ {
+ files: [
+ null,
+ { relativePath: 'src/omitted.ts', type: 'add', additions: 1, deletions: 0 },
+ {
+ relativePath: 'src/sparse.ts',
+ type: 'update',
+ patch: '--- a\n+++ a\n@@ -1 +1 @@\n',
+ additions: 3,
+ deletions: 2,
+ },
+ {
+ relativePath: 'src/malformed.ts',
+ type: 'delete',
+ patch: { text: patch },
+ additions: 0,
+ deletions: 4,
+ },
+ ],
+ }
+ );
+ expect(html).toContain('3 files');
+ expect(html).toContain('src/omitted.ts');
+ expect(html).toContain('src/sparse.ts');
+ expect(html).toContain('src/malformed.ts');
+ expect(html).toContain('aria-label="4 additions"');
+ expect(html).toContain('aria-label="6 deletions"');
+ expect(html.match(/Diff preview unavailable/g)).toHaveLength(3);
+ });
+
+ it('keeps raw patch input separate from an applied diff without pretending completion is pending', () => {
+ const html = renderTool('apply_patch', { patchText: rawPatch }, { files: 'invalid' });
+ expect(html).toContain('Patch input (not an applied diff)');
+ expect(html).toContain('*** Begin Patch');
+ expect(html).toContain('no usable file metadata was provided');
+ expect(html).not.toContain('Unified patch');
+ expect(html).not.toContain('data-monaco-diff');
+ expect(html).not.toContain('Applying patch');
+ expect(html).not.toContain('Waiting to apply');
+ });
+
+ it('shows pending patch input without interpreting it as unified history', () => {
+ const toolPart = makePart('apply_patch');
+ toolPart.state = { status: 'pending', input: { patchText: rawPatch }, raw: '' };
+ const html = renderToStaticMarkup(React.createElement(ApplyPatchToolCard, { toolPart }));
+ expect(html).toContain('Waiting to apply patch');
+ expect(html).toContain('Patch input (not an applied diff)');
+ expect(html).not.toContain('Unified patch');
+ expect(html).not.toContain('data-monaco-diff');
+ });
+
+ it('keeps summaries and reported counts when a patch is too large', () => {
+ const html = renderTool(
+ 'apply_patch',
+ {},
+ {
+ files: [
+ {
+ relativePath: 'src/large.ts',
+ type: 'update',
+ patch: `${patch}+${'x'.repeat(MAX_TOOL_DIFF_CHARACTERS)}`,
+ additions: 5,
+ deletions: 2,
+ },
+ ],
+ }
+ );
+ expect(html).toContain('src/large.ts');
+ expect(html).toContain('aria-label="5 additions"');
+ expect(html).toContain('too large to display inline');
+ expect(html).not.toContain('metadata after');
+ });
+});
+
+describe('ToolDiff bounds and escaping', () => {
+ it('styles header-like changed content inside every hunk without coloring file headers', () => {
+ const html = renderToStaticMarkup(
+ React.createElement(ToolDiff, {
+ patch: [
+ '--- src/file.md',
+ '+++ src/file.md',
+ '@@ -1,2 +1,2 @@',
+ '--- removed value',
+ '----',
+ '+++ added value',
+ '+---',
+ '@@ -20 +20 @@',
+ '--- another removal',
+ '+++ another addition',
+ '',
+ ].join('\n'),
+ })
+ );
+ const classesByLine = new Map(
+ Array.from(html.matchAll(/([^<]*)<\/span>/g), match => [
+ match[2],
+ match[1],
+ ])
+ );
+
+ for (const line of ['--- removed value', '----', '--- another removal']) {
+ expect(classesByLine.get(line)).toContain('text-diff-delete-text');
+ }
+ for (const line of ['+++ added value', '+---', '+++ another addition']) {
+ expect(classesByLine.get(line)).toContain('text-diff-add-text');
+ }
+ for (const line of ['--- src/file.md', '+++ src/file.md']) {
+ expect(classesByLine.get(line)).toContain('text-muted-foreground');
+ expect(classesByLine.get(line)).not.toContain('text-diff-');
+ }
+ });
+
+ it.each(['diff --git a/src/next.md b/src/next.md', 'Index: src/next.md'])(
+ 'resets header styling at a standard file boundary: %s',
+ boundary => {
+ const html = renderToStaticMarkup(
+ React.createElement(ToolDiff, {
+ patch: [
+ patch,
+ boundary,
+ '--- src/next.md',
+ '+++ src/next.md',
+ '@@ -1 +1 @@',
+ '--- next removal',
+ '+++ next addition',
+ '',
+ ].join('\n'),
+ })
+ );
+ const classesByLine = new Map(
+ Array.from(html.matchAll(/([^<]*)<\/span>/g), match => [
+ match[2],
+ match[1],
+ ])
+ );
+
+ for (const line of [boundary, '--- src/next.md', '+++ src/next.md']) {
+ expect(classesByLine.get(line)).toContain('text-muted-foreground');
+ expect(classesByLine.get(line)).not.toContain('text-diff-');
+ }
+ expect(classesByLine.get('--- next removal')).toContain('text-diff-delete-text');
+ expect(classesByLine.get('+++ next addition')).toContain('text-diff-add-text');
+ }
+ );
+
+ it('renders patch text as escaped code rather than HTML', () => {
+ const html = renderToStaticMarkup(
+ React.createElement(ToolDiff, {
+ patch: '--- src/a.ts\n+++ src/a.ts\n@@ -1 +1 @@\n-safe\n+\n',
+ })
+ );
+ expect(html).toContain('<script>alert(1)</script>');
+ expect(html).not.toContain('\n content}
+ label={`Copy ${label.toLowerCase()}`}
+ className={compact ? 'mt-1 shrink-0' : undefined}
+ />
+ );
+
+ return (
+
+ {compact ? (
+ icon && (
+
+ {icon}
+
+ )
+ ) : (
+
+ {label}
+ {copyButton}
+
+ )}
+
+ {content}
+
+ {compact && copyButton}
+
+ {children}
+
+ );
+}
+
+const markdownComponents: Components = {
+ a: ToolLink,
+ img: ({ src, alt }) => (
+ {alt || 'Image'}
+ ),
+ pre: ({ node, children }) => {
+ const code = node?.children[0];
+ if (code?.type !== 'element' || code.tagName !== 'code') return {children} ;
+ const content = code.children.map(child => (child.type === 'text' ? child.value : '')).join('');
+ return
+
+ {content}
+
+
+ );
+}
diff --git a/apps/web/src/components/cloud-agent-next/WebFetchToolCard.tsx b/apps/web/src/components/cloud-agent-next/WebFetchToolCard.tsx
new file mode 100644
index 0000000000..756717684f
--- /dev/null
+++ b/apps/web/src/components/cloud-agent-next/WebFetchToolCard.tsx
@@ -0,0 +1,62 @@
+import { Globe, Loader2, XCircle } from 'lucide-react';
+import { toSafeHttpUrl } from '@/lib/safe-http-url';
+import { cn } from '@/lib/utils';
+import type { ToolPart } from './types';
+
+type WebFetchToolCardProps = {
+ toolPart: ToolPart;
+};
+
+export function WebFetchToolCard({ toolPart }: WebFetchToolCardProps) {
+ const state = toolPart.state;
+ const url = typeof state.input.url === 'string' ? state.input.url.trim() : '';
+ const href = toSafeHttpUrl(url);
+ const isLoading = state.status === 'pending' || state.status === 'running';
+ const statusLabel = {
+ pending: 'Pending',
+ running: 'Fetching',
+ completed: 'Completed',
+ error: 'Failed',
+ }[state.status];
+
+ return (
+
+ {isLoading ? (
+
+ ) : state.status === 'error' ? (
+
+ ) : (
+
+ )}
+
WebFetch
+
+ ·
+
+ {href ? (
+
+ {url}
+
+ ) : (
+
+ {url || 'URL unavailable'}
+
+ )}
+
{statusLabel}
+
0 ? (
-
- {resultCount} {resultCount === 1 ? 'result' : 'results'}
-
- ) : undefined
- }
>
- {/* Results list */}
- {results.length > 0 && (
-
- {results.map((result, idx) => {
- const safeHref = toSafeHttpUrl(result.url);
- return (
-
- {safeHref ? (
-
- {result.title}
-
- ) : (
-
{result.title}
- )}
-
- {result.author && {result.author} }
- {result.publishedDate && {formatDate(result.publishedDate)} }
-
-
- );
- })}
-
-
{output}
+ {state.status === 'completed' && urls.length === 0 && (
+
+ {output?.trim() ? 'No links found in search output' : 'No results found'}
)}
- {state.status === 'completed' && !output && (
-
No results found
- )}
+ {error &&
}
- {/* Error */}
- {error && (
-
- )}
-
- {/* Running state */}
{state.status === 'running' && (
-
Searching the web...
+
+ {isCodeSearch ? 'Searching code...' : 'Searching the web...'}
+
)}
- {/* Pending state */}
{state.status === 'pending' && (
Waiting to search...
)}
diff --git a/apps/web/src/components/cloud-agent-next/WriteToolCard.tsx b/apps/web/src/components/cloud-agent-next/WriteToolCard.tsx
index 5c04a37b38..3c7399e239 100644
--- a/apps/web/src/components/cloud-agent-next/WriteToolCard.tsx
+++ b/apps/web/src/components/cloud-agent-next/WriteToolCard.tsx
@@ -1,69 +1,58 @@
import { FilePlus } from 'lucide-react';
import { ToolCardShell } from './ToolCardShell';
-import { getFilename } from './toolCardUtils';
+import { ToolDiagnostics, ToolDiff, ToolDiffStats, ToolFilePath } from './ToolDiff';
+import { ToolCodeBlock } from './ToolOutput';
+import { getUnifiedPatch, readFileToolMetadata } from './toolDiffUtils';
import type { ToolPart } from './types';
type WriteToolCardProps = {
toolPart: ToolPart;
};
-type WriteInput = {
- filePath: string;
- content: string;
-};
-
export function WriteToolCard({ toolPart }: WriteToolCardProps) {
const state = toolPart.state;
- const input = state.input as WriteInput;
- const filename = getFilename(input.filePath);
+ const input = state.input;
+ const metadata = readFileToolMetadata(state.status === 'pending' ? undefined : state.metadata);
+ const filePath =
+ metadata.filediff?.file ??
+ (typeof input.filePath === 'string' && input.filePath.trim() ? input.filePath : undefined);
+ const content = typeof input.content === 'string' ? input.content : undefined;
+ const patch = getUnifiedPatch(metadata.filediff?.patch);
const error = state.status === 'error' ? state.error : undefined;
- const lineCount = input.content ? input.content.split('\n').length : 0;
- const byteCount = input.content ? new Blob([input.content]).size : 0;
- const sizeLabel = byteCount > 1024 ? `${(byteCount / 1024).toFixed(1)}KB` : `${byteCount}B`;
-
return (
- {lineCount} lines, {sizeLabel}
-
- }
+ subtitle={filePath ?
-
Full path:
-
{input.filePath}
-
{filePath}
)}
- {/* Content preview */}
-
-
Content:
-
- {input.content || '(empty file)'}
-
-
+ {error}
+
)}
- {/* Running state */}
{state.status === 'running' && (
- Writing file...
+ Writing file…
)}
- {/* Pending state */}
{state.status === 'pending' && (
- Waiting to write...
+ Waiting to write…
)}
);
diff --git a/apps/web/src/components/cloud-agent-next/message-presentation.test.ts b/apps/web/src/components/cloud-agent-next/message-presentation.test.ts
new file mode 100644
index 0000000000..54fd9cd947
--- /dev/null
+++ b/apps/web/src/components/cloud-agent-next/message-presentation.test.ts
@@ -0,0 +1,397 @@
+import type { PreparationAttempt } from '@kilocode/cloud-agent-sdk';
+import type { AssistantMessage } from '@/types/opencode.gen';
+import type { Part, ReasoningPart, StoredMessage, TextPart, ToolPart } from './types';
+import {
+ getVisibleAssistantParts,
+ groupConversationMessages,
+ shouldRenderToolPart,
+} from './message-presentation';
+
+function assistantMessage(id: string, overrides: Partial
= {}): StoredMessage {
+ return {
+ info: {
+ id,
+ sessionID: 'ses-1',
+ role: 'assistant',
+ time: { created: 1, completed: 2 },
+ parentID: 'user-1',
+ modelID: 'test-model',
+ providerID: 'test-provider',
+ mode: 'code',
+ agent: 'test-agent',
+ path: { cwd: '/', root: '/' },
+ cost: 0,
+ tokens: { input: 0, output: 0, reasoning: 0, cache: { read: 0, write: 0 } },
+ ...overrides,
+ },
+ parts: [],
+ };
+}
+
+function textPart(id: string, text = 'The answer'): TextPart {
+ return { id, sessionID: 'ses-1', messageID: 'assistant-1', type: 'text', text };
+}
+
+function reasoningPart(id: string, text = 'Considering the implementation'): ReasoningPart {
+ return {
+ id,
+ sessionID: 'ses-1',
+ messageID: 'assistant-1',
+ type: 'reasoning',
+ text,
+ time: { start: 1, end: 2 },
+ };
+}
+
+function toolPart(
+ id: string,
+ tool = 'read',
+ state: ToolPart['state'] = {
+ status: 'completed',
+ input: {},
+ output: 'Tool output',
+ title: tool,
+ metadata: {},
+ time: { start: 1, end: 2 },
+ }
+): ToolPart {
+ return {
+ id,
+ sessionID: 'ses-1',
+ messageID: 'assistant-1',
+ type: 'tool',
+ callID: id,
+ tool,
+ state,
+ };
+}
+
+const noPreparations = new Map();
+
+describe('groupConversationMessages', () => {
+ it('returns no groups for an empty transcript', () => {
+ expect(groupConversationMessages([], noPreparations)).toEqual([]);
+ });
+
+ it('groups consecutive assistant messages from the same turn in their original order', () => {
+ const first = assistantMessage('assistant-1');
+ const second = assistantMessage('assistant-2');
+ const streaming = assistantMessage('assistant-3', { time: { created: 3 } });
+
+ expect(groupConversationMessages([first, second, streaming], noPreparations)).toEqual([
+ [first, second, streaming],
+ ]);
+ });
+
+ it('keeps user messages separate and never groups across them', () => {
+ const first = assistantMessage('assistant-1');
+ const user: StoredMessage = {
+ info: {
+ id: 'user-2',
+ sessionID: 'ses-1',
+ role: 'user',
+ time: { created: 3 },
+ agent: 'code',
+ model: { providerID: 'test-provider', modelID: 'test-model' },
+ },
+ parts: [textPart('prompt', 'Follow up')],
+ };
+ const nextUser: StoredMessage = { ...user, info: { ...user.info, id: 'user-3' } };
+ const second = assistantMessage('assistant-2');
+
+ expect(groupConversationMessages([first, user, nextUser, second], noPreparations)).toEqual([
+ [first],
+ [user],
+ [nextUser],
+ [second],
+ ]);
+ });
+
+ it.each(['sessionID', 'parentID'] as const)('does not group across a different %s', key => {
+ const first = assistantMessage('assistant-1');
+ const boundary = assistantMessage('assistant-2', { [key]: 'other' });
+ const third = assistantMessage('assistant-3');
+
+ expect(groupConversationMessages([first, boundary, third], noPreparations)).toEqual([
+ [first],
+ [boundary],
+ [third],
+ ]);
+ });
+
+ it.each([
+ ['failure', { name: 'UnknownError', data: { message: 'Request failed' } }],
+ ['interruption', { name: 'MessageAbortedError', data: { message: 'aborted' } }],
+ ['sanitized string error', 'Request was rate limited'],
+ ])('isolates an assistant %s from both neighboring groups', (_label, error) => {
+ const first = assistantMessage('assistant-1');
+ const failed = assistantMessage('assistant-2');
+ Object.defineProperty(failed.info, 'error', { value: error, enumerable: true });
+ const third = assistantMessage('assistant-3');
+ const fourth = assistantMessage('assistant-4');
+
+ expect(groupConversationMessages([first, failed, third, fourth], noPreparations)).toEqual([
+ [first],
+ [failed],
+ [third, fourth],
+ ]);
+ });
+
+ it('allows a null error and empty preparation list without creating a boundary', () => {
+ const first = assistantMessage('assistant-1');
+ const second = assistantMessage('assistant-2');
+ Object.defineProperty(first.info, 'error', { value: null, enumerable: true });
+ const preparations = new Map([['assistant-2', []]]);
+
+ expect(groupConversationMessages([first, second], preparations)).toEqual([[first, second]]);
+ });
+
+ it.each(['running', 'completed', 'failed'] as const)(
+ 'preserves both sides of a %s preparation boundary',
+ status => {
+ const first = assistantMessage('assistant-1');
+ const prepared = assistantMessage('assistant-2');
+ const third = assistantMessage('assistant-3');
+ const fourth = assistantMessage('assistant-4');
+ const attempt: PreparationAttempt = {
+ id: 'attempt-1',
+ triggerMessageId: prepared.info.id,
+ status,
+ startedAt: 1,
+ revision: 1,
+ steps: [],
+ };
+ const attempts = Object.freeze([attempt]);
+ const preparations = new Map([[prepared.info.id, attempts]]);
+
+ expect(groupConversationMessages([first, prepared, third, fourth], preparations)).toEqual([
+ [first],
+ [prepared],
+ [third, fourth],
+ ]);
+ expect([...preparations]).toEqual([[prepared.info.id, [attempt]]]);
+ expect(preparations.get(prepared.info.id)).toBe(attempts);
+ }
+ );
+
+ it('preserves the original message objects and does not mutate frozen inputs', () => {
+ const first = assistantMessage('assistant-1');
+ first.parts = [reasoningPart('reasoning-1'), toolPart('read-1')];
+ const second = assistantMessage('assistant-2');
+ second.parts = [{ ...textPart('answer'), messageID: second.info.id }];
+ const messages = [first, second];
+ const original = structuredClone(messages);
+ for (const message of messages) {
+ Object.freeze(message.info);
+ Object.freeze(message.parts);
+ Object.freeze(message);
+ }
+ Object.freeze(messages);
+
+ const groups = groupConversationMessages(messages, noPreparations);
+
+ expect(messages).toEqual(original);
+ expect(groups).toEqual([[first, second]]);
+ expect(groups[0]).not.toBe(messages);
+ expect(groups[0]?.[0]).toBe(first);
+ expect(groups[0]?.[1]).toBe(second);
+ });
+});
+
+describe.each([
+ { status: 'pending', input: {}, raw: '' },
+ { status: 'running', input: {}, time: { start: 1 } },
+ {
+ status: 'completed',
+ input: {},
+ output: '',
+ title: '',
+ metadata: {},
+ time: { start: 1, end: 2 },
+ },
+ { status: 'error', input: {}, error: 'Tool failed', time: { start: 1, end: 2 } },
+] satisfies ToolPart['state'][])('shouldRenderToolPart ($status)', state => {
+ it.each(['todoread', 'plan_enter', 'plan_exit'])('hides %s', tool => {
+ expect(shouldRenderToolPart(toolPart(tool, tool, state))).toBe(false);
+ });
+
+ it('shows todowrite only after completion', () => {
+ expect(shouldRenderToolPart(toolPart('todos', 'todowrite', state))).toBe(
+ state.status === 'completed'
+ );
+ });
+
+ it.each(['question', 'suggest', 'chart', 'permission', 'task', 'custom-tool'])(
+ 'preserves the %s flow',
+ tool => {
+ expect(shouldRenderToolPart(toolPart(tool, tool, state))).toBe(true);
+ }
+ );
+});
+
+describe('getVisibleAssistantParts', () => {
+ it('keeps reasoning, tools, and prose in transcript order', () => {
+ const parts = [
+ reasoningPart('reasoning-1'),
+ toolPart('read-1'),
+ textPart('answer-1'),
+ textPart('answer-2', 'Next steps'),
+ toolPart('edit-1', 'edit'),
+ reasoningPart('reasoning-2'),
+ ];
+
+ expect(getVisibleAssistantParts(parts)).toEqual(parts);
+ });
+
+ it('keeps all tool states, interactive tools, files, subtasks, and unknown parts visible', () => {
+ const unknown = textPart('unknown', '');
+ Object.defineProperty(unknown, 'type', { value: 'future-part', enumerable: true });
+ const parts: Part[] = [
+ toolPart('pending', 'read', { status: 'pending', input: {}, raw: '' }),
+ toolPart('running', 'bash', { status: 'running', input: {}, time: { start: 1 } }),
+ toolPart('completed', 'edit'),
+ toolPart('failed', 'bash', {
+ status: 'error',
+ input: {},
+ error: 'Command failed',
+ time: { start: 1, end: 2 },
+ }),
+ toolPart('question-1', 'question'),
+ toolPart('suggest-1', 'suggest'),
+ toolPart('chart-1', 'chart'),
+ toolPart('permission-1', 'permission'),
+ toolPart('todos-1', 'todowrite'),
+ toolPart('background-1', 'background_process'),
+ toolPart('apply-patch-1', 'apply_patch'),
+ toolPart('fetch-1', 'webfetch'),
+ toolPart('code-search-1', 'codesearch'),
+ toolPart('task-1', 'task'),
+ toolPart('custom-1', 'custom-tool'),
+ {
+ id: 'file-1',
+ sessionID: 'ses-1',
+ messageID: 'assistant-1',
+ type: 'file',
+ mime: 'text/plain',
+ filename: 'report.txt',
+ url: '',
+ },
+ {
+ id: 'subtask-1',
+ sessionID: 'ses-1',
+ messageID: 'assistant-1',
+ type: 'subtask',
+ agent: 'explore',
+ description: 'Inspect the parser',
+ prompt: 'Find the parsing code',
+ },
+ unknown,
+ ];
+
+ expect(getVisibleAssistantParts(parts)).toEqual(parts);
+ });
+
+ it('filters hidden parts without changing the order of visible neighbors', () => {
+ const base = { sessionID: 'ses-1', messageID: 'assistant-1' };
+ const hidden: Part[] = [
+ { ...base, id: 'start', type: 'step-start' },
+ {
+ ...base,
+ id: 'finish',
+ type: 'step-finish',
+ reason: 'tool-calls',
+ cost: 0,
+ tokens: { input: 0, output: 0, reasoning: 0, cache: { read: 0, write: 0 } },
+ },
+ { ...base, id: 'patch', type: 'patch', hash: 'hash-1', files: ['report.txt'] },
+ textPart('empty-text', ''),
+ textPart('blank-text', ' \n\t '),
+ reasoningPart('empty-reasoning', ''),
+ reasoningPart('blank-reasoning', ' \n\t '),
+ reasoningPart('redacted-reasoning', '[REDACTED]'),
+ reasoningPart('repeated-redactions', ' [REDACTED]\n[REDACTED][REDACTED]\t '),
+ reasoningPart('comment-placeholder', ''),
+ reasoningPart('comment-and-redaction', '[REDACTED]'),
+ { ...reasoningPart('unfinished-comment', 'Check [REDACTED] before continuing.'
+ );
+ const encrypted = {
+ ...reasoningPart('encrypted', 'The answer depends on the input.'),
+ metadata: {
+ openrouter: {
+ reasoning_details: [{ type: 'reasoning.encrypted', data: 'encrypted-reasoning' }],
+ },
+ },
+ };
+ const answer = textPart('answer');
+
+ expect(getVisibleAssistantParts([redacted, encrypted, answer])).toEqual([
+ redacted,
+ encrypted,
+ answer,
+ ]);
+ });
+
+ it('preserves visible part identity without changing frozen parts or their input array', () => {
+ const visible = [reasoningPart('reasoning-1'), toolPart('read-1'), textPart('answer')];
+ const parts = [reasoningPart('hidden', '[REDACTED]'), ...visible];
+ const original = structuredClone(parts);
+ parts.forEach(Object.freeze);
+ Object.freeze(parts);
+
+ const displayed = getVisibleAssistantParts(parts);
+
+ expect(parts).toEqual(original);
+ expect(displayed).toEqual(visible);
+ displayed.forEach((part, index) => expect(part).toBe(visible[index]));
+ });
+});
diff --git a/apps/web/src/components/cloud-agent-next/message-presentation.ts b/apps/web/src/components/cloud-agent-next/message-presentation.ts
new file mode 100644
index 0000000000..fa0641de10
--- /dev/null
+++ b/apps/web/src/components/cloud-agent-next/message-presentation.ts
@@ -0,0 +1,59 @@
+import type { PreparationAttempt } from '@kilocode/cloud-agent-sdk';
+import type { Part, StoredMessage, ToolPart } from './types';
+import { isAssistantMessage, shouldRenderReasoningPart } from './types';
+
+export function groupConversationMessages(
+ messages: StoredMessage[],
+ preparationByMessageId: ReadonlyMap
+): StoredMessage[][] {
+ const groups: StoredMessage[][] = [];
+
+ for (const message of messages) {
+ const previousGroup = groups.at(-1);
+ const previous = previousGroup?.at(-1);
+ if (
+ previousGroup &&
+ previous &&
+ isAssistantMessage(previous.info) &&
+ isAssistantMessage(message.info) &&
+ previous.info.sessionID === message.info.sessionID &&
+ previous.info.parentID === message.info.parentID &&
+ previous.info.error == null &&
+ message.info.error == null &&
+ !preparationByMessageId.get(previous.info.id)?.length &&
+ !preparationByMessageId.get(message.info.id)?.length
+ ) {
+ previousGroup.push(message);
+ } else {
+ groups.push([message]);
+ }
+ }
+
+ return groups;
+}
+
+export function shouldRenderToolPart(part: ToolPart): boolean {
+ if (part.tool === 'plan_enter' || part.tool === 'plan_exit' || part.tool === 'todoread') {
+ return false;
+ }
+ return part.tool !== 'todowrite' || part.state.status === 'completed';
+}
+
+export function getVisibleAssistantParts(parts: Part[]): Part[] {
+ return parts.filter(part => {
+ switch (part.type) {
+ case 'step-start':
+ case 'step-finish':
+ case 'patch':
+ return false;
+ case 'reasoning':
+ return shouldRenderReasoningPart(part);
+ case 'text':
+ return part.text.trim() !== '';
+ case 'tool':
+ return shouldRenderToolPart(part);
+ default:
+ return true;
+ }
+ });
+}
diff --git a/apps/web/src/components/cloud-agent-next/normalize-terminal-output.ts b/apps/web/src/components/cloud-agent-next/normalize-terminal-output.ts
new file mode 100644
index 0000000000..848ee1c1e3
--- /dev/null
+++ b/apps/web/src/components/cloud-agent-next/normalize-terminal-output.ts
@@ -0,0 +1,16 @@
+import { stripAnsi } from '@/lib/stripAnsi';
+
+export function normalizeTerminalOutput(output: string): string {
+ return stripAnsi(output)
+ .replace(/\r\n/g, '\n')
+ .split('\n')
+ .map(line => {
+ if (!line.includes('\r')) return line;
+ const frames = line.split('\r');
+ for (let index = frames.length - 1; index >= 0; index--) {
+ if (frames[index] !== '') return frames[index];
+ }
+ return '';
+ })
+ .join('\n');
+}
diff --git a/apps/web/src/components/cloud-agent-next/reasoning-presentation.test.ts b/apps/web/src/components/cloud-agent-next/reasoning-presentation.test.ts
new file mode 100644
index 0000000000..9febafcdd0
--- /dev/null
+++ b/apps/web/src/components/cloud-agent-next/reasoning-presentation.test.ts
@@ -0,0 +1,55 @@
+import { getReasoningHeader, getReasoningPresentation } from './reasoning-presentation';
+
+it.each([
+ [undefined, { start: 0 }, true, 'Thinking'],
+ ['Inspect the parser', { start: 0 }, true, 'Thinking: Inspect the parser'],
+ [undefined, { start: 0 }, false, 'Thought'],
+ ['Inspect the parser', { start: 0 }, false, 'Thought: Inspect the parser'],
+ [undefined, { start: 100, end: 1300 }, false, 'Thought: 1.2s'],
+ ['Inspect the parser', { start: 100, end: 1300 }, false, 'Thought: Inspect the parser · 1.2s'],
+ ['Inspect the parser', { start: 100, end: 100 }, false, 'Thought: Inspect the parser · 0ms'],
+ [undefined, { start: 100, end: 0 }, false, 'Thought: 0ms'],
+ [undefined, { start: 0, end: 999 }, false, 'Thought: 999ms'],
+ [undefined, { start: 0, end: 1000 }, false, 'Thought: 1.0s'],
+ [undefined, { start: 0, end: 60000 }, false, 'Thought: 1m 0s'],
+ [undefined, { start: 0, end: 123456 }, false, 'Thought: 2m 3s'],
+ [undefined, { start: 0, end: 3600000 }, false, 'Thought: 1h 0m'],
+ [undefined, { start: 0, end: 86400000 }, false, 'Thought: 1d 0h'],
+] as const)('formats reasoning header %j %j (streaming=%s)', (title, time, streaming, expected) => {
+ expect(getReasoningHeader(title, time, streaming)).toBe(expected);
+});
+
+it.each([
+ [
+ '**Inspect the parser**\n\nRead the implementation.',
+ { title: 'Inspect the parser', body: 'Read the implementation.' },
+ ],
+ [
+ '## Check `parse` [calls](https://example.com) ##\n\n- Read the tests',
+ { title: 'Check parse calls', body: '- Read the tests' },
+ ],
+ [
+ 'Review the changes\r\n------------------\r\n\r\nCheck the result.',
+ { title: 'Review the changes', body: 'Check the result.' },
+ ],
+ [
+ 'Check provider status \n\nContinue.',
+ { title: 'Check provider status', body: 'Continue.' },
+ ],
+ ['__Summary__', { title: 'Summary', body: '' }],
+ [
+ 'Plain reasoning.\n\n**Later heading**\nMore text.',
+ { body: 'Plain reasoning.\n\n**Later heading**\nMore text.' },
+ ],
+ ['**Important** because this is prose.', { body: '**Important** because this is prose.' }],
+ [
+ '[REDACTED]\n**Review**\n\nKeep [REDACTED] the readable text.',
+ { title: 'Review', body: 'Keep the readable text.' },
+ ],
+ ['**Review**\n\n', { title: 'Review', body: '' }],
+ ['', { body: '' }],
+ ['**Review**\n\n/g, '');
+ const openComment = withoutComments.indexOf('' },
+ { name: 'HTML comment placeholder', text: '' },
+ { name: 'multiline HTML comments', text: ' \n ' },
+ { name: 'streaming comment opener', text: ' \n[REDACTED]' },
+ ])('hides $name reasoning whether completed or streaming', ({ text }) => {
+ for (const ended of [true, false]) {
+ const part = makeReasoningPart(text, ended);
+ expect(isPartStreaming(part)).toBe(!ended);
+ expect(shouldRenderReasoningPart(part)).toBe(false);
+ }
});
- it('does not render a completed reasoning part with whitespace-only text', () => {
- expect(shouldRenderReasoningPart(makeReasoningPart(' \n\t ', true))).toBe(false);
+ it.each([
+ 'thinking through the steps',
+ 'Check [REDACTED] before continuing.',
+ '[REDACTED]The answer depends on the input.[REDACTED]',
+ 'Check the input.',
+ '',
+ ])('renders meaningful text %j whether completed or streaming', text => {
+ for (const ended of [true, false]) {
+ const part = makeReasoningPart(text, ended);
+ expect(shouldRenderReasoningPart(part)).toBe(true);
+ expect(part.text).toBe(text);
+ }
});
- it('renders a completed reasoning part with meaningful text', () => {
- expect(shouldRenderReasoningPart(makeReasoningPart('thinking through the steps', true))).toBe(
- true
- );
+ it.each(encryptedMetadata)('hides blank reasoning with $name metadata', ({ metadata }) => {
+ for (const text of ['', ' \n\t ', '[REDACTED]', '', 'Check [REDACTED] before continuing.'),
+ metadata: { anthropic: { signature: 'reasoning-signature' } },
+ };
+ const original = structuredClone(part);
+ Object.freeze(part.metadata.anthropic);
+ Object.freeze(part.metadata);
+ Object.freeze(part);
+
+ expect(shouldRenderReasoningPart(part)).toBe(true);
+ expect(part).toEqual(original);
});
it('does not render a non-reasoning part', () => {
diff --git a/apps/web/src/components/cloud-agent-next/types.ts b/apps/web/src/components/cloud-agent-next/types.ts
index f81a045c34..fc21e986d8 100644
--- a/apps/web/src/components/cloud-agent-next/types.ts
+++ b/apps/web/src/components/cloud-agent-next/types.ts
@@ -171,7 +171,14 @@ export function isReasoningPart(part: Part): part is ReasoningPart {
/** Whether the reasoning expander has content worth showing. */
export function shouldRenderReasoningPart(part: Part): boolean {
- return isReasoningPart(part) && part.text.trim() !== '';
+ return (
+ isReasoningPart(part) &&
+ part.text
+ .replaceAll('[REDACTED]', '')
+ .replace(//g, '')
+ .replace('