feat(cli): Add /model command for interactive model selection (#8940)

Co-authored-by: Miguel Solorio <miguel.solorio07@gmail.com>

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

@@ -19,6 +19,7 @@ import { PrivacyNotice } from '../privacy/PrivacyNotice.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';
@@ -147,6 +148,9 @@ export const DialogManager = ({ addItem }: DialogManagerProps) => {
       </Box>
     );
   }
+  if (uiState.isModelDialogOpen) {
+    return <ModelDialog onClose={uiActions.closeModelDialog} />;
+  }
   if (uiState.isAuthenticating) {
     return (
       <AuthInProgress

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

@@ -0,0 +1,210 @@
+/**
+ * @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 {
+  DEFAULT_GEMINI_FLASH_LITE_MODEL,
+  DEFAULT_GEMINI_FLASH_MODEL,
+  DEFAULT_GEMINI_MODEL,
+  DEFAULT_GEMINI_MODEL_AUTO,
+} from '@google/gemini-cli-core';
+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 '@google/gemini-cli-core';
+
+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
+    ? ({
+        getModel: vi.fn(() => DEFAULT_GEMINI_MODEL_AUTO),
+        ...contextValue,
+      } 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();
+    expect(
+      getByText('> To use a specific Gemini model, use the --model flag.'),
+    ).toBeDefined();
+  });
+
+  it('passes all model options to DescriptiveRadioButtonSelect', () => {
+    renderComponent();
+    expect(mockedSelect).toHaveBeenCalledTimes(1);
+
+    const props = mockedSelect.mock.calls[0][0];
+    expect(props.items).toHaveLength(4);
+    expect(props.items[0].value).toBe(DEFAULT_GEMINI_MODEL_AUTO);
+    expect(props.items[1].value).toBe(DEFAULT_GEMINI_MODEL);
+    expect(props.items[2].value).toBe(DEFAULT_GEMINI_FLASH_MODEL);
+    expect(props.items[3].value).toBe(DEFAULT_GEMINI_FLASH_LITE_MODEL);
+    expect(props.showNumbers).toBe(true);
+  });
+
+  it('initializes with the model from ConfigContext', () => {
+    const mockGetModel = vi.fn(() => DEFAULT_GEMINI_FLASH_MODEL);
+    renderComponent({}, { getModel: mockGetModel });
+
+    expect(mockGetModel).toHaveBeenCalled();
+    expect(mockedSelect).toHaveBeenCalledWith(
+      expect.objectContaining({
+        initialIndex: 2,
+      }),
+      undefined,
+    );
+  });
+
+  it('initializes with "auto" model if context is not provided', () => {
+    renderComponent({}, undefined);
+
+    expect(mockedSelect).toHaveBeenCalledWith(
+      expect.objectContaining({
+        initialIndex: 0,
+      }),
+      undefined,
+    );
+  });
+
+  it('initializes with "auto" 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 DEFAULT_GEMINI_MODEL_AUTO
+    // 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 mockSetModel = vi.fn();
+    const { props } = renderComponent({}, { setModel: mockSetModel });
+
+    const childOnSelect = mockedSelect.mock.calls[0][0].onSelect;
+    expect(childOnSelect).toBeDefined();
+
+    childOnSelect(DEFAULT_GEMINI_MODEL);
+
+    expect(mockSetModel).toHaveBeenCalledWith(DEFAULT_GEMINI_MODEL);
+    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(() => DEFAULT_GEMINI_MODEL_AUTO);
+    const { rerender } = render(
+      <ConfigContext.Provider
+        value={{ getModel: mockGetModel } as unknown as Config}
+      >
+        <ModelDialog onClose={vi.fn()} />
+      </ConfigContext.Provider>,
+    );
+
+    expect(mockedSelect.mock.calls[0][0].initialIndex).toBe(0);
+
+    mockGetModel.mockReturnValue(DEFAULT_GEMINI_FLASH_LITE_MODEL);
+    const newMockConfig = { getModel: mockGetModel } 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(3);
+  });
+});

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

@@ -0,0 +1,107 @@
+/**
+ * @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 {
+  DEFAULT_GEMINI_FLASH_LITE_MODEL,
+  DEFAULT_GEMINI_FLASH_MODEL,
+  DEFAULT_GEMINI_MODEL,
+  DEFAULT_GEMINI_MODEL_AUTO,
+} from '@google/gemini-cli-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';
+
+interface ModelDialogProps {
+  onClose: () => void;
+}
+
+const MODEL_OPTIONS = [
+  {
+    value: DEFAULT_GEMINI_MODEL_AUTO,
+    title: 'Auto (recommended)',
+    description: 'Let the system choose the best model for your task',
+  },
+  {
+    value: DEFAULT_GEMINI_MODEL,
+    title: 'Pro',
+    description: 'For complex tasks that require deep reasoning and creativity',
+  },
+  {
+    value: DEFAULT_GEMINI_FLASH_MODEL,
+    title: 'Flash',
+    description: 'For tasks that need a balance of speed and reasoning',
+  },
+  {
+    value: DEFAULT_GEMINI_FLASH_LITE_MODEL,
+    title: 'Flash-Lite',
+    description: 'For simple tasks that need to be done quickly',
+  },
+];
+
+export function ModelDialog({ onClose }: ModelDialogProps): React.JSX.Element {
+  const config = useContext(ConfigContext);
+
+  // Determine the Preferred Model (read once when the dialog opens).
+  const preferredModel = config?.getModel() || DEFAULT_GEMINI_MODEL_AUTO;
+
+  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),
+    [preferredModel],
+  );
+
+  // Handle selection internally (Autonomous Dialog).
+  const handleSelect = useCallback(
+    (model: string) => {
+      if (config) {
+        config.setModel(model);
+      }
+      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 flexDirection="column">
+        <Text color={theme.text.secondary}>
+          {'> To use a specific Gemini model, use the --model flag.'}
+        </Text>
+      </Box>
+      <Box marginTop={1} flexDirection="column">
+        <Text color={theme.text.secondary}>(Press Esc to close)</Text>
+      </Box>
+    </Box>
+  );
+}

packages/cli/src/ui/components/shared/DescriptiveRadioButtonSelect.test.tsx

@@ -0,0 +1,86 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { renderWithProviders } from '../../../test-utils/render.js';
+import {
+  DescriptiveRadioButtonSelect,
+  type DescriptiveRadioSelectItem,
+  type DescriptiveRadioButtonSelectProps,
+} from './DescriptiveRadioButtonSelect.js';
+
+vi.mock('./BaseSelectionList.js', async (importOriginal) => {
+  const actual =
+    await importOriginal<typeof import('./BaseSelectionList.js')>();
+  return {
+    ...actual,
+    BaseSelectionList: vi.fn(({ children, ...props }) => (
+      <actual.BaseSelectionList {...props}>{children}</actual.BaseSelectionList>
+    )),
+  };
+});
+
+vi.mock('../../semantic-colors.js', () => ({
+  theme: {
+    text: {
+      primary: 'COLOR_PRIMARY',
+      secondary: 'COLOR_SECONDARY',
+    },
+    status: {
+      success: 'COLOR_SUCCESS',
+    },
+  },
+}));
+
+describe('DescriptiveRadioButtonSelect', () => {
+  const mockOnSelect = vi.fn();
+  const mockOnHighlight = vi.fn();
+
+  const ITEMS: Array<DescriptiveRadioSelectItem<string>> = [
+    { title: 'Foo Title', description: 'This is Foo.', value: 'foo' },
+    { title: 'Bar Title', description: 'This is Bar.', value: 'bar' },
+    {
+      title: 'Baz Title',
+      description: 'This is Baz.',
+      value: 'baz',
+      disabled: true,
+    },
+  ];
+
+  const renderComponent = (
+    props: Partial<DescriptiveRadioButtonSelectProps<string>> = {},
+  ) => {
+    const defaultProps: DescriptiveRadioButtonSelectProps<string> = {
+      items: ITEMS,
+      onSelect: mockOnSelect,
+      ...props,
+    };
+    return renderWithProviders(
+      <DescriptiveRadioButtonSelect {...defaultProps} />,
+    );
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should render correctly with default props', () => {
+    const { lastFrame } = renderComponent();
+    expect(lastFrame()).toMatchSnapshot();
+  });
+
+  it('should render correctly with custom props', () => {
+    const { lastFrame } = renderComponent({
+      initialIndex: 1,
+      isFocused: false,
+      showScrollArrows: true,
+      maxItemsToShow: 5,
+      showNumbers: true,
+      onHighlight: mockOnHighlight,
+    });
+    expect(lastFrame()).toMatchSnapshot();
+  });
+});

packages/cli/src/ui/components/shared/DescriptiveRadioButtonSelect.tsx

@@ -0,0 +1,71 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type React from 'react';
+import { Text, Box } from 'ink';
+import { theme } from '../../semantic-colors.js';
+import { BaseSelectionList } from './BaseSelectionList.js';
+
+export interface DescriptiveRadioSelectItem<T> {
+  value: T;
+  title: string;
+  description: string;
+  disabled?: boolean;
+}
+
+export interface DescriptiveRadioButtonSelectProps<T> {
+  /** An array of items to display as descriptive radio options. */
+  items: Array<DescriptiveRadioSelectItem<T>>;
+  /** The initial index selected */
+  initialIndex?: number;
+  /** Function called when an item is selected. Receives the `value` of the selected item. */
+  onSelect: (value: T) => void;
+  /** Function called when an item is highlighted. Receives the `value` of the selected item. */
+  onHighlight?: (value: T) => void;
+  /** Whether this select input is currently focused and should respond to input. */
+  isFocused?: boolean;
+  /** Whether to show numbers next to items. */
+  showNumbers?: boolean;
+  /** Whether to show the scroll arrows. */
+  showScrollArrows?: boolean;
+  /** The maximum number of items to show at once. */
+  maxItemsToShow?: number;
+}
+
+/**
+ * A radio button select component that displays items with title and description.
+ *
+ * @template T The type of the value associated with each descriptive radio item.
+ */
+export function DescriptiveRadioButtonSelect<T>({
+  items,
+  initialIndex = 0,
+  onSelect,
+  onHighlight,
+  isFocused = true,
+  showNumbers = false,
+  showScrollArrows = false,
+  maxItemsToShow = 10,
+}: DescriptiveRadioButtonSelectProps<T>): React.JSX.Element {
+  return (
+    <BaseSelectionList<T, DescriptiveRadioSelectItem<T>>
+      items={items}
+      initialIndex={initialIndex}
+      onSelect={onSelect}
+      onHighlight={onHighlight}
+      isFocused={isFocused}
+      showNumbers={showNumbers}
+      showScrollArrows={showScrollArrows}
+      maxItemsToShow={maxItemsToShow}
+      renderItem={(item, { titleColor }) => (
+        <Box flexDirection="column">
+          <Text color={titleColor}>{item.title}</Text>
+          <Text color={theme.text.secondary}>{item.description}</Text>
+        </Box>
+      )}
+    />
+  );
+}

packages/cli/src/ui/components/shared/__snapshots__/DescriptiveRadioButtonSelect.test.tsx.snap

@@ -0,0 +1,21 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`DescriptiveRadioButtonSelect > should render correctly with custom props 1`] = `
+"▲
+  1. Foo Title
+     This is Foo.
+● 2. Bar Title
+     This is Bar.
+  3. Baz Title
+     This is Baz.
+▼"
+`;
+
+exports[`DescriptiveRadioButtonSelect > should render correctly with default props 1`] = `
+"● Foo Title
+  This is Foo.
+  Bar Title
+  This is Bar.
+  Baz Title
+  This is Baz."
+`;