Code review cleanup for thinking display

packages/cli/src/test-utils/render.tsx

@@ -44,7 +44,6 @@ vi.mock('../ui/utils/terminalUtils.js', () => ({
   isLowColorDepth: vi.fn(() => false),
   getColorDepth: vi.fn(() => 24),
   isITerm2: vi.fn(() => false),
-  shouldUseEmoji: vi.fn(() => true),
 }));
 
 // Wrapper around ink-testing-library's render that ensures act() is called

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

@@ -6,7 +6,6 @@
 
 import { Box, Text } from 'ink';
 import { useUIState } from '../contexts/UIStateContext.js';
-import { useSettings } from '../contexts/SettingsContext.js';
 import { AppHeader } from './AppHeader.js';
 import { HistoryItemDisplay } from './HistoryItemDisplay.js';
 import { QuittingDisplay } from './QuittingDisplay.js';
@@ -16,18 +15,15 @@ import { useConfirmingTool } from '../hooks/useConfirmingTool.js';
 import { useConfig } from '../contexts/ConfigContext.js';
 import { ToolStatusIndicator, ToolInfo } from './messages/ToolShared.js';
 import { theme } from '../semantic-colors.js';
-import { getInlineThinkingMode } from '../utils/inlineThinkingMode.js';
 
 export const AlternateBufferQuittingDisplay = () => {
   const { version } = useAppContext();
   const uiState = useUIState();
-  const settings = useSettings();
   const config = useConfig();
 
   const confirmingTool = useConfirmingTool();
   const showPromptedTool =
     config.isEventDrivenSchedulerEnabled() && confirmingTool !== null;
-  const inlineThinkingMode = getInlineThinkingMode(settings);
 
   // We render the entire chat history and header here to ensure that the
   // conversation history is visible to the user after the app quits and the
@@ -51,7 +47,6 @@ export const AlternateBufferQuittingDisplay = () => {
           item={h}
           isPending={false}
           commands={uiState.slashCommands}
-          inlineThinkingMode={inlineThinkingMode}
         />
       ))}
       {uiState.pendingHistoryItems.map((item, i) => (
@@ -64,7 +59,6 @@ export const AlternateBufferQuittingDisplay = () => {
           isFocused={false}
           activeShellPtyId={uiState.activePtyId}
           embeddedShellFocused={uiState.embeddedShellFocused}
-          inlineThinkingMode={inlineThinkingMode}
         />
       ))}
       {showPromptedTool && (

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

@@ -15,6 +15,7 @@ import type {
 } from '@google/gemini-cli-core';
 import { ToolGroupMessage } from './messages/ToolGroupMessage.js';
 import { renderWithProviders } from '../../test-utils/render.js';
+import { createMockSettings } from '../../test-utils/settings.js';
 
 // Mock child components
 vi.mock('./messages/ToolGroupMessage.js', () => ({
@@ -240,14 +241,15 @@ describe('<HistoryItemDisplay />', () => {
         thought: { subject: 'Thinking', description: 'test' },
       };
       const { lastFrame } = renderWithProviders(
-        <HistoryItemDisplay
-          {...baseItem}
-          item={item}
-          inlineThinkingMode="full"
-        />,
+        <HistoryItemDisplay {...baseItem} item={item} />,
+        {
+          settings: createMockSettings({
+            merged: { ui: { inlineThinkingMode: 'full' } },
+          }),
+        },
       );
 
-      expect(lastFrame()).toContain('Thinking');
+      expect(lastFrame()).toMatchSnapshot();
     });
 
     it('does not render thinking item when disabled', () => {
@@ -257,11 +259,12 @@ describe('<HistoryItemDisplay />', () => {
         thought: { subject: 'Thinking', description: 'test' },
       };
       const { lastFrame } = renderWithProviders(
-        <HistoryItemDisplay
-          {...baseItem}
-          item={item}
-          inlineThinkingMode="off"
-        />,
+        <HistoryItemDisplay {...baseItem} item={item} />,
+        {
+          settings: createMockSettings({
+            merged: { ui: { inlineThinkingMode: 'off' } },
+          }),
+        },
       );
 
       expect(lastFrame()).toBe('');

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

@@ -35,7 +35,8 @@ import { ChatList } from './views/ChatList.js';
 import { HooksList } from './views/HooksList.js';
 import { ModelMessage } from './messages/ModelMessage.js';
 import { ThinkingMessage } from './messages/ThinkingMessage.js';
-import type { InlineThinkingMode } from '../utils/inlineThinkingMode.js';
+import { getInlineThinkingMode } from '../utils/inlineThinkingMode.js';
+import { useSettings } from '../contexts/SettingsContext.js';
 
 interface HistoryItemDisplayProps {
   item: HistoryItem;
@@ -47,7 +48,6 @@ interface HistoryItemDisplayProps {
   activeShellPtyId?: number | null;
   embeddedShellFocused?: boolean;
   availableTerminalHeightGemini?: number;
-  inlineThinkingMode?: InlineThinkingMode;
 }
 
 export const HistoryItemDisplay: React.FC<HistoryItemDisplayProps> = ({
@@ -60,18 +60,16 @@ export const HistoryItemDisplay: React.FC<HistoryItemDisplayProps> = ({
   activeShellPtyId,
   embeddedShellFocused,
   availableTerminalHeightGemini,
-  inlineThinkingMode = 'off',
 }) => {
+  const settings = useSettings();
+  const inlineThinkingMode = getInlineThinkingMode(settings);
   const itemForDisplay = useMemo(() => escapeAnsiCtrlCodes(item), [item]);
 
   return (
     <Box flexDirection="column" key={itemForDisplay.id} width={terminalWidth}>
       {/* Render standard message types */}
       {itemForDisplay.type === 'thinking' && inlineThinkingMode !== 'off' && (
-        <ThinkingMessage
-          thought={itemForDisplay.thought}
-          terminalWidth={terminalWidth}
-        />
+        <ThinkingMessage thought={itemForDisplay.thought} />
       )}
       {itemForDisplay.type === 'user' && (
         <UserMessage text={itemForDisplay.text} width={terminalWidth} />

packages/cli/src/ui/components/LoadingIndicator.test.tsx

@@ -12,7 +12,6 @@ import { StreamingContext } from '../contexts/StreamingContext.js';
 import { StreamingState } from '../types.js';
 import { vi } from 'vitest';
 import * as useTerminalSize from '../hooks/useTerminalSize.js';
-import * as terminalUtils from '../utils/terminalUtils.js';
 
 // Mock GeminiRespondingSpinner
 vi.mock('./GeminiRespondingSpinner.js', () => ({
@@ -35,12 +34,7 @@ vi.mock('../hooks/useTerminalSize.js', () => ({
   useTerminalSize: vi.fn(),
 }));
 
-vi.mock('../utils/terminalUtils.js', () => ({
-  shouldUseEmoji: vi.fn(() => true),
-}));
-
 const useTerminalSizeMock = vi.mocked(useTerminalSize.useTerminalSize);
-const shouldUseEmojiMock = vi.mocked(terminalUtils.shouldUseEmoji);
 
 const renderWithContext = (
   ui: React.ReactElement,
@@ -230,26 +224,6 @@ describe('<LoadingIndicator />', () => {
     unmount();
   });
 
-  it('should use ASCII fallback thought indicator when emoji is unavailable', () => {
-    shouldUseEmojiMock.mockReturnValue(false);
-    const props = {
-      thought: {
-        subject: 'Thinking with fallback',
-        description: 'details',
-      },
-      elapsedTime: 5,
-    };
-    const { lastFrame, unmount } = renderWithContext(
-      <LoadingIndicator {...props} />,
-      StreamingState.Responding,
-    );
-    const output = lastFrame();
-    expect(output).toContain('o Thinking with fallback');
-    expect(output).not.toContain('💬');
-    shouldUseEmojiMock.mockReturnValue(true);
-    unmount();
-  });
-
   it('should prioritize thought.subject over currentLoadingPhrase', () => {
     const props = {
       thought: {

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

@@ -15,7 +15,6 @@ import { formatDuration } from '../utils/formatters.js';
 import { useTerminalSize } from '../hooks/useTerminalSize.js';
 import { isNarrowWidth } from '../utils/isNarrowWidth.js';
 import { INTERACTIVE_SHELL_WAITING_PHRASE } from '../hooks/usePhraseCycler.js';
-import { shouldUseEmoji } from '../utils/terminalUtils.js';
 
 interface LoadingIndicatorProps {
   currentLoadingPhrase?: string;
@@ -59,9 +58,7 @@ export const LoadingIndicator: React.FC<LoadingIndicatorProps> = ({
   const hasThoughtIndicator =
     currentLoadingPhrase !== INTERACTIVE_SHELL_WAITING_PHRASE &&
     Boolean(thought?.subject?.trim());
-  const thinkingIndicator = hasThoughtIndicator
-    ? `${shouldUseEmoji() ? '💬' : 'o'} `
-    : '';
+  const thinkingIndicator = hasThoughtIndicator ? '💬 ' : '';
 
   const cancelAndTimerContent =
     showCancelAndTimer &&

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

@@ -8,7 +8,6 @@ import { Box, Static } from 'ink';
 import { HistoryItemDisplay } from './HistoryItemDisplay.js';
 import { useUIState } from '../contexts/UIStateContext.js';
 import { useAppContext } from '../contexts/AppContext.js';
-import { useSettings } from '../contexts/SettingsContext.js';
 import { AppHeader } from './AppHeader.js';
 import { useAlternateBuffer } from '../hooks/useAlternateBuffer.js';
 import {
@@ -21,7 +20,6 @@ import { MAX_GEMINI_MESSAGE_LINES } from '../constants.js';
 import { useConfirmingTool } from '../hooks/useConfirmingTool.js';
 import { ToolConfirmationQueue } from './ToolConfirmationQueue.js';
 import { useConfig } from '../contexts/ConfigContext.js';
-import { getInlineThinkingMode } from '../utils/inlineThinkingMode.js';
 
 const MemoizedHistoryItemDisplay = memo(HistoryItemDisplay);
 const MemoizedAppHeader = memo(AppHeader);
@@ -33,7 +31,6 @@ const MemoizedAppHeader = memo(AppHeader);
 export const MainContent = () => {
   const { version } = useAppContext();
   const uiState = useUIState();
-  const settings = useSettings();
   const config = useConfig();
   const isAlternateBuffer = useAlternateBuffer();
 
@@ -56,8 +53,6 @@ export const MainContent = () => {
     availableTerminalHeight,
   } = uiState;
 
-  const inlineThinkingMode = getInlineThinkingMode(settings);
-
   const historyItems = useMemo(
     () =>
       uiState.history.map((h) => (
@@ -69,15 +64,13 @@ export const MainContent = () => {
           item={h}
           isPending={false}
           commands={uiState.slashCommands}
-          inlineThinkingMode={inlineThinkingMode}
         />
       )),
     [
       uiState.history,
       mainAreaWidth,
       staticAreaMaxItemHeight,
       uiState.slashCommands,
-      inlineThinkingMode,
     ],
   );
 
@@ -99,7 +92,6 @@ export const MainContent = () => {
             isFocused={!uiState.isEditorDialogOpen}
             activeShellPtyId={uiState.activePtyId}
             embeddedShellFocused={uiState.embeddedShellFocused}
-            inlineThinkingMode={inlineThinkingMode}
           />
         ))}
         {showConfirmationQueue && confirmingTool && (
@@ -113,7 +105,6 @@ export const MainContent = () => {
       isAlternateBuffer,
       availableTerminalHeight,
       mainAreaWidth,
-      inlineThinkingMode,
       uiState.isEditorDialogOpen,
       uiState.activePtyId,
       uiState.embeddedShellFocused,
@@ -145,20 +136,13 @@ export const MainContent = () => {
             item={item.item}
             isPending={false}
             commands={uiState.slashCommands}
-            inlineThinkingMode={inlineThinkingMode}
           />
         );
       } else {
         return pendingItems;
       }
     },
-    [
-      version,
-      mainAreaWidth,
-      uiState.slashCommands,
-      inlineThinkingMode,
-      pendingItems,
-    ],
+    [version, mainAreaWidth, uiState.slashCommands, pendingItems],
   );
 
   if (isAlternateBuffer) {

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

@@ -6,18 +6,14 @@
 
 import { Box } from 'ink';
 import { useUIState } from '../contexts/UIStateContext.js';
-import { useSettings } from '../contexts/SettingsContext.js';
 import { HistoryItemDisplay } from './HistoryItemDisplay.js';
 import { useTerminalSize } from '../hooks/useTerminalSize.js';
-import { getInlineThinkingMode } from '../utils/inlineThinkingMode.js';
 
 export const QuittingDisplay = () => {
   const uiState = useUIState();
-  const settings = useSettings();
   const { rows: terminalHeight, columns: terminalWidth } = useTerminalSize();
 
   const availableTerminalHeight = terminalHeight;
-  const inlineThinkingMode = getInlineThinkingMode(settings);
 
   if (!uiState.quittingMessages) {
     return null;
@@ -34,7 +30,6 @@ export const QuittingDisplay = () => {
           terminalWidth={terminalWidth}
           item={item}
           isPending={false}
-          inlineThinkingMode={inlineThinkingMode}
         />
       ))}
     </Box>

packages/cli/src/ui/components/__snapshots__/HistoryItemDisplay.test.tsx.snap

@@ -385,3 +385,9 @@ exports[`<HistoryItemDisplay /> > renders InfoMessage for "info" type with multi
   ⚡ Line 2
   ⚡ Line 3"
 `;
+
+exports[`<HistoryItemDisplay /> > thinking items > renders thinking item when enabled 1`] = `
+"   Thinking
+ │ test
+"
+`;