DeepSeek V3.2 Thinking Mode Integration (#1134)

packages/cli/src/ui/components/HistoryItemDisplay.tsx

@@ -15,6 +15,8 @@ import { InfoMessage } from './messages/InfoMessage.js';
 import { ErrorMessage } from './messages/ErrorMessage.js';
 import { ToolGroupMessage } from './messages/ToolGroupMessage.js';
 import { GeminiMessageContent } from './messages/GeminiMessageContent.js';
+import { GeminiThoughtMessage } from './messages/GeminiThoughtMessage.js';
+import { GeminiThoughtMessageContent } from './messages/GeminiThoughtMessageContent.js';
 import { CompressionMessage } from './messages/CompressionMessage.js';
 import { SummaryMessage } from './messages/SummaryMessage.js';
 import { WarningMessage } from './messages/WarningMessage.js';
@@ -85,6 +87,26 @@ const HistoryItemDisplayComponent: React.FC<HistoryItemDisplayProps> = ({
           terminalWidth={terminalWidth}
         />
       )}
+      {itemForDisplay.type === 'gemini_thought' && (
+        <GeminiThoughtMessage
+          text={itemForDisplay.text}
+          isPending={isPending}
+          availableTerminalHeight={
+            availableTerminalHeightGemini ?? availableTerminalHeight
+          }
+          terminalWidth={terminalWidth}
+        />
+      )}
+      {itemForDisplay.type === 'gemini_thought_content' && (
+        <GeminiThoughtMessageContent
+          text={itemForDisplay.text}
+          isPending={isPending}
+          availableTerminalHeight={
+            availableTerminalHeightGemini ?? availableTerminalHeight
+          }
+          terminalWidth={terminalWidth}
+        />
+      )}
       {itemForDisplay.type === 'info' && (
         <InfoMessage text={itemForDisplay.text} />
       )}

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

@@ -0,0 +1,48 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type React from 'react';
+import { Text, Box } from 'ink';
+import { MarkdownDisplay } from '../../utils/MarkdownDisplay.js';
+import { theme } from '../../semantic-colors.js';
+
+interface GeminiThoughtMessageProps {
+  text: string;
+  isPending: boolean;
+  availableTerminalHeight?: number;
+  terminalWidth: number;
+}
+
+/**
+ * Displays model thinking/reasoning text with a softer, dimmed style
+ * to visually distinguish it from regular content output.
+ */
+export const GeminiThoughtMessage: React.FC<GeminiThoughtMessageProps> = ({
+  text,
+  isPending,
+  availableTerminalHeight,
+  terminalWidth,
+}) => {
+  const prefix = '✦ ';
+  const prefixWidth = prefix.length;
+
+  return (
+    <Box flexDirection="row" marginBottom={1}>
+      <Box width={prefixWidth}>
+        <Text color={theme.text.secondary}>{prefix}</Text>
+      </Box>
+      <Box flexGrow={1} flexDirection="column">
+        <MarkdownDisplay
+          text={text}
+          isPending={isPending}
+          availableTerminalHeight={availableTerminalHeight}
+          terminalWidth={terminalWidth}
+          textColor={theme.text.secondary}
+        />
+      </Box>
+    </Box>
+  );
+};

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

@@ -0,0 +1,40 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type React from 'react';
+import { Box } from 'ink';
+import { MarkdownDisplay } from '../../utils/MarkdownDisplay.js';
+import { theme } from '../../semantic-colors.js';
+
+interface GeminiThoughtMessageContentProps {
+  text: string;
+  isPending: boolean;
+  availableTerminalHeight?: number;
+  terminalWidth: number;
+}
+
+/**
+ * Continuation component for thought messages, similar to GeminiMessageContent.
+ * Used when a thought response gets too long and needs to be split for performance.
+ */
+export const GeminiThoughtMessageContent: React.FC<
+  GeminiThoughtMessageContentProps
+> = ({ text, isPending, availableTerminalHeight, terminalWidth }) => {
+  const originalPrefix = '✦ ';
+  const prefixWidth = originalPrefix.length;
+
+  return (
+    <Box flexDirection="column" paddingLeft={prefixWidth} marginBottom={1}>
+      <MarkdownDisplay
+        text={text}
+        isPending={isPending}
+        availableTerminalHeight={availableTerminalHeight}
+        terminalWidth={terminalWidth}
+        textColor={theme.text.secondary}
+      />
+    </Box>
+  );
+};