feat: replace ModelSelector dropdown with modal picker

NSelect dropdown is unusable with providers that have hundreds of models.
Replaced with a modal dialog featuring search filter, collapsible provider
groups, and click-to-select.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

packages/client/src/components/layout/ModelSelector.vue

@@ -1,41 +1,105 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import { NSelect } from 'naive-ui'
+import { ref, computed } from 'vue'
+import { NModal, NInput } from 'naive-ui'
 import { useAppStore } from '@/stores/hermes/app'
 import { useI18n } from 'vue-i18n'
 
 const { t } = useI18n()
-
 const appStore = useAppStore()
 
-const options = computed(() =>
-  appStore.modelGroups.map(g => ({
-    label: g.label,
-    type: 'group' as const,
-    key: g.provider,
-    children: g.models.map(m => ({
-      label: m,
-      value: m,
-    })),
-  })),
-)
+const showModal = ref(false)
+const searchQuery = ref('')
+const collapsedGroups = ref<Record<string, boolean>>({})
 
-function handleChange(value: string | number | Array<string | number>) {
-  if (typeof value === 'string') {
-    appStore.switchModel(value)
-  }
+const filteredGroups = computed(() => {
+  const q = searchQuery.value.toLowerCase().trim()
+  if (!q) return appStore.modelGroups
+  return appStore.modelGroups
+    .map(g => ({
+      ...g,
+      models: g.models.filter(m => m.toLowerCase().includes(q)),
+    }))
+    .filter(g => g.models.length > 0 || g.label.toLowerCase().includes(q))
+})
+
+function toggleGroup(provider: string) {
+  collapsedGroups.value[provider] = !collapsedGroups.value[provider]
+}
+
+function isGroupCollapsed(provider: string) {
+  return !!collapsedGroups.value[provider]
+}
+
+function handleSelect(model: string) {
+  appStore.switchModel(model)
+  showModal.value = false
+  searchQuery.value = ''
+}
+
+function openModal() {
+  collapsedGroups.value = {}
+  searchQuery.value = ''
+  showModal.value = true
 }
 </script>
 
 <template>
   <div class="model-selector">
     <div class="model-label">{{ t('models.title') }}</div>
-    <NSelect
-      :value="appStore.selectedModel"
-      :options="options"
-      size="small"
-      @update:value="handleChange"
-    />
+    <button class="model-trigger" @click="openModal">
+      <span class="model-name" :title="appStore.selectedModel">{{ appStore.selectedModel || '—' }}</span>
+      <svg class="model-arrow" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <polyline points="6 9 12 15 18 9" />
+      </svg>
+    </button>
+
+    <NModal
+      v-model:show="showModal"
+      preset="card"
+      :title="t('models.title')"
+      :style="{ width: 'min(480px, calc(100vw - 32px))' }"
+      :mask-closable="true"
+    >
+      <NInput
+        v-model:value="searchQuery"
+        :placeholder="t('models.searchPlaceholder')"
+        clearable
+        size="small"
+        class="model-search"
+      />
+      <div class="model-list">
+        <div v-for="group in filteredGroups" :key="group.provider" class="model-group">
+          <div class="model-group-header" @click="toggleGroup(group.provider)">
+            <svg
+              class="model-group-arrow"
+              :class="{ collapsed: isGroupCollapsed(group.provider) }"
+              width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+            >
+              <polyline points="6 9 12 15 18 9" />
+            </svg>
+            <span class="model-group-label">{{ group.label }}</span>
+            <span class="model-group-count">{{ group.models.length }}</span>
+          </div>
+          <div v-show="!isGroupCollapsed(group.provider)" class="model-group-items">
+            <div
+              v-for="model in group.models"
+              :key="model"
+              class="model-item"
+              :class="{ active: model === appStore.selectedModel }"
+              @click="handleSelect(model)"
+            >
+              <span class="model-item-name">{{ model }}</span>
+              <svg v-if="model === appStore.selectedModel" class="model-check" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                <polyline points="20 6 9 17 4 12" />
+              </svg>
+            </div>
+          </div>
+        </div>
+        <div v-if="filteredGroups.length === 0" class="model-empty">
+          {{ searchQuery ? 'No results' : 'No models' }}
+        </div>
+      </div>
+    </NModal>
   </div>
 </template>
 
@@ -55,4 +119,134 @@ function handleChange(value: string | number | Array<string | number>) {
   letter-spacing: 0.5px;
   margin-bottom: 6px;
 }
+
+.model-trigger {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  padding: 6px 8px;
+  background: $bg-input;
+  border: 1px solid $border-color;
+  border-radius: $radius-sm;
+  color: $text-primary;
+  font-size: 13px;
+  cursor: pointer;
+  transition: border-color $transition-fast;
+
+  &:hover {
+    border-color: $accent-muted;
+  }
+}
+
+.model-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: left;
+}
+
+.model-arrow {
+  flex-shrink: 0;
+  color: $text-muted;
+}
+
+.model-search {
+  margin-bottom: 12px;
+}
+
+.model-list {
+  max-height: 50vh;
+  overflow-y: auto;
+  scrollbar-width: thin;
+}
+
+.model-group {
+  margin-bottom: 4px;
+}
+
+.model-group-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 8px;
+  font-size: 12px;
+  font-weight: 600;
+  color: $text-secondary;
+  cursor: pointer;
+  border-radius: $radius-sm;
+  user-select: none;
+  transition: background-color $transition-fast;
+
+  &:hover {
+    background-color: $bg-secondary;
+  }
+}
+
+.model-group-arrow {
+  flex-shrink: 0;
+  transition: transform $transition-fast;
+
+  &.collapsed {
+    transform: rotate(-90deg);
+  }
+}
+
+.model-group-label {
+  flex: 1;
+}
+
+.model-group-count {
+  font-size: 11px;
+  color: $text-muted;
+  font-weight: 400;
+}
+
+.model-group-items {
+  padding-left: 8px;
+}
+
+.model-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 10px;
+  font-size: 13px;
+  color: $text-secondary;
+  border-radius: $radius-sm;
+  cursor: pointer;
+  transition: all $transition-fast;
+
+  &:hover {
+    background-color: rgba(var(--accent-primary-rgb), 0.06);
+    color: $text-primary;
+  }
+
+  &.active {
+    color: $accent-primary;
+    font-weight: 500;
+  }
+}
+
+.model-item-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: $font-code;
+  font-size: 12px;
+}
+
+.model-check {
+  flex-shrink: 0;
+  color: $accent-primary;
+}
+
+.model-empty {
+  padding: 24px 0;
+  text-align: center;
+  font-size: 13px;
+  color: $text-muted;
+}
 </style>

packages/client/src/i18n/locales/en.ts

@@ -190,6 +190,7 @@ export default {
   // Models
   models: {
     title: 'Models',
+    searchPlaceholder: 'Search models...',
     addProvider: 'Add Provider',
     providerType: 'Provider Type',
     preset: 'Preset',

packages/client/src/i18n/locales/zh.ts

@@ -190,6 +190,7 @@ export default {
   // 模型
   models: {
     title: '模型',
+    searchPlaceholder: '搜索模型...',
     addProvider: '添加 Provider',
     providerType: 'Provider 类型',
     preset: '预设',