diff --git a/packages/cli/src/test-utils/render.tsx b/packages/cli/src/test-utils/render.tsx
index 368fe0451a..5acf740074 100644
--- a/packages/cli/src/test-utils/render.tsx
+++ b/packages/cli/src/test-utils/render.tsx
@@ -19,6 +19,7 @@ import { calculateMainAreaWidth } from '../ui/utils/ui-sizing.js';
import { VimModeProvider } from '../ui/contexts/VimModeContext.js';
import { MouseProvider } from '../ui/contexts/MouseContext.js';
import { ScrollProvider } from '../ui/contexts/ScrollProvider.js';
+import { StreamingContext } from '../ui/contexts/StreamingContext.js';
import { type Config } from '@google/gemini-cli-core';
@@ -69,6 +70,9 @@ const mockConfig = {
getTargetDir: () =>
'/Users/test/project/foo/bar/and/some/more/directories/to/make/it/long',
getDebugMode: () => false,
+ isTrustedFolder: () => true,
+ getIdeMode: () => false,
+ getEnableInteractiveShell: () => true,
};
const configProxy = new Proxy(mockConfig, {
@@ -177,20 +181,22 @@ export const renderWithProviders = (
-
-
-
-
- {component}
-
-
-
-
+
+
+
+
+
+ {component}
+
+
+
+
+
diff --git a/packages/cli/src/ui/components/AlternateBufferQuittingDisplay.test.tsx b/packages/cli/src/ui/components/AlternateBufferQuittingDisplay.test.tsx
index 805fca19a3..2d6b880318 100644
--- a/packages/cli/src/ui/components/AlternateBufferQuittingDisplay.test.tsx
+++ b/packages/cli/src/ui/components/AlternateBufferQuittingDisplay.test.tsx
@@ -11,7 +11,6 @@ import type { HistoryItem, HistoryItemWithoutId } from '../types.js';
import { Text } from 'ink';
import { renderWithProviders } from '../../test-utils/render.js';
import type { Config } from '@google/gemini-cli-core';
-import type { ToolMessageProps } from './messages/ToolMessage.js';
vi.mock('../contexts/AppContext.js', () => ({
useAppContext: () => ({
@@ -32,14 +31,6 @@ vi.mock('../GeminiRespondingSpinner.js', () => ({
GeminiRespondingSpinner: () => Spinner,
}));
-vi.mock('./messages/ToolMessage.js', () => ({
- ToolMessage: (props: ToolMessageProps) => (
-
- ToolMessage: {props.name} - {props.status}
-
- ),
-}));
-
const mockHistory: HistoryItem[] = [
{
id: 1,
diff --git a/packages/cli/src/ui/components/StickyHeader.test.tsx b/packages/cli/src/ui/components/StickyHeader.test.tsx
index 975d5dd146..f217c00ba6 100644
--- a/packages/cli/src/ui/components/StickyHeader.test.tsx
+++ b/packages/cli/src/ui/components/StickyHeader.test.tsx
@@ -10,9 +10,14 @@ import { StickyHeader } from './StickyHeader.js';
import { renderWithProviders } from '../../test-utils/render.js';
describe('StickyHeader', () => {
- it('renders children', () => {
+ it.each([true, false])('renders children with isFirst=%s', (isFirst) => {
const { lastFrame } = renderWithProviders(
-
+
Hello Sticky
,
);
diff --git a/packages/cli/src/ui/components/StickyHeader.tsx b/packages/cli/src/ui/components/StickyHeader.tsx
index e438f12a2b..58608ce1c4 100644
--- a/packages/cli/src/ui/components/StickyHeader.tsx
+++ b/packages/cli/src/ui/components/StickyHeader.tsx
@@ -11,11 +11,17 @@ import { theme } from '../semantic-colors.js';
export interface StickyHeaderProps {
children: React.ReactNode;
width: number;
+ isFirst: boolean;
+ borderColor: string;
+ borderDimColor: boolean;
}
export const StickyHeader: React.FC = ({
children,
width,
+ isFirst,
+ borderColor,
+ borderDimColor,
}) => (
= ({
width={width}
stickyChildren={
- {children}
+ {children}
+ {/* Dark border to separate header from content. */}
+
}
>
-
+
{children}
diff --git a/packages/cli/src/ui/components/__snapshots__/AlternateBufferQuittingDisplay.test.tsx.snap b/packages/cli/src/ui/components/__snapshots__/AlternateBufferQuittingDisplay.test.tsx.snap
index 39df73eee6..a46007c568 100644
--- a/packages/cli/src/ui/components/__snapshots__/AlternateBufferQuittingDisplay.test.tsx.snap
+++ b/packages/cli/src/ui/components/__snapshots__/AlternateBufferQuittingDisplay.test.tsx.snap
@@ -17,12 +17,15 @@ Tips for getting started:
3. Create GEMINI.md files to customize your interactions with Gemini.
4. /help for more information.
╭──────────────────────────────────────────────────────────────────────────────╮
-│ToolMessage: tool1 - Success │
+│ ✓ tool1 Description for tool 1 │
+│ │
╰──────────────────────────────────────────────────────────────────────────────╯
╭──────────────────────────────────────────────────────────────────────────────╮
-│ToolMessage: tool2 - Success │
+│ ✓ tool2 Description for tool 2 │
+│ │
╰──────────────────────────────────────────────────────────────────────────────╯
╭──────────────────────────────────────────────────────────────────────────────╮
-│ToolMessage: tool3 - Pending │
+│ o tool3 Description for tool 3 │
+│ │
╰──────────────────────────────────────────────────────────────────────────────╯"
`;
diff --git a/packages/cli/src/ui/components/messages/ToolConfirmationMessage.tsx b/packages/cli/src/ui/components/messages/ToolConfirmationMessage.tsx
index 879f2a4974..8fc4b24314 100644
--- a/packages/cli/src/ui/components/messages/ToolConfirmationMessage.tsx
+++ b/packages/cli/src/ui/components/messages/ToolConfirmationMessage.tsx
@@ -41,7 +41,6 @@ export const ToolConfirmationMessage: React.FC<
terminalWidth,
}) => {
const { onConfirm } = confirmationDetails;
- const childWidth = terminalWidth - 2; // 2 for padding
const isAlternateBuffer = useAlternateBuffer();
@@ -249,21 +248,15 @@ export const ToolConfirmationMessage: React.FC<
);
- bodyContent = (
-
-
- {isAlternateBuffer ? (
- commandBox
- ) : (
-
- {commandBox}
-
- )}
-
-
+ bodyContent = isAlternateBuffer ? (
+ commandBox
+ ) : (
+
+ {commandBox}
+
);
} else if (confirmationDetails.type === 'info') {
const infoProps = confirmationDetails;
@@ -274,7 +267,7 @@ export const ToolConfirmationMessage: React.FC<
);
bodyContent = (
-
+
+
MCP Server: {mcpProps.serverName}
Tool: {mcpProps.toolName}
@@ -315,7 +308,6 @@ export const ToolConfirmationMessage: React.FC<
availableTerminalHeight,
terminalWidth,
isAlternateBuffer,
- childWidth,
]);
if (confirmationDetails.type === 'edit') {
@@ -326,7 +318,8 @@ export const ToolConfirmationMessage: React.FC<
borderStyle="round"
borderColor={theme.border.default}
justifyContent="space-around"
- padding={1}
+ paddingTop={1}
+ paddingBottom={1}
overflow="hidden"
>
Modify in progress:
@@ -342,23 +335,17 @@ export const ToolConfirmationMessage: React.FC<
{/* Body Content (Diff Renderer or Command Info) */}
{/* No separate context display here anymore for edits */}
-
+
{bodyContent}
{/* Confirmation Question */}
-
+
{question}
{/* Select Input for Options */}
-
+
({
- ToolMessage: function MockToolMessage({
- callId,
- name,
- description,
- status,
- emphasis,
- }: {
- callId: string;
- name: string;
- description: string;
- status: ToolCallStatus;
- emphasis: string;
- }) {
- // Use the same constants as the real component
- const statusSymbolMap: Record = {
- [ToolCallStatus.Success]: TOOL_STATUS.SUCCESS,
- [ToolCallStatus.Pending]: TOOL_STATUS.PENDING,
- [ToolCallStatus.Executing]: TOOL_STATUS.EXECUTING,
- [ToolCallStatus.Confirming]: TOOL_STATUS.CONFIRMING,
- [ToolCallStatus.Canceled]: TOOL_STATUS.CANCELED,
- [ToolCallStatus.Error]: TOOL_STATUS.ERROR,
- };
- const statusSymbol = statusSymbolMap[status] || '?';
- return (
-
- MockTool[{callId}]: {statusSymbol} {name} - {description} ({emphasis})
-
- );
- },
-}));
-
-vi.mock('./ToolConfirmationMessage.js', () => ({
- ToolConfirmationMessage: function MockToolConfirmationMessage({
- confirmationDetails,
- }: {
- confirmationDetails: ToolCallConfirmationDetails;
- }) {
- const displayText =
- confirmationDetails?.type === 'info'
- ? (confirmationDetails as { prompt: string }).prompt
- : confirmationDetails?.title || 'confirm';
- return MockConfirmation: {displayText};
- },
-}));
+import { Scrollable } from '../shared/Scrollable.js';
describe('', () => {
const createToolCall = (
@@ -250,6 +201,45 @@ describe('', () => {
expect(lastFrame()).toMatchSnapshot();
unmount();
});
+
+ it('renders sticky header when scrolled', () => {
+ const toolCalls = [
+ createToolCall({
+ callId: '1',
+ name: 'tool-1',
+ description: 'Description 1\n'.repeat(5),
+ }),
+ createToolCall({
+ callId: '2',
+ name: 'tool-2',
+ description: 'Description 2\n'.repeat(5),
+ }),
+ ];
+ const { lastFrame, unmount } = renderWithProviders(
+
+
+ ,
+ );
+ expect(lastFrame()).toMatchSnapshot();
+ unmount();
+ });
+
+ it('renders tool call with outputFile', () => {
+ const toolCalls = [
+ createToolCall({
+ callId: 'tool-output-file',
+ name: 'tool-with-file',
+ description: 'Tool that saved output to file',
+ status: ToolCallStatus.Success,
+ outputFile: '/path/to/output.txt',
+ }),
+ ];
+ const { lastFrame, unmount } = renderWithProviders(
+ ,
+ );
+ expect(lastFrame()).toMatchSnapshot();
+ unmount();
+ });
});
describe('Border Color Logic', () => {
diff --git a/packages/cli/src/ui/components/messages/ToolGroupMessage.tsx b/packages/cli/src/ui/components/messages/ToolGroupMessage.tsx
index 47b5c12f47..e44517e081 100644
--- a/packages/cli/src/ui/components/messages/ToolGroupMessage.tsx
+++ b/packages/cli/src/ui/components/messages/ToolGroupMessage.tsx
@@ -14,7 +14,6 @@ import { ToolConfirmationMessage } from './ToolConfirmationMessage.js';
import { theme } from '../../semantic-colors.js';
import { SHELL_COMMAND_NAME, SHELL_NAME } from '../../constants.js';
import { useConfig } from '../../contexts/ConfigContext.js';
-import { useAlternateBuffer } from '../../hooks/useAlternateBuffer.js';
interface ToolGroupMessageProps {
groupId: number;
@@ -48,7 +47,6 @@ export const ToolGroupMessage: React.FC = ({
);
const config = useConfig();
- const isAlternateBuffer = useAlternateBuffer();
const isShellCommand = toolCalls.some(
(t) => t.name === SHELL_COMMAND_NAME || t.name === SHELL_NAME,
);
@@ -59,10 +57,10 @@ export const ToolGroupMessage: React.FC = ({
? theme.status.warning
: theme.border.default;
+ const borderDimColor =
+ hasPending && (!isShellCommand || !isEmbeddedShellFocused);
+
const staticHeight = /* border */ 2 + /* marginBottom */ 1;
- // This is a bit of a magic number, but it accounts for the border and
- // marginLeft in regular mode and just the border in alternate buffer mode.
- const innerWidth = isAlternateBuffer ? terminalWidth - 3 : terminalWidth - 4;
// only prompt for tool approval on the first 'confirming' tool in the list
// note, after the CTA, this automatically moves over to the next 'confirming' tool
@@ -89,9 +87,11 @@ export const ToolGroupMessage: React.FC = ({
: undefined;
return (
+ // This box doesn't have a border even though it conceptually does because
+ // we need to allow the sticky headers to render the borders themselves so
+ // that the top border can be sticky.
= ({
cause tearing.
*/
width={terminalWidth}
- borderDimColor={
- hasPending && (!isShellCommand || !isEmbeddedShellFocused)
- }
- borderColor={borderColor}
- gap={1}
>
- {toolCalls.map((tool) => {
+ {toolCalls.map((tool, index) => {
const isConfirming = toolAwaitingApproval?.callId === tool.callId;
+ const isFirst = index === 0;
+ const isLast = index === toolCalls.length - 1;
return (
- {tool.status === ToolCallStatus.Confirming &&
- isConfirming &&
- tool.confirmationDetails && (
-
+
+ {tool.status === ToolCallStatus.Confirming &&
+ isConfirming &&
+ tool.confirmationDetails && (
+
+ )}
+ {tool.outputFile && (
+
+
+ Output too long and was saved to: {tool.outputFile}
+
+
)}
- {tool.outputFile && (
-
-
- Output too long and was saved to: {tool.outputFile}
-
-
- )}
+
);
})}
diff --git a/packages/cli/src/ui/components/messages/ToolMessage.test.tsx b/packages/cli/src/ui/components/messages/ToolMessage.test.tsx
index ce339deee4..442250f47d 100644
--- a/packages/cli/src/ui/components/messages/ToolMessage.test.tsx
+++ b/packages/cli/src/ui/components/messages/ToolMessage.test.tsx
@@ -89,6 +89,9 @@ describe('', () => {
terminalWidth: 80,
confirmationDetails: undefined,
emphasis: 'medium',
+ isFirst: true,
+ borderColor: 'green',
+ borderDimColor: false,
};
it('renders basic tool information', () => {
diff --git a/packages/cli/src/ui/components/messages/ToolMessage.tsx b/packages/cli/src/ui/components/messages/ToolMessage.tsx
index 60b91fabc7..e819993f66 100644
--- a/packages/cli/src/ui/components/messages/ToolMessage.tsx
+++ b/packages/cli/src/ui/components/messages/ToolMessage.tsx
@@ -42,6 +42,9 @@ export interface ToolMessageProps extends IndividualToolCallDisplay {
renderOutputAsMarkdown?: boolean;
activeShellPtyId?: number | null;
embeddedShellFocused?: boolean;
+ isFirst: boolean;
+ borderColor: string;
+ borderDimColor: boolean;
config?: Config;
}
@@ -58,6 +61,9 @@ export const ToolMessage: React.FC = ({
embeddedShellFocused,
ptyId,
config,
+ isFirst,
+ borderColor,
+ borderDimColor,
}) => {
const { renderMarkdown } = useUIState();
const isAlternateBuffer = useAlternateBuffer();
@@ -116,7 +122,8 @@ export const ToolMessage: React.FC = ({
if (availableHeight && !isAlternateBuffer) {
renderOutputAsMarkdown = false;
}
- const childWidth = terminalWidth;
+ const combinedPaddingAndBorderWidth = 4;
+ const childWidth = terminalWidth - combinedPaddingAndBorderWidth;
const truncatedResultDisplay = React.useMemo(() => {
if (typeof resultDisplay === 'string') {
@@ -131,7 +138,7 @@ export const ToolMessage: React.FC = ({
if (!truncatedResultDisplay) return null;
return (
-
+
{typeof truncatedResultDisplay === 'string' &&
renderOutputAsMarkdown ? (
@@ -189,15 +196,16 @@ export const ToolMessage: React.FC = ({
renderMarkdown,
isAlternateBuffer,
availableHeight,
- terminalWidth,
]);
return (
- // We have the StickyHeader intentionally exceedsthe allowed width for this
- // component by 1 so tne horizontal line it renders can extend into the 1
- // pixel of padding of the box drawn by the parent of the ToolMessage.
<>
-
+
= ({
)}
{emphasis === 'high' && }
- {renderedResult}
- {isThisShellFocused && config && (
-
-
-
- )}
+
+ {renderedResult}
+ {isThisShellFocused && config && (
+
+
+
+ )}
+
>
);
};
diff --git a/packages/cli/src/ui/components/messages/ToolMessageRawMarkdown.test.tsx b/packages/cli/src/ui/components/messages/ToolMessageRawMarkdown.test.tsx
index c9030a0af8..b7c14f36bb 100644
--- a/packages/cli/src/ui/components/messages/ToolMessageRawMarkdown.test.tsx
+++ b/packages/cli/src/ui/components/messages/ToolMessageRawMarkdown.test.tsx
@@ -20,6 +20,9 @@ describe(' - Raw Markdown Display Snapshots', () => {
terminalWidth: 80,
confirmationDetails: undefined,
emphasis: 'medium',
+ isFirst: true,
+ borderColor: 'green',
+ borderDimColor: false,
};
it.each([
diff --git a/packages/cli/src/ui/components/messages/__snapshots__/ToolGroupMessage.test.tsx.snap b/packages/cli/src/ui/components/messages/__snapshots__/ToolGroupMessage.test.tsx.snap
index 2215c6674d..46fa654ee8 100644
--- a/packages/cli/src/ui/components/messages/__snapshots__/ToolGroupMessage.test.tsx.snap
+++ b/packages/cli/src/ui/components/messages/__snapshots__/ToolGroupMessage.test.tsx.snap
@@ -2,108 +2,182 @@
exports[` > Border Color Logic > uses gray border when all tools are successful and no shell commands 1`] = `
"╭──────────────────────────────────────────────────────────────────────────────╮
-│MockTool[tool-123]: ✓ test-tool - A tool for testing (medium) │
+│ ✓ test-tool A tool for testing │
│ │
-│MockTool[tool-2]: ✓ another-tool - A tool for testing (medium) │
+│ Test result │
+│ │
+│ ✓ another-tool A tool for testing │
+│ │
+│ Test result │
╰──────────────────────────────────────────────────────────────────────────────╯"
`;
exports[` > Border Color Logic > uses yellow border for shell commands even when successful 1`] = `
"╭──────────────────────────────────────────────────────────────────────────────╮
-│MockTool[tool-123]: ✓ run_shell_command - A tool for testing (medium) │
+│ ✓ run_shell_command A tool for testing │
+│ │
+│ Test result │
╰──────────────────────────────────────────────────────────────────────────────╯"
`;
exports[` > Border Color Logic > uses yellow border when tools are pending 1`] = `
"╭──────────────────────────────────────────────────────────────────────────────╮
-│MockTool[tool-123]: o test-tool - A tool for testing (medium) │
+│ o test-tool A tool for testing │
+│ │
+│ Test result │
╰──────────────────────────────────────────────────────────────────────────────╯"
`;
exports[` > Confirmation Handling > shows confirmation dialog for first confirming tool only 1`] = `
"╭──────────────────────────────────────────────────────────────────────────────╮
-│MockTool[tool-1]: ? first-confirm - A tool for testing (high) │
-│MockConfirmation: Confirm first tool │
+│ ? first-confirm A tool for testing ← │
│ │
-│MockTool[tool-2]: ? second-confirm - A tool for testing (low) │
+│ Test result │
+│ Confirm first tool │
+│ │
+│ Do you want to proceed? │
+│ │
+│ ● 1. Yes, allow once │
+│ 2. Yes, allow always │
+│ 3. No, suggest changes (esc) │
+│ │
+│ │
+│ ? second-confirm A tool for testing │
+│ │
+│ Test result │
╰──────────────────────────────────────────────────────────────────────────────╯"
`;
-exports[` > Golden Snapshots > renders empty tool calls array 1`] = `
-"╭──────────────────────────────────────────────────────────────────────────────╮
-╰──────────────────────────────────────────────────────────────────────────────╯"
-`;
+exports[` > Golden Snapshots > renders empty tool calls array 1`] = `""`;
exports[` > Golden Snapshots > renders mixed tool calls including shell command 1`] = `
"╭──────────────────────────────────────────────────────────────────────────────╮
-│MockTool[tool-1]: ✓ read_file - Read a file (medium) │
+│ ✓ read_file Read a file │
│ │
-│MockTool[tool-2]: ⊷ run_shell_command - Run command (medium) │
+│ Test result │
│ │
-│MockTool[tool-3]: o write_file - Write to file (medium) │
+│ ⊷ run_shell_command Run command │
+│ │
+│ Test result │
+│ │
+│ o write_file Write to file │
+│ │
+│ Test result │
╰──────────────────────────────────────────────────────────────────────────────╯"
`;
exports[` > Golden Snapshots > renders multiple tool calls with different statuses 1`] = `
"╭──────────────────────────────────────────────────────────────────────────────╮
-│MockTool[tool-1]: ✓ successful-tool - This tool succeeded (medium) │
+│ ✓ successful-tool This tool succeeded │
│ │
-│MockTool[tool-2]: o pending-tool - This tool is pending (medium) │
+│ Test result │
│ │
-│MockTool[tool-3]: x error-tool - This tool failed (medium) │
+│ o pending-tool This tool is pending │
+│ │
+│ Test result │
+│ │
+│ x error-tool This tool failed │
+│ │
+│ Test result │
╰──────────────────────────────────────────────────────────────────────────────╯"
`;
exports[` > Golden Snapshots > renders shell command with yellow border 1`] = `
"╭──────────────────────────────────────────────────────────────────────────────╮
-│MockTool[shell-1]: ✓ run_shell_command - Execute shell command (medium) │
+│ ✓ run_shell_command Execute shell command │
+│ │
+│ Test result │
╰──────────────────────────────────────────────────────────────────────────────╯"
`;
exports[` > Golden Snapshots > renders single successful tool call 1`] = `
"╭──────────────────────────────────────────────────────────────────────────────╮
-│MockTool[tool-123]: ✓ test-tool - A tool for testing (medium) │
+│ ✓ test-tool A tool for testing │
+│ │
+│ Test result │
╰──────────────────────────────────────────────────────────────────────────────╯"
`;
+exports[` > Golden Snapshots > renders sticky header when scrolled 1`] = `
+"│ │
+│ ✓ tool-2 Description 2 │
+│ Description 2 │
+│ Description 2 │
+│ Description 2 │ ▄
+│ Description 2 │ █
+│ │ █
+│ │ █
+│ Test result │ █
+╰──────────────────────────────────────────────────────────────────────────────╯ █"
+`;
+
exports[` > Golden Snapshots > renders tool call awaiting confirmation 1`] = `
"╭──────────────────────────────────────────────────────────────────────────────╮
-│MockTool[tool-confirm]: ? confirmation-tool - This tool needs confirmation │
-│(high) │
-│MockConfirmation: Are you sure you want to proceed? │
+│ ? confirmation-tool This tool needs confirmation ← │
+│ │
+│ Test result │
+│ Are you sure you want to proceed? │
+│ │
+│ Do you want to proceed? │
+│ │
+│ ● 1. Yes, allow once │
+│ 2. Yes, allow always │
+│ 3. No, suggest changes (esc) │
+│ │
+╰──────────────────────────────────────────────────────────────────────────────╯"
+`;
+
+exports[` > Golden Snapshots > renders tool call with outputFile 1`] = `
+"╭──────────────────────────────────────────────────────────────────────────────╮
+│ ✓ tool-with-file Tool that saved output to file │
+│ │
+│ Test result │
+│ Output too long and was saved to: /path/to/output.txt │
╰──────────────────────────────────────────────────────────────────────────────╯"
`;
exports[` > Golden Snapshots > renders when not focused 1`] = `
"╭──────────────────────────────────────────────────────────────────────────────╮
-│MockTool[tool-123]: ✓ test-tool - A tool for testing (medium) │
+│ ✓ test-tool A tool for testing │
+│ │
+│ Test result │
╰──────────────────────────────────────────────────────────────────────────────╯"
`;
exports[` > Golden Snapshots > renders with limited terminal height 1`] = `
"╭──────────────────────────────────────────────────────────────────────────────╮
-│MockTool[tool-1]: ✓ tool-with-result - Tool with output (medium) │
+│ ✓ tool-with-result Tool with output │
│ │
-│MockTool[tool-2]: ✓ another-tool - Another tool (medium) │
+│ This is a long result that might need height constraints │
+│ │
+│ ✓ another-tool Another tool │
+│ │
+│ More output here │
╰──────────────────────────────────────────────────────────────────────────────╯"
`;
exports[` > Golden Snapshots > renders with narrow terminal width 1`] = `
"╭──────────────────────────────────────╮
-│MockTool[tool-123]: ✓ │
-│very-long-tool-name-that-might-wrap │
-│- This is a very long description │
-│that might cause wrapping issues │
-│(medium) │
+│ ✓ very-long-tool-name-that-might-wr │
+│ ap This is a very long │
+│ description that might cause │
+│ wrapping issues │
+│ │
+│ Test result │
╰──────────────────────────────────────╯"
`;
exports[` > Height Calculation > calculates available height correctly with multiple tools with results 1`] = `
"╭──────────────────────────────────────────────────────────────────────────────╮
-│MockTool[tool-1]: ✓ test-tool - A tool for testing (medium) │
+│ ✓ test-tool A tool for testing │
│ │
-│MockTool[tool-2]: ✓ test-tool - A tool for testing (medium) │
+│ Result 1 │
+│ │
+│ ✓ test-tool A tool for testing │
+│ │
+│ Result 2 │
+│ │
+│ ✓ test-tool A tool for testing │
│ │
-│MockTool[tool-3]: ✓ test-tool - A tool for testing (medium) │
╰──────────────────────────────────────────────────────────────────────────────╯"
`;
diff --git a/packages/cli/src/ui/components/messages/__snapshots__/ToolMessageRawMarkdown.test.tsx.snap b/packages/cli/src/ui/components/messages/__snapshots__/ToolMessageRawMarkdown.test.tsx.snap
index abb6a53f9b..e61465aee6 100644
--- a/packages/cli/src/ui/components/messages/__snapshots__/ToolMessageRawMarkdown.test.tsx.snap
+++ b/packages/cli/src/ui/components/messages/__snapshots__/ToolMessageRawMarkdown.test.tsx.snap
@@ -1,31 +1,43 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[` - Raw Markdown Display Snapshots > renders with renderMarkdown=false, useAlternateBuffer=false '(raw markdown, regular buffer)' 1`] = `
-" ✓ test-tool A tool for testing
- Test **bold** and \`code\` markdown"
+"╭──────────────────────────────────────────────────────────────────────────────╮
+│ ✓ test-tool A tool for testing │
+│ │
+│ Test **bold** and \`code\` markdown │"
`;
exports[` - Raw Markdown Display Snapshots > renders with renderMarkdown=false, useAlternateBuffer=true '(raw markdown, alternate buffer)' 1`] = `
-" ✓ test-tool A tool for testing
- Test **bold** and \`code\` markdown"
+"╭──────────────────────────────────────────────────────────────────────────────╮
+│ ✓ test-tool A tool for testing │
+│ │
+│ Test **bold** and \`code\` markdown │"
`;
exports[` - Raw Markdown Display Snapshots > renders with renderMarkdown=true, useAlternateBuffer=false '(constrained height, regular buffer -…' 1`] = `
-" ✓ test-tool A tool for testing
- Test **bold** and \`code\` markdown"
+"╭──────────────────────────────────────────────────────────────────────────────╮
+│ ✓ test-tool A tool for testing │
+│ │
+│ Test **bold** and \`code\` markdown │"
`;
exports[` - Raw Markdown Display Snapshots > renders with renderMarkdown=true, useAlternateBuffer=false '(default, regular buffer)' 1`] = `
-" ✓ test-tool A tool for testing
- Test bold and code markdown"
+"╭──────────────────────────────────────────────────────────────────────────────╮
+│ ✓ test-tool A tool for testing │
+│ │
+│ Test bold and code markdown │"
`;
exports[` - Raw Markdown Display Snapshots > renders with renderMarkdown=true, useAlternateBuffer=true '(constrained height, alternate buffer…' 1`] = `
-" ✓ test-tool A tool for testing
- Test bold and code markdown"
+"╭──────────────────────────────────────────────────────────────────────────────╮
+│ ✓ test-tool A tool for testing │
+│ │
+│ Test bold and code markdown │"
`;
exports[` - Raw Markdown Display Snapshots > renders with renderMarkdown=true, useAlternateBuffer=true '(default, alternate buffer)' 1`] = `
-" ✓ test-tool A tool for testing
- Test bold and code markdown"
+"╭──────────────────────────────────────────────────────────────────────────────╮
+│ ✓ test-tool A tool for testing │
+│ │
+│ Test bold and code markdown │"
`;