feat: Add markdown toggle (alt+m) to switch between rendered and raw… (#10383)

Co-authored-by: Jacob Richman <jacob314@gmail.com>

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

@@ -0,0 +1,49 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { GeminiMessage } from './GeminiMessage.js';
+import { StreamingState } from '../../types.js';
+import { renderWithProviders } from '../../../test-utils/render.js';
+
+describe('<GeminiMessage /> - Raw Markdown Display Snapshots', () => {
+  const baseProps = {
+    text: 'Test **bold** and `code` markdown\n\n```javascript\nconst x = 1;\n```',
+    isPending: false,
+    terminalWidth: 80,
+  };
+
+  it.each([
+    { renderMarkdown: true, description: '(default)' },
+    {
+      renderMarkdown: false,
+      description: '(raw markdown with syntax highlighting, no line numbers)',
+    },
+  ])(
+    'renders with renderMarkdown=$renderMarkdown $description',
+    ({ renderMarkdown }) => {
+      const { lastFrame } = renderWithProviders(
+        <GeminiMessage {...baseProps} />,
+        {
+          uiState: { renderMarkdown, streamingState: StreamingState.Idle },
+        },
+      );
+      expect(lastFrame()).toMatchSnapshot();
+    },
+  );
+
+  it.each([{ renderMarkdown: true }, { renderMarkdown: false }])(
+    'renders pending state with renderMarkdown=$renderMarkdown',
+    ({ renderMarkdown }) => {
+      const { lastFrame } = renderWithProviders(
+        <GeminiMessage {...baseProps} isPending={true} />,
+        {
+          uiState: { renderMarkdown, streamingState: StreamingState.Idle },
+        },
+      );
+      expect(lastFrame()).toMatchSnapshot();
+    },
+  );
+});

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

@@ -9,6 +9,7 @@ import { Text, Box } from 'ink';
 import { MarkdownDisplay } from '../../utils/MarkdownDisplay.js';
 import { theme } from '../../semantic-colors.js';
 import { SCREEN_READER_MODEL_PREFIX } from '../../textConstants.js';
+import { useUIState } from '../../contexts/UIStateContext.js';
 
 interface GeminiMessageProps {
   text: string;
@@ -23,6 +24,7 @@ export const GeminiMessage: React.FC<GeminiMessageProps> = ({
   availableTerminalHeight,
   terminalWidth,
 }) => {
+  const { renderMarkdown } = useUIState();
   const prefix = '✦ ';
   const prefixWidth = prefix.length;
 
@@ -39,6 +41,7 @@ export const GeminiMessage: React.FC<GeminiMessageProps> = ({
           isPending={isPending}
           availableTerminalHeight={availableTerminalHeight}
           terminalWidth={terminalWidth}
+          renderMarkdown={renderMarkdown}
         />
       </Box>
     </Box>

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

@@ -7,6 +7,7 @@
 import type React from 'react';
 import { Box } from 'ink';
 import { MarkdownDisplay } from '../../utils/MarkdownDisplay.js';
+import { useUIState } from '../../contexts/UIStateContext.js';
 
 interface GeminiMessageContentProps {
   text: string;
@@ -27,6 +28,7 @@ export const GeminiMessageContent: React.FC<GeminiMessageContentProps> = ({
   availableTerminalHeight,
   terminalWidth,
 }) => {
+  const { renderMarkdown } = useUIState();
   const originalPrefix = '✦ ';
   const prefixWidth = originalPrefix.length;
 
@@ -37,6 +39,7 @@ export const GeminiMessageContent: React.FC<GeminiMessageContentProps> = ({
         isPending={isPending}
         availableTerminalHeight={availableTerminalHeight}
         terminalWidth={terminalWidth}
+        renderMarkdown={renderMarkdown}
       />
     </Box>
   );

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

@@ -5,13 +5,13 @@
  */
 
 import React from 'react';
-import { render } from 'ink-testing-library';
 import type { ToolMessageProps } from './ToolMessage.js';
 import { ToolMessage } from './ToolMessage.js';
 import { StreamingState, ToolCallStatus } from '../../types.js';
 import { Text } from 'ink';
 import { StreamingContext } from '../../contexts/StreamingContext.js';
 import type { AnsiOutput } from '@google/gemini-cli-core';
+import { renderWithProviders } from '../../../test-utils/render.js';
 
 vi.mock('../TerminalOutput.js', () => ({
   TerminalOutput: function MockTerminalOutput({
@@ -72,7 +72,7 @@ const renderWithContext = (
   streamingState: StreamingState,
 ) => {
   const contextValue: StreamingState = streamingState;
-  return render(
+  return renderWithProviders(
     <StreamingContext.Provider value={contextValue}>
       {ui}
     </StreamingContext.Provider>,

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

@@ -21,6 +21,7 @@ import {
 } from '../../constants.js';
 import { theme } from '../../semantic-colors.js';
 import type { AnsiOutput, Config } from '@google/gemini-cli-core';
+import { useUIState } from '../../contexts/UIStateContext.js';
 
 const STATIC_HEIGHT = 1;
 const RESERVED_LINE_COUNT = 5; // for tool name, status, padding etc.
@@ -56,6 +57,7 @@ export const ToolMessage: React.FC<ToolMessageProps> = ({
   ptyId,
   config,
 }) => {
+  const { renderMarkdown } = useUIState();
   const isThisShellFocused =
     (name === SHELL_COMMAND_NAME || name === 'Shell') &&
     status === ToolCallStatus.Executing &&
@@ -149,6 +151,7 @@ export const ToolMessage: React.FC<ToolMessageProps> = ({
                   isPending={false}
                   availableTerminalHeight={availableHeight}
                   terminalWidth={childWidth}
+                  renderMarkdown={renderMarkdown}
                 />
               </Box>
             ) : typeof resultDisplay === 'string' && !renderOutputAsMarkdown ? (

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

@@ -0,0 +1,45 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type { ToolMessageProps } from './ToolMessage.js';
+import { ToolMessage } from './ToolMessage.js';
+import { StreamingState, ToolCallStatus } from '../../types.js';
+import { StreamingContext } from '../../contexts/StreamingContext.js';
+import { renderWithProviders } from '../../../test-utils/render.js';
+
+describe('<ToolMessage /> - Raw Markdown Display Snapshots', () => {
+  const baseProps: ToolMessageProps = {
+    callId: 'tool-123',
+    name: 'test-tool',
+    description: 'A tool for testing',
+    resultDisplay: 'Test **bold** and `code` markdown',
+    status: ToolCallStatus.Success,
+    terminalWidth: 80,
+    confirmationDetails: undefined,
+    emphasis: 'medium',
+  };
+
+  it.each([
+    { renderMarkdown: true, description: '(default)' },
+    {
+      renderMarkdown: false,
+      description: '(raw markdown with syntax highlighting, no line numbers)',
+    },
+  ])(
+    'renders with renderMarkdown=$renderMarkdown $description',
+    ({ renderMarkdown }) => {
+      const { lastFrame } = renderWithProviders(
+        <StreamingContext.Provider value={StreamingState.Idle}>
+          <ToolMessage {...baseProps} />
+        </StreamingContext.Provider>,
+        {
+          uiState: { renderMarkdown, streamingState: StreamingState.Idle },
+        },
+      );
+      expect(lastFrame()).toMatchSnapshot();
+    },
+  );
+});

packages/cli/src/ui/components/messages/__snapshots__/GeminiMessage.test.tsx.snap

@@ -0,0 +1,29 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`<GeminiMessage /> - Raw Markdown Display Snapshots > renders pending state with renderMarkdown=false 1`] = `
+"✦  Test **bold** and \`code\` markdown
+
+   \`\`\`javascript
+   const x = 1;
+   \`\`\`"
+`;
+
+exports[`<GeminiMessage /> - Raw Markdown Display Snapshots > renders pending state with renderMarkdown=true 1`] = `
+"✦ Test bold and code markdown
+
+   1 const x = 1;"
+`;
+
+exports[`<GeminiMessage /> - Raw Markdown Display Snapshots > renders with renderMarkdown=false '(raw markdown with syntax highlightin…' 1`] = `
+"✦  Test **bold** and \`code\` markdown
+
+   \`\`\`javascript
+   const x = 1;
+   \`\`\`"
+`;
+
+exports[`<GeminiMessage /> - Raw Markdown Display Snapshots > renders with renderMarkdown=true '(default)' 1`] = `
+"✦ Test bold and code markdown
+
+   1 const x = 1;"
+`;

packages/cli/src/ui/components/messages/__snapshots__/ToolMessageRawMarkdown.test.tsx.snap

@@ -0,0 +1,13 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`<ToolMessage /> - Raw Markdown Display Snapshots > renders with renderMarkdown=false '(raw markdown with syntax highlightin…' 1`] = `
+" ✓  test-tool A tool for testing
+
+     Test **bold** and \`code\` markdown"
+`;
+
+exports[`<ToolMessage /> - Raw Markdown Display Snapshots > renders with renderMarkdown=true '(default)' 1`] = `
+" ✓  test-tool A tool for testing
+
+    Test bold and code markdown"
+`;