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

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

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>
+      )}
+    />
+  );
+}