feat(tui): add thinking block viewer with Alt+T expand/collapse

packages/cli/src/config/keyBindings.ts

@@ -77,6 +77,9 @@ export enum Command {
   EXPAND_SUGGESTION = 'expandSuggestion',
   COLLAPSE_SUGGESTION = 'collapseSuggestion',
 
+  // Thinking expansion
+  TOGGLE_THINKING_EXPANDED = 'toggleThinkingExpanded',
+
   // Scroll commands
   SCROLL_UP = 'scrollUp',
   SCROLL_DOWN = 'scrollDown',
@@ -237,6 +240,9 @@ export const defaultKeyBindings: KeyBindingConfig = {
   [Command.EXPAND_SUGGESTION]: [{ key: 'right' }],
   [Command.COLLAPSE_SUGGESTION]: [{ key: 'left' }],
 
+  // Thinking expansion
+  [Command.TOGGLE_THINKING_EXPANDED]: [{ key: 't', meta: true }],
+
   // Scroll commands
   [Command.SCROLL_UP]: [{ key: 'up', shift: true }],
   [Command.SCROLL_DOWN]: [{ key: 'down', shift: true }],

packages/cli/src/gemini.tsx

@@ -48,10 +48,7 @@ import {
   type InitializationResult,
 } from './core/initializer.js';
 import { handleList as handleListExtensions } from './commands/extensions/list.js';
-import {
-  initializeI18n,
-  resolveLanguageSetting,
-} from './i18n/index.js';
+import { initializeI18n, resolveLanguageSetting } from './i18n/index.js';
 import { runNonInteractive } from './nonInteractiveCli.js';
 import {
   setupStartupWorktree,
@@ -367,6 +364,7 @@ export async function startInteractiveUI(
     );
   };
 
+  const useVP = settings.merged.ui?.useTerminalBuffer ?? false;
   const instance = render(
     process.env['DEBUG'] ? (
       <React.StrictMode>
@@ -378,6 +376,7 @@ export async function startInteractiveUI(
     {
       exitOnCtrlC: false,
       isScreenReaderEnabled: config.getScreenReader(),
+      alternateScreen: useVP,
     },
   );
   // Records the moment Ink's `render()` call has returned, which is

packages/cli/src/ui/AppContainer.tsx

@@ -134,6 +134,7 @@ import {
   useVimModeActions,
 } from './contexts/VimModeContext.js';
 import { CompactModeProvider } from './contexts/CompactModeContext.js';
+import { ThoughtExpandedProvider } from './contexts/ThoughtExpandedContext.js';
 import { useTerminalSize } from './hooks/useTerminalSize.js';
 import { calculatePromptWidths } from './components/InputPrompt.js';
 import { useStdin, useStdout } from 'ink';
@@ -197,6 +198,11 @@ import {
   type RenderMode,
 } from './contexts/RenderModeContext.js';
 import { TerminalOutputProvider } from './contexts/TerminalOutputContext.js';
+import {
+  ThinkingViewerProvider,
+  type ThinkingViewerData,
+} from './contexts/ThinkingViewerContext.js';
+import { ThinkingViewer } from './components/ThinkingViewer.js';
 import { useAgentViewState } from './contexts/AgentViewContext.js';
 import {
   useBackgroundTaskViewState,
@@ -473,6 +479,19 @@ export const AppContainer = (props: AppContainerProps) => {
 
   const [userMessages, setUserMessages] = useState<string[]>([]);
 
+  // Thinking viewer overlay state
+  const [thinkingViewerData, setThinkingViewerData] =
+    useState<ThinkingViewerData | null>(null);
+  const openThinkingViewer = useCallback((data: ThinkingViewerData) => {
+    setThinkingViewerData(data);
+  }, []);
+  const closeThinkingViewer = useCallback(() => {
+    setThinkingViewerData(null);
+  }, []);
+
+  // Alt+T inline expansion toggle for thinking blocks
+  const [thoughtExpanded, setThoughtExpanded] = useState(false);
+
   // Terminal and layout hooks
   const { columns: terminalWidth, rows: terminalHeight } = useTerminalSize();
   const { stdin, setRawMode } = useStdin();
@@ -3101,6 +3120,23 @@ export const AppContainer = (props: AppContainerProps) => {
         debugLogger.debug('[DEBUG] Keystroke:', JSON.stringify(key));
       }
 
+      // ThinkingViewer owns all input while open.
+      // Ctrl+C / Ctrl+D close the viewer and fall through to quit/exit.
+      if (thinkingViewerData) {
+        if (keyMatchers[Command.QUIT](key) || keyMatchers[Command.EXIT](key)) {
+          closeThinkingViewer();
+        } else {
+          return;
+        }
+      }
+
+      // Alt+T: toggle inline expansion of thinking blocks.
+      if (keyMatchers[Command.TOGGLE_THINKING_EXPANDED](key)) {
+        setThoughtExpanded((prev) => !prev);
+        refreshStatic();
+        return;
+      }
+
       if (keyMatchers[Command.QUIT](key)) {
         if (isAuthenticating) {
           return;
@@ -3361,6 +3397,9 @@ export const AppContainer = (props: AppContainerProps) => {
       handleDoubleEscRewind,
       vimEnabled,
       vimMode,
+      thinkingViewerData,
+      closeThinkingViewer,
+      setThoughtExpanded,
     ],
   );
 
@@ -3900,6 +3939,11 @@ export const AppContainer = (props: AppContainerProps) => {
     [renderMode, setRenderMode],
   );
 
+  const thinkingViewerValue = useMemo(
+    () => ({ openThinkingViewer }),
+    [openThinkingViewer],
+  );
+
   return (
     <UIStateContext.Provider value={uiState}>
       <UIActionsContext.Provider value={uiActions}>
@@ -3911,13 +3955,25 @@ export const AppContainer = (props: AppContainerProps) => {
             }}
           >
             <CompactModeProvider value={compactModeValue}>
-              <RenderModeProvider value={renderModeValue}>
-                <TerminalOutputProvider value={writeRaw}>
-                  <ShellFocusContext.Provider value={isFocused}>
-                    <App />
-                  </ShellFocusContext.Provider>
-                </TerminalOutputProvider>
-              </RenderModeProvider>
+              <ThoughtExpandedProvider value={thoughtExpanded}>
+                <RenderModeProvider value={renderModeValue}>
+                  <TerminalOutputProvider value={writeRaw}>
+                    <ThinkingViewerProvider value={thinkingViewerValue}>
+                      <ShellFocusContext.Provider value={isFocused}>
+                        {thinkingViewerData ? (
+                          <ThinkingViewer
+                            data={thinkingViewerData}
+                            onClose={closeThinkingViewer}
+                            useAlternateScreen={!useTerminalBuffer}
+                          />
+                        ) : (
+                          <App />
+                        )}
+                      </ShellFocusContext.Provider>
+                    </ThinkingViewerProvider>
+                  </TerminalOutputProvider>
+                </RenderModeProvider>
+              </ThoughtExpandedProvider>
             </CompactModeProvider>
           </AppContext.Provider>
         </ConfigContext.Provider>

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

@@ -0,0 +1,48 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type { FC, ReactNode } from 'react';
+import { useEffect } from 'react';
+import { Box } from 'ink';
+import { useTerminalOutput } from '../contexts/TerminalOutputContext.js';
+import { useTerminalSize } from '../hooks/useTerminalSize.js';
+
+const ENTER_ALT_SCREEN = '\x1b[?1049h';
+const EXIT_ALT_SCREEN = '\x1b[?1049l';
+const CLEAR_SCREEN = '\x1b[2J\x1b[H';
+const HIDE_CURSOR = '\x1b[?25l';
+const SHOW_CURSOR = '\x1b[?25h';
+
+interface AlternateScreenProps {
+  children: ReactNode;
+  /** Skip escape writes when the root Ink renderer already owns the alt screen (VP mode). */
+  disabled?: boolean;
+}
+
+export const AlternateScreen: FC<AlternateScreenProps> = ({
+  children,
+  disabled,
+}) => {
+  const writeRaw = useTerminalOutput();
+  const { rows } = useTerminalSize();
+
+  useEffect(() => {
+    if (disabled) return;
+    writeRaw(ENTER_ALT_SCREEN + CLEAR_SCREEN + HIDE_CURSOR);
+    const onExit = () => writeRaw(SHOW_CURSOR + EXIT_ALT_SCREEN);
+    process.on('exit', onExit);
+    return () => {
+      process.removeListener('exit', onExit);
+      writeRaw(SHOW_CURSOR + EXIT_ALT_SCREEN);
+    };
+  }, [writeRaw, disabled]);
+
+  return (
+    <Box flexDirection="column" height={rows}>
+      {children}
+    </Box>
+  );
+};

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

@@ -18,12 +18,17 @@ import { renderWithProviders } from '../../test-utils/render.js';
 import { LoadedSettings } from '../../config/settings.js';
 import { ConfigContext } from '../contexts/ConfigContext.js';
 import { CompactModeProvider } from '../contexts/CompactModeContext.js';
+import { ThoughtExpandedProvider } from '../contexts/ThoughtExpandedContext.js';
 
 // Mock child components
 vi.mock('./messages/ToolGroupMessage.js', () => ({
   ToolGroupMessage: vi.fn(() => <div />),
 }));
 
+vi.mock('../hooks/useMouseEvents.js', () => ({
+  useMouseEvents: vi.fn(),
+}));
+
 describe('<HistoryItemDisplay />', () => {
   const mockConfig = {
     getChatRecordingService: () => undefined,
@@ -337,7 +342,7 @@ describe('<HistoryItemDisplay />', () => {
     expect(lastFrame()).toContain('●');
   });
 
-  it('renders committed thinking text in full transcript mode', () => {
+  it('renders committed thinking collapsed by default', () => {
     const item: HistoryItem = {
       id: 1,
       type: 'gemini_thought',
@@ -353,10 +358,11 @@ describe('<HistoryItemDisplay />', () => {
 
     const output = lastFrame() ?? '';
     expect(output).toContain('Thought for');
-    expect(output).toContain('Inspecting the repository');
+    expect(output).toContain('alt+t to expand');
+    expect(output).not.toContain('Inspecting the repository');
   });
 
-  it('renders committed thinking continuations in full transcript mode', () => {
+  it('renders committed thinking continuations hidden by default', () => {
     const item: HistoryItem = {
       id: 1,
       type: 'gemini_thought_content',
@@ -369,10 +375,10 @@ describe('<HistoryItemDisplay />', () => {
       </CompactModeProvider>,
     );
 
-    expect(lastFrame()).toContain('Continuing the reasoning');
+    expect(lastFrame()).not.toContain('Continuing the reasoning');
   });
 
-  it('keeps committed thinking collapsed in compact mode', () => {
+  it('keeps committed thinking collapsed in compact mode too', () => {
     const item: HistoryItem = {
       id: 1,
       type: 'gemini_thought',
@@ -388,10 +394,30 @@ describe('<HistoryItemDisplay />', () => {
 
     const output = lastFrame() ?? '';
     expect(output).toContain('Thought for');
-    expect(output).toContain('ctrl+o to expand');
+    expect(output).toContain('alt+t to expand');
     expect(output).not.toContain('Inspecting the repository');
   });
 
+  it('renders committed thinking expanded when ThoughtExpandedProvider is true', () => {
+    const item: HistoryItem = {
+      id: 1,
+      type: 'gemini_thought',
+      text: 'Inspecting the repository',
+      durationMs: 1200,
+    };
+
+    const { lastFrame } = renderWithProviders(
+      <ThoughtExpandedProvider value={true}>
+        <HistoryItemDisplay item={item} terminalWidth={100} isPending={false} />
+      </ThoughtExpandedProvider>,
+    );
+
+    const output = lastFrame() ?? '';
+    expect(output).toContain('Thought for');
+    expect(output).toContain('alt+t to collapse');
+    expect(output).toContain('Inspecting the repository');
+  });
+
   it('keeps committed thinking continuations hidden in compact mode', () => {
     const item: HistoryItem = {
       id: 1,