Update models menu dialog to support manual model selection and group… (#80)

* Update models menu dialog to support manual model selection and group by model family

* fix tests

* update codebase investigator model setting

* fix test

* fix test

* update generated golden file

* regenerate scheme and doc for settings

* use Preview Auto if previewFeatures is set to true

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

@@ -5,19 +5,19 @@
  */
 
 import type React from 'react';
-import { useCallback, useContext, useMemo } from 'react';
+import { useCallback, useContext, useMemo, useState } from 'react';
 import { Box, Text } from 'ink';
 import {
   PREVIEW_GEMINI_MODEL,
+  PREVIEW_GEMINI_FLASH_MODEL,
+  PREVIEW_GEMINI_MODEL_AUTO,
   DEFAULT_GEMINI_MODEL,
   DEFAULT_GEMINI_FLASH_MODEL,
   DEFAULT_GEMINI_FLASH_LITE_MODEL,
   DEFAULT_GEMINI_MODEL_AUTO,
-  GEMINI_MODEL_ALIAS_FLASH,
-  GEMINI_MODEL_ALIAS_FLASH_LITE,
-  GEMINI_MODEL_ALIAS_PRO,
   ModelSlashCommandEvent,
   logModelSlashCommand,
+  getDisplayString,
 } from '@google/gemini-cli-core';
 import { useKeypress } from '../hooks/useKeypress.js';
 import { theme } from '../semantic-colors.js';
@@ -31,61 +31,128 @@ interface ModelDialogProps {
 
 export function ModelDialog({ onClose }: ModelDialogProps): React.JSX.Element {
   const config = useContext(ConfigContext);
+  const [view, setView] = useState<'main' | 'manual'>('main');
 
   // Determine the Preferred Model (read once when the dialog opens).
   const preferredModel = config?.getModel() || DEFAULT_GEMINI_MODEL_AUTO;
 
+  const manualModelSelected = useMemo(() => {
+    const manualModels = [
+      DEFAULT_GEMINI_MODEL,
+      DEFAULT_GEMINI_FLASH_MODEL,
+      DEFAULT_GEMINI_FLASH_LITE_MODEL,
+      PREVIEW_GEMINI_MODEL,
+      PREVIEW_GEMINI_FLASH_MODEL,
+    ];
+    if (manualModels.includes(preferredModel)) {
+      return preferredModel;
+    }
+    return '';
+  }, [preferredModel]);
+
   useKeypress(
     (key) => {
       if (key.name === 'escape') {
-        onClose();
+        if (view === 'manual') {
+          setView('main');
+        } else {
+          onClose();
+        }
       }
     },
     { isActive: true },
   );
 
-  const options = useMemo(
-    () => [
+  const mainOptions = useMemo(() => {
+    const list = [
       {
         value: DEFAULT_GEMINI_MODEL_AUTO,
-        title: 'Auto',
-        description: 'Let the system choose the best model for your task.',
+        title: getDisplayString(DEFAULT_GEMINI_MODEL_AUTO),
+        description:
+          'Let Gemini CLI decide the best model for the task: gemini-2.5-pro, gemini-2.5-flash',
         key: DEFAULT_GEMINI_MODEL_AUTO,
       },
       {
-        value: GEMINI_MODEL_ALIAS_PRO,
-        title: config?.getPreviewFeatures()
-          ? `Pro (${PREVIEW_GEMINI_MODEL}, ${DEFAULT_GEMINI_MODEL})`
-          : `Pro (${DEFAULT_GEMINI_MODEL})`,
+        value: 'Manual',
+        title: manualModelSelected
+          ? `Manual (${manualModelSelected})`
+          : 'Manual',
+        description: 'Manually select a model',
+        key: 'Manual',
+      },
+    ];
+
+    if (config?.getPreviewFeatures()) {
+      list.unshift({
+        value: PREVIEW_GEMINI_MODEL_AUTO,
+        title: getDisplayString(PREVIEW_GEMINI_MODEL_AUTO),
         description:
-          'For complex tasks that require deep reasoning and creativity',
-        key: GEMINI_MODEL_ALIAS_PRO,
+          'Let Gemini CLI decide the best model for the task: gemini-3-pro, gemini-3-flash',
+        key: PREVIEW_GEMINI_MODEL_AUTO,
+      });
+    }
+    return list;
+  }, [config, manualModelSelected]);
+
+  const manualOptions = useMemo(() => {
+    const list = [
+      {
+        value: DEFAULT_GEMINI_MODEL,
+        title: DEFAULT_GEMINI_MODEL,
+        key: DEFAULT_GEMINI_MODEL,
       },
       {
-        value: GEMINI_MODEL_ALIAS_FLASH,
-        title: `Flash (${DEFAULT_GEMINI_FLASH_MODEL})`,
-        description: 'For tasks that need a balance of speed and reasoning',
-        key: GEMINI_MODEL_ALIAS_FLASH,
+        value: DEFAULT_GEMINI_FLASH_MODEL,
+        title: DEFAULT_GEMINI_FLASH_MODEL,
+        key: DEFAULT_GEMINI_FLASH_MODEL,
       },
       {
-        value: GEMINI_MODEL_ALIAS_FLASH_LITE,
-        title: `Flash-Lite (${DEFAULT_GEMINI_FLASH_LITE_MODEL})`,
-        description: 'For simple tasks that need to be done quickly',
-        key: GEMINI_MODEL_ALIAS_FLASH_LITE,
+        value: DEFAULT_GEMINI_FLASH_LITE_MODEL,
+        title: DEFAULT_GEMINI_FLASH_LITE_MODEL,
+        key: DEFAULT_GEMINI_FLASH_LITE_MODEL,
       },
-    ],
-    [config],
-  );
+    ];
+
+    if (config?.getPreviewFeatures()) {
+      list.unshift(
+        {
+          value: PREVIEW_GEMINI_MODEL,
+          title: PREVIEW_GEMINI_MODEL,
+          key: PREVIEW_GEMINI_MODEL,
+        },
+        {
+          value: PREVIEW_GEMINI_FLASH_MODEL,
+          title: PREVIEW_GEMINI_FLASH_MODEL,
+          key: PREVIEW_GEMINI_FLASH_MODEL,
+        },
+      );
+    }
+    return list;
+  }, [config]);
+
+  const options = view === 'main' ? mainOptions : manualOptions;
 
   // Calculate the initial index based on the preferred model.
-  const initialIndex = useMemo(
-    () => options.findIndex((option) => option.value === preferredModel),
-    [preferredModel, options],
-  );
+  const initialIndex = useMemo(() => {
+    const idx = options.findIndex((option) => option.value === preferredModel);
+    if (idx !== -1) {
+      return idx;
+    }
+    if (view === 'main') {
+      const manualIdx = options.findIndex((o) => o.value === 'Manual');
+      return manualIdx !== -1 ? manualIdx : 0;
+    }
+    return 0;
+  }, [preferredModel, options, view]);
 
   // Handle selection internally (Autonomous Dialog).
   const handleSelect = useCallback(
     (model: string) => {
+      if (model === 'Manual') {
+        setView('manual');
+        return;
+      }
+
       if (config) {
         config.setModel(model);
         const event = new ModelSlashCommandEvent(model);