Sync upstream Gemini-CLI v0.8.2 (#838)

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

@@ -6,7 +6,7 @@
 
 import type React from 'react';
 import { Box, Text } from 'ink';
-import { Colors } from '../colors.js';
+import { theme } from '../semantic-colors.js';
 import { GIT_COMMIT_INFO } from '../../generated/git-commit.js';
 
 interface AboutBoxProps {
@@ -30,77 +30,77 @@ export const AboutBox: React.FC<AboutBoxProps> = ({
 }) => (
   <Box
     borderStyle="round"
-    borderColor={Colors.Gray}
+    borderColor={theme.border.default}
     flexDirection="column"
     padding={1}
     marginY={1}
     width="100%"
   >
     <Box marginBottom={1}>
-      <Text bold color={Colors.AccentPurple}>
+      <Text bold color={theme.text.accent}>
         About Qwen Code
       </Text>
     </Box>
     <Box flexDirection="row">
       <Box width="35%">
-        <Text bold color={Colors.LightBlue}>
+        <Text bold color={theme.text.link}>
           CLI Version
         </Text>
       </Box>
       <Box>
-        <Text>{cliVersion}</Text>
+        <Text color={theme.text.primary}>{cliVersion}</Text>
       </Box>
     </Box>
     {GIT_COMMIT_INFO && !['N/A'].includes(GIT_COMMIT_INFO) && (
       <Box flexDirection="row">
         <Box width="35%">
-          <Text bold color={Colors.LightBlue}>
+          <Text bold color={theme.text.link}>
             Git Commit
           </Text>
         </Box>
         <Box>
-          <Text>{GIT_COMMIT_INFO}</Text>
+          <Text color={theme.text.primary}>{GIT_COMMIT_INFO}</Text>
         </Box>
       </Box>
     )}
     <Box flexDirection="row">
       <Box width="35%">
-        <Text bold color={Colors.LightBlue}>
+        <Text bold color={theme.text.link}>
           Model
         </Text>
       </Box>
       <Box>
-        <Text>{modelVersion}</Text>
+        <Text color={theme.text.primary}>{modelVersion}</Text>
       </Box>
     </Box>
     <Box flexDirection="row">
       <Box width="35%">
-        <Text bold color={Colors.LightBlue}>
+        <Text bold color={theme.text.link}>
           Sandbox
         </Text>
       </Box>
       <Box>
-        <Text>{sandboxEnv}</Text>
+        <Text color={theme.text.primary}>{sandboxEnv}</Text>
       </Box>
     </Box>
     <Box flexDirection="row">
       <Box width="35%">
-        <Text bold color={Colors.LightBlue}>
+        <Text bold color={theme.text.link}>
           OS
         </Text>
       </Box>
       <Box>
-        <Text>{osVersion}</Text>
+        <Text color={theme.text.primary}>{osVersion}</Text>
       </Box>
     </Box>
     <Box flexDirection="row">
       <Box width="35%">
-        <Text bold color={Colors.LightBlue}>
+        <Text bold color={theme.text.link}>
           Auth Method
         </Text>
       </Box>
       <Box>
-        <Text>
+        <Text color={theme.text.primary}>
           {selectedAuthType.startsWith('oauth') ? 'OAuth' : selectedAuthType}
         </Text>
       </Box>
@@ -108,24 +108,24 @@ export const AboutBox: React.FC<AboutBoxProps> = ({
     {gcpProject && (
       <Box flexDirection="row">
         <Box width="35%">
-          <Text bold color={Colors.LightBlue}>
+          <Text bold color={theme.text.link}>
             GCP Project
           </Text>
         </Box>
         <Box>
-          <Text>{gcpProject}</Text>
+          <Text color={theme.text.primary}>{gcpProject}</Text>
         </Box>
       </Box>
     )}
     {ideClient && (
       <Box flexDirection="row">
         <Box width="35%">
-          <Text bold color={Colors.LightBlue}>
+          <Text bold color={theme.text.link}>
             IDE Client
           </Text>
         </Box>
         <Box>
-          <Text>{ideClient}</Text>
+          <Text color={theme.text.primary}>{ideClient}</Text>
         </Box>
       </Box>
     )}

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

@@ -0,0 +1,106 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { render } from 'ink-testing-library';
+import { AnsiOutputText } from './AnsiOutput.js';
+import type { AnsiOutput, AnsiToken } from '@qwen-code/qwen-code-core';
+
+// Helper to create a valid AnsiToken with default values
+const createAnsiToken = (overrides: Partial<AnsiToken>): AnsiToken => ({
+  text: '',
+  bold: false,
+  italic: false,
+  underline: false,
+  dim: false,
+  inverse: false,
+  fg: '#ffffff',
+  bg: '#000000',
+  ...overrides,
+});
+
+describe('<AnsiOutputText />', () => {
+  it('renders a simple AnsiOutput object correctly', () => {
+    const data: AnsiOutput = [
+      [
+        createAnsiToken({ text: 'Hello, ' }),
+        createAnsiToken({ text: 'world!' }),
+      ],
+    ];
+    const { lastFrame } = render(<AnsiOutputText data={data} />);
+    expect(lastFrame()).toBe('Hello, world!');
+  });
+
+  it('correctly applies all the styles', () => {
+    const data: AnsiOutput = [
+      [
+        createAnsiToken({ text: 'Bold', bold: true }),
+        createAnsiToken({ text: 'Italic', italic: true }),
+        createAnsiToken({ text: 'Underline', underline: true }),
+        createAnsiToken({ text: 'Dim', dim: true }),
+        createAnsiToken({ text: 'Inverse', inverse: true }),
+      ],
+    ];
+    // Note: ink-testing-library doesn't render styles, so we can only check the text.
+    // We are testing that it renders without crashing.
+    const { lastFrame } = render(<AnsiOutputText data={data} />);
+    expect(lastFrame()).toBe('BoldItalicUnderlineDimInverse');
+  });
+
+  it('correctly applies foreground and background colors', () => {
+    const data: AnsiOutput = [
+      [
+        createAnsiToken({ text: 'Red FG', fg: '#ff0000' }),
+        createAnsiToken({ text: 'Blue BG', bg: '#0000ff' }),
+      ],
+    ];
+    // Note: ink-testing-library doesn't render colors, so we can only check the text.
+    // We are testing that it renders without crashing.
+    const { lastFrame } = render(<AnsiOutputText data={data} />);
+    expect(lastFrame()).toBe('Red FGBlue BG');
+  });
+
+  it('handles empty lines and empty tokens', () => {
+    const data: AnsiOutput = [
+      [createAnsiToken({ text: 'First line' })],
+      [],
+      [createAnsiToken({ text: 'Third line' })],
+      [createAnsiToken({ text: '' })],
+    ];
+    const { lastFrame } = render(<AnsiOutputText data={data} />);
+    const output = lastFrame();
+    expect(output).toBeDefined();
+    const lines = output!.split('\n');
+    expect(lines[0]).toBe('First line');
+    expect(lines[1]).toBe('Third line');
+  });
+
+  it('respects the availableTerminalHeight prop and slices the lines correctly', () => {
+    const data: AnsiOutput = [
+      [createAnsiToken({ text: 'Line 1' })],
+      [createAnsiToken({ text: 'Line 2' })],
+      [createAnsiToken({ text: 'Line 3' })],
+      [createAnsiToken({ text: 'Line 4' })],
+    ];
+    const { lastFrame } = render(
+      <AnsiOutputText data={data} availableTerminalHeight={2} />,
+    );
+    const output = lastFrame();
+    expect(output).not.toContain('Line 1');
+    expect(output).not.toContain('Line 2');
+    expect(output).toContain('Line 3');
+    expect(output).toContain('Line 4');
+  });
+
+  it('renders a large AnsiOutput object without crashing', () => {
+    const largeData: AnsiOutput = [];
+    for (let i = 0; i < 1000; i++) {
+      largeData.push([createAnsiToken({ text: `Line ${i}` })]);
+    }
+    const { lastFrame } = render(<AnsiOutputText data={largeData} />);
+    // We are just checking that it renders something without crashing.
+    expect(lastFrame()).toBeDefined();
+  });
+});

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

@@ -0,0 +1,50 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type React from 'react';
+import { Text } from 'ink';
+import type {
+  AnsiLine,
+  AnsiOutput,
+  AnsiToken,
+} from '@qwen-code/qwen-code-core';
+
+const DEFAULT_HEIGHT = 24;
+
+interface AnsiOutputProps {
+  data: AnsiOutput;
+  availableTerminalHeight?: number;
+}
+
+export const AnsiOutputText: React.FC<AnsiOutputProps> = ({
+  data,
+  availableTerminalHeight,
+}) => {
+  const lastLines = data.slice(
+    -(availableTerminalHeight && availableTerminalHeight > 0
+      ? availableTerminalHeight
+      : DEFAULT_HEIGHT),
+  );
+  return lastLines.map((line: AnsiLine, lineIndex: number) => (
+    <Text key={lineIndex}>
+      {line.length > 0
+        ? line.map((token: AnsiToken, tokenIndex: number) => (
+            <Text
+              key={tokenIndex}
+              color={token.inverse ? token.bg : token.fg}
+              backgroundColor={token.inverse ? token.fg : token.bg}
+              dimColor={token.dim}
+              bold={token.bold}
+              italic={token.italic}
+              underline={token.underline}
+            >
+              {token.text}
+            </Text>
+          ))
+        : null}
+    </Text>
+  ));
+};

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

@@ -0,0 +1,33 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Box } from 'ink';
+import { Header } from './Header.js';
+import { Tips } from './Tips.js';
+import { useSettings } from '../contexts/SettingsContext.js';
+import { useConfig } from '../contexts/ConfigContext.js';
+import { useUIState } from '../contexts/UIStateContext.js';
+
+interface AppHeaderProps {
+  version: string;
+}
+
+export const AppHeader = ({ version }: AppHeaderProps) => {
+  const settings = useSettings();
+  const config = useConfig();
+  const { nightly } = useUIState();
+
+  return (
+    <Box flexDirection="column">
+      {!(settings.merged.ui?.hideBanner || config.getScreenReader()) && (
+        <Header version={version} nightly={nightly} />
+      )}
+      {!(settings.merged.ui?.hideTips || config.getScreenReader()) && (
+        <Tips config={config} />
+      )}
+    </Box>
+  );
+};

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

@@ -1,437 +0,0 @@
-/**
- * @license
- * Copyright 2025 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { AuthDialog } from './AuthDialog.js';
-import { LoadedSettings, SettingScope } from '../../config/settings.js';
-import { AuthType } from '@qwen-code/qwen-code-core';
-import { renderWithProviders } from '../../test-utils/render.js';
-
-describe('AuthDialog', () => {
-  const wait = (ms = 50) => new Promise((resolve) => setTimeout(resolve, ms));
-
-  let originalEnv: NodeJS.ProcessEnv;
-
-  beforeEach(() => {
-    originalEnv = { ...process.env };
-    process.env['GEMINI_API_KEY'] = '';
-    process.env['QWEN_DEFAULT_AUTH_TYPE'] = '';
-    vi.clearAllMocks();
-  });
-
-  afterEach(() => {
-    process.env = originalEnv;
-  });
-
-  it('should show an error if the initial auth type is invalid', () => {
-    process.env['GEMINI_API_KEY'] = '';
-
-    const settings: LoadedSettings = new LoadedSettings(
-      {
-        settings: { ui: { customThemes: {} }, mcpServers: {} },
-        path: '',
-      },
-      {
-        settings: {},
-        path: '',
-      },
-      {
-        settings: {
-          security: {
-            auth: {
-              selectedType: AuthType.USE_GEMINI,
-            },
-          },
-        },
-        path: '',
-      },
-      {
-        settings: { ui: { customThemes: {} }, mcpServers: {} },
-        path: '',
-      },
-      [],
-      true,
-      new Set(),
-    );
-
-    const { lastFrame } = renderWithProviders(
-      <AuthDialog
-        onSelect={() => {}}
-        settings={settings}
-        initialErrorMessage="GEMINI_API_KEY  environment variable not found"
-      />,
-    );
-
-    expect(lastFrame()).toContain(
-      'GEMINI_API_KEY  environment variable not found',
-    );
-  });
-
-  describe('GEMINI_API_KEY environment variable', () => {
-    it('should detect GEMINI_API_KEY environment variable', () => {
-      process.env['GEMINI_API_KEY'] = 'foobar';
-
-      const settings: LoadedSettings = new LoadedSettings(
-        {
-          settings: {
-            security: { auth: { selectedType: undefined } },
-            ui: { customThemes: {} },
-            mcpServers: {},
-          },
-          path: '',
-        },
-        {
-          settings: {},
-          path: '',
-        },
-        {
-          settings: { ui: { customThemes: {} }, mcpServers: {} },
-          path: '',
-        },
-        {
-          settings: { ui: { customThemes: {} }, mcpServers: {} },
-          path: '',
-        },
-        [],
-        true,
-        new Set(),
-      );
-
-      const { lastFrame } = renderWithProviders(
-        <AuthDialog onSelect={() => {}} settings={settings} />,
-      );
-
-      // Since the auth dialog only shows OpenAI option now,
-      // it won't show GEMINI_API_KEY messages
-      expect(lastFrame()).toContain('OpenAI');
-    });
-
-    it('should not show the GEMINI_API_KEY message if QWEN_DEFAULT_AUTH_TYPE is set to something else', () => {
-      process.env['GEMINI_API_KEY'] = 'foobar';
-      process.env['QWEN_DEFAULT_AUTH_TYPE'] = AuthType.LOGIN_WITH_GOOGLE;
-
-      const settings: LoadedSettings = new LoadedSettings(
-        {
-          settings: {
-            security: { auth: { selectedType: undefined } },
-            ui: { customThemes: {} },
-            mcpServers: {},
-          },
-          path: '',
-        },
-        {
-          settings: {},
-          path: '',
-        },
-        {
-          settings: { ui: { customThemes: {} }, mcpServers: {} },
-          path: '',
-        },
-        {
-          settings: { ui: { customThemes: {} }, mcpServers: {} },
-          path: '',
-        },
-        [],
-        true,
-        new Set(),
-      );
-
-      const { lastFrame } = renderWithProviders(
-        <AuthDialog onSelect={() => {}} settings={settings} />,
-      );
-
-      expect(lastFrame()).not.toContain(
-        'Existing API key detected (GEMINI_API_KEY)',
-      );
-    });
-
-    it('should show the GEMINI_API_KEY message if QWEN_DEFAULT_AUTH_TYPE is set to use api key', () => {
-      process.env['GEMINI_API_KEY'] = 'foobar';
-      process.env['QWEN_DEFAULT_AUTH_TYPE'] = AuthType.USE_GEMINI;
-
-      const settings: LoadedSettings = new LoadedSettings(
-        {
-          settings: {
-            security: { auth: { selectedType: undefined } },
-            ui: { customThemes: {} },
-            mcpServers: {},
-          },
-          path: '',
-        },
-        {
-          settings: {},
-          path: '',
-        },
-        {
-          settings: { ui: { customThemes: {} }, mcpServers: {} },
-          path: '',
-        },
-        {
-          settings: { ui: { customThemes: {} }, mcpServers: {} },
-          path: '',
-        },
-        [],
-        true,
-        new Set(),
-      );
-
-      const { lastFrame } = renderWithProviders(
-        <AuthDialog onSelect={() => {}} settings={settings} />,
-      );
-
-      // Since the auth dialog only shows OpenAI option now,
-      // it won't show GEMINI_API_KEY messages
-      expect(lastFrame()).toContain('OpenAI');
-    });
-  });
-
-  describe('QWEN_DEFAULT_AUTH_TYPE environment variable', () => {
-    it('should select the auth type specified by QWEN_DEFAULT_AUTH_TYPE', () => {
-      process.env['QWEN_DEFAULT_AUTH_TYPE'] = AuthType.USE_OPENAI;
-
-      const settings: LoadedSettings = new LoadedSettings(
-        {
-          settings: {
-            security: { auth: { selectedType: undefined } },
-            ui: { customThemes: {} },
-            mcpServers: {},
-          },
-          path: '',
-        },
-        {
-          settings: {},
-          path: '',
-        },
-        {
-          settings: { ui: { customThemes: {} }, mcpServers: {} },
-          path: '',
-        },
-        {
-          settings: { ui: { customThemes: {} }, mcpServers: {} },
-          path: '',
-        },
-        [],
-        true,
-        new Set(),
-      );
-
-      const { lastFrame } = renderWithProviders(
-        <AuthDialog onSelect={() => {}} settings={settings} />,
-      );
-
-      // This is a bit brittle, but it's the best way to check which item is selected.
-      expect(lastFrame()).toContain('● 2. OpenAI');
-    });
-
-    it('should fall back to default if QWEN_DEFAULT_AUTH_TYPE is not set', () => {
-      const settings: LoadedSettings = new LoadedSettings(
-        {
-          settings: {
-            security: { auth: { selectedType: undefined } },
-            ui: { customThemes: {} },
-            mcpServers: {},
-          },
-          path: '',
-        },
-        {
-          settings: {},
-          path: '',
-        },
-        {
-          settings: { ui: { customThemes: {} }, mcpServers: {} },
-          path: '',
-        },
-        {
-          settings: { ui: { customThemes: {} }, mcpServers: {} },
-          path: '',
-        },
-        [],
-        true,
-        new Set(),
-      );
-
-      const { lastFrame } = renderWithProviders(
-        <AuthDialog onSelect={() => {}} settings={settings} />,
-      );
-
-      // Default is Qwen OAuth (first option)
-      expect(lastFrame()).toContain('● 1. Qwen OAuth');
-    });
-
-    it('should show an error and fall back to default if QWEN_DEFAULT_AUTH_TYPE is invalid', () => {
-      process.env['QWEN_DEFAULT_AUTH_TYPE'] = 'invalid-auth-type';
-
-      const settings: LoadedSettings = new LoadedSettings(
-        {
-          settings: {
-            security: { auth: { selectedType: undefined } },
-            ui: { customThemes: {} },
-            mcpServers: {},
-          },
-          path: '',
-        },
-        {
-          settings: {},
-          path: '',
-        },
-        {
-          settings: { ui: { customThemes: {} }, mcpServers: {} },
-          path: '',
-        },
-        {
-          settings: { ui: { customThemes: {} }, mcpServers: {} },
-          path: '',
-        },
-        [],
-        true,
-        new Set(),
-      );
-
-      const { lastFrame } = renderWithProviders(
-        <AuthDialog onSelect={() => {}} settings={settings} />,
-      );
-
-      // Since the auth dialog doesn't show QWEN_DEFAULT_AUTH_TYPE errors anymore,
-      // it will just show the default Qwen OAuth option
-      expect(lastFrame()).toContain('● 1. Qwen OAuth');
-    });
-  });
-
-  it('should prevent exiting when no auth method is selected and show error message', async () => {
-    const onSelect = vi.fn();
-    const settings: LoadedSettings = new LoadedSettings(
-      {
-        settings: { ui: { customThemes: {} }, mcpServers: {} },
-        path: '',
-      },
-      {
-        settings: {},
-        path: '',
-      },
-      {
-        settings: {
-          security: { auth: { selectedType: undefined } },
-          ui: { customThemes: {} },
-          mcpServers: {},
-        },
-        path: '',
-      },
-      {
-        settings: { ui: { customThemes: {} }, mcpServers: {} },
-        path: '',
-      },
-      [],
-      true,
-      new Set(),
-    );
-
-    const { lastFrame, stdin, unmount } = renderWithProviders(
-      <AuthDialog onSelect={onSelect} settings={settings} />,
-    );
-    await wait();
-
-    // Simulate pressing escape key
-    stdin.write('\u001b'); // ESC key
-    await wait();
-
-    // Should show error message instead of calling onSelect
-    expect(lastFrame()).toContain(
-      'You must select an auth method to proceed. Press Ctrl+C again to exit.',
-    );
-    expect(onSelect).not.toHaveBeenCalled();
-    unmount();
-  });
-
-  it('should not exit if there is already an error message', async () => {
-    const onSelect = vi.fn();
-    const settings: LoadedSettings = new LoadedSettings(
-      {
-        settings: { ui: { customThemes: {} }, mcpServers: {} },
-        path: '',
-      },
-      {
-        settings: {},
-        path: '',
-      },
-      {
-        settings: {
-          security: { auth: { selectedType: undefined } },
-          ui: { customThemes: {} },
-          mcpServers: {},
-        },
-        path: '',
-      },
-      {
-        settings: { ui: { customThemes: {} }, mcpServers: {} },
-        path: '',
-      },
-      [],
-      true,
-      new Set(),
-    );
-
-    const { lastFrame, stdin, unmount } = renderWithProviders(
-      <AuthDialog
-        onSelect={onSelect}
-        settings={settings}
-        initialErrorMessage="Initial error"
-      />,
-    );
-    await wait();
-
-    expect(lastFrame()).toContain('Initial error');
-
-    // Simulate pressing escape key
-    stdin.write('\u001b'); // ESC key
-    await wait();
-
-    // Should not call onSelect
-    expect(onSelect).not.toHaveBeenCalled();
-    unmount();
-  });
-
-  it('should allow exiting when auth method is already selected', async () => {
-    const onSelect = vi.fn();
-    const settings: LoadedSettings = new LoadedSettings(
-      {
-        settings: { ui: { customThemes: {} }, mcpServers: {} },
-        path: '',
-      },
-      {
-        settings: {},
-        path: '',
-      },
-      {
-        settings: {
-          security: { auth: { selectedType: AuthType.LOGIN_WITH_GOOGLE } },
-          ui: { customThemes: {} },
-          mcpServers: {},
-        },
-        path: '',
-      },
-      {
-        settings: { ui: { customThemes: {} }, mcpServers: {} },
-        path: '',
-      },
-      [],
-      true,
-      new Set(),
-    );
-
-    const { stdin, unmount } = renderWithProviders(
-      <AuthDialog onSelect={onSelect} settings={settings} />,
-    );
-    await wait();
-
-    // Simulate pressing escape key
-    stdin.write('\u001b'); // ESC key
-    await wait();
-
-    // Should call onSelect with undefined to exit
-    expect(onSelect).toHaveBeenCalledWith(undefined, SettingScope.User);
-    unmount();
-  });
-});

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

@@ -1,183 +0,0 @@
-/**
- * @license
- * Copyright 2025 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import type React from 'react';
-import { useState } from 'react';
-import { AuthType } from '@qwen-code/qwen-code-core';
-import { Box, Text } from 'ink';
-import {
-  setOpenAIApiKey,
-  setOpenAIBaseUrl,
-  setOpenAIModel,
-  validateAuthMethod,
-} from '../../config/auth.js';
-import { type LoadedSettings, SettingScope } from '../../config/settings.js';
-import { Colors } from '../colors.js';
-import { useKeypress } from '../hooks/useKeypress.js';
-import { OpenAIKeyPrompt } from './OpenAIKeyPrompt.js';
-import { RadioButtonSelect } from './shared/RadioButtonSelect.js';
-
-interface AuthDialogProps {
-  onSelect: (authMethod: AuthType | undefined, scope: SettingScope) => void;
-  settings: LoadedSettings;
-  initialErrorMessage?: string | null;
-}
-
-function parseDefaultAuthType(
-  defaultAuthType: string | undefined,
-): AuthType | null {
-  if (
-    defaultAuthType &&
-    Object.values(AuthType).includes(defaultAuthType as AuthType)
-  ) {
-    return defaultAuthType as AuthType;
-  }
-  return null;
-}
-
-export function AuthDialog({
-  onSelect,
-  settings,
-  initialErrorMessage,
-}: AuthDialogProps): React.JSX.Element {
-  const [errorMessage, setErrorMessage] = useState<string | null>(
-    initialErrorMessage || null,
-  );
-  const [showOpenAIKeyPrompt, setShowOpenAIKeyPrompt] = useState(false);
-  const items = [
-    { label: 'Qwen OAuth', value: AuthType.QWEN_OAUTH },
-    { label: 'OpenAI', value: AuthType.USE_OPENAI },
-  ];
-
-  const initialAuthIndex = Math.max(
-    0,
-    items.findIndex((item) => {
-      if (settings.merged.security?.auth?.selectedType) {
-        return item.value === settings.merged.security?.auth?.selectedType;
-      }
-
-      const defaultAuthType = parseDefaultAuthType(
-        process.env['QWEN_DEFAULT_AUTH_TYPE'],
-      );
-      if (defaultAuthType) {
-        return item.value === defaultAuthType;
-      }
-
-      if (process.env['GEMINI_API_KEY']) {
-        return item.value === AuthType.USE_GEMINI;
-      }
-
-      return item.value === AuthType.LOGIN_WITH_GOOGLE;
-    }),
-  );
-
-  const handleAuthSelect = (authMethod: AuthType) => {
-    const error = validateAuthMethod(authMethod);
-    if (error) {
-      if (
-        authMethod === AuthType.USE_OPENAI &&
-        !process.env['OPENAI_API_KEY']
-      ) {
-        setShowOpenAIKeyPrompt(true);
-        setErrorMessage(null);
-      } else {
-        setErrorMessage(error);
-      }
-    } else {
-      setErrorMessage(null);
-      onSelect(authMethod, SettingScope.User);
-    }
-  };
-
-  const handleOpenAIKeySubmit = (
-    apiKey: string,
-    baseUrl: string,
-    model: string,
-  ) => {
-    setOpenAIApiKey(apiKey);
-    setOpenAIBaseUrl(baseUrl);
-    setOpenAIModel(model);
-    setShowOpenAIKeyPrompt(false);
-    onSelect(AuthType.USE_OPENAI, SettingScope.User);
-  };
-
-  const handleOpenAIKeyCancel = () => {
-    setShowOpenAIKeyPrompt(false);
-    setErrorMessage('OpenAI API key is required to use OpenAI authentication.');
-  };
-
-  useKeypress(
-    (key) => {
-      if (showOpenAIKeyPrompt) {
-        return;
-      }
-
-      if (key.name === 'escape') {
-        // Prevent exit if there is an error message.
-        // This means they user is not authenticated yet.
-        if (errorMessage) {
-          return;
-        }
-        if (settings.merged.security?.auth?.selectedType === undefined) {
-          // Prevent exiting if no auth method is set
-          setErrorMessage(
-            'You must select an auth method to proceed. Press Ctrl+C again to exit.',
-          );
-          return;
-        }
-        onSelect(undefined, SettingScope.User);
-      }
-    },
-    { isActive: true },
-  );
-
-  if (showOpenAIKeyPrompt) {
-    return (
-      <OpenAIKeyPrompt
-        onSubmit={handleOpenAIKeySubmit}
-        onCancel={handleOpenAIKeyCancel}
-      />
-    );
-  }
-
-  return (
-    <Box
-      borderStyle="round"
-      borderColor={Colors.Gray}
-      flexDirection="column"
-      padding={1}
-      width="100%"
-    >
-      <Text bold>Get started</Text>
-      <Box marginTop={1}>
-        <Text>How would you like to authenticate for this project?</Text>
-      </Box>
-      <Box marginTop={1}>
-        <RadioButtonSelect
-          items={items}
-          initialIndex={initialAuthIndex}
-          onSelect={handleAuthSelect}
-        />
-      </Box>
-      {errorMessage && (
-        <Box marginTop={1}>
-          <Text color={Colors.AccentRed}>{errorMessage}</Text>
-        </Box>
-      )}
-      <Box marginTop={1}>
-        <Text color={Colors.AccentPurple}>(Use Enter to Set Auth)</Text>
-      </Box>
-      <Box marginTop={1}>
-        <Text>Terms of Services and Privacy Notice for Qwen Code</Text>
-      </Box>
-      <Box marginTop={1}>
-        <Text color={Colors.AccentBlue}>
-          {'https://github.com/QwenLM/Qwen3-Coder/blob/main/README.md'}
-        </Text>
-      </Box>
-    </Box>
-  );
-}

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

@@ -1,63 +0,0 @@
-/**
- * @license
- * Copyright 2025 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import type React from 'react';
-import { useState, useEffect } from 'react';
-import { Box, Text } from 'ink';
-import Spinner from 'ink-spinner';
-import { Colors } from '../colors.js';
-import { useKeypress } from '../hooks/useKeypress.js';
-
-interface AuthInProgressProps {
-  onTimeout: () => void;
-}
-
-export function AuthInProgress({
-  onTimeout,
-}: AuthInProgressProps): React.JSX.Element {
-  const [timedOut, setTimedOut] = useState(false);
-
-  useKeypress(
-    (key) => {
-      if (key.name === 'escape' || (key.ctrl && key.name === 'c')) {
-        onTimeout();
-      }
-    },
-    { isActive: true },
-  );
-
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setTimedOut(true);
-      onTimeout();
-    }, 180000);
-
-    return () => clearTimeout(timer);
-  }, [onTimeout]);
-
-  return (
-    <Box
-      borderStyle="round"
-      borderColor={Colors.Gray}
-      flexDirection="column"
-      padding={1}
-      width="100%"
-    >
-      {timedOut ? (
-        <Text color={Colors.AccentRed}>
-          Authentication timed out. Please try again.
-        </Text>
-      ) : (
-        <Box>
-          <Text>
-            <Spinner type="dots" /> Waiting for auth... (Press ESC or CTRL+C to
-            cancel)
-          </Text>
-        </Box>
-      )}
-    </Box>
-  );
-}

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

@@ -6,7 +6,7 @@
 
 import type React from 'react';
 import { Box, Text } from 'ink';
-import { Colors } from '../colors.js';
+import { theme } from '../semantic-colors.js';
 import { ApprovalMode } from '@qwen-code/qwen-code-core';
 
 interface AutoAcceptIndicatorProps {
@@ -22,17 +22,17 @@ export const AutoAcceptIndicator: React.FC<AutoAcceptIndicatorProps> = ({
 
   switch (approvalMode) {
     case ApprovalMode.PLAN:
-      textColor = Colors.AccentBlue;
+      textColor = theme.status.success;
       textContent = 'plan mode';
       subText = ' (shift + tab to cycle)';
       break;
     case ApprovalMode.AUTO_EDIT:
-      textColor = Colors.AccentGreen;
+      textColor = theme.status.warning;
       textContent = 'auto-accept edits';
       subText = ' (shift + tab to cycle)';
       break;
     case ApprovalMode.YOLO:
-      textColor = Colors.AccentRed;
+      textColor = theme.status.error;
       textContent = 'YOLO mode';
       subText = ' (shift + tab to cycle)';
       break;
@@ -45,7 +45,7 @@ export const AutoAcceptIndicator: React.FC<AutoAcceptIndicatorProps> = ({
     <Box>
       <Text color={textColor}>
         {textContent}
-        {subText && <Text color={Colors.Gray}>{subText}</Text>}
+        {subText && <Text color={theme.text.secondary}>{subText}</Text>}
       </Text>
     </Box>
   );

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

@@ -0,0 +1,434 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { describe, it, expect, vi } from 'vitest';
+import { render } from 'ink-testing-library';
+import { Text } from 'ink';
+import { Composer } from './Composer.js';
+import { UIStateContext, type UIState } from '../contexts/UIStateContext.js';
+import {
+  UIActionsContext,
+  type UIActions,
+} from '../contexts/UIActionsContext.js';
+import { ConfigContext } from '../contexts/ConfigContext.js';
+import { SettingsContext } from '../contexts/SettingsContext.js';
+// Mock VimModeContext hook
+vi.mock('../contexts/VimModeContext.js', () => ({
+  useVimMode: vi.fn(() => ({
+    vimEnabled: false,
+    vimMode: 'NORMAL',
+  })),
+}));
+import { ApprovalMode } from '@qwen-code/qwen-code-core';
+import { StreamingState } from '../types.js';
+
+// Mock child components
+vi.mock('./LoadingIndicator.js', () => ({
+  LoadingIndicator: ({ thought }: { thought?: string }) => (
+    <Text>LoadingIndicator{thought ? `: ${thought}` : ''}</Text>
+  ),
+}));
+
+vi.mock('./ContextSummaryDisplay.js', () => ({
+  ContextSummaryDisplay: () => <Text>ContextSummaryDisplay</Text>,
+}));
+
+vi.mock('./AutoAcceptIndicator.js', () => ({
+  AutoAcceptIndicator: () => <Text>AutoAcceptIndicator</Text>,
+}));
+
+vi.mock('./ShellModeIndicator.js', () => ({
+  ShellModeIndicator: () => <Text>ShellModeIndicator</Text>,
+}));
+
+vi.mock('./DetailedMessagesDisplay.js', () => ({
+  DetailedMessagesDisplay: () => <Text>DetailedMessagesDisplay</Text>,
+}));
+
+vi.mock('./InputPrompt.js', () => ({
+  InputPrompt: () => <Text>InputPrompt</Text>,
+  calculatePromptWidths: vi.fn(() => ({
+    inputWidth: 80,
+    suggestionsWidth: 40,
+    containerWidth: 84,
+  })),
+}));
+
+vi.mock('./Footer.js', () => ({
+  Footer: () => <Text>Footer</Text>,
+}));
+
+vi.mock('./ShowMoreLines.js', () => ({
+  ShowMoreLines: () => <Text>ShowMoreLines</Text>,
+}));
+
+vi.mock('./QueuedMessageDisplay.js', () => ({
+  QueuedMessageDisplay: ({ messageQueue }: { messageQueue: string[] }) => {
+    if (messageQueue.length === 0) {
+      return null;
+    }
+    return (
+      <>
+        {messageQueue.map((message, index) => (
+          <Text key={index}>{message}</Text>
+        ))}
+      </>
+    );
+  },
+}));
+
+// Mock contexts
+vi.mock('../contexts/OverflowContext.js', () => ({
+  OverflowProvider: ({ children }: { children: React.ReactNode }) => children,
+}));
+
+// Create mock context providers
+const createMockUIState = (overrides: Partial<UIState> = {}): UIState =>
+  ({
+    streamingState: null,
+    contextFileNames: [],
+    showAutoAcceptIndicator: ApprovalMode.DEFAULT,
+    messageQueue: [],
+    showErrorDetails: false,
+    constrainHeight: false,
+    isInputActive: true,
+    buffer: '',
+    inputWidth: 80,
+    suggestionsWidth: 40,
+    userMessages: [],
+    slashCommands: [],
+    commandContext: null,
+    shellModeActive: false,
+    isFocused: true,
+    thought: '',
+    currentLoadingPhrase: '',
+    elapsedTime: 0,
+    ctrlCPressedOnce: false,
+    ctrlDPressedOnce: false,
+    showEscapePrompt: false,
+    ideContextState: null,
+    geminiMdFileCount: 0,
+    showToolDescriptions: false,
+    filteredConsoleMessages: [],
+    sessionStats: {
+      lastPromptTokenCount: 0,
+      sessionTokenCount: 0,
+      totalPrompts: 0,
+    },
+    branchName: 'main',
+    debugMessage: '',
+    corgiMode: false,
+    errorCount: 0,
+    nightly: false,
+    isTrustedFolder: true,
+    ...overrides,
+  }) as UIState;
+
+const createMockUIActions = (): UIActions =>
+  ({
+    handleFinalSubmit: vi.fn(),
+    handleClearScreen: vi.fn(),
+    setShellModeActive: vi.fn(),
+    onEscapePromptChange: vi.fn(),
+    vimHandleInput: vi.fn(),
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  }) as any;
+
+const createMockConfig = (overrides = {}) => ({
+  getModel: vi.fn(() => 'gemini-1.5-pro'),
+  getTargetDir: vi.fn(() => '/test/dir'),
+  getDebugMode: vi.fn(() => false),
+  getAccessibility: vi.fn(() => ({})),
+  getMcpServers: vi.fn(() => ({})),
+  getBlockedMcpServers: vi.fn(() => []),
+  ...overrides,
+});
+
+const createMockSettings = (merged = {}) => ({
+  merged: {
+    hideFooter: false,
+    showMemoryUsage: false,
+    ...merged,
+  },
+});
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const renderComposer = (
+  uiState: UIState,
+  settings = createMockSettings(),
+  config = createMockConfig(),
+  uiActions = createMockUIActions(),
+) =>
+  render(
+    <ConfigContext.Provider value={config as any}>
+      <SettingsContext.Provider value={settings as any}>
+        <UIStateContext.Provider value={uiState}>
+          <UIActionsContext.Provider value={uiActions}>
+            <Composer />
+          </UIActionsContext.Provider>
+        </UIStateContext.Provider>
+      </SettingsContext.Provider>
+    </ConfigContext.Provider>,
+  );
+/* eslint-enable @typescript-eslint/no-explicit-any */
+
+describe('Composer', () => {
+  describe('Footer Display Settings', () => {
+    it('renders Footer by default when hideFooter is false', () => {
+      const uiState = createMockUIState();
+      const settings = createMockSettings({ hideFooter: false });
+
+      const { lastFrame } = renderComposer(uiState, settings);
+
+      expect(lastFrame()).toContain('Footer');
+    });
+
+    it('does NOT render Footer when hideFooter is true', () => {
+      const uiState = createMockUIState();
+      const settings = createMockSettings({ hideFooter: true });
+
+      const { lastFrame } = renderComposer(uiState, settings);
+
+      // Check for content that only appears IN the Footer component itself
+      expect(lastFrame()).not.toContain('[NORMAL]'); // Vim mode indicator
+      expect(lastFrame()).not.toContain('(main'); // Branch name with parentheses
+    });
+
+    it('passes correct props to Footer including vim mode when enabled', async () => {
+      const uiState = createMockUIState({
+        branchName: 'feature-branch',
+        corgiMode: true,
+        errorCount: 2,
+        sessionStats: {
+          sessionId: 'test-session',
+          sessionStartTime: new Date(),
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          metrics: {} as any,
+          lastPromptTokenCount: 150,
+          promptCount: 5,
+        },
+      });
+      const config = createMockConfig({
+        getModel: vi.fn(() => 'gemini-1.5-flash'),
+        getTargetDir: vi.fn(() => '/project/path'),
+        getDebugMode: vi.fn(() => true),
+      });
+      const settings = createMockSettings({
+        hideFooter: false,
+        showMemoryUsage: true,
+      });
+      // Mock vim mode for this test
+      const { useVimMode } = await import('../contexts/VimModeContext.js');
+      vi.mocked(useVimMode).mockReturnValueOnce({
+        vimEnabled: true,
+        vimMode: 'INSERT',
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      } as any);
+
+      const { lastFrame } = renderComposer(uiState, settings, config);
+
+      expect(lastFrame()).toContain('Footer');
+      // Footer should be rendered with all the state passed through
+    });
+  });
+
+  describe('Loading Indicator', () => {
+    it('renders LoadingIndicator with thought when streaming', () => {
+      const uiState = createMockUIState({
+        streamingState: StreamingState.Responding,
+        thought: {
+          subject: 'Processing',
+          description: 'Processing your request...',
+        },
+        currentLoadingPhrase: 'Analyzing',
+        elapsedTime: 1500,
+      });
+
+      const { lastFrame } = renderComposer(uiState);
+
+      const output = lastFrame();
+      expect(output).toContain('LoadingIndicator');
+    });
+
+    it('renders LoadingIndicator without thought when accessibility disables loading phrases', () => {
+      const uiState = createMockUIState({
+        streamingState: StreamingState.Responding,
+        thought: { subject: 'Hidden', description: 'Should not show' },
+      });
+      const config = createMockConfig({
+        getAccessibility: vi.fn(() => ({ disableLoadingPhrases: true })),
+      });
+
+      const { lastFrame } = renderComposer(uiState, undefined, config);
+
+      const output = lastFrame();
+      expect(output).toContain('LoadingIndicator');
+      expect(output).not.toContain('Should not show');
+    });
+
+    it('suppresses thought when waiting for confirmation', () => {
+      const uiState = createMockUIState({
+        streamingState: StreamingState.WaitingForConfirmation,
+        thought: {
+          subject: 'Confirmation',
+          description: 'Should not show during confirmation',
+        },
+      });
+
+      const { lastFrame } = renderComposer(uiState);
+
+      const output = lastFrame();
+      expect(output).toContain('LoadingIndicator');
+      expect(output).not.toContain('Should not show during confirmation');
+    });
+  });
+
+  describe('Message Queue Display', () => {
+    it('displays queued messages when present', () => {
+      const uiState = createMockUIState({
+        messageQueue: [
+          'First queued message',
+          'Second queued message',
+          'Third queued message',
+        ],
+      });
+
+      const { lastFrame } = renderComposer(uiState);
+
+      const output = lastFrame();
+      expect(output).toContain('First queued message');
+      expect(output).toContain('Second queued message');
+      expect(output).toContain('Third queued message');
+    });
+
+    it('renders QueuedMessageDisplay with empty message queue', () => {
+      const uiState = createMockUIState({
+        messageQueue: [],
+      });
+
+      const { lastFrame } = renderComposer(uiState);
+
+      // The component should render but return null for empty queue
+      // This test verifies that the component receives the correct prop
+      const output = lastFrame();
+      expect(output).toContain('InputPrompt'); // Verify basic Composer rendering
+    });
+  });
+
+  describe('Context and Status Display', () => {
+    it('shows ContextSummaryDisplay in normal state', () => {
+      const uiState = createMockUIState({
+        ctrlCPressedOnce: false,
+        ctrlDPressedOnce: false,
+        showEscapePrompt: false,
+      });
+
+      const { lastFrame } = renderComposer(uiState);
+
+      expect(lastFrame()).toContain('ContextSummaryDisplay');
+    });
+
+    it('shows Ctrl+C exit prompt when ctrlCPressedOnce is true', () => {
+      const uiState = createMockUIState({
+        ctrlCPressedOnce: true,
+      });
+
+      const { lastFrame } = renderComposer(uiState);
+
+      expect(lastFrame()).toContain('Press Ctrl+C again to exit');
+    });
+
+    it('shows Ctrl+D exit prompt when ctrlDPressedOnce is true', () => {
+      const uiState = createMockUIState({
+        ctrlDPressedOnce: true,
+      });
+
+      const { lastFrame } = renderComposer(uiState);
+
+      expect(lastFrame()).toContain('Press Ctrl+D again to exit');
+    });
+
+    it('shows escape prompt when showEscapePrompt is true', () => {
+      const uiState = createMockUIState({
+        showEscapePrompt: true,
+      });
+
+      const { lastFrame } = renderComposer(uiState);
+
+      expect(lastFrame()).toContain('Press Esc again to clear');
+    });
+  });
+
+  describe('Input and Indicators', () => {
+    it('renders InputPrompt when input is active', () => {
+      const uiState = createMockUIState({
+        isInputActive: true,
+      });
+
+      const { lastFrame } = renderComposer(uiState);
+
+      expect(lastFrame()).toContain('InputPrompt');
+    });
+
+    it('does not render InputPrompt when input is inactive', () => {
+      const uiState = createMockUIState({
+        isInputActive: false,
+      });
+
+      const { lastFrame } = renderComposer(uiState);
+
+      expect(lastFrame()).not.toContain('InputPrompt');
+    });
+
+    it('shows AutoAcceptIndicator when approval mode is not default and shell mode is inactive', () => {
+      const uiState = createMockUIState({
+        showAutoAcceptIndicator: ApprovalMode.YOLO,
+        shellModeActive: false,
+      });
+
+      const { lastFrame } = renderComposer(uiState);
+
+      expect(lastFrame()).toContain('AutoAcceptIndicator');
+    });
+
+    it('shows ShellModeIndicator when shell mode is active', () => {
+      const uiState = createMockUIState({
+        shellModeActive: true,
+      });
+
+      const { lastFrame } = renderComposer(uiState);
+
+      expect(lastFrame()).toContain('ShellModeIndicator');
+    });
+  });
+
+  describe('Error Details Display', () => {
+    it('shows DetailedMessagesDisplay when showErrorDetails is true', () => {
+      const uiState = createMockUIState({
+        showErrorDetails: true,
+        filteredConsoleMessages: [
+          { level: 'error', message: 'Test error', timestamp: new Date() },
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ] as any,
+      });
+
+      const { lastFrame } = renderComposer(uiState);
+
+      expect(lastFrame()).toContain('DetailedMessagesDisplay');
+      expect(lastFrame()).toContain('ShowMoreLines');
+    });
+
+    it('does not show error details when showErrorDetails is false', () => {
+      const uiState = createMockUIState({
+        showErrorDetails: false,
+      });
+
+      const { lastFrame } = renderComposer(uiState);
+
+      expect(lastFrame()).not.toContain('DetailedMessagesDisplay');
+    });
+  });
+});

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

@@ -0,0 +1,163 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Box, Text, useIsScreenReaderEnabled } from 'ink';
+import { useMemo } from 'react';
+import { LoadingIndicator } from './LoadingIndicator.js';
+import { ContextSummaryDisplay } from './ContextSummaryDisplay.js';
+import { AutoAcceptIndicator } from './AutoAcceptIndicator.js';
+import { ShellModeIndicator } from './ShellModeIndicator.js';
+import { DetailedMessagesDisplay } from './DetailedMessagesDisplay.js';
+import { InputPrompt, calculatePromptWidths } from './InputPrompt.js';
+import { Footer } from './Footer.js';
+import { ShowMoreLines } from './ShowMoreLines.js';
+import { QueuedMessageDisplay } from './QueuedMessageDisplay.js';
+import { OverflowProvider } from '../contexts/OverflowContext.js';
+import { theme } from '../semantic-colors.js';
+import { isNarrowWidth } from '../utils/isNarrowWidth.js';
+import { useUIState } from '../contexts/UIStateContext.js';
+import { useUIActions } from '../contexts/UIActionsContext.js';
+import { useVimMode } from '../contexts/VimModeContext.js';
+import { useConfig } from '../contexts/ConfigContext.js';
+import { useSettings } from '../contexts/SettingsContext.js';
+import { ApprovalMode } from '@qwen-code/qwen-code-core';
+import { StreamingState } from '../types.js';
+import { ConfigInitDisplay } from '../components/ConfigInitDisplay.js';
+
+export const Composer = () => {
+  const config = useConfig();
+  const settings = useSettings();
+  const isScreenReaderEnabled = useIsScreenReaderEnabled();
+  const uiState = useUIState();
+  const uiActions = useUIActions();
+  const { vimEnabled } = useVimMode();
+  const terminalWidth = process.stdout.columns;
+  const isNarrow = isNarrowWidth(terminalWidth);
+  const debugConsoleMaxHeight = Math.floor(Math.max(terminalWidth * 0.2, 5));
+
+  const { contextFileNames, showAutoAcceptIndicator } = uiState;
+
+  // Use the container width of InputPrompt for width of DetailedMessagesDisplay
+  const { containerWidth } = useMemo(
+    () => calculatePromptWidths(uiState.terminalWidth),
+    [uiState.terminalWidth],
+  );
+
+  return (
+    <Box flexDirection="column">
+      {!uiState.embeddedShellFocused && (
+        <LoadingIndicator
+          thought={
+            uiState.streamingState === StreamingState.WaitingForConfirmation ||
+            config.getAccessibility()?.disableLoadingPhrases
+              ? undefined
+              : uiState.thought
+          }
+          currentLoadingPhrase={
+            config.getAccessibility()?.disableLoadingPhrases
+              ? undefined
+              : uiState.currentLoadingPhrase
+          }
+          elapsedTime={uiState.elapsedTime}
+        />
+      )}
+
+      {!uiState.isConfigInitialized && <ConfigInitDisplay />}
+
+      <QueuedMessageDisplay messageQueue={uiState.messageQueue} />
+
+      <Box
+        marginTop={1}
+        justifyContent={
+          settings.merged.ui?.hideContextSummary
+            ? 'flex-start'
+            : 'space-between'
+        }
+        width="100%"
+        flexDirection={isNarrow ? 'column' : 'row'}
+        alignItems={isNarrow ? 'flex-start' : 'center'}
+      >
+        <Box marginRight={1}>
+          {process.env['GEMINI_SYSTEM_MD'] && (
+            <Text color={theme.status.error}>|⌐■_■| </Text>
+          )}
+          {uiState.ctrlCPressedOnce ? (
+            <Text color={theme.status.warning}>
+              Press Ctrl+C again to exit.
+            </Text>
+          ) : uiState.ctrlDPressedOnce ? (
+            <Text color={theme.status.warning}>
+              Press Ctrl+D again to exit.
+            </Text>
+          ) : uiState.showEscapePrompt ? (
+            <Text color={theme.text.secondary}>Press Esc again to clear.</Text>
+          ) : (
+            !settings.merged.ui?.hideContextSummary && (
+              <ContextSummaryDisplay
+                ideContext={uiState.ideContextState}
+                geminiMdFileCount={uiState.geminiMdFileCount}
+                contextFileNames={contextFileNames}
+                mcpServers={config.getMcpServers()}
+                blockedMcpServers={config.getBlockedMcpServers()}
+                showToolDescriptions={uiState.showToolDescriptions}
+              />
+            )
+          )}
+        </Box>
+        <Box paddingTop={isNarrow ? 1 : 0}>
+          {showAutoAcceptIndicator !== ApprovalMode.DEFAULT &&
+            !uiState.shellModeActive && (
+              <AutoAcceptIndicator approvalMode={showAutoAcceptIndicator} />
+            )}
+          {uiState.shellModeActive && <ShellModeIndicator />}
+        </Box>
+      </Box>
+
+      {uiState.showErrorDetails && (
+        <OverflowProvider>
+          <Box flexDirection="column">
+            <DetailedMessagesDisplay
+              messages={uiState.filteredConsoleMessages}
+              maxHeight={
+                uiState.constrainHeight ? debugConsoleMaxHeight : undefined
+              }
+              width={containerWidth}
+            />
+            <ShowMoreLines constrainHeight={uiState.constrainHeight} />
+          </Box>
+        </OverflowProvider>
+      )}
+
+      {uiState.isInputActive && (
+        <InputPrompt
+          buffer={uiState.buffer}
+          inputWidth={uiState.inputWidth}
+          suggestionsWidth={uiState.suggestionsWidth}
+          onSubmit={uiActions.handleFinalSubmit}
+          userMessages={uiState.userMessages}
+          onClearScreen={uiActions.handleClearScreen}
+          config={config}
+          slashCommands={uiState.slashCommands}
+          commandContext={uiState.commandContext}
+          shellModeActive={uiState.shellModeActive}
+          setShellModeActive={uiActions.setShellModeActive}
+          approvalMode={showAutoAcceptIndicator}
+          onEscapePromptChange={uiActions.onEscapePromptChange}
+          focus={true}
+          vimHandleInput={uiActions.vimHandleInput}
+          isEmbeddedShellFocused={uiState.embeddedShellFocused}
+          placeholder={
+            vimEnabled
+              ? "  Press 'i' for INSERT mode and 'Esc' for NORMAL mode."
+              : '  Type your message or @path/to/file'
+          }
+        />
+      )}
+
+      {!settings.merged.ui?.hideFooter && !isScreenReaderEnabled && <Footer />}
+    </Box>
+  );
+};

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

@@ -0,0 +1,47 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { useEffect, useState } from 'react';
+import { appEvents } from './../../utils/events.js';
+import { Box, Text } from 'ink';
+import { useConfig } from '../contexts/ConfigContext.js';
+import { type McpClient, MCPServerStatus } from '@qwen-code/qwen-code-core';
+import { GeminiSpinner } from './GeminiRespondingSpinner.js';
+import { theme } from '../semantic-colors.js';
+
+export const ConfigInitDisplay = () => {
+  const config = useConfig();
+  const [message, setMessage] = useState('Initializing...');
+
+  useEffect(() => {
+    const onChange = (clients?: Map<string, McpClient>) => {
+      if (!clients || clients.size === 0) {
+        setMessage(`Initializing...`);
+        return;
+      }
+      let connected = 0;
+      for (const client of clients.values()) {
+        if (client.getStatus() === MCPServerStatus.CONNECTED) {
+          connected++;
+        }
+      }
+      setMessage(`Connecting to MCP servers... (${connected}/${clients.size})`);
+    };
+
+    appEvents.on('mcp-client-update', onChange);
+    return () => {
+      appEvents.off('mcp-client-update', onChange);
+    };
+  }, [config]);
+
+  return (
+    <Box marginTop={1}>
+      <Text>
+        <GeminiSpinner /> <Text color={theme.text.primary}>{message}</Text>
+      </Text>
+    </Box>
+  );
+};

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

@@ -0,0 +1,119 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Text } from 'ink';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render } from 'ink-testing-library';
+import { ConsentPrompt } from './ConsentPrompt.js';
+import { RadioButtonSelect } from './shared/RadioButtonSelect.js';
+import { MarkdownDisplay } from '../utils/MarkdownDisplay.js';
+
+vi.mock('./shared/RadioButtonSelect.js', () => ({
+  RadioButtonSelect: vi.fn(() => null),
+}));
+
+vi.mock('../utils/MarkdownDisplay.js', () => ({
+  MarkdownDisplay: vi.fn(() => null),
+}));
+
+const MockedRadioButtonSelect = vi.mocked(RadioButtonSelect);
+const MockedMarkdownDisplay = vi.mocked(MarkdownDisplay);
+
+describe('ConsentPrompt', () => {
+  const onConfirm = vi.fn();
+  const terminalWidth = 80;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders a string prompt with MarkdownDisplay', () => {
+    const prompt = 'Are you sure?';
+    render(
+      <ConsentPrompt
+        prompt={prompt}
+        onConfirm={onConfirm}
+        terminalWidth={terminalWidth}
+      />,
+    );
+
+    expect(MockedMarkdownDisplay).toHaveBeenCalledWith(
+      {
+        isPending: true,
+        text: prompt,
+        terminalWidth,
+      },
+      undefined,
+    );
+  });
+
+  it('renders a ReactNode prompt directly', () => {
+    const prompt = <Text>Are you sure?</Text>;
+    const { lastFrame } = render(
+      <ConsentPrompt
+        prompt={prompt}
+        onConfirm={onConfirm}
+        terminalWidth={terminalWidth}
+      />,
+    );
+
+    expect(MockedMarkdownDisplay).not.toHaveBeenCalled();
+    expect(lastFrame()).toContain('Are you sure?');
+  });
+
+  it('calls onConfirm with true when "Yes" is selected', () => {
+    const prompt = 'Are you sure?';
+    render(
+      <ConsentPrompt
+        prompt={prompt}
+        onConfirm={onConfirm}
+        terminalWidth={terminalWidth}
+      />,
+    );
+
+    const onSelect = MockedRadioButtonSelect.mock.calls[0][0].onSelect;
+    onSelect(true);
+
+    expect(onConfirm).toHaveBeenCalledWith(true);
+  });
+
+  it('calls onConfirm with false when "No" is selected', () => {
+    const prompt = 'Are you sure?';
+    render(
+      <ConsentPrompt
+        prompt={prompt}
+        onConfirm={onConfirm}
+        terminalWidth={terminalWidth}
+      />,
+    );
+
+    const onSelect = MockedRadioButtonSelect.mock.calls[0][0].onSelect;
+    onSelect(false);
+
+    expect(onConfirm).toHaveBeenCalledWith(false);
+  });
+
+  it('passes correct items to RadioButtonSelect', () => {
+    const prompt = 'Are you sure?';
+    render(
+      <ConsentPrompt
+        prompt={prompt}
+        onConfirm={onConfirm}
+        terminalWidth={terminalWidth}
+      />,
+    );
+
+    expect(MockedRadioButtonSelect).toHaveBeenCalledWith(
+      expect.objectContaining({
+        items: [
+          { label: 'Yes', value: true, key: 'Yes' },
+          { label: 'No', value: false, key: 'No' },
+        ],
+      }),
+      undefined,
+    );
+  });
+});

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

@@ -0,0 +1,51 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Box } from 'ink';
+import { type ReactNode } from 'react';
+import { theme } from '../semantic-colors.js';
+import { MarkdownDisplay } from '../utils/MarkdownDisplay.js';
+import { RadioButtonSelect } from './shared/RadioButtonSelect.js';
+
+type ConsentPromptProps = {
+  // If a simple string is given, it will render using markdown by default.
+  prompt: ReactNode;
+  onConfirm: (value: boolean) => void;
+  terminalWidth: number;
+};
+
+export const ConsentPrompt = (props: ConsentPromptProps) => {
+  const { prompt, onConfirm, terminalWidth } = props;
+
+  return (
+    <Box
+      borderStyle="round"
+      borderColor={theme.border.default}
+      flexDirection="column"
+      paddingY={1}
+      paddingX={2}
+    >
+      {typeof prompt === 'string' ? (
+        <MarkdownDisplay
+          isPending={true}
+          text={prompt}
+          terminalWidth={terminalWidth}
+        />
+      ) : (
+        prompt
+      )}
+      <Box marginTop={1}>
+        <RadioButtonSelect
+          items={[
+            { label: 'Yes', value: true, key: 'Yes' },
+            { label: 'No', value: false, key: 'No' },
+          ]}
+          onSelect={onConfirm}
+        />
+      </Box>
+    </Box>
+  );
+};

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

@@ -6,7 +6,7 @@
 
 import type React from 'react';
 import { Box, Text } from 'ink';
-import { Colors } from '../colors.js';
+import { theme } from '../semantic-colors.js';
 
 interface ConsoleSummaryDisplayProps {
   errorCount: number;
@@ -25,9 +25,9 @@ export const ConsoleSummaryDisplay: React.FC<ConsoleSummaryDisplayProps> = ({
   return (
     <Box>
       {errorCount > 0 && (
-        <Text color={Colors.AccentRed}>
+        <Text color={theme.status.error}>
           {errorIcon} {errorCount} error{errorCount > 1 ? 's' : ''}{' '}
-          <Text color={Colors.Gray}>(ctrl+o for details)</Text>
+          <Text color={theme.text.secondary}>(ctrl+o for details)</Text>
         </Text>
       )}
     </Box>

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

@@ -6,7 +6,7 @@
 
 import type React from 'react';
 import { Box, Text } from 'ink';
-import { Colors } from '../colors.js';
+import { theme } from '../semantic-colors.js';
 import {
   type IdeContext,
   type MCPServerConfig,
@@ -102,9 +102,9 @@ export const ContextSummaryDisplay: React.FC<ContextSummaryDisplayProps> = ({
   if (isNarrow) {
     return (
       <Box flexDirection="column">
-        <Text color={Colors.Gray}>Using:</Text>
+        <Text color={theme.text.secondary}>Using:</Text>
         {summaryParts.map((part, index) => (
-          <Text key={index} color={Colors.Gray}>
+          <Text key={index} color={theme.text.secondary}>
             {'  '}- {part}
           </Text>
         ))}
@@ -114,7 +114,9 @@ export const ContextSummaryDisplay: React.FC<ContextSummaryDisplayProps> = ({
 
   return (
     <Box>
-      <Text color={Colors.Gray}>Using: {summaryParts.join(' | ')}</Text>
+      <Text color={theme.text.secondary}>
+        Using: {summaryParts.join(' | ')}
+      </Text>
     </Box>
   );
 };

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

@@ -5,21 +5,27 @@
  */
 
 import { Text } from 'ink';
-import { Colors } from '../colors.js';
+import { theme } from '../semantic-colors.js';
 import { tokenLimit } from '@qwen-code/qwen-code-core';
 
 export const ContextUsageDisplay = ({
   promptTokenCount,
   model,
+  terminalWidth,
 }: {
   promptTokenCount: number;
   model: string;
+  terminalWidth: number;
 }) => {
   const percentage = promptTokenCount / tokenLimit(model);
+  const percentageLeft = ((1 - percentage) * 100).toFixed(0);
+
+  const label = terminalWidth < 100 ? '%' : '% context left';
 
   return (
-    <Text color={Colors.Gray}>
-      ({((1 - percentage) * 100).toFixed(0)}% context left)
+    <Text color={theme.text.secondary}>
+      ({percentageLeft}
+      {label})
     </Text>
   );
 };

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

@@ -6,7 +6,7 @@
 
 import { Text } from 'ink';
 import { useEffect, useRef, useState } from 'react';
-import { Colors } from '../colors.js';
+import { theme } from '../semantic-colors.js';
 import { useKeypress } from '../hooks/useKeypress.js';
 
 export const DebugProfiler = () => {
@@ -31,6 +31,6 @@ export const DebugProfiler = () => {
   }
 
   return (
-    <Text color={Colors.AccentYellow}>Renders: {numRenders.current} </Text>
+    <Text color={theme.status.warning}>Renders: {numRenders.current} </Text>
   );
 };

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

@@ -6,7 +6,7 @@
 
 import type React from 'react';
 import { Box, Text } from 'ink';
-import { Colors } from '../colors.js';
+import { theme } from '../semantic-colors.js';
 import type { ConsoleMessageItem } from '../types.js';
 import { MaxSizedBox } from './shared/MaxSizedBox.js';
 
@@ -31,31 +31,32 @@ export const DetailedMessagesDisplay: React.FC<
       flexDirection="column"
       marginTop={1}
       borderStyle="round"
-      borderColor={Colors.Gray}
+      borderColor={theme.border.default}
       paddingX={1}
       width={width}
     >
       <Box marginBottom={1}>
-        <Text bold color={Colors.Foreground}>
-          Debug Console <Text color={Colors.Gray}>(ctrl+o to close)</Text>
+        <Text bold color={theme.text.primary}>
+          Debug Console{' '}
+          <Text color={theme.text.secondary}>(ctrl+o to close)</Text>
         </Text>
       </Box>
       <MaxSizedBox maxHeight={maxHeight} maxWidth={width - borderAndPadding}>
         {messages.map((msg, index) => {
-          let textColor = Colors.Foreground;
+          let textColor = theme.text.primary;
           let icon = '\u2139'; // Information source (ℹ)
 
           switch (msg.type) {
             case 'warn':
-              textColor = Colors.AccentYellow;
+              textColor = theme.status.warning;
               icon = '\u26A0'; // Warning sign (⚠)
               break;
             case 'error':
-              textColor = Colors.AccentRed;
+              textColor = theme.status.error;
               icon = '\u2716'; // Heavy multiplication x (✖)
               break;
             case 'debug':
-              textColor = Colors.Gray; // Or Colors.Gray
+              textColor = theme.text.secondary; // Or theme.text.secondary
               icon = '\u{1F50D}'; // Left-pointing magnifying glass (🔍)
               break;
             case 'log':
@@ -70,7 +71,7 @@ export const DetailedMessagesDisplay: React.FC<
               <Text color={textColor} wrap="wrap">
                 {msg.content}
                 {msg.count && msg.count > 1 && (
-                  <Text color={Colors.Gray}> (x{msg.count})</Text>
+                  <Text color={theme.text.secondary}> (x{msg.count})</Text>
                 )}
               </Text>
             </Box>

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

@@ -0,0 +1,271 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Box, Text } from 'ink';
+import { IdeIntegrationNudge } from '../IdeIntegrationNudge.js';
+import { LoopDetectionConfirmation } from './LoopDetectionConfirmation.js';
+import { FolderTrustDialog } from './FolderTrustDialog.js';
+import { ShellConfirmationDialog } from './ShellConfirmationDialog.js';
+import { ConsentPrompt } from './ConsentPrompt.js';
+import { ThemeDialog } from './ThemeDialog.js';
+import { SettingsDialog } from './SettingsDialog.js';
+import { AuthInProgress } from '../auth/AuthInProgress.js';
+import { QwenOAuthProgress } from './QwenOAuthProgress.js';
+import { AuthDialog } from '../auth/AuthDialog.js';
+import { EditorSettingsDialog } from './EditorSettingsDialog.js';
+import { WorkspaceMigrationDialog } from './WorkspaceMigrationDialog.js';
+import { ProQuotaDialog } from './ProQuotaDialog.js';
+import { PermissionsModifyTrustDialog } from './PermissionsModifyTrustDialog.js';
+import { ModelDialog } from './ModelDialog.js';
+import { theme } from '../semantic-colors.js';
+import { useUIState } from '../contexts/UIStateContext.js';
+import { useUIActions } from '../contexts/UIActionsContext.js';
+import { useConfig } from '../contexts/ConfigContext.js';
+import { useSettings } from '../contexts/SettingsContext.js';
+import process from 'node:process';
+import { type UseHistoryManagerReturn } from '../hooks/useHistoryManager.js';
+import { IdeTrustChangeDialog } from './IdeTrustChangeDialog.js';
+import { WelcomeBackDialog } from './WelcomeBackDialog.js';
+import { ModelSwitchDialog } from './ModelSwitchDialog.js';
+import { AgentCreationWizard } from './subagents/create/AgentCreationWizard.js';
+import { AgentsManagerDialog } from './subagents/manage/AgentsManagerDialog.js';
+import {
+  QuitConfirmationDialog,
+  QuitChoice,
+} from './QuitConfirmationDialog.js';
+
+interface DialogManagerProps {
+  addItem: UseHistoryManagerReturn['addItem'];
+  terminalWidth: number;
+}
+
+// Props for DialogManager
+export const DialogManager = ({
+  addItem,
+  terminalWidth,
+}: DialogManagerProps) => {
+  const config = useConfig();
+  const settings = useSettings();
+
+  const uiState = useUIState();
+  const uiActions = useUIActions();
+  const { constrainHeight, terminalHeight, staticExtraHeight, mainAreaWidth } =
+    uiState;
+
+  if (uiState.showWelcomeBackDialog && uiState.welcomeBackInfo?.hasHistory) {
+    return (
+      <WelcomeBackDialog
+        welcomeBackInfo={uiState.welcomeBackInfo}
+        onSelect={uiActions.handleWelcomeBackSelection}
+        onClose={uiActions.handleWelcomeBackClose}
+      />
+    );
+  }
+  if (uiState.showIdeRestartPrompt) {
+    return <IdeTrustChangeDialog reason={uiState.ideTrustRestartReason} />;
+  }
+  if (uiState.showWorkspaceMigrationDialog) {
+    return (
+      <WorkspaceMigrationDialog
+        workspaceExtensions={uiState.workspaceExtensions}
+        onOpen={uiActions.onWorkspaceMigrationDialogOpen}
+        onClose={uiActions.onWorkspaceMigrationDialogClose}
+      />
+    );
+  }
+  if (uiState.proQuotaRequest) {
+    return (
+      <ProQuotaDialog
+        failedModel={uiState.proQuotaRequest.failedModel}
+        fallbackModel={uiState.proQuotaRequest.fallbackModel}
+        onChoice={uiActions.handleProQuotaChoice}
+      />
+    );
+  }
+  if (uiState.shouldShowIdePrompt) {
+    return (
+      <IdeIntegrationNudge
+        ide={uiState.currentIDE!}
+        onComplete={uiActions.handleIdePromptComplete}
+      />
+    );
+  }
+  if (uiState.isFolderTrustDialogOpen) {
+    return (
+      <FolderTrustDialog
+        onSelect={uiActions.handleFolderTrustSelect}
+        isRestarting={uiState.isRestarting}
+      />
+    );
+  }
+  if (uiState.shellConfirmationRequest) {
+    return (
+      <ShellConfirmationDialog request={uiState.shellConfirmationRequest} />
+    );
+  }
+  if (uiState.loopDetectionConfirmationRequest) {
+    return (
+      <LoopDetectionConfirmation
+        onComplete={uiState.loopDetectionConfirmationRequest.onComplete}
+      />
+    );
+  }
+  if (uiState.quitConfirmationRequest) {
+    return (
+      <QuitConfirmationDialog
+        onSelect={(choice: QuitChoice) => {
+          if (choice === QuitChoice.CANCEL) {
+            uiState.quitConfirmationRequest?.onConfirm(false, 'cancel');
+          } else if (choice === QuitChoice.QUIT) {
+            uiState.quitConfirmationRequest?.onConfirm(true, 'quit');
+          } else if (choice === QuitChoice.SAVE_AND_QUIT) {
+            uiState.quitConfirmationRequest?.onConfirm(true, 'save_and_quit');
+          } else if (choice === QuitChoice.SUMMARY_AND_QUIT) {
+            uiState.quitConfirmationRequest?.onConfirm(
+              true,
+              'summary_and_quit',
+            );
+          }
+        }}
+      />
+    );
+  }
+  if (uiState.confirmationRequest) {
+    return (
+      <ConsentPrompt
+        prompt={uiState.confirmationRequest.prompt}
+        onConfirm={uiState.confirmationRequest.onConfirm}
+        terminalWidth={terminalWidth}
+      />
+    );
+  }
+  if (uiState.confirmUpdateExtensionRequests.length > 0) {
+    const request = uiState.confirmUpdateExtensionRequests[0];
+    return (
+      <ConsentPrompt
+        prompt={request.prompt}
+        onConfirm={request.onConfirm}
+        terminalWidth={terminalWidth}
+      />
+    );
+  }
+  if (uiState.isThemeDialogOpen) {
+    return (
+      <Box flexDirection="column">
+        {uiState.themeError && (
+          <Box marginBottom={1}>
+            <Text color={theme.status.error}>{uiState.themeError}</Text>
+          </Box>
+        )}
+        <ThemeDialog
+          onSelect={uiActions.handleThemeSelect}
+          onHighlight={uiActions.handleThemeHighlight}
+          settings={settings}
+          availableTerminalHeight={
+            constrainHeight ? terminalHeight - staticExtraHeight : undefined
+          }
+          terminalWidth={mainAreaWidth}
+        />
+      </Box>
+    );
+  }
+  if (uiState.isSettingsDialogOpen) {
+    return (
+      <Box flexDirection="column">
+        <SettingsDialog
+          settings={settings}
+          onSelect={() => uiActions.closeSettingsDialog()}
+          onRestartRequest={() => process.exit(0)}
+          availableTerminalHeight={terminalHeight - staticExtraHeight}
+        />
+      </Box>
+    );
+  }
+  if (uiState.isModelDialogOpen) {
+    return <ModelDialog onClose={uiActions.closeModelDialog} />;
+  }
+  if (uiState.isVisionSwitchDialogOpen) {
+    return <ModelSwitchDialog onSelect={uiActions.handleVisionSwitchSelect} />;
+  }
+  if (uiState.isAuthenticating) {
+    // Show Qwen OAuth progress if it's Qwen auth and OAuth is active
+    if (uiState.isQwenAuth && uiState.isQwenAuthenticating) {
+      return (
+        <QwenOAuthProgress
+          deviceAuth={uiState.deviceAuth || undefined}
+          authStatus={uiState.authStatus}
+          authMessage={uiState.authMessage}
+          onTimeout={uiActions.handleQwenAuthTimeout}
+          onCancel={uiActions.handleQwenAuthCancel}
+        />
+      );
+    }
+
+    // Default auth progress for other auth types
+    return (
+      <AuthInProgress
+        onTimeout={() => {
+          uiActions.onAuthError('Authentication cancelled.');
+        }}
+      />
+    );
+  }
+  if (uiState.isAuthDialogOpen) {
+    return (
+      <Box flexDirection="column">
+        <AuthDialog
+          onSelect={uiActions.handleAuthSelect}
+          settings={settings}
+          initialErrorMessage={uiState.authError}
+        />
+      </Box>
+    );
+  }
+  if (uiState.isEditorDialogOpen) {
+    return (
+      <Box flexDirection="column">
+        {uiState.editorError && (
+          <Box marginBottom={1}>
+            <Text color={theme.status.error}>{uiState.editorError}</Text>
+          </Box>
+        )}
+        <EditorSettingsDialog
+          onSelect={uiActions.handleEditorSelect}
+          settings={settings}
+          onExit={uiActions.exitEditorDialog}
+        />
+      </Box>
+    );
+  }
+  if (uiState.isPermissionsDialogOpen) {
+    return (
+      <PermissionsModifyTrustDialog
+        onExit={uiActions.closePermissionsDialog}
+        addItem={addItem}
+      />
+    );
+  }
+
+  if (uiState.isSubagentCreateDialogOpen) {
+    return (
+      <AgentCreationWizard
+        onClose={uiActions.closeSubagentCreateDialog}
+        config={config}
+      />
+    );
+  }
+
+  if (uiState.isAgentsManagerDialogOpen) {
+    return (
+      <AgentsManagerDialog
+        onClose={uiActions.closeAgentsManagerDialog}
+        config={config}
+      />
+    );
+  }
+
+  return null;
+};

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

@@ -7,7 +7,7 @@
 import type React from 'react';
 import { useState } from 'react';
 import { Box, Text } from 'ink';
-import { Colors } from '../colors.js';
+import { theme } from '../semantic-colors.js';
 import {
   EDITOR_DISPLAY_NAMES,
   editorSettingsManager,
@@ -65,8 +65,16 @@ export function EditorSettingsDialog({
   }
 
   const scopeItems = [
-    { label: 'User Settings', value: SettingScope.User },
-    { label: 'Workspace Settings', value: SettingScope.Workspace },
+    {
+      label: 'User Settings',
+      value: SettingScope.User,
+      key: SettingScope.User,
+    },
+    {
+      label: 'Workspace Settings',
+      value: SettingScope.Workspace,
+      key: SettingScope.Workspace,
+    },
   ];
 
   const handleEditorSelect = (editorType: EditorType | 'not_set') => {
@@ -112,7 +120,7 @@ export function EditorSettingsDialog({
   return (
     <Box
       borderStyle="round"
-      borderColor={Colors.Gray}
+      borderColor={theme.border.default}
       flexDirection="row"
       padding={1}
       width="100%"
@@ -120,13 +128,14 @@ export function EditorSettingsDialog({
       <Box flexDirection="column" width="45%" paddingRight={2}>
         <Text bold={focusedSection === 'editor'}>
           {focusedSection === 'editor' ? '> ' : '  '}Select Editor{' '}
-          <Text color={Colors.Gray}>{otherScopeModifiedMessage}</Text>
+          <Text color={theme.text.secondary}>{otherScopeModifiedMessage}</Text>
         </Text>
         <RadioButtonSelect
           items={editorItems.map((item) => ({
             label: item.name,
             value: item.type,
             disabled: item.disabled,
+            key: item.type,
           }))}
           initialIndex={editorIndex}
           onSelect={handleEditorSelect}
@@ -147,26 +156,28 @@ export function EditorSettingsDialog({
         </Box>
 
         <Box marginTop={1}>
-          <Text color={Colors.Gray}>
+          <Text color={theme.text.secondary}>
             (Use Enter to select, Tab to change focus)
           </Text>
         </Box>
       </Box>
 
       <Box flexDirection="column" width="55%" paddingLeft={2}>
-        <Text bold>Editor Preference</Text>
+        <Text bold color={theme.text.primary}>
+          Editor Preference
+        </Text>
         <Box flexDirection="column" gap={1} marginTop={1}>
-          <Text color={Colors.Gray}>
+          <Text color={theme.text.secondary}>
             These editors are currently supported. Please note that some editors
             cannot be used in sandbox mode.
           </Text>
-          <Text color={Colors.Gray}>
+          <Text color={theme.text.secondary}>
             Your preferred editor is:{' '}
             <Text
               color={
                 mergedEditorName === 'None'
-                  ? Colors.AccentRed
-                  : Colors.AccentCyan
+                  ? theme.status.error
+                  : theme.text.link
               }
               bold
             >

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

@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type React from 'react';
+import { Box, Text } from 'ink';
+import { useUIState } from '../contexts/UIStateContext.js';
+import { theme } from '../semantic-colors.js';
+
+export const ExitWarning: React.FC = () => {
+  const uiState = useUIState();
+  return (
+    <>
+      {uiState.dialogsVisible && uiState.ctrlCPressedOnce && (
+        <Box marginTop={1}>
+          <Text color={theme.status.warning}>Press Ctrl+C again to exit.</Text>
+        </Box>
+      )}
+
+      {uiState.dialogsVisible && uiState.ctrlDPressedOnce && (
+        <Box marginTop={1}>
+          <Text color={theme.status.warning}>Press Ctrl+D again to exit.</Text>
+        </Box>
+      )}
+    </>
+  );
+};

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

@@ -8,19 +8,29 @@ import { renderWithProviders } from '../../test-utils/render.js';
 import { waitFor } from '@testing-library/react';
 import { vi } from 'vitest';
 import { FolderTrustDialog, FolderTrustChoice } from './FolderTrustDialog.js';
-import * as process from 'node:process';
+import * as processUtils from '../../utils/processUtils.js';
 
-vi.mock('process', async () => {
-  const actual = await vi.importActual('process');
+vi.mock('../../utils/processUtils.js', () => ({
+  relaunchApp: vi.fn(),
+}));
+
+const mockedExit = vi.hoisted(() => vi.fn());
+const mockedCwd = vi.hoisted(() => vi.fn());
+
+vi.mock('node:process', async () => {
+  const actual =
+    await vi.importActual<typeof import('node:process')>('node:process');
   return {
     ...actual,
-    exit: vi.fn(),
+    exit: mockedExit,
+    cwd: mockedCwd,
   };
 });
 
 describe('FolderTrustDialog', () => {
   beforeEach(() => {
     vi.clearAllMocks();
+    mockedCwd.mockReturnValue('/home/user/project');
   });
 
   it('should render the dialog with title and description', () => {
@@ -65,21 +75,18 @@ describe('FolderTrustDialog', () => {
       <FolderTrustDialog onSelect={vi.fn()} isRestarting={true} />,
     );
 
-    expect(lastFrame()).toContain(
-      'To see changes, Qwen Code must be restarted',
-    );
+    expect(lastFrame()).toContain(' Qwen Code is restarting');
   });
 
-  it('should call process.exit when "r" is pressed and isRestarting is true', async () => {
-    const { stdin } = renderWithProviders(
+  it('should call relaunchApp when isRestarting is true', async () => {
+    vi.useFakeTimers();
+    const relaunchApp = vi.spyOn(processUtils, 'relaunchApp');
+    renderWithProviders(
       <FolderTrustDialog onSelect={vi.fn()} isRestarting={true} />,
     );
-
-    stdin.write('r');
-
-    await waitFor(() => {
-      expect(process.exit).toHaveBeenCalledWith(0);
-    });
+    await vi.advanceTimersByTimeAsync(1000);
+    expect(relaunchApp).toHaveBeenCalled();
+    vi.useRealTimers();
   });
 
   it('should not call process.exit when "r" is pressed and isRestarting is false', async () => {
@@ -90,7 +97,33 @@ describe('FolderTrustDialog', () => {
     stdin.write('r');
 
     await waitFor(() => {
-      expect(process.exit).not.toHaveBeenCalled();
+      expect(mockedExit).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('directory display', () => {
+    it('should correctly display the folder name for a nested directory', () => {
+      mockedCwd.mockReturnValue('/home/user/project');
+      const { lastFrame } = renderWithProviders(
+        <FolderTrustDialog onSelect={vi.fn()} />,
+      );
+      expect(lastFrame()).toContain('Trust folder (project)');
+    });
+
+    it('should correctly display the parent folder name for a nested directory', () => {
+      mockedCwd.mockReturnValue('/home/user/project');
+      const { lastFrame } = renderWithProviders(
+        <FolderTrustDialog onSelect={vi.fn()} />,
+      );
+      expect(lastFrame()).toContain('Trust parent folder (user)');
+    });
+
+    it('should correctly display an empty parent folder name for a directory directly under root', () => {
+      mockedCwd.mockReturnValue('/project');
+      const { lastFrame } = renderWithProviders(
+        <FolderTrustDialog onSelect={vi.fn()} />,
+      );
+      expect(lastFrame()).toContain('Trust parent folder ()');
     });
   });
 });

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

@@ -6,11 +6,14 @@
 
 import { Box, Text } from 'ink';
 import type React from 'react';
-import { Colors } from '../colors.js';
+import { useEffect } from 'react';
+import { theme } from '../semantic-colors.js';
 import type { RadioSelectItem } from './shared/RadioButtonSelect.js';
 import { RadioButtonSelect } from './shared/RadioButtonSelect.js';
 import { useKeypress } from '../hooks/useKeypress.js';
 import * as process from 'node:process';
+import * as path from 'node:path';
+import { relaunchApp } from '../../utils/processUtils.js';
 
 export enum FolderTrustChoice {
   TRUST_FOLDER = 'trust_folder',
@@ -27,6 +30,17 @@ export const FolderTrustDialog: React.FC<FolderTrustDialogProps> = ({
   onSelect,
   isRestarting,
 }) => {
+  useEffect(() => {
+    const doRelaunch = async () => {
+      if (isRestarting) {
+        setTimeout(async () => {
+          await relaunchApp();
+        }, 250);
+      }
+    };
+    doRelaunch();
+  }, [isRestarting]);
+
   useKeypress(
     (key) => {
       if (key.name === 'escape') {
@@ -36,27 +50,24 @@ export const FolderTrustDialog: React.FC<FolderTrustDialogProps> = ({
     { isActive: !isRestarting },
   );
 
-  useKeypress(
-    (key) => {
-      if (key.name === 'r') {
-        process.exit(0);
-      }
-    },
-    { isActive: !!isRestarting },
-  );
+  const dirName = path.basename(process.cwd());
+  const parentFolder = path.basename(path.dirname(process.cwd()));
 
   const options: Array<RadioSelectItem<FolderTrustChoice>> = [
     {
-      label: 'Trust folder',
+      label: `Trust folder (${dirName})`,
       value: FolderTrustChoice.TRUST_FOLDER,
+      key: `Trust folder (${dirName})`,
     },
     {
-      label: 'Trust parent folder',
+      label: `Trust parent folder (${parentFolder})`,
       value: FolderTrustChoice.TRUST_PARENT,
+      key: `Trust parent folder (${parentFolder})`,
     },
     {
       label: "Don't trust (esc)",
       value: FolderTrustChoice.DO_NOT_TRUST,
+      key: "Don't trust (esc)",
     },
   ];
 
@@ -65,14 +76,16 @@ export const FolderTrustDialog: React.FC<FolderTrustDialogProps> = ({
       <Box
         flexDirection="column"
         borderStyle="round"
-        borderColor={Colors.AccentYellow}
+        borderColor={theme.status.warning}
         padding={1}
         width="100%"
         marginLeft={1}
       >
         <Box flexDirection="column" marginBottom={1}>
-          <Text bold>Do you trust this folder?</Text>
-          <Text>
+          <Text bold color={theme.text.primary}>
+            Do you trust this folder?
+          </Text>
+          <Text color={theme.text.primary}>
             Trusting a folder allows Qwen Code to execute commands it suggests.
             This is a security feature to prevent accidental execution in
             untrusted directories.
@@ -87,9 +100,8 @@ export const FolderTrustDialog: React.FC<FolderTrustDialogProps> = ({
       </Box>
       {isRestarting && (
         <Box marginLeft={1} marginTop={1}>
-          <Text color={Colors.AccentYellow}>
-            To see changes, Qwen Code must be restarted. Press r to exit and
-            apply changes now.
+          <Text color={theme.status.warning}>
+            Qwen Code is restarting to apply the trust changes...
           </Text>
         </Box>
       )}

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

@@ -9,7 +9,11 @@ import { describe, it, expect, vi } from 'vitest';
 import { Footer } from './Footer.js';
 import * as useTerminalSize from '../hooks/useTerminalSize.js';
 import { tildeifyPath } from '@qwen-code/qwen-code-core';
-import path from 'node:path';
+import { type UIState, UIStateContext } from '../contexts/UIStateContext.js';
+import { ConfigContext } from '../contexts/ConfigContext.js';
+import { SettingsContext } from '../contexts/SettingsContext.js';
+import type { LoadedSettings } from '../../config/settings.js';
+import { VimModeProvider } from '../contexts/VimModeContext.js';
 
 vi.mock('../hooks/useTerminalSize.js');
 const useTerminalSizeMock = vi.mocked(useTerminalSize.useTerminalSize);
@@ -33,92 +37,135 @@ const defaultProps = {
   targetDir:
     '/Users/test/project/foo/bar/and/some/more/directories/to/make/it/long',
   branchName: 'main',
-  debugMode: false,
-  debugMessage: '',
-  corgiMode: false,
-  errorCount: 0,
-  showErrorDetails: false,
-  showMemoryUsage: false,
-  promptTokenCount: 100,
-  nightly: false,
 };
 
-const renderWithWidth = (width: number, props = defaultProps) => {
+const createMockConfig = (overrides = {}) => ({
+  getModel: vi.fn(() => defaultProps.model),
+  getTargetDir: vi.fn(() => defaultProps.targetDir),
+  getDebugMode: vi.fn(() => false),
+  ...overrides,
+});
+
+const createMockUIState = (overrides: Partial<UIState> = {}): UIState =>
+  ({
+    sessionStats: {
+      lastPromptTokenCount: 100,
+    },
+    branchName: defaultProps.branchName,
+    ...overrides,
+  }) as UIState;
+
+const createDefaultSettings = (
+  options: {
+    showMemoryUsage?: boolean;
+    hideCWD?: boolean;
+    hideSandboxStatus?: boolean;
+    hideModelInfo?: boolean;
+  } = {},
+): LoadedSettings =>
+  ({
+    merged: {
+      ui: {
+        showMemoryUsage: options.showMemoryUsage,
+        footer: {
+          hideCWD: options.hideCWD,
+          hideSandboxStatus: options.hideSandboxStatus,
+          hideModelInfo: options.hideModelInfo,
+        },
+      },
+    },
+  }) as never;
+
+const renderWithWidth = (
+  width: number,
+  uiState: UIState,
+  settings: LoadedSettings = createDefaultSettings(),
+) => {
   useTerminalSizeMock.mockReturnValue({ columns: width, rows: 24 });
-  return render(<Footer {...props} />);
+  return render(
+    <ConfigContext.Provider value={createMockConfig() as never}>
+      <SettingsContext.Provider value={settings}>
+        <VimModeProvider settings={settings}>
+          <UIStateContext.Provider value={uiState}>
+            <Footer />
+          </UIStateContext.Provider>
+        </VimModeProvider>
+      </SettingsContext.Provider>
+    </ConfigContext.Provider>,
+  );
 };
 
 describe('<Footer />', () => {
   it('renders the component', () => {
-    const { lastFrame } = renderWithWidth(120);
+    const { lastFrame } = renderWithWidth(120, createMockUIState());
     expect(lastFrame()).toBeDefined();
   });
 
   describe('path display', () => {
-    it('should display shortened path on a wide terminal', () => {
-      const { lastFrame } = renderWithWidth(120);
+    it('should display a shortened path on a narrow terminal', () => {
+      const { lastFrame } = renderWithWidth(79, createMockUIState());
       const tildePath = tildeifyPath(defaultProps.targetDir);
-      const expectedPath = '...' + tildePath.slice(tildePath.length - 48 + 3);
-      expect(lastFrame()).toContain(expectedPath);
-    });
-
-    it('should display only the base directory name on a narrow terminal', () => {
-      const { lastFrame } = renderWithWidth(79);
-      const expectedPath = path.basename(defaultProps.targetDir);
+      const pathLength = Math.max(20, Math.floor(79 * 0.25));
+      const expectedPath =
+        '...' + tildePath.slice(tildePath.length - pathLength + 3);
       expect(lastFrame()).toContain(expectedPath);
     });
 
     it('should use wide layout at 80 columns', () => {
-      const { lastFrame } = renderWithWidth(80);
+      const { lastFrame } = renderWithWidth(80, createMockUIState());
       const tildePath = tildeifyPath(defaultProps.targetDir);
-      const expectedPath = '...' + tildePath.slice(tildePath.length - 32 + 3);
+      const expectedPath =
+        '...' + tildePath.slice(tildePath.length - 80 * 0.25 + 3);
       expect(lastFrame()).toContain(expectedPath);
     });
-
-    it('should use narrow layout at 79 columns', () => {
-      const { lastFrame } = renderWithWidth(79);
-      const expectedPath = path.basename(defaultProps.targetDir);
-      expect(lastFrame()).toContain(expectedPath);
-      const tildePath = tildeifyPath(defaultProps.targetDir);
-      const unexpectedPath = '...' + tildePath.slice(tildePath.length - 31 + 3);
-      expect(lastFrame()).not.toContain(unexpectedPath);
-    });
   });
 
   it('displays the branch name when provided', () => {
-    const { lastFrame } = renderWithWidth(120);
+    const { lastFrame } = renderWithWidth(120, createMockUIState());
     expect(lastFrame()).toContain(`(${defaultProps.branchName}*)`);
   });
 
   it('does not display the branch name when not provided', () => {
-    const { lastFrame } = renderWithWidth(120, {
-      ...defaultProps,
-      branchName: undefined,
-    });
+    const { lastFrame } = renderWithWidth(
+      120,
+      createMockUIState({
+        branchName: undefined,
+      }),
+    );
     expect(lastFrame()).not.toContain(`(${defaultProps.branchName}*)`);
   });
 
   it('displays the model name and context percentage', () => {
-    const { lastFrame } = renderWithWidth(120);
+    const { lastFrame } = renderWithWidth(120, createMockUIState());
     expect(lastFrame()).toContain(defaultProps.model);
-    expect(lastFrame()).toMatch(/\(\d+% context[\s\S]*left\)/);
+    expect(lastFrame()).toMatch(/\(\d+% context left\)/);
+  });
+
+  it('displays the model name and abbreviated context percentage', () => {
+    const { lastFrame } = renderWithWidth(99, createMockUIState());
+    expect(lastFrame()).toContain(defaultProps.model);
+    expect(lastFrame()).toMatch(/\(\d+%\)/);
   });
 
   describe('sandbox and trust info', () => {
     it('should display untrusted when isTrustedFolder is false', () => {
-      const { lastFrame } = renderWithWidth(120, {
-        ...defaultProps,
-        isTrustedFolder: false,
-      });
+      const { lastFrame } = renderWithWidth(
+        120,
+        createMockUIState({
+          isTrustedFolder: false,
+        }),
+      );
       expect(lastFrame()).toContain('untrusted');
     });
 
     it('should display custom sandbox info when SANDBOX env is set', () => {
       vi.stubEnv('SANDBOX', 'gemini-cli-test-sandbox');
-      const { lastFrame } = renderWithWidth(120, {
-        ...defaultProps,
-        isTrustedFolder: undefined,
-      });
+      const { lastFrame } = renderWithWidth(
+        120,
+        createMockUIState({
+          isTrustedFolder: undefined,
+        }),
+      );
       expect(lastFrame()).toContain('test');
       vi.unstubAllEnvs();
     });
@@ -126,10 +173,12 @@ describe('<Footer />', () => {
     it('should display macOS Seatbelt info when SANDBOX is sandbox-exec', () => {
       vi.stubEnv('SANDBOX', 'sandbox-exec');
       vi.stubEnv('SEATBELT_PROFILE', 'test-profile');
-      const { lastFrame } = renderWithWidth(120, {
-        ...defaultProps,
-        isTrustedFolder: true,
-      });
+      const { lastFrame } = renderWithWidth(
+        120,
+        createMockUIState({
+          isTrustedFolder: true,
+        }),
+      );
       expect(lastFrame()).toMatch(/macOS Seatbelt.*\(test-profile\)/s);
       vi.unstubAllEnvs();
     });
@@ -137,23 +186,78 @@ describe('<Footer />', () => {
     it('should display "no sandbox" when SANDBOX is not set and folder is trusted', () => {
       // Clear any SANDBOX env var that might be set.
       vi.stubEnv('SANDBOX', '');
-      const { lastFrame } = renderWithWidth(120, {
-        ...defaultProps,
-        isTrustedFolder: true,
-      });
+      const { lastFrame } = renderWithWidth(
+        120,
+        createMockUIState({
+          isTrustedFolder: true,
+        }),
+      );
       expect(lastFrame()).toContain('no sandbox');
       vi.unstubAllEnvs();
     });
 
     it('should prioritize untrusted message over sandbox info', () => {
       vi.stubEnv('SANDBOX', 'gemini-cli-test-sandbox');
-      const { lastFrame } = renderWithWidth(120, {
-        ...defaultProps,
-        isTrustedFolder: false,
-      });
+      const { lastFrame } = renderWithWidth(
+        120,
+        createMockUIState({
+          isTrustedFolder: false,
+        }),
+      );
       expect(lastFrame()).toContain('untrusted');
       expect(lastFrame()).not.toMatch(/test-sandbox/s);
       vi.unstubAllEnvs();
     });
   });
+
+  describe('footer configuration filtering (golden snapshots)', () => {
+    it('renders complete footer with all sections visible (baseline)', () => {
+      const { lastFrame } = renderWithWidth(120, createMockUIState());
+      expect(lastFrame()).toMatchSnapshot('complete-footer-wide');
+    });
+
+    it('renders footer with all optional sections hidden (minimal footer)', () => {
+      const { lastFrame } = renderWithWidth(
+        120,
+        createMockUIState(),
+        createDefaultSettings({
+          hideCWD: true,
+          hideSandboxStatus: true,
+          hideModelInfo: true,
+        }),
+      );
+      expect(lastFrame()).toMatchSnapshot('footer-minimal');
+    });
+
+    it('renders footer with only model info hidden (partial filtering)', () => {
+      const { lastFrame } = renderWithWidth(
+        120,
+        createMockUIState(),
+        createDefaultSettings({
+          hideCWD: false,
+          hideSandboxStatus: false,
+          hideModelInfo: true,
+        }),
+      );
+      expect(lastFrame()).toMatchSnapshot('footer-no-model');
+    });
+
+    it('renders footer with CWD and model info hidden to test alignment (only sandbox visible)', () => {
+      const { lastFrame } = renderWithWidth(
+        120,
+        createMockUIState(),
+        createDefaultSettings({
+          hideCWD: true,
+          hideSandboxStatus: false,
+          hideModelInfo: true,
+        }),
+      );
+      expect(lastFrame()).toMatchSnapshot('footer-only-sandbox');
+    });
+
+    it('renders complete footer in narrow terminal (baseline narrow)', () => {
+      const { lastFrame } = renderWithWidth(79, createMockUIState());
+      expect(lastFrame()).toMatchSnapshot('complete-footer-narrow');
+    });
+  });
 });

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

@@ -10,146 +10,168 @@ import { theme } from '../semantic-colors.js';
 import { shortenPath, tildeifyPath } from '@qwen-code/qwen-code-core';
 import { ConsoleSummaryDisplay } from './ConsoleSummaryDisplay.js';
 import process from 'node:process';
-import path from 'node:path';
 import Gradient from 'ink-gradient';
 import { MemoryUsageDisplay } from './MemoryUsageDisplay.js';
 import { ContextUsageDisplay } from './ContextUsageDisplay.js';
 import { DebugProfiler } from './DebugProfiler.js';
-
 import { useTerminalSize } from '../hooks/useTerminalSize.js';
-import { isNarrowWidth } from '../utils/isNarrowWidth.js';
 
-interface FooterProps {
-  model: string;
-  targetDir: string;
-  branchName?: string;
-  debugMode: boolean;
-  debugMessage: string;
-  corgiMode: boolean;
-  errorCount: number;
-  showErrorDetails: boolean;
-  showMemoryUsage?: boolean;
-  promptTokenCount: number;
-  nightly: boolean;
-  vimMode?: string;
-  isTrustedFolder?: boolean;
-}
+import { useUIState } from '../contexts/UIStateContext.js';
+import { useConfig } from '../contexts/ConfigContext.js';
+import { useSettings } from '../contexts/SettingsContext.js';
+import { useVimMode } from '../contexts/VimModeContext.js';
+
+export const Footer: React.FC = () => {
+  const uiState = useUIState();
+  const config = useConfig();
+  const settings = useSettings();
+  const { vimEnabled, vimMode } = useVimMode();
+
+  const {
+    model,
+    targetDir,
+    debugMode,
+    branchName,
+    debugMessage,
+    corgiMode,
+    errorCount,
+    showErrorDetails,
+    promptTokenCount,
+    nightly,
+    isTrustedFolder,
+  } = {
+    model: config.getModel(),
+    targetDir: config.getTargetDir(),
+    debugMode: config.getDebugMode(),
+    branchName: uiState.branchName,
+    debugMessage: uiState.debugMessage,
+    corgiMode: uiState.corgiMode,
+    errorCount: uiState.errorCount,
+    showErrorDetails: uiState.showErrorDetails,
+    promptTokenCount: uiState.sessionStats.lastPromptTokenCount,
+    nightly: uiState.nightly,
+    isTrustedFolder: uiState.isTrustedFolder,
+  };
+
+  const showMemoryUsage =
+    config.getDebugMode() || settings.merged.ui?.showMemoryUsage || false;
+  const hideCWD = settings.merged.ui?.footer?.hideCWD || false;
+  const hideSandboxStatus =
+    settings.merged.ui?.footer?.hideSandboxStatus || false;
+  const hideModelInfo = settings.merged.ui?.footer?.hideModelInfo || false;
 
-export const Footer: React.FC<FooterProps> = ({
-  model,
-  targetDir,
-  branchName,
-  debugMode,
-  debugMessage,
-  corgiMode,
-  errorCount,
-  showErrorDetails,
-  showMemoryUsage,
-  promptTokenCount,
-  nightly,
-  vimMode,
-  isTrustedFolder,
-}) => {
   const { columns: terminalWidth } = useTerminalSize();
 
-  const isNarrow = isNarrowWidth(terminalWidth);
+  const pathLength = Math.max(20, Math.floor(terminalWidth * 0.25));
+  const displayPath = shortenPath(tildeifyPath(targetDir), pathLength);
 
-  // Adjust path length based on terminal width
-  const pathLength = Math.max(20, Math.floor(terminalWidth * 0.4));
-  const displayPath = isNarrow
-    ? path.basename(tildeifyPath(targetDir))
-    : shortenPath(tildeifyPath(targetDir), pathLength);
+  const justifyContent = hideCWD && hideModelInfo ? 'center' : 'space-between';
+  const displayVimMode = vimEnabled ? vimMode : undefined;
 
   return (
     <Box
-      justifyContent="space-between"
+      justifyContent={justifyContent}
       width="100%"
-      flexDirection={isNarrow ? 'column' : 'row'}
-      alignItems={isNarrow ? 'flex-start' : 'center'}
+      flexDirection="row"
+      alignItems="center"
     >
-      <Box>
-        {debugMode && <DebugProfiler />}
-        {vimMode && <Text color={theme.text.secondary}>[{vimMode}] </Text>}
-        {nightly ? (
-          <Gradient colors={theme.ui.gradient}>
-            <Text>
-              {displayPath}
-              {branchName && <Text> ({branchName}*)</Text>}
+      {(debugMode || displayVimMode || !hideCWD) && (
+        <Box>
+          {debugMode && <DebugProfiler />}
+          {displayVimMode && (
+            <Text color={theme.text.secondary}>[{displayVimMode}] </Text>
+          )}
+          {!hideCWD &&
+            (nightly ? (
+              <Gradient colors={theme.ui.gradient}>
+                <Text>
+                  {displayPath}
+                  {branchName && <Text> ({branchName}*)</Text>}
+                </Text>
+              </Gradient>
+            ) : (
+              <Text color={theme.text.link}>
+                {displayPath}
+                {branchName && (
+                  <Text color={theme.text.secondary}> ({branchName}*)</Text>
+                )}
+              </Text>
+            ))}
+          {debugMode && (
+            <Text color={theme.status.error}>
+              {' ' + (debugMessage || '--debug')}
             </Text>
-          </Gradient>
-        ) : (
-          <Text color={theme.text.link}>
-            {displayPath}
-            {branchName && (
-              <Text color={theme.text.secondary}> ({branchName}*)</Text>
-            )}
-          </Text>
-        )}
-        {debugMode && (
-          <Text color={theme.status.error}>
-            {' ' + (debugMessage || '--debug')}
-          </Text>
-        )}
-      </Box>
+          )}
+        </Box>
+      )}
 
       {/* Middle Section: Centered Trust/Sandbox Info */}
-      <Box
-        flexGrow={isNarrow ? 0 : 1}
-        alignItems="center"
-        justifyContent={isNarrow ? 'flex-start' : 'center'}
-        display="flex"
-        paddingX={isNarrow ? 0 : 1}
-        paddingTop={isNarrow ? 1 : 0}
-      >
-        {isTrustedFolder === false ? (
-          <Text color={theme.status.warning}>untrusted</Text>
-        ) : process.env['SANDBOX'] &&
-          process.env['SANDBOX'] !== 'sandbox-exec' ? (
-          <Text color="green">
-            {process.env['SANDBOX'].replace(/^gemini-(?:cli-)?/, '')}
-          </Text>
-        ) : process.env['SANDBOX'] === 'sandbox-exec' ? (
-          <Text color={theme.status.warning}>
-            macOS Seatbelt{' '}
-            <Text color={theme.text.secondary}>
-              ({process.env['SEATBELT_PROFILE']})
+      {!hideSandboxStatus && (
+        <Box
+          flexGrow={1}
+          alignItems="center"
+          justifyContent="center"
+          display="flex"
+        >
+          {isTrustedFolder === false ? (
+            <Text color={theme.status.warning}>untrusted</Text>
+          ) : process.env['SANDBOX'] &&
+            process.env['SANDBOX'] !== 'sandbox-exec' ? (
+            <Text color="green">
+              {process.env['SANDBOX'].replace(/^gemini-(?:cli-)?/, '')}
             </Text>
-          </Text>
-        ) : (
-          <Text color={theme.status.error}>
-            no sandbox <Text color={theme.text.secondary}>(see /docs)</Text>
-          </Text>
-        )}
-      </Box>
+          ) : process.env['SANDBOX'] === 'sandbox-exec' ? (
+            <Text color={theme.status.warning}>
+              macOS Seatbelt{' '}
+              <Text color={theme.text.secondary}>
+                ({process.env['SEATBELT_PROFILE']})
+              </Text>
+            </Text>
+          ) : (
+            <Text color={theme.status.error}>
+              no sandbox
+              {terminalWidth >= 100 && (
+                <Text color={theme.text.secondary}> (see /docs)</Text>
+              )}
+            </Text>
+          )}
+        </Box>
+      )}
 
       {/* Right Section: Gemini Label and Console Summary */}
-      <Box alignItems="center" paddingTop={isNarrow ? 1 : 0}>
-        <Text color={theme.text.accent}>
-          {isNarrow ? '' : ' '}
-          {model}{' '}
-          <ContextUsageDisplay
-            promptTokenCount={promptTokenCount}
-            model={model}
-          />
-        </Text>
-        {corgiMode && (
-          <Text>
-            <Text color={theme.ui.symbol}>| </Text>
-            <Text color={theme.status.error}>▼</Text>
-            <Text color={theme.text.primary}>(´</Text>
-            <Text color={theme.status.error}>ᴥ</Text>
-            <Text color={theme.text.primary}>`)</Text>
-            <Text color={theme.status.error}>▼ </Text>
-          </Text>
-        )}
-        {!showErrorDetails && errorCount > 0 && (
-          <Box>
-            <Text color={theme.ui.symbol}>| </Text>
-            <ConsoleSummaryDisplay errorCount={errorCount} />
+      {!hideModelInfo && (
+        <Box alignItems="center" justifyContent="flex-end">
+          <Box alignItems="center">
+            <Text color={theme.text.accent}>
+              {model}{' '}
+              <ContextUsageDisplay
+                promptTokenCount={promptTokenCount}
+                model={model}
+                terminalWidth={terminalWidth}
+              />
+            </Text>
+            {showMemoryUsage && <MemoryUsageDisplay />}
           </Box>
-        )}
-        {showMemoryUsage && <MemoryUsageDisplay />}
-      </Box>
+          <Box alignItems="center" paddingLeft={2}>
+            {corgiMode && (
+              <Text>
+                <Text color={theme.ui.symbol}>| </Text>
+                <Text color={theme.status.error}>▼</Text>
+                <Text color={theme.text.primary}>(´</Text>
+                <Text color={theme.status.error}>ᴥ</Text>
+                <Text color={theme.text.primary}>`)</Text>
+                <Text color={theme.status.error}>▼ </Text>
+              </Text>
+            )}
+            {!showErrorDetails && errorCount > 0 && (
+              <Box>
+                <Text color={theme.ui.symbol}>| </Text>
+                <ConsoleSummaryDisplay errorCount={errorCount} />
+              </Box>
+            )}
+          </Box>
+        </Box>
+      )}
     </Box>
   );
 };

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

@@ -14,6 +14,7 @@ import {
   SCREEN_READER_LOADING,
   SCREEN_READER_RESPONDING,
 } from '../textConstants.js';
+import { theme } from '../semantic-colors.js';
 
 interface GeminiRespondingSpinnerProps {
   /**
@@ -30,17 +31,37 @@ export const GeminiRespondingSpinner: React.FC<
   const streamingState = useStreamingContext();
   const isScreenReaderEnabled = useIsScreenReaderEnabled();
   if (streamingState === StreamingState.Responding) {
-    return isScreenReaderEnabled ? (
-      <Text>{SCREEN_READER_RESPONDING}</Text>
-    ) : (
-      <Spinner type={spinnerType} />
+    return (
+      <GeminiSpinner
+        spinnerType={spinnerType}
+        altText={SCREEN_READER_RESPONDING}
+      />
     );
   } else if (nonRespondingDisplay) {
     return isScreenReaderEnabled ? (
       <Text>{SCREEN_READER_LOADING}</Text>
     ) : (
-      <Text>{nonRespondingDisplay}</Text>
+      <Text color={theme.text.primary}>{nonRespondingDisplay}</Text>
     );
   }
   return null;
 };
+
+interface GeminiSpinnerProps {
+  spinnerType?: SpinnerName;
+  altText?: string;
+}
+
+export const GeminiSpinner: React.FC<GeminiSpinnerProps> = ({
+  spinnerType = 'dots',
+  altText,
+}) => {
+  const isScreenReaderEnabled = useIsScreenReaderEnabled();
+  return isScreenReaderEnabled ? (
+    <Text>{altText}</Text>
+  ) : (
+    <Text color={theme.text.primary}>
+      <Spinner type={spinnerType} />
+    </Text>
+  );
+};

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

@@ -7,7 +7,7 @@
 import type React from 'react';
 import { Box, Text } from 'ink';
 import Gradient from 'ink-gradient';
-import { Colors } from '../colors.js';
+import { theme } from '../semantic-colors.js';
 import { shortAsciiLogo, longAsciiLogo, tinyAsciiLogo } from './AsciiArt.js';
 import { getAsciiArtWidth } from '../utils/textUtils.js';
 import { useTerminalSize } from '../hooks/useTerminalSize.js';
@@ -47,8 +47,8 @@ export const Header: React.FC<HeaderProps> = ({
       flexShrink={0}
       flexDirection="column"
     >
-      {Colors.GradientColors ? (
-        <Gradient colors={Colors.GradientColors}>
+      {theme.ui.gradient ? (
+        <Gradient colors={theme.ui.gradient}>
           <Text>{displayTitle}</Text>
         </Gradient>
       ) : (
@@ -56,8 +56,8 @@ export const Header: React.FC<HeaderProps> = ({
       )}
       {nightly && (
         <Box width="100%" flexDirection="row" justifyContent="flex-end">
-          {Colors.GradientColors ? (
-            <Gradient colors={Colors.GradientColors}>
+          {theme.ui.gradient ? (
+            <Gradient colors={theme.ui.gradient}>
               <Text>v{version}</Text>
             </Gradient>
           ) : (

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

@@ -0,0 +1,63 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/** @vitest-environment jsdom */
+
+import { render } from 'ink-testing-library';
+import { describe, it, expect } from 'vitest';
+import { Help } from './Help.js';
+import type { SlashCommand } from '../commands/types.js';
+import { CommandKind } from '../commands/types.js';
+
+const mockCommands: readonly SlashCommand[] = [
+  {
+    name: 'test',
+    description: 'A test command',
+    kind: CommandKind.BUILT_IN,
+  },
+  {
+    name: 'hidden',
+    description: 'A hidden command',
+    hidden: true,
+    kind: CommandKind.BUILT_IN,
+  },
+  {
+    name: 'parent',
+    description: 'A parent command',
+    kind: CommandKind.BUILT_IN,
+    subCommands: [
+      {
+        name: 'visible-child',
+        description: 'A visible child command',
+        kind: CommandKind.BUILT_IN,
+      },
+      {
+        name: 'hidden-child',
+        description: 'A hidden child command',
+        hidden: true,
+        kind: CommandKind.BUILT_IN,
+      },
+    ],
+  },
+];
+
+describe('Help Component', () => {
+  it('should not render hidden commands', () => {
+    const { lastFrame } = render(<Help commands={mockCommands} />);
+    const output = lastFrame();
+
+    expect(output).toContain('/test');
+    expect(output).not.toContain('/hidden');
+  });
+
+  it('should not render hidden subcommands', () => {
+    const { lastFrame } = render(<Help commands={mockCommands} />);
+    const output = lastFrame();
+
+    expect(output).toContain('visible-child');
+    expect(output).not.toContain('hidden-child');
+  });
+});

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

@@ -6,8 +6,8 @@
 
 import type React from 'react';
 import { Box, Text } from 'ink';
-import { Colors } from '../colors.js';
-import type { SlashCommand } from '../commands/types.js';
+import { theme } from '../semantic-colors.js';
+import { type SlashCommand, CommandKind } from '../commands/types.js';
 
 interface Help {
   commands: readonly SlashCommand[];
@@ -17,42 +17,42 @@ export const Help: React.FC<Help> = ({ commands }) => (
   <Box
     flexDirection="column"
     marginBottom={1}
-    borderColor={Colors.Gray}
+    borderColor={theme.border.default}
     borderStyle="round"
     padding={1}
   >
     {/* Basics */}
-    <Text bold color={Colors.Foreground}>
+    <Text bold color={theme.text.primary}>
       Basics:
     </Text>
-    <Text color={Colors.Foreground}>
-      <Text bold color={Colors.AccentPurple}>
+    <Text color={theme.text.primary}>
+      <Text bold color={theme.text.accent}>
         Add context
       </Text>
       : Use{' '}
-      <Text bold color={Colors.AccentPurple}>
+      <Text bold color={theme.text.accent}>
         @
       </Text>{' '}
       to specify files for context (e.g.,{' '}
-      <Text bold color={Colors.AccentPurple}>
+      <Text bold color={theme.text.accent}>
         @src/myFile.ts
       </Text>
       ) to target specific files or folders.
     </Text>
-    <Text color={Colors.Foreground}>
-      <Text bold color={Colors.AccentPurple}>
+    <Text color={theme.text.primary}>
+      <Text bold color={theme.text.accent}>
         Shell mode
       </Text>
       : Execute shell commands via{' '}
-      <Text bold color={Colors.AccentPurple}>
+      <Text bold color={theme.text.accent}>
         !
       </Text>{' '}
       (e.g.,{' '}
-      <Text bold color={Colors.AccentPurple}>
+      <Text bold color={theme.text.accent}>
         !npm run start
       </Text>
       ) or use natural language (e.g.{' '}
-      <Text bold color={Colors.AccentPurple}>
+      <Text bold color={theme.text.accent}>
         start server
       </Text>
       ).
@@ -61,106 +61,115 @@ export const Help: React.FC<Help> = ({ commands }) => (
     <Box height={1} />
 
     {/* Commands */}
-    <Text bold color={Colors.Foreground}>
+    <Text bold color={theme.text.primary}>
       Commands:
     </Text>
     {commands
-      .filter((command) => command.description)
+      .filter((command) => command.description && !command.hidden)
       .map((command: SlashCommand) => (
         <Box key={command.name} flexDirection="column">
-          <Text color={Colors.Foreground}>
-            <Text bold color={Colors.AccentPurple}>
+          <Text color={theme.text.primary}>
+            <Text bold color={theme.text.accent}>
               {' '}
               /{command.name}
             </Text>
+            {command.kind === CommandKind.MCP_PROMPT && (
+              <Text color={theme.text.secondary}> [MCP]</Text>
+            )}
             {command.description && ' - ' + command.description}
           </Text>
           {command.subCommands &&
-            command.subCommands.map((subCommand) => (
-              <Text key={subCommand.name} color={Colors.Foreground}>
-                <Text bold color={Colors.AccentPurple}>
-                  {'   '}
-                  {subCommand.name}
+            command.subCommands
+              .filter((subCommand) => !subCommand.hidden)
+              .map((subCommand) => (
+                <Text key={subCommand.name} color={theme.text.primary}>
+                  <Text bold color={theme.text.accent}>
+                    {'   '}
+                    {subCommand.name}
+                  </Text>
+                  {subCommand.description && ' - ' + subCommand.description}
                 </Text>
-                {subCommand.description && ' - ' + subCommand.description}
-              </Text>
-            ))}
+              ))}
         </Box>
       ))}
-    <Text color={Colors.Foreground}>
-      <Text bold color={Colors.AccentPurple}>
+    <Text color={theme.text.primary}>
+      <Text bold color={theme.text.accent}>
         {' '}
         !{' '}
       </Text>
       - shell command
     </Text>
+    <Text color={theme.text.primary}>
+      <Text color={theme.text.secondary}>[MCP]</Text> - Model Context Protocol
+      command (from external servers)
+    </Text>
 
     <Box height={1} />
 
     {/* Shortcuts */}
-    <Text bold color={Colors.Foreground}>
+    <Text bold color={theme.text.primary}>
       Keyboard Shortcuts:
     </Text>
-    <Text color={Colors.Foreground}>
-      <Text bold color={Colors.AccentPurple}>
+    <Text color={theme.text.primary}>
+      <Text bold color={theme.text.accent}>
         Alt+Left/Right
       </Text>{' '}
       - Jump through words in the input
     </Text>
-    <Text color={Colors.Foreground}>
-      <Text bold color={Colors.AccentPurple}>
+    <Text color={theme.text.primary}>
+      <Text bold color={theme.text.accent}>
         Ctrl+C
       </Text>{' '}
       - Close dialogs, cancel requests, or quit application
     </Text>
-    <Text color={Colors.Foreground}>
-      <Text bold color={Colors.AccentPurple}>
+    <Text color={theme.text.primary}>
+      <Text bold color={theme.text.accent}>
         {process.platform === 'win32' ? 'Ctrl+Enter' : 'Ctrl+J'}
       </Text>{' '}
       {process.platform === 'linux'
         ? '- New line (Alt+Enter works for certain linux distros)'
         : '- New line'}
     </Text>
-    <Text color={Colors.Foreground}>
-      <Text bold color={Colors.AccentPurple}>
+    <Text color={theme.text.primary}>
+      <Text bold color={theme.text.accent}>
         Ctrl+L
       </Text>{' '}
       - Clear the screen
     </Text>
-    <Text color={Colors.Foreground}>
-      <Text bold color={Colors.AccentPurple}>
+    <Text color={theme.text.primary}>
+      <Text bold color={theme.text.accent}>
         {process.platform === 'darwin' ? 'Ctrl+X / Meta+Enter' : 'Ctrl+X'}
       </Text>{' '}
       - Open input in external editor
     </Text>
-    <Text color={Colors.Foreground}>
-      <Text bold color={Colors.AccentPurple}>
+    <Text color={theme.text.primary}>
+      <Text bold color={theme.text.accent}>
         Enter
       </Text>{' '}
       - Send message
     </Text>
-    <Text color={Colors.Foreground}>
-      <Text bold color={Colors.AccentPurple}>
+    <Text color={theme.text.primary}>
+      <Text bold color={theme.text.accent}>
         Esc
       </Text>{' '}
       - Cancel operation / Clear input (double press)
     </Text>
-    <Text color={Colors.Foreground}>
-      <Text bold color={Colors.AccentPurple}>
+    <Text color={theme.text.primary}>
+      <Text bold color={theme.text.accent}>
         Shift+Tab
       </Text>{' '}
       - Cycle approval modes
     </Text>
-    <Text color={Colors.Foreground}>
-      <Text bold color={Colors.AccentPurple}>
+    <Text color={theme.text.primary}>
+      <Text bold color={theme.text.accent}>
         Up/Down
       </Text>{' '}
       - Cycle through your prompt history
     </Text>
     <Box height={1} />
-    <Text color={Colors.Foreground}>
+    <Text color={theme.text.primary}>
       For a full list of shortcuts, see{' '}
-      <Text bold color={Colors.AccentPurple}>
+      <Text bold color={theme.text.accent}>
         docs/keyboard-shortcuts.md
       </Text>
     </Text>

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

@@ -4,17 +4,21 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { render } from 'ink-testing-library';
 import { describe, it, expect, vi } from 'vitest';
 import { HistoryItemDisplay } from './HistoryItemDisplay.js';
-import type { HistoryItem } from '../types.js';
+import { type HistoryItem, ToolCallStatus } from '../types.js';
 import { MessageType } from '../types.js';
 import { SessionStatsProvider } from '../contexts/SessionContext.js';
-import type { Config } from '@qwen-code/qwen-code-core';
+import type {
+  Config,
+  ToolExecuteConfirmationDetails,
+} from '@qwen-code/qwen-code-core';
+import { ToolGroupMessage } from './messages/ToolGroupMessage.js';
+import { renderWithProviders } from '../../test-utils/render.js';
 
 // Mock child components
 vi.mock('./messages/ToolGroupMessage.js', () => ({
-  ToolGroupMessage: () => <div />,
+  ToolGroupMessage: vi.fn(() => <div />),
 }));
 
 describe('<HistoryItemDisplay />', () => {
@@ -33,7 +37,7 @@ describe('<HistoryItemDisplay />', () => {
       type: MessageType.USER,
       text: 'Hello',
     };
-    const { lastFrame } = render(
+    const { lastFrame } = renderWithProviders(
       <HistoryItemDisplay {...baseItem} item={item} />,
     );
     expect(lastFrame()).toContain('Hello');
@@ -45,7 +49,7 @@ describe('<HistoryItemDisplay />', () => {
       type: MessageType.USER,
       text: '/theme',
     };
-    const { lastFrame } = render(
+    const { lastFrame } = renderWithProviders(
       <HistoryItemDisplay {...baseItem} item={item} />,
     );
     expect(lastFrame()).toContain('/theme');
@@ -57,7 +61,7 @@ describe('<HistoryItemDisplay />', () => {
       type: MessageType.STATS,
       duration: '1s',
     };
-    const { lastFrame } = render(
+    const { lastFrame } = renderWithProviders(
       <SessionStatsProvider>
         <HistoryItemDisplay {...baseItem} item={item} />
       </SessionStatsProvider>,
@@ -77,7 +81,7 @@ describe('<HistoryItemDisplay />', () => {
       gcpProject: 'test-project',
       ideClient: 'test-ide',
     };
-    const { lastFrame } = render(
+    const { lastFrame } = renderWithProviders(
       <HistoryItemDisplay {...baseItem} item={item} />,
     );
     expect(lastFrame()).toContain('About Qwen Code');
@@ -88,7 +92,7 @@ describe('<HistoryItemDisplay />', () => {
       ...baseItem,
       type: 'model_stats',
     };
-    const { lastFrame } = render(
+    const { lastFrame } = renderWithProviders(
       <SessionStatsProvider>
         <HistoryItemDisplay {...baseItem} item={item} />
       </SessionStatsProvider>,
@@ -103,7 +107,7 @@ describe('<HistoryItemDisplay />', () => {
       ...baseItem,
       type: 'tool_stats',
     };
-    const { lastFrame } = render(
+    const { lastFrame } = renderWithProviders(
       <SessionStatsProvider>
         <HistoryItemDisplay {...baseItem} item={item} />
       </SessionStatsProvider>,
@@ -119,11 +123,151 @@ describe('<HistoryItemDisplay />', () => {
       type: 'quit',
       duration: '1s',
     };
-    const { lastFrame } = render(
+    const { lastFrame } = renderWithProviders(
       <SessionStatsProvider>
         <HistoryItemDisplay {...baseItem} item={item} />
       </SessionStatsProvider>,
     );
     expect(lastFrame()).toContain('Agent powering down. Goodbye!');
   });
+
+  it('should escape ANSI codes in text content', () => {
+    const historyItem: HistoryItem = {
+      id: 1,
+      type: 'user',
+      text: 'Hello, \u001b[31mred\u001b[0m world!',
+    };
+
+    const { lastFrame } = renderWithProviders(
+      <HistoryItemDisplay
+        item={historyItem}
+        terminalWidth={80}
+        isPending={false}
+      />,
+    );
+
+    // The ANSI codes should be escaped for display.
+    expect(lastFrame()).toContain('Hello, \\u001b[31mred\\u001b[0m world!');
+    // The raw ANSI codes should not be present.
+    expect(lastFrame()).not.toContain('Hello, \u001b[31mred\u001b[0m world!');
+  });
+
+  it('should escape ANSI codes in tool confirmation details', () => {
+    const historyItem: HistoryItem = {
+      id: 1,
+      type: 'tool_group',
+      tools: [
+        {
+          callId: '123',
+          name: 'run_shell_command',
+          description: 'Run a shell command',
+          resultDisplay: 'blank',
+          status: ToolCallStatus.Confirming,
+          confirmationDetails: {
+            type: 'exec',
+            title: 'Run Shell Command',
+            command: 'echo "\u001b[31mhello\u001b[0m"',
+            rootCommand: 'echo',
+            onConfirm: async () => {},
+          },
+        },
+      ],
+    };
+
+    renderWithProviders(
+      <HistoryItemDisplay
+        item={historyItem}
+        terminalWidth={80}
+        isPending={false}
+      />,
+    );
+
+    const passedProps = vi.mocked(ToolGroupMessage).mock.calls[0][0];
+    const confirmationDetails = passedProps.toolCalls[0]
+      .confirmationDetails as ToolExecuteConfirmationDetails;
+
+    expect(confirmationDetails.command).toBe(
+      'echo "\\u001b[31mhello\\u001b[0m"',
+    );
+  });
+
+  const longCode =
+    '# Example code block:\n' +
+    '```python\n' +
+    Array.from({ length: 50 }, (_, i) => `Line ${i + 1}`).join('\n') +
+    '\n```';
+
+  it('should render a truncated gemini item', () => {
+    const item: HistoryItem = {
+      id: 1,
+      type: 'gemini',
+      text: longCode,
+    };
+    const { lastFrame } = renderWithProviders(
+      <HistoryItemDisplay
+        item={item}
+        isPending={false}
+        terminalWidth={80}
+        availableTerminalHeight={10}
+      />,
+    );
+
+    expect(lastFrame()).toMatchSnapshot();
+  });
+
+  it('should render a full gemini item when using availableTerminalHeightGemini', () => {
+    const item: HistoryItem = {
+      id: 1,
+      type: 'gemini',
+      text: longCode,
+    };
+    const { lastFrame } = renderWithProviders(
+      <HistoryItemDisplay
+        item={item}
+        isPending={false}
+        terminalWidth={80}
+        availableTerminalHeight={10}
+        availableTerminalHeightGemini={Number.MAX_SAFE_INTEGER}
+      />,
+    );
+
+    expect(lastFrame()).toMatchSnapshot();
+  });
+
+  it('should render a truncated gemini_content item', () => {
+    const item: HistoryItem = {
+      id: 1,
+      type: 'gemini_content',
+      text: longCode,
+    };
+    const { lastFrame } = renderWithProviders(
+      <HistoryItemDisplay
+        item={item}
+        isPending={false}
+        terminalWidth={80}
+        availableTerminalHeight={10}
+      />,
+    );
+
+    expect(lastFrame()).toMatchSnapshot();
+  });
+
+  it('should render a full gemini_content item when using availableTerminalHeightGemini', () => {
+    const item: HistoryItem = {
+      id: 1,
+      type: 'gemini_content',
+      text: longCode,
+    };
+    const { lastFrame } = renderWithProviders(
+      <HistoryItemDisplay
+        item={item}
+        isPending={false}
+        terminalWidth={80}
+        availableTerminalHeight={10}
+        availableTerminalHeightGemini={Number.MAX_SAFE_INTEGER}
+      />,
+    );
+
+    expect(lastFrame()).toMatchSnapshot();
+  });
 });

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

@@ -5,7 +5,8 @@
  */
 
 import type React from 'react';
-import { memo } from 'react';
+import { useMemo } from 'react';
+import { escapeAnsiCtrlCodes } from '../utils/textUtils.js';
 import type { HistoryItem } from '../types.js';
 import { UserMessage } from './messages/UserMessage.js';
 import { UserShellMessage } from './messages/UserShellMessage.js';
@@ -16,24 +17,30 @@ import { ToolGroupMessage } from './messages/ToolGroupMessage.js';
 import { GeminiMessageContent } from './messages/GeminiMessageContent.js';
 import { CompressionMessage } from './messages/CompressionMessage.js';
 import { SummaryMessage } from './messages/SummaryMessage.js';
+import { WarningMessage } from './messages/WarningMessage.js';
 import { Box } from 'ink';
 import { AboutBox } from './AboutBox.js';
 import { StatsDisplay } from './StatsDisplay.js';
 import { ModelStatsDisplay } from './ModelStatsDisplay.js';
 import { ToolStatsDisplay } from './ToolStatsDisplay.js';
 import { SessionSummaryDisplay } from './SessionSummaryDisplay.js';
-import type { Config } from '@qwen-code/qwen-code-core';
 import { Help } from './Help.js';
 import type { SlashCommand } from '../commands/types.js';
+import { ExtensionsList } from './views/ExtensionsList.js';
+import { getMCPServerStatus } from '@qwen-code/qwen-code-core';
+import { ToolsList } from './views/ToolsList.js';
+import { McpStatus } from './views/McpStatus.js';
 
 interface HistoryItemDisplayProps {
   item: HistoryItem;
   availableTerminalHeight?: number;
   terminalWidth: number;
   isPending: boolean;
-  config: Config;
   isFocused?: boolean;
   commands?: readonly SlashCommand[];
+  activeShellPtyId?: number | null;
+  embeddedShellFocused?: boolean;
+  availableTerminalHeightGemini?: number;
 }
 
 const HistoryItemDisplayComponent: React.FC<HistoryItemDisplayProps> = ({
@@ -41,68 +48,106 @@ const HistoryItemDisplayComponent: React.FC<HistoryItemDisplayProps> = ({
   availableTerminalHeight,
   terminalWidth,
   isPending,
-  config,
   commands,
   isFocused = true,
-}) => (
-  <Box flexDirection="column" key={item.id}>
-    {/* Render standard message types */}
-    {item.type === 'user' && <UserMessage text={item.text} />}
-    {item.type === 'user_shell' && <UserShellMessage text={item.text} />}
-    {item.type === 'gemini' && (
-      <GeminiMessage
-        text={item.text}
-        isPending={isPending}
-        availableTerminalHeight={availableTerminalHeight}
-        terminalWidth={terminalWidth}
-      />
-    )}
-    {item.type === 'gemini_content' && (
-      <GeminiMessageContent
-        text={item.text}
-        isPending={isPending}
-        availableTerminalHeight={availableTerminalHeight}
-        terminalWidth={terminalWidth}
-      />
-    )}
-    {item.type === 'info' && <InfoMessage text={item.text} />}
-    {item.type === 'error' && <ErrorMessage text={item.text} />}
-    {item.type === 'about' && (
-      <AboutBox
-        cliVersion={item.cliVersion}
-        osVersion={item.osVersion}
-        sandboxEnv={item.sandboxEnv}
-        modelVersion={item.modelVersion}
-        selectedAuthType={item.selectedAuthType}
-        gcpProject={item.gcpProject}
-        ideClient={item.ideClient}
-      />
-    )}
-    {item.type === 'help' && commands && <Help commands={commands} />}
-    {item.type === 'stats' && <StatsDisplay duration={item.duration} />}
-    {item.type === 'model_stats' && <ModelStatsDisplay />}
-    {item.type === 'tool_stats' && <ToolStatsDisplay />}
-    {item.type === 'quit' && <SessionSummaryDisplay duration={item.duration} />}
-    {item.type === 'quit_confirmation' && (
-      <SessionSummaryDisplay duration={item.duration} />
-    )}
-    {item.type === 'tool_group' && (
-      <ToolGroupMessage
-        toolCalls={item.tools}
-        groupId={item.id}
-        availableTerminalHeight={availableTerminalHeight}
-        terminalWidth={terminalWidth}
-        config={config}
-        isFocused={isFocused}
-      />
-    )}
-    {item.type === 'compression' && (
-      <CompressionMessage compression={item.compression} />
-    )}
-    {item.type === 'summary' && <SummaryMessage summary={item.summary} />}
-  </Box>
-);
+  activeShellPtyId,
+  embeddedShellFocused,
+  availableTerminalHeightGemini,
+}) => {
+  const itemForDisplay = useMemo(() => escapeAnsiCtrlCodes(item), [item]);
 
-HistoryItemDisplayComponent.displayName = 'HistoryItemDisplay';
+  return (
+    <Box flexDirection="column" key={itemForDisplay.id}>
+      {/* Render standard message types */}
+      {itemForDisplay.type === 'user' && (
+        <UserMessage text={itemForDisplay.text} />
+      )}
+      {itemForDisplay.type === 'user_shell' && (
+        <UserShellMessage text={itemForDisplay.text} />
+      )}
+      {itemForDisplay.type === 'gemini' && (
+        <GeminiMessage
+          text={itemForDisplay.text}
+          isPending={isPending}
+          availableTerminalHeight={
+            availableTerminalHeightGemini ?? availableTerminalHeight
+          }
+          terminalWidth={terminalWidth}
+        />
+      )}
+      {itemForDisplay.type === 'gemini_content' && (
+        <GeminiMessageContent
+          text={itemForDisplay.text}
+          isPending={isPending}
+          availableTerminalHeight={
+            availableTerminalHeightGemini ?? availableTerminalHeight
+          }
+          terminalWidth={terminalWidth}
+        />
+      )}
+      {itemForDisplay.type === 'info' && (
+        <InfoMessage text={itemForDisplay.text} />
+      )}
+      {itemForDisplay.type === 'warning' && (
+        <WarningMessage text={itemForDisplay.text} />
+      )}
+      {itemForDisplay.type === 'error' && (
+        <ErrorMessage text={itemForDisplay.text} />
+      )}
+      {itemForDisplay.type === 'about' && (
+        <AboutBox
+          cliVersion={itemForDisplay.cliVersion}
+          osVersion={itemForDisplay.osVersion}
+          sandboxEnv={itemForDisplay.sandboxEnv}
+          modelVersion={itemForDisplay.modelVersion}
+          selectedAuthType={itemForDisplay.selectedAuthType}
+          gcpProject={itemForDisplay.gcpProject}
+          ideClient={itemForDisplay.ideClient}
+        />
+      )}
+      {itemForDisplay.type === 'help' && commands && (
+        <Help commands={commands} />
+      )}
+      {itemForDisplay.type === 'stats' && (
+        <StatsDisplay duration={itemForDisplay.duration} />
+      )}
+      {itemForDisplay.type === 'model_stats' && <ModelStatsDisplay />}
+      {itemForDisplay.type === 'tool_stats' && <ToolStatsDisplay />}
+      {itemForDisplay.type === 'quit' && (
+        <SessionSummaryDisplay duration={itemForDisplay.duration} />
+      )}
+      {itemForDisplay.type === 'quit_confirmation' && (
+        <SessionSummaryDisplay duration={itemForDisplay.duration} />
+      )}
+      {itemForDisplay.type === 'tool_group' && (
+        <ToolGroupMessage
+          toolCalls={itemForDisplay.tools}
+          groupId={itemForDisplay.id}
+          availableTerminalHeight={availableTerminalHeight}
+          terminalWidth={terminalWidth}
+          isFocused={isFocused}
+          activeShellPtyId={activeShellPtyId}
+          embeddedShellFocused={embeddedShellFocused}
+        />
+      )}
+      {itemForDisplay.type === 'compression' && (
+        <CompressionMessage compression={itemForDisplay.compression} />
+      )}
+      {item.type === 'summary' && <SummaryMessage summary={item.summary} />}
+      {itemForDisplay.type === 'extensions_list' && <ExtensionsList />}
+      {itemForDisplay.type === 'tools_list' && (
+        <ToolsList
+          terminalWidth={terminalWidth}
+          tools={itemForDisplay.tools}
+          showDescriptions={itemForDisplay.showDescriptions}
+        />
+      )}
+      {itemForDisplay.type === 'mcp_status' && (
+        <McpStatus {...itemForDisplay} serverStatus={getMCPServerStatus} />
+      )}
+    </Box>
+  );
+};
 
-export const HistoryItemDisplay = memo(HistoryItemDisplayComponent);
+// Export alias for backward compatibility
+export { HistoryItemDisplayComponent as HistoryItemDisplay };

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

@@ -0,0 +1,91 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { vi, describe, it, expect, beforeEach } from 'vitest';
+import * as processUtils from '../../utils/processUtils.js';
+import { renderWithProviders } from '../../test-utils/render.js';
+import { IdeTrustChangeDialog } from './IdeTrustChangeDialog.js';
+
+describe('IdeTrustChangeDialog', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders the correct message for CONNECTION_CHANGE', () => {
+    const { lastFrame } = renderWithProviders(
+      <IdeTrustChangeDialog reason="CONNECTION_CHANGE" />,
+    );
+
+    const frameText = lastFrame();
+    expect(frameText).toContain(
+      'Workspace trust has changed due to a change in the IDE connection.',
+    );
+    expect(frameText).toContain("Press 'r' to restart Gemini");
+  });
+
+  it('renders the correct message for TRUST_CHANGE', () => {
+    const { lastFrame } = renderWithProviders(
+      <IdeTrustChangeDialog reason="TRUST_CHANGE" />,
+    );
+
+    const frameText = lastFrame();
+    expect(frameText).toContain(
+      'Workspace trust has changed due to a change in the IDE trust.',
+    );
+    expect(frameText).toContain("Press 'r' to restart Gemini");
+  });
+
+  it('renders a generic message and logs an error for NONE reason', () => {
+    const consoleErrorSpy = vi
+      .spyOn(console, 'error')
+      .mockImplementation(() => {});
+    const { lastFrame } = renderWithProviders(
+      <IdeTrustChangeDialog reason="NONE" />,
+    );
+
+    const frameText = lastFrame();
+    expect(frameText).toContain('Workspace trust has changed.');
+    expect(consoleErrorSpy).toHaveBeenCalledWith(
+      'IdeTrustChangeDialog rendered with unexpected reason "NONE"',
+    );
+  });
+
+  it('calls relaunchApp when "r" is pressed', () => {
+    const relaunchAppSpy = vi.spyOn(processUtils, 'relaunchApp');
+    const { stdin } = renderWithProviders(
+      <IdeTrustChangeDialog reason="NONE" />,
+    );
+
+    stdin.write('r');
+
+    expect(relaunchAppSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls relaunchApp when "R" is pressed', () => {
+    const relaunchAppSpy = vi.spyOn(processUtils, 'relaunchApp');
+    const { stdin } = renderWithProviders(
+      <IdeTrustChangeDialog reason="CONNECTION_CHANGE" />,
+    );
+
+    stdin.write('R');
+
+    expect(relaunchAppSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not call relaunchApp when another key is pressed', async () => {
+    const relaunchAppSpy = vi.spyOn(processUtils, 'relaunchApp');
+    const { stdin } = renderWithProviders(
+      <IdeTrustChangeDialog reason="CONNECTION_CHANGE" />,
+    );
+
+    stdin.write('a');
+
+    // Give it a moment to ensure no async actions are triggered
+    await new Promise((resolve) => setTimeout(resolve, 50));
+
+    expect(relaunchAppSpy).not.toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,47 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Box, Text } from 'ink';
+import { theme } from '../semantic-colors.js';
+import { useKeypress } from '../hooks/useKeypress.js';
+import { relaunchApp } from '../../utils/processUtils.js';
+import { type RestartReason } from '../hooks/useIdeTrustListener.js';
+
+interface IdeTrustChangeDialogProps {
+  reason: RestartReason;
+}
+
+export const IdeTrustChangeDialog = ({ reason }: IdeTrustChangeDialogProps) => {
+  useKeypress(
+    (key) => {
+      if (key.name === 'r' || key.name === 'R') {
+        relaunchApp();
+      }
+    },
+    { isActive: true },
+  );
+
+  let message = 'Workspace trust has changed.';
+  if (reason === 'NONE') {
+    // This should not happen, but provides a fallback and a debug log.
+    console.error(
+      'IdeTrustChangeDialog rendered with unexpected reason "NONE"',
+    );
+  } else if (reason === 'CONNECTION_CHANGE') {
+    message =
+      'Workspace trust has changed due to a change in the IDE connection.';
+  } else if (reason === 'TRUST_CHANGE') {
+    message = 'Workspace trust has changed due to a change in the IDE trust.';
+  }
+
+  return (
+    <Box borderStyle="round" borderColor={theme.status.warning} paddingX={1}>
+      <Text color={theme.status.warning}>
+        {message} Press &apos;r&apos; to restart Gemini to apply the changes.
+      </Text>
+    </Box>
+  );
+};

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

@@ -10,6 +10,7 @@ import type { InputPromptProps } from './InputPrompt.js';
 import { InputPrompt } from './InputPrompt.js';
 import type { TextBuffer } from './shared/text-buffer.js';
 import type { Config } from '@qwen-code/qwen-code-core';
+import { ApprovalMode } from '@qwen-code/qwen-code-core';
 import * as path from 'node:path';
 import type { CommandContext, SlashCommand } from '../commands/types.js';
 import { CommandKind } from '../commands/types.js';
@@ -20,12 +21,17 @@ import type { UseCommandCompletionReturn } from '../hooks/useCommandCompletion.j
 import { useCommandCompletion } from '../hooks/useCommandCompletion.js';
 import type { UseInputHistoryReturn } from '../hooks/useInputHistory.js';
 import { useInputHistory } from '../hooks/useInputHistory.js';
+import type { UseReverseSearchCompletionReturn } from '../hooks/useReverseSearchCompletion.js';
+import { useReverseSearchCompletion } from '../hooks/useReverseSearchCompletion.js';
 import * as clipboardUtils from '../utils/clipboardUtils.js';
 import { createMockCommandContext } from '../../test-utils/mockCommandContext.js';
+import stripAnsi from 'strip-ansi';
+import chalk from 'chalk';
 
 vi.mock('../hooks/useShellHistory.js');
 vi.mock('../hooks/useCommandCompletion.js');
 vi.mock('../hooks/useInputHistory.js');
+vi.mock('../hooks/useReverseSearchCompletion.js');
 vi.mock('../utils/clipboardUtils.js');
 
 const mockSlashCommands: SlashCommand[] = [
@@ -81,12 +87,16 @@ describe('InputPrompt', () => {
   let mockShellHistory: UseShellHistoryReturn;
   let mockCommandCompletion: UseCommandCompletionReturn;
   let mockInputHistory: UseInputHistoryReturn;
+  let mockReverseSearchCompletion: UseReverseSearchCompletionReturn;
   let mockBuffer: TextBuffer;
   let mockCommandContext: CommandContext;
 
   const mockedUseShellHistory = vi.mocked(useShellHistory);
   const mockedUseCommandCompletion = vi.mocked(useCommandCompletion);
   const mockedUseInputHistory = vi.mocked(useInputHistory);
+  const mockedUseReverseSearchCompletion = vi.mocked(
+    useReverseSearchCompletion,
+  );
 
   beforeEach(() => {
     vi.resetAllMocks();
@@ -103,6 +113,7 @@ describe('InputPrompt', () => {
         mockBuffer.cursor = [0, newText.length];
         mockBuffer.viewportVisualLines = [newText];
         mockBuffer.allVisualLines = [newText];
+        mockBuffer.visualToLogicalMap = [[0, 0]];
       }),
       replaceRangeByOffset: vi.fn(),
       viewportVisualLines: [''],
@@ -118,16 +129,17 @@ describe('InputPrompt', () => {
       killLineLeft: vi.fn(),
       openInExternalEditor: vi.fn(),
       newline: vi.fn(),
+      undo: vi.fn(),
+      redo: vi.fn(),
       backspace: vi.fn(),
       preferredCol: null,
       selectionAnchor: null,
       insert: vi.fn(),
       del: vi.fn(),
-      undo: vi.fn(),
-      redo: vi.fn(),
       replaceRange: vi.fn(),
       deleteWordLeft: vi.fn(),
       deleteWordRight: vi.fn(),
+      visualToLogicalMap: [[0, 0]],
     } as unknown as TextBuffer;
 
     mockShellHistory = {
@@ -167,6 +179,21 @@ describe('InputPrompt', () => {
     };
     mockedUseInputHistory.mockReturnValue(mockInputHistory);
 
+    mockReverseSearchCompletion = {
+      suggestions: [],
+      activeSuggestionIndex: -1,
+      visibleStartIndex: 0,
+      showSuggestions: false,
+      isLoadingSuggestions: false,
+      navigateUp: vi.fn(),
+      navigateDown: vi.fn(),
+      handleAutocomplete: vi.fn(),
+      resetCompletionState: vi.fn(),
+    };
+    mockedUseReverseSearchCompletion.mockReturnValue(
+      mockReverseSearchCompletion,
+    );
+
     props = {
       buffer: mockBuffer,
       onSubmit: vi.fn(),
@@ -184,6 +211,7 @@ describe('InputPrompt', () => {
       commandContext: mockCommandContext,
       shellModeActive: false,
       setShellModeActive: vi.fn(),
+      approvalMode: ApprovalMode.DEFAULT,
       inputWidth: 80,
       suggestionsWidth: 80,
       focus: true,
@@ -1208,6 +1236,263 @@ describe('InputPrompt', () => {
     });
   });
 
+  describe('Highlighting and Cursor Display', () => {
+    it('should display cursor mid-word by highlighting the character', async () => {
+      mockBuffer.text = 'hello world';
+      mockBuffer.lines = ['hello world'];
+      mockBuffer.viewportVisualLines = ['hello world'];
+      mockBuffer.visualCursor = [0, 3]; // cursor on the second 'l'
+
+      const { stdout, unmount } = renderWithProviders(
+        <InputPrompt {...props} />,
+      );
+      await wait();
+
+      const frame = stdout.lastFrame();
+      // The component will render the text with the character at the cursor inverted.
+      expect(frame).toContain(`hel${chalk.inverse('l')}o world`);
+      unmount();
+    });
+
+    it('should display cursor at the beginning of the line', async () => {
+      mockBuffer.text = 'hello';
+      mockBuffer.lines = ['hello'];
+      mockBuffer.viewportVisualLines = ['hello'];
+      mockBuffer.visualCursor = [0, 0]; // cursor on 'h'
+
+      const { stdout, unmount } = renderWithProviders(
+        <InputPrompt {...props} />,
+      );
+      await wait();
+
+      const frame = stdout.lastFrame();
+      expect(frame).toContain(`${chalk.inverse('h')}ello`);
+      unmount();
+    });
+
+    it('should display cursor at the end of the line as an inverted space', async () => {
+      mockBuffer.text = 'hello';
+      mockBuffer.lines = ['hello'];
+      mockBuffer.viewportVisualLines = ['hello'];
+      mockBuffer.visualCursor = [0, 5]; // cursor after 'o'
+
+      const { stdout, unmount } = renderWithProviders(
+        <InputPrompt {...props} />,
+      );
+      await wait();
+
+      const frame = stdout.lastFrame();
+      expect(frame).toContain(`hello${chalk.inverse(' ')}`);
+      unmount();
+    });
+
+    it('should display cursor correctly on a highlighted token', async () => {
+      mockBuffer.text = 'run @path/to/file';
+      mockBuffer.lines = ['run @path/to/file'];
+      mockBuffer.viewportVisualLines = ['run @path/to/file'];
+      mockBuffer.visualCursor = [0, 9]; // cursor on 't' in 'to'
+
+      const { stdout, unmount } = renderWithProviders(
+        <InputPrompt {...props} />,
+      );
+      await wait();
+
+      const frame = stdout.lastFrame();
+      // The token '@path/to/file' is colored, and the cursor highlights one char inside it.
+      expect(frame).toContain(`@path/${chalk.inverse('t')}o/file`);
+      unmount();
+    });
+
+    it('should display cursor correctly for multi-byte unicode characters', async () => {
+      const text = 'hello 👍 world';
+      mockBuffer.text = text;
+      mockBuffer.lines = [text];
+      mockBuffer.viewportVisualLines = [text];
+      mockBuffer.visualCursor = [0, 6]; // cursor on '👍'
+
+      const { stdout, unmount } = renderWithProviders(
+        <InputPrompt {...props} />,
+      );
+      await wait();
+
+      const frame = stdout.lastFrame();
+      expect(frame).toContain(`hello ${chalk.inverse('👍')} world`);
+      unmount();
+    });
+
+    it('should display cursor at the end of a line with unicode characters', async () => {
+      const text = 'hello 👍';
+      mockBuffer.text = text;
+      mockBuffer.lines = [text];
+      mockBuffer.viewportVisualLines = [text];
+      mockBuffer.visualCursor = [0, 8]; // cursor after '👍' (length is 6 + 2 for emoji)
+
+      const { stdout, unmount } = renderWithProviders(
+        <InputPrompt {...props} />,
+      );
+      await wait();
+
+      const frame = stdout.lastFrame();
+      expect(frame).toContain(`hello 👍${chalk.inverse(' ')}`);
+      unmount();
+    });
+
+    it('should display cursor on an empty line', async () => {
+      mockBuffer.text = '';
+      mockBuffer.lines = [''];
+      mockBuffer.viewportVisualLines = [''];
+      mockBuffer.visualCursor = [0, 0];
+
+      const { stdout, unmount } = renderWithProviders(
+        <InputPrompt {...props} />,
+      );
+      await wait();
+
+      const frame = stdout.lastFrame();
+      expect(frame).toContain(chalk.inverse(' '));
+      unmount();
+    });
+
+    it('should display cursor on a space between words', async () => {
+      mockBuffer.text = 'hello world';
+      mockBuffer.lines = ['hello world'];
+      mockBuffer.viewportVisualLines = ['hello world'];
+      mockBuffer.visualCursor = [0, 5]; // cursor on the space
+
+      const { stdout, unmount } = renderWithProviders(
+        <InputPrompt {...props} />,
+      );
+      await wait();
+
+      const frame = stdout.lastFrame();
+      expect(frame).toContain(`hello${chalk.inverse(' ')}world`);
+      unmount();
+    });
+
+    it('should display cursor in the middle of a line in a multiline block', async () => {
+      const text = 'first line\nsecond line\nthird line';
+      mockBuffer.text = text;
+      mockBuffer.lines = text.split('\n');
+      mockBuffer.viewportVisualLines = text.split('\n');
+      mockBuffer.visualCursor = [1, 3]; // cursor on 'o' in 'second'
+      mockBuffer.visualToLogicalMap = [
+        [0, 0],
+        [1, 0],
+        [2, 0],
+      ];
+
+      const { stdout, unmount } = renderWithProviders(
+        <InputPrompt {...props} />,
+      );
+      await wait();
+
+      const frame = stdout.lastFrame();
+      expect(frame).toContain(`sec${chalk.inverse('o')}nd line`);
+      unmount();
+    });
+
+    it('should display cursor at the beginning of a line in a multiline block', async () => {
+      const text = 'first line\nsecond line';
+      mockBuffer.text = text;
+      mockBuffer.lines = text.split('\n');
+      mockBuffer.viewportVisualLines = text.split('\n');
+      mockBuffer.visualCursor = [1, 0]; // cursor on 's' in 'second'
+      mockBuffer.visualToLogicalMap = [
+        [0, 0],
+        [1, 0],
+      ];
+
+      const { stdout, unmount } = renderWithProviders(
+        <InputPrompt {...props} />,
+      );
+      await wait();
+
+      const frame = stdout.lastFrame();
+      expect(frame).toContain(`${chalk.inverse('s')}econd line`);
+      unmount();
+    });
+
+    it('should display cursor at the end of a line in a multiline block', async () => {
+      const text = 'first line\nsecond line';
+      mockBuffer.text = text;
+      mockBuffer.lines = text.split('\n');
+      mockBuffer.viewportVisualLines = text.split('\n');
+      mockBuffer.visualCursor = [0, 10]; // cursor after 'first line'
+      mockBuffer.visualToLogicalMap = [
+        [0, 0],
+        [1, 0],
+      ];
+
+      const { stdout, unmount } = renderWithProviders(
+        <InputPrompt {...props} />,
+      );
+      await wait();
+
+      const frame = stdout.lastFrame();
+      expect(frame).toContain(`first line${chalk.inverse(' ')}`);
+      unmount();
+    });
+
+    it('should display cursor on a blank line in a multiline block', async () => {
+      const text = 'first line\n\nthird line';
+      mockBuffer.text = text;
+      mockBuffer.lines = text.split('\n');
+      mockBuffer.viewportVisualLines = text.split('\n');
+      mockBuffer.visualCursor = [1, 0]; // cursor on the blank line
+      mockBuffer.visualToLogicalMap = [
+        [0, 0],
+        [1, 0],
+        [2, 0],
+      ];
+
+      const { stdout, unmount } = renderWithProviders(
+        <InputPrompt {...props} />,
+      );
+      await wait();
+
+      const frame = stdout.lastFrame();
+      const lines = frame!.split('\n');
+      // The line with the cursor should just be an inverted space inside the box border
+      expect(
+        lines.find((l) => l.includes(chalk.inverse(' '))),
+      ).not.toBeUndefined();
+      unmount();
+    });
+  });
+
+  describe('multiline rendering', () => {
+    it('should correctly render multiline input including blank lines', async () => {
+      const text = 'hello\n\nworld';
+      mockBuffer.text = text;
+      mockBuffer.lines = text.split('\n');
+      mockBuffer.viewportVisualLines = text.split('\n');
+      mockBuffer.allVisualLines = text.split('\n');
+      mockBuffer.visualCursor = [2, 5]; // cursor at the end of "world"
+      // Provide a visual-to-logical mapping for each visual line
+      mockBuffer.visualToLogicalMap = [
+        [0, 0], // 'hello' starts at col 0 of logical line 0
+        [1, 0], // '' (blank) is logical line 1, col 0
+        [2, 0], // 'world' is logical line 2, col 0
+      ];
+
+      const { stdout, unmount } = renderWithProviders(
+        <InputPrompt {...props} />,
+      );
+      await wait();
+
+      const frame = stdout.lastFrame();
+      // Check that all lines, including the empty one, are rendered.
+      // This implicitly tests that the Box wrapper provides height for the empty line.
+      expect(frame).toContain('hello');
+      expect(frame).toContain(`world${chalk.inverse(' ')}`);
+
+      const outputLines = frame!.split('\n');
+      // The number of lines should be 2 for the border plus 3 for the content.
+      expect(outputLines.length).toBe(5);
+      unmount();
+    });
+  });
+
   describe('multiline paste', () => {
     it.each([
       {
@@ -1245,6 +1530,77 @@ describe('InputPrompt', () => {
     });
   });
 
+  describe('paste auto-submission protection', () => {
+    it('should prevent auto-submission immediately after paste with newlines', async () => {
+      const { stdin, unmount } = renderWithProviders(
+        <InputPrompt {...props} />,
+      );
+      await wait();
+
+      // First type some text manually
+      stdin.write('test command');
+      await wait();
+
+      // Simulate a paste operation (this should set the paste protection)
+      stdin.write(`\x1b[200~\npasted content\x1b[201~`);
+      await wait();
+
+      // Simulate an Enter key press immediately after paste
+      stdin.write('\r');
+      await wait();
+
+      // Verify that onSubmit was NOT called due to recent paste protection
+      expect(props.onSubmit).not.toHaveBeenCalled();
+
+      unmount();
+    });
+
+    it('should allow submission after paste protection timeout', async () => {
+      // Set up buffer with text for submission
+      props.buffer.text = 'test command';
+
+      const { stdin, unmount } = renderWithProviders(
+        <InputPrompt {...props} />,
+      );
+      await wait();
+
+      // Simulate a paste operation (this sets the protection)
+      stdin.write(`\x1b[200~\npasted\x1b[201~`);
+      await wait();
+
+      // Wait for the protection timeout to naturally expire
+      await new Promise((resolve) => setTimeout(resolve, 600));
+
+      // Now Enter should work normally
+      stdin.write('\r');
+      await wait();
+
+      // Verify that onSubmit was called after the timeout
+      expect(props.onSubmit).toHaveBeenCalledWith('test command');
+
+      unmount();
+    });
+
+    it('should not interfere with normal Enter key submission when no recent paste', async () => {
+      // Set up buffer with text before rendering to ensure submission works
+      props.buffer.text = 'normal command';
+
+      const { stdin, unmount } = renderWithProviders(
+        <InputPrompt {...props} />,
+      );
+      await wait();
+
+      // Press Enter without any recent paste
+      stdin.write('\r');
+      await wait();
+
+      // Verify that onSubmit was called normally
+      expect(props.onSubmit).toHaveBeenCalledWith('normal command');
+
+      unmount();
+    });
+  });
+
   describe('enhanced input UX - double ESC clear functionality', () => {
     it('should clear buffer on second ESC press', async () => {
       const onEscapePromptChange = vi.fn();
@@ -1372,12 +1728,27 @@ describe('InputPrompt', () => {
     });
 
     it('invokes reverse search on Ctrl+R', async () => {
+      // Mock the reverse search completion to return suggestions
+      mockedUseReverseSearchCompletion.mockReturnValue({
+        ...mockReverseSearchCompletion,
+        suggestions: [
+          { label: 'echo hello', value: 'echo hello' },
+          { label: 'echo world', value: 'echo world' },
+          { label: 'ls', value: 'ls' },
+        ],
+        showSuggestions: true,
+        activeSuggestionIndex: 0,
+      });
+
       const { stdin, stdout, unmount } = renderWithProviders(
         <InputPrompt {...props} />,
       );
       await wait();
 
-      stdin.write('\x12');
+      // Trigger reverse search with Ctrl+R
+      act(() => {
+        stdin.write('\x12');
+      });
       await wait();
 
       const frame = stdout.lastFrame();
@@ -1409,6 +1780,27 @@ describe('InputPrompt', () => {
     });
 
     it('completes the highlighted entry on Tab and exits reverse-search', async () => {
+      // Mock the reverse search completion
+      const mockHandleAutocomplete = vi.fn(() => {
+        props.buffer.setText('echo hello');
+      });
+
+      mockedUseReverseSearchCompletion.mockImplementation(
+        (buffer, shellHistory, reverseSearchActive) => ({
+          ...mockReverseSearchCompletion,
+          suggestions: reverseSearchActive
+            ? [
+                { label: 'echo hello', value: 'echo hello' },
+                { label: 'echo world', value: 'echo world' },
+                { label: 'ls', value: 'ls' },
+              ]
+            : [],
+          showSuggestions: reverseSearchActive,
+          activeSuggestionIndex: reverseSearchActive ? 0 : -1,
+          handleAutocomplete: mockHandleAutocomplete,
+        }),
+      );
+
       const { stdin, stdout, unmount } = renderWithProviders(
         <InputPrompt {...props} />,
       );
@@ -1426,19 +1818,26 @@ describe('InputPrompt', () => {
       act(() => {
         stdin.write('\t');
       });
+      await wait();
 
-      await waitFor(
-        () => {
-          expect(stdout.lastFrame()).not.toContain('(r:)');
-        },
-        { timeout: 5000 },
-      ); // Increase timeout
-
+      expect(mockHandleAutocomplete).toHaveBeenCalledWith(0);
       expect(props.buffer.setText).toHaveBeenCalledWith('echo hello');
       unmount();
-    });
+    }, 15000);
 
     it('submits the highlighted entry on Enter and exits reverse-search', async () => {
+      // Mock the reverse search completion to return suggestions
+      mockedUseReverseSearchCompletion.mockReturnValue({
+        ...mockReverseSearchCompletion,
+        suggestions: [
+          { label: 'echo hello', value: 'echo hello' },
+          { label: 'echo world', value: 'echo world' },
+          { label: 'ls', value: 'ls' },
+        ],
+        showSuggestions: true,
+        activeSuggestionIndex: 0,
+      });
+
       const { stdin, stdout, unmount } = renderWithProviders(
         <InputPrompt {...props} />,
       );
@@ -1520,4 +1919,206 @@ describe('InputPrompt', () => {
       unmount();
     });
   });
+
+  describe('command search (Ctrl+R when not in shell)', () => {
+    it('enters command search on Ctrl+R and shows suggestions', async () => {
+      props.shellModeActive = false;
+
+      vi.mocked(useReverseSearchCompletion).mockImplementation(
+        (buffer, data, isActive) => ({
+          ...mockReverseSearchCompletion,
+          suggestions: isActive
+            ? [
+                { label: 'git commit -m "msg"', value: 'git commit -m "msg"' },
+                { label: 'git push', value: 'git push' },
+              ]
+            : [],
+          showSuggestions: !!isActive,
+          activeSuggestionIndex: isActive ? 0 : -1,
+        }),
+      );
+
+      const { stdin, stdout, unmount } = renderWithProviders(
+        <InputPrompt {...props} />,
+      );
+      await wait();
+
+      act(() => {
+        stdin.write('\x12'); // Ctrl+R
+      });
+      await wait();
+
+      const frame = stdout.lastFrame() ?? '';
+      expect(frame).toContain('(r:)');
+      expect(frame).toContain('git commit');
+      expect(frame).toContain('git push');
+      unmount();
+    });
+
+    it('expands and collapses long suggestion via Right/Left arrows', async () => {
+      props.shellModeActive = false;
+      const longValue = 'l'.repeat(200);
+
+      vi.mocked(useReverseSearchCompletion).mockReturnValue({
+        ...mockReverseSearchCompletion,
+        suggestions: [{ label: longValue, value: longValue, matchedIndex: 0 }],
+        showSuggestions: true,
+        activeSuggestionIndex: 0,
+        visibleStartIndex: 0,
+        isLoadingSuggestions: false,
+      });
+
+      const { stdin, stdout, unmount } = renderWithProviders(
+        <InputPrompt {...props} />,
+      );
+      await wait();
+
+      stdin.write('\x12');
+      await wait();
+
+      expect(clean(stdout.lastFrame())).toContain('→');
+
+      stdin.write('\u001B[C');
+      await wait(200);
+      expect(clean(stdout.lastFrame())).toContain('←');
+      expect(stdout.lastFrame()).toMatchSnapshot(
+        'command-search-expanded-match',
+      );
+
+      stdin.write('\u001B[D');
+      await wait();
+      expect(clean(stdout.lastFrame())).toContain('→');
+      expect(stdout.lastFrame()).toMatchSnapshot(
+        'command-search-collapsed-match',
+      );
+      unmount();
+    });
+
+    it('renders match window and expanded view (snapshots)', async () => {
+      props.shellModeActive = false;
+      props.buffer.setText('commit');
+
+      const label = 'git commit -m "feat: add search" in src/app';
+      const matchedIndex = label.indexOf('commit');
+
+      vi.mocked(useReverseSearchCompletion).mockReturnValue({
+        ...mockReverseSearchCompletion,
+        suggestions: [{ label, value: label, matchedIndex }],
+        showSuggestions: true,
+        activeSuggestionIndex: 0,
+        visibleStartIndex: 0,
+        isLoadingSuggestions: false,
+      });
+
+      const { stdin, stdout, unmount } = renderWithProviders(
+        <InputPrompt {...props} />,
+      );
+      await wait();
+
+      stdin.write('\x12');
+      await wait();
+      expect(stdout.lastFrame()).toMatchSnapshot(
+        'command-search-collapsed-match',
+      );
+
+      stdin.write('\u001B[C');
+      await wait();
+      expect(stdout.lastFrame()).toMatchSnapshot(
+        'command-search-expanded-match',
+      );
+
+      unmount();
+    });
+
+    it('does not show expand/collapse indicator for short suggestions', async () => {
+      props.shellModeActive = false;
+      const shortValue = 'echo hello';
+
+      vi.mocked(useReverseSearchCompletion).mockReturnValue({
+        ...mockReverseSearchCompletion,
+        suggestions: [{ label: shortValue, value: shortValue }],
+        showSuggestions: true,
+        activeSuggestionIndex: 0,
+        visibleStartIndex: 0,
+        isLoadingSuggestions: false,
+      });
+
+      const { stdin, stdout, unmount } = renderWithProviders(
+        <InputPrompt {...props} />,
+      );
+      await wait();
+
+      stdin.write('\x12');
+      await wait();
+
+      const frame = clean(stdout.lastFrame());
+      expect(frame).not.toContain('→');
+      expect(frame).not.toContain('←');
+      unmount();
+    });
+  });
+
+  describe('snapshots', () => {
+    it('should render correctly in shell mode', async () => {
+      props.shellModeActive = true;
+      const { stdout, unmount } = renderWithProviders(
+        <InputPrompt {...props} />,
+      );
+      await wait();
+      expect(stdout.lastFrame()).toMatchSnapshot();
+      unmount();
+    });
+
+    it('should render correctly when accepting edits', async () => {
+      props.approvalMode = ApprovalMode.AUTO_EDIT;
+      const { stdout, unmount } = renderWithProviders(
+        <InputPrompt {...props} />,
+      );
+      await wait();
+      expect(stdout.lastFrame()).toMatchSnapshot();
+      unmount();
+    });
+
+    it('should render correctly in yolo mode', async () => {
+      props.approvalMode = ApprovalMode.YOLO;
+      const { stdout, unmount } = renderWithProviders(
+        <InputPrompt {...props} />,
+      );
+      await wait();
+      expect(stdout.lastFrame()).toMatchSnapshot();
+      unmount();
+    });
+
+    it('should not show inverted cursor when shell is focused', async () => {
+      props.isEmbeddedShellFocused = true;
+      props.focus = false;
+      const { stdout, unmount } = renderWithProviders(
+        <InputPrompt {...props} />,
+      );
+      await wait();
+      expect(stdout.lastFrame()).not.toContain(`{chalk.inverse(' ')}`);
+      // This snapshot is good to make sure there was an input prompt but does
+      // not show the inverted cursor because snapshots do not show colors.
+      expect(stdout.lastFrame()).toMatchSnapshot();
+      unmount();
+    });
+  });
+
+  it('should still allow input when shell is not focused', async () => {
+    const { stdin, unmount } = renderWithProviders(<InputPrompt {...props} />, {
+      shellFocus: false,
+    });
+    await wait();
+
+    stdin.write('a');
+    await wait();
+
+    expect(mockBuffer.handleInput).toHaveBeenCalled();
+    unmount();
+  });
 });
+function clean(str: string | undefined): string {
+  if (!str) return '';
+  // Remove ANSI escape codes and trim whitespace
+  return stripAnsi(str).trim();
+}

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

@@ -7,8 +7,8 @@
 import type React from 'react';
 import { useCallback, useEffect, useState, useRef } from 'react';
 import { Box, Text } from 'ink';
+import { SuggestionsDisplay, MAX_WIDTH } from './SuggestionsDisplay.js';
 import { theme } from '../semantic-colors.js';
-import { SuggestionsDisplay } from './SuggestionsDisplay.js';
 import { useInputHistory } from '../hooks/useInputHistory.js';
 import type { TextBuffer } from './shared/text-buffer.js';
 import { logicalPosToOffset } from './shared/text-buffer.js';
@@ -23,6 +23,11 @@ import { useKeypress } from '../hooks/useKeypress.js';
 import { keyMatchers, Command } from '../keyMatchers.js';
 import type { CommandContext, SlashCommand } from '../commands/types.js';
 import type { Config } from '@qwen-code/qwen-code-core';
+import { ApprovalMode } from '@qwen-code/qwen-code-core';
+import {
+  parseInputForHighlighting,
+  buildSegmentsForVisualSlice,
+} from '../utils/highlight.js';
 import {
   clipboardHasImage,
   saveClipboardImage,
@@ -30,7 +35,7 @@ import {
 } from '../utils/clipboardUtils.js';
 import * as path from 'node:path';
 import { SCREEN_READER_USER_PREFIX } from '../textConstants.js';
-
+import { useShellFocusState } from '../contexts/ShellFocusContext.js';
 export interface InputPromptProps {
   buffer: TextBuffer;
   onSubmit: (value: string) => void;
@@ -45,10 +50,37 @@ export interface InputPromptProps {
   suggestionsWidth: number;
   shellModeActive: boolean;
   setShellModeActive: (value: boolean) => void;
+  approvalMode: ApprovalMode;
   onEscapePromptChange?: (showPrompt: boolean) => void;
   vimHandleInput?: (key: Key) => boolean;
+  isEmbeddedShellFocused?: boolean;
 }
 
+// The input content, input container, and input suggestions list may have different widths
+export const calculatePromptWidths = (terminalWidth: number) => {
+  const widthFraction = 0.9;
+  const FRAME_PADDING_AND_BORDER = 4; // Border (2) + padding (2)
+  const PROMPT_PREFIX_WIDTH = 2; // '> ' or '! '
+  const MIN_CONTENT_WIDTH = 2;
+
+  const innerContentWidth =
+    Math.floor(terminalWidth * widthFraction) -
+    FRAME_PADDING_AND_BORDER -
+    PROMPT_PREFIX_WIDTH;
+
+  const inputWidth = Math.max(MIN_CONTENT_WIDTH, innerContentWidth);
+  const FRAME_OVERHEAD = FRAME_PADDING_AND_BORDER + PROMPT_PREFIX_WIDTH;
+  const containerWidth = inputWidth + FRAME_OVERHEAD;
+  const suggestionsWidth = Math.max(20, Math.floor(terminalWidth * 1.0));
+
+  return {
+    inputWidth,
+    containerWidth,
+    suggestionsWidth,
+    frameOverhead: FRAME_OVERHEAD,
+  } as const;
+};
+
 export const InputPrompt: React.FC<InputPromptProps> = ({
   buffer,
   onSubmit,
@@ -63,13 +95,18 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
   suggestionsWidth,
   shellModeActive,
   setShellModeActive,
+  approvalMode,
   onEscapePromptChange,
   vimHandleInput,
+  isEmbeddedShellFocused,
 }) => {
+  const isShellFocused = useShellFocusState();
   const [justNavigatedHistory, setJustNavigatedHistory] = useState(false);
   const [escPressCount, setEscPressCount] = useState(0);
   const [showEscapePrompt, setShowEscapePrompt] = useState(false);
   const escapeTimerRef = useRef<NodeJS.Timeout | null>(null);
+  const [recentPasteTime, setRecentPasteTime] = useState<number | null>(null);
+  const pasteTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
   const [dirs, setDirs] = useState<readonly string[]>(
     config.getWorkspaceContext().getDirectories(),
@@ -81,12 +118,15 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
     }
   }, [dirs.length, dirsChanged]);
   const [reverseSearchActive, setReverseSearchActive] = useState(false);
+  const [commandSearchActive, setCommandSearchActive] = useState(false);
   const [textBeforeReverseSearch, setTextBeforeReverseSearch] = useState('');
   const [cursorPosition, setCursorPosition] = useState<[number, number]>([
     0, 0,
   ]);
-  const shellHistory = useShellHistory(config.getProjectRoot(), config.storage);
-  const historyData = shellHistory.history;
+  const [expandedSuggestionIndex, setExpandedSuggestionIndex] =
+    useState<number>(-1);
+  const shellHistory = useShellHistory(config.getProjectRoot());
+  const shellHistoryData = shellHistory.history;
 
   const completion = useCommandCompletion(
     buffer,
@@ -100,12 +140,23 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
 
   const reverseSearchCompletion = useReverseSearchCompletion(
     buffer,
-    historyData,
+    shellHistoryData,
     reverseSearchActive,
   );
+
+  const commandSearchCompletion = useReverseSearchCompletion(
+    buffer,
+    userMessages,
+    commandSearchActive,
+  );
+
   const resetCompletionState = completion.resetCompletionState;
   const resetReverseSearchCompletionState =
     reverseSearchCompletion.resetCompletionState;
+  const resetCommandSearchCompletionState =
+    commandSearchCompletion.resetCompletionState;
+
+  const showCursor = focus && isShellFocused && !isEmbeddedShellFocused;
 
   const resetEscapeState = useCallback(() => {
     if (escapeTimerRef.current) {
@@ -129,6 +180,9 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
       if (escapeTimerRef.current) {
         clearTimeout(escapeTimerRef.current);
       }
+      if (pasteTimeoutRef.current) {
+        clearTimeout(pasteTimeoutRef.current);
+      }
     },
     [],
   );
@@ -178,6 +232,8 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
     if (justNavigatedHistory) {
       resetCompletionState();
       resetReverseSearchCompletionState();
+      resetCommandSearchCompletionState();
+      setExpandedSuggestionIndex(-1);
       setJustNavigatedHistory(false);
     }
   }, [
@@ -186,6 +242,7 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
     resetCompletionState,
     setJustNavigatedHistory,
     resetReverseSearchCompletionState,
+    resetCommandSearchCompletionState,
   ]);
 
   // Handle clipboard image pasting with Ctrl+V
@@ -238,12 +295,29 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
 
   const handleInput = useCallback(
     (key: Key) => {
+      // TODO(jacobr): this special case is likely not needed anymore.
+      // We should probably stop supporting paste if the InputPrompt is not
+      // focused.
       /// We want to handle paste even when not focused to support drag and drop.
       if (!focus && !key.paste) {
         return;
       }
 
       if (key.paste) {
+        // Record paste time to prevent accidental auto-submission
+        setRecentPasteTime(Date.now());
+
+        // Clear any existing paste timeout
+        if (pasteTimeoutRef.current) {
+          clearTimeout(pasteTimeoutRef.current);
+        }
+
+        // Clear the paste protection after a safe delay
+        pasteTimeoutRef.current = setTimeout(() => {
+          setRecentPasteTime(null);
+          pasteTimeoutRef.current = null;
+        }, 500);
+
         // Ensure we never accidentally interpret paste as regular input.
         buffer.handleInput(key);
         return;
@@ -271,9 +345,12 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
       }
 
       if (keyMatchers[Command.ESCAPE](key)) {
-        if (reverseSearchActive) {
-          setReverseSearchActive(false);
-          reverseSearchCompletion.resetCompletionState();
+        const cancelSearch = (
+          setActive: (active: boolean) => void,
+          resetCompletion: () => void,
+        ) => {
+          setActive(false);
+          resetCompletion();
           buffer.setText(textBeforeReverseSearch);
           const offset = logicalPosToOffset(
             buffer.lines,
@@ -281,8 +358,24 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
             cursorPosition[1],
           );
           buffer.moveToOffset(offset);
+          setExpandedSuggestionIndex(-1);
+        };
+
+        if (reverseSearchActive) {
+          cancelSearch(
+            setReverseSearchActive,
+            reverseSearchCompletion.resetCompletionState,
+          );
           return;
         }
+        if (commandSearchActive) {
+          cancelSearch(
+            setCommandSearchActive,
+            commandSearchCompletion.resetCompletionState,
+          );
+          return;
+        }
+
         if (shellModeActive) {
           setShellModeActive(false);
           resetEscapeState();
@@ -291,6 +384,7 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
 
         if (completion.showSuggestions) {
           completion.resetCompletionState();
+          setExpandedSuggestionIndex(-1);
           resetEscapeState();
           return;
         }
@@ -329,14 +423,24 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
         return;
       }
 
-      if (reverseSearchActive) {
+      if (reverseSearchActive || commandSearchActive) {
+        const isCommandSearch = commandSearchActive;
+
+        const sc = isCommandSearch
+          ? commandSearchCompletion
+          : reverseSearchCompletion;
+
         const {
           activeSuggestionIndex,
           navigateUp,
           navigateDown,
           showSuggestions,
           suggestions,
-        } = reverseSearchCompletion;
+        } = sc;
+        const setActive = isCommandSearch
+          ? setCommandSearchActive
+          : setReverseSearchActive;
+        const resetState = sc.resetCompletionState;
 
         if (showSuggestions) {
           if (keyMatchers[Command.NAVIGATION_UP](key)) {
@@ -347,10 +451,22 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
             navigateDown();
             return;
           }
+          if (keyMatchers[Command.COLLAPSE_SUGGESTION](key)) {
+            if (suggestions[activeSuggestionIndex].value.length >= MAX_WIDTH) {
+              setExpandedSuggestionIndex(-1);
+              return;
+            }
+          }
+          if (keyMatchers[Command.EXPAND_SUGGESTION](key)) {
+            if (suggestions[activeSuggestionIndex].value.length >= MAX_WIDTH) {
+              setExpandedSuggestionIndex(activeSuggestionIndex);
+              return;
+            }
+          }
           if (keyMatchers[Command.ACCEPT_SUGGESTION_REVERSE_SEARCH](key)) {
-            reverseSearchCompletion.handleAutocomplete(activeSuggestionIndex);
-            reverseSearchCompletion.resetCompletionState();
-            setReverseSearchActive(false);
+            sc.handleAutocomplete(activeSuggestionIndex);
+            resetState();
+            setActive(false);
             return;
           }
         }
@@ -361,8 +477,8 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
               ? suggestions[activeSuggestionIndex].value
               : buffer.text;
           handleSubmitAndClear(textToSubmit);
-          reverseSearchCompletion.resetCompletionState();
-          setReverseSearchActive(false);
+          resetState();
+          setActive(false);
           return;
         }
 
@@ -385,10 +501,12 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
         if (completion.suggestions.length > 1) {
           if (keyMatchers[Command.COMPLETION_UP](key)) {
             completion.navigateUp();
+            setExpandedSuggestionIndex(-1); // Reset expansion when navigating
             return;
           }
           if (keyMatchers[Command.COMPLETION_DOWN](key)) {
             completion.navigateDown();
+            setExpandedSuggestionIndex(-1); // Reset expansion when navigating
             return;
           }
         }
@@ -401,6 +519,7 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
                 : completion.activeSuggestionIndex;
             if (targetIndex < completion.suggestions.length) {
               completion.handleAutocomplete(targetIndex);
+              setExpandedSuggestionIndex(-1); // Reset expansion after selection
             }
           }
           return;
@@ -418,6 +537,13 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
       }
 
       if (!shellModeActive) {
+        if (keyMatchers[Command.REVERSE_SEARCH](key)) {
+          setCommandSearchActive(true);
+          setTextBeforeReverseSearch(buffer.text);
+          setCursorPosition(buffer.cursor);
+          return;
+        }
+
         if (keyMatchers[Command.HISTORY_UP](key)) {
           inputHistory.navigateUp();
           return;
@@ -459,6 +585,12 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
 
       if (keyMatchers[Command.SUBMIT](key)) {
         if (buffer.text.trim()) {
+          // Check if a paste operation occurred recently to prevent accidental auto-submission
+          if (recentPasteTime !== null) {
+            // Paste occurred recently, ignore this submit to prevent auto-execution
+            return;
+          }
+
           const [row, col] = buffer.cursor;
           const line = buffer.lines[row];
           const charBefore = col > 0 ? cpSlice(line, col - 1, col) : '';
@@ -506,6 +638,11 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
         return;
       }
 
+      if (keyMatchers[Command.DELETE_WORD_BACKWARD](key)) {
+        buffer.deleteWordLeft();
+        return;
+      }
+
       // External editor
       if (keyMatchers[Command.OPEN_EXTERNAL_EDITOR](key)) {
         buffer.openInExternalEditor();
@@ -530,6 +667,7 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
         !key.meta
       ) {
         completion.promptCompletion.clear();
+        setExpandedSuggestionIndex(-1);
       }
     },
     [
@@ -552,12 +690,13 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
       reverseSearchActive,
       textBeforeReverseSearch,
       cursorPosition,
+      recentPasteTime,
+      commandSearchActive,
+      commandSearchCompletion,
     ],
   );
 
-  useKeypress(handleInput, {
-    isActive: true,
-  });
+  useKeypress(handleInput, { isActive: !isEmbeddedShellFocused });
 
   const linesToRender = buffer.viewportVisualLines;
   const [cursorVisualRowAbsolute, cursorVisualColAbsolute] =
@@ -676,18 +815,47 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
   ]);
 
   const { inlineGhost, additionalLines } = getGhostTextLines();
+  const getActiveCompletion = () => {
+    if (commandSearchActive) return commandSearchCompletion;
+    if (reverseSearchActive) return reverseSearchCompletion;
+    return completion;
+  };
+
+  const activeCompletion = getActiveCompletion();
+  const shouldShowSuggestions = activeCompletion.showSuggestions;
+
+  const showAutoAcceptStyling =
+    !shellModeActive && approvalMode === ApprovalMode.AUTO_EDIT;
+  const showYoloStyling =
+    !shellModeActive && approvalMode === ApprovalMode.YOLO;
+
+  let statusColor: string | undefined;
+  let statusText = '';
+  if (shellModeActive) {
+    statusColor = theme.ui.symbol;
+    statusText = 'Shell mode';
+  } else if (showYoloStyling) {
+    statusColor = theme.status.error;
+    statusText = 'YOLO mode';
+  } else if (showAutoAcceptStyling) {
+    statusColor = theme.status.warning;
+    statusText = 'Accepting edits';
+  }
 
   return (
     <>
       <Box
         borderStyle="round"
         borderColor={
-          shellModeActive ? theme.status.warning : theme.border.focused
+          isShellFocused && !isEmbeddedShellFocused
+            ? (statusColor ?? theme.border.focused)
+            : theme.border.default
         }
         paddingX={1}
       >
         <Text
-          color={shellModeActive ? theme.status.warning : theme.text.accent}
+          color={statusColor ?? theme.text.accent}
+          aria-label={statusText || undefined}
         >
           {shellModeActive ? (
             reverseSearchActive ? (
@@ -698,15 +866,19 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
                 (r:){' '}
               </Text>
             ) : (
-              '! '
+              '!'
             )
+          ) : commandSearchActive ? (
+            <Text color={theme.text.accent}>(r:) </Text>
+          ) : showYoloStyling ? (
+            '*'
           ) : (
-            '> '
-          )}
+            '>'
+          )}{' '}
         </Text>
         <Box flexGrow={1} flexDirection="column">
           {buffer.text.length === 0 && placeholder ? (
-            focus ? (
+            showCursor ? (
               <Text>
                 {chalk.inverse(placeholder.slice(0, 1))}
                 <Text color={theme.text.secondary}>{placeholder.slice(1)}</Text>
@@ -717,70 +889,113 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
           ) : (
             linesToRender
               .map((lineText, visualIdxInRenderedSet) => {
+                const absoluteVisualIdx =
+                  scrollVisualRow + visualIdxInRenderedSet;
+                const mapEntry = buffer.visualToLogicalMap[absoluteVisualIdx];
                 const cursorVisualRow =
                   cursorVisualRowAbsolute - scrollVisualRow;
-                let display = cpSlice(lineText, 0, inputWidth);
-
                 const isOnCursorLine =
                   focus && visualIdxInRenderedSet === cursorVisualRow;
-                const currentLineGhost = isOnCursorLine ? inlineGhost : '';
 
-                const ghostWidth = stringWidth(currentLineGhost);
+                const renderedLine: React.ReactNode[] = [];
 
-                if (focus && visualIdxInRenderedSet === cursorVisualRow) {
-                  const relativeVisualColForHighlight = cursorVisualColAbsolute;
+                const [logicalLineIdx, logicalStartCol] = mapEntry;
+                const logicalLine = buffer.lines[logicalLineIdx] || '';
+                const tokens = parseInputForHighlighting(
+                  logicalLine,
+                  logicalLineIdx,
+                );
 
-                  if (relativeVisualColForHighlight >= 0) {
-                    if (relativeVisualColForHighlight < cpLen(display)) {
-                      const charToHighlight =
-                        cpSlice(
-                          display,
-                          relativeVisualColForHighlight,
-                          relativeVisualColForHighlight + 1,
-                        ) || ' ';
-                      const highlighted = chalk.inverse(charToHighlight);
-                      display =
-                        cpSlice(display, 0, relativeVisualColForHighlight) +
-                        highlighted +
-                        cpSlice(display, relativeVisualColForHighlight + 1);
-                    } else if (
-                      relativeVisualColForHighlight === cpLen(display)
+                const visualStart = logicalStartCol;
+                const visualEnd = logicalStartCol + cpLen(lineText);
+                const segments = buildSegmentsForVisualSlice(
+                  tokens,
+                  visualStart,
+                  visualEnd,
+                );
+
+                let charCount = 0;
+                segments.forEach((seg, segIdx) => {
+                  const segLen = cpLen(seg.text);
+                  let display = seg.text;
+
+                  if (isOnCursorLine) {
+                    const relativeVisualColForHighlight =
+                      cursorVisualColAbsolute;
+                    const segStart = charCount;
+                    const segEnd = segStart + segLen;
+                    if (
+                      relativeVisualColForHighlight >= segStart &&
+                      relativeVisualColForHighlight < segEnd
                     ) {
-                      if (!currentLineGhost) {
-                        display = display + chalk.inverse(' ');
-                      }
+                      const charToHighlight = cpSlice(
+                        seg.text,
+                        relativeVisualColForHighlight - segStart,
+                        relativeVisualColForHighlight - segStart + 1,
+                      );
+                      const highlighted = showCursor
+                        ? chalk.inverse(charToHighlight)
+                        : charToHighlight;
+                      display =
+                        cpSlice(
+                          seg.text,
+                          0,
+                          relativeVisualColForHighlight - segStart,
+                        ) +
+                        highlighted +
+                        cpSlice(
+                          seg.text,
+                          relativeVisualColForHighlight - segStart + 1,
+                        );
                     }
+                    charCount = segEnd;
+                  }
+
+                  const color =
+                    seg.type === 'command' || seg.type === 'file'
+                      ? theme.text.accent
+                      : theme.text.primary;
+
+                  renderedLine.push(
+                    <Text key={`token-${segIdx}`} color={color}>
+                      {display}
+                    </Text>,
+                  );
+                });
+
+                const currentLineGhost = isOnCursorLine ? inlineGhost : '';
+                if (
+                  isOnCursorLine &&
+                  cursorVisualColAbsolute === cpLen(lineText)
+                ) {
+                  if (!currentLineGhost) {
+                    renderedLine.push(
+                      <Text key={`cursor-end-${cursorVisualColAbsolute}`}>
+                        {showCursor ? chalk.inverse(' ') : ' '}
+                      </Text>,
+                    );
                   }
                 }
 
                 const showCursorBeforeGhost =
                   focus &&
-                  visualIdxInRenderedSet === cursorVisualRow &&
-                  cursorVisualColAbsolute ===
-                    // eslint-disable-next-line no-control-regex
-                    cpLen(display.replace(/\x1b\[[0-9;]*m/g, '')) &&
+                  isOnCursorLine &&
+                  cursorVisualColAbsolute === cpLen(lineText) &&
                   currentLineGhost;
 
-                const actualDisplayWidth = stringWidth(display);
-                const cursorWidth = showCursorBeforeGhost ? 1 : 0;
-                const totalContentWidth =
-                  actualDisplayWidth + cursorWidth + ghostWidth;
-                const trailingPadding = Math.max(
-                  0,
-                  inputWidth - totalContentWidth,
-                );
-
                 return (
-                  <Text key={`line-${visualIdxInRenderedSet}`}>
-                    {display}
-                    {showCursorBeforeGhost && chalk.inverse(' ')}
-                    {currentLineGhost && (
-                      <Text color={theme.text.secondary}>
-                        {currentLineGhost}
-                      </Text>
-                    )}
-                    {trailingPadding > 0 && ' '.repeat(trailingPadding)}
-                  </Text>
+                  <Box key={`line-${visualIdxInRenderedSet}`} height={1}>
+                    <Text>
+                      {renderedLine}
+                      {showCursorBeforeGhost &&
+                        (showCursor ? chalk.inverse(' ') : ' ')}
+                      {currentLineGhost && (
+                        <Text color={theme.text.secondary}>
+                          {currentLineGhost}
+                        </Text>
+                      )}
+                    </Text>
+                  </Box>
                 );
               })
               .concat(
@@ -803,27 +1018,23 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
           )}
         </Box>
       </Box>
-      {completion.showSuggestions && (
+      {shouldShowSuggestions && (
         <Box paddingRight={2}>
           <SuggestionsDisplay
-            suggestions={completion.suggestions}
-            activeIndex={completion.activeSuggestionIndex}
-            isLoading={completion.isLoadingSuggestions}
+            suggestions={activeCompletion.suggestions}
+            activeIndex={activeCompletion.activeSuggestionIndex}
+            isLoading={activeCompletion.isLoadingSuggestions}
             width={suggestionsWidth}
-            scrollOffset={completion.visibleStartIndex}
-            userInput={buffer.text}
-          />
-        </Box>
-      )}
-      {reverseSearchActive && (
-        <Box paddingRight={2}>
-          <SuggestionsDisplay
-            suggestions={reverseSearchCompletion.suggestions}
-            activeIndex={reverseSearchCompletion.activeSuggestionIndex}
-            isLoading={reverseSearchCompletion.isLoadingSuggestions}
-            width={suggestionsWidth}
-            scrollOffset={reverseSearchCompletion.visibleStartIndex}
+            scrollOffset={activeCompletion.visibleStartIndex}
             userInput={buffer.text}
+            mode={
+              buffer.text.startsWith('/') &&
+              !reverseSearchActive &&
+              !commandSearchActive
+                ? 'slash'
+                : 'reverse'
+            }
+            expandedIndex={expandedSuggestionIndex}
           />
         </Box>
       )}

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

@@ -233,6 +233,21 @@ describe('<LoadingIndicator />', () => {
     expect(output).not.toContain('This should not be displayed');
   });
 
+  it('should truncate long primary text instead of wrapping', () => {
+    const { lastFrame } = renderWithContext(
+      <LoadingIndicator
+        {...defaultProps}
+        currentLoadingPhrase={
+          'This is an extremely long loading phrase that should be truncated in the UI to keep the primary line concise.'
+        }
+      />,
+      StreamingState.Responding,
+      80,
+    );
+
+    expect(lastFrame()).toMatchSnapshot();
+  });
+
   describe('responsive layout', () => {
     it('should render on a single line on a wide terminal', () => {
       const { lastFrame } = renderWithContext(

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

@@ -7,7 +7,7 @@
 import type { ThoughtSummary } from '@qwen-code/qwen-code-core';
 import type React from 'react';
 import { Box, Text } from 'ink';
-import { Colors } from '../colors.js';
+import { theme } from '../semantic-colors.js';
 import { useStreamingContext } from '../contexts/StreamingContext.js';
 import { StreamingState } from '../types.js';
 import { GeminiRespondingSpinner } from './GeminiRespondingSpinner.js';
@@ -62,10 +62,12 @@ export const LoadingIndicator: React.FC<LoadingIndicatorProps> = ({
             />
           </Box>
           {primaryText && (
-            <Text color={Colors.AccentPurple}>{primaryText}</Text>
+            <Text color={theme.text.accent} wrap="truncate-end">
+              {primaryText}
+            </Text>
           )}
           {!isNarrow && cancelAndTimerContent && (
-            <Text color={Colors.Gray}> {cancelAndTimerContent}</Text>
+            <Text color={theme.text.secondary}> {cancelAndTimerContent}</Text>
           )}
         </Box>
         {!isNarrow && <Box flexGrow={1}>{/* Spacer */}</Box>}
@@ -73,7 +75,7 @@ export const LoadingIndicator: React.FC<LoadingIndicatorProps> = ({
       </Box>
       {isNarrow && cancelAndTimerContent && (
         <Box>
-          <Text color={Colors.Gray}>{cancelAndTimerContent}</Text>
+          <Text color={theme.text.secondary}>{cancelAndTimerContent}</Text>
         </Box>
       )}
       {isNarrow && rightContent && <Box>{rightContent}</Box>}

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

@@ -0,0 +1,39 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { renderWithProviders } from '../../test-utils/render.js';
+import { describe, it, expect, vi } from 'vitest';
+import { LoopDetectionConfirmation } from './LoopDetectionConfirmation.js';
+
+describe('LoopDetectionConfirmation', () => {
+  const onComplete = vi.fn();
+
+  it('renders correctly', () => {
+    const { lastFrame } = renderWithProviders(
+      <LoopDetectionConfirmation onComplete={onComplete} />,
+    );
+    expect(lastFrame()).toMatchSnapshot();
+  });
+
+  it('contains the expected options', () => {
+    const { lastFrame } = renderWithProviders(
+      <LoopDetectionConfirmation onComplete={onComplete} />,
+    );
+    const output = lastFrame()!.toString();
+
+    expect(output).toContain('A potential loop was detected');
+    expect(output).toContain('Keep loop detection enabled (esc)');
+    expect(output).toContain('Disable loop detection for this session');
+    expect(output).toContain(
+      'This can happen due to repetitive tool calls or other model behavior',
+    );
+    expect(output).toContain(
+      'Note: To disable loop detection checks for all future sessions',
+    );
+    expect(output).toContain('model.skipLoopDetection');
+    expect(output).toContain('settings.json');
+  });
+});

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

@@ -0,0 +1,97 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Box, Text } from 'ink';
+import type { RadioSelectItem } from './shared/RadioButtonSelect.js';
+import { RadioButtonSelect } from './shared/RadioButtonSelect.js';
+import { useKeypress } from '../hooks/useKeypress.js';
+import { theme } from '../semantic-colors.js';
+
+export type LoopDetectionConfirmationResult = {
+  userSelection: 'disable' | 'keep';
+};
+
+interface LoopDetectionConfirmationProps {
+  onComplete: (result: LoopDetectionConfirmationResult) => void;
+}
+
+export function LoopDetectionConfirmation({
+  onComplete,
+}: LoopDetectionConfirmationProps) {
+  useKeypress(
+    (key) => {
+      if (key.name === 'escape') {
+        onComplete({
+          userSelection: 'keep',
+        });
+      }
+    },
+    { isActive: true },
+  );
+
+  const OPTIONS: Array<RadioSelectItem<LoopDetectionConfirmationResult>> = [
+    {
+      label: 'Keep loop detection enabled (esc)',
+      value: {
+        userSelection: 'keep',
+      },
+      key: 'Keep loop detection enabled (esc)',
+    },
+    {
+      label: 'Disable loop detection for this session',
+      value: {
+        userSelection: 'disable',
+      },
+      key: 'Disable loop detection for this session',
+    },
+  ];
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="round"
+      borderColor={theme.status.warning}
+      width="100%"
+      marginLeft={1}
+    >
+      <Box paddingX={1} paddingY={0} flexDirection="column">
+        <Box minHeight={1}>
+          <Box minWidth={3}>
+            <Text color={theme.status.warning} aria-label="Loop detected:">
+              ?
+            </Text>
+          </Box>
+          <Box>
+            <Text wrap="truncate-end">
+              <Text color={theme.text.primary} bold>
+                A potential loop was detected
+              </Text>{' '}
+            </Text>
+          </Box>
+        </Box>
+        <Box width="100%" marginTop={1}>
+          <Box flexDirection="column">
+            <Text color={theme.text.secondary}>
+              This can happen due to repetitive tool calls or other model
+              behavior. Do you want to keep loop detection enabled or disable it
+              for this session?
+            </Text>
+            <Box marginTop={1}>
+              <RadioButtonSelect items={OPTIONS} onSelect={onComplete} />
+            </Box>
+            <Box marginTop={1}>
+              <Text color={theme.text.secondary}>
+                Note: To disable loop detection checks for all future sessions,
+                set &quot;model.skipLoopDetection&quot; to true in your
+                settings.json.
+              </Text>
+            </Box>
+          </Box>
+        </Box>
+      </Box>
+    </Box>
+  );
+}

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

@@ -0,0 +1,73 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Box, Static } from 'ink';
+import { HistoryItemDisplay } from './HistoryItemDisplay.js';
+import { ShowMoreLines } from './ShowMoreLines.js';
+import { OverflowProvider } from '../contexts/OverflowContext.js';
+import { useUIState } from '../contexts/UIStateContext.js';
+import { useAppContext } from '../contexts/AppContext.js';
+import { AppHeader } from './AppHeader.js';
+
+// Limit Gemini messages to a very high number of lines to mitigate performance
+// issues in the worst case if we somehow get an enormous response from Gemini.
+// This threshold is arbitrary but should be high enough to never impact normal
+// usage.
+const MAX_GEMINI_MESSAGE_LINES = 65536;
+
+export const MainContent = () => {
+  const { version } = useAppContext();
+  const uiState = useUIState();
+  const {
+    pendingHistoryItems,
+    mainAreaWidth,
+    staticAreaMaxItemHeight,
+    availableTerminalHeight,
+  } = uiState;
+
+  return (
+    <>
+      <Static
+        key={uiState.historyRemountKey}
+        items={[
+          <AppHeader key="app-header" version={version} />,
+          ...uiState.history.map((h) => (
+            <HistoryItemDisplay
+              terminalWidth={mainAreaWidth}
+              availableTerminalHeight={staticAreaMaxItemHeight}
+              availableTerminalHeightGemini={MAX_GEMINI_MESSAGE_LINES}
+              key={h.id}
+              item={h}
+              isPending={false}
+              commands={uiState.slashCommands}
+            />
+          )),
+        ]}
+      >
+        {(item) => item}
+      </Static>
+      <OverflowProvider>
+        <Box flexDirection="column">
+          {pendingHistoryItems.map((item, i) => (
+            <HistoryItemDisplay
+              key={i}
+              availableTerminalHeight={
+                uiState.constrainHeight ? availableTerminalHeight : undefined
+              }
+              terminalWidth={mainAreaWidth}
+              item={{ ...item, id: 0 }}
+              isPending={true}
+              isFocused={!uiState.isEditorDialogOpen}
+              activeShellPtyId={uiState.activePtyId}
+              embeddedShellFocused={uiState.embeddedShellFocused}
+            />
+          ))}
+          <ShowMoreLines constrainHeight={uiState.constrainHeight} />
+        </Box>
+      </OverflowProvider>
+    </>
+  );
+};

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

@@ -7,20 +7,24 @@
 import type React from 'react';
 import { useEffect, useState } from 'react';
 import { Box, Text } from 'ink';
-import { Colors } from '../colors.js';
+import { theme } from '../semantic-colors.js';
 import process from 'node:process';
 import { formatMemoryUsage } from '../utils/formatters.js';
 
 export const MemoryUsageDisplay: React.FC = () => {
   const [memoryUsage, setMemoryUsage] = useState<string>('');
-  const [memoryUsageColor, setMemoryUsageColor] = useState<string>(Colors.Gray);
+  const [memoryUsageColor, setMemoryUsageColor] = useState<string>(
+    theme.text.secondary,
+  );
 
   useEffect(() => {
     const updateMemory = () => {
       const usage = process.memoryUsage().rss;
       setMemoryUsage(formatMemoryUsage(usage));
       setMemoryUsageColor(
-        usage >= 2 * 1024 * 1024 * 1024 ? Colors.AccentRed : Colors.Gray,
+        usage >= 2 * 1024 * 1024 * 1024
+          ? theme.status.error
+          : theme.text.secondary,
       );
     };
     const intervalId = setInterval(updateMemory, 2000);
@@ -30,7 +34,7 @@ export const MemoryUsageDisplay: React.FC = () => {
 
   return (
     <Box>
-      <Text color={Colors.Gray}>| </Text>
+      <Text color={theme.text.secondary}> | </Text>
       <Text color={memoryUsageColor}>{memoryUsage}</Text>
     </Box>
   );

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

@@ -0,0 +1,227 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { render, cleanup } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { ModelDialog } from './ModelDialog.js';
+import { useKeypress } from '../hooks/useKeypress.js';
+import { DescriptiveRadioButtonSelect } from './shared/DescriptiveRadioButtonSelect.js';
+import { ConfigContext } from '../contexts/ConfigContext.js';
+import type { Config } from '@qwen-code/qwen-code-core';
+import {
+  AVAILABLE_MODELS_QWEN,
+  MAINLINE_CODER,
+  MAINLINE_VLM,
+} from '../models/availableModels.js';
+
+vi.mock('../hooks/useKeypress.js', () => ({
+  useKeypress: vi.fn(),
+}));
+const mockedUseKeypress = vi.mocked(useKeypress);
+
+vi.mock('./shared/DescriptiveRadioButtonSelect.js', () => ({
+  DescriptiveRadioButtonSelect: vi.fn(() => null),
+}));
+const mockedSelect = vi.mocked(DescriptiveRadioButtonSelect);
+
+const renderComponent = (
+  props: Partial<React.ComponentProps<typeof ModelDialog>> = {},
+  contextValue: Partial<Config> | undefined = undefined,
+) => {
+  const defaultProps = {
+    onClose: vi.fn(),
+  };
+  const combinedProps = { ...defaultProps, ...props };
+
+  const mockConfig = contextValue
+    ? ({
+        // --- Functions used by ModelDialog ---
+        getModel: vi.fn(() => MAINLINE_CODER),
+        setModel: vi.fn(),
+        getAuthType: vi.fn(() => 'qwen-oauth'),
+
+        // --- Functions used by ClearcutLogger ---
+        getUsageStatisticsEnabled: vi.fn(() => true),
+        getSessionId: vi.fn(() => 'mock-session-id'),
+        getDebugMode: vi.fn(() => false),
+        getContentGeneratorConfig: vi.fn(() => ({ authType: 'mock' })),
+        getUseSmartEdit: vi.fn(() => false),
+        getUseModelRouter: vi.fn(() => false),
+        getProxy: vi.fn(() => undefined),
+
+        // --- Spread test-specific overrides ---
+        ...contextValue,
+      } as unknown as Config)
+    : undefined;
+
+  const renderResult = render(
+    <ConfigContext.Provider value={mockConfig}>
+      <ModelDialog {...combinedProps} />
+    </ConfigContext.Provider>,
+  );
+
+  return {
+    ...renderResult,
+    props: combinedProps,
+    mockConfig,
+  };
+};
+
+describe('<ModelDialog />', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('renders the title and help text', () => {
+    const { getByText } = renderComponent();
+    expect(getByText('Select Model')).toBeDefined();
+    expect(getByText('(Press Esc to close)')).toBeDefined();
+  });
+
+  it('passes all model options to DescriptiveRadioButtonSelect', () => {
+    renderComponent();
+    expect(mockedSelect).toHaveBeenCalledTimes(1);
+
+    const props = mockedSelect.mock.calls[0][0];
+    expect(props.items).toHaveLength(AVAILABLE_MODELS_QWEN.length);
+    expect(props.items[0].value).toBe(MAINLINE_CODER);
+    expect(props.items[1].value).toBe(MAINLINE_VLM);
+    expect(props.showNumbers).toBe(true);
+  });
+
+  it('initializes with the model from ConfigContext', () => {
+    const mockGetModel = vi.fn(() => MAINLINE_VLM);
+    renderComponent({}, { getModel: mockGetModel });
+
+    expect(mockGetModel).toHaveBeenCalled();
+    expect(mockedSelect).toHaveBeenCalledWith(
+      expect.objectContaining({
+        initialIndex: 1,
+      }),
+      undefined,
+    );
+  });
+
+  it('initializes with default coder model if context is not provided', () => {
+    renderComponent({}, undefined);
+
+    expect(mockedSelect).toHaveBeenCalledWith(
+      expect.objectContaining({
+        initialIndex: 0,
+      }),
+      undefined,
+    );
+  });
+
+  it('initializes with default coder model if getModel returns undefined', () => {
+    const mockGetModel = vi.fn(() => undefined);
+    // @ts-expect-error This test validates component robustness when getModel
+    // returns an unexpected undefined value.
+    renderComponent({}, { getModel: mockGetModel });
+
+    expect(mockGetModel).toHaveBeenCalled();
+
+    // When getModel returns undefined, preferredModel falls back to MAINLINE_CODER
+    // which has index 0, so initialIndex should be 0
+    expect(mockedSelect).toHaveBeenCalledWith(
+      expect.objectContaining({
+        initialIndex: 0,
+      }),
+      undefined,
+    );
+    expect(mockedSelect).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls config.setModel and onClose when DescriptiveRadioButtonSelect.onSelect is triggered', () => {
+    const { props, mockConfig } = renderComponent({}, {}); // Pass empty object for contextValue
+
+    const childOnSelect = mockedSelect.mock.calls[0][0].onSelect;
+    expect(childOnSelect).toBeDefined();
+
+    childOnSelect(MAINLINE_CODER);
+
+    // Assert against the default mock provided by renderComponent
+    expect(mockConfig?.setModel).toHaveBeenCalledWith(MAINLINE_CODER);
+    expect(props.onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not pass onHighlight to DescriptiveRadioButtonSelect', () => {
+    renderComponent();
+
+    const childOnHighlight = mockedSelect.mock.calls[0][0].onHighlight;
+    expect(childOnHighlight).toBeUndefined();
+  });
+
+  it('calls onClose prop when "escape" key is pressed', () => {
+    const { props } = renderComponent();
+
+    expect(mockedUseKeypress).toHaveBeenCalled();
+
+    const keyPressHandler = mockedUseKeypress.mock.calls[0][0];
+    const options = mockedUseKeypress.mock.calls[0][1];
+
+    expect(options).toEqual({ isActive: true });
+
+    keyPressHandler({
+      name: 'escape',
+      ctrl: false,
+      meta: false,
+      shift: false,
+      paste: false,
+      sequence: '',
+    });
+    expect(props.onClose).toHaveBeenCalledTimes(1);
+
+    keyPressHandler({
+      name: 'a',
+      ctrl: false,
+      meta: false,
+      shift: false,
+      paste: false,
+      sequence: '',
+    });
+    expect(props.onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('updates initialIndex when config context changes', () => {
+    const mockGetModel = vi.fn(() => MAINLINE_CODER);
+    const mockGetAuthType = vi.fn(() => 'qwen-oauth');
+    const { rerender } = render(
+      <ConfigContext.Provider
+        value={
+          {
+            getModel: mockGetModel,
+            getAuthType: mockGetAuthType,
+          } as unknown as Config
+        }
+      >
+        <ModelDialog onClose={vi.fn()} />
+      </ConfigContext.Provider>,
+    );
+
+    expect(mockedSelect.mock.calls[0][0].initialIndex).toBe(0);
+
+    mockGetModel.mockReturnValue(MAINLINE_VLM);
+    const newMockConfig = {
+      getModel: mockGetModel,
+      getAuthType: mockGetAuthType,
+    } as unknown as Config;
+
+    rerender(
+      <ConfigContext.Provider value={newMockConfig}>
+        <ModelDialog onClose={vi.fn()} />
+      </ConfigContext.Provider>,
+    );
+
+    // Should be called at least twice: initial render + re-render after context change
+    expect(mockedSelect).toHaveBeenCalledTimes(2);
+    expect(mockedSelect.mock.calls[1][0].initialIndex).toBe(1);
+  });
+});

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

@@ -0,0 +1,104 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type React from 'react';
+import { useCallback, useContext, useMemo } from 'react';
+import { Box, Text } from 'ink';
+import {
+  AuthType,
+  ModelSlashCommandEvent,
+  logModelSlashCommand,
+} from '@qwen-code/qwen-code-core';
+import { useKeypress } from '../hooks/useKeypress.js';
+import { theme } from '../semantic-colors.js';
+import { DescriptiveRadioButtonSelect } from './shared/DescriptiveRadioButtonSelect.js';
+import { ConfigContext } from '../contexts/ConfigContext.js';
+import {
+  getAvailableModelsForAuthType,
+  MAINLINE_CODER,
+} from '../models/availableModels.js';
+
+interface ModelDialogProps {
+  onClose: () => void;
+}
+
+export function ModelDialog({ onClose }: ModelDialogProps): React.JSX.Element {
+  const config = useContext(ConfigContext);
+
+  // Get auth type from config, default to QWEN_OAUTH if not available
+  const authType = config?.getAuthType() ?? AuthType.QWEN_OAUTH;
+
+  // Get available models based on auth type
+  const availableModels = useMemo(
+    () => getAvailableModelsForAuthType(authType),
+    [authType],
+  );
+
+  const MODEL_OPTIONS = useMemo(
+    () =>
+      availableModels.map((model) => ({
+        value: model.id,
+        title: model.label,
+        description: model.description || '',
+        key: model.id,
+      })),
+    [availableModels],
+  );
+
+  // Determine the Preferred Model (read once when the dialog opens).
+  const preferredModel = config?.getModel() || MAINLINE_CODER;
+
+  useKeypress(
+    (key) => {
+      if (key.name === 'escape') {
+        onClose();
+      }
+    },
+    { isActive: true },
+  );
+
+  // Calculate the initial index based on the preferred model.
+  const initialIndex = useMemo(
+    () => MODEL_OPTIONS.findIndex((option) => option.value === preferredModel),
+    [MODEL_OPTIONS, preferredModel],
+  );
+
+  // Handle selection internally (Autonomous Dialog).
+  const handleSelect = useCallback(
+    (model: string) => {
+      if (config) {
+        config.setModel(model);
+        const event = new ModelSlashCommandEvent(model);
+        logModelSlashCommand(config, event);
+      }
+      onClose();
+    },
+    [config, onClose],
+  );
+
+  return (
+    <Box
+      borderStyle="round"
+      borderColor={theme.border.default}
+      flexDirection="column"
+      padding={1}
+      width="100%"
+    >
+      <Text bold>Select Model</Text>
+      <Box marginTop={1}>
+        <DescriptiveRadioButtonSelect
+          items={MODEL_OPTIONS}
+          onSelect={handleSelect}
+          initialIndex={initialIndex}
+          showNumbers={true}
+        />
+      </Box>
+      <Box marginTop={1} flexDirection="column">
+        <Text color={theme.text.secondary}>(Press Esc to close)</Text>
+      </Box>
+    </Box>
+  );
+}

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

@@ -1,246 +0,0 @@
-/**
- * @license
- * Copyright 2025 Qwen
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import React from 'react';
-import { render } from 'ink-testing-library';
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { ModelSelectionDialog } from './ModelSelectionDialog.js';
-import type { AvailableModel } from '../models/availableModels.js';
-import type { RadioSelectItem } from './shared/RadioButtonSelect.js';
-
-// Mock the useKeypress hook
-const mockUseKeypress = vi.hoisted(() => vi.fn());
-vi.mock('../hooks/useKeypress.js', () => ({
-  useKeypress: mockUseKeypress,
-}));
-
-// Mock the RadioButtonSelect component
-const mockRadioButtonSelect = vi.hoisted(() => vi.fn());
-vi.mock('./shared/RadioButtonSelect.js', () => ({
-  RadioButtonSelect: mockRadioButtonSelect,
-}));
-
-describe('ModelSelectionDialog', () => {
-  const mockAvailableModels: AvailableModel[] = [
-    { id: 'qwen3-coder-plus', label: 'qwen3-coder-plus' },
-    { id: 'qwen-vl-max-latest', label: 'qwen-vl-max', isVision: true },
-    { id: 'gpt-4', label: 'GPT-4' },
-  ];
-
-  const mockOnSelect = vi.fn();
-  const mockOnCancel = vi.fn();
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-
-    // Mock RadioButtonSelect to return a simple div
-    mockRadioButtonSelect.mockReturnValue(
-      React.createElement('div', { 'data-testid': 'radio-select' }),
-    );
-  });
-
-  it('should setup escape key handler to call onCancel', () => {
-    render(
-      <ModelSelectionDialog
-        availableModels={mockAvailableModels}
-        currentModel="qwen3-coder-plus"
-        onSelect={mockOnSelect}
-        onCancel={mockOnCancel}
-      />,
-    );
-
-    expect(mockUseKeypress).toHaveBeenCalledWith(expect.any(Function), {
-      isActive: true,
-    });
-
-    // Simulate escape key press
-    const keypressHandler = mockUseKeypress.mock.calls[0][0];
-    keypressHandler({ name: 'escape' });
-
-    expect(mockOnCancel).toHaveBeenCalled();
-  });
-
-  it('should not call onCancel for non-escape keys', () => {
-    render(
-      <ModelSelectionDialog
-        availableModels={mockAvailableModels}
-        currentModel="qwen3-coder-plus"
-        onSelect={mockOnSelect}
-        onCancel={mockOnCancel}
-      />,
-    );
-
-    const keypressHandler = mockUseKeypress.mock.calls[0][0];
-    keypressHandler({ name: 'enter' });
-
-    expect(mockOnCancel).not.toHaveBeenCalled();
-  });
-
-  it('should set correct initial index for current model', () => {
-    render(
-      <ModelSelectionDialog
-        availableModels={mockAvailableModels}
-        currentModel="qwen-vl-max-latest"
-        onSelect={mockOnSelect}
-        onCancel={mockOnCancel}
-      />,
-    );
-
-    const callArgs = mockRadioButtonSelect.mock.calls[0][0];
-    expect(callArgs.initialIndex).toBe(1); // qwen-vl-max-latest is at index 1
-  });
-
-  it('should set initial index to 0 when current model is not found', () => {
-    render(
-      <ModelSelectionDialog
-        availableModels={mockAvailableModels}
-        currentModel="non-existent-model"
-        onSelect={mockOnSelect}
-        onCancel={mockOnCancel}
-      />,
-    );
-
-    const callArgs = mockRadioButtonSelect.mock.calls[0][0];
-    expect(callArgs.initialIndex).toBe(0);
-  });
-
-  it('should call onSelect when a model is selected', () => {
-    render(
-      <ModelSelectionDialog
-        availableModels={mockAvailableModels}
-        currentModel="qwen3-coder-plus"
-        onSelect={mockOnSelect}
-        onCancel={mockOnCancel}
-      />,
-    );
-
-    const callArgs = mockRadioButtonSelect.mock.calls[0][0];
-    expect(typeof callArgs.onSelect).toBe('function');
-
-    // Simulate selection
-    const onSelectCallback = mockRadioButtonSelect.mock.calls[0][0].onSelect;
-    onSelectCallback('qwen-vl-max-latest');
-
-    expect(mockOnSelect).toHaveBeenCalledWith('qwen-vl-max-latest');
-  });
-
-  it('should handle empty models array', () => {
-    render(
-      <ModelSelectionDialog
-        availableModels={[]}
-        currentModel=""
-        onSelect={mockOnSelect}
-        onCancel={mockOnCancel}
-      />,
-    );
-
-    const callArgs = mockRadioButtonSelect.mock.calls[0][0];
-    expect(callArgs.items).toEqual([]);
-    expect(callArgs.initialIndex).toBe(0);
-  });
-
-  it('should create correct option items with proper labels', () => {
-    render(
-      <ModelSelectionDialog
-        availableModels={mockAvailableModels}
-        currentModel="qwen3-coder-plus"
-        onSelect={mockOnSelect}
-        onCancel={mockOnCancel}
-      />,
-    );
-
-    const expectedItems = [
-      {
-        label: 'qwen3-coder-plus (current)',
-        value: 'qwen3-coder-plus',
-      },
-      {
-        label: 'qwen-vl-max [Vision]',
-        value: 'qwen-vl-max-latest',
-      },
-      {
-        label: 'GPT-4',
-        value: 'gpt-4',
-      },
-    ];
-
-    const callArgs = mockRadioButtonSelect.mock.calls[0][0];
-    expect(callArgs.items).toEqual(expectedItems);
-  });
-
-  it('should show vision indicator for vision models', () => {
-    render(
-      <ModelSelectionDialog
-        availableModels={mockAvailableModels}
-        currentModel="gpt-4"
-        onSelect={mockOnSelect}
-        onCancel={mockOnCancel}
-      />,
-    );
-
-    const callArgs = mockRadioButtonSelect.mock.calls[0][0];
-    const visionModelItem = callArgs.items.find(
-      (item: RadioSelectItem<string>) => item.value === 'qwen-vl-max-latest',
-    );
-
-    expect(visionModelItem?.label).toContain('[Vision]');
-  });
-
-  it('should show current indicator for the current model', () => {
-    render(
-      <ModelSelectionDialog
-        availableModels={mockAvailableModels}
-        currentModel="qwen-vl-max-latest"
-        onSelect={mockOnSelect}
-        onCancel={mockOnCancel}
-      />,
-    );
-
-    const callArgs = mockRadioButtonSelect.mock.calls[0][0];
-    const currentModelItem = callArgs.items.find(
-      (item: RadioSelectItem<string>) => item.value === 'qwen-vl-max-latest',
-    );
-
-    expect(currentModelItem?.label).toContain('(current)');
-  });
-
-  it('should pass isFocused prop to RadioButtonSelect', () => {
-    render(
-      <ModelSelectionDialog
-        availableModels={mockAvailableModels}
-        currentModel="qwen3-coder-plus"
-        onSelect={mockOnSelect}
-        onCancel={mockOnCancel}
-      />,
-    );
-
-    const callArgs = mockRadioButtonSelect.mock.calls[0][0];
-    expect(callArgs.isFocused).toBe(true);
-  });
-
-  it('should handle multiple onSelect calls correctly', () => {
-    render(
-      <ModelSelectionDialog
-        availableModels={mockAvailableModels}
-        currentModel="qwen3-coder-plus"
-        onSelect={mockOnSelect}
-        onCancel={mockOnCancel}
-      />,
-    );
-
-    const onSelectCallback = mockRadioButtonSelect.mock.calls[0][0].onSelect;
-
-    // Call multiple times
-    onSelectCallback('qwen3-coder-plus');
-    onSelectCallback('qwen-vl-max-latest');
-    onSelectCallback('gpt-4');
-
-    expect(mockOnSelect).toHaveBeenCalledTimes(3);
-    expect(mockOnSelect).toHaveBeenNthCalledWith(1, 'qwen3-coder-plus');
-    expect(mockOnSelect).toHaveBeenNthCalledWith(2, 'qwen-vl-max-latest');
-    expect(mockOnSelect).toHaveBeenNthCalledWith(3, 'gpt-4');
-  });
-});

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

@@ -1,87 +0,0 @@
-/**
- * @license
- * Copyright 2025 Qwen
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import type React from 'react';
-import { Box, Text } from 'ink';
-import { Colors } from '../colors.js';
-import {
-  RadioButtonSelect,
-  type RadioSelectItem,
-} from './shared/RadioButtonSelect.js';
-import { useKeypress } from '../hooks/useKeypress.js';
-import type { AvailableModel } from '../models/availableModels.js';
-
-export interface ModelSelectionDialogProps {
-  availableModels: AvailableModel[];
-  currentModel: string;
-  onSelect: (modelId: string) => void;
-  onCancel: () => void;
-}
-
-export const ModelSelectionDialog: React.FC<ModelSelectionDialogProps> = ({
-  availableModels,
-  currentModel,
-  onSelect,
-  onCancel,
-}) => {
-  useKeypress(
-    (key) => {
-      if (key.name === 'escape') {
-        onCancel();
-      }
-    },
-    { isActive: true },
-  );
-
-  const options: Array<RadioSelectItem<string>> = availableModels.map(
-    (model) => {
-      const visionIndicator = model.isVision ? ' [Vision]' : '';
-      const currentIndicator = model.id === currentModel ? ' (current)' : '';
-      return {
-        label: `${model.label}${visionIndicator}${currentIndicator}`,
-        value: model.id,
-      };
-    },
-  );
-
-  const initialIndex = Math.max(
-    0,
-    availableModels.findIndex((model) => model.id === currentModel),
-  );
-
-  const handleSelect = (modelId: string) => {
-    onSelect(modelId);
-  };
-
-  return (
-    <Box
-      flexDirection="column"
-      borderStyle="round"
-      borderColor={Colors.AccentBlue}
-      padding={1}
-      width="100%"
-      marginLeft={1}
-    >
-      <Box flexDirection="column" marginBottom={1}>
-        <Text bold>Select Model</Text>
-        <Text>Choose a model for this session:</Text>
-      </Box>
-
-      <Box marginBottom={1}>
-        <RadioButtonSelect
-          items={options}
-          initialIndex={initialIndex}
-          onSelect={handleSelect}
-          isFocused
-        />
-      </Box>
-
-      <Box>
-        <Text color={Colors.Gray}>Press Enter to select, Esc to cancel</Text>
-      </Box>
-    </Box>
-  );
-};

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

@@ -6,7 +6,7 @@
 
 import type React from 'react';
 import { Box, Text } from 'ink';
-import { Colors } from '../colors.js';
+import { theme } from '../semantic-colors.js';
 import { formatDuration } from '../utils/formatters.js';
 import {
   calculateAverageLatency,
@@ -34,13 +34,16 @@ const StatRow: React.FC<StatRowProps> = ({
 }) => (
   <Box>
     <Box width={METRIC_COL_WIDTH}>
-      <Text bold={isSection} color={isSection ? undefined : Colors.LightBlue}>
+      <Text
+        bold={isSection}
+        color={isSection ? theme.text.primary : theme.text.link}
+      >
         {isSubtle ? `  ↳ ${title}` : title}
       </Text>
     </Box>
     {values.map((value, index) => (
       <Box width={MODEL_COL_WIDTH} key={index}>
-        <Text>{value}</Text>
+        <Text color={theme.text.primary}>{value}</Text>
       </Box>
     ))}
   </Box>
@@ -57,11 +60,13 @@ export const ModelStatsDisplay: React.FC = () => {
     return (
       <Box
         borderStyle="round"
-        borderColor={Colors.Gray}
+        borderColor={theme.border.default}
         paddingY={1}
         paddingX={2}
       >
-        <Text>No API calls have been made in this session.</Text>
+        <Text color={theme.text.primary}>
+          No API calls have been made in this session.
+        </Text>
       </Box>
     );
   }
@@ -83,12 +88,12 @@ export const ModelStatsDisplay: React.FC = () => {
   return (
     <Box
       borderStyle="round"
-      borderColor={Colors.Gray}
+      borderColor={theme.border.default}
       flexDirection="column"
       paddingY={1}
       paddingX={2}
     >
-      <Text bold color={Colors.AccentPurple}>
+      <Text bold color={theme.text.accent}>
         Model Stats For Nerds
       </Text>
       <Box height={1} />
@@ -96,11 +101,15 @@ export const ModelStatsDisplay: React.FC = () => {
       {/* Header */}
       <Box>
         <Box width={METRIC_COL_WIDTH}>
-          <Text bold>Metric</Text>
+          <Text bold color={theme.text.primary}>
+            Metric
+          </Text>
         </Box>
         {modelNames.map((name) => (
           <Box width={MODEL_COL_WIDTH} key={name}>
-            <Text bold>{name}</Text>
+            <Text bold color={theme.text.primary}>
+              {name}
+            </Text>
           </Box>
         ))}
       </Box>
@@ -112,6 +121,7 @@ export const ModelStatsDisplay: React.FC = () => {
         borderTop={false}
         borderLeft={false}
         borderRight={false}
+        borderColor={theme.border.default}
       />
 
       {/* API Section */}
@@ -127,7 +137,7 @@ export const ModelStatsDisplay: React.FC = () => {
           return (
             <Text
               color={
-                m.api.totalErrors > 0 ? Colors.AccentRed : Colors.Foreground
+                m.api.totalErrors > 0 ? theme.status.error : theme.text.primary
               }
             >
               {m.api.totalErrors.toLocaleString()} ({errorRate.toFixed(1)}%)
@@ -150,7 +160,7 @@ export const ModelStatsDisplay: React.FC = () => {
       <StatRow
         title="Total"
         values={getModelValues((m) => (
-          <Text color={Colors.AccentYellow}>
+          <Text color={theme.status.warning}>
             {m.tokens.total.toLocaleString()}
           </Text>
         ))}
@@ -167,7 +177,7 @@ export const ModelStatsDisplay: React.FC = () => {
           values={getModelValues((m) => {
             const cacheHitRate = calculateCacheHitRate(m);
             return (
-              <Text color={Colors.AccentGreen}>
+              <Text color={theme.status.success}>
                 {m.tokens.cached.toLocaleString()} ({cacheHitRate.toFixed(1)}%)
               </Text>
             );

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

@@ -38,14 +38,17 @@ describe('ModelSwitchDialog', () => {
 
     const expectedItems = [
       {
+        key: 'switch-once',
         label: 'Switch for this request only',
         value: VisionSwitchOutcome.SwitchOnce,
       },
       {
+        key: 'switch-session',
         label: 'Switch session to vision model',
         value: VisionSwitchOutcome.SwitchSessionToVL,
       },
       {
+        key: 'continue',
         label: 'Continue with current model',
         value: VisionSwitchOutcome.ContinueWithCurrentModel,
       },

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

@@ -37,14 +37,17 @@ export const ModelSwitchDialog: React.FC<ModelSwitchDialogProps> = ({
 
   const options: Array<RadioSelectItem<VisionSwitchOutcome>> = [
     {
+      key: 'switch-once',
       label: 'Switch for this request only',
       value: VisionSwitchOutcome.SwitchOnce,
     },
     {
+      key: 'switch-session',
       label: 'Switch session to vision model',
       value: VisionSwitchOutcome.SwitchSessionToVL,
     },
     {
+      key: 'continue',
       label: 'Continue with current model',
       value: VisionSwitchOutcome.ContinueWithCurrentModel,
     },

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

@@ -0,0 +1,62 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Box, Text } from 'ink';
+import { useAppContext } from '../contexts/AppContext.js';
+import { useUIState } from '../contexts/UIStateContext.js';
+import { theme } from '../semantic-colors.js';
+import { StreamingState } from '../types.js';
+import { UpdateNotification } from './UpdateNotification.js';
+
+export const Notifications = () => {
+  const { startupWarnings } = useAppContext();
+  const { initError, streamingState, updateInfo } = useUIState();
+
+  const showStartupWarnings = startupWarnings.length > 0;
+  const showInitError =
+    initError && streamingState !== StreamingState.Responding;
+
+  if (!showStartupWarnings && !showInitError && !updateInfo) {
+    return null;
+  }
+
+  return (
+    <>
+      {updateInfo && <UpdateNotification message={updateInfo.message} />}
+      {showStartupWarnings && (
+        <Box
+          borderStyle="round"
+          borderColor={theme.status.warning}
+          paddingX={1}
+          marginY={1}
+          flexDirection="column"
+        >
+          {startupWarnings.map((warning, index) => (
+            <Text key={index} color={theme.status.warning}>
+              {warning}
+            </Text>
+          ))}
+        </Box>
+      )}
+      {showInitError && (
+        <Box
+          borderStyle="round"
+          borderColor={theme.status.error}
+          paddingX={1}
+          marginBottom={1}
+        >
+          <Text color={theme.status.error}>
+            Initialization Error: {initError}
+          </Text>
+          <Text color={theme.status.error}>
+            {' '}
+            Please check API key and configuration.
+          </Text>
+        </Box>
+      )}
+    </>
+  );
+};

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

@@ -5,10 +5,18 @@
  */
 
 import { render } from 'ink-testing-library';
-import { describe, it, expect, vi } from 'vitest';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { OpenAIKeyPrompt } from './OpenAIKeyPrompt.js';
 
+// Mock useKeypress hook
+vi.mock('../hooks/useKeypress.js', () => ({
+  useKeypress: vi.fn(),
+}));
+
 describe('OpenAIKeyPrompt', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
   it('should render the prompt correctly', () => {
     const onSubmit = vi.fn();
     const onCancel = vi.fn();

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

@@ -6,8 +6,9 @@
 
 import type React from 'react';
 import { useState } from 'react';
-import { Box, Text, useInput } from 'ink';
+import { Box, Text } from 'ink';
 import { Colors } from '../colors.js';
+import { useKeypress } from '../hooks/useKeypress.js';
 
 interface OpenAIKeyPromptProps {
   onSubmit: (apiKey: string, baseUrl: string, model: string) => void;
@@ -25,104 +26,130 @@ export function OpenAIKeyPrompt({
     'apiKey' | 'baseUrl' | 'model'
   >('apiKey');
 
-  useInput((input, key) => {
-    // 过滤粘贴相关的控制序列
-    let cleanInput = (input || '')
-      // 过滤 ESC 开头的控制序列（如 \u001b[200~、\u001b[201~ 等）
-      .replace(/\u001b\[[0-9;]*[a-zA-Z]/g, '') // eslint-disable-line no-control-regex
-      // 过滤粘贴开始标记 [200~
-      .replace(/\[200~/g, '')
-      // 过滤粘贴结束标记 [201~
-      .replace(/\[201~/g, '')
-      // 过滤单独的 [ 和 ~ 字符（可能是粘贴标记的残留）
-      .replace(/^\[|~$/g, '');
-
-    // 再过滤所有不可见字符（ASCII < 32，除了回车换行）
-    cleanInput = cleanInput
-      .split('')
-      .filter((ch) => ch.charCodeAt(0) >= 32)
-      .join('');
-
-    if (cleanInput.length > 0) {
-      if (currentField === 'apiKey') {
-        setApiKey((prev) => prev + cleanInput);
-      } else if (currentField === 'baseUrl') {
-        setBaseUrl((prev) => prev + cleanInput);
-      } else if (currentField === 'model') {
-        setModel((prev) => prev + cleanInput);
+  useKeypress(
+    (key) => {
+      // Handle escape
+      if (key.name === 'escape') {
+        onCancel();
+        return;
       }
-      return;
-    }
 
-    // 检查是否是 Enter 键（通过检查输入是否包含换行符）
-    if (input.includes('\n') || input.includes('\r')) {
-      if (currentField === 'apiKey') {
-        // 允许空 API key 跳转到下一个字段，让用户稍后可以返回修改
-        setCurrentField('baseUrl');
+      // Handle Enter key
+      if (key.name === 'return') {
+        if (currentField === 'apiKey') {
+          // 允许空 API key 跳转到下一个字段，让用户稍后可以返回修改
+          setCurrentField('baseUrl');
+          return;
+        } else if (currentField === 'baseUrl') {
+          setCurrentField('model');
+          return;
+        } else if (currentField === 'model') {
+          // 只有在提交时才检查 API key 是否为空
+          if (apiKey.trim()) {
+            onSubmit(apiKey.trim(), baseUrl.trim(), model.trim());
+          } else {
+            // 如果 API key 为空，回到 API key 字段
+            setCurrentField('apiKey');
+          }
+        }
         return;
-      } else if (currentField === 'baseUrl') {
-        setCurrentField('model');
-        return;
-      } else if (currentField === 'model') {
-        // 只有在提交时才检查 API key 是否为空
-        if (apiKey.trim()) {
-          onSubmit(apiKey.trim(), baseUrl.trim(), model.trim());
-        } else {
-          // 如果 API key 为空，回到 API key 字段
+      }
+
+      // Handle Tab key for field navigation
+      if (key.name === 'tab') {
+        if (currentField === 'apiKey') {
+          setCurrentField('baseUrl');
+        } else if (currentField === 'baseUrl') {
+          setCurrentField('model');
+        } else if (currentField === 'model') {
           setCurrentField('apiKey');
         }
+        return;
       }
-      return;
-    }
 
-    if (key.escape) {
-      onCancel();
-      return;
-    }
-
-    // Handle Tab key for field navigation
-    if (key.tab) {
-      if (currentField === 'apiKey') {
-        setCurrentField('baseUrl');
-      } else if (currentField === 'baseUrl') {
-        setCurrentField('model');
-      } else if (currentField === 'model') {
-        setCurrentField('apiKey');
+      // Handle arrow keys for field navigation
+      if (key.name === 'up') {
+        if (currentField === 'baseUrl') {
+          setCurrentField('apiKey');
+        } else if (currentField === 'model') {
+          setCurrentField('baseUrl');
+        }
+        return;
       }
-      return;
-    }
 
-    // Handle arrow keys for field navigation
-    if (key.upArrow) {
-      if (currentField === 'baseUrl') {
-        setCurrentField('apiKey');
-      } else if (currentField === 'model') {
-        setCurrentField('baseUrl');
+      if (key.name === 'down') {
+        if (currentField === 'apiKey') {
+          setCurrentField('baseUrl');
+        } else if (currentField === 'baseUrl') {
+          setCurrentField('model');
+        }
+        return;
       }
-      return;
-    }
 
-    if (key.downArrow) {
-      if (currentField === 'apiKey') {
-        setCurrentField('baseUrl');
-      } else if (currentField === 'baseUrl') {
-        setCurrentField('model');
+      // Handle backspace/delete
+      if (key.name === 'backspace' || key.name === 'delete') {
+        if (currentField === 'apiKey') {
+          setApiKey((prev) => prev.slice(0, -1));
+        } else if (currentField === 'baseUrl') {
+          setBaseUrl((prev) => prev.slice(0, -1));
+        } else if (currentField === 'model') {
+          setModel((prev) => prev.slice(0, -1));
+        }
+        return;
       }
-      return;
-    }
 
-    // Handle backspace - check both key.backspace and delete key
-    if (key.backspace || key.delete) {
-      if (currentField === 'apiKey') {
-        setApiKey((prev) => prev.slice(0, -1));
-      } else if (currentField === 'baseUrl') {
-        setBaseUrl((prev) => prev.slice(0, -1));
-      } else if (currentField === 'model') {
-        setModel((prev) => prev.slice(0, -1));
+      // Handle paste mode - if it's a paste event with content
+      if (key.paste && key.sequence) {
+        // 过滤粘贴相关的控制序列
+        let cleanInput = key.sequence
+          // 过滤 ESC 开头的控制序列（如 \u001b[200~、\u001b[201~ 等）
+          .replace(/\u001b\[[0-9;]*[a-zA-Z]/g, '') // eslint-disable-line no-control-regex
+          // 过滤粘贴开始标记 [200~
+          .replace(/\[200~/g, '')
+          // 过滤粘贴结束标记 [201~
+          .replace(/\[201~/g, '')
+          // 过滤单独的 [ 和 ~ 字符（可能是粘贴标记的残留）
+          .replace(/^\[|~$/g, '');
+
+        // 再过滤所有不可见字符（ASCII < 32，除了回车换行）
+        cleanInput = cleanInput
+          .split('')
+          .filter((ch) => ch.charCodeAt(0) >= 32)
+          .join('');
+
+        if (cleanInput.length > 0) {
+          if (currentField === 'apiKey') {
+            setApiKey((prev) => prev + cleanInput);
+          } else if (currentField === 'baseUrl') {
+            setBaseUrl((prev) => prev + cleanInput);
+          } else if (currentField === 'model') {
+            setModel((prev) => prev + cleanInput);
+          }
+        }
+        return;
       }
-      return;
-    }
-  });
+
+      // Handle regular character input
+      if (key.sequence && !key.ctrl && !key.meta && !key.name) {
+        // Filter control characters
+        const cleanInput = key.sequence
+          .split('')
+          .filter((ch) => ch.charCodeAt(0) >= 32)
+          .join('');
+
+        if (cleanInput.length > 0) {
+          if (currentField === 'apiKey') {
+            setApiKey((prev) => prev + cleanInput);
+          } else if (currentField === 'baseUrl') {
+            setBaseUrl((prev) => prev + cleanInput);
+          } else if (currentField === 'model') {
+            setModel((prev) => prev + cleanInput);
+          }
+        }
+      }
+    },
+    { isActive: true },
+  );
 
   return (
     <Box

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

@@ -0,0 +1,199 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/// <reference types="vitest/globals" />
+
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import type { Mock } from 'vitest';
+import { renderWithProviders } from '../../test-utils/render.js';
+import { PermissionsModifyTrustDialog } from './PermissionsModifyTrustDialog.js';
+import { TrustLevel } from '../../config/trustedFolders.js';
+import { waitFor, act } from '@testing-library/react';
+import * as processUtils from '../../utils/processUtils.js';
+import { usePermissionsModifyTrust } from '../hooks/usePermissionsModifyTrust.js';
+
+// Hoist mocks for dependencies of the usePermissionsModifyTrust hook
+const mockedCwd = vi.hoisted(() => vi.fn());
+const mockedLoadTrustedFolders = vi.hoisted(() => vi.fn());
+const mockedIsWorkspaceTrusted = vi.hoisted(() => vi.fn());
+
+// Mock the modules themselves
+vi.mock('node:process', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('node:process')>();
+  return {
+    ...actual,
+    cwd: mockedCwd,
+  };
+});
+
+vi.mock('../../config/trustedFolders.js', () => ({
+  loadTrustedFolders: mockedLoadTrustedFolders,
+  isWorkspaceTrusted: mockedIsWorkspaceTrusted,
+  TrustLevel: {
+    TRUST_FOLDER: 'TRUST_FOLDER',
+    TRUST_PARENT: 'TRUST_PARENT',
+    DO_NOT_TRUST: 'DO_NOT_TRUST',
+  },
+}));
+
+vi.mock('../hooks/usePermissionsModifyTrust.js');
+
+describe('PermissionsModifyTrustDialog', () => {
+  let mockUpdateTrustLevel: Mock;
+  let mockCommitTrustLevelChange: Mock;
+
+  beforeEach(() => {
+    mockUpdateTrustLevel = vi.fn();
+    mockCommitTrustLevelChange = vi.fn();
+    vi.mocked(usePermissionsModifyTrust).mockReturnValue({
+      cwd: '/test/dir',
+      currentTrustLevel: TrustLevel.DO_NOT_TRUST,
+      isInheritedTrustFromParent: false,
+      isInheritedTrustFromIde: false,
+      needsRestart: false,
+      updateTrustLevel: mockUpdateTrustLevel,
+      commitTrustLevelChange: mockCommitTrustLevelChange,
+      isFolderTrustEnabled: true,
+    });
+  });
+
+  afterEach(() => {
+    vi.resetAllMocks();
+  });
+
+  it('should render the main dialog with current trust level', async () => {
+    const { lastFrame } = renderWithProviders(
+      <PermissionsModifyTrustDialog onExit={vi.fn()} addItem={vi.fn()} />,
+    );
+
+    await waitFor(() => {
+      expect(lastFrame()).toContain('Modify Trust Level');
+      expect(lastFrame()).toContain('Folder: /test/dir');
+      expect(lastFrame()).toContain('Current Level: DO_NOT_TRUST');
+    });
+  });
+
+  it('should display the inherited trust note from parent', async () => {
+    vi.mocked(usePermissionsModifyTrust).mockReturnValue({
+      cwd: '/test/dir',
+      currentTrustLevel: TrustLevel.DO_NOT_TRUST,
+      isInheritedTrustFromParent: true,
+      isInheritedTrustFromIde: false,
+      needsRestart: false,
+      updateTrustLevel: mockUpdateTrustLevel,
+      commitTrustLevelChange: mockCommitTrustLevelChange,
+      isFolderTrustEnabled: true,
+    });
+    const { lastFrame } = renderWithProviders(
+      <PermissionsModifyTrustDialog onExit={vi.fn()} addItem={vi.fn()} />,
+    );
+
+    await waitFor(() => {
+      expect(lastFrame()).toContain(
+        'Note: This folder behaves as a trusted folder because one of the parent folders is trusted.',
+      );
+    });
+  });
+
+  it('should display the inherited trust note from IDE', async () => {
+    vi.mocked(usePermissionsModifyTrust).mockReturnValue({
+      cwd: '/test/dir',
+      currentTrustLevel: TrustLevel.DO_NOT_TRUST,
+      isInheritedTrustFromParent: false,
+      isInheritedTrustFromIde: true,
+      needsRestart: false,
+      updateTrustLevel: mockUpdateTrustLevel,
+      commitTrustLevelChange: mockCommitTrustLevelChange,
+      isFolderTrustEnabled: true,
+    });
+    const { lastFrame } = renderWithProviders(
+      <PermissionsModifyTrustDialog onExit={vi.fn()} addItem={vi.fn()} />,
+    );
+
+    await waitFor(() => {
+      expect(lastFrame()).toContain(
+        'Note: This folder behaves as a trusted folder because the connected IDE workspace is trusted.',
+      );
+    });
+  });
+
+  it('should call onExit when escape is pressed', async () => {
+    const onExit = vi.fn();
+    const { stdin, lastFrame } = renderWithProviders(
+      <PermissionsModifyTrustDialog onExit={onExit} addItem={vi.fn()} />,
+    );
+
+    await waitFor(() => expect(lastFrame()).not.toContain('Loading...'));
+
+    act(() => {
+      stdin.write('\x1b'); // escape key
+    });
+
+    await waitFor(() => {
+      expect(onExit).toHaveBeenCalled();
+    });
+  });
+
+  it('should commit, restart, and exit on `r` keypress', async () => {
+    const mockRelaunchApp = vi
+      .spyOn(processUtils, 'relaunchApp')
+      .mockResolvedValue(undefined);
+    vi.mocked(usePermissionsModifyTrust).mockReturnValue({
+      cwd: '/test/dir',
+      currentTrustLevel: TrustLevel.DO_NOT_TRUST,
+      isInheritedTrustFromParent: false,
+      isInheritedTrustFromIde: false,
+      needsRestart: true,
+      updateTrustLevel: mockUpdateTrustLevel,
+      commitTrustLevelChange: mockCommitTrustLevelChange,
+      isFolderTrustEnabled: true,
+    });
+
+    const onExit = vi.fn();
+    const { stdin, lastFrame } = renderWithProviders(
+      <PermissionsModifyTrustDialog onExit={onExit} addItem={vi.fn()} />,
+    );
+
+    await waitFor(() => expect(lastFrame()).not.toContain('Loading...'));
+
+    act(() => stdin.write('r')); // Press 'r' to restart
+
+    await waitFor(() => {
+      expect(mockCommitTrustLevelChange).toHaveBeenCalled();
+      expect(mockRelaunchApp).toHaveBeenCalled();
+      expect(onExit).toHaveBeenCalled();
+    });
+
+    mockRelaunchApp.mockRestore();
+  });
+
+  it('should not commit when escape is pressed during restart prompt', async () => {
+    vi.mocked(usePermissionsModifyTrust).mockReturnValue({
+      cwd: '/test/dir',
+      currentTrustLevel: TrustLevel.DO_NOT_TRUST,
+      isInheritedTrustFromParent: false,
+      isInheritedTrustFromIde: false,
+      needsRestart: true,
+      updateTrustLevel: mockUpdateTrustLevel,
+      commitTrustLevelChange: mockCommitTrustLevelChange,
+      isFolderTrustEnabled: true,
+    });
+
+    const onExit = vi.fn();
+    const { stdin, lastFrame } = renderWithProviders(
+      <PermissionsModifyTrustDialog onExit={onExit} addItem={vi.fn()} />,
+    );
+
+    await waitFor(() => expect(lastFrame()).not.toContain('Loading...'));
+
+    act(() => stdin.write('\x1b')); // Press escape
+
+    await waitFor(() => {
+      expect(mockCommitTrustLevelChange).not.toHaveBeenCalled();
+      expect(onExit).toHaveBeenCalled();
+    });
+  });
+});

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

@@ -0,0 +1,125 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Box, Text } from 'ink';
+import type React from 'react';
+import { TrustLevel } from '../../config/trustedFolders.js';
+import { useKeypress } from '../hooks/useKeypress.js';
+import { usePermissionsModifyTrust } from '../hooks/usePermissionsModifyTrust.js';
+import { theme } from '../semantic-colors.js';
+import { RadioButtonSelect } from './shared/RadioButtonSelect.js';
+import { relaunchApp } from '../../utils/processUtils.js';
+import { type UseHistoryManagerReturn } from '../hooks/useHistoryManager.js';
+
+interface PermissionsModifyTrustDialogProps {
+  onExit: () => void;
+  addItem: UseHistoryManagerReturn['addItem'];
+}
+
+const TRUST_LEVEL_ITEMS = [
+  {
+    label: 'Trust this folder',
+    value: TrustLevel.TRUST_FOLDER,
+    key: TrustLevel.TRUST_FOLDER,
+  },
+  {
+    label: 'Trust parent folder',
+    value: TrustLevel.TRUST_PARENT,
+    key: TrustLevel.TRUST_PARENT,
+  },
+  {
+    label: "Don't trust",
+    value: TrustLevel.DO_NOT_TRUST,
+    key: TrustLevel.DO_NOT_TRUST,
+  },
+];
+
+export function PermissionsModifyTrustDialog({
+  onExit,
+  addItem,
+}: PermissionsModifyTrustDialogProps): React.JSX.Element {
+  const {
+    cwd,
+    currentTrustLevel,
+    isInheritedTrustFromParent,
+    isInheritedTrustFromIde,
+    needsRestart,
+    updateTrustLevel,
+    commitTrustLevelChange,
+  } = usePermissionsModifyTrust(onExit, addItem);
+
+  useKeypress(
+    (key) => {
+      if (key.name === 'escape') {
+        onExit();
+      }
+      if (needsRestart && key.name === 'r') {
+        commitTrustLevelChange();
+        relaunchApp();
+        onExit();
+      }
+    },
+    { isActive: true },
+  );
+
+  const index = TRUST_LEVEL_ITEMS.findIndex(
+    (item) => item.value === currentTrustLevel,
+  );
+  const initialIndex = index === -1 ? 0 : index;
+
+  return (
+    <>
+      <Box
+        borderStyle="round"
+        borderColor={theme.border.default}
+        flexDirection="column"
+        padding={1}
+      >
+        <Box flexDirection="column" paddingBottom={1}>
+          <Text bold>{'> '}Modify Trust Level</Text>
+          <Box marginTop={1} />
+          <Text>Folder: {cwd}</Text>
+          <Text>
+            Current Level: <Text bold>{currentTrustLevel || 'Not Set'}</Text>
+          </Text>
+          {isInheritedTrustFromParent && (
+            <Text color={theme.text.secondary}>
+              Note: This folder behaves as a trusted folder because one of the
+              parent folders is trusted. It will remain trusted even if you set
+              a different trust level here. To change this, you need to modify
+              the trust setting in the parent folder.
+            </Text>
+          )}
+          {isInheritedTrustFromIde && (
+            <Text color={theme.text.secondary}>
+              Note: This folder behaves as a trusted folder because the
+              connected IDE workspace is trusted. It will remain trusted even if
+              you set a different trust level here.
+            </Text>
+          )}
+        </Box>
+
+        <RadioButtonSelect
+          items={TRUST_LEVEL_ITEMS}
+          onSelect={updateTrustLevel}
+          isFocused={true}
+          initialIndex={initialIndex}
+        />
+        <Box marginTop={1}>
+          <Text color={theme.text.secondary}>(Use Enter to select)</Text>
+        </Box>
+      </Box>
+      {needsRestart && (
+        <Box marginLeft={1} marginTop={1}>
+          <Text color={theme.status.warning}>
+            To apply the trust changes, Gemini CLI must be restarted. Press
+            &apos;r&apos; to restart CLI now.
+          </Text>
+        </Box>
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,123 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { describe, it, expect } from 'vitest';
+import { render } from 'ink-testing-library';
+import { PrepareLabel, MAX_WIDTH } from './PrepareLabel.js';
+
+describe('PrepareLabel', () => {
+  const color = 'white';
+  const flat = (s: string | undefined) => (s ?? '').replace(/\n/g, '');
+
+  it('renders plain label when no match (short label)', () => {
+    const { lastFrame } = render(
+      <PrepareLabel
+        label="simple command"
+        userInput=""
+        matchedIndex={undefined}
+        textColor={color}
+        isExpanded={false}
+      />,
+    );
+    expect(lastFrame()).toMatchSnapshot();
+  });
+
+  it('truncates long label when collapsed and no match', () => {
+    const long = 'x'.repeat(MAX_WIDTH + 25);
+    const { lastFrame } = render(
+      <PrepareLabel
+        label={long}
+        userInput=""
+        textColor={color}
+        isExpanded={false}
+      />,
+    );
+    const out = lastFrame();
+    const f = flat(out);
+    expect(f.endsWith('...')).toBe(true);
+    expect(f.length).toBe(MAX_WIDTH + 3);
+    expect(out).toMatchSnapshot();
+  });
+
+  it('shows full long label when expanded and no match', () => {
+    const long = 'y'.repeat(MAX_WIDTH + 25);
+    const { lastFrame } = render(
+      <PrepareLabel
+        label={long}
+        userInput=""
+        textColor={color}
+        isExpanded={true}
+      />,
+    );
+    const out = lastFrame();
+    const f = flat(out);
+    expect(f.length).toBe(long.length);
+    expect(out).toMatchSnapshot();
+  });
+
+  it('highlights matched substring when expanded (text only visible)', () => {
+    const label = 'run: git commit -m "feat: add search"';
+    const userInput = 'commit';
+    const matchedIndex = label.indexOf(userInput);
+    const { lastFrame } = render(
+      <PrepareLabel
+        label={label}
+        userInput={userInput}
+        matchedIndex={matchedIndex}
+        textColor={color}
+        isExpanded={true}
+      />,
+    );
+    expect(lastFrame()).toMatchSnapshot();
+  });
+
+  it('creates centered window around match when collapsed', () => {
+    const prefix = 'cd /very/long/path/that/keeps/going/'.repeat(3);
+    const core = 'search-here';
+    const suffix = '/and/then/some/more/components/'.repeat(3);
+    const label = prefix + core + suffix;
+    const matchedIndex = prefix.length;
+    const { lastFrame } = render(
+      <PrepareLabel
+        label={label}
+        userInput={core}
+        matchedIndex={matchedIndex}
+        textColor={color}
+        isExpanded={false}
+      />,
+    );
+    const out = lastFrame();
+    const f = flat(out);
+    expect(f.includes(core)).toBe(true);
+    expect(f.startsWith('...')).toBe(true);
+    expect(f.endsWith('...')).toBe(true);
+    expect(out).toMatchSnapshot();
+  });
+
+  it('truncates match itself when match is very long', () => {
+    const prefix = 'find ';
+    const core = 'x'.repeat(MAX_WIDTH + 25);
+    const suffix = ' in this text';
+    const label = prefix + core + suffix;
+    const matchedIndex = prefix.length;
+    const { lastFrame } = render(
+      <PrepareLabel
+        label={label}
+        userInput={core}
+        matchedIndex={matchedIndex}
+        textColor={color}
+        isExpanded={false}
+      />,
+    );
+    const out = lastFrame();
+    const f = flat(out);
+    expect(f.includes('...')).toBe(true);
+    expect(f.startsWith('...')).toBe(false);
+    expect(f.endsWith('...')).toBe(true);
+    expect(f.length).toBe(MAX_WIDTH + 2);
+    expect(out).toMatchSnapshot();
+  });
+});

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

@@ -4,45 +4,113 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import type React from 'react';
+import React from 'react';
 import { Text } from 'ink';
-import { Colors } from '../colors.js';
+import { theme } from '../semantic-colors.js';
 
-interface PrepareLabelProps {
+export const MAX_WIDTH = 150; // Maximum width for the text that is shown
+
+export interface PrepareLabelProps {
   label: string;
   matchedIndex?: number;
   userInput: string;
   textColor: string;
-  highlightColor?: string;
+  isExpanded?: boolean;
 }
 
-export const PrepareLabel: React.FC<PrepareLabelProps> = ({
+const _PrepareLabel: React.FC<PrepareLabelProps> = ({
   label,
   matchedIndex,
   userInput,
   textColor,
-  highlightColor = Colors.AccentYellow,
+  isExpanded = false,
 }) => {
-  if (
-    matchedIndex === undefined ||
-    matchedIndex < 0 ||
-    matchedIndex >= label.length ||
-    userInput.length === 0
-  ) {
-    return <Text color={textColor}>{label}</Text>;
+  const hasMatch =
+    matchedIndex !== undefined &&
+    matchedIndex >= 0 &&
+    matchedIndex < label.length &&
+    userInput.length > 0;
+
+  // Render the plain label if there's no match
+  if (!hasMatch) {
+    const display = isExpanded
+      ? label
+      : label.length > MAX_WIDTH
+        ? label.slice(0, MAX_WIDTH) + '...'
+        : label;
+    return (
+      <Text wrap="wrap" color={textColor}>
+        {display}
+      </Text>
+    );
   }
 
-  const start = label.slice(0, matchedIndex);
-  const match = label.slice(matchedIndex, matchedIndex + userInput.length);
-  const end = label.slice(matchedIndex + userInput.length);
+  const matchLength = userInput.length;
+  let before = '';
+  let match = '';
+  let after = '';
+
+  // Case 1: Show the full string if it's expanded or already fits
+  if (isExpanded || label.length <= MAX_WIDTH) {
+    before = label.slice(0, matchedIndex);
+    match = label.slice(matchedIndex, matchedIndex + matchLength);
+    after = label.slice(matchedIndex + matchLength);
+  }
+  // Case 2: The match itself is too long, so we only show a truncated portion of the match
+  else if (matchLength >= MAX_WIDTH) {
+    match = label.slice(matchedIndex, matchedIndex + MAX_WIDTH - 1) + '...';
+  }
+  // Case 3: Truncate the string to create a window around the match
+  else {
+    const contextSpace = MAX_WIDTH - matchLength;
+    const beforeSpace = Math.floor(contextSpace / 2);
+    const afterSpace = Math.ceil(contextSpace / 2);
+
+    let start = matchedIndex - beforeSpace;
+    let end = matchedIndex + matchLength + afterSpace;
+
+    if (start < 0) {
+      end += -start; // Slide window right
+      start = 0;
+    }
+    if (end > label.length) {
+      start -= end - label.length; // Slide window left
+      end = label.length;
+    }
+    start = Math.max(0, start);
+
+    const finalMatchIndex = matchedIndex - start;
+    const slicedLabel = label.slice(start, end);
+
+    before = slicedLabel.slice(0, finalMatchIndex);
+    match = slicedLabel.slice(finalMatchIndex, finalMatchIndex + matchLength);
+    after = slicedLabel.slice(finalMatchIndex + matchLength);
+
+    if (start > 0) {
+      before = before.length >= 3 ? '...' + before.slice(3) : '...';
+    }
+    if (end < label.length) {
+      after = after.length >= 3 ? after.slice(0, -3) + '...' : '...';
+    }
+  }
 
   return (
-    <Text>
-      <Text color={textColor}>{start}</Text>
-      <Text color="black" bold backgroundColor={highlightColor}>
-        {match}
-      </Text>
-      <Text color={textColor}>{end}</Text>
+    <Text color={textColor} wrap="wrap">
+      {before}
+      {match
+        ? match.split(/(\s+)/).map((part, index) => (
+            <Text
+              key={`match-${index}`}
+              color={theme.background.primary}
+              backgroundColor={theme.text.primary}
+            >
+              {part}
+            </Text>
+          ))
+        : null}
+      {after}
     </Text>
   );
 };
+
+export const PrepareLabel = React.memo(_PrepareLabel);

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

@@ -0,0 +1,91 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { render } from 'ink-testing-library';
+import { describe, it, expect, vi, beforeEach, type Mock } from 'vitest';
+import { ProQuotaDialog } from './ProQuotaDialog.js';
+import { RadioButtonSelect } from './shared/RadioButtonSelect.js';
+
+// Mock the child component to make it easier to test the parent
+vi.mock('./shared/RadioButtonSelect.js', () => ({
+  RadioButtonSelect: vi.fn(),
+}));
+
+describe('ProQuotaDialog', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should render with correct title and options', () => {
+    const { lastFrame } = render(
+      <ProQuotaDialog
+        failedModel="gemini-2.5-pro"
+        fallbackModel="gemini-2.5-flash"
+        onChoice={() => {}}
+      />,
+    );
+
+    const output = lastFrame();
+    expect(output).toContain('Pro quota limit reached for gemini-2.5-pro.');
+
+    // Check that RadioButtonSelect was called with the correct items
+    expect(RadioButtonSelect).toHaveBeenCalledWith(
+      expect.objectContaining({
+        items: [
+          {
+            label: 'Change auth (executes the /auth command)',
+            value: 'auth',
+            key: 'auth',
+          },
+          {
+            label: `Continue with gemini-2.5-flash`,
+            value: 'continue',
+            key: 'continue',
+          },
+        ],
+      }),
+      undefined,
+    );
+  });
+
+  it('should call onChoice with "auth" when "Change auth" is selected', () => {
+    const mockOnChoice = vi.fn();
+    render(
+      <ProQuotaDialog
+        failedModel="gemini-2.5-pro"
+        fallbackModel="gemini-2.5-flash"
+        onChoice={mockOnChoice}
+      />,
+    );
+
+    // Get the onSelect function passed to RadioButtonSelect
+    const onSelect = (RadioButtonSelect as Mock).mock.calls[0][0].onSelect;
+
+    // Simulate the selection
+    onSelect('auth');
+
+    expect(mockOnChoice).toHaveBeenCalledWith('auth');
+  });
+
+  it('should call onChoice with "continue" when "Continue with flash" is selected', () => {
+    const mockOnChoice = vi.fn();
+    render(
+      <ProQuotaDialog
+        failedModel="gemini-2.5-pro"
+        fallbackModel="gemini-2.5-flash"
+        onChoice={mockOnChoice}
+      />,
+    );
+
+    // Get the onSelect function passed to RadioButtonSelect
+    const onSelect = (RadioButtonSelect as Mock).mock.calls[0][0].onSelect;
+
+    // Simulate the selection
+    onSelect('continue');
+
+    expect(mockOnChoice).toHaveBeenCalledWith('continue');
+  });
+});

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

@@ -0,0 +1,54 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type React from 'react';
+import { Box, Text } from 'ink';
+import { RadioButtonSelect } from './shared/RadioButtonSelect.js';
+import { theme } from '../semantic-colors.js';
+
+interface ProQuotaDialogProps {
+  failedModel: string;
+  fallbackModel: string;
+  onChoice: (choice: 'auth' | 'continue') => void;
+}
+
+export function ProQuotaDialog({
+  failedModel,
+  fallbackModel,
+  onChoice,
+}: ProQuotaDialogProps): React.JSX.Element {
+  const items = [
+    {
+      label: 'Change auth (executes the /auth command)',
+      value: 'auth' as const,
+      key: 'auth',
+    },
+    {
+      label: `Continue with ${fallbackModel}`,
+      value: 'continue' as const,
+      key: 'continue',
+    },
+  ];
+
+  const handleSelect = (choice: 'auth' | 'continue') => {
+    onChoice(choice);
+  };
+
+  return (
+    <Box borderStyle="round" flexDirection="column" paddingX={1}>
+      <Text bold color={theme.status.warning}>
+        Pro quota limit reached for {failedModel}.
+      </Text>
+      <Box marginTop={1}>
+        <RadioButtonSelect
+          items={items}
+          initialIndex={1}
+          onSelect={handleSelect}
+        />
+      </Box>
+    </Box>
+  );
+}

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

@@ -0,0 +1,76 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { describe, it, expect } from 'vitest';
+import { render } from 'ink-testing-library';
+import { QueuedMessageDisplay } from './QueuedMessageDisplay.js';
+
+describe('QueuedMessageDisplay', () => {
+  it('renders nothing when message queue is empty', () => {
+    const { lastFrame } = render(<QueuedMessageDisplay messageQueue={[]} />);
+
+    expect(lastFrame()).toBe('');
+  });
+
+  it('displays single queued message', () => {
+    const { lastFrame } = render(
+      <QueuedMessageDisplay messageQueue={['First message']} />,
+    );
+
+    const output = lastFrame();
+    expect(output).toContain('First message');
+  });
+
+  it('displays multiple queued messages', () => {
+    const messageQueue = [
+      'First queued message',
+      'Second queued message',
+      'Third queued message',
+    ];
+
+    const { lastFrame } = render(
+      <QueuedMessageDisplay messageQueue={messageQueue} />,
+    );
+
+    const output = lastFrame();
+    expect(output).toContain('First queued message');
+    expect(output).toContain('Second queued message');
+    expect(output).toContain('Third queued message');
+  });
+
+  it('shows overflow indicator when more than 3 messages are queued', () => {
+    const messageQueue = [
+      'Message 1',
+      'Message 2',
+      'Message 3',
+      'Message 4',
+      'Message 5',
+    ];
+
+    const { lastFrame } = render(
+      <QueuedMessageDisplay messageQueue={messageQueue} />,
+    );
+
+    const output = lastFrame();
+    expect(output).toContain('Message 1');
+    expect(output).toContain('Message 2');
+    expect(output).toContain('Message 3');
+    expect(output).toContain('... (+2 more)');
+    expect(output).not.toContain('Message 4');
+    expect(output).not.toContain('Message 5');
+  });
+
+  it('normalizes whitespace in messages', () => {
+    const messageQueue = ['Message   with\tmultiple\n  whitespace'];
+
+    const { lastFrame } = render(
+      <QueuedMessageDisplay messageQueue={messageQueue} />,
+    );
+
+    const output = lastFrame();
+    expect(output).toContain('Message with multiple whitespace');
+  });
+});

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

@@ -0,0 +1,47 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Box, Text } from 'ink';
+
+const MAX_DISPLAYED_QUEUED_MESSAGES = 3;
+
+export interface QueuedMessageDisplayProps {
+  messageQueue: string[];
+}
+
+export const QueuedMessageDisplay = ({
+  messageQueue,
+}: QueuedMessageDisplayProps) => {
+  if (messageQueue.length === 0) {
+    return null;
+  }
+
+  return (
+    <Box flexDirection="column" marginTop={1}>
+      {messageQueue
+        .slice(0, MAX_DISPLAYED_QUEUED_MESSAGES)
+        .map((message, index) => {
+          const preview = message.replace(/\s+/g, ' ');
+
+          return (
+            <Box key={index} paddingLeft={2} width="100%">
+              <Text dimColor wrap="truncate">
+                {preview}
+              </Text>
+            </Box>
+          );
+        })}
+      {messageQueue.length > MAX_DISPLAYED_QUEUED_MESSAGES && (
+        <Box paddingLeft={2}>
+          <Text dimColor>
+            ... (+
+            {messageQueue.length - MAX_DISPLAYED_QUEUED_MESSAGES} more)
+          </Text>
+        </Box>
+      )}
+    </Box>
+  );
+};

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

@@ -38,18 +38,22 @@ export const QuitConfirmationDialog: React.FC<QuitConfirmationDialogProps> = ({
 
   const options: Array<RadioSelectItem<QuitChoice>> = [
     {
+      key: 'quit',
       label: 'Quit immediately (/quit)',
       value: QuitChoice.QUIT,
     },
     {
+      key: 'summary-and-quit',
       label: 'Generate summary and quit (/summary)',
       value: QuitChoice.SUMMARY_AND_QUIT,
     },
     {
+      key: 'save-and-quit',
       label: 'Save conversation and quit (/chat save)',
       value: QuitChoice.SAVE_AND_QUIT,
     },
     {
+      key: 'cancel',
       label: 'Cancel (stay in application)',
       value: QuitChoice.CANCEL,
     },

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

@@ -0,0 +1,37 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Box } from 'ink';
+import { useUIState } from '../contexts/UIStateContext.js';
+import { HistoryItemDisplay } from './HistoryItemDisplay.js';
+import { useTerminalSize } from '../hooks/useTerminalSize.js';
+
+export const QuittingDisplay = () => {
+  const uiState = useUIState();
+  const { rows: terminalHeight, columns: terminalWidth } = useTerminalSize();
+
+  const availableTerminalHeight = terminalHeight;
+
+  if (!uiState.quittingMessages) {
+    return null;
+  }
+
+  return (
+    <Box flexDirection="column" marginBottom={1}>
+      {uiState.quittingMessages.map((item) => (
+        <HistoryItemDisplay
+          key={item.id}
+          availableTerminalHeight={
+            uiState.constrainHeight ? availableTerminalHeight : undefined
+          }
+          terminalWidth={terminalWidth}
+          item={item}
+          isPending={false}
+        />
+      ))}
+    </Box>
+  );
+};

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

@@ -9,6 +9,13 @@ import { render } from 'ink-testing-library';
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { QwenOAuthProgress } from './QwenOAuthProgress.js';
 import type { DeviceAuthorizationInfo } from '../hooks/useQwenAuth.js';
+import { useKeypress } from '../hooks/useKeypress.js';
+import type { Key } from '../contexts/KeypressContext.js';
+
+// Mock useKeypress hook
+vi.mock('../hooks/useKeypress.js', () => ({
+  useKeypress: vi.fn(),
+}));
 
 // Mock qrcode-terminal module
 vi.mock('qrcode-terminal', () => ({
@@ -31,6 +38,8 @@ vi.mock('ink-link', () => ({
 describe('QwenOAuthProgress', () => {
   const mockOnTimeout = vi.fn();
   const mockOnCancel = vi.fn();
+  const mockedUseKeypress = vi.mocked(useKeypress);
+  let keypressHandler: ((key: Key) => void) | null = null;
 
   const createMockDeviceAuth = (
     overrides: Partial<DeviceAuthorizationInfo> = {},
@@ -68,6 +77,12 @@ describe('QwenOAuthProgress', () => {
   beforeEach(() => {
     vi.clearAllMocks();
     vi.useFakeTimers();
+    keypressHandler = null;
+
+    // Mock useKeypress to capture the handler
+    mockedUseKeypress.mockImplementation((handler) => {
+      keypressHandler = handler;
+    });
   });
 
   afterEach(() => {
@@ -419,7 +434,7 @@ describe('QwenOAuthProgress', () => {
 
   describe('User interactions', () => {
     it('should call onCancel when ESC key is pressed', () => {
-      const { stdin } = render(
+      render(
         <QwenOAuthProgress
           onTimeout={mockOnTimeout}
           onCancel={mockOnCancel}
@@ -428,24 +443,42 @@ describe('QwenOAuthProgress', () => {
       );
 
       // Simulate ESC key press
-      stdin.write('\u001b'); // ESC character
+      if (keypressHandler) {
+        keypressHandler({
+          name: 'escape',
+          ctrl: false,
+          meta: false,
+          shift: false,
+          paste: false,
+          sequence: '\u001b',
+        });
+      }
 
       expect(mockOnCancel).toHaveBeenCalledTimes(1);
     });
 
     it('should call onCancel when ESC is pressed in loading state', () => {
-      const { stdin } = render(
+      render(
         <QwenOAuthProgress onTimeout={mockOnTimeout} onCancel={mockOnCancel} />,
       );
 
       // Simulate ESC key press
-      stdin.write('\u001b'); // ESC character
+      if (keypressHandler) {
+        keypressHandler({
+          name: 'escape',
+          ctrl: false,
+          meta: false,
+          shift: false,
+          paste: false,
+          sequence: '\u001b',
+        });
+      }
 
       expect(mockOnCancel).toHaveBeenCalledTimes(1);
     });
 
     it('should not call onCancel for other key presses', () => {
-      const { stdin } = render(
+      render(
         <QwenOAuthProgress
           onTimeout={mockOnTimeout}
           onCancel={mockOnCancel}
@@ -454,9 +487,32 @@ describe('QwenOAuthProgress', () => {
       );
 
       // Simulate other key presses
-      stdin.write('a');
-      stdin.write('\r'); // Enter
-      stdin.write(' '); // Space
+      if (keypressHandler) {
+        keypressHandler({
+          name: 'a',
+          ctrl: false,
+          meta: false,
+          shift: false,
+          paste: false,
+          sequence: 'a',
+        });
+        keypressHandler({
+          name: 'return',
+          ctrl: false,
+          meta: false,
+          shift: false,
+          paste: false,
+          sequence: '\r',
+        });
+        keypressHandler({
+          name: 'space',
+          ctrl: false,
+          meta: false,
+          shift: false,
+          paste: false,
+          sequence: ' ',
+        });
+      }
 
       expect(mockOnCancel).not.toHaveBeenCalled();
     });
@@ -529,17 +585,35 @@ describe('QwenOAuthProgress', () => {
     });
 
     it('should call onCancel for any key press in timeout state', () => {
-      const { stdin } = renderComponent({
+      renderComponent({
         authStatus: 'timeout',
       });
 
       // Simulate any key press
-      stdin.write('a');
+      if (keypressHandler) {
+        keypressHandler({
+          name: 'a',
+          ctrl: false,
+          meta: false,
+          shift: false,
+          paste: false,
+          sequence: 'a',
+        });
+      }
       expect(mockOnCancel).toHaveBeenCalledTimes(1);
 
       // Reset mock and try enter key
       mockOnCancel.mockClear();
-      stdin.write('\r');
+      if (keypressHandler) {
+        keypressHandler({
+          name: 'return',
+          ctrl: false,
+          meta: false,
+          shift: false,
+          paste: false,
+          sequence: '\r',
+        });
+      }
       expect(mockOnCancel).toHaveBeenCalledTimes(1);
     });
   });

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

@@ -6,12 +6,13 @@
 
 import type React from 'react';
 import { useState, useEffect, useMemo } from 'react';
-import { Box, Text, useInput } from 'ink';
+import { Box, Text } from 'ink';
 import Spinner from 'ink-spinner';
 import Link from 'ink-link';
 import qrcode from 'qrcode-terminal';
 import { Colors } from '../colors.js';
 import type { DeviceAuthorizationInfo } from '../hooks/useQwenAuth.js';
+import { useKeypress } from '../hooks/useKeypress.js';
 
 interface QwenOAuthProgressProps {
   onTimeout: () => void;
@@ -128,14 +129,17 @@ export function QwenOAuthProgress({
   const [dots, setDots] = useState<string>('');
   const [qrCodeData, setQrCodeData] = useState<string | null>(null);
 
-  useInput((input, key) => {
-    if (authStatus === 'timeout') {
-      // Any key press in timeout state should trigger cancel to return to auth dialog
-      onCancel();
-    } else if (key.escape || (key.ctrl && input === 'c')) {
-      onCancel();
-    }
-  });
+  useKeypress(
+    (key) => {
+      if (authStatus === 'timeout') {
+        // Any key press in timeout state should trigger cancel to return to auth dialog
+        onCancel();
+      } else if (key.name === 'escape' || (key.ctrl && key.name === 'c')) {
+        onCancel();
+      }
+    },
+    { isActive: true },
+  );
 
   // Generate QR code once when device auth is available
   useEffect(() => {

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

@@ -22,17 +22,33 @@
  */
 
 import { render } from 'ink-testing-library';
-import { waitFor } from '@testing-library/react';
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { SettingsDialog } from './SettingsDialog.js';
-import { LoadedSettings } from '../../config/settings.js';
+import { LoadedSettings, SettingScope } from '../../config/settings.js';
 import { VimModeProvider } from '../contexts/VimModeContext.js';
 import { KeypressProvider } from '../contexts/KeypressContext.js';
+import { act } from 'react';
+import { saveModifiedSettings, TEST_ONLY } from '../../utils/settingsUtils.js';
+import {
+  getSettingsSchema,
+  type SettingDefinition,
+  type SettingsSchemaType,
+} from '../../config/settingsSchema.js';
 
 // Mock the VimModeContext
 const mockToggleVimEnabled = vi.fn();
 const mockSetVimMode = vi.fn();
 
+enum TerminalKeys {
+  ENTER = '\u000D',
+  TAB = '\t',
+  UP_ARROW = '\u001B[A',
+  DOWN_ARROW = '\u001B[B',
+  LEFT_ARROW = '\u001B[D',
+  RIGHT_ARROW = '\u001B[C',
+  ESCAPE = '\u001B',
+}
+
 const createMockSettings = (
   userSettings = {},
   systemSettings = {},
@@ -41,10 +57,16 @@ const createMockSettings = (
   new LoadedSettings(
     {
       settings: { ui: { customThemes: {} }, mcpServers: {}, ...systemSettings },
+      originalSettings: {
+        ui: { customThemes: {} },
+        mcpServers: {},
+        ...systemSettings,
+      },
       path: '/system/settings.json',
     },
     {
       settings: {},
+      originalSettings: {},
       path: '/system/system-defaults.json',
     },
     {
@@ -53,6 +75,11 @@ const createMockSettings = (
         mcpServers: {},
         ...userSettings,
       },
+      originalSettings: {
+        ui: { customThemes: {} },
+        mcpServers: {},
+        ...userSettings,
+      },
       path: '/user/settings.json',
     },
     {
@@ -61,33 +88,23 @@ const createMockSettings = (
         mcpServers: {},
         ...workspaceSettings,
       },
+      originalSettings: {
+        ui: { customThemes: {} },
+        mcpServers: {},
+        ...workspaceSettings,
+      },
       path: '/workspace/settings.json',
     },
-    [],
     true,
     new Set(),
   );
 
-vi.mock('../contexts/SettingsContext.js', async () => {
-  const actual = await vi.importActual('../contexts/SettingsContext.js');
-  let settings = createMockSettings({ 'a.string.setting': 'initial' });
+vi.mock('../../config/settingsSchema.js', async (importOriginal) => {
+  const original =
+    await importOriginal<typeof import('../../config/settingsSchema.js')>();
   return {
-    ...actual,
-    useSettings: () => ({
-      settings,
-      setSetting: (key: string, value: string) => {
-        settings = createMockSettings({ [key]: value });
-      },
-      getSettingDefinition: (key: string) => {
-        if (key === 'a.string.setting') {
-          return {
-            type: 'string',
-            description: 'A string setting',
-          };
-        }
-        return undefined;
-      },
-    }),
+    ...original,
+    getSettingsSchema: vi.fn(original.getSettingsSchema),
   };
 });
 
@@ -134,10 +151,33 @@ vi.mock('../../utils/settingsUtils.js', async () => {
 // const originalConsoleError = console.error;
 
 describe('SettingsDialog', () => {
+  // Simple delay function for remaining tests that need gradual migration
   const wait = (ms = 50) => new Promise((resolve) => setTimeout(resolve, ms));
 
+  // Custom waitFor utility for ink testing environment (not compatible with @testing-library/react)
+  const waitFor = async (
+    predicate: () => void,
+    options: { timeout?: number; interval?: number } = {},
+  ) => {
+    const { timeout = 1000, interval = 10 } = options;
+    const start = Date.now();
+    let lastError: unknown;
+    while (Date.now() - start < timeout) {
+      try {
+        predicate();
+        return;
+      } catch (e) {
+        lastError = e;
+      }
+      await new Promise((resolve) => setTimeout(resolve, interval));
+    }
+    if (lastError) {
+      throw lastError;
+    }
+    throw new Error('waitFor timed out');
+  };
+
   beforeEach(() => {
-    vi.clearAllMocks();
     // Reset keypress mock state (variables are commented out)
     // currentKeypressHandler = null;
     // isKeypressActive = false;
@@ -147,6 +187,9 @@ describe('SettingsDialog', () => {
   });
 
   afterEach(() => {
+    TEST_ONLY.clearFlattenedSchema();
+    vi.clearAllMocks();
+    vi.resetAllMocks();
     // Reset keypress mock state (variables are commented out)
     // currentKeypressHandler = null;
     // isKeypressActive = false;
@@ -154,45 +197,6 @@ describe('SettingsDialog', () => {
     // console.error = originalConsoleError;
   });
 
-  const createMockSettings = (
-    userSettings = {},
-    systemSettings = {},
-    workspaceSettings = {},
-  ) =>
-    new LoadedSettings(
-      {
-        settings: {
-          ui: { customThemes: {} },
-          mcpServers: {},
-          ...systemSettings,
-        },
-        path: '/system/settings.json',
-      },
-      {
-        settings: {},
-        path: '/system/system-defaults.json',
-      },
-      {
-        settings: {
-          ui: { customThemes: {} },
-          mcpServers: {},
-          ...userSettings,
-        },
-        path: '/user/settings.json',
-      },
-      {
-        settings: {
-          ui: { customThemes: {} },
-          mcpServers: {},
-          ...workspaceSettings,
-        },
-        path: '/workspace/settings.json',
-      },
-      [],
-      true,
-      new Set(),
-    );
-
   describe('Initial Rendering', () => {
     it('should render the settings dialog with default state', () => {
       const settings = createMockSettings();
@@ -210,6 +214,26 @@ describe('SettingsDialog', () => {
       expect(output).toContain('Use Enter to select, Tab to change focus');
     });
 
+    it('should accept availableTerminalHeight prop without errors', () => {
+      const settings = createMockSettings();
+      const onSelect = vi.fn();
+
+      const { lastFrame } = render(
+        <KeypressProvider kittyProtocolEnabled={false}>
+          <SettingsDialog
+            settings={settings}
+            onSelect={onSelect}
+            availableTerminalHeight={20}
+          />
+        </KeypressProvider>,
+      );
+
+      const output = lastFrame();
+      // Should still render properly with the height prop
+      expect(output).toContain('Settings');
+      expect(output).toContain('Use Enter to select');
+    });
+
     it('should show settings list with default values', () => {
       const settings = createMockSettings();
       const onSelect = vi.fn();
@@ -246,15 +270,18 @@ describe('SettingsDialog', () => {
       const settings = createMockSettings();
       const onSelect = vi.fn();
 
-      const { stdin, unmount } = render(
+      const { stdin, unmount, lastFrame } = render(
         <KeypressProvider kittyProtocolEnabled={false}>
           <SettingsDialog settings={settings} onSelect={onSelect} />
         </KeypressProvider>,
       );
 
       // Press down arrow
-      stdin.write('\u001B[B'); // Down arrow
-      await wait();
+      act(() => {
+        stdin.write(TerminalKeys.DOWN_ARROW as string); // Down arrow
+      });
+
+      expect(lastFrame()).toContain('● Disable Auto Update');
 
       // The active index should have changed (tested indirectly through behavior)
       unmount();
@@ -271,9 +298,9 @@ describe('SettingsDialog', () => {
       );
 
       // First go down, then up
-      stdin.write('\u001B[B'); // Down arrow
+      stdin.write(TerminalKeys.DOWN_ARROW as string); // Down arrow
       await wait();
-      stdin.write('\u001B[A'); // Up arrow
+      stdin.write(TerminalKeys.UP_ARROW as string);
       await wait();
 
       unmount();
@@ -298,43 +325,203 @@ describe('SettingsDialog', () => {
       unmount();
     });
 
-    it('should not navigate beyond bounds', async () => {
+    it('wraps around when at the top of the list', async () => {
       const settings = createMockSettings();
       const onSelect = vi.fn();
 
-      const { stdin, unmount } = render(
+      const { stdin, unmount, lastFrame } = render(
         <KeypressProvider kittyProtocolEnabled={false}>
           <SettingsDialog settings={settings} onSelect={onSelect} />
         </KeypressProvider>,
       );
 
       // Try to go up from first item
-      stdin.write('\u001B[A'); // Up arrow
+      act(() => {
+        stdin.write(TerminalKeys.UP_ARROW);
+      });
+
       await wait();
 
-      // Should still be on first item
+      expect(lastFrame()).toContain('● Vision Model Preview');
+
       unmount();
     });
   });
 
   describe('Settings Toggling', () => {
     it('should toggle setting with Enter key', async () => {
+      vi.mocked(saveModifiedSettings).mockClear();
+
       const settings = createMockSettings();
       const onSelect = vi.fn();
-
-      const { stdin, unmount } = render(
+      const component = (
         <KeypressProvider kittyProtocolEnabled={false}>
           <SettingsDialog settings={settings} onSelect={onSelect} />
-        </KeypressProvider>,
+        </KeypressProvider>
       );
 
-      // Press Enter to toggle current setting
-      stdin.write('\u000D'); // Enter key
-      await wait();
+      const { stdin, unmount, lastFrame } = render(component);
+
+      // Wait for initial render and verify we're on Vim Mode (first setting)
+      await waitFor(() => {
+        expect(lastFrame()).toContain('● Vim Mode');
+      });
+
+      // Navigate to Disable Auto Update setting and verify we're there
+      act(() => {
+        stdin.write(TerminalKeys.DOWN_ARROW as string);
+      });
+      await waitFor(() => {
+        expect(lastFrame()).toContain('● Disable Auto Update');
+      });
+
+      // Toggle the setting
+      act(() => {
+        stdin.write(TerminalKeys.ENTER as string);
+      });
+      // Wait for the setting change to be processed
+      await waitFor(() => {
+        expect(
+          vi.mocked(saveModifiedSettings).mock.calls.length,
+        ).toBeGreaterThan(0);
+      });
+
+      // Wait for the mock to be called
+      await waitFor(() => {
+        expect(vi.mocked(saveModifiedSettings)).toHaveBeenCalled();
+      });
+
+      expect(vi.mocked(saveModifiedSettings)).toHaveBeenCalledWith(
+        new Set<string>(['general.disableAutoUpdate']),
+        {
+          general: {
+            disableAutoUpdate: true,
+          },
+        },
+        expect.any(LoadedSettings),
+        SettingScope.User,
+      );
 
       unmount();
     });
 
+    describe('enum values', () => {
+      enum StringEnum {
+        FOO = 'foo',
+        BAR = 'bar',
+        BAZ = 'baz',
+      }
+
+      const SETTING: SettingDefinition = {
+        type: 'enum',
+        label: 'Theme',
+        options: [
+          {
+            label: 'Foo',
+            value: StringEnum.FOO,
+          },
+          {
+            label: 'Bar',
+            value: StringEnum.BAR,
+          },
+          {
+            label: 'Baz',
+            value: StringEnum.BAZ,
+          },
+        ],
+        category: 'UI',
+        requiresRestart: false,
+        default: StringEnum.BAR,
+        description: 'The color theme for the UI.',
+        showInDialog: true,
+      };
+
+      const FAKE_SCHEMA: SettingsSchemaType = {
+        ui: {
+          showInDialog: false,
+          properties: {
+            theme: {
+              ...SETTING,
+            },
+          },
+        },
+      } as unknown as SettingsSchemaType;
+
+      it('toggles enum values with the enter key', async () => {
+        vi.mocked(saveModifiedSettings).mockClear();
+
+        vi.mocked(getSettingsSchema).mockReturnValue(FAKE_SCHEMA);
+        const settings = createMockSettings();
+        const onSelect = vi.fn();
+        const component = (
+          <KeypressProvider kittyProtocolEnabled={false}>
+            <SettingsDialog settings={settings} onSelect={onSelect} />
+          </KeypressProvider>
+        );
+
+        const { stdin, unmount } = render(component);
+
+        // Press Enter to toggle current setting
+        stdin.write(TerminalKeys.DOWN_ARROW as string);
+        await wait();
+        stdin.write(TerminalKeys.ENTER as string);
+        await wait();
+        await waitFor(() => {
+          expect(vi.mocked(saveModifiedSettings)).toHaveBeenCalled();
+        });
+
+        expect(vi.mocked(saveModifiedSettings)).toHaveBeenCalledWith(
+          new Set<string>(['ui.theme']),
+          {
+            ui: {
+              theme: StringEnum.BAZ,
+            },
+          },
+          expect.any(LoadedSettings),
+          SettingScope.User,
+        );
+
+        unmount();
+      });
+
+      it('loops back when reaching the end of an enum', async () => {
+        vi.mocked(saveModifiedSettings).mockClear();
+        vi.mocked(getSettingsSchema).mockReturnValue(FAKE_SCHEMA);
+        const settings = createMockSettings();
+        settings.setValue(SettingScope.User, 'ui.theme', StringEnum.BAZ);
+        const onSelect = vi.fn();
+        const component = (
+          <KeypressProvider kittyProtocolEnabled={false}>
+            <SettingsDialog settings={settings} onSelect={onSelect} />
+          </KeypressProvider>
+        );
+
+        const { stdin, unmount } = render(component);
+
+        // Press Enter to toggle current setting
+        stdin.write(TerminalKeys.DOWN_ARROW as string);
+        await wait();
+        stdin.write(TerminalKeys.ENTER as string);
+        await wait();
+        await waitFor(() => {
+          expect(vi.mocked(saveModifiedSettings)).toHaveBeenCalled();
+        });
+
+        expect(vi.mocked(saveModifiedSettings)).toHaveBeenCalledWith(
+          new Set<string>(['ui.theme']),
+          {
+            ui: {
+              theme: StringEnum.FOO,
+            },
+          },
+          expect.any(LoadedSettings),
+          SettingScope.User,
+        );
+
+        unmount();
+      });
+    });
+
     it('should toggle setting with Space key', async () => {
       const settings = createMockSettings();
       const onSelect = vi.fn();
@@ -364,7 +551,7 @@ describe('SettingsDialog', () => {
 
       // Navigate to vim mode setting and toggle it
       // This would require knowing the exact position, so we'll just test that the mock is called
-      stdin.write('\u000D'); // Enter key
+      stdin.write(TerminalKeys.ENTER as string); // Enter key
       await wait();
 
       // The mock should potentially be called if vim mode was toggled
@@ -384,7 +571,7 @@ describe('SettingsDialog', () => {
       );
 
       // Switch to scope focus
-      stdin.write('\t'); // Tab key
+      stdin.write(TerminalKeys.TAB); // Tab key
       await wait();
 
       // Select different scope (numbers 1-3 typically available)
@@ -504,7 +691,7 @@ describe('SettingsDialog', () => {
       );
 
       // Switch to scope selector
-      stdin.write('\t'); // Tab
+      stdin.write(TerminalKeys.TAB as string); // Tab
       await wait();
 
       // Change scope
@@ -549,7 +736,7 @@ describe('SettingsDialog', () => {
       );
 
       // Try to toggle a setting (this might trigger vim mode toggle)
-      stdin.write('\u000D'); // Enter
+      stdin.write(TerminalKeys.ENTER as string); // Enter
       await wait();
 
       // Should not crash
@@ -569,13 +756,13 @@ describe('SettingsDialog', () => {
       );
 
       // Toggle a setting
-      stdin.write('\u000D'); // Enter
+      stdin.write(TerminalKeys.ENTER as string); // Enter
       await wait();
 
       // Toggle another setting
-      stdin.write('\u001B[B'); // Down
+      stdin.write(TerminalKeys.DOWN_ARROW as string); // Down
       await wait();
-      stdin.write('\u000D'); // Enter
+      stdin.write(TerminalKeys.ENTER as string); // Enter
       await wait();
 
       // Should track multiple modified settings
@@ -594,7 +781,7 @@ describe('SettingsDialog', () => {
 
       // Navigate down many times to test scrolling
       for (let i = 0; i < 10; i++) {
-        stdin.write('\u001B[B'); // Down arrow
+        stdin.write(TerminalKeys.DOWN_ARROW as string); // Down arrow
         await wait(10);
       }
 
@@ -617,7 +804,7 @@ describe('SettingsDialog', () => {
 
       // Navigate to and toggle vim mode setting
       // This would require knowing the exact position of vim mode setting
-      stdin.write('\u000D'); // Enter
+      stdin.write(TerminalKeys.ENTER as string); // Enter
       await wait();
 
       unmount();
@@ -655,7 +842,7 @@ describe('SettingsDialog', () => {
       );
 
       // Toggle a non-restart-required setting (like hideTips)
-      stdin.write('\u000D'); // Enter - toggle current setting
+      stdin.write(TerminalKeys.ENTER as string); // Enter - toggle current setting
       await wait();
 
       // Should save immediately without showing restart prompt
@@ -752,8 +939,8 @@ describe('SettingsDialog', () => {
 
       // Rapid navigation
       for (let i = 0; i < 5; i++) {
-        stdin.write('\u001B[B'); // Down arrow
-        stdin.write('\u001B[A'); // Up arrow
+        stdin.write(TerminalKeys.DOWN_ARROW as string);
+        stdin.write(TerminalKeys.UP_ARROW as string);
       }
       await wait(100);
 
@@ -808,9 +995,9 @@ describe('SettingsDialog', () => {
       );
 
       // Try to navigate when potentially at bounds
-      stdin.write('\u001B[B'); // Down
+      stdin.write(TerminalKeys.DOWN_ARROW as string);
       await wait();
-      stdin.write('\u001B[A'); // Up
+      stdin.write(TerminalKeys.UP_ARROW as string);
       await wait();
 
       unmount();
@@ -897,7 +1084,7 @@ describe('SettingsDialog', () => {
       expect(lastFrame()).toContain('Settings'); // Title
       expect(lastFrame()).toContain('● Vim Mode'); // Active setting
       expect(lastFrame()).toContain('Apply To'); // Scope section
-      expect(lastFrame()).toContain('1. User Settings'); // Scope options
+      expect(lastFrame()).toContain('User Settings'); // Scope options (no numbers when settings focused)
       expect(lastFrame()).toContain(
         '(Use Enter to select, Tab to change focus)',
       ); // Help text
@@ -919,19 +1106,19 @@ describe('SettingsDialog', () => {
       );
 
       // Toggle first setting (should require restart)
-      stdin.write('\u000D'); // Enter
+      stdin.write(TerminalKeys.ENTER as string); // Enter
       await wait();
 
       // Navigate to next setting and toggle it (should not require restart - e.g., vimMode)
-      stdin.write('\u001B[B'); // Down
+      stdin.write(TerminalKeys.DOWN_ARROW as string); // Down
       await wait();
-      stdin.write('\u000D'); // Enter
+      stdin.write(TerminalKeys.ENTER as string); // Enter
       await wait();
 
       // Navigate to another setting and toggle it (should also require restart)
-      stdin.write('\u001B[B'); // Down
+      stdin.write(TerminalKeys.DOWN_ARROW as string); // Down
       await wait();
-      stdin.write('\u000D'); // Enter
+      stdin.write(TerminalKeys.ENTER as string); // Enter
       await wait();
 
       // The test verifies that all changes are preserved and the dialog still works
@@ -950,13 +1137,13 @@ describe('SettingsDialog', () => {
       );
 
       // Multiple scope changes
-      stdin.write('\t'); // Tab to scope
+      stdin.write(TerminalKeys.TAB as string); // Tab to scope
       await wait();
       stdin.write('2'); // Workspace
       await wait();
-      stdin.write('\t'); // Tab to settings
+      stdin.write(TerminalKeys.TAB as string); // Tab to settings
       await wait();
-      stdin.write('\t'); // Tab to scope
+      stdin.write(TerminalKeys.TAB as string); // Tab to scope
       await wait();
       stdin.write('1'); // User
       await wait();
@@ -1043,4 +1230,335 @@ describe('SettingsDialog', () => {
       unmount();
     });
   });
+
+  describe('Snapshot Tests', () => {
+    /**
+     * Snapshot tests for SettingsDialog component using ink-testing-library.
+     * These tests capture the visual output of the component in various states:
+     *
+     * - Default rendering with no custom settings
+     * - Various combinations of boolean settings (enabled/disabled)
+     * - Mixed boolean and number settings configurations
+     * - Different focus states (settings vs scope selector)
+     * - Different scope selections (User, System, Workspace)
+     * - Accessibility settings enabled
+     * - File filtering configurations
+     * - Tools and security settings
+     * - All settings disabled state
+     *
+     * The snapshots help ensure UI consistency and catch unintended visual changes.
+     */
+
+    it('should render default state correctly', () => {
+      const settings = createMockSettings();
+      const onSelect = vi.fn();
+
+      const { lastFrame } = render(
+        <KeypressProvider kittyProtocolEnabled={false}>
+          <SettingsDialog settings={settings} onSelect={onSelect} />
+        </KeypressProvider>,
+      );
+
+      expect(lastFrame()).toMatchSnapshot();
+    });
+
+    it('should render with various boolean settings enabled', () => {
+      const settings = createMockSettings({
+        general: {
+          vimMode: true,
+          disableAutoUpdate: true,
+          debugKeystrokeLogging: true,
+          enablePromptCompletion: true,
+        },
+        ui: {
+          hideWindowTitle: true,
+          hideTips: true,
+          showMemoryUsage: true,
+          showLineNumbers: true,
+          showCitations: true,
+          accessibility: {
+            disableLoadingPhrases: true,
+            screenReader: true,
+          },
+        },
+        ide: {
+          enabled: true,
+        },
+        context: {
+          loadMemoryFromIncludeDirectories: true,
+          fileFiltering: {
+            respectGitIgnore: true,
+            respectQwenIgnore: true,
+            enableRecursiveFileSearch: true,
+            disableFuzzySearch: false,
+          },
+        },
+        tools: {
+          enableInteractiveShell: true,
+          autoAccept: true,
+          useRipgrep: true,
+        },
+        security: {
+          folderTrust: {
+            enabled: true,
+          },
+        },
+      });
+      const onSelect = vi.fn();
+
+      const { lastFrame } = render(
+        <KeypressProvider kittyProtocolEnabled={false}>
+          <SettingsDialog settings={settings} onSelect={onSelect} />
+        </KeypressProvider>,
+      );
+
+      expect(lastFrame()).toMatchSnapshot();
+    });
+
+    it('should render with mixed boolean and number settings', () => {
+      const settings = createMockSettings({
+        general: {
+          vimMode: false,
+          disableAutoUpdate: true,
+        },
+        ui: {
+          showMemoryUsage: true,
+          hideWindowTitle: false,
+        },
+        tools: {
+          truncateToolOutputThreshold: 50000,
+          truncateToolOutputLines: 1000,
+        },
+        context: {
+          discoveryMaxDirs: 500,
+        },
+        model: {
+          maxSessionTurns: 100,
+          skipNextSpeakerCheck: false,
+        },
+      });
+      const onSelect = vi.fn();
+
+      const { lastFrame } = render(
+        <KeypressProvider kittyProtocolEnabled={false}>
+          <SettingsDialog settings={settings} onSelect={onSelect} />
+        </KeypressProvider>,
+      );
+
+      expect(lastFrame()).toMatchSnapshot();
+    });
+
+    it('should render focused on scope selector', () => {
+      const settings = createMockSettings();
+      const onSelect = vi.fn();
+
+      const { lastFrame, stdin } = render(
+        <KeypressProvider kittyProtocolEnabled={false}>
+          <SettingsDialog settings={settings} onSelect={onSelect} />
+        </KeypressProvider>,
+      );
+
+      // Switch focus to scope selector with Tab
+      stdin.write('\t');
+
+      expect(lastFrame()).toMatchSnapshot();
+    });
+
+    it('should render with different scope selected (System)', () => {
+      const settings = createMockSettings(
+        {}, // userSettings
+        {
+          // systemSettings
+          general: {
+            vimMode: true,
+            disableAutoUpdate: false,
+          },
+          ui: {
+            showMemoryUsage: true,
+          },
+        },
+      );
+      const onSelect = vi.fn();
+
+      const { lastFrame, stdin } = render(
+        <KeypressProvider kittyProtocolEnabled={false}>
+          <SettingsDialog settings={settings} onSelect={onSelect} />
+        </KeypressProvider>,
+      );
+
+      // Switch to scope selector
+      stdin.write('\t');
+      // Navigate to System scope
+      stdin.write('ArrowDown');
+      stdin.write('\r'); // Enter to select
+
+      expect(lastFrame()).toMatchSnapshot();
+    });
+
+    it('should render with different scope selected (Workspace)', () => {
+      const settings = createMockSettings(
+        {}, // userSettings
+        {}, // systemSettings
+        {
+          // workspaceSettings
+          general: {
+            vimMode: false,
+            debugKeystrokeLogging: true,
+          },
+          tools: {
+            useRipgrep: true,
+            enableInteractiveShell: false,
+          },
+        },
+      );
+      const onSelect = vi.fn();
+
+      const { lastFrame, stdin } = render(
+        <KeypressProvider kittyProtocolEnabled={false}>
+          <SettingsDialog settings={settings} onSelect={onSelect} />
+        </KeypressProvider>,
+      );
+
+      // Switch to scope selector
+      stdin.write('\t');
+      // Navigate to Workspace scope (down twice)
+      stdin.write('ArrowDown');
+      stdin.write('ArrowDown');
+      stdin.write('\r'); // Enter to select
+
+      expect(lastFrame()).toMatchSnapshot();
+    });
+
+    it('should render with accessibility settings enabled', () => {
+      const settings = createMockSettings({
+        ui: {
+          accessibility: {
+            disableLoadingPhrases: true,
+            screenReader: true,
+          },
+          showMemoryUsage: true,
+          showLineNumbers: true,
+        },
+        general: {
+          vimMode: true,
+        },
+      });
+      const onSelect = vi.fn();
+
+      const { lastFrame } = render(
+        <KeypressProvider kittyProtocolEnabled={false}>
+          <SettingsDialog settings={settings} onSelect={onSelect} />
+        </KeypressProvider>,
+      );
+
+      expect(lastFrame()).toMatchSnapshot();
+    });
+
+    it('should render with file filtering settings configured', () => {
+      const settings = createMockSettings({
+        context: {
+          fileFiltering: {
+            respectGitIgnore: false,
+            respectQwemIgnore: true,
+            enableRecursiveFileSearch: false,
+            disableFuzzySearch: true,
+          },
+          loadMemoryFromIncludeDirectories: true,
+          discoveryMaxDirs: 100,
+        },
+      });
+      const onSelect = vi.fn();
+
+      const { lastFrame } = render(
+        <KeypressProvider kittyProtocolEnabled={false}>
+          <SettingsDialog settings={settings} onSelect={onSelect} />
+        </KeypressProvider>,
+      );
+
+      expect(lastFrame()).toMatchSnapshot();
+    });
+
+    it('should render with tools and security settings', () => {
+      const settings = createMockSettings({
+        tools: {
+          enableInteractiveShell: true,
+          autoAccept: false,
+          useRipgrep: true,
+          truncateToolOutputThreshold: 25000,
+          truncateToolOutputLines: 500,
+        },
+        security: {
+          folderTrust: {
+            enabled: true,
+          },
+        },
+        model: {
+          maxSessionTurns: 50,
+          skipNextSpeakerCheck: true,
+        },
+      });
+      const onSelect = vi.fn();
+
+      const { lastFrame } = render(
+        <KeypressProvider kittyProtocolEnabled={false}>
+          <SettingsDialog settings={settings} onSelect={onSelect} />
+        </KeypressProvider>,
+      );
+
+      expect(lastFrame()).toMatchSnapshot();
+    });
+
+    it('should render with all boolean settings disabled', () => {
+      const settings = createMockSettings({
+        general: {
+          vimMode: false,
+          disableAutoUpdate: false,
+          debugKeystrokeLogging: false,
+          enablePromptCompletion: false,
+        },
+        ui: {
+          hideWindowTitle: false,
+          hideTips: false,
+          showMemoryUsage: false,
+          showLineNumbers: false,
+          showCitations: false,
+          accessibility: {
+            disableLoadingPhrases: false,
+            screenReader: false,
+          },
+        },
+        ide: {
+          enabled: false,
+        },
+        context: {
+          loadMemoryFromIncludeDirectories: false,
+          fileFiltering: {
+            respectGitIgnore: false,
+            respectQwemIgnore: false,
+            enableRecursiveFileSearch: false,
+            disableFuzzySearch: false,
+          },
+        },
+        tools: {
+          enableInteractiveShell: false,
+          autoAccept: false,
+          useRipgrep: false,
+        },
+        security: {
+          folderTrust: {
+            enabled: false,
+          },
+        },
+      });
+      const onSelect = vi.fn();
+
+      const { lastFrame } = render(
+        <KeypressProvider kittyProtocolEnabled={false}>
+          <SettingsDialog settings={settings} onSelect={onSelect} />
+        </KeypressProvider>,
+      );
+
+      expect(lastFrame()).toMatchSnapshot();
+    });
+  });
 });

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

@@ -6,7 +6,7 @@
 
 import React, { useState, useEffect } from 'react';
 import { Box, Text } from 'ink';
-import { Colors } from '../colors.js';
+import { theme } from '../semantic-colors.js';
 import type { LoadedSettings, Settings } from '../../config/settings.js';
 import { SettingScope } from '../../config/settings.js';
 import {
@@ -16,7 +16,6 @@ import {
 import { RadioButtonSelect } from './shared/RadioButtonSelect.js';
 import {
   getDialogSettingKeys,
-  getSettingValue,
   setPendingSettingValue,
   getDisplayValue,
   hasRestartRequiredSettings,
@@ -28,16 +27,22 @@ import {
   getDefaultValue,
   setPendingSettingValueAny,
   getNestedValue,
+  getEffectiveValue,
 } from '../../utils/settingsUtils.js';
 import { useVimMode } from '../contexts/VimModeContext.js';
 import { useKeypress } from '../hooks/useKeypress.js';
 import chalk from 'chalk';
 import { cpSlice, cpLen, stripUnsafeCharacters } from '../utils/textUtils.js';
+import {
+  type SettingsValue,
+  TOGGLE_TYPES,
+} from '../../config/settingsSchema.js';
 
 interface SettingsDialogProps {
   settings: LoadedSettings;
   onSelect: (settingName: string | undefined, scope: SettingScope) => void;
   onRestartRequest?: () => void;
+  availableTerminalHeight?: number;
 }
 
 const maxItemsToShow = 8;
@@ -46,6 +51,7 @@ export function SettingsDialog({
   settings,
   onSelect,
   onRestartRequest,
+  availableTerminalHeight,
 }: SettingsDialogProps): React.JSX.Element {
   // Get vim mode context to sync vim mode changes
   const { vimEnabled, toggleVimEnabled } = useVimMode();
@@ -122,15 +128,33 @@ export function SettingsDialog({
         value: key,
         type: definition?.type,
         toggle: () => {
-          if (definition?.type !== 'boolean') {
-            // For non-boolean items, toggle will be handled via edit mode.
+          if (!TOGGLE_TYPES.has(definition?.type)) {
             return;
           }
-          const currentValue = getSettingValue(key, pendingSettings, {});
-          const newValue = !currentValue;
+          const currentValue = getEffectiveValue(key, pendingSettings, {});
+          let newValue: SettingsValue;
+          if (definition?.type === 'boolean') {
+            newValue = !(currentValue as boolean);
+            setPendingSettings((prev) =>
+              setPendingSettingValue(key, newValue as boolean, prev),
+            );
+          } else if (definition?.type === 'enum' && definition.options) {
+            const options = definition.options;
+            const currentIndex = options?.findIndex(
+              (opt) => opt.value === currentValue,
+            );
+            if (currentIndex !== -1 && currentIndex < options.length - 1) {
+              newValue = options[currentIndex + 1].value;
+            } else {
+              newValue = options[0].value; // loop back to start.
+            }
+            setPendingSettings((prev) =>
+              setPendingSettingValueAny(key, newValue, prev),
+            );
+          }
 
           setPendingSettings((prev) =>
-            setPendingSettingValue(key, newValue, prev),
+            setPendingSettingValue(key, newValue as boolean, prev),
           );
 
           if (!requiresRestart(key)) {
@@ -334,7 +358,10 @@ export function SettingsDialog({
   };
 
   // Scope selector items
-  const scopeItems = getScopeItems();
+  const scopeItems = getScopeItems().map((item) => ({
+    ...item,
+    key: item.value,
+  }));
 
   const handleScopeHighlight = (scope: SettingScope) => {
     setSelectedScope(scope);
@@ -345,16 +372,97 @@ export function SettingsDialog({
     setFocusSection('settings');
   };
 
+  // Height constraint calculations similar to ThemeDialog
+  const DIALOG_PADDING = 2;
+  const SETTINGS_TITLE_HEIGHT = 2; // "Settings" title + spacing
+  const SCROLL_ARROWS_HEIGHT = 2; // Up and down arrows
+  const SPACING_HEIGHT = 1; // Space between settings list and scope
+  const SCOPE_SELECTION_HEIGHT = 4; // Apply To section height
+  const BOTTOM_HELP_TEXT_HEIGHT = 1; // Help text
+  const RESTART_PROMPT_HEIGHT = showRestartPrompt ? 1 : 0;
+
+  let currentAvailableTerminalHeight =
+    availableTerminalHeight ?? Number.MAX_SAFE_INTEGER;
+  currentAvailableTerminalHeight -= 2; // Top and bottom borders
+
+  // Start with basic fixed height (without scope selection)
+  let totalFixedHeight =
+    DIALOG_PADDING +
+    SETTINGS_TITLE_HEIGHT +
+    SCROLL_ARROWS_HEIGHT +
+    SPACING_HEIGHT +
+    BOTTOM_HELP_TEXT_HEIGHT +
+    RESTART_PROMPT_HEIGHT;
+
+  // Calculate how much space we have for settings
+  let availableHeightForSettings = Math.max(
+    1,
+    currentAvailableTerminalHeight - totalFixedHeight,
+  );
+
+  // Each setting item takes 2 lines (the setting row + spacing)
+  let maxVisibleItems = Math.max(1, Math.floor(availableHeightForSettings / 2));
+
+  // Decide whether to show scope selection based on remaining space
+  let showScopeSelection = true;
+
+  // If we have limited height, prioritize showing more settings over scope selection
+  if (availableTerminalHeight && availableTerminalHeight < 25) {
+    // For very limited height, hide scope selection to show more settings
+    const totalWithScope = totalFixedHeight + SCOPE_SELECTION_HEIGHT;
+    const availableWithScope = Math.max(
+      1,
+      currentAvailableTerminalHeight - totalWithScope,
+    );
+    const maxItemsWithScope = Math.max(1, Math.floor(availableWithScope / 2));
+
+    // If hiding scope selection allows us to show significantly more settings, do it
+    if (maxVisibleItems > maxItemsWithScope + 1) {
+      showScopeSelection = false;
+    } else {
+      // Otherwise include scope selection and recalculate
+      totalFixedHeight += SCOPE_SELECTION_HEIGHT;
+      availableHeightForSettings = Math.max(
+        1,
+        currentAvailableTerminalHeight - totalFixedHeight,
+      );
+      maxVisibleItems = Math.max(1, Math.floor(availableHeightForSettings / 2));
+    }
+  } else {
+    // For normal height, include scope selection
+    totalFixedHeight += SCOPE_SELECTION_HEIGHT;
+    availableHeightForSettings = Math.max(
+      1,
+      currentAvailableTerminalHeight - totalFixedHeight,
+    );
+    maxVisibleItems = Math.max(1, Math.floor(availableHeightForSettings / 2));
+  }
+
+  // Use the calculated maxVisibleItems or fall back to the original maxItemsToShow
+  const effectiveMaxItemsToShow = availableTerminalHeight
+    ? Math.min(maxVisibleItems, items.length)
+    : maxItemsToShow;
+
+  // Ensure focus stays on settings when scope selection is hidden
+  React.useEffect(() => {
+    if (!showScopeSelection && focusSection === 'scope') {
+      setFocusSection('settings');
+    }
+  }, [showScopeSelection, focusSection]);
+
   // Scroll logic for settings
-  const visibleItems = items.slice(scrollOffset, scrollOffset + maxItemsToShow);
-  // Always show arrows for consistent UI and to indicate circular navigation
-  const showScrollUp = true;
-  const showScrollDown = true;
+  const visibleItems = items.slice(
+    scrollOffset,
+    scrollOffset + effectiveMaxItemsToShow,
+  );
+  // Show arrows if there are more items than can be displayed
+  const showScrollUp = items.length > effectiveMaxItemsToShow;
+  const showScrollDown = items.length > effectiveMaxItemsToShow;
 
   useKeypress(
     (key) => {
       const { name, ctrl } = key;
-      if (name === 'tab') {
+      if (name === 'tab' && showScopeSelection) {
         setFocusSection((prev) => (prev === 'settings' ? 'scope' : 'settings'));
       }
       if (focusSection === 'settings') {
@@ -457,7 +565,9 @@ export function SettingsDialog({
           setActiveSettingIndex(newIndex);
           // Adjust scroll offset for wrap-around
           if (newIndex === items.length - 1) {
-            setScrollOffset(Math.max(0, items.length - maxItemsToShow));
+            setScrollOffset(
+              Math.max(0, items.length - effectiveMaxItemsToShow),
+            );
           } else if (newIndex < scrollOffset) {
             setScrollOffset(newIndex);
           }
@@ -472,8 +582,8 @@ export function SettingsDialog({
           // Adjust scroll offset for wrap-around
           if (newIndex === 0) {
             setScrollOffset(0);
-          } else if (newIndex >= scrollOffset + maxItemsToShow) {
-            setScrollOffset(newIndex - maxItemsToShow + 1);
+          } else if (newIndex >= scrollOffset + effectiveMaxItemsToShow) {
+            setScrollOffset(newIndex - effectiveMaxItemsToShow + 1);
           }
         } else if (name === 'return' || name === 'space') {
           const currentItem = items[activeSettingIndex];
@@ -633,18 +743,18 @@ export function SettingsDialog({
   return (
     <Box
       borderStyle="round"
-      borderColor={Colors.Gray}
+      borderColor={theme.border.default}
       flexDirection="row"
       padding={1}
       width="100%"
       height="100%"
     >
       <Box flexDirection="column" flexGrow={1}>
-        <Text bold color={Colors.AccentBlue}>
-          Settings
+        <Text bold={focusSection === 'settings'} wrap="truncate">
+          {focusSection === 'settings' ? '> ' : '  '}Settings
         </Text>
         <Box height={1} />
-        {showScrollUp && <Text color={Colors.Gray}>▲</Text>}
+        {showScrollUp && <Text color={theme.text.secondary}>▲</Text>}
         {visibleItems.map((item, idx) => {
           const isActive =
             focusSection === 'settings' &&
@@ -725,17 +835,21 @@ export function SettingsDialog({
             <React.Fragment key={item.value}>
               <Box flexDirection="row" alignItems="center">
                 <Box minWidth={2} flexShrink={0}>
-                  <Text color={isActive ? Colors.AccentGreen : Colors.Gray}>
+                  <Text
+                    color={
+                      isActive ? theme.status.success : theme.text.secondary
+                    }
+                  >
                     {isActive ? '●' : ''}
                   </Text>
                 </Box>
                 <Box minWidth={50}>
                   <Text
-                    color={isActive ? Colors.AccentGreen : Colors.Foreground}
+                    color={isActive ? theme.status.success : theme.text.primary}
                   >
                     {item.label}
                     {scopeMessage && (
-                      <Text color={Colors.Gray}> {scopeMessage}</Text>
+                      <Text color={theme.text.secondary}> {scopeMessage}</Text>
                     )}
                   </Text>
                 </Box>
@@ -743,10 +857,10 @@ export function SettingsDialog({
                 <Text
                   color={
                     isActive
-                      ? Colors.AccentGreen
+                      ? theme.status.success
                       : shouldBeGreyedOut
-                        ? Colors.Gray
-                        : Colors.Foreground
+                        ? theme.text.secondary
+                        : theme.text.primary
                   }
                 >
                   {displayValue}
@@ -756,30 +870,36 @@ export function SettingsDialog({
             </React.Fragment>
           );
         })}
-        {showScrollDown && <Text color={Colors.Gray}>▼</Text>}
+        {showScrollDown && <Text color={theme.text.secondary}>▼</Text>}
 
         <Box height={1} />
 
-        <Box marginTop={1} flexDirection="column">
-          <Text bold={focusSection === 'scope'} wrap="truncate">
-            {focusSection === 'scope' ? '> ' : '  '}Apply To
-          </Text>
-          <RadioButtonSelect
-            items={scopeItems}
-            initialIndex={0}
-            onSelect={handleScopeSelect}
-            onHighlight={handleScopeHighlight}
-            isFocused={focusSection === 'scope'}
-            showNumbers={focusSection === 'scope'}
-          />
-        </Box>
+        {/* Scope Selection - conditionally visible based on height constraints */}
+        {showScopeSelection && (
+          <Box marginTop={1} flexDirection="column">
+            <Text bold={focusSection === 'scope'} wrap="truncate">
+              {focusSection === 'scope' ? '> ' : '  '}Apply To
+            </Text>
+            <RadioButtonSelect
+              items={scopeItems}
+              initialIndex={scopeItems.findIndex(
+                (item) => item.value === selectedScope,
+              )}
+              onSelect={handleScopeSelect}
+              onHighlight={handleScopeHighlight}
+              isFocused={focusSection === 'scope'}
+              showNumbers={focusSection === 'scope'}
+            />
+          </Box>
+        )}
 
         <Box height={1} />
-        <Text color={Colors.Gray}>
-          (Use Enter to select, Tab to change focus)
+        <Text color={theme.text.secondary}>
+          (Use Enter to select
+          {showScopeSelection ? ', Tab to change focus' : ''})
         </Text>
         {showRestartPrompt && (
-          <Text color={Colors.AccentYellow}>
+          <Text color={theme.status.warning}>
             To see changes, Qwen Code must be restarted. Press r to exit and
             apply changes now.
           </Text>

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

@@ -7,7 +7,7 @@
 import { ToolConfirmationOutcome } from '@qwen-code/qwen-code-core';
 import { Box, Text } from 'ink';
 import type React from 'react';
-import { Colors } from '../colors.js';
+import { theme } from '../semantic-colors.js';
 import { RenderInline } from '../utils/InlineMarkdownRenderer.js';
 import type { RadioSelectItem } from './shared/RadioButtonSelect.js';
 import { RadioButtonSelect } from './shared/RadioButtonSelect.js';
@@ -53,14 +53,17 @@ export const ShellConfirmationDialog: React.FC<
     {
       label: 'Yes, allow once',
       value: ToolConfirmationOutcome.ProceedOnce,
+      key: 'Yes, allow once',
     },
     {
       label: 'Yes, allow always for this session',
       value: ToolConfirmationOutcome.ProceedAlways,
+      key: 'Yes, allow always for this session',
     },
     {
       label: 'No (esc)',
       value: ToolConfirmationOutcome.Cancel,
+      key: 'No (esc)',
     },
   ];
 
@@ -68,23 +71,27 @@ export const ShellConfirmationDialog: React.FC<
     <Box
       flexDirection="column"
       borderStyle="round"
-      borderColor={Colors.AccentYellow}
+      borderColor={theme.status.warning}
       padding={1}
       width="100%"
       marginLeft={1}
     >
       <Box flexDirection="column" marginBottom={1}>
-        <Text bold>Shell Command Execution</Text>
-        <Text>A custom command wants to run the following shell commands:</Text>
+        <Text bold color={theme.text.primary}>
+          Shell Command Execution
+        </Text>
+        <Text color={theme.text.primary}>
+          A custom command wants to run the following shell commands:
+        </Text>
         <Box
           flexDirection="column"
           borderStyle="round"
-          borderColor={Colors.Gray}
+          borderColor={theme.border.default}
           paddingX={1}
           marginTop={1}
         >
           {commands.map((cmd) => (
-            <Text key={cmd} color={Colors.AccentCyan}>
+            <Text key={cmd} color={theme.text.link}>
               <RenderInline text={cmd} />
             </Text>
           ))}
@@ -92,7 +99,7 @@ export const ShellConfirmationDialog: React.FC<
       </Box>
 
       <Box marginBottom={1}>
-        <Text>Do you want to proceed?</Text>
+        <Text color={theme.text.primary}>Do you want to proceed?</Text>
       </Box>
 
       <RadioButtonSelect items={options} onSelect={handleSelect} isFocused />

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

@@ -0,0 +1,57 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { useCallback } from 'react';
+import type React from 'react';
+import { useKeypress } from '../hooks/useKeypress.js';
+import { ShellExecutionService } from '@qwen-code/qwen-code-core';
+import { keyToAnsi, type Key } from '../hooks/keyToAnsi.js';
+
+export interface ShellInputPromptProps {
+  activeShellPtyId: number | null;
+  focus?: boolean;
+}
+
+export const ShellInputPrompt: React.FC<ShellInputPromptProps> = ({
+  activeShellPtyId,
+  focus = true,
+}) => {
+  const handleShellInputSubmit = useCallback(
+    (input: string) => {
+      if (activeShellPtyId) {
+        ShellExecutionService.writeToPty(activeShellPtyId, input);
+      }
+    },
+    [activeShellPtyId],
+  );
+
+  const handleInput = useCallback(
+    (key: Key) => {
+      if (!focus || !activeShellPtyId) {
+        return;
+      }
+      if (key.ctrl && key.shift && key.name === 'up') {
+        ShellExecutionService.scrollPty(activeShellPtyId, -1);
+        return;
+      }
+
+      if (key.ctrl && key.shift && key.name === 'down') {
+        ShellExecutionService.scrollPty(activeShellPtyId, 1);
+        return;
+      }
+
+      const ansiSequence = keyToAnsi(key);
+      if (ansiSequence) {
+        handleShellInputSubmit(ansiSequence);
+      }
+    },
+    [focus, handleShellInputSubmit, activeShellPtyId],
+  );
+
+  useKeypress(handleInput, { isActive: focus });
+
+  return null;
+};

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

@@ -6,13 +6,13 @@
 
 import type React from 'react';
 import { Box, Text } from 'ink';
-import { Colors } from '../colors.js';
+import { theme } from '../semantic-colors.js';
 
 export const ShellModeIndicator: React.FC = () => (
   <Box>
-    <Text color={Colors.AccentYellow}>
+    <Text color={theme.ui.symbol}>
       shell mode enabled
-      <Text color={Colors.Gray}> (esc to disable)</Text>
+      <Text color={theme.text.secondary}> (esc to disable)</Text>
     </Text>
   </Box>
 );

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

@@ -8,7 +8,7 @@ import { Box, Text } from 'ink';
 import { useOverflowState } from '../contexts/OverflowContext.js';
 import { useStreamingContext } from '../contexts/StreamingContext.js';
 import { StreamingState } from '../types.js';
-import { Colors } from '../colors.js';
+import { theme } from '../semantic-colors.js';
 
 interface ShowMoreLinesProps {
   constrainHeight: boolean;
@@ -32,7 +32,7 @@ export const ShowMoreLines = ({ constrainHeight }: ShowMoreLinesProps) => {
 
   return (
     <Box>
-      <Text color={Colors.Gray} wrap="truncate">
+      <Text color={theme.text.secondary} wrap="truncate">
         Press ctrl-s to show more lines
       </Text>
     </Box>

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

@@ -47,7 +47,7 @@ const SubStatRow: React.FC<SubStatRowProps> = ({ title, children }) => (
   <Box paddingLeft={2}>
     {/* Adjust width for the "» " prefix */}
     <Box width={26}>
-      <Text>» {title}</Text>
+      <Text color={theme.text.secondary}>» {title}</Text>
     </Box>
     {/* FIX: Apply the same flexGrow fix here */}
     <Box flexGrow={1}>{children}</Box>
@@ -62,7 +62,9 @@ interface SectionProps {
 
 const Section: React.FC<SectionProps> = ({ title, children }) => (
   <Box flexDirection="column" width="100%" marginBottom={1}>
-    <Text bold>{title}</Text>
+    <Text bold color={theme.text.primary}>
+      {title}
+    </Text>
     {children}
   </Box>
 );
@@ -82,16 +84,24 @@ const ModelUsageTable: React.FC<{
       {/* Header */}
       <Box>
         <Box width={nameWidth}>
-          <Text bold>Model Usage</Text>
+          <Text bold color={theme.text.primary}>
+            Model Usage
+          </Text>
         </Box>
         <Box width={requestsWidth} justifyContent="flex-end">
-          <Text bold>Reqs</Text>
+          <Text bold color={theme.text.primary}>
+            Reqs
+          </Text>
         </Box>
         <Box width={inputTokensWidth} justifyContent="flex-end">
-          <Text bold>Input Tokens</Text>
+          <Text bold color={theme.text.primary}>
+            Input Tokens
+          </Text>
         </Box>
         <Box width={outputTokensWidth} justifyContent="flex-end">
-          <Text bold>Output Tokens</Text>
+          <Text bold color={theme.text.primary}>
+            Output Tokens
+          </Text>
         </Box>
       </Box>
       {/* Divider */}
@@ -101,6 +111,7 @@ const ModelUsageTable: React.FC<{
         borderTop={false}
         borderLeft={false}
         borderRight={false}
+        borderColor={theme.border.default}
         width={nameWidth + requestsWidth + inputTokensWidth + outputTokensWidth}
       ></Box>
 
@@ -108,10 +119,12 @@ const ModelUsageTable: React.FC<{
       {Object.entries(models).map(([name, modelMetrics]) => (
         <Box key={name}>
           <Box width={nameWidth}>
-            <Text>{name.replace('-001', '')}</Text>
+            <Text color={theme.text.primary}>{name.replace('-001', '')}</Text>
           </Box>
           <Box width={requestsWidth} justifyContent="flex-end">
-            <Text>{modelMetrics.api.totalRequests}</Text>
+            <Text color={theme.text.primary}>
+              {modelMetrics.api.totalRequests}
+            </Text>
           </Box>
           <Box width={inputTokensWidth} justifyContent="flex-end">
             <Text color={theme.status.warning}>
@@ -127,7 +140,7 @@ const ModelUsageTable: React.FC<{
       ))}
       {cacheEfficiency > 0 && (
         <Box flexDirection="column" marginTop={1}>
-          <Text>
+          <Text color={theme.text.primary}>
             <Text color={theme.status.success}>Savings Highlight:</Text>{' '}
             {totalCachedTokens.toLocaleString()} ({cacheEfficiency.toFixed(1)}
             %) of input tokens were served from the cache, reducing costs.
@@ -174,7 +187,9 @@ export const StatsDisplay: React.FC<StatsDisplayProps> = ({
     if (title) {
       return theme.ui.gradient && theme.ui.gradient.length > 0 ? (
         <Gradient colors={theme.ui.gradient}>
-          <Text bold>{title}</Text>
+          <Text bold color={theme.text.primary}>
+            {title}
+          </Text>
         </Gradient>
       ) : (
         <Text bold color={theme.text.accent}>
@@ -202,10 +217,10 @@ export const StatsDisplay: React.FC<StatsDisplayProps> = ({
 
       <Section title="Interaction Summary">
         <StatRow title="Session ID:">
-          <Text>{stats.sessionId}</Text>
+          <Text color={theme.text.primary}>{stats.sessionId}</Text>
         </StatRow>
         <StatRow title="Tool Calls:">
-          <Text>
+          <Text color={theme.text.primary}>
             {tools.totalCalls} ({' '}
             <Text color={theme.status.success}>✓ {tools.totalSuccess}</Text>{' '}
             <Text color={theme.status.error}>x {tools.totalFail}</Text> )
@@ -227,7 +242,7 @@ export const StatsDisplay: React.FC<StatsDisplayProps> = ({
         {files &&
           (files.totalLinesAdded > 0 || files.totalLinesRemoved > 0) && (
             <StatRow title="Code Changes:">
-              <Text>
+              <Text color={theme.text.primary}>
                 <Text color={theme.status.success}>
                   +{files.totalLinesAdded}
                 </Text>{' '}
@@ -241,13 +256,15 @@ export const StatsDisplay: React.FC<StatsDisplayProps> = ({
 
       <Section title="Performance">
         <StatRow title="Wall Time:">
-          <Text>{duration}</Text>
+          <Text color={theme.text.primary}>{duration}</Text>
         </StatRow>
         <StatRow title="Agent Active:">
-          <Text>{formatDuration(computed.agentActiveTime)}</Text>
+          <Text color={theme.text.primary}>
+            {formatDuration(computed.agentActiveTime)}
+          </Text>
         </StatRow>
         <SubStatRow title="API Time:">
-          <Text>
+          <Text color={theme.text.primary}>
             {formatDuration(computed.totalApiTime)}{' '}
             <Text color={theme.text.secondary}>
               ({computed.apiTimePercent.toFixed(1)}%)
@@ -255,7 +272,7 @@ export const StatsDisplay: React.FC<StatsDisplayProps> = ({
           </Text>
         </SubStatRow>
         <SubStatRow title="Tool Time:">
-          <Text>
+          <Text color={theme.text.primary}>
             {formatDuration(computed.totalToolTime)}{' '}
             <Text color={theme.text.secondary}>
               ({computed.toolTimePercent.toFixed(1)}%)

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

@@ -5,14 +5,16 @@
  */
 
 import { Box, Text } from 'ink';
+import { theme } from '../semantic-colors.js';
+import { PrepareLabel, MAX_WIDTH } from './PrepareLabel.js';
+import { CommandKind } from '../commands/types.js';
 import { Colors } from '../colors.js';
-import { PrepareLabel } from './PrepareLabel.js';
-import { isSlashCommand } from '../utils/commandUtils.js';
 export interface Suggestion {
   label: string;
   value: string;
   description?: string;
   matchedIndex?: number;
+  commandKind?: CommandKind;
 }
 interface SuggestionsDisplayProps {
   suggestions: Suggestion[];
@@ -21,9 +23,12 @@ interface SuggestionsDisplayProps {
   width: number;
   scrollOffset: number;
   userInput: string;
+  mode: 'reverse' | 'slash';
+  expandedIndex?: number;
 }
 
 export const MAX_SUGGESTIONS_TO_SHOW = 8;
+export { MAX_WIDTH };
 
 export function SuggestionsDisplay({
   suggestions,
@@ -32,6 +37,8 @@ export function SuggestionsDisplay({
   width,
   scrollOffset,
   userInput,
+  mode,
+  expandedIndex,
 }: SuggestionsDisplayProps) {
   if (isLoading) {
     return (
@@ -53,67 +60,62 @@ export function SuggestionsDisplay({
   );
   const visibleSuggestions = suggestions.slice(startIndex, endIndex);
 
-  const isSlashCommandMode = isSlashCommand(userInput);
-  let commandNameWidth = 0;
+  const getFullLabel = (s: Suggestion) =>
+    s.label + (s.commandKind === CommandKind.MCP_PROMPT ? ' [MCP]' : '');
 
-  if (isSlashCommandMode) {
-    const maxLabelLength = visibleSuggestions.length
-      ? Math.max(...visibleSuggestions.map((s) => s.label.length))
-      : 0;
-
-    const maxAllowedWidth = Math.floor(width * 0.35);
-    commandNameWidth = Math.max(
-      15,
-      Math.min(maxLabelLength + 2, maxAllowedWidth),
-    );
-  }
+  const maxLabelLength = Math.max(
+    ...suggestions.map((s) => getFullLabel(s).length),
+  );
+  const commandColumnWidth =
+    mode === 'slash' ? Math.min(maxLabelLength, Math.floor(width * 0.5)) : 0;
 
   return (
     <Box flexDirection="column" paddingX={1} width={width}>
-      {scrollOffset > 0 && <Text color={Colors.Foreground}>▲</Text>}
+      {scrollOffset > 0 && <Text color={theme.text.primary}>▲</Text>}
 
       {visibleSuggestions.map((suggestion, index) => {
         const originalIndex = startIndex + index;
         const isActive = originalIndex === activeIndex;
-        const textColor = isActive ? Colors.AccentPurple : Colors.Gray;
+        const isExpanded = originalIndex === expandedIndex;
+        const textColor = isActive ? theme.text.accent : theme.text.secondary;
+        const isLong = suggestion.value.length >= MAX_WIDTH;
         const labelElement = (
           <PrepareLabel
-            label={suggestion.label}
+            label={suggestion.value}
             matchedIndex={suggestion.matchedIndex}
             userInput={userInput}
             textColor={textColor}
+            isExpanded={isExpanded}
           />
         );
 
         return (
-          <Box key={`${suggestion.value}-${originalIndex}`} width={width}>
-            <Box flexDirection="row">
-              {isSlashCommandMode ? (
-                <>
-                  <Box width={commandNameWidth} flexShrink={0}>
-                    {labelElement}
-                  </Box>
-                  {suggestion.description ? (
-                    <Box flexGrow={1} marginLeft={1}>
-                      <Text color={textColor} wrap="wrap">
-                        {suggestion.description}
-                      </Text>
-                    </Box>
-                  ) : null}
-                </>
-              ) : (
-                <>
-                  {labelElement}
-                  {suggestion.description ? (
-                    <Box flexGrow={1} marginLeft={1}>
-                      <Text color={textColor} wrap="wrap">
-                        {suggestion.description}
-                      </Text>
-                    </Box>
-                  ) : null}
-                </>
-              )}
+          <Box key={`${suggestion.value}-${originalIndex}`} flexDirection="row">
+            <Box
+              {...(mode === 'slash'
+                ? { width: commandColumnWidth, flexShrink: 0 as const }
+                : { flexShrink: 1 as const })}
+            >
+              <Box>
+                {labelElement}
+                {suggestion.commandKind === CommandKind.MCP_PROMPT && (
+                  <Text color={textColor}> [MCP]</Text>
+                )}
+              </Box>
             </Box>
+
+            {suggestion.description && (
+              <Box flexGrow={1} paddingLeft={3}>
+                <Text color={textColor} wrap="truncate">
+                  {suggestion.description}
+                </Text>
+              </Box>
+            )}
+            {isActive && isLong && (
+              <Box>
+                <Text color={Colors.Gray}>{isExpanded ? ' ← ' : ' → '}</Text>
+              </Box>
+            )}
           </Box>
         );
       })}

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

@@ -0,0 +1,108 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { render } from 'ink-testing-library';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { ThemeDialog } from './ThemeDialog.js';
+import { LoadedSettings } from '../../config/settings.js';
+import { KeypressProvider } from '../contexts/KeypressContext.js';
+import { SettingsContext } from '../contexts/SettingsContext.js';
+import { DEFAULT_THEME, themeManager } from '../themes/theme-manager.js';
+import { act } from 'react';
+
+const createMockSettings = (
+  userSettings = {},
+  workspaceSettings = {},
+  systemSettings = {},
+): LoadedSettings =>
+  new LoadedSettings(
+    {
+      settings: { ui: { customThemes: {} }, ...systemSettings },
+      originalSettings: { ui: { customThemes: {} }, ...systemSettings },
+      path: '/system/settings.json',
+    },
+    {
+      settings: {},
+      originalSettings: {},
+      path: '/system/system-defaults.json',
+    },
+    {
+      settings: {
+        ui: { customThemes: {} },
+        ...userSettings,
+      },
+      originalSettings: {
+        ui: { customThemes: {} },
+        ...userSettings,
+      },
+      path: '/user/settings.json',
+    },
+    {
+      settings: {
+        ui: { customThemes: {} },
+        ...workspaceSettings,
+      },
+      originalSettings: {
+        ui: { customThemes: {} },
+        ...workspaceSettings,
+      },
+      path: '/workspace/settings.json',
+    },
+    true,
+    new Set(),
+  );
+
+describe('ThemeDialog Snapshots', () => {
+  const baseProps = {
+    onSelect: vi.fn(),
+    onHighlight: vi.fn(),
+    availableTerminalHeight: 40,
+    terminalWidth: 120,
+  };
+
+  beforeEach(() => {
+    // Reset theme manager to a known state
+    themeManager.setActiveTheme(DEFAULT_THEME.name);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('should render correctly in theme selection mode', () => {
+    const settings = createMockSettings();
+    const { lastFrame } = render(
+      <SettingsContext.Provider value={settings}>
+        <KeypressProvider kittyProtocolEnabled={false}>
+          <ThemeDialog {...baseProps} settings={settings} />
+        </KeypressProvider>
+      </SettingsContext.Provider>,
+    );
+
+    expect(lastFrame()).toMatchSnapshot();
+  });
+
+  it('should render correctly in scope selector mode', async () => {
+    const settings = createMockSettings();
+    const { lastFrame, stdin } = render(
+      <SettingsContext.Provider value={settings}>
+        <KeypressProvider kittyProtocolEnabled={false}>
+          <ThemeDialog {...baseProps} settings={settings} />
+        </KeypressProvider>
+      </SettingsContext.Provider>,
+    );
+
+    // Press Tab to switch to scope selector mode
+    act(() => {
+      stdin.write('\t');
+    });
+
+    // Need to wait for the state update to propagate
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
+    expect(lastFrame()).toMatchSnapshot();
+  });
+});

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

@@ -7,18 +7,16 @@
 import type React from 'react';
 import { useCallback, useState } from 'react';
 import { Box, Text } from 'ink';
-import { Colors } from '../colors.js';
+import { theme } from '../semantic-colors.js';
 import { themeManager, DEFAULT_THEME } from '../themes/theme-manager.js';
 import { RadioButtonSelect } from './shared/RadioButtonSelect.js';
 import { DiffRenderer } from './messages/DiffRenderer.js';
 import { colorizeCode } from '../utils/CodeColorizer.js';
 import type { LoadedSettings } from '../../config/settings.js';
 import { SettingScope } from '../../config/settings.js';
-import {
-  getScopeItems,
-  getScopeMessageForSetting,
-} from '../../utils/dialogScopeUtils.js';
+import { getScopeMessageForSetting } from '../../utils/dialogScopeUtils.js';
 import { useKeypress } from '../hooks/useKeypress.js';
+import { ScopeSelector } from './shared/ScopeSelector.js';
 
 interface ThemeDialogProps {
   /** Callback function when a theme is selected */
@@ -65,26 +63,24 @@ export function ThemeDialog({
       value: theme.name,
       themeNameDisplay: theme.name,
       themeTypeDisplay: capitalize(theme.type),
+      key: theme.name,
     })),
     ...customThemeNames.map((name) => ({
       label: name,
       value: name,
       themeNameDisplay: name,
       themeTypeDisplay: 'Custom',
+      key: name,
     })),
   ];
-  const [selectInputKey, setSelectInputKey] = useState(Date.now());
 
   // Find the index of the selected theme, but only if it exists in the list
-  const selectedThemeName = settings.merged.ui?.theme || DEFAULT_THEME.name;
   const initialThemeIndex = themeItems.findIndex(
-    (item) => item.value === selectedThemeName,
+    (item) => item.value === highlightedThemeName,
   );
   // If not found, fall back to the first theme
   const safeInitialThemeIndex = initialThemeIndex >= 0 ? initialThemeIndex : 0;
 
-  const scopeItems = getScopeItems();
-
   const handleThemeSelect = useCallback(
     (themeName: string) => {
       onSelect(themeName, selectedScope);
@@ -99,25 +95,21 @@ export function ThemeDialog({
 
   const handleScopeHighlight = useCallback((scope: SettingScope) => {
     setSelectedScope(scope);
-    setSelectInputKey(Date.now());
   }, []);
 
   const handleScopeSelect = useCallback(
     (scope: SettingScope) => {
-      handleScopeHighlight(scope);
-      setFocusedSection('theme'); // Reset focus to theme section
+      onSelect(highlightedThemeName, scope);
     },
-    [handleScopeHighlight],
+    [onSelect, highlightedThemeName],
   );
 
-  const [focusedSection, setFocusedSection] = useState<'theme' | 'scope'>(
-    'theme',
-  );
+  const [mode, setMode] = useState<'theme' | 'scope'>('theme');
 
   useKeypress(
     (key) => {
       if (key.name === 'tab') {
-        setFocusedSection((prev) => (prev === 'theme' ? 'scope' : 'theme'));
+        setMode((prev) => (prev === 'theme' ? 'scope' : 'theme'));
       }
       if (key.name === 'escape') {
         onSelect(undefined, selectedScope);
@@ -152,20 +144,13 @@ export function ThemeDialog({
 
   const DIALOG_PADDING = 2;
   const selectThemeHeight = themeItems.length + 1;
-  const SCOPE_SELECTION_HEIGHT = 4; // Height for the scope selection section + margin.
-  const SPACE_BETWEEN_THEME_SELECTION_AND_APPLY_TO = 1;
   const TAB_TO_SELECT_HEIGHT = 2;
   availableTerminalHeight = availableTerminalHeight ?? Number.MAX_SAFE_INTEGER;
   availableTerminalHeight -= 2; // Top and bottom borders.
   availableTerminalHeight -= TAB_TO_SELECT_HEIGHT;
 
-  let totalLeftHandSideHeight =
-    DIALOG_PADDING +
-    selectThemeHeight +
-    SCOPE_SELECTION_HEIGHT +
-    SPACE_BETWEEN_THEME_SELECTION_AND_APPLY_TO;
+  let totalLeftHandSideHeight = DIALOG_PADDING + selectThemeHeight;
 
-  let showScopeSelection = true;
   let includePadding = true;
 
   // Remove content from the LHS that can be omitted if it exceeds the available height.
@@ -174,15 +159,6 @@ export function ThemeDialog({
     totalLeftHandSideHeight -= DIALOG_PADDING;
   }
 
-  if (totalLeftHandSideHeight > availableTerminalHeight) {
-    // First, try hiding the scope selection
-    totalLeftHandSideHeight -= SCOPE_SELECTION_HEIGHT;
-    showScopeSelection = false;
-  }
-
-  // Don't focus the scope selection if it is hidden due to height constraints.
-  const currentFocusedSection = !showScopeSelection ? 'theme' : focusedSection;
-
   // Vertical space taken by elements other than the two code blocks in the preview pane.
   // Includes "Preview" title, borders, and margin between blocks.
   const PREVIEW_PANE_FIXED_VERTICAL_SPACE = 8;
@@ -209,7 +185,7 @@ export function ThemeDialog({
   return (
     <Box
       borderStyle="round"
-      borderColor={Colors.Gray}
+      borderColor={theme.border.default}
       flexDirection="column"
       paddingTop={includePadding ? 1 : 0}
       paddingBottom={includePadding ? 1 : 0}
@@ -217,94 +193,89 @@ export function ThemeDialog({
       paddingRight={1}
       width="100%"
     >
-      <Box flexDirection="row">
-        {/* Left Column: Selection */}
-        <Box flexDirection="column" width="45%" paddingRight={2}>
-          <Text bold={currentFocusedSection === 'theme'} wrap="truncate">
-            {currentFocusedSection === 'theme' ? '> ' : '  '}Select Theme{' '}
-            <Text color={Colors.Gray}>{otherScopeModifiedMessage}</Text>
-          </Text>
-          <RadioButtonSelect
-            key={selectInputKey}
-            items={themeItems}
-            initialIndex={safeInitialThemeIndex}
-            onSelect={handleThemeSelect}
-            onHighlight={handleThemeHighlight}
-            isFocused={currentFocusedSection === 'theme'}
-            maxItemsToShow={8}
-            showScrollArrows={true}
-            showNumbers={currentFocusedSection === 'theme'}
-          />
-
-          {/* Scope Selection */}
-          {showScopeSelection && (
-            <Box marginTop={1} flexDirection="column">
-              <Text bold={currentFocusedSection === 'scope'} wrap="truncate">
-                {currentFocusedSection === 'scope' ? '> ' : '  '}Apply To
+      {mode === 'theme' ? (
+        <Box flexDirection="row">
+          {/* Left Column: Selection */}
+          <Box flexDirection="column" width="45%" paddingRight={2}>
+            <Text bold={mode === 'theme'} wrap="truncate">
+              {mode === 'theme' ? '> ' : '  '}Select Theme{' '}
+              <Text color={theme.text.secondary}>
+                {otherScopeModifiedMessage}
               </Text>
-              <RadioButtonSelect
-                items={scopeItems}
-                initialIndex={0} // Default to User Settings
-                onSelect={handleScopeSelect}
-                onHighlight={handleScopeHighlight}
-                isFocused={currentFocusedSection === 'scope'}
-                showNumbers={currentFocusedSection === 'scope'}
-              />
-            </Box>
-          )}
-        </Box>
+            </Text>
+            <RadioButtonSelect
+              items={themeItems}
+              initialIndex={safeInitialThemeIndex}
+              onSelect={handleThemeSelect}
+              onHighlight={handleThemeHighlight}
+              isFocused={mode === 'theme'}
+              maxItemsToShow={12}
+              showScrollArrows={true}
+              showNumbers={mode === 'theme'}
+            />
+          </Box>
 
-        {/* Right Column: Preview */}
-        <Box flexDirection="column" width="55%" paddingLeft={2}>
-          <Text bold>Preview</Text>
-          {/* Get the Theme object for the highlighted theme, fall back to default if not found */}
-          {(() => {
-            const previewTheme =
-              themeManager.getTheme(
-                highlightedThemeName || DEFAULT_THEME.name,
-              ) || DEFAULT_THEME;
-            return (
-              <Box
-                borderStyle="single"
-                borderColor={Colors.Gray}
-                paddingTop={includePadding ? 1 : 0}
-                paddingBottom={includePadding ? 1 : 0}
-                paddingLeft={1}
-                paddingRight={1}
-                flexDirection="column"
-              >
-                {colorizeCode(
-                  `# function
+          {/* Right Column: Preview */}
+          <Box flexDirection="column" width="55%" paddingLeft={2}>
+            <Text bold color={theme.text.primary}>
+              Preview
+            </Text>
+            {/* Get the Theme object for the highlighted theme, fall back to default if not found */}
+            {(() => {
+              const previewTheme =
+                themeManager.getTheme(
+                  highlightedThemeName || DEFAULT_THEME.name,
+                ) || DEFAULT_THEME;
+              return (
+                <Box
+                  borderStyle="single"
+                  borderColor={theme.border.default}
+                  paddingTop={includePadding ? 1 : 0}
+                  paddingBottom={includePadding ? 1 : 0}
+                  paddingLeft={1}
+                  paddingRight={1}
+                  flexDirection="column"
+                >
+                  {colorizeCode(
+                    `# function
 def fibonacci(n):
     a, b = 0, 1
     for _ in range(n):
         a, b = b, a + b
     return a`,
-                  'python',
-                  codeBlockHeight,
-                  colorizeCodeWidth,
-                )}
-                <Box marginTop={1} />
-                <DiffRenderer
-                  diffContent={`--- a/util.py
+                    'python',
+                    codeBlockHeight,
+                    colorizeCodeWidth,
+                  )}
+                  <Box marginTop={1} />
+                  <DiffRenderer
+                    diffContent={`--- a/util.py
 +++ b/util.py
 @@ -1,2 +1,2 @@
 - print("Hello, " + name)
 + print(f"Hello, {name}!")
 `}
-                  availableTerminalHeight={diffHeight}
-                  terminalWidth={colorizeCodeWidth}
-                  theme={previewTheme}
-                />
-              </Box>
-            );
-          })()}
+                    availableTerminalHeight={diffHeight}
+                    terminalWidth={colorizeCodeWidth}
+                    theme={previewTheme}
+                  />
+                </Box>
+              );
+            })()}
+          </Box>
         </Box>
-      </Box>
+      ) : (
+        <ScopeSelector
+          onSelect={handleScopeSelect}
+          onHighlight={handleScopeHighlight}
+          isFocused={mode === 'scope'}
+          initialScope={selectedScope}
+        />
+      )}
       <Box marginTop={1}>
-        <Text color={Colors.Gray} wrap="truncate">
-          (Use Enter to select
-          {showScopeSelection ? ', Tab to change focus' : ''})
+        <Text color={theme.text.secondary} wrap="truncate">
+          (Use Enter to {mode === 'theme' ? 'select' : 'apply scope'}, Tab to{' '}
+          {mode === 'theme' ? 'configure scope' : 'select theme'})
         </Text>
       </Box>
     </Box>

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

@@ -6,7 +6,7 @@
 
 import type React from 'react';
 import { Box, Text } from 'ink';
-import { Colors } from '../colors.js';
+import { theme } from '../semantic-colors.js';
 import { type Config } from '@qwen-code/qwen-code-core';
 
 interface TipsProps {
@@ -17,25 +17,25 @@ export const Tips: React.FC<TipsProps> = ({ config }) => {
   const geminiMdFileCount = config.getGeminiMdFileCount();
   return (
     <Box flexDirection="column">
-      <Text color={Colors.Foreground}>Tips for getting started:</Text>
-      <Text color={Colors.Foreground}>
+      <Text color={theme.text.primary}>Tips for getting started:</Text>
+      <Text color={theme.text.primary}>
         1. Ask questions, edit files, or run commands.
       </Text>
-      <Text color={Colors.Foreground}>
+      <Text color={theme.text.primary}>
         2. Be specific for the best results.
       </Text>
       {geminiMdFileCount === 0 && (
-        <Text color={Colors.Foreground}>
+        <Text color={theme.text.primary}>
           3. Create{' '}
-          <Text bold color={Colors.AccentPurple}>
+          <Text bold color={theme.text.accent}>
             QWEN.md
           </Text>{' '}
           files to customize your interactions with Qwen Code.
         </Text>
       )}
-      <Text color={Colors.Foreground}>
+      <Text color={theme.text.primary}>
         {geminiMdFileCount === 0 ? '4.' : '3.'}{' '}
-        <Text bold color={Colors.AccentPurple}>
+        <Text bold color={theme.text.accent}>
           /help
         </Text>{' '}
         for more information.

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

@@ -6,7 +6,7 @@
 
 import type React from 'react';
 import { Box, Text } from 'ink';
-import { Colors } from '../colors.js';
+import { theme } from '../semantic-colors.js';
 import { formatDuration } from '../utils/formatters.js';
 import {
   getStatusColor,
@@ -37,16 +37,16 @@ const StatRow: React.FC<{
   return (
     <Box>
       <Box width={TOOL_NAME_COL_WIDTH}>
-        <Text color={Colors.LightBlue}>{name}</Text>
+        <Text color={theme.text.link}>{name}</Text>
       </Box>
       <Box width={CALLS_COL_WIDTH} justifyContent="flex-end">
-        <Text>{stats.count}</Text>
+        <Text color={theme.text.primary}>{stats.count}</Text>
       </Box>
       <Box width={SUCCESS_RATE_COL_WIDTH} justifyContent="flex-end">
         <Text color={successColor}>{successRate.toFixed(1)}%</Text>
       </Box>
       <Box width={AVG_DURATION_COL_WIDTH} justifyContent="flex-end">
-        <Text>{formatDuration(avgDuration)}</Text>
+        <Text color={theme.text.primary}>{formatDuration(avgDuration)}</Text>
       </Box>
     </Box>
   );
@@ -63,11 +63,13 @@ export const ToolStatsDisplay: React.FC = () => {
     return (
       <Box
         borderStyle="round"
-        borderColor={Colors.Gray}
+        borderColor={theme.border.default}
         paddingY={1}
         paddingX={2}
       >
-        <Text>No tool calls have been made in this session.</Text>
+        <Text color={theme.text.primary}>
+          No tool calls have been made in this session.
+        </Text>
       </Box>
     );
   }
@@ -94,13 +96,13 @@ export const ToolStatsDisplay: React.FC = () => {
   return (
     <Box
       borderStyle="round"
-      borderColor={Colors.Gray}
+      borderColor={theme.border.default}
       flexDirection="column"
       paddingY={1}
       paddingX={2}
       width={70}
     >
-      <Text bold color={Colors.AccentPurple}>
+      <Text bold color={theme.text.accent}>
         Tool Stats For Nerds
       </Text>
       <Box height={1} />
@@ -108,16 +110,24 @@ export const ToolStatsDisplay: React.FC = () => {
       {/* Header */}
       <Box>
         <Box width={TOOL_NAME_COL_WIDTH}>
-          <Text bold>Tool Name</Text>
+          <Text bold color={theme.text.primary}>
+            Tool Name
+          </Text>
         </Box>
         <Box width={CALLS_COL_WIDTH} justifyContent="flex-end">
-          <Text bold>Calls</Text>
+          <Text bold color={theme.text.primary}>
+            Calls
+          </Text>
         </Box>
         <Box width={SUCCESS_RATE_COL_WIDTH} justifyContent="flex-end">
-          <Text bold>Success Rate</Text>
+          <Text bold color={theme.text.primary}>
+            Success Rate
+          </Text>
         </Box>
         <Box width={AVG_DURATION_COL_WIDTH} justifyContent="flex-end">
-          <Text bold>Avg Duration</Text>
+          <Text bold color={theme.text.primary}>
+            Avg Duration
+          </Text>
         </Box>
       </Box>
 
@@ -128,6 +138,7 @@ export const ToolStatsDisplay: React.FC = () => {
         borderTop={false}
         borderLeft={false}
         borderRight={false}
+        borderColor={theme.border.default}
         width="100%"
       />
 
@@ -139,45 +150,47 @@ export const ToolStatsDisplay: React.FC = () => {
       <Box height={1} />
 
       {/* User Decision Summary */}
-      <Text bold>User Decision Summary</Text>
+      <Text bold color={theme.text.primary}>
+        User Decision Summary
+      </Text>
       <Box>
         <Box
           width={TOOL_NAME_COL_WIDTH + CALLS_COL_WIDTH + SUCCESS_RATE_COL_WIDTH}
         >
-          <Text color={Colors.LightBlue}>Total Reviewed Suggestions:</Text>
+          <Text color={theme.text.link}>Total Reviewed Suggestions:</Text>
         </Box>
         <Box width={AVG_DURATION_COL_WIDTH} justifyContent="flex-end">
-          <Text>{totalReviewed}</Text>
+          <Text color={theme.text.primary}>{totalReviewed}</Text>
         </Box>
       </Box>
       <Box>
         <Box
           width={TOOL_NAME_COL_WIDTH + CALLS_COL_WIDTH + SUCCESS_RATE_COL_WIDTH}
         >
-          <Text> » Accepted:</Text>
+          <Text color={theme.text.primary}> » Accepted:</Text>
         </Box>
         <Box width={AVG_DURATION_COL_WIDTH} justifyContent="flex-end">
-          <Text color={Colors.AccentGreen}>{totalDecisions.accept}</Text>
+          <Text color={theme.status.success}>{totalDecisions.accept}</Text>
         </Box>
       </Box>
       <Box>
         <Box
           width={TOOL_NAME_COL_WIDTH + CALLS_COL_WIDTH + SUCCESS_RATE_COL_WIDTH}
         >
-          <Text> » Rejected:</Text>
+          <Text color={theme.text.primary}> » Rejected:</Text>
         </Box>
         <Box width={AVG_DURATION_COL_WIDTH} justifyContent="flex-end">
-          <Text color={Colors.AccentRed}>{totalDecisions.reject}</Text>
+          <Text color={theme.status.error}>{totalDecisions.reject}</Text>
         </Box>
       </Box>
       <Box>
         <Box
           width={TOOL_NAME_COL_WIDTH + CALLS_COL_WIDTH + SUCCESS_RATE_COL_WIDTH}
         >
-          <Text> » Modified:</Text>
+          <Text color={theme.text.primary}> » Modified:</Text>
         </Box>
         <Box width={AVG_DURATION_COL_WIDTH} justifyContent="flex-end">
-          <Text color={Colors.AccentYellow}>{totalDecisions.modify}</Text>
+          <Text color={theme.status.warning}>{totalDecisions.modify}</Text>
         </Box>
       </Box>
 
@@ -188,6 +201,7 @@ export const ToolStatsDisplay: React.FC = () => {
         borderTop={false}
         borderLeft={false}
         borderRight={false}
+        borderColor={theme.border.default}
         width="100%"
       />
 
@@ -195,7 +209,7 @@ export const ToolStatsDisplay: React.FC = () => {
         <Box
           width={TOOL_NAME_COL_WIDTH + CALLS_COL_WIDTH + SUCCESS_RATE_COL_WIDTH}
         >
-          <Text> Overall Agreement Rate:</Text>
+          <Text color={theme.text.primary}> Overall Agreement Rate:</Text>
         </Box>
         <Box width={AVG_DURATION_COL_WIDTH} justifyContent="flex-end">
           <Text bold color={totalReviewed > 0 ? agreementColor : undefined}>

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

@@ -5,7 +5,7 @@
  */
 
 import { Box, Text } from 'ink';
-import { Colors } from '../colors.js';
+import { theme } from '../semantic-colors.js';
 
 interface UpdateNotificationProps {
   message: string;
@@ -14,10 +14,10 @@ interface UpdateNotificationProps {
 export const UpdateNotification = ({ message }: UpdateNotificationProps) => (
   <Box
     borderStyle="round"
-    borderColor={Colors.AccentYellow}
+    borderColor={theme.status.warning}
     paddingX={1}
     marginY={1}
   >
-    <Text color={Colors.AccentYellow}>{message}</Text>
+    <Text color={theme.status.warning}>{message}</Text>
   </Box>
 );

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

@@ -35,10 +35,12 @@ export function WelcomeBackDialog({
 
   const options: Array<RadioSelectItem<'restart' | 'continue'>> = [
     {
+      key: 'restart',
       label: 'Start new chat session',
       value: 'restart',
     },
     {
+      key: 'continue',
       label: 'Continue previous conversation',
       value: 'continue',
     },

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

@@ -4,14 +4,15 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { Box, Text, useInput } from 'ink';
+import { Box, Text } from 'ink';
 import {
   type Extension,
   performWorkspaceExtensionMigration,
 } from '../../config/extension.js';
 import { RadioButtonSelect } from './shared/RadioButtonSelect.js';
-import { Colors } from '../colors.js';
+import { theme } from '../semantic-colors.js';
 import { useState } from 'react';
+import { useKeypress } from '../hooks/useKeypress.js';
 
 export function WorkspaceMigrationDialog(props: {
   workspaceExtensions: Extension[];
@@ -23,32 +24,38 @@ export function WorkspaceMigrationDialog(props: {
   const [failedExtensions, setFailedExtensions] = useState<string[]>([]);
   onOpen();
   const onMigrate = async () => {
-    const failed =
-      await performWorkspaceExtensionMigration(workspaceExtensions);
+    const failed = await performWorkspaceExtensionMigration(
+      workspaceExtensions,
+      // We aren't updating extensions, just moving them around, don't need to ask for consent.
+      async (_) => true,
+    );
     setFailedExtensions(failed);
     setMigrationComplete(true);
   };
 
-  useInput((input) => {
-    if (migrationComplete && input === 'q') {
-      process.exit(0);
-    }
-  });
+  useKeypress(
+    (key) => {
+      if (migrationComplete && key.sequence === 'q') {
+        process.exit(0);
+      }
+    },
+    { isActive: true },
+  );
 
   if (migrationComplete) {
     return (
       <Box
         flexDirection="column"
         borderStyle="round"
-        borderColor={Colors.Gray}
+        borderColor={theme.border.default}
         padding={1}
       >
         {failedExtensions.length > 0 ? (
           <>
-            <Text>
+            <Text color={theme.text.primary}>
               The following extensions failed to migrate. Please try installing
               them manually. To see other changes, Qwen Code must be restarted.
-              Press {"'q'"} to quit.
+              Press &apos;q&apos; to quit.
             </Text>
             <Box flexDirection="column" marginTop={1} marginLeft={2}>
               {failedExtensions.map((failed) => (
@@ -57,9 +64,9 @@ export function WorkspaceMigrationDialog(props: {
             </Box>
           </>
         ) : (
-          <Text>
+          <Text color={theme.text.primary}>
             Migration complete. To see changes, Qwen Code must be restarted.
-            Press {"'q'"} to quit.
+            Press &apos;q&apos; to quit.
           </Text>
         )}
       </Box>
@@ -70,15 +77,19 @@ export function WorkspaceMigrationDialog(props: {
     <Box
       flexDirection="column"
       borderStyle="round"
-      borderColor={Colors.Gray}
+      borderColor={theme.border.default}
       padding={1}
     >
-      <Text bold>Workspace-level extensions are deprecated{'\n'}</Text>
-      <Text>Would you like to install them at the user level?</Text>
-      <Text>
+      <Text bold color={theme.text.primary}>
+        Workspace-level extensions are deprecated{'\n'}
+      </Text>
+      <Text color={theme.text.primary}>
+        Would you like to install them at the user level?
+      </Text>
+      <Text color={theme.text.primary}>
         The extension definition will remain in your workspace directory.
       </Text>
-      <Text>
+      <Text color={theme.text.primary}>
         If you opt to skip, you can install them manually using the extensions
         install command.
       </Text>
@@ -91,8 +102,8 @@ export function WorkspaceMigrationDialog(props: {
       <Box marginTop={1}>
         <RadioButtonSelect
           items={[
-            { label: 'Install all', value: 'migrate' },
-            { label: 'Skip', value: 'skip' },
+            { label: 'Install all', value: 'migrate', key: 'migrate' },
+            { label: 'Skip', value: 'skip', key: 'skip' },
           ]}
           onSelect={(value: string) => {
             if (value === 'migrate') {

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

@@ -0,0 +1,11 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`<Footer /> > footer configuration filtering (golden snapshots) > renders complete footer in narrow terminal (baseline narrow) > complete-footer-narrow 1`] = `"...s/to/make/it/long (main*)                     no sandbox                      gemini-pro (100%)"`;
+
+exports[`<Footer /> > footer configuration filtering (golden snapshots) > renders complete footer with all sections visible (baseline) > complete-footer-wide 1`] = `"...directories/to/make/it/long (main*)    no sandbox (see /docs)    gemini-pro (100% context left)"`;
+
+exports[`<Footer /> > footer configuration filtering (golden snapshots) > renders footer with CWD and model info hidden to test alignment (only sandbox visible) > footer-only-sandbox 1`] = `"                                       no sandbox (see /docs)"`;
+
+exports[`<Footer /> > footer configuration filtering (golden snapshots) > renders footer with all optional sections hidden (minimal footer) > footer-minimal 1`] = `""`;
+
+exports[`<Footer /> > footer configuration filtering (golden snapshots) > renders footer with only model info hidden (partial filtering) > footer-no-model 1`] = `"...directories/to/make/it/long (main*)                    no sandbox (see /docs)"`;

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

@@ -0,0 +1,137 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`<HistoryItemDisplay /> > should render a full gemini item when using availableTerminalHeightGemini 1`] = `
+"✦ Example code block:
+    1 Line 1
+    2 Line 2
+    3 Line 3
+    4 Line 4
+    5 Line 5
+    6 Line 6
+    7 Line 7
+    8 Line 8
+    9 Line 9
+   10 Line 10
+   11 Line 11
+   12 Line 12
+   13 Line 13
+   14 Line 14
+   15 Line 15
+   16 Line 16
+   17 Line 17
+   18 Line 18
+   19 Line 19
+   20 Line 20
+   21 Line 21
+   22 Line 22
+   23 Line 23
+   24 Line 24
+   25 Line 25
+   26 Line 26
+   27 Line 27
+   28 Line 28
+   29 Line 29
+   30 Line 30
+   31 Line 31
+   32 Line 32
+   33 Line 33
+   34 Line 34
+   35 Line 35
+   36 Line 36
+   37 Line 37
+   38 Line 38
+   39 Line 39
+   40 Line 40
+   41 Line 41
+   42 Line 42
+   43 Line 43
+   44 Line 44
+   45 Line 45
+   46 Line 46
+   47 Line 47
+   48 Line 48
+   49 Line 49
+   50 Line 50"
+`;
+
+exports[`<HistoryItemDisplay /> > should render a full gemini_content item when using availableTerminalHeightGemini 1`] = `
+"  Example code block:
+    1 Line 1
+    2 Line 2
+    3 Line 3
+    4 Line 4
+    5 Line 5
+    6 Line 6
+    7 Line 7
+    8 Line 8
+    9 Line 9
+   10 Line 10
+   11 Line 11
+   12 Line 12
+   13 Line 13
+   14 Line 14
+   15 Line 15
+   16 Line 16
+   17 Line 17
+   18 Line 18
+   19 Line 19
+   20 Line 20
+   21 Line 21
+   22 Line 22
+   23 Line 23
+   24 Line 24
+   25 Line 25
+   26 Line 26
+   27 Line 27
+   28 Line 28
+   29 Line 29
+   30 Line 30
+   31 Line 31
+   32 Line 32
+   33 Line 33
+   34 Line 34
+   35 Line 35
+   36 Line 36
+   37 Line 37
+   38 Line 38
+   39 Line 39
+   40 Line 40
+   41 Line 41
+   42 Line 42
+   43 Line 43
+   44 Line 44
+   45 Line 45
+   46 Line 46
+   47 Line 47
+   48 Line 48
+   49 Line 49
+   50 Line 50"
+`;
+
+exports[`<HistoryItemDisplay /> > should render a truncated gemini item 1`] = `
+"✦ Example code block:
+   ... first 41 lines hidden ...
+   42 Line 42
+   43 Line 43
+   44 Line 44
+   45 Line 45
+   46 Line 46
+   47 Line 47
+   48 Line 48
+   49 Line 49
+   50 Line 50"
+`;
+
+exports[`<HistoryItemDisplay /> > should render a truncated gemini_content item 1`] = `
+"  Example code block:
+   ... first 41 lines hidden ...
+   42 Line 42
+   43 Line 43
+   44 Line 44
+   45 Line 45
+   46 Line 46
+   47 Line 47
+   48 Line 48
+   49 Line 49
+   50 Line 50"
+`;

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

@@ -0,0 +1,57 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`InputPrompt > command search (Ctrl+R when not in shell) > expands and collapses long suggestion via Right/Left arrows > command-search-collapsed-match 1`] = `
+"╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
+│ (r:)    Type your message or @path/to/file                                                       │
+╰──────────────────────────────────────────────────────────────────────────────────────────────────╯
+ lllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll →
+ lllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll
+ ..."
+`;
+
+exports[`InputPrompt > command search (Ctrl+R when not in shell) > expands and collapses long suggestion via Right/Left arrows > command-search-expanded-match 1`] = `
+"╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
+│ (r:)    Type your message or @path/to/file                                                       │
+╰──────────────────────────────────────────────────────────────────────────────────────────────────╯
+ lllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll ←
+ lllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll
+ llllllllllllllllllllllllllllllllllllllllllllllllll"
+`;
+
+exports[`InputPrompt > command search (Ctrl+R when not in shell) > renders match window and expanded view (snapshots) > command-search-collapsed-match 1`] = `
+"╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
+│ (r:)  commit                                                                                     │
+╰──────────────────────────────────────────────────────────────────────────────────────────────────╯
+ git commit -m "feat: add search" in src/app"
+`;
+
+exports[`InputPrompt > command search (Ctrl+R when not in shell) > renders match window and expanded view (snapshots) > command-search-expanded-match 1`] = `
+"╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
+│ (r:)  commit                                                                                     │
+╰──────────────────────────────────────────────────────────────────────────────────────────────────╯
+ git commit -m "feat: add search" in src/app"
+`;
+
+exports[`InputPrompt > snapshots > should not show inverted cursor when shell is focused 1`] = `
+"╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
+│ >   Type your message or @path/to/file                                                           │
+╰──────────────────────────────────────────────────────────────────────────────────────────────────╯"
+`;
+
+exports[`InputPrompt > snapshots > should render correctly in shell mode 1`] = `
+"╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
+│ !   Type your message or @path/to/file                                                           │
+╰──────────────────────────────────────────────────────────────────────────────────────────────────╯"
+`;
+
+exports[`InputPrompt > snapshots > should render correctly in yolo mode 1`] = `
+"╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
+│ *   Type your message or @path/to/file                                                           │
+╰──────────────────────────────────────────────────────────────────────────────────────────────────╯"
+`;
+
+exports[`InputPrompt > snapshots > should render correctly when accepting edits 1`] = `
+"╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
+│ >   Type your message or @path/to/file                                                           │
+╰──────────────────────────────────────────────────────────────────────────────────────────────────╯"
+`;

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

@@ -0,0 +1,6 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`<LoadingIndicator /> > should truncate long primary text instead of wrapping 1`] = `
+"MockResponding This is an extremely long loading phrase that should be truncated in t (esc to
+Spinner                                                                              cancel, 5s)"
+`;

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

@@ -0,0 +1,16 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`LoopDetectionConfirmation > renders correctly 1`] = `
+" ╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
+ │ ?  A potential loop was detected                                                                 │
+ │                                                                                                  │
+ │ This can happen due to repetitive tool calls or other model behavior. Do you want to keep loop   │
+ │ detection enabled or disable it for this session?                                                │
+ │                                                                                                  │
+ │ ● 1. Keep loop detection enabled (esc)                                                           │
+ │   2. Disable loop detection for this session                                                     │
+ │                                                                                                  │
+ │ Note: To disable loop detection checks for all future sessions, set "model.skipLoopDetection" to │
+ │  true in your settings.json.                                                                     │
+ ╰──────────────────────────────────────────────────────────────────────────────────────────────────╯"
+`;

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

@@ -0,0 +1,25 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`PrepareLabel > creates centered window around match when collapsed 1`] = `
+"...ry/long/path/that/keeps/going/cd /very/long/path/that/keeps/going/search-here/and/then/some/more/
+components//and/then/some/more/components//and/..."
+`;
+
+exports[`PrepareLabel > highlights matched substring when expanded (text only visible) 1`] = `"run: git commit -m "feat: add search""`;
+
+exports[`PrepareLabel > renders plain label when no match (short label) 1`] = `"simple command"`;
+
+exports[`PrepareLabel > shows full long label when expanded and no match 1`] = `
+"yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy
+yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy"
+`;
+
+exports[`PrepareLabel > truncates long label when collapsed and no match 1`] = `
+"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx..."
+`;
+
+exports[`PrepareLabel > truncates match itself when match is very long 1`] = `
+"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx..."
+`;

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

@@ -0,0 +1,351 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`SettingsDialog > Snapshot Tests > should render default state correctly 1`] = `
+"╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
+│                                                                                                  │
+│ > Settings                                                                                       │
+│                                                                                                  │
+│ ▲                                                                                                │
+│ ● Vim Mode                                             false                                     │
+│                                                                                                  │
+│   Disable Auto Update                                  false                                     │
+│                                                                                                  │
+│   Enable Prompt Completion                             false                                     │
+│                                                                                                  │
+│   Debug Keystroke Logging                              false                                     │
+│                                                                                                  │
+│   Output Format                                        Text                                      │
+│                                                                                                  │
+│   Hide Window Title                                    false                                     │
+│                                                                                                  │
+│   Show Status in Title                                 false                                     │
+│                                                                                                  │
+│   Hide Tips                                            false                                     │
+│                                                                                                  │
+│ ▼                                                                                                │
+│                                                                                                  │
+│                                                                                                  │
+│   Apply To                                                                                       │
+│ ● User Settings                                                                                  │
+│   Workspace Settings                                                                             │
+│   System Settings                                                                                │
+│                                                                                                  │
+│ (Use Enter to select, Tab to change focus)                                                       │
+│                                                                                                  │
+╰──────────────────────────────────────────────────────────────────────────────────────────────────╯"
+`;
+
+exports[`SettingsDialog > Snapshot Tests > should render focused on scope selector 1`] = `
+"╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
+│                                                                                                  │
+│ > Settings                                                                                       │
+│                                                                                                  │
+│ ▲                                                                                                │
+│ ● Vim Mode                                             false                                     │
+│                                                                                                  │
+│   Disable Auto Update                                  false                                     │
+│                                                                                                  │
+│   Enable Prompt Completion                             false                                     │
+│                                                                                                  │
+│   Debug Keystroke Logging                              false                                     │
+│                                                                                                  │
+│   Output Format                                        Text                                      │
+│                                                                                                  │
+│   Hide Window Title                                    false                                     │
+│                                                                                                  │
+│   Show Status in Title                                 false                                     │
+│                                                                                                  │
+│   Hide Tips                                            false                                     │
+│                                                                                                  │
+│ ▼                                                                                                │
+│                                                                                                  │
+│                                                                                                  │
+│   Apply To                                                                                       │
+│ ● User Settings                                                                                  │
+│   Workspace Settings                                                                             │
+│   System Settings                                                                                │
+│                                                                                                  │
+│ (Use Enter to select, Tab to change focus)                                                       │
+│                                                                                                  │
+╰──────────────────────────────────────────────────────────────────────────────────────────────────╯"
+`;
+
+exports[`SettingsDialog > Snapshot Tests > should render with accessibility settings enabled 1`] = `
+"╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
+│                                                                                                  │
+│ > Settings                                                                                       │
+│                                                                                                  │
+│ ▲                                                                                                │
+│ ● Vim Mode                                             true*                                     │
+│                                                                                                  │
+│   Disable Auto Update                                  false                                     │
+│                                                                                                  │
+│   Enable Prompt Completion                             false                                     │
+│                                                                                                  │
+│   Debug Keystroke Logging                              false                                     │
+│                                                                                                  │
+│   Output Format                                        Text                                      │
+│                                                                                                  │
+│   Hide Window Title                                    false                                     │
+│                                                                                                  │
+│   Show Status in Title                                 false                                     │
+│                                                                                                  │
+│   Hide Tips                                            false                                     │
+│                                                                                                  │
+│ ▼                                                                                                │
+│                                                                                                  │
+│                                                                                                  │
+│   Apply To                                                                                       │
+│ ● User Settings                                                                                  │
+│   Workspace Settings                                                                             │
+│   System Settings                                                                                │
+│                                                                                                  │
+│ (Use Enter to select, Tab to change focus)                                                       │
+│                                                                                                  │
+╰──────────────────────────────────────────────────────────────────────────────────────────────────╯"
+`;
+
+exports[`SettingsDialog > Snapshot Tests > should render with all boolean settings disabled 1`] = `
+"╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
+│                                                                                                  │
+│ > Settings                                                                                       │
+│                                                                                                  │
+│ ▲                                                                                                │
+│ ● Vim Mode                                             false*                                    │
+│                                                                                                  │
+│   Disable Auto Update                                  false*                                    │
+│                                                                                                  │
+│   Enable Prompt Completion                             false*                                    │
+│                                                                                                  │
+│   Debug Keystroke Logging                              false*                                    │
+│                                                                                                  │
+│   Output Format                                        Text                                      │
+│                                                                                                  │
+│   Hide Window Title                                    false*                                    │
+│                                                                                                  │
+│   Show Status in Title                                 false                                     │
+│                                                                                                  │
+│   Hide Tips                                            false*                                    │
+│                                                                                                  │
+│ ▼                                                                                                │
+│                                                                                                  │
+│                                                                                                  │
+│   Apply To                                                                                       │
+│ ● User Settings                                                                                  │
+│   Workspace Settings                                                                             │
+│   System Settings                                                                                │
+│                                                                                                  │
+│ (Use Enter to select, Tab to change focus)                                                       │
+│                                                                                                  │
+╰──────────────────────────────────────────────────────────────────────────────────────────────────╯"
+`;
+
+exports[`SettingsDialog > Snapshot Tests > should render with different scope selected (System) 1`] = `
+"╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
+│                                                                                                  │
+│ > Settings                                                                                       │
+│                                                                                                  │
+│ ▲                                                                                                │
+│ ● Vim Mode (Modified in System)                        false                                     │
+│                                                                                                  │
+│   Disable Auto Update (Modified in System)             false                                     │
+│                                                                                                  │
+│   Enable Prompt Completion                             false                                     │
+│                                                                                                  │
+│   Debug Keystroke Logging                              false                                     │
+│                                                                                                  │
+│   Output Format                                        Text                                      │
+│                                                                                                  │
+│   Hide Window Title                                    false                                     │
+│                                                                                                  │
+│   Show Status in Title                                 false                                     │
+│                                                                                                  │
+│   Hide Tips                                            false                                     │
+│                                                                                                  │
+│ ▼                                                                                                │
+│                                                                                                  │
+│                                                                                                  │
+│   Apply To                                                                                       │
+│ ● User Settings                                                                                  │
+│   Workspace Settings                                                                             │
+│   System Settings                                                                                │
+│                                                                                                  │
+│ (Use Enter to select, Tab to change focus)                                                       │
+│                                                                                                  │
+╰──────────────────────────────────────────────────────────────────────────────────────────────────╯"
+`;
+
+exports[`SettingsDialog > Snapshot Tests > should render with different scope selected (Workspace) 1`] = `
+"╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
+│                                                                                                  │
+│ > Settings                                                                                       │
+│                                                                                                  │
+│ ▲                                                                                                │
+│ ● Vim Mode (Modified in Workspace)                     false                                     │
+│                                                                                                  │
+│   Disable Auto Update                                  false                                     │
+│                                                                                                  │
+│   Enable Prompt Completion                             false                                     │
+│                                                                                                  │
+│   Debug Keystroke Logging (Modified in Workspace)      false                                     │
+│                                                                                                  │
+│   Output Format                                        Text                                      │
+│                                                                                                  │
+│   Hide Window Title                                    false                                     │
+│                                                                                                  │
+│   Show Status in Title                                 false                                     │
+│                                                                                                  │
+│   Hide Tips                                            false                                     │
+│                                                                                                  │
+│ ▼                                                                                                │
+│                                                                                                  │
+│                                                                                                  │
+│   Apply To                                                                                       │
+│ ● User Settings                                                                                  │
+│   Workspace Settings                                                                             │
+│   System Settings                                                                                │
+│                                                                                                  │
+│ (Use Enter to select, Tab to change focus)                                                       │
+│                                                                                                  │
+╰──────────────────────────────────────────────────────────────────────────────────────────────────╯"
+`;
+
+exports[`SettingsDialog > Snapshot Tests > should render with file filtering settings configured 1`] = `
+"╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
+│                                                                                                  │
+│ > Settings                                                                                       │
+│                                                                                                  │
+│ ▲                                                                                                │
+│ ● Vim Mode                                             false                                     │
+│                                                                                                  │
+│   Disable Auto Update                                  false                                     │
+│                                                                                                  │
+│   Enable Prompt Completion                             false                                     │
+│                                                                                                  │
+│   Debug Keystroke Logging                              false                                     │
+│                                                                                                  │
+│   Output Format                                        Text                                      │
+│                                                                                                  │
+│   Hide Window Title                                    false                                     │
+│                                                                                                  │
+│   Show Status in Title                                 false                                     │
+│                                                                                                  │
+│   Hide Tips                                            false                                     │
+│                                                                                                  │
+│ ▼                                                                                                │
+│                                                                                                  │
+│                                                                                                  │
+│   Apply To                                                                                       │
+│ ● User Settings                                                                                  │
+│   Workspace Settings                                                                             │
+│   System Settings                                                                                │
+│                                                                                                  │
+│ (Use Enter to select, Tab to change focus)                                                       │
+│                                                                                                  │
+╰──────────────────────────────────────────────────────────────────────────────────────────────────╯"
+`;
+
+exports[`SettingsDialog > Snapshot Tests > should render with mixed boolean and number settings 1`] = `
+"╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
+│                                                                                                  │
+│ > Settings                                                                                       │
+│                                                                                                  │
+│ ▲                                                                                                │
+│ ● Vim Mode                                             false*                                    │
+│                                                                                                  │
+│   Disable Auto Update                                  true*                                     │
+│                                                                                                  │
+│   Enable Prompt Completion                             false                                     │
+│                                                                                                  │
+│   Debug Keystroke Logging                              false                                     │
+│                                                                                                  │
+│   Output Format                                        Text                                      │
+│                                                                                                  │
+│   Hide Window Title                                    false*                                    │
+│                                                                                                  │
+│   Show Status in Title                                 false                                     │
+│                                                                                                  │
+│   Hide Tips                                            false                                     │
+│                                                                                                  │
+│ ▼                                                                                                │
+│                                                                                                  │
+│                                                                                                  │
+│   Apply To                                                                                       │
+│ ● User Settings                                                                                  │
+│   Workspace Settings                                                                             │
+│   System Settings                                                                                │
+│                                                                                                  │
+│ (Use Enter to select, Tab to change focus)                                                       │
+│                                                                                                  │
+╰──────────────────────────────────────────────────────────────────────────────────────────────────╯"
+`;
+
+exports[`SettingsDialog > Snapshot Tests > should render with tools and security settings 1`] = `
+"╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
+│                                                                                                  │
+│ > Settings                                                                                       │
+│                                                                                                  │
+│ ▲                                                                                                │
+│ ● Vim Mode                                             false                                     │
+│                                                                                                  │
+│   Disable Auto Update                                  false                                     │
+│                                                                                                  │
+│   Enable Prompt Completion                             false                                     │
+│                                                                                                  │
+│   Debug Keystroke Logging                              false                                     │
+│                                                                                                  │
+│   Output Format                                        Text                                      │
+│                                                                                                  │
+│   Hide Window Title                                    false                                     │
+│                                                                                                  │
+│   Show Status in Title                                 false                                     │
+│                                                                                                  │
+│   Hide Tips                                            false                                     │
+│                                                                                                  │
+│ ▼                                                                                                │
+│                                                                                                  │
+│                                                                                                  │
+│   Apply To                                                                                       │
+│ ● User Settings                                                                                  │
+│   Workspace Settings                                                                             │
+│   System Settings                                                                                │
+│                                                                                                  │
+│ (Use Enter to select, Tab to change focus)                                                       │
+│                                                                                                  │
+╰──────────────────────────────────────────────────────────────────────────────────────────────────╯"
+`;
+
+exports[`SettingsDialog > Snapshot Tests > should render with various boolean settings enabled 1`] = `
+"╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
+│                                                                                                  │
+│ > Settings                                                                                       │
+│                                                                                                  │
+│ ▲                                                                                                │
+│ ● Vim Mode                                             true*                                     │
+│                                                                                                  │
+│   Disable Auto Update                                  true*                                     │
+│                                                                                                  │
+│   Enable Prompt Completion                             true*                                     │
+│                                                                                                  │
+│   Debug Keystroke Logging                              true*                                     │
+│                                                                                                  │
+│   Output Format                                        Text                                      │
+│                                                                                                  │
+│   Hide Window Title                                    true*                                     │
+│                                                                                                  │
+│   Show Status in Title                                 false                                     │
+│                                                                                                  │
+│   Hide Tips                                            true*                                     │
+│                                                                                                  │
+│ ▼                                                                                                │
+│                                                                                                  │
+│                                                                                                  │
+│   Apply To                                                                                       │
+│ ● User Settings                                                                                  │
+│   Workspace Settings                                                                             │
+│   System Settings                                                                                │
+│                                                                                                  │
+│ (Use Enter to select, Tab to change focus)                                                       │
+│                                                                                                  │
+╰──────────────────────────────────────────────────────────────────────────────────────────────────╯"
+`;

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

@@ -0,0 +1,38 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ThemeDialog Snapshots > should render correctly in scope selector mode 1`] = `
+"╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
+│                                                                                                  │
+│ > Apply To                                                                                       │
+│ ● 1. User Settings                                                                               │
+│   2. Workspace Settings                                                                          │
+│   3. System Settings                                                                             │
+│                                                                                                  │
+│ (Use Enter to apply scope, Tab to select theme)                                                  │
+│                                                                                                  │
+╰──────────────────────────────────────────────────────────────────────────────────────────────────╯"
+`;
+
+exports[`ThemeDialog Snapshots > should render correctly in theme selection mode 1`] = `
+"╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
+│                                                                                                  │
+│ > Select Theme                               Preview                                             │
+│ ▲                                            ┌─────────────────────────────────────────────────┐ │
+│    1. Qwen Light Light                       │                                                 │ │
+│ ●  2. Qwen Dark Dark                         │ 1 # function                                    │ │
+│    3. ANSI Dark                              │ 2 def fibonacci(n):                             │ │
+│    4. Atom One Dark                          │ 3     a, b = 0, 1                               │ │
+│    5. Ayu Dark                               │ 4     for _ in range(n):                        │ │
+│    6. Default Dark                           │ 5         a, b = b, a + b                       │ │
+│    7. Dracula Dark                           │ 6     return a                                  │ │
+│    8. GitHub Dark                            │                                                 │ │
+│    9. Shades Of Purple Dark                  │ 1 - print("Hello, " + name)                     │ │
+│   10. ANSI Light Light                       │ 1 + print(f"Hello, {name}!")                    │ │
+│   11. Ayu Light Light                        │                                                 │ │
+│   12. Default Light Light                    └─────────────────────────────────────────────────┘ │
+│ ▼                                                                                                │
+│                                                                                                  │
+│ (Use Enter to select, Tab to configure scope)                                                    │
+│                                                                                                  │
+╰──────────────────────────────────────────────────────────────────────────────────────────────────╯"
+`;

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

@@ -0,0 +1,198 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { render } from 'ink-testing-library';
+import type { CompressionDisplayProps } from './CompressionMessage.js';
+import { CompressionMessage } from './CompressionMessage.js';
+import { CompressionStatus } from '@qwen-code/qwen-code-core';
+import type { CompressionProps } from '../../types.js';
+import { describe, it, expect } from 'vitest';
+
+describe('<CompressionMessage />', () => {
+  const createCompressionProps = (
+    overrides: Partial<CompressionProps> = {},
+  ): CompressionDisplayProps => ({
+    compression: {
+      isPending: false,
+      originalTokenCount: null,
+      newTokenCount: null,
+      compressionStatus: CompressionStatus.COMPRESSED,
+      ...overrides,
+    },
+  });
+
+  describe('pending state', () => {
+    it('renders pending message when compression is in progress', () => {
+      const props = createCompressionProps({ isPending: true });
+      const { lastFrame } = render(<CompressionMessage {...props} />);
+      const output = lastFrame();
+
+      expect(output).toContain('Compressing chat history');
+    });
+  });
+
+  describe('normal compression (successful token reduction)', () => {
+    it('renders success message when tokens are reduced', () => {
+      const props = createCompressionProps({
+        isPending: false,
+        originalTokenCount: 100,
+        newTokenCount: 50,
+        compressionStatus: CompressionStatus.COMPRESSED,
+      });
+      const { lastFrame } = render(<CompressionMessage {...props} />);
+      const output = lastFrame();
+
+      expect(output).toContain('✦');
+      expect(output).toContain(
+        'Chat history compressed from 100 to 50 tokens.',
+      );
+    });
+
+    it('renders success message for large successful compressions', () => {
+      const testCases = [
+        { original: 50000, new: 25000 }, // Large compression
+        { original: 700000, new: 350000 }, // Very large compression
+      ];
+
+      testCases.forEach(({ original, new: newTokens }) => {
+        const props = createCompressionProps({
+          isPending: false,
+          originalTokenCount: original,
+          newTokenCount: newTokens,
+          compressionStatus: CompressionStatus.COMPRESSED,
+        });
+        const { lastFrame } = render(<CompressionMessage {...props} />);
+        const output = lastFrame();
+
+        expect(output).toContain('✦');
+        expect(output).toContain(
+          `compressed from ${original} to ${newTokens} tokens`,
+        );
+        expect(output).not.toContain('Skipping compression');
+        expect(output).not.toContain('did not reduce size');
+      });
+    });
+  });
+
+  describe('skipped compression (tokens increased or same)', () => {
+    it('renders skip message when compression would increase token count', () => {
+      const props = createCompressionProps({
+        isPending: false,
+        originalTokenCount: 50,
+        newTokenCount: 75,
+        compressionStatus:
+          CompressionStatus.COMPRESSION_FAILED_INFLATED_TOKEN_COUNT,
+      });
+      const { lastFrame } = render(<CompressionMessage {...props} />);
+      const output = lastFrame();
+
+      expect(output).toContain('✦');
+      expect(output).toContain(
+        'Compression was not beneficial for this history size.',
+      );
+    });
+
+    it('renders skip message when token counts are equal', () => {
+      const props = createCompressionProps({
+        isPending: false,
+        originalTokenCount: 50,
+        newTokenCount: 50,
+        compressionStatus:
+          CompressionStatus.COMPRESSION_FAILED_INFLATED_TOKEN_COUNT,
+      });
+      const { lastFrame } = render(<CompressionMessage {...props} />);
+      const output = lastFrame();
+
+      expect(output).toContain(
+        'Compression was not beneficial for this history size.',
+      );
+    });
+  });
+
+  describe('message content validation', () => {
+    it('displays correct compression statistics', () => {
+      const testCases = [
+        {
+          original: 200,
+          new: 80,
+          expected: 'compressed from 200 to 80 tokens',
+        },
+        {
+          original: 500,
+          new: 150,
+          expected: 'compressed from 500 to 150 tokens',
+        },
+        {
+          original: 1500,
+          new: 400,
+          expected: 'compressed from 1500 to 400 tokens',
+        },
+      ];
+
+      testCases.forEach(({ original, new: newTokens, expected }) => {
+        const props = createCompressionProps({
+          isPending: false,
+          originalTokenCount: original,
+          newTokenCount: newTokens,
+          compressionStatus: CompressionStatus.COMPRESSED,
+        });
+        const { lastFrame } = render(<CompressionMessage {...props} />);
+        const output = lastFrame();
+
+        expect(output).toContain(expected);
+      });
+    });
+
+    it('shows skip message for small histories when new tokens >= original tokens', () => {
+      const testCases = [
+        { original: 50, new: 60 }, // Increased
+        { original: 100, new: 100 }, // Same
+        { original: 49999, new: 50000 }, // Just under 50k threshold
+      ];
+
+      testCases.forEach(({ original, new: newTokens }) => {
+        const props = createCompressionProps({
+          isPending: false,
+          originalTokenCount: original,
+          newTokenCount: newTokens,
+          compressionStatus:
+            CompressionStatus.COMPRESSION_FAILED_INFLATED_TOKEN_COUNT,
+        });
+        const { lastFrame } = render(<CompressionMessage {...props} />);
+        const output = lastFrame();
+
+        expect(output).toContain(
+          'Compression was not beneficial for this history size.',
+        );
+        expect(output).not.toContain('compressed from');
+      });
+    });
+
+    it('shows compression failure message for large histories when new tokens >= original tokens', () => {
+      const testCases = [
+        { original: 50000, new: 50100 }, // At 50k threshold
+        { original: 700000, new: 710000 }, // Large history case
+        { original: 100000, new: 100000 }, // Large history, same count
+      ];
+
+      testCases.forEach(({ original, new: newTokens }) => {
+        const props = createCompressionProps({
+          isPending: false,
+          originalTokenCount: original,
+          newTokenCount: newTokens,
+          compressionStatus:
+            CompressionStatus.COMPRESSION_FAILED_INFLATED_TOKEN_COUNT,
+        });
+        const { lastFrame } = render(<CompressionMessage {...props} />);
+        const output = lastFrame();
+
+        expect(output).toContain('compression did not reduce size');
+        expect(output).not.toContain('compressed from');
+        expect(output).not.toContain('Compression was not beneficial');
+      });
+    });
+  });
+});

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

@@ -4,12 +4,12 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import type React from 'react';
 import { Box, Text } from 'ink';
 import type { CompressionProps } from '../../types.js';
 import Spinner from 'ink-spinner';
-import { Colors } from '../../colors.js';
+import { theme } from '../../semantic-colors.js';
 import { SCREEN_READER_MODEL_PREFIX } from '../../textConstants.js';
+import { CompressionStatus } from '@qwen-code/qwen-code-core';
 
 export interface CompressionDisplayProps {
   compression: CompressionProps;
@@ -19,27 +19,55 @@ export interface CompressionDisplayProps {
  * 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> = ({
+export function CompressionMessage({
   compression,
-}) => {
-  const text = compression.isPending
-    ? 'Compressing chat history'
-    : `Chat history compressed from ${compression.originalTokenCount ?? 'unknown'}` +
-      ` to ${compression.newTokenCount ?? 'unknown'} tokens.`;
+}: CompressionDisplayProps): React.JSX.Element {
+  const { isPending, originalTokenCount, newTokenCount, compressionStatus } =
+    compression;
+
+  const originalTokens = originalTokenCount ?? 0;
+  const newTokens = newTokenCount ?? 0;
+
+  const getCompressionText = () => {
+    if (isPending) {
+      return 'Compressing chat history';
+    }
+
+    switch (compressionStatus) {
+      case CompressionStatus.COMPRESSED:
+        return `Chat history compressed from ${originalTokens} to ${newTokens} tokens.`;
+      case CompressionStatus.COMPRESSION_FAILED_INFLATED_TOKEN_COUNT:
+        // For smaller histories (< 50k tokens), compression overhead likely exceeds benefits
+        if (originalTokens < 50000) {
+          return 'Compression was not beneficial for this history size.';
+        }
+        // For larger histories where compression should work but didn't,
+        // this suggests an issue with the compression process itself
+        return 'Chat history compression did not reduce size. This may indicate issues with the compression prompt.';
+      case CompressionStatus.COMPRESSION_FAILED_TOKEN_COUNT_ERROR:
+        return 'Could not compress chat history due to a token counting error.';
+      case CompressionStatus.NOOP:
+        return 'Chat history is already compressed.';
+      default:
+        return '';
+    }
+  };
+
+  const text = getCompressionText();
 
   return (
     <Box flexDirection="row">
       <Box marginRight={1}>
-        {compression.isPending ? (
+        {isPending ? (
           <Spinner type="dots" />
         ) : (
-          <Text color={Colors.AccentPurple}>✦</Text>
+          <Text color={theme.text.accent}>✦</Text>
         )}
       </Box>
       <Box>
         <Text
           color={
-            compression.isPending ? Colors.AccentPurple : Colors.AccentGreen
+            compression.isPending ? theme.text.accent : theme.status.success
           }
           aria-label={SCREEN_READER_MODEL_PREFIX}
         >
@@ -48,4 +76,4 @@ export const CompressionMessage: React.FC<CompressionDisplayProps> = ({
       </Box>
     </Box>
   );
-};
+}

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

@@ -6,11 +6,11 @@
 
 import type React from 'react';
 import { Box, Text, useIsScreenReaderEnabled } from 'ink';
-import { Colors } from '../../colors.js';
 import crypto from 'node:crypto';
 import { colorizeCode, colorizeLine } from '../../utils/CodeColorizer.js';
 import { MaxSizedBox } from '../shared/MaxSizedBox.js';
-import { theme } from '../../semantic-colors.js';
+import { theme as semanticTheme } from '../../semantic-colors.js';
+import type { Theme } from '../../themes/theme.js';
 
 interface DiffLine {
   type: 'add' | 'del' | 'context' | 'hunk' | 'other';
@@ -42,18 +42,9 @@ function parseDiffWithLineNumbers(diffContent: string): DiffLine[] {
     }
     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')
-      )
+      if (line.startsWith('--- ')) {
         continue;
+      }
       // If it's not a hunk or header, skip (or handle as 'other' if needed)
       continue;
     }
@@ -94,7 +85,7 @@ interface DiffRendererProps {
   tabWidth?: number;
   availableTerminalHeight?: number;
   terminalWidth: number;
-  theme?: import('../../themes/theme.js').Theme;
+  theme?: Theme;
 }
 
 const DEFAULT_TAB_WIDTH = 4; // Spaces per tab for normalization
@@ -109,14 +100,18 @@ export const DiffRenderer: React.FC<DiffRendererProps> = ({
 }) => {
   const screenReaderEnabled = useIsScreenReaderEnabled();
   if (!diffContent || typeof diffContent !== 'string') {
-    return <Text color={Colors.AccentYellow}>No diff content.</Text>;
+    return <Text color={semanticTheme.status.warning}>No diff content.</Text>;
   }
 
   const parsedLines = parseDiffWithLineNumbers(diffContent);
 
   if (parsedLines.length === 0) {
     return (
-      <Box borderStyle="round" borderColor={Colors.Gray} padding={1}>
+      <Box
+        borderStyle="round"
+        borderColor={semanticTheme.border.default}
+        padding={1}
+      >
         <Text dimColor>No changes detected.</Text>
       </Box>
     );
@@ -196,7 +191,11 @@ const renderDiffContent = (
 
   if (displayableLines.length === 0) {
     return (
-      <Box borderStyle="round" borderColor={Colors.Gray} padding={1}>
+      <Box
+        borderStyle="round"
+        borderColor={semanticTheme.border.default}
+        padding={1}
+      >
         <Text dimColor>No changes detected.</Text>
       </Box>
     );
@@ -260,7 +259,7 @@ const renderDiffContent = (
         ) {
           acc.push(
             <Box key={`gap-${index}`}>
-              <Text wrap="truncate" color={Colors.Gray}>
+              <Text wrap="truncate" color={semanticTheme.text.secondary}>
                 {'═'.repeat(terminalWidth)}
               </Text>
             </Box>,
@@ -301,12 +300,12 @@ const renderDiffContent = (
         acc.push(
           <Box key={lineKey} flexDirection="row">
             <Text
-              color={theme.text.secondary}
+              color={semanticTheme.text.secondary}
               backgroundColor={
                 line.type === 'add'
-                  ? theme.background.diff.added
+                  ? semanticTheme.background.diff.added
                   : line.type === 'del'
-                    ? theme.background.diff.removed
+                    ? semanticTheme.background.diff.removed
                     : undefined
               }
             >
@@ -323,16 +322,16 @@ const renderDiffContent = (
               <Text
                 backgroundColor={
                   line.type === 'add'
-                    ? theme.background.diff.added
-                    : theme.background.diff.removed
+                    ? semanticTheme.background.diff.added
+                    : semanticTheme.background.diff.removed
                 }
                 wrap="wrap"
               >
                 <Text
                   color={
                     line.type === 'add'
-                      ? theme.status.success
-                      : theme.status.error
+                      ? semanticTheme.status.success
+                      : semanticTheme.status.error
                   }
                 >
                   {prefixSymbol}

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

@@ -6,7 +6,7 @@
 
 import type React from 'react';
 import { Text, Box } from 'ink';
-import { Colors } from '../../colors.js';
+import { theme } from '../../semantic-colors.js';
 
 interface ErrorMessageProps {
   text: string;
@@ -19,10 +19,10 @@ export const ErrorMessage: React.FC<ErrorMessageProps> = ({ text }) => {
   return (
     <Box flexDirection="row" marginBottom={1}>
       <Box width={prefixWidth}>
-        <Text color={Colors.AccentRed}>{prefix}</Text>
+        <Text color={theme.status.error}>{prefix}</Text>
       </Box>
       <Box flexGrow={1}>
-        <Text wrap="wrap" color={Colors.AccentRed}>
+        <Text wrap="wrap" color={theme.status.error}>
           {text}
         </Text>
       </Box>

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

@@ -7,7 +7,7 @@
 import type React from 'react';
 import { Text, Box } from 'ink';
 import { MarkdownDisplay } from '../../utils/MarkdownDisplay.js';
-import { Colors } from '../../colors.js';
+import { theme } from '../../semantic-colors.js';
 import { SCREEN_READER_MODEL_PREFIX } from '../../textConstants.js';
 
 interface GeminiMessageProps {
@@ -29,10 +29,7 @@ export const GeminiMessage: React.FC<GeminiMessageProps> = ({
   return (
     <Box flexDirection="row">
       <Box width={prefixWidth}>
-        <Text
-          color={Colors.AccentPurple}
-          aria-label={SCREEN_READER_MODEL_PREFIX}
-        >
+        <Text color={theme.text.accent} aria-label={SCREEN_READER_MODEL_PREFIX}>
           {prefix}
         </Text>
       </Box>

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

@@ -6,7 +6,7 @@
 
 import type React from 'react';
 import { Text, Box } from 'ink';
-import { Colors } from '../../colors.js';
+import { theme } from '../../semantic-colors.js';
 import { RenderInline } from '../../utils/InlineMarkdownRenderer.js';
 
 interface InfoMessageProps {
@@ -25,10 +25,10 @@ export const InfoMessage: React.FC<InfoMessageProps> = ({ text }) => {
   return (
     <Box flexDirection="row" marginTop={1}>
       <Box width={prefixWidth}>
-        <Text color={Colors.AccentYellow}>{prefix}</Text>
+        <Text color={theme.status.warning}>{prefix}</Text>
       </Box>
       <Box flexGrow={1}>
-        <Text wrap="wrap" color={Colors.AccentYellow}>
+        <Text wrap="wrap" color={theme.status.warning}>
           <RenderInline text={text} />
         </Text>
       </Box>

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

@@ -168,24 +168,6 @@ describe('ToolConfirmationMessage', () => {
         expect(lastFrame()).toContain(alwaysAllowText);
       });
 
-      it('should show "allow always" when folder trust is undefined', () => {
-        const mockConfig = {
-          isTrustedFolder: () => undefined,
-          getIdeMode: () => false,
-        } as unknown as Config;
-
-        const { lastFrame } = renderWithProviders(
-          <ToolConfirmationMessage
-            confirmationDetails={details}
-            config={mockConfig}
-            availableTerminalHeight={30}
-            terminalWidth={80}
-          />,
-        );
-
-        expect(lastFrame()).toContain(alwaysAllowText);
-      });
-
       it('should NOT show "allow always" when folder is untrusted', () => {
         const mockConfig = {
           isTrustedFolder: () => false,

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

@@ -5,9 +5,9 @@
  */
 
 import type React from 'react';
+import { useEffect, useState } from 'react';
 import { Box, Text } from 'ink';
 import { DiffRenderer } from './DiffRenderer.js';
-import { Colors } from '../../colors.js';
 import { RenderInline } from '../../utils/InlineMarkdownRenderer.js';
 import { MarkdownDisplay } from '../../utils/MarkdownDisplay.js';
 import type {
@@ -16,11 +16,12 @@ import type {
   ToolMcpConfirmationDetails,
   Config,
 } from '@qwen-code/qwen-code-core';
-import { ToolConfirmationOutcome } from '@qwen-code/qwen-code-core';
+import { IdeClient, ToolConfirmationOutcome } from '@qwen-code/qwen-code-core';
 import type { RadioSelectItem } from '../shared/RadioButtonSelect.js';
 import { RadioButtonSelect } from '../shared/RadioButtonSelect.js';
 import { MaxSizedBox } from '../shared/MaxSizedBox.js';
 import { useKeypress } from '../../hooks/useKeypress.js';
+import { theme } from '../../semantic-colors.js';
 
 export interface ToolConfirmationMessageProps {
   confirmationDetails: ToolCallConfirmationDetails;
@@ -44,10 +45,29 @@ export const ToolConfirmationMessage: React.FC<
   const { onConfirm } = confirmationDetails;
   const childWidth = terminalWidth - 2; // 2 for padding
 
+  const [ideClient, setIdeClient] = useState<IdeClient | null>(null);
+  const [isDiffingEnabled, setIsDiffingEnabled] = useState(false);
+
+  useEffect(() => {
+    let isMounted = true;
+    if (config.getIdeMode()) {
+      const getIdeClient = async () => {
+        const client = await IdeClient.getInstance();
+        if (isMounted) {
+          setIdeClient(client);
+          setIsDiffingEnabled(client?.isDiffingEnabled() ?? false);
+        }
+      };
+      getIdeClient();
+    }
+    return () => {
+      isMounted = false;
+    };
+  }, [config]);
+
   const handleConfirm = async (outcome: ToolConfirmationOutcome) => {
     if (confirmationDetails.type === 'edit') {
-      const ideClient = config.getIdeClient();
-      if (config.getIdeMode()) {
+      if (config.getIdeMode() && isDiffingEnabled) {
         const cliOutcome =
           outcome === ToolConfirmationOutcome.Cancel ? 'rejected' : 'accepted';
         await ideClient?.resolveDiffFromCli(
@@ -59,7 +79,7 @@ export const ToolConfirmationMessage: React.FC<
     onConfirm(outcome);
   };
 
-  const isTrustedFolder = config.isTrustedFolder() !== false;
+  const isTrustedFolder = config.isTrustedFolder();
 
   useKeypress(
     (key) => {
@@ -77,14 +97,17 @@ export const ToolConfirmationMessage: React.FC<
   if (compactMode) {
     const compactOptions: Array<RadioSelectItem<ToolConfirmationOutcome>> = [
       {
+        key: 'proceed-once',
         label: 'Yes, allow once',
         value: ToolConfirmationOutcome.ProceedOnce,
       },
       {
+        key: 'proceed-always',
         label: 'Allow always',
         value: ToolConfirmationOutcome.ProceedAlways,
       },
       {
+        key: 'cancel',
         label: 'No',
         value: ToolConfirmationOutcome.Cancel,
       },
@@ -150,13 +173,13 @@ export const ToolConfirmationMessage: React.FC<
         <Box
           minWidth="90%"
           borderStyle="round"
-          borderColor={Colors.Gray}
+          borderColor={theme.border.default}
           justifyContent="space-around"
           padding={1}
           overflow="hidden"
         >
-          <Text>Modify in progress: </Text>
-          <Text color={Colors.AccentGreen}>
+          <Text color={theme.text.primary}>Modify in progress: </Text>
+          <Text color={theme.status.success}>
             Save and close external editor to continue
           </Text>
         </Box>
@@ -167,29 +190,29 @@ export const ToolConfirmationMessage: React.FC<
     options.push({
       label: 'Yes, allow once',
       value: ToolConfirmationOutcome.ProceedOnce,
+      key: 'Yes, allow once',
     });
     if (isTrustedFolder) {
       options.push({
         label: 'Yes, allow always',
         value: ToolConfirmationOutcome.ProceedAlways,
+        key: 'Yes, allow always',
       });
     }
-    if (config.getIdeMode()) {
-      options.push({
-        label: 'No (esc)',
-        value: ToolConfirmationOutcome.Cancel,
-      });
-    } else {
+    if (!config.getIdeMode() || !isDiffingEnabled) {
       options.push({
         label: 'Modify with external editor',
         value: ToolConfirmationOutcome.ModifyWithEditor,
-      });
-      options.push({
-        label: 'No, suggest changes (esc)',
-        value: ToolConfirmationOutcome.Cancel,
+        key: 'Modify with external editor',
       });
     }
 
+    options.push({
+      label: 'No, suggest changes (esc)',
+      value: ToolConfirmationOutcome.Cancel,
+      key: 'No, suggest changes (esc)',
+    });
+
     bodyContent = (
       <DiffRenderer
         diffContent={confirmationDetails.fileDiff}
@@ -206,16 +229,19 @@ export const ToolConfirmationMessage: React.FC<
     options.push({
       label: 'Yes, allow once',
       value: ToolConfirmationOutcome.ProceedOnce,
+      key: 'Yes, allow once',
     });
     if (isTrustedFolder) {
       options.push({
         label: `Yes, allow always ...`,
         value: ToolConfirmationOutcome.ProceedAlways,
+        key: `Yes, allow always ...`,
       });
     }
     options.push({
       label: 'No, suggest changes (esc)',
       value: ToolConfirmationOutcome.Cancel,
+      key: 'No, suggest changes (esc)',
     });
 
     let bodyContentHeight = availableBodyContentHeight();
@@ -230,7 +256,7 @@ export const ToolConfirmationMessage: React.FC<
             maxWidth={Math.max(childWidth - 4, 1)}
           >
             <Box>
-              <Text color={Colors.AccentCyan}>{executionProps.command}</Text>
+              <Text color={theme.text.link}>{executionProps.command}</Text>
             </Box>
           </MaxSizedBox>
         </Box>
@@ -241,14 +267,17 @@ export const ToolConfirmationMessage: React.FC<
 
     question = planProps.title;
     options.push({
+      key: 'proceed-always',
       label: 'Yes, and auto-accept edits',
       value: ToolConfirmationOutcome.ProceedAlways,
     });
     options.push({
+      key: 'proceed-once',
       label: 'Yes, and manually approve edits',
       value: ToolConfirmationOutcome.ProceedOnce,
     });
     options.push({
+      key: 'cancel',
       label: 'No, keep planning (esc)',
       value: ToolConfirmationOutcome.Cancel,
     });
@@ -273,26 +302,29 @@ export const ToolConfirmationMessage: React.FC<
     options.push({
       label: 'Yes, allow once',
       value: ToolConfirmationOutcome.ProceedOnce,
+      key: 'Yes, allow once',
     });
     if (isTrustedFolder) {
       options.push({
         label: 'Yes, allow always',
         value: ToolConfirmationOutcome.ProceedAlways,
+        key: 'Yes, allow always',
       });
     }
     options.push({
       label: 'No, suggest changes (esc)',
       value: ToolConfirmationOutcome.Cancel,
+      key: 'No, suggest changes (esc)',
     });
 
     bodyContent = (
       <Box flexDirection="column" paddingX={1} marginLeft={1}>
-        <Text color={Colors.AccentCyan}>
+        <Text color={theme.text.link}>
           <RenderInline text={infoProps.prompt} />
         </Text>
         {displayUrls && infoProps.urls && infoProps.urls.length > 0 && (
           <Box flexDirection="column" marginTop={1}>
-            <Text>URLs to fetch:</Text>
+            <Text color={theme.text.primary}>URLs to fetch:</Text>
             {infoProps.urls.map((url) => (
               <Text key={url}>
                 {' '}
@@ -309,8 +341,8 @@ export const ToolConfirmationMessage: React.FC<
 
     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>
+        <Text color={theme.text.link}>MCP Server: {mcpProps.serverName}</Text>
+        <Text color={theme.text.link}>Tool: {mcpProps.toolName}</Text>
       </Box>
     );
 
@@ -318,20 +350,24 @@ export const ToolConfirmationMessage: React.FC<
     options.push({
       label: 'Yes, allow once',
       value: ToolConfirmationOutcome.ProceedOnce,
+      key: 'Yes, allow once',
     });
     if (isTrustedFolder) {
       options.push({
         label: `Yes, always allow tool "${mcpProps.toolName}" from server "${mcpProps.serverName}"`,
         value: ToolConfirmationOutcome.ProceedAlwaysTool, // Cast until types are updated
+        key: `Yes, always allow tool "${mcpProps.toolName}" from server "${mcpProps.serverName}"`,
       });
       options.push({
         label: `Yes, always allow all tools from server "${mcpProps.serverName}"`,
         value: ToolConfirmationOutcome.ProceedAlwaysServer,
+        key: `Yes, always allow all tools from server "${mcpProps.serverName}"`,
       });
     }
     options.push({
       label: 'No, suggest changes (esc)',
       value: ToolConfirmationOutcome.Cancel,
+      key: 'No, suggest changes (esc)',
     });
   }
 
@@ -345,7 +381,9 @@ export const ToolConfirmationMessage: React.FC<
 
       {/* Confirmation Question */}
       <Box marginBottom={1} flexShrink={0}>
-        <Text wrap="truncate">{question}</Text>
+        <Text color={theme.text.primary} wrap="truncate">
+          {question}
+        </Text>
       </Box>
 
       {/* Select Input for Options */}

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

@@ -7,13 +7,16 @@
 import { render } from 'ink-testing-library';
 import { describe, it, expect, vi } from 'vitest';
 import { Text } from 'ink';
+import type React from 'react';
 import { ToolGroupMessage } from './ToolGroupMessage.js';
-import { type IndividualToolCallDisplay, ToolCallStatus } from '../../types.js';
+import type { IndividualToolCallDisplay } from '../../types.js';
+import { ToolCallStatus } from '../../types.js';
 import type {
   Config,
   ToolCallConfirmationDetails,
 } from '@qwen-code/qwen-code-core';
 import { TOOL_STATUS } from '../../constants.js';
+import { ConfigContext } from '../../contexts/ConfigContext.js';
 
 // Mock child components to isolate ToolGroupMessage behavior
 vi.mock('./ToolMessage.js', () => ({
@@ -81,14 +84,21 @@ describe('<ToolGroupMessage />', () => {
   const baseProps = {
     groupId: 1,
     terminalWidth: 80,
-    config: mockConfig,
     isFocused: true,
   };
 
+  // Helper to wrap component with required providers
+  const renderWithProviders = (component: React.ReactElement) =>
+    render(
+      <ConfigContext.Provider value={mockConfig}>
+        {component}
+      </ConfigContext.Provider>,
+    );
+
   describe('Golden Snapshots', () => {
     it('renders single successful tool call', () => {
       const toolCalls = [createToolCall()];
-      const { lastFrame } = render(
+      const { lastFrame } = renderWithProviders(
         <ToolGroupMessage {...baseProps} toolCalls={toolCalls} />,
       );
       expect(lastFrame()).toMatchSnapshot();
@@ -115,7 +125,7 @@ describe('<ToolGroupMessage />', () => {
           status: ToolCallStatus.Error,
         }),
       ];
-      const { lastFrame } = render(
+      const { lastFrame } = renderWithProviders(
         <ToolGroupMessage {...baseProps} toolCalls={toolCalls} />,
       );
       expect(lastFrame()).toMatchSnapshot();
@@ -136,7 +146,7 @@ describe('<ToolGroupMessage />', () => {
           },
         }),
       ];
-      const { lastFrame } = render(
+      const { lastFrame } = renderWithProviders(
         <ToolGroupMessage {...baseProps} toolCalls={toolCalls} />,
       );
       expect(lastFrame()).toMatchSnapshot();
@@ -151,7 +161,7 @@ describe('<ToolGroupMessage />', () => {
           status: ToolCallStatus.Success,
         }),
       ];
-      const { lastFrame } = render(
+      const { lastFrame } = renderWithProviders(
         <ToolGroupMessage {...baseProps} toolCalls={toolCalls} />,
       );
       expect(lastFrame()).toMatchSnapshot();
@@ -178,7 +188,7 @@ describe('<ToolGroupMessage />', () => {
           status: ToolCallStatus.Pending,
         }),
       ];
-      const { lastFrame } = render(
+      const { lastFrame } = renderWithProviders(
         <ToolGroupMessage {...baseProps} toolCalls={toolCalls} />,
       );
       expect(lastFrame()).toMatchSnapshot();
@@ -200,7 +210,7 @@ describe('<ToolGroupMessage />', () => {
           resultDisplay: 'More output here',
         }),
       ];
-      const { lastFrame } = render(
+      const { lastFrame } = renderWithProviders(
         <ToolGroupMessage
           {...baseProps}
           toolCalls={toolCalls}
@@ -212,7 +222,7 @@ describe('<ToolGroupMessage />', () => {
 
     it('renders when not focused', () => {
       const toolCalls = [createToolCall()];
-      const { lastFrame } = render(
+      const { lastFrame } = renderWithProviders(
         <ToolGroupMessage
           {...baseProps}
           toolCalls={toolCalls}
@@ -230,7 +240,7 @@ describe('<ToolGroupMessage />', () => {
             'This is a very long description that might cause wrapping issues',
         }),
       ];
-      const { lastFrame } = render(
+      const { lastFrame } = renderWithProviders(
         <ToolGroupMessage
           {...baseProps}
           toolCalls={toolCalls}
@@ -241,7 +251,7 @@ describe('<ToolGroupMessage />', () => {
     });
 
     it('renders empty tool calls array', () => {
-      const { lastFrame } = render(
+      const { lastFrame } = renderWithProviders(
         <ToolGroupMessage {...baseProps} toolCalls={[]} />,
       );
       expect(lastFrame()).toMatchSnapshot();
@@ -251,7 +261,7 @@ describe('<ToolGroupMessage />', () => {
   describe('Border Color Logic', () => {
     it('uses yellow border when tools are pending', () => {
       const toolCalls = [createToolCall({ status: ToolCallStatus.Pending })];
-      const { lastFrame } = render(
+      const { lastFrame } = renderWithProviders(
         <ToolGroupMessage {...baseProps} toolCalls={toolCalls} />,
       );
       // The snapshot will capture the visual appearance including border color
@@ -265,7 +275,7 @@ describe('<ToolGroupMessage />', () => {
           status: ToolCallStatus.Success,
         }),
       ];
-      const { lastFrame } = render(
+      const { lastFrame } = renderWithProviders(
         <ToolGroupMessage {...baseProps} toolCalls={toolCalls} />,
       );
       expect(lastFrame()).toMatchSnapshot();
@@ -280,7 +290,7 @@ describe('<ToolGroupMessage />', () => {
           status: ToolCallStatus.Success,
         }),
       ];
-      const { lastFrame } = render(
+      const { lastFrame } = renderWithProviders(
         <ToolGroupMessage {...baseProps} toolCalls={toolCalls} />,
       );
       expect(lastFrame()).toMatchSnapshot();
@@ -303,7 +313,7 @@ describe('<ToolGroupMessage />', () => {
           resultDisplay: '', // No result
         }),
       ];
-      const { lastFrame } = render(
+      const { lastFrame } = renderWithProviders(
         <ToolGroupMessage
           {...baseProps}
           toolCalls={toolCalls}
@@ -340,7 +350,7 @@ describe('<ToolGroupMessage />', () => {
           },
         }),
       ];
-      const { lastFrame } = render(
+      const { lastFrame } = renderWithProviders(
         <ToolGroupMessage {...baseProps} toolCalls={toolCalls} />,
       );
       // Should only show confirmation for the first tool

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

@@ -6,22 +6,24 @@
 
 import type React from 'react';
 import { useMemo } from 'react';
-import { Box } from 'ink';
+import { Box, Text } from 'ink';
 import type { IndividualToolCallDisplay } from '../../types.js';
 import { ToolCallStatus } from '../../types.js';
 import { ToolMessage } from './ToolMessage.js';
 import { ToolConfirmationMessage } from './ToolConfirmationMessage.js';
-import { Colors } from '../../colors.js';
-import type { Config } from '@qwen-code/qwen-code-core';
-import { SHELL_COMMAND_NAME } from '../../constants.js';
+import { theme } from '../../semantic-colors.js';
+import { SHELL_COMMAND_NAME, SHELL_NAME } from '../../constants.js';
+import { useConfig } from '../../contexts/ConfigContext.js';
 
 interface ToolGroupMessageProps {
   groupId: number;
   toolCalls: IndividualToolCallDisplay[];
   availableTerminalHeight?: number;
   terminalWidth: number;
-  config: Config;
   isFocused?: boolean;
+  activeShellPtyId?: number | null;
+  embeddedShellFocused?: boolean;
+  onShellInputSubmit?: (input: string) => void;
 }
 
 // Main component renders the border and maps the tools using ToolMessage
@@ -29,15 +31,31 @@ export const ToolGroupMessage: React.FC<ToolGroupMessageProps> = ({
   toolCalls,
   availableTerminalHeight,
   terminalWidth,
-  config,
   isFocused = true,
+  activeShellPtyId,
+  embeddedShellFocused,
 }) => {
+  const isEmbeddedShellFocused =
+    embeddedShellFocused &&
+    toolCalls.some(
+      (t) =>
+        t.ptyId === activeShellPtyId && t.status === ToolCallStatus.Executing,
+    );
+
   const hasPending = !toolCalls.every(
     (t) => t.status === ToolCallStatus.Success,
   );
-  const isShellCommand = toolCalls.some((t) => t.name === SHELL_COMMAND_NAME);
+
+  const config = useConfig();
+  const isShellCommand = toolCalls.some(
+    (t) => t.name === SHELL_COMMAND_NAME || t.name === SHELL_NAME,
+  );
   const borderColor =
-    hasPending || isShellCommand ? Colors.AccentYellow : Colors.Gray;
+    isShellCommand || isEmbeddedShellFocused
+      ? theme.ui.symbol
+      : hasPending
+        ? theme.status.warning
+        : theme.border.default;
 
   const staticHeight = /* border */ 2 + /* marginBottom */ 1;
   // This is a bit of a magic number, but it accounts for the border and
@@ -80,7 +98,9 @@ export const ToolGroupMessage: React.FC<ToolGroupMessageProps> = ({
       */
       width="100%"
       marginLeft={1}
-      borderDimColor={hasPending}
+      borderDimColor={
+        hasPending && (!isShellCommand || !isEmbeddedShellFocused)
+      }
       borderColor={borderColor}
       gap={1}
     >
@@ -90,12 +110,7 @@ export const ToolGroupMessage: React.FC<ToolGroupMessageProps> = ({
           <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}
+                {...tool}
                 availableTerminalHeight={availableTerminalHeightPerToolMessage}
                 terminalWidth={innerWidth}
                 emphasis={
@@ -105,7 +120,8 @@ export const ToolGroupMessage: React.FC<ToolGroupMessageProps> = ({
                       ? 'low'
                       : 'medium'
                 }
-                renderOutputAsMarkdown={tool.renderOutputAsMarkdown}
+                activeShellPtyId={activeShellPtyId}
+                embeddedShellFocused={embeddedShellFocused}
                 config={config}
               />
             </Box>
@@ -122,6 +138,13 @@ export const ToolGroupMessage: React.FC<ToolGroupMessageProps> = ({
                   terminalWidth={innerWidth}
                 />
               )}
+            {tool.outputFile && (
+              <Box marginX={1}>
+                <Text color={theme.text.primary}>
+                  Output too long and was saved to: {tool.outputFile}
+                </Text>
+              </Box>
+            )}
           </Box>
         );
       })}

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

@@ -11,7 +11,35 @@ import { ToolMessage } from './ToolMessage.js';
 import { StreamingState, ToolCallStatus } from '../../types.js';
 import { Text } from 'ink';
 import { StreamingContext } from '../../contexts/StreamingContext.js';
-import type { Config } from '@qwen-code/qwen-code-core';
+import type {
+  AnsiOutput,
+  AnsiOutputDisplay,
+  Config,
+} from '@qwen-code/qwen-code-core';
+
+vi.mock('../TerminalOutput.js', () => ({
+  TerminalOutput: function MockTerminalOutput({
+    cursor,
+  }: {
+    cursor: { x: number; y: number } | null;
+  }) {
+    return (
+      <Text>
+        MockCursor:({cursor?.x},{cursor?.y})
+      </Text>
+    );
+  },
+}));
+
+vi.mock('../AnsiOutput.js', () => ({
+  AnsiOutputText: function MockAnsiOutputText({ data }: { data: AnsiOutput }) {
+    // Simple serialization for snapshot stability
+    const serialized = data
+      .map((line) => line.map((token) => token.text || '').join(''))
+      .join('\n');
+    return <Text>MockAnsiOutput:{serialized}</Text>;
+  },
+}));
 
 // Mock child components or utilities if they are complex or have side effects
 vi.mock('../GeminiRespondingSpinner.js', () => ({
@@ -229,4 +257,27 @@ describe('<ToolMessage />', () => {
     expect(output).toContain('file-search'); // Actual subagent name
     expect(output).toContain('Search for files matching pattern'); // Actual task description
   });
+
+  it('renders AnsiOutputText for AnsiOutput results', () => {
+    const ansiResult: AnsiOutput = [
+      [
+        {
+          text: 'hello',
+          fg: '#ffffff',
+          bg: '#000000',
+          bold: false,
+          italic: false,
+          underline: false,
+          dim: false,
+          inverse: false,
+        },
+      ],
+    ];
+    const ansiOutputDisplay: AnsiOutputDisplay = { ansiOutput: ansiResult };
+    const { lastFrame } = renderWithContext(
+      <ToolMessage {...baseProps} resultDisplay={ansiOutputDisplay} />,
+      StreamingState.Idle,
+    );
+    expect(lastFrame()).toContain('MockAnsiOutput:hello');
+  });
 });

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

@@ -9,20 +9,27 @@ import { Box, Text } from 'ink';
 import type { IndividualToolCallDisplay } from '../../types.js';
 import { ToolCallStatus } from '../../types.js';
 import { DiffRenderer } from './DiffRenderer.js';
-import { Colors } from '../../colors.js';
 import { MarkdownDisplay } from '../../utils/MarkdownDisplay.js';
+import { AnsiOutputText } from '../AnsiOutput.js';
 import { GeminiRespondingSpinner } from '../GeminiRespondingSpinner.js';
 import { MaxSizedBox } from '../shared/MaxSizedBox.js';
 import { TodoDisplay } from '../TodoDisplay.js';
-import { TOOL_STATUS } from '../../constants.js';
 import type {
   TodoResultDisplay,
   TaskResultDisplay,
   PlanResultDisplay,
+  AnsiOutput,
   Config,
 } from '@qwen-code/qwen-code-core';
 import { AgentExecutionDisplay } from '../subagents/index.js';
 import { PlanSummaryDisplay } from '../PlanSummaryDisplay.js';
+import { ShellInputPrompt } from '../ShellInputPrompt.js';
+import {
+  SHELL_COMMAND_NAME,
+  SHELL_NAME,
+  TOOL_STATUS,
+} from '../../constants.js';
+import { theme } from '../../semantic-colors.js';
 
 const STATIC_HEIGHT = 1;
 const RESERVED_LINE_COUNT = 5; // for tool name, status, padding etc.
@@ -40,7 +47,8 @@ type DisplayRendererResult =
   | { type: 'plan'; data: PlanResultDisplay }
   | { type: 'string'; data: string }
   | { type: 'diff'; data: { fileDiff: string; fileName: string } }
-  | { type: 'task'; data: TaskResultDisplay };
+  | { type: 'task'; data: TaskResultDisplay }
+  | { type: 'ansi'; data: AnsiOutput };
 
 /**
  * Custom hook to determine the type of result display and return appropriate rendering info
@@ -103,6 +111,15 @@ const useResultDisplayRenderer = (
       };
     }
 
+    // Check for AnsiOutput
+    if (
+      typeof resultDisplay === 'object' &&
+      resultDisplay !== null &&
+      'ansiOutput' in resultDisplay
+    ) {
+      return { type: 'ansi', data: resultDisplay.ansiOutput as AnsiOutput };
+    }
+
     // Default to string
     return {
       type: 'string',
@@ -178,7 +195,9 @@ const StringResultRenderer: React.FC<{
   return (
     <MaxSizedBox maxHeight={availableHeight} maxWidth={childWidth}>
       <Box>
-        <Text wrap="wrap">{displayData}</Text>
+        <Text wrap="wrap" color={theme.text.primary}>
+          {displayData}
+        </Text>
       </Box>
     </MaxSizedBox>
   );
@@ -205,7 +224,9 @@ export interface ToolMessageProps extends IndividualToolCallDisplay {
   terminalWidth: number;
   emphasis?: TextEmphasis;
   renderOutputAsMarkdown?: boolean;
-  config: Config;
+  activeShellPtyId?: number | null;
+  embeddedShellFocused?: boolean;
+  config?: Config;
 }
 
 export const ToolMessage: React.FC<ToolMessageProps> = ({
@@ -217,8 +238,53 @@ export const ToolMessage: React.FC<ToolMessageProps> = ({
   terminalWidth,
   emphasis = 'medium',
   renderOutputAsMarkdown = true,
+  activeShellPtyId,
+  embeddedShellFocused,
+  ptyId,
   config,
 }) => {
+  const isThisShellFocused =
+    (name === SHELL_COMMAND_NAME || name === 'Shell') &&
+    status === ToolCallStatus.Executing &&
+    ptyId === activeShellPtyId &&
+    embeddedShellFocused;
+
+  const [lastUpdateTime, setLastUpdateTime] = React.useState<Date | null>(null);
+  const [userHasFocused, setUserHasFocused] = React.useState(false);
+  const [showFocusHint, setShowFocusHint] = React.useState(false);
+
+  React.useEffect(() => {
+    if (resultDisplay) {
+      setLastUpdateTime(new Date());
+    }
+  }, [resultDisplay]);
+
+  React.useEffect(() => {
+    if (!lastUpdateTime) {
+      return;
+    }
+
+    const timer = setTimeout(() => {
+      setShowFocusHint(true);
+    }, 5000);
+
+    return () => clearTimeout(timer);
+  }, [lastUpdateTime]);
+
+  React.useEffect(() => {
+    if (isThisShellFocused) {
+      setUserHasFocused(true);
+    }
+  }, [isThisShellFocused]);
+
+  const isThisShellFocusable =
+    (name === SHELL_COMMAND_NAME || name === 'Shell') &&
+    status === ToolCallStatus.Executing &&
+    config?.getShouldUseNodePtyShell();
+
+  const shouldShowFocusHint =
+    isThisShellFocusable && (showFocusHint || userHasFocused);
+
   const availableHeight = availableTerminalHeight
     ? Math.max(
         availableTerminalHeight - STATIC_HEIGHT - RESERVED_LINE_COUNT,
@@ -241,13 +307,20 @@ export const ToolMessage: React.FC<ToolMessageProps> = ({
   return (
     <Box paddingX={1} paddingY={0} flexDirection="column">
       <Box minHeight={1}>
-        <ToolStatusIndicator status={status} />
+        <ToolStatusIndicator status={status} name={name} />
         <ToolInfo
           name={name}
           status={status}
           description={description}
           emphasis={emphasis}
         />
+        {shouldShowFocusHint && (
+          <Box marginLeft={1} flexShrink={0}>
+            <Text color={theme.text.accent}>
+              {isThisShellFocused ? '(Focused)' : '(ctrl+f to focus)'}
+            </Text>
+          </Box>
+        )}
         {emphasis === 'high' && <TrailingIndicator />}
       </Box>
       {displayRenderer.type !== 'none' && (
@@ -263,7 +336,7 @@ export const ToolMessage: React.FC<ToolMessageProps> = ({
                 childWidth={childWidth}
               />
             )}
-            {displayRenderer.type === 'task' && (
+            {displayRenderer.type === 'task' && config && (
               <SubagentExecutionRenderer
                 data={displayRenderer.data}
                 availableHeight={availableHeight}
@@ -271,6 +344,19 @@ export const ToolMessage: React.FC<ToolMessageProps> = ({
                 config={config}
               />
             )}
+            {displayRenderer.type === 'diff' && (
+              <DiffResultRenderer
+                data={displayRenderer.data}
+                availableHeight={availableHeight}
+                childWidth={childWidth}
+              />
+            )}
+            {displayRenderer.type === 'ansi' && (
+              <AnsiOutputText
+                data={displayRenderer.data}
+                availableTerminalHeight={availableHeight}
+              />
+            )}
             {displayRenderer.type === 'string' && (
               <StringResultRenderer
                 data={displayRenderer.data}
@@ -279,59 +365,67 @@ export const ToolMessage: React.FC<ToolMessageProps> = ({
                 childWidth={childWidth}
               />
             )}
-            {displayRenderer.type === 'diff' && (
-              <DiffResultRenderer
-                data={displayRenderer.data}
-                availableHeight={availableHeight}
-                childWidth={childWidth}
-              />
-            )}
           </Box>
         </Box>
       )}
+      {isThisShellFocused && config && (
+        <Box paddingLeft={STATUS_INDICATOR_WIDTH} marginTop={1}>
+          <ShellInputPrompt
+            activeShellPtyId={activeShellPtyId ?? null}
+            focus={embeddedShellFocused}
+          />
+        </Box>
+      )}
     </Box>
   );
 };
 
 type ToolStatusIndicatorProps = {
   status: ToolCallStatus;
+  name: string;
 };
 
 const ToolStatusIndicator: React.FC<ToolStatusIndicatorProps> = ({
   status,
-}) => (
-  <Box minWidth={STATUS_INDICATOR_WIDTH}>
-    {status === ToolCallStatus.Pending && (
-      <Text color={Colors.AccentGreen}>{TOOL_STATUS.PENDING}</Text>
-    )}
-    {status === ToolCallStatus.Executing && (
-      <GeminiRespondingSpinner
-        spinnerType="toggle"
-        nonRespondingDisplay={TOOL_STATUS.EXECUTING}
-      />
-    )}
-    {status === ToolCallStatus.Success && (
-      <Text color={Colors.AccentGreen} aria-label={'Success:'}>
-        {TOOL_STATUS.SUCCESS}
-      </Text>
-    )}
-    {status === ToolCallStatus.Confirming && (
-      <Text color={Colors.AccentYellow} aria-label={'Confirming:'}>
-        {TOOL_STATUS.CONFIRMING}
-      </Text>
-    )}
-    {status === ToolCallStatus.Canceled && (
-      <Text color={Colors.AccentYellow} aria-label={'Canceled:'} bold>
-        {TOOL_STATUS.CANCELED}
-      </Text>
-    )}
-    {status === ToolCallStatus.Error && (
-      <Text color={Colors.AccentRed} aria-label={'Error:'} bold>
-        {TOOL_STATUS.ERROR}
-      </Text>
-    )}
-  </Box>
-);
+  name,
+}) => {
+  const isShell = name === SHELL_COMMAND_NAME || name === SHELL_NAME;
+  const statusColor = isShell ? theme.ui.symbol : theme.status.warning;
+
+  return (
+    <Box minWidth={STATUS_INDICATOR_WIDTH}>
+      {status === ToolCallStatus.Pending && (
+        <Text color={theme.status.success}>{TOOL_STATUS.PENDING}</Text>
+      )}
+      {status === ToolCallStatus.Executing && (
+        <GeminiRespondingSpinner
+          spinnerType="toggle"
+          nonRespondingDisplay={TOOL_STATUS.EXECUTING}
+        />
+      )}
+      {status === ToolCallStatus.Success && (
+        <Text color={theme.status.success} aria-label={'Success:'}>
+          {TOOL_STATUS.SUCCESS}
+        </Text>
+      )}
+      {status === ToolCallStatus.Confirming && (
+        <Text color={statusColor} aria-label={'Confirming:'}>
+          {TOOL_STATUS.CONFIRMING}
+        </Text>
+      )}
+      {status === ToolCallStatus.Canceled && (
+        <Text color={statusColor} aria-label={'Canceled:'} bold>
+          {TOOL_STATUS.CANCELED}
+        </Text>
+      )}
+      {status === ToolCallStatus.Error && (
+        <Text color={theme.status.error} aria-label={'Error:'} bold>
+          {TOOL_STATUS.ERROR}
+        </Text>
+      )}
+    </Box>
+  );
+};
 
 type ToolInfo = {
   name: string;
@@ -348,11 +442,11 @@ const ToolInfo: React.FC<ToolInfo> = ({
   const nameColor = React.useMemo<string>(() => {
     switch (emphasis) {
       case 'high':
-        return Colors.Foreground;
+        return theme.text.primary;
       case 'medium':
-        return Colors.Foreground;
+        return theme.text.primary;
       case 'low':
-        return Colors.Gray;
+        return theme.text.secondary;
       default: {
         const exhaustiveCheck: never = emphasis;
         return exhaustiveCheck;
@@ -367,16 +461,15 @@ const ToolInfo: React.FC<ToolInfo> = ({
       >
         <Text color={nameColor} bold>
           {name}
-        </Text>
-        <Text> </Text>
-        <Text color={Colors.Gray}>{description}</Text>
+        </Text>{' '}
+        <Text color={theme.text.secondary}>{description}</Text>
       </Text>
     </Box>
   );
 };
 
 const TrailingIndicator: React.FC = () => (
-  <Text color={Colors.Foreground} wrap="truncate">
+  <Text color={theme.text.primary} wrap="truncate">
     {' '}
     ←
   </Text>

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

@@ -6,7 +6,7 @@
 
 import type React from 'react';
 import { Text, Box } from 'ink';
-import { Colors } from '../../colors.js';
+import { theme } from '../../semantic-colors.js';
 import { SCREEN_READER_USER_PREFIX } from '../../textConstants.js';
 import { isSlashCommand as checkIsSlashCommand } from '../../utils/commandUtils.js';
 
@@ -19,21 +19,12 @@ export const UserMessage: React.FC<UserMessageProps> = ({ text }) => {
   const prefixWidth = prefix.length;
   const isSlashCommand = checkIsSlashCommand(text);
 
-  const textColor = isSlashCommand ? Colors.AccentPurple : Colors.Gray;
-  const borderColor = isSlashCommand ? Colors.AccentPurple : Colors.Gray;
+  const textColor = isSlashCommand ? theme.text.accent : theme.text.secondary;
 
   return (
-    <Box
-      borderStyle="round"
-      borderColor={borderColor}
-      flexDirection="row"
-      paddingX={2}
-      paddingY={0}
-      marginY={1}
-      alignSelf="flex-start"
-    >
+    <Box flexDirection="row" paddingY={0} marginY={1} alignSelf="flex-start">
       <Box width={prefixWidth}>
-        <Text color={textColor} aria-label={SCREEN_READER_USER_PREFIX}>
+        <Text color={theme.text.accent} aria-label={SCREEN_READER_USER_PREFIX}>
           {prefix}
         </Text>
       </Box>

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

@@ -6,7 +6,7 @@
 
 import type React from 'react';
 import { Box, Text } from 'ink';
-import { Colors } from '../../colors.js';
+import { theme } from '../../semantic-colors.js';
 
 interface UserShellMessageProps {
   text: string;
@@ -18,8 +18,8 @@ export const UserShellMessage: React.FC<UserShellMessageProps> = ({ text }) => {
 
   return (
     <Box>
-      <Text color={Colors.AccentCyan}>$ </Text>
-      <Text>{commandToDisplay}</Text>
+      <Text color={theme.text.link}>$ </Text>
+      <Text color={theme.text.primary}>{commandToDisplay}</Text>
     </Box>
   );
 };