pre-release commit

packages/cli/src/ui/components/messages/CompressionMessage.tsx

@@ -0,0 +1,49 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { Box, Text } from 'ink';
+import { CompressionProps } from '../../types.js';
+import Spinner from 'ink-spinner';
+import { Colors } from '../../colors.js';
+
+export interface CompressionDisplayProps {
+  compression: CompressionProps;
+}
+
+/*
+ * Compression messages appear when the /compress command is run, and show a loading spinner
+ * while compression is in progress, followed up by some compression stats.
+ */
+export const CompressionMessage: React.FC<CompressionDisplayProps> = ({
+  compression,
+}) => {
+  const text = compression.isPending
+    ? 'Compressing chat history'
+    : `Chat history compressed from ${compression.originalTokenCount ?? 'unknown'}` +
+      ` to ${compression.newTokenCount ?? 'unknown'} tokens.`;
+
+  return (
+    <Box flexDirection="row">
+      <Box marginRight={1}>
+        {compression.isPending ? (
+          <Spinner type="dots" />
+        ) : (
+          <Text color={Colors.AccentPurple}>✦</Text>
+        )}
+      </Box>
+      <Box>
+        <Text
+          color={
+            compression.isPending ? Colors.AccentPurple : Colors.AccentGreen
+          }
+        >
+          {text}
+        </Text>
+      </Box>
+    </Box>
+  );
+};

packages/cli/src/ui/components/messages/DiffRenderer.test.tsx

@@ -0,0 +1,362 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { OverflowProvider } from '../../contexts/OverflowContext.js';
+import { render } from 'ink-testing-library';
+import { DiffRenderer } from './DiffRenderer.js';
+import * as CodeColorizer from '../../utils/CodeColorizer.js';
+import { vi } from 'vitest';
+
+describe('<OverflowProvider><DiffRenderer /></OverflowProvider>', () => {
+  const mockColorizeCode = vi.spyOn(CodeColorizer, 'colorizeCode');
+
+  beforeEach(() => {
+    mockColorizeCode.mockClear();
+  });
+
+  const sanitizeOutput = (output: string | undefined, terminalWidth: number) =>
+    output?.replace(/GAP_INDICATOR/g, '═'.repeat(terminalWidth));
+
+  it('should call colorizeCode with correct language for new file with known extension', () => {
+    const newFileDiffContent = `
+diff --git a/test.py b/test.py
+new file mode 100644
+index 0000000..e69de29
+--- /dev/null
++++ b/test.py
+@@ -0,0 +1 @@
++print("hello world")
+`;
+    render(
+      <OverflowProvider>
+        <DiffRenderer
+          diffContent={newFileDiffContent}
+          filename="test.py"
+          terminalWidth={80}
+        />
+      </OverflowProvider>,
+    );
+    expect(mockColorizeCode).toHaveBeenCalledWith(
+      'print("hello world")',
+      'python',
+      undefined,
+      80,
+    );
+  });
+
+  it('should call colorizeCode with null language for new file with unknown extension', () => {
+    const newFileDiffContent = `
+diff --git a/test.unknown b/test.unknown
+new file mode 100644
+index 0000000..e69de29
+--- /dev/null
++++ b/test.unknown
+@@ -0,0 +1 @@
++some content
+`;
+    render(
+      <OverflowProvider>
+        <DiffRenderer
+          diffContent={newFileDiffContent}
+          filename="test.unknown"
+          terminalWidth={80}
+        />
+      </OverflowProvider>,
+    );
+    expect(mockColorizeCode).toHaveBeenCalledWith(
+      'some content',
+      null,
+      undefined,
+      80,
+    );
+  });
+
+  it('should call colorizeCode with null language for new file if no filename is provided', () => {
+    const newFileDiffContent = `
+diff --git a/test.txt b/test.txt
+new file mode 100644
+index 0000000..e69de29
+--- /dev/null
++++ b/test.txt
+@@ -0,0 +1 @@
++some text content
+`;
+    render(
+      <OverflowProvider>
+        <DiffRenderer diffContent={newFileDiffContent} terminalWidth={80} />
+      </OverflowProvider>,
+    );
+    expect(mockColorizeCode).toHaveBeenCalledWith(
+      'some text content',
+      null,
+      undefined,
+      80,
+    );
+  });
+
+  it('should render diff content for existing file (not calling colorizeCode directly for the whole block)', () => {
+    const existingFileDiffContent = `
+diff --git a/test.txt b/test.txt
+index 0000001..0000002 100644
+--- a/test.txt
++++ b/test.txt
+@@ -1 +1 @@
+-old line
++new line
+`;
+    const { lastFrame } = render(
+      <OverflowProvider>
+        <DiffRenderer
+          diffContent={existingFileDiffContent}
+          filename="test.txt"
+          terminalWidth={80}
+        />
+      </OverflowProvider>,
+    );
+    // colorizeCode is used internally by the line-by-line rendering, not for the whole block
+    expect(mockColorizeCode).not.toHaveBeenCalledWith(
+      expect.stringContaining('old line'),
+      expect.anything(),
+    );
+    expect(mockColorizeCode).not.toHaveBeenCalledWith(
+      expect.stringContaining('new line'),
+      expect.anything(),
+    );
+    const output = lastFrame();
+    const lines = output!.split('\n');
+    expect(lines[0]).toBe('1    - old line');
+    expect(lines[1]).toBe('1    + new line');
+  });
+
+  it('should handle diff with only header and no changes', () => {
+    const noChangeDiff = `diff --git a/file.txt b/file.txt
+index 1234567..1234567 100644
+--- a/file.txt
++++ b/file.txt
+`;
+    const { lastFrame } = render(
+      <OverflowProvider>
+        <DiffRenderer
+          diffContent={noChangeDiff}
+          filename="file.txt"
+          terminalWidth={80}
+        />
+      </OverflowProvider>,
+    );
+    expect(lastFrame()).toContain('No changes detected');
+    expect(mockColorizeCode).not.toHaveBeenCalled();
+  });
+
+  it('should handle empty diff content', () => {
+    const { lastFrame } = render(
+      <OverflowProvider>
+        <DiffRenderer diffContent="" terminalWidth={80} />
+      </OverflowProvider>,
+    );
+    expect(lastFrame()).toContain('No diff content');
+    expect(mockColorizeCode).not.toHaveBeenCalled();
+  });
+
+  it('should render a gap indicator for skipped lines', () => {
+    const diffWithGap = `
+diff --git a/file.txt b/file.txt
+index 123..456 100644
+--- a/file.txt
++++ b/file.txt
+@@ -1,2 +1,2 @@
+ context line 1
+-deleted line
++added line
+@@ -10,2 +10,2 @@
+ context line 10
+ context line 11
+`;
+    const { lastFrame } = render(
+      <OverflowProvider>
+        <DiffRenderer
+          diffContent={diffWithGap}
+          filename="file.txt"
+          terminalWidth={80}
+        />
+      </OverflowProvider>,
+    );
+    const output = lastFrame();
+    expect(output).toContain('═'); // Check for the border character used in the gap
+
+    // Verify that lines before and after the gap are rendered
+    expect(output).toContain('context line 1');
+    expect(output).toContain('added line');
+    expect(output).toContain('context line 10');
+  });
+
+  it('should not render a gap indicator for small gaps (<= MAX_CONTEXT_LINES_WITHOUT_GAP)', () => {
+    const diffWithSmallGap = `
+diff --git a/file.txt b/file.txt
+index abc..def 100644
+--- a/file.txt
++++ b/file.txt
+@@ -1,5 +1,5 @@
+ context line 1
+ context line 2
+ context line 3
+ context line 4
+ context line 5
+@@ -11,5 +11,5 @@
+ context line 11
+ context line 12
+ context line 13
+ context line 14
+ context line 15
+`;
+    const { lastFrame } = render(
+      <OverflowProvider>
+        <DiffRenderer
+          diffContent={diffWithSmallGap}
+          filename="file.txt"
+          terminalWidth={80}
+        />
+      </OverflowProvider>,
+    );
+    const output = lastFrame();
+    expect(output).not.toContain('═'); // Ensure no separator is rendered
+
+    // Verify that lines before and after the gap are rendered
+    expect(output).toContain('context line 5');
+    expect(output).toContain('context line 11');
+  });
+
+  describe('should correctly render a diff with multiple hunks and a gap indicator', () => {
+    const diffWithMultipleHunks = `
+diff --git a/multi.js b/multi.js
+index 123..789 100644
+--- a/multi.js
++++ b/multi.js
+@@ -1,3 +1,3 @@
+ console.log('first hunk');
+-const oldVar = 1;
++const newVar = 1;
+ console.log('end of first hunk');
+@@ -20,3 +20,3 @@
+ console.log('second hunk');
+-const anotherOld = 'test';
++const anotherNew = 'test';
+ console.log('end of second hunk');
+`;
+
+    it.each([
+      {
+        terminalWidth: 80,
+        height: undefined,
+        expected: `1      console.log('first hunk');
+2    - const oldVar = 1;
+2    + const newVar = 1;
+3      console.log('end of first hunk');
+════════════════════════════════════════════════════════════════════════════════
+20     console.log('second hunk');
+21   - const anotherOld = 'test';
+21   + const anotherNew = 'test';
+22     console.log('end of second hunk');`,
+      },
+      {
+        terminalWidth: 80,
+        height: 6,
+        expected: `... first 4 lines hidden ...
+════════════════════════════════════════════════════════════════════════════════
+20     console.log('second hunk');
+21   - const anotherOld = 'test';
+21   + const anotherNew = 'test';
+22     console.log('end of second hunk');`,
+      },
+      {
+        terminalWidth: 30,
+        height: 6,
+        expected: `... first 10 lines hidden ...
+       'test';
+21   + const anotherNew =
+       'test';
+22     console.log('end of
+       second hunk');`,
+      },
+    ])(
+      'with terminalWidth $terminalWidth and height $height',
+      ({ terminalWidth, height, expected }) => {
+        const { lastFrame } = render(
+          <OverflowProvider>
+            <DiffRenderer
+              diffContent={diffWithMultipleHunks}
+              filename="multi.js"
+              terminalWidth={terminalWidth}
+              availableTerminalHeight={height}
+            />
+          </OverflowProvider>,
+        );
+        const output = lastFrame();
+        expect(sanitizeOutput(output, terminalWidth)).toEqual(expected);
+      },
+    );
+  });
+
+  it('should correctly render a diff with a SVN diff format', () => {
+    const newFileDiff = `
+fileDiff Index: file.txt
+===================================================================
+--- a/file.txt   Current
++++ b/file.txt   Proposed
+--- a/multi.js
++++ b/multi.js
+@@ -1,1 +1,1 @@
+-const oldVar = 1;
++const newVar = 1;
+@@ -20,1 +20,1 @@
+-const anotherOld = 'test';
++const anotherNew = 'test';
+\\ No newline at end of file  
+`;
+    const { lastFrame } = render(
+      <OverflowProvider>
+        <DiffRenderer
+          diffContent={newFileDiff}
+          filename="TEST"
+          terminalWidth={80}
+        />
+      </OverflowProvider>,
+    );
+    const output = lastFrame();
+
+    expect(output).toEqual(`1    - const oldVar = 1;
+1    + const newVar = 1;
+════════════════════════════════════════════════════════════════════════════════
+20   - const anotherOld = 'test';
+20   + const anotherNew = 'test';`);
+  });
+
+  it('should correctly render a new file with no file extension correctly', () => {
+    const newFileDiff = `
+fileDiff Index: Dockerfile
+===================================================================
+--- Dockerfile   Current
++++ Dockerfile   Proposed
+@@ -0,0 +1,3 @@
++FROM node:14
++RUN npm install
++RUN npm run build
+\\ No newline at end of file  
+`;
+    const { lastFrame } = render(
+      <OverflowProvider>
+        <DiffRenderer
+          diffContent={newFileDiff}
+          filename="Dockerfile"
+          terminalWidth={80}
+        />
+      </OverflowProvider>,
+    );
+    const output = lastFrame();
+    expect(output).toEqual(`1 FROM node:14
+2 RUN npm install
+3 RUN npm run build`);
+  });
+});

packages/cli/src/ui/components/messages/DiffRenderer.tsx

@@ -0,0 +1,312 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { Box, Text } from 'ink';
+import { Colors } from '../../colors.js';
+import crypto from 'crypto';
+import { colorizeCode } from '../../utils/CodeColorizer.js';
+import { MaxSizedBox } from '../shared/MaxSizedBox.js';
+
+interface DiffLine {
+  type: 'add' | 'del' | 'context' | 'hunk' | 'other';
+  oldLine?: number;
+  newLine?: number;
+  content: string;
+}
+
+function parseDiffWithLineNumbers(diffContent: string): DiffLine[] {
+  const lines = diffContent.split('\n');
+  const result: DiffLine[] = [];
+  let currentOldLine = 0;
+  let currentNewLine = 0;
+  let inHunk = false;
+  const hunkHeaderRegex = /^@@ -(\d+),?\d* \+(\d+),?\d* @@/;
+
+  for (const line of lines) {
+    const hunkMatch = line.match(hunkHeaderRegex);
+    if (hunkMatch) {
+      currentOldLine = parseInt(hunkMatch[1], 10);
+      currentNewLine = parseInt(hunkMatch[2], 10);
+      inHunk = true;
+      result.push({ type: 'hunk', content: line });
+      // We need to adjust the starting point because the first line number applies to the *first* actual line change/context,
+      // but we increment *before* pushing that line. So decrement here.
+      currentOldLine--;
+      currentNewLine--;
+      continue;
+    }
+    if (!inHunk) {
+      // Skip standard Git header lines more robustly
+      if (
+        line.startsWith('--- ') ||
+        line.startsWith('+++ ') ||
+        line.startsWith('diff --git') ||
+        line.startsWith('index ') ||
+        line.startsWith('similarity index') ||
+        line.startsWith('rename from') ||
+        line.startsWith('rename to') ||
+        line.startsWith('new file mode') ||
+        line.startsWith('deleted file mode')
+      )
+        continue;
+      // If it's not a hunk or header, skip (or handle as 'other' if needed)
+      continue;
+    }
+    if (line.startsWith('+')) {
+      currentNewLine++; // Increment before pushing
+      result.push({
+        type: 'add',
+        newLine: currentNewLine,
+        content: line.substring(1),
+      });
+    } else if (line.startsWith('-')) {
+      currentOldLine++; // Increment before pushing
+      result.push({
+        type: 'del',
+        oldLine: currentOldLine,
+        content: line.substring(1),
+      });
+    } else if (line.startsWith(' ')) {
+      currentOldLine++; // Increment before pushing
+      currentNewLine++;
+      result.push({
+        type: 'context',
+        oldLine: currentOldLine,
+        newLine: currentNewLine,
+        content: line.substring(1),
+      });
+    } else if (line.startsWith('\\')) {
+      // Handle "\ No newline at end of file"
+      result.push({ type: 'other', content: line });
+    }
+  }
+  return result;
+}
+
+interface DiffRendererProps {
+  diffContent: string;
+  filename?: string;
+  tabWidth?: number;
+  availableTerminalHeight?: number;
+  terminalWidth: number;
+}
+
+const DEFAULT_TAB_WIDTH = 4; // Spaces per tab for normalization
+
+export const DiffRenderer: React.FC<DiffRendererProps> = ({
+  diffContent,
+  filename,
+  tabWidth = DEFAULT_TAB_WIDTH,
+  availableTerminalHeight,
+  terminalWidth,
+}) => {
+  if (!diffContent || typeof diffContent !== 'string') {
+    return <Text color={Colors.AccentYellow}>No diff content.</Text>;
+  }
+
+  const parsedLines = parseDiffWithLineNumbers(diffContent);
+
+  if (parsedLines.length === 0) {
+    return (
+      <Box borderStyle="round" borderColor={Colors.Gray} padding={1}>
+        <Text dimColor>No changes detected.</Text>
+      </Box>
+    );
+  }
+
+  // Check if the diff represents a new file (only additions and header lines)
+  const isNewFile = parsedLines.every(
+    (line) =>
+      line.type === 'add' ||
+      line.type === 'hunk' ||
+      line.type === 'other' ||
+      line.content.startsWith('diff --git') ||
+      line.content.startsWith('new file mode'),
+  );
+
+  let renderedOutput;
+
+  if (isNewFile) {
+    // Extract only the added lines' content
+    const addedContent = parsedLines
+      .filter((line) => line.type === 'add')
+      .map((line) => line.content)
+      .join('\n');
+    // Attempt to infer language from filename, default to plain text if no filename
+    const fileExtension = filename?.split('.').pop() || null;
+    const language = fileExtension
+      ? getLanguageFromExtension(fileExtension)
+      : null;
+    renderedOutput = colorizeCode(
+      addedContent,
+      language,
+      availableTerminalHeight,
+      terminalWidth,
+    );
+  } else {
+    renderedOutput = renderDiffContent(
+      parsedLines,
+      filename,
+      tabWidth,
+      availableTerminalHeight,
+      terminalWidth,
+    );
+  }
+
+  return renderedOutput;
+};
+
+const renderDiffContent = (
+  parsedLines: DiffLine[],
+  filename: string | undefined,
+  tabWidth = DEFAULT_TAB_WIDTH,
+  availableTerminalHeight: number | undefined,
+  terminalWidth: number,
+) => {
+  // 1. Normalize whitespace (replace tabs with spaces) *before* further processing
+  const normalizedLines = parsedLines.map((line) => ({
+    ...line,
+    content: line.content.replace(/\t/g, ' '.repeat(tabWidth)),
+  }));
+
+  // Filter out non-displayable lines (hunks, potentially 'other') using the normalized list
+  const displayableLines = normalizedLines.filter(
+    (l) => l.type !== 'hunk' && l.type !== 'other',
+  );
+
+  if (displayableLines.length === 0) {
+    return (
+      <Box borderStyle="round" borderColor={Colors.Gray} padding={1}>
+        <Text dimColor>No changes detected.</Text>
+      </Box>
+    );
+  }
+
+  // Calculate the minimum indentation across all displayable lines
+  let baseIndentation = Infinity; // Start high to find the minimum
+  for (const line of displayableLines) {
+    // Only consider lines with actual content for indentation calculation
+    if (line.content.trim() === '') continue;
+
+    const firstCharIndex = line.content.search(/\S/); // Find index of first non-whitespace char
+    const currentIndent = firstCharIndex === -1 ? 0 : firstCharIndex; // Indent is 0 if no non-whitespace found
+    baseIndentation = Math.min(baseIndentation, currentIndent);
+  }
+  // If baseIndentation remained Infinity (e.g., no displayable lines with content), default to 0
+  if (!isFinite(baseIndentation)) {
+    baseIndentation = 0;
+  }
+
+  const key = filename
+    ? `diff-box-${filename}`
+    : `diff-box-${crypto.createHash('sha1').update(JSON.stringify(parsedLines)).digest('hex')}`;
+
+  let lastLineNumber: number | null = null;
+  const MAX_CONTEXT_LINES_WITHOUT_GAP = 5;
+
+  return (
+    <MaxSizedBox
+      maxHeight={availableTerminalHeight}
+      maxWidth={terminalWidth}
+      key={key}
+    >
+      {displayableLines.reduce<React.ReactNode[]>((acc, line, index) => {
+        // Determine the relevant line number for gap calculation based on type
+        let relevantLineNumberForGapCalc: number | null = null;
+        if (line.type === 'add' || line.type === 'context') {
+          relevantLineNumberForGapCalc = line.newLine ?? null;
+        } else if (line.type === 'del') {
+          // For deletions, the gap is typically in relation to the original file's line numbering
+          relevantLineNumberForGapCalc = line.oldLine ?? null;
+        }
+
+        if (
+          lastLineNumber !== null &&
+          relevantLineNumberForGapCalc !== null &&
+          relevantLineNumberForGapCalc >
+            lastLineNumber + MAX_CONTEXT_LINES_WITHOUT_GAP + 1
+        ) {
+          acc.push(
+            <Box key={`gap-${index}`}>
+              <Text wrap="truncate">{'═'.repeat(terminalWidth)}</Text>
+            </Box>,
+          );
+        }
+
+        const lineKey = `diff-line-${index}`;
+        let gutterNumStr = '';
+        let color: string | undefined = undefined;
+        let prefixSymbol = ' ';
+        let dim = false;
+
+        switch (line.type) {
+          case 'add':
+            gutterNumStr = (line.newLine ?? '').toString();
+            color = 'green';
+            prefixSymbol = '+';
+            lastLineNumber = line.newLine ?? null;
+            break;
+          case 'del':
+            gutterNumStr = (line.oldLine ?? '').toString();
+            color = 'red';
+            prefixSymbol = '-';
+            // For deletions, update lastLineNumber based on oldLine if it's advancing.
+            // This helps manage gaps correctly if there are multiple consecutive deletions
+            // or if a deletion is followed by a context line far away in the original file.
+            if (line.oldLine !== undefined) {
+              lastLineNumber = line.oldLine;
+            }
+            break;
+          case 'context':
+            gutterNumStr = (line.newLine ?? '').toString();
+            dim = true;
+            prefixSymbol = ' ';
+            lastLineNumber = line.newLine ?? null;
+            break;
+          default:
+            return acc;
+        }
+
+        const displayContent = line.content.substring(baseIndentation);
+
+        acc.push(
+          <Box key={lineKey} flexDirection="row">
+            <Text color={Colors.Gray}>{gutterNumStr.padEnd(4)} </Text>
+            <Text color={color} dimColor={dim}>
+              {prefixSymbol}{' '}
+            </Text>
+            <Text color={color} dimColor={dim} wrap="wrap">
+              {displayContent}
+            </Text>
+          </Box>,
+        );
+        return acc;
+      }, [])}
+    </MaxSizedBox>
+  );
+};
+
+const getLanguageFromExtension = (extension: string): string | null => {
+  const languageMap: { [key: string]: string } = {
+    js: 'javascript',
+    ts: 'typescript',
+    py: 'python',
+    json: 'json',
+    css: 'css',
+    html: 'html',
+    sh: 'bash',
+    md: 'markdown',
+    yaml: 'yaml',
+    yml: 'yaml',
+    txt: 'plaintext',
+    java: 'java',
+    c: 'c',
+    cpp: 'cpp',
+    rb: 'ruby',
+  };
+  return languageMap[extension] || null; // Return null if extension not found
+};

packages/cli/src/ui/components/messages/ErrorMessage.tsx

@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { Text, Box } from 'ink';
+import { Colors } from '../../colors.js';
+
+interface ErrorMessageProps {
+  text: string;
+}
+
+export const ErrorMessage: React.FC<ErrorMessageProps> = ({ text }) => {
+  const prefix = '✕ ';
+  const prefixWidth = prefix.length;
+
+  return (
+    <Box flexDirection="row" marginBottom={1}>
+      <Box width={prefixWidth}>
+        <Text color={Colors.AccentRed}>{prefix}</Text>
+      </Box>
+      <Box flexGrow={1}>
+        <Text wrap="wrap" color={Colors.AccentRed}>
+          {text}
+        </Text>
+      </Box>
+    </Box>
+  );
+};

packages/cli/src/ui/components/messages/GeminiMessage.tsx

@@ -0,0 +1,43 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { Text, Box } from 'ink';
+import { MarkdownDisplay } from '../../utils/MarkdownDisplay.js';
+import { Colors } from '../../colors.js';
+
+interface GeminiMessageProps {
+  text: string;
+  isPending: boolean;
+  availableTerminalHeight?: number;
+  terminalWidth: number;
+}
+
+export const GeminiMessage: React.FC<GeminiMessageProps> = ({
+  text,
+  isPending,
+  availableTerminalHeight,
+  terminalWidth,
+}) => {
+  const prefix = '✦ ';
+  const prefixWidth = prefix.length;
+
+  return (
+    <Box flexDirection="row">
+      <Box width={prefixWidth}>
+        <Text color={Colors.AccentPurple}>{prefix}</Text>
+      </Box>
+      <Box flexGrow={1} flexDirection="column">
+        <MarkdownDisplay
+          text={text}
+          isPending={isPending}
+          availableTerminalHeight={availableTerminalHeight}
+          terminalWidth={terminalWidth}
+        />
+      </Box>
+    </Box>
+  );
+};

packages/cli/src/ui/components/messages/GeminiMessageContent.tsx

@@ -0,0 +1,43 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { Box } from 'ink';
+import { MarkdownDisplay } from '../../utils/MarkdownDisplay.js';
+
+interface GeminiMessageContentProps {
+  text: string;
+  isPending: boolean;
+  availableTerminalHeight?: number;
+  terminalWidth: number;
+}
+
+/*
+ * Gemini message content is a semi-hacked component. The intention is to represent a partial
+ * of GeminiMessage and is only used when a response gets too long. In that instance messages
+ * are split into multiple GeminiMessageContent's to enable the root <Static> component in
+ * App.tsx to be as performant as humanly possible.
+ */
+export const GeminiMessageContent: React.FC<GeminiMessageContentProps> = ({
+  text,
+  isPending,
+  availableTerminalHeight,
+  terminalWidth,
+}) => {
+  const originalPrefix = '✦ ';
+  const prefixWidth = originalPrefix.length;
+
+  return (
+    <Box flexDirection="column" paddingLeft={prefixWidth}>
+      <MarkdownDisplay
+        text={text}
+        isPending={isPending}
+        availableTerminalHeight={availableTerminalHeight}
+        terminalWidth={terminalWidth}
+      />
+    </Box>
+  );
+};

packages/cli/src/ui/components/messages/InfoMessage.tsx

@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { Text, Box } from 'ink';
+import { Colors } from '../../colors.js';
+
+interface InfoMessageProps {
+  text: string;
+}
+
+export const InfoMessage: React.FC<InfoMessageProps> = ({ text }) => {
+  const prefix = 'ℹ ';
+  const prefixWidth = prefix.length;
+
+  return (
+    <Box flexDirection="row" marginTop={1}>
+      <Box width={prefixWidth}>
+        <Text color={Colors.AccentYellow}>{prefix}</Text>
+      </Box>
+      <Box flexGrow={1}>
+        <Text wrap="wrap" color={Colors.AccentYellow}>
+          {text}
+        </Text>
+      </Box>
+    </Box>
+  );
+};

packages/cli/src/ui/components/messages/ToolConfirmationMessage.test.tsx

@@ -0,0 +1,58 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { render } from 'ink-testing-library';
+import { describe, it, expect, vi } from 'vitest';
+import { ToolConfirmationMessage } from './ToolConfirmationMessage.js';
+import { ToolCallConfirmationDetails } from '@qwen/qwen-code-core';
+
+describe('ToolConfirmationMessage', () => {
+  it('should not display urls if prompt and url are the same', () => {
+    const confirmationDetails: ToolCallConfirmationDetails = {
+      type: 'info',
+      title: 'Confirm Web Fetch',
+      prompt: 'https://example.com',
+      urls: ['https://example.com'],
+      onConfirm: vi.fn(),
+    };
+
+    const { lastFrame } = render(
+      <ToolConfirmationMessage
+        confirmationDetails={confirmationDetails}
+        availableTerminalHeight={30}
+        terminalWidth={80}
+      />,
+    );
+
+    expect(lastFrame()).not.toContain('URLs to fetch:');
+  });
+
+  it('should display urls if prompt and url are different', () => {
+    const confirmationDetails: ToolCallConfirmationDetails = {
+      type: 'info',
+      title: 'Confirm Web Fetch',
+      prompt:
+        'fetch https://github.com/google/gemini-react/blob/main/README.md',
+      urls: [
+        'https://raw.githubusercontent.com/google/gemini-react/main/README.md',
+      ],
+      onConfirm: vi.fn(),
+    };
+
+    const { lastFrame } = render(
+      <ToolConfirmationMessage
+        confirmationDetails={confirmationDetails}
+        availableTerminalHeight={30}
+        terminalWidth={80}
+      />,
+    );
+
+    expect(lastFrame()).toContain('URLs to fetch:');
+    expect(lastFrame()).toContain(
+      '- https://raw.githubusercontent.com/google/gemini-react/main/README.md',
+    );
+  });
+});

packages/cli/src/ui/components/messages/ToolConfirmationMessage.tsx

@@ -0,0 +1,250 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { Box, Text, useInput } from 'ink';
+import { DiffRenderer } from './DiffRenderer.js';
+import { Colors } from '../../colors.js';
+import {
+  ToolCallConfirmationDetails,
+  ToolConfirmationOutcome,
+  ToolExecuteConfirmationDetails,
+  ToolMcpConfirmationDetails,
+  Config,
+} from '@qwen/qwen-code-core';
+import {
+  RadioButtonSelect,
+  RadioSelectItem,
+} from '../shared/RadioButtonSelect.js';
+import { MaxSizedBox } from '../shared/MaxSizedBox.js';
+
+export interface ToolConfirmationMessageProps {
+  confirmationDetails: ToolCallConfirmationDetails;
+  config?: Config;
+  isFocused?: boolean;
+  availableTerminalHeight?: number;
+  terminalWidth: number;
+}
+
+export const ToolConfirmationMessage: React.FC<
+  ToolConfirmationMessageProps
+> = ({
+  confirmationDetails,
+  isFocused = true,
+  availableTerminalHeight,
+  terminalWidth,
+}) => {
+  const { onConfirm } = confirmationDetails;
+  const childWidth = terminalWidth - 2; // 2 for padding
+
+  useInput((_, key) => {
+    if (!isFocused) return;
+    if (key.escape) {
+      onConfirm(ToolConfirmationOutcome.Cancel);
+    }
+  });
+
+  const handleSelect = (item: ToolConfirmationOutcome) => onConfirm(item);
+
+  let bodyContent: React.ReactNode | null = null; // Removed contextDisplay here
+  let question: string;
+
+  const options: Array<RadioSelectItem<ToolConfirmationOutcome>> = new Array<
+    RadioSelectItem<ToolConfirmationOutcome>
+  >();
+
+  // Body content is now the DiffRenderer, passing filename to it
+  // The bordered box is removed from here and handled within DiffRenderer
+
+  function availableBodyContentHeight() {
+    if (options.length === 0) {
+      // This should not happen in practice as options are always added before this is called.
+      throw new Error('Options not provided for confirmation message');
+    }
+
+    if (availableTerminalHeight === undefined) {
+      return undefined;
+    }
+
+    // Calculate the vertical space (in lines) consumed by UI elements
+    // surrounding the main body content.
+    const PADDING_OUTER_Y = 2; // Main container has `padding={1}` (top & bottom).
+    const MARGIN_BODY_BOTTOM = 1; // margin on the body container.
+    const HEIGHT_QUESTION = 1; // The question text is one line.
+    const MARGIN_QUESTION_BOTTOM = 1; // Margin on the question container.
+    const HEIGHT_OPTIONS = options.length; // Each option in the radio select takes one line.
+
+    const surroundingElementsHeight =
+      PADDING_OUTER_Y +
+      MARGIN_BODY_BOTTOM +
+      HEIGHT_QUESTION +
+      MARGIN_QUESTION_BOTTOM +
+      HEIGHT_OPTIONS;
+    return Math.max(availableTerminalHeight - surroundingElementsHeight, 1);
+  }
+  if (confirmationDetails.type === 'edit') {
+    if (confirmationDetails.isModifying) {
+      return (
+        <Box
+          minWidth="90%"
+          borderStyle="round"
+          borderColor={Colors.Gray}
+          justifyContent="space-around"
+          padding={1}
+          overflow="hidden"
+        >
+          <Text>Modify in progress: </Text>
+          <Text color={Colors.AccentGreen}>
+            Save and close external editor to continue
+          </Text>
+        </Box>
+      );
+    }
+
+    question = `Apply this change?`;
+    options.push(
+      {
+        label: 'Yes, allow once',
+        value: ToolConfirmationOutcome.ProceedOnce,
+      },
+      {
+        label: 'Yes, allow always',
+        value: ToolConfirmationOutcome.ProceedAlways,
+      },
+      {
+        label: 'Modify with external editor',
+        value: ToolConfirmationOutcome.ModifyWithEditor,
+      },
+      { label: 'No (esc)', value: ToolConfirmationOutcome.Cancel },
+    );
+    bodyContent = (
+      <DiffRenderer
+        diffContent={confirmationDetails.fileDiff}
+        filename={confirmationDetails.fileName}
+        availableTerminalHeight={availableBodyContentHeight()}
+        terminalWidth={childWidth}
+      />
+    );
+  } else if (confirmationDetails.type === 'exec') {
+    const executionProps =
+      confirmationDetails as ToolExecuteConfirmationDetails;
+
+    question = `Allow execution?`;
+    options.push(
+      {
+        label: 'Yes, allow once',
+        value: ToolConfirmationOutcome.ProceedOnce,
+      },
+      {
+        label: `Yes, allow always "${executionProps.rootCommand} ..."`,
+        value: ToolConfirmationOutcome.ProceedAlways,
+      },
+      { label: 'No (esc)', value: ToolConfirmationOutcome.Cancel },
+    );
+
+    let bodyContentHeight = availableBodyContentHeight();
+    if (bodyContentHeight !== undefined) {
+      bodyContentHeight -= 2; // Account for padding;
+    }
+    bodyContent = (
+      <Box flexDirection="column">
+        <Box paddingX={1} marginLeft={1}>
+          <MaxSizedBox
+            maxHeight={bodyContentHeight}
+            maxWidth={Math.max(childWidth - 4, 1)}
+          >
+            <Box>
+              <Text color={Colors.AccentCyan}>{executionProps.command}</Text>
+            </Box>
+          </MaxSizedBox>
+        </Box>
+      </Box>
+    );
+  } else if (confirmationDetails.type === 'info') {
+    const infoProps = confirmationDetails;
+    const displayUrls =
+      infoProps.urls &&
+      !(infoProps.urls.length === 1 && infoProps.urls[0] === infoProps.prompt);
+
+    question = `Do you want to proceed?`;
+    options.push(
+      {
+        label: 'Yes, allow once',
+        value: ToolConfirmationOutcome.ProceedOnce,
+      },
+      {
+        label: 'Yes, allow always',
+        value: ToolConfirmationOutcome.ProceedAlways,
+      },
+      { label: 'No (esc)', value: ToolConfirmationOutcome.Cancel },
+    );
+
+    bodyContent = (
+      <Box flexDirection="column" paddingX={1} marginLeft={1}>
+        <Text color={Colors.AccentCyan}>{infoProps.prompt}</Text>
+        {displayUrls && infoProps.urls && infoProps.urls.length > 0 && (
+          <Box flexDirection="column" marginTop={1}>
+            <Text>URLs to fetch:</Text>
+            {infoProps.urls.map((url) => (
+              <Text key={url}> - {url}</Text>
+            ))}
+          </Box>
+        )}
+      </Box>
+    );
+  } else {
+    // mcp tool confirmation
+    const mcpProps = confirmationDetails as ToolMcpConfirmationDetails;
+
+    bodyContent = (
+      <Box flexDirection="column" paddingX={1} marginLeft={1}>
+        <Text color={Colors.AccentCyan}>MCP Server: {mcpProps.serverName}</Text>
+        <Text color={Colors.AccentCyan}>Tool: {mcpProps.toolName}</Text>
+      </Box>
+    );
+
+    question = `Allow execution of MCP tool "${mcpProps.toolName}" from server "${mcpProps.serverName}"?`;
+    options.push(
+      {
+        label: 'Yes, allow once',
+        value: ToolConfirmationOutcome.ProceedOnce,
+      },
+      {
+        label: `Yes, always allow tool "${mcpProps.toolName}" from server "${mcpProps.serverName}"`,
+        value: ToolConfirmationOutcome.ProceedAlwaysTool, // Cast until types are updated
+      },
+      {
+        label: `Yes, always allow all tools from server "${mcpProps.serverName}"`,
+        value: ToolConfirmationOutcome.ProceedAlwaysServer,
+      },
+      { label: 'No (esc)', value: ToolConfirmationOutcome.Cancel },
+    );
+  }
+
+  return (
+    <Box flexDirection="column" padding={1} width={childWidth}>
+      {/* Body Content (Diff Renderer or Command Info) */}
+      {/* No separate context display here anymore for edits */}
+      <Box flexGrow={1} flexShrink={1} overflow="hidden" marginBottom={1}>
+        {bodyContent}
+      </Box>
+
+      {/* Confirmation Question */}
+      <Box marginBottom={1} flexShrink={0}>
+        <Text wrap="truncate">{question}</Text>
+      </Box>
+
+      {/* Select Input for Options */}
+      <Box flexShrink={0}>
+        <RadioButtonSelect
+          items={options}
+          onSelect={handleSelect}
+          isFocused={isFocused}
+        />
+      </Box>
+    </Box>
+  );
+};

packages/cli/src/ui/components/messages/ToolGroupMessage.tsx

@@ -0,0 +1,123 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useMemo } from 'react';
+import { Box } from 'ink';
+import { IndividualToolCallDisplay, ToolCallStatus } from '../../types.js';
+import { ToolMessage } from './ToolMessage.js';
+import { ToolConfirmationMessage } from './ToolConfirmationMessage.js';
+import { Colors } from '../../colors.js';
+import { Config } from '@qwen/qwen-code-core';
+
+interface ToolGroupMessageProps {
+  groupId: number;
+  toolCalls: IndividualToolCallDisplay[];
+  availableTerminalHeight?: number;
+  terminalWidth: number;
+  config?: Config;
+  isFocused?: boolean;
+}
+
+// Main component renders the border and maps the tools using ToolMessage
+export const ToolGroupMessage: React.FC<ToolGroupMessageProps> = ({
+  toolCalls,
+  availableTerminalHeight,
+  terminalWidth,
+  config,
+  isFocused = true,
+}) => {
+  const hasPending = !toolCalls.every(
+    (t) => t.status === ToolCallStatus.Success,
+  );
+  const borderColor = hasPending ? Colors.AccentYellow : Colors.Gray;
+
+  const staticHeight = /* border */ 2 + /* marginBottom */ 1;
+  // This is a bit of a magic number, but it accounts for the border and
+  // marginLeft.
+  const innerWidth = 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
+  const toolAwaitingApproval = useMemo(
+    () => toolCalls.find((tc) => tc.status === ToolCallStatus.Confirming),
+    [toolCalls],
+  );
+
+  let countToolCallsWithResults = 0;
+  for (const tool of toolCalls) {
+    if (tool.resultDisplay !== undefined && tool.resultDisplay !== '') {
+      countToolCallsWithResults++;
+    }
+  }
+  const countOneLineToolCalls = toolCalls.length - countToolCallsWithResults;
+  const availableTerminalHeightPerToolMessage = availableTerminalHeight
+    ? Math.max(
+        Math.floor(
+          (availableTerminalHeight - staticHeight - countOneLineToolCalls) /
+            Math.max(1, countToolCallsWithResults),
+        ),
+        1,
+      )
+    : undefined;
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="round"
+      /*
+        This width constraint is highly important and protects us from an Ink rendering bug.
+        Since the ToolGroup can typically change rendering states frequently, it can cause
+        Ink to render the border of the box incorrectly and span multiple lines and even
+        cause tearing.
+      */
+      width="100%"
+      marginLeft={1}
+      borderDimColor={hasPending}
+      borderColor={borderColor}
+    >
+      {toolCalls.map((tool) => {
+        const isConfirming = toolAwaitingApproval?.callId === tool.callId;
+        return (
+          <Box key={tool.callId} flexDirection="column" minHeight={1}>
+            <Box flexDirection="row" alignItems="center">
+              <ToolMessage
+                callId={tool.callId}
+                name={tool.name}
+                description={tool.description}
+                resultDisplay={tool.resultDisplay}
+                status={tool.status}
+                confirmationDetails={tool.confirmationDetails}
+                availableTerminalHeight={availableTerminalHeightPerToolMessage}
+                terminalWidth={innerWidth}
+                emphasis={
+                  isConfirming
+                    ? 'high'
+                    : toolAwaitingApproval
+                      ? 'low'
+                      : 'medium'
+                }
+                renderOutputAsMarkdown={tool.renderOutputAsMarkdown}
+              />
+            </Box>
+            {tool.status === ToolCallStatus.Confirming &&
+              isConfirming &&
+              tool.confirmationDetails && (
+                <ToolConfirmationMessage
+                  confirmationDetails={tool.confirmationDetails}
+                  config={config}
+                  isFocused={isFocused}
+                  availableTerminalHeight={
+                    availableTerminalHeightPerToolMessage
+                  }
+                  terminalWidth={innerWidth}
+                />
+              )}
+          </Box>
+        );
+      })}
+    </Box>
+  );
+};

packages/cli/src/ui/components/messages/ToolMessage.test.tsx

@@ -0,0 +1,181 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { render } from 'ink-testing-library';
+import { ToolMessage, ToolMessageProps } from './ToolMessage.js';
+import { StreamingState, ToolCallStatus } from '../../types.js';
+import { Text } from 'ink';
+import { StreamingContext } from '../../contexts/StreamingContext.js';
+
+// Mock child components or utilities if they are complex or have side effects
+vi.mock('../GeminiRespondingSpinner.js', () => ({
+  GeminiRespondingSpinner: ({
+    nonRespondingDisplay,
+  }: {
+    nonRespondingDisplay?: string;
+  }) => {
+    const streamingState = React.useContext(StreamingContext)!;
+    if (streamingState === StreamingState.Responding) {
+      return <Text>MockRespondingSpinner</Text>;
+    }
+    return nonRespondingDisplay ? <Text>{nonRespondingDisplay}</Text> : null;
+  },
+}));
+vi.mock('./DiffRenderer.js', () => ({
+  DiffRenderer: function MockDiffRenderer({
+    diffContent,
+  }: {
+    diffContent: string;
+  }) {
+    return <Text>MockDiff:{diffContent}</Text>;
+  },
+}));
+vi.mock('../../utils/MarkdownDisplay.js', () => ({
+  MarkdownDisplay: function MockMarkdownDisplay({ text }: { text: string }) {
+    return <Text>MockMarkdown:{text}</Text>;
+  },
+}));
+
+// Helper to render with context
+const renderWithContext = (
+  ui: React.ReactElement,
+  streamingState: StreamingState,
+) => {
+  const contextValue: StreamingState = streamingState;
+  return render(
+    <StreamingContext.Provider value={contextValue}>
+      {ui}
+    </StreamingContext.Provider>,
+  );
+};
+
+describe('<ToolMessage />', () => {
+  const baseProps: ToolMessageProps = {
+    callId: 'tool-123',
+    name: 'test-tool',
+    description: 'A tool for testing',
+    resultDisplay: 'Test result',
+    status: ToolCallStatus.Success,
+    terminalWidth: 80,
+    confirmationDetails: undefined,
+    emphasis: 'medium',
+  };
+
+  it('renders basic tool information', () => {
+    const { lastFrame } = renderWithContext(
+      <ToolMessage {...baseProps} />,
+      StreamingState.Idle,
+    );
+    const output = lastFrame();
+    expect(output).toContain('✔'); // Success indicator
+    expect(output).toContain('test-tool');
+    expect(output).toContain('A tool for testing');
+    expect(output).toContain('MockMarkdown:Test result');
+  });
+
+  describe('ToolStatusIndicator rendering', () => {
+    it('shows ✔ for Success status', () => {
+      const { lastFrame } = renderWithContext(
+        <ToolMessage {...baseProps} status={ToolCallStatus.Success} />,
+        StreamingState.Idle,
+      );
+      expect(lastFrame()).toContain('✔');
+    });
+
+    it('shows o for Pending status', () => {
+      const { lastFrame } = renderWithContext(
+        <ToolMessage {...baseProps} status={ToolCallStatus.Pending} />,
+        StreamingState.Idle,
+      );
+      expect(lastFrame()).toContain('o');
+    });
+
+    it('shows ? for Confirming status', () => {
+      const { lastFrame } = renderWithContext(
+        <ToolMessage {...baseProps} status={ToolCallStatus.Confirming} />,
+        StreamingState.Idle,
+      );
+      expect(lastFrame()).toContain('?');
+    });
+
+    it('shows - for Canceled status', () => {
+      const { lastFrame } = renderWithContext(
+        <ToolMessage {...baseProps} status={ToolCallStatus.Canceled} />,
+        StreamingState.Idle,
+      );
+      expect(lastFrame()).toContain('-');
+    });
+
+    it('shows x for Error status', () => {
+      const { lastFrame } = renderWithContext(
+        <ToolMessage {...baseProps} status={ToolCallStatus.Error} />,
+        StreamingState.Idle,
+      );
+      expect(lastFrame()).toContain('x');
+    });
+
+    it('shows paused spinner for Executing status when streamingState is Idle', () => {
+      const { lastFrame } = renderWithContext(
+        <ToolMessage {...baseProps} status={ToolCallStatus.Executing} />,
+        StreamingState.Idle,
+      );
+      expect(lastFrame()).toContain('⊷');
+      expect(lastFrame()).not.toContain('MockRespondingSpinner');
+      expect(lastFrame()).not.toContain('✔');
+    });
+
+    it('shows paused spinner for Executing status when streamingState is WaitingForConfirmation', () => {
+      const { lastFrame } = renderWithContext(
+        <ToolMessage {...baseProps} status={ToolCallStatus.Executing} />,
+        StreamingState.WaitingForConfirmation,
+      );
+      expect(lastFrame()).toContain('⊷');
+      expect(lastFrame()).not.toContain('MockRespondingSpinner');
+      expect(lastFrame()).not.toContain('✔');
+    });
+
+    it('shows MockRespondingSpinner for Executing status when streamingState is Responding', () => {
+      const { lastFrame } = renderWithContext(
+        <ToolMessage {...baseProps} status={ToolCallStatus.Executing} />,
+        StreamingState.Responding, // Simulate app still responding
+      );
+      expect(lastFrame()).toContain('MockRespondingSpinner');
+      expect(lastFrame()).not.toContain('✔');
+    });
+  });
+
+  it('renders DiffRenderer for diff results', () => {
+    const diffResult = {
+      fileDiff: '--- a/file.txt\n+++ b/file.txt\n@@ -1 +1 @@\n-old\n+new',
+      fileName: 'file.txt',
+    };
+    const { lastFrame } = renderWithContext(
+      <ToolMessage {...baseProps} resultDisplay={diffResult} />,
+      StreamingState.Idle,
+    );
+    // Check that the output contains the MockDiff content as part of the whole message
+    expect(lastFrame()).toMatch(/MockDiff:--- a\/file\.txt/);
+  });
+
+  it('renders emphasis correctly', () => {
+    const { lastFrame: highEmphasisFrame } = renderWithContext(
+      <ToolMessage {...baseProps} emphasis="high" />,
+      StreamingState.Idle,
+    );
+    // Check for trailing indicator or specific color if applicable (Colors are not easily testable here)
+    expect(highEmphasisFrame()).toContain('←'); // Trailing indicator for high emphasis
+
+    const { lastFrame: lowEmphasisFrame } = renderWithContext(
+      <ToolMessage {...baseProps} emphasis="low" />,
+      StreamingState.Idle,
+    );
+    // For low emphasis, the name and description might be dimmed (check for dimColor if possible)
+    // This is harder to assert directly in text output without color checks.
+    // We can at least ensure it doesn't have the high emphasis indicator.
+    expect(lowEmphasisFrame()).not.toContain('←');
+  });
+});

packages/cli/src/ui/components/messages/ToolMessage.tsx

@@ -0,0 +1,194 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { Box, Text } from 'ink';
+import { IndividualToolCallDisplay, ToolCallStatus } from '../../types.js';
+import { DiffRenderer } from './DiffRenderer.js';
+import { Colors } from '../../colors.js';
+import { MarkdownDisplay } from '../../utils/MarkdownDisplay.js';
+import { GeminiRespondingSpinner } from '../GeminiRespondingSpinner.js';
+import { MaxSizedBox } from '../shared/MaxSizedBox.js';
+
+const STATIC_HEIGHT = 1;
+const RESERVED_LINE_COUNT = 5; // for tool name, status, padding etc.
+const STATUS_INDICATOR_WIDTH = 3;
+const MIN_LINES_SHOWN = 2; // show at least this many lines
+
+// Large threshold to ensure we don't cause performance issues for very large
+// outputs that will get truncated further MaxSizedBox anyway.
+const MAXIMUM_RESULT_DISPLAY_CHARACTERS = 1000000;
+export type TextEmphasis = 'high' | 'medium' | 'low';
+
+export interface ToolMessageProps extends IndividualToolCallDisplay {
+  availableTerminalHeight?: number;
+  terminalWidth: number;
+  emphasis?: TextEmphasis;
+  renderOutputAsMarkdown?: boolean;
+}
+
+export const ToolMessage: React.FC<ToolMessageProps> = ({
+  name,
+  description,
+  resultDisplay,
+  status,
+  availableTerminalHeight,
+  terminalWidth,
+  emphasis = 'medium',
+  renderOutputAsMarkdown = true,
+}) => {
+  const availableHeight = availableTerminalHeight
+    ? Math.max(
+        availableTerminalHeight - STATIC_HEIGHT - RESERVED_LINE_COUNT,
+        MIN_LINES_SHOWN + 1, // enforce minimum lines shown
+      )
+    : undefined;
+
+  // Long tool call response in MarkdownDisplay doesn't respect availableTerminalHeight properly,
+  // we're forcing it to not render as markdown when the response is too long, it will fallback
+  // to render as plain text, which is contained within the terminal using MaxSizedBox
+  if (availableHeight) {
+    renderOutputAsMarkdown = false;
+  }
+
+  const childWidth = terminalWidth - 3; // account for padding.
+  if (typeof resultDisplay === 'string') {
+    if (resultDisplay.length > MAXIMUM_RESULT_DISPLAY_CHARACTERS) {
+      // Truncate the result display to fit within the available width.
+      resultDisplay =
+        '...' + resultDisplay.slice(-MAXIMUM_RESULT_DISPLAY_CHARACTERS);
+    }
+  }
+  return (
+    <Box paddingX={1} paddingY={0} flexDirection="column">
+      <Box minHeight={1}>
+        <ToolStatusIndicator status={status} />
+        <ToolInfo
+          name={name}
+          status={status}
+          description={description}
+          emphasis={emphasis}
+        />
+        {emphasis === 'high' && <TrailingIndicator />}
+      </Box>
+      {resultDisplay && (
+        <Box paddingLeft={STATUS_INDICATOR_WIDTH} width="100%" marginTop={1}>
+          <Box flexDirection="column">
+            {typeof resultDisplay === 'string' && renderOutputAsMarkdown && (
+              <Box flexDirection="column">
+                <MarkdownDisplay
+                  text={resultDisplay}
+                  isPending={false}
+                  availableTerminalHeight={availableHeight}
+                  terminalWidth={childWidth}
+                />
+              </Box>
+            )}
+            {typeof resultDisplay === 'string' && !renderOutputAsMarkdown && (
+              <MaxSizedBox maxHeight={availableHeight} maxWidth={childWidth}>
+                <Box>
+                  <Text wrap="wrap">{resultDisplay}</Text>
+                </Box>
+              </MaxSizedBox>
+            )}
+            {typeof resultDisplay !== 'string' && (
+              <DiffRenderer
+                diffContent={resultDisplay.fileDiff}
+                filename={resultDisplay.fileName}
+                availableTerminalHeight={availableHeight}
+                terminalWidth={childWidth}
+              />
+            )}
+          </Box>
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+type ToolStatusIndicatorProps = {
+  status: ToolCallStatus;
+};
+
+const ToolStatusIndicator: React.FC<ToolStatusIndicatorProps> = ({
+  status,
+}) => (
+  <Box minWidth={STATUS_INDICATOR_WIDTH}>
+    {status === ToolCallStatus.Pending && (
+      <Text color={Colors.AccentGreen}>o</Text>
+    )}
+    {status === ToolCallStatus.Executing && (
+      <GeminiRespondingSpinner
+        spinnerType="toggle"
+        nonRespondingDisplay={'⊷'}
+      />
+    )}
+    {status === ToolCallStatus.Success && (
+      <Text color={Colors.AccentGreen}>✔</Text>
+    )}
+    {status === ToolCallStatus.Confirming && (
+      <Text color={Colors.AccentYellow}>?</Text>
+    )}
+    {status === ToolCallStatus.Canceled && (
+      <Text color={Colors.AccentYellow} bold>
+        -
+      </Text>
+    )}
+    {status === ToolCallStatus.Error && (
+      <Text color={Colors.AccentRed} bold>
+        x
+      </Text>
+    )}
+  </Box>
+);
+
+type ToolInfo = {
+  name: string;
+  description: string;
+  status: ToolCallStatus;
+  emphasis: TextEmphasis;
+};
+const ToolInfo: React.FC<ToolInfo> = ({
+  name,
+  description,
+  status,
+  emphasis,
+}) => {
+  const nameColor = React.useMemo<string>(() => {
+    switch (emphasis) {
+      case 'high':
+        return Colors.Foreground;
+      case 'medium':
+        return Colors.Foreground;
+      case 'low':
+        return Colors.Gray;
+      default: {
+        const exhaustiveCheck: never = emphasis;
+        return exhaustiveCheck;
+      }
+    }
+  }, [emphasis]);
+  return (
+    <Box>
+      <Text
+        wrap="truncate-end"
+        strikethrough={status === ToolCallStatus.Canceled}
+      >
+        <Text color={nameColor} bold>
+          {name}
+        </Text>{' '}
+        <Text color={Colors.Gray}>{description}</Text>
+      </Text>
+    </Box>
+  );
+};
+
+const TrailingIndicator: React.FC = () => (
+  <Text color={Colors.Foreground} wrap="truncate">
+    {' '}
+    ←
+  </Text>
+);

packages/cli/src/ui/components/messages/UserMessage.tsx

@@ -0,0 +1,39 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { Text, Box } from 'ink';
+import { Colors } from '../../colors.js';
+
+interface UserMessageProps {
+  text: string;
+}
+
+export const UserMessage: React.FC<UserMessageProps> = ({ text }) => {
+  const prefix = '> ';
+  const prefixWidth = prefix.length;
+
+  return (
+    <Box
+      borderStyle="round"
+      borderColor={Colors.Gray}
+      flexDirection="row"
+      paddingX={2}
+      paddingY={0}
+      marginY={1}
+      alignSelf="flex-start"
+    >
+      <Box width={prefixWidth}>
+        <Text color={Colors.Gray}>{prefix}</Text>
+      </Box>
+      <Box flexGrow={1}>
+        <Text wrap="wrap" color={Colors.Gray}>
+          {text}
+        </Text>
+      </Box>
+    </Box>
+  );
+};

packages/cli/src/ui/components/messages/UserShellMessage.tsx

@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { Box, Text } from 'ink';
+import { Colors } from '../../colors.js';
+
+interface UserShellMessageProps {
+  text: string;
+}
+
+export const UserShellMessage: React.FC<UserShellMessageProps> = ({ text }) => {
+  // Remove leading '!' if present, as App.tsx adds it for the processor.
+  const commandToDisplay = text.startsWith('!') ? text.substring(1) : text;
+
+  return (
+    <Box>
+      <Text color={Colors.AccentCyan}>$ </Text>
+      <Text>{commandToDisplay}</Text>
+    </Box>
+  );
+};