From c9d750ad8ee83063539d973a844a5f40d0c43b32 Mon Sep 17 00:00:00 2001
From: Soulter <37870767+Soulter@users.noreply.github.com>
Date: Mon, 14 Sep 2026 20:04:40 +0800
Subject: [PATCH 1/3] feat: group model selection by provider source

---
 .../components/shared/ProviderSelectMenu.vue  | 243 +++++++++++-------
 1 file changed, 146 insertions(+), 97 deletions(-)

diff --git a/dashboard/src/components/shared/ProviderSelectMenu.vue b/dashboard/src/components/shared/ProviderSelectMenu.vue
index 70dfdfb0ab..02280073f4 100644
--- a/dashboard/src/components/shared/ProviderSelectMenu.vue
+++ b/dashboard/src/components/shared/ProviderSelectMenu.vue
@@ -99,6 +99,7 @@
 
           <v-list
             v-if="!loadingProviders"
+            ref="providerListRef"
             density="compact"
             nav
             class="provider-menu-list"
@@ -127,109 +128,120 @@
               </template>
             </v-list-item>
 
-            <v-list-item
-              v-for="provider in filteredProviders"
-              :key="provider.id"
-              :active="isProviderSelected(provider.id)"
-              rounded="lg"
-              class="provider-menu-item"
-              @click="selectProvider(provider)"
-            >
-              <v-list-item-title class="provider-item-title">
-                {{ provider.id }}
-              </v-list-item-title>
-              <v-list-item-subtitle class="provider-subtitle">
-                <span class="model-name">
-                  {{
-                    provider.model || provider.type || provider.provider_type
-                  }}
-                </span>
-                <span
-                  v-if="
-                    capabilityBadges(provider).length ||
-                    formatContextLimit(provider, metadataForProvider(provider))
-                  "
-                  class="meta-icons"
-                >
-                  <v-tooltip
-                    v-for="item in capabilityBadges(provider)"
-                    :key="item.key"
-                    location="top"
-                    max-width="320"
-                  >
-                    <template #activator="{ props: badgeTooltipProps }">
-                      <span
-                        v-bind="badgeTooltipProps"
-                        class="meta-icon-badge"
-                        :class="{ 'meta-icon-badge--disabled': !item.enabled }"
-                        @click.stop
-                      >
-                        <v-icon size="13">{{ item.icon }}</v-icon>
-                      </span>
-                    </template>
-                    <span>{{ item.tooltip }}</span>
-                  </v-tooltip>
-                  <v-tooltip
+            <template v-for="group in providerGroups" :key="group.id">
+              <v-list-subheader class="provider-source-header">
+                {{ group.id }}
+              </v-list-subheader>
+              <v-list-item
+                v-for="provider in group.providers"
+                :key="provider.id"
+                :data-selected="isProviderSelected(provider.id) || undefined"
+                :active="isProviderSelected(provider.id)"
+                rounded="lg"
+                class="provider-menu-item"
+                @click="selectProvider(provider)"
+              >
+                <v-list-item-title class="provider-item-title">
+                  {{ provider.id }}
+                </v-list-item-title>
+                <v-list-item-subtitle class="provider-subtitle">
+                  <span class="model-name">
+                    {{
+                      provider.model || provider.type || provider.provider_type
+                    }}
+                  </span>
+                  <span
                     v-if="
+                      capabilityBadges(provider).length ||
                       formatContextLimit(
                         provider,
                         metadataForProvider(provider),
                       )
                     "
-                    location="top"
-                    max-width="320"
+                    class="meta-icons"
                   >
-                    <template #activator="{ props: contextTooltipProps }">
-                      <span
-                        v-bind="contextTooltipProps"
-                        class="meta-context-badge"
-                        @click.stop
-                      >
-                        {{
-                          formatContextLimit(
-                            provider,
-                            metadataForProvider(provider),
-                          )
-                        }}
-                      </span>
-                    </template>
-                    <span>{{
-                      providerTm("models.metadata.context", {
-                        tokens: formatContextLimit(
+                    <v-tooltip
+                      v-for="item in capabilityBadges(provider)"
+                      :key="item.key"
+                      location="top"
+                      max-width="320"
+                    >
+                      <template #activator="{ props: badgeTooltipProps }">
+                        <span
+                          v-bind="badgeTooltipProps"
+                          class="meta-icon-badge"
+                          :class="{
+                            'meta-icon-badge--disabled': !item.enabled,
+                          }"
+                          @click.stop
+                        >
+                          <v-icon size="13">{{ item.icon }}</v-icon>
+                        </span>
+                      </template>
+                      <span>{{ item.tooltip }}</span>
+                    </v-tooltip>
+                    <v-tooltip
+                      v-if="
+                        formatContextLimit(
                           provider,
                           metadataForProvider(provider),
-                        ),
-                      })
-                    }}</span>
-                  </v-tooltip>
-                </span>
-              </v-list-item-subtitle>
-              <template #append>
-                <div class="provider-menu-actions" @click.stop>
-                  <v-tooltip location="top">
-                    <template #activator="{ props: testTooltipProps }">
-                      <v-btn
-                        v-bind="testTooltipProps"
-                        icon="mdi-connection"
-                        size="x-small"
-                        variant="text"
-                        :loading="testingProviderIds.includes(provider.id)"
-                        :disabled="testingProviderIds.includes(provider.id)"
-                        @click.stop="testProvider(provider)"
-                      />
-                    </template>
-                    <span>{{ providerTm("models.testButton") }}</span>
-                  </v-tooltip>
-                  <v-icon
-                    v-if="isProviderSelected(provider.id)"
-                    class="provider-selected-icon"
-                    size="18"
-                  >
-                    mdi-check
-                  </v-icon>
-                </div>
-              </template>
-            </v-list-item>
+                        )
+                      "
+                      location="top"
+                      max-width="320"
+                    >
+                      <template #activator="{ props: contextTooltipProps }">
+                        <span
+                          v-bind="contextTooltipProps"
+                          class="meta-context-badge"
+                          @click.stop
+                        >
+                          {{
+                            formatContextLimit(
+                              provider,
+                              metadataForProvider(provider),
+                            )
+                          }}
+                        </span>
+                      </template>
+                      <span>{{
+                        providerTm("models.metadata.context", {
+                          tokens: formatContextLimit(
+                            provider,
+                            metadataForProvider(provider),
+                          ),
+                        })
+                      }}</span>
+                    </v-tooltip>
+                  </span>
+                </v-list-item-subtitle>
+                <template #append>
+                  <div class="provider-menu-actions" @click.stop>
+                    <v-tooltip location="top">
+                      <template #activator="{ props: testTooltipProps }">
+                        <v-btn
+                          v-bind="testTooltipProps"
+                          icon="mdi-connection"
+                          size="x-small"
+                          variant="text"
+                          :loading="testingProviderIds.includes(provider.id)"
+                          :disabled="testingProviderIds.includes(provider.id)"
+                          @click.stop="testProvider(provider)"
+                        />
+                      </template>
+                      <span>{{ providerTm("models.testButton") }}</span>
+                    </v-tooltip>
+                    <v-icon
+                      v-if="isProviderSelected(provider.id)"
+                      class="provider-selected-icon"
+                      size="18"
+                    >
+                      mdi-check
+                    </v-icon>
+                  </div>
+                </template>
+              </v-list-item>
+            </template>
           </v-list>
 
           <div
@@ -279,7 +291,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from "vue";
+import { computed, nextTick, ref, watch } from "vue";
 import { providerApi } from "@/api/v1";
 import ProviderChatCompletionPanel from "@/components/provider/ProviderChatCompletionPanel.vue";
 import ProviderPage from "@/views/ProviderPage.vue";
@@ -297,6 +309,7 @@ interface ProviderConfig extends ProviderMetadataSource {
   model?: string;
   type?: string;
   provider_type?: string;
+  provider_source_id?: string;
   enable?: boolean;
 }
 
@@ -333,6 +346,7 @@ const modelMetadata = ref<Record<string, ProviderModelMetadata>>({});
 const testingProviderIds = ref<string[]>([]);
 const searchQuery = ref("");
 const menuOpen = ref(false);
+const providerListRef = ref<{ $el: HTMLElement } | null>(null);
 const providerDrawer = ref(false);
 const loadingProviders = ref(false);
 const providersLoaded = ref(false);
@@ -381,17 +395,30 @@ const menuLocation = computed(() => {
 });
 
 const filteredProviders = computed(() => {
-  const query = searchQuery.value.trim().toLowerCase();
+  const query = (searchQuery.value || "").trim().toLowerCase();
   if (!query) return providerConfigs.value;
   return providerConfigs.value.filter(
     (provider) =>
       provider.id.toLowerCase().includes(query) ||
+      (provider.provider_source_id || "").toLowerCase().includes(query) ||
       String(provider.model || "")
         .toLowerCase()
         .includes(query),
   );
 });
 
+const providerGroups = computed(() => {
+  const groups = new Map<string, ProviderConfig[]>();
+  for (const provider of filteredProviders.value) {
+    const sourceId =
+      provider.provider_source_id || provider.type || provider.id;
+    const group = groups.get(sourceId);
+    if (group) group.push(provider);
+    else groups.set(sourceId, [provider]);
+  }
+  return Array.from(groups, ([id, providers]) => ({ id, providers }));
+});
+
 async function loadProviderConfigs(force = false) {
   if (loadingProviders.value || (providersLoaded.value && !force)) return;
   loadingProviders.value = true;
@@ -507,9 +534,25 @@ async function testProvider(provider: ProviderConfig) {
 }
 
 function handleMenuToggle(isOpen: boolean) {
-  if (isOpen) loadProviderConfigs(true);
+  if (isOpen) {
+    searchQuery.value = "";
+    loadProviderConfigs(true);
+  }
 }
 
+watch([menuOpen, loadingProviders], async ([isOpen, loading]) => {
+  if (!isOpen || loading) return;
+  await nextTick();
+  const list = providerListRef.value?.$el;
+  const selected = list?.querySelector<HTMLElement>('[data-selected="true"]');
+  if (list && selected) {
+    list.scrollTop +=
+      selected.getBoundingClientRect().top -
+      list.getBoundingClientRect().top -
+      (list.clientHeight - selected.clientHeight) / 2;
+  }
+});
+
 function openProviderDrawer() {
   menuOpen.value = false;
   providerDrawer.value = true;
@@ -714,6 +757,12 @@ defineExpose({ getCurrentSelection });
   border-radius: 10px !important;
 }
 
+.provider-source-header {
+  min-height: 32px;
+  font-size: 12px;
+  font-weight: 600;
+}
+
 .provider-menu-item:hover {
   background: rgba(var(--v-theme-on-surface), 0.05);
 }

From 733ed26b12a0d7388ce4aa1ad866ed9a0bacbc30 Mon Sep 17 00:00:00 2001
From: Soulter <37870767+Soulter@users.noreply.github.com>
Date: Mon, 14 Sep 2026 21:35:07 +0800
Subject: [PATCH 2/3] feat: optimize model selector with source filters and
 sticky groups

---
 .../components/shared/ProviderSelectMenu.vue  | 317 +++++++++++++++---
 .../src/i18n/locales/en-US/core/shared.json   |   2 +
 .../src/i18n/locales/ja-JP/core/shared.json   |   2 +
 .../src/i18n/locales/ru-RU/core/shared.json   |   2 +
 .../src/i18n/locales/zh-CN/core/shared.json   |   2 +
 5 files changed, 287 insertions(+), 38 deletions(-)

diff --git a/dashboard/src/components/shared/ProviderSelectMenu.vue b/dashboard/src/components/shared/ProviderSelectMenu.vue
index 02280073f4..8a0a2b26de 100644
--- a/dashboard/src/components/shared/ProviderSelectMenu.vue
+++ b/dashboard/src/components/shared/ProviderSelectMenu.vue
@@ -29,16 +29,69 @@
 
       <v-card class="provider-menu-card" elevation="0">
         <div class="provider-menu-body">
-          <v-text-field
-            v-model="searchQuery"
-            :placeholder="sharedTm('providerSelector.searchPlaceholder')"
-            hide-details
-            variant="outlined"
-            density="compact"
-            prepend-inner-icon="mdi-magnify"
-            class="provider-search"
-            clearable
-          />
+          <div class="provider-search-row">
+            <v-menu
+              v-model="sourceMenuOpen"
+              :close-on-content-click="false"
+              offset="6"
+              transition="none"
+            >
+              <template #activator="{ props: sourceMenuProps }">
+                <button
+                  v-bind="sourceMenuProps"
+                  type="button"
+                  class="provider-source-trigger"
+                  :title="sharedTm('providerSelector.filterSource')"
+                >
+                  <span>{{
+                    selectedSourceId || sharedTm("providerSelector.allSources")
+                  }}</span>
+                  <v-icon size="16">mdi-chevron-down</v-icon>
+                </button>
+              </template>
+              <v-card class="provider-source-menu" elevation="0">
+                <v-list density="compact" nav>
+                  <v-list-item
+                    :active="!selectedSourceId"
+                    @click="
+                      selectedSourceId = '';
+                      sourceMenuOpen = false;
+                    "
+                  >
+                    <v-list-item-title>{{
+                      sharedTm("providerSelector.allSources")
+                    }}</v-list-item-title>
+                  </v-list-item>
+                  <v-list-item
+                    v-for="source in providerSources"
+                    :key="source.id"
+                    :active="selectedSourceId === source.id"
+                    @click="
+                      selectedSourceId = source.id;
+                      sourceMenuOpen = false;
+                    "
+                  >
+                    <v-list-item-title>{{ source.id }}</v-list-item-title>
+                    <v-list-item-subtitle
+                      v-if="source.apiBase"
+                      :title="source.apiBase"
+                      >{{ source.apiBase }}</v-list-item-subtitle
+                    >
+                  </v-list-item>
+                </v-list>
+              </v-card>
+            </v-menu>
+            <v-text-field
+              v-model="searchQuery"
+              :placeholder="sharedTm('providerSelector.searchPlaceholder')"
+              hide-details
+              variant="outlined"
+              density="compact"
+              prepend-inner-icon="mdi-magnify"
+              class="provider-search"
+              clearable
+            />
+          </div>
 
           <v-progress-linear
             v-if="loadingProviders"
@@ -98,11 +151,12 @@
           </div>
 
           <v-list
-            v-if="!loadingProviders"
+            v-if="providersLoaded || !loadingProviders"
             ref="providerListRef"
             density="compact"
             nav
             class="provider-menu-list"
+            @scroll.passive="providerScrollTop = $event.target.scrollTop"
           >
             <v-list-item
               v-if="!multiple && allowEmpty && !searchQuery"
@@ -128,10 +182,22 @@
               </template>
             </v-list-item>
 
-            <template v-for="group in providerGroups" :key="group.id">
+            <div
+              :style="{ height: `${visibleProviderGroups[0]?.top || 0}px` }"
+              aria-hidden="true"
+            />
+            <div
+              v-for="group in visibleProviderGroups"
+              :key="group.id"
+              class="provider-source-group"
+            >
               <v-list-subheader class="provider-source-header">
                 {{ group.id }}
               </v-list-subheader>
+              <div
+                :style="{ height: `${group.paddingTop}px` }"
+                aria-hidden="true"
+              />
               <v-list-item
                 v-for="provider in group.providers"
                 :key="provider.id"
@@ -241,7 +307,21 @@
                   </div>
                 </template>
               </v-list-item>
-            </template>
+              <div
+                :style="{ height: `${group.paddingBottom}px` }"
+                aria-hidden="true"
+              />
+            </div>
+            <div
+              :style="{
+                height: `${
+                  (providerGroups[providerGroups.length - 1]?.bottom || 0) -
+                  (visibleProviderGroups[visibleProviderGroups.length - 1]
+                    ?.bottom || 0)
+                }px`,
+              }"
+              aria-hidden="true"
+            />
           </v-list>
 
           <div
@@ -291,7 +371,8 @@
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, ref, watch } from "vue";
+import { computed, nextTick, ref, shallowRef, watch } from "vue";
+import { useDisplay } from "vuetify";
 import { providerApi } from "@/api/v1";
 import ProviderChatCompletionPanel from "@/components/provider/ProviderChatCompletionPanel.vue";
 import ProviderPage from "@/views/ProviderPage.vue";
@@ -311,6 +392,10 @@ interface ProviderConfig extends ProviderMetadataSource {
   provider_type?: string;
   provider_source_id?: string;
   enable?: boolean;
+  api_base?: string;
+  embedding_api_base?: string;
+  rerank_api_base?: string;
+  gemini_tts_api_base?: string;
 }
 
 const props = withDefaults(
@@ -341,11 +426,22 @@ const { tm: sharedTm } = useModuleI18n("core.shared");
 const { tm: providerTm } = useModuleI18n("features/provider");
 const { success: toastSuccess, error: toastError } = useToast();
 
-const providerConfigs = ref<ProviderConfig[]>([]);
-const modelMetadata = ref<Record<string, ProviderModelMetadata>>({});
+const providerConfigs = shallowRef<ProviderConfig[]>([]);
+const modelMetadata = shallowRef<Record<string, ProviderModelMetadata>>({});
 const testingProviderIds = ref<string[]>([]);
 const searchQuery = ref("");
 const menuOpen = ref(false);
+const sourceMenuOpen = ref(false);
+const selectedSourceId = ref("");
+const providerScrollTop = ref(0);
+const { height: displayHeight } = useDisplay();
+const providerListHeight = computed(() =>
+  Math.min(360, displayHeight.value * 0.58),
+);
+// Keep these sizes in sync with the model rows and sticky source headers below.
+const PROVIDER_ROW_HEIGHT = 56;
+const SOURCE_HEADER_HEIGHT = 32;
+let scrollToSelectionPending = false;
 const providerListRef = ref<{ $el: HTMLElement } | null>(null);
 const providerDrawer = ref(false);
 const loadingProviders = ref(false);
@@ -396,17 +492,38 @@ const menuLocation = computed(() => {
 
 const filteredProviders = computed(() => {
   const query = (searchQuery.value || "").trim().toLowerCase();
-  if (!query) return providerConfigs.value;
   return providerConfigs.value.filter(
     (provider) =>
-      provider.id.toLowerCase().includes(query) ||
-      (provider.provider_source_id || "").toLowerCase().includes(query) ||
-      String(provider.model || "")
-        .toLowerCase()
-        .includes(query),
+      (!selectedSourceId.value ||
+        (provider.provider_source_id || provider.type || provider.id) ===
+          selectedSourceId.value) &&
+      (!query ||
+        provider.id.toLowerCase().includes(query) ||
+        (provider.provider_source_id || "").toLowerCase().includes(query) ||
+        String(provider.model || "")
+          .toLowerCase()
+          .includes(query)),
   );
 });
 
+const providerSources = computed(() => {
+  const sources = new Map<string, { id: string; apiBase: string }>();
+  for (const provider of providerConfigs.value) {
+    const id = provider.provider_source_id || provider.type || provider.id;
+    if (!sources.has(id))
+      sources.set(id, {
+        id,
+        apiBase:
+          provider.api_base ||
+          provider.embedding_api_base ||
+          provider.rerank_api_base ||
+          provider.gemini_tts_api_base ||
+          "",
+      });
+  }
+  return [...sources.values()];
+});
+
 const providerGroups = computed(() => {
   const groups = new Map<string, ProviderConfig[]>();
   for (const provider of filteredProviders.value) {
@@ -416,7 +533,51 @@ const providerGroups = computed(() => {
     if (group) group.push(provider);
     else groups.set(sourceId, [provider]);
   }
-  return Array.from(groups, ([id, providers]) => ({ id, providers }));
+  let offset = 0;
+  return Array.from(groups, ([id, providers]) => {
+    const top = offset;
+    offset += SOURCE_HEADER_HEIGHT + providers.length * PROVIDER_ROW_HEIGHT;
+    return { id, providers, top, bottom: offset };
+  });
+});
+
+const visibleProviderGroups = computed(() => {
+  // Spacers preserve full group heights for sticky headers while only nearby rows mount.
+  const clearHeight =
+    !props.multiple && props.allowEmpty && !searchQuery.value
+      ? PROVIDER_ROW_HEIGHT
+      : 0;
+  const scrollTop = providerScrollTop.value - clearHeight;
+  const start = Math.max(0, scrollTop - PROVIDER_ROW_HEIGHT * 3);
+  const end = scrollTop + providerListHeight.value + PROVIDER_ROW_HEIGHT * 3;
+  return providerGroups.value
+    .filter((group) => group.bottom >= start && group.top <= end)
+    .map((group) => {
+      const first = Math.max(
+        0,
+        Math.min(
+          group.providers.length,
+          Math.floor(
+            (start - group.top - SOURCE_HEADER_HEIGHT) / PROVIDER_ROW_HEIGHT,
+          ),
+        ),
+      );
+      const last = Math.max(
+        first,
+        Math.min(
+          group.providers.length,
+          Math.ceil(
+            (end - group.top - SOURCE_HEADER_HEIGHT) / PROVIDER_ROW_HEIGHT,
+          ),
+        ),
+      );
+      return {
+        ...group,
+        providers: group.providers.slice(first, last),
+        paddingTop: first * PROVIDER_ROW_HEIGHT,
+        paddingBottom: (group.providers.length - last) * PROVIDER_ROW_HEIGHT,
+      };
+    });
 });
 
 async function loadProviderConfigs(force = false) {
@@ -433,10 +594,18 @@ async function loadProviderConfigs(force = false) {
         (response.data.data || []) as unknown as ProviderConfig[]
       ).filter((provider) => provider.enable !== false);
       providersLoaded.value = true;
+      if (
+        selectedSourceId.value &&
+        !providerSources.value.some(
+          (source) => source.id === selectedSourceId.value,
+        )
+      ) {
+        selectedSourceId.value = "";
+      }
     }
   } catch (error) {
     console.error("Failed to load provider list:", error);
-    providerConfigs.value = [];
+    if (!providersLoaded.value) providerConfigs.value = [];
   } finally {
     loadingProviders.value = false;
   }
@@ -535,23 +704,50 @@ async function testProvider(provider: ProviderConfig) {
 
 function handleMenuToggle(isOpen: boolean) {
   if (isOpen) {
+    scrollToSelectionPending = true;
     searchQuery.value = "";
+    selectedSourceId.value = "";
     loadProviderConfigs(true);
   }
 }
 
-watch([menuOpen, loadingProviders], async ([isOpen, loading]) => {
-  if (!isOpen || loading) return;
-  await nextTick();
-  const list = providerListRef.value?.$el;
-  const selected = list?.querySelector<HTMLElement>('[data-selected="true"]');
-  if (list && selected) {
-    list.scrollTop +=
-      selected.getBoundingClientRect().top -
-      list.getBoundingClientRect().top -
-      (list.clientHeight - selected.clientHeight) / 2;
-  }
-});
+watch(
+  [menuOpen, loadingProviders, searchQuery, selectedSourceId],
+  async ([isOpen, loading, query, source], [, , oldQuery, oldSource]) => {
+    if (!isOpen || (loading && !providersLoaded.value)) return;
+    await nextTick();
+    const list = providerListRef.value?.$el;
+    if (!list) return;
+    if (scrollToSelectionPending) {
+      scrollToSelectionPending = false;
+      let target = 0;
+      for (const group of providerGroups.value) {
+        const index = group.providers.findIndex((provider) =>
+          isProviderSelected(provider.id),
+        );
+        if (index < 0) continue;
+        const clearHeight =
+          !props.multiple && props.allowEmpty && !query
+            ? PROVIDER_ROW_HEIGHT
+            : 0;
+        target = Math.max(
+          0,
+          clearHeight +
+            group.top +
+            SOURCE_HEADER_HEIGHT +
+            index * PROVIDER_ROW_HEIGHT -
+            (list.clientHeight - PROVIDER_ROW_HEIGHT) / 2,
+        );
+        break;
+      }
+      list.scrollTop = target;
+      providerScrollTop.value = list.scrollTop;
+    } else if (query !== oldQuery || source !== oldSource) {
+      list.scrollTop = 0;
+      providerScrollTop.value = 0;
+    }
+  },
+);
 
 function openProviderDrawer() {
   menuOpen.value = false;
@@ -700,10 +896,45 @@ defineExpose({ getCurrentSelection });
   padding: 10px;
 }
 
-.provider-search {
+.provider-search-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
   margin-bottom: 8px;
 }
 
+.provider-search {
+  flex: 1;
+  min-width: 0;
+}
+
+.provider-source-trigger {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  max-width: 135px;
+  height: 40px;
+  padding: 0 8px;
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.16);
+  border-radius: 10px;
+  color: rgb(var(--v-theme-on-surface));
+  font-size: 12px;
+}
+
+.provider-source-trigger span {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.provider-source-menu {
+  width: min(360px, calc(100vw - 24px));
+  max-height: 320px;
+  overflow-y: auto;
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.09);
+  border-radius: 12px !important;
+}
+
 .provider-search :deep(.v-field) {
   border-radius: 10px;
   box-shadow: none;
@@ -752,13 +983,23 @@ defineExpose({ getCurrentSelection });
 }
 
 .provider-menu-item {
+  height: 54px;
   min-height: 54px !important;
-  margin-bottom: 2px;
+  margin: 0 0 2px !important;
   border-radius: 10px !important;
 }
 
+.provider-source-group {
+  display: flow-root;
+}
+
 .provider-source-header {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  height: 32px;
   min-height: 32px;
+  background: rgb(var(--v-theme-surface));
   font-size: 12px;
   font-weight: 600;
 }
diff --git a/dashboard/src/i18n/locales/en-US/core/shared.json b/dashboard/src/i18n/locales/en-US/core/shared.json
index d54ae63165..ffa9e5730f 100644
--- a/dashboard/src/i18n/locales/en-US/core/shared.json
+++ b/dashboard/src/i18n/locales/en-US/core/shared.json
@@ -39,6 +39,8 @@
     "allPluginsLabel": "All Plugins"
   },
   "providerSelector": {
+    "allSources": "All sources",
+    "filterSource": "Filter by provider source",
     "notSelected": "Not selected",
     "defaultModel": "Default model",
     "model": "Model",
diff --git a/dashboard/src/i18n/locales/ja-JP/core/shared.json b/dashboard/src/i18n/locales/ja-JP/core/shared.json
index 8c5f8b15ec..6a49d04e0c 100644
--- a/dashboard/src/i18n/locales/ja-JP/core/shared.json
+++ b/dashboard/src/i18n/locales/ja-JP/core/shared.json
@@ -39,6 +39,8 @@
     "allPluginsLabel": "すべてのプラグイン"
   },
   "providerSelector": {
+    "allSources": "すべてのソース",
+    "filterSource": "プロバイダーソースで絞り込む",
     "notSelected": "未選択",
     "defaultModel": "デフォルトモデル",
     "model": "モデル",
diff --git a/dashboard/src/i18n/locales/ru-RU/core/shared.json b/dashboard/src/i18n/locales/ru-RU/core/shared.json
index 017aea85bc..2e65125e5c 100644
--- a/dashboard/src/i18n/locales/ru-RU/core/shared.json
+++ b/dashboard/src/i18n/locales/ru-RU/core/shared.json
@@ -39,6 +39,8 @@
         "allPluginsLabel": "Все плагины"
     },
     "providerSelector": {
+        "allSources": "Все источники",
+        "filterSource": "Фильтр по источнику провайдера",
         "notSelected": "Не выбрано",
         "defaultModel": "Модель по умолчанию",
         "model": "Модель",
diff --git a/dashboard/src/i18n/locales/zh-CN/core/shared.json b/dashboard/src/i18n/locales/zh-CN/core/shared.json
index 5c5cc066ec..5d7bf0e403 100644
--- a/dashboard/src/i18n/locales/zh-CN/core/shared.json
+++ b/dashboard/src/i18n/locales/zh-CN/core/shared.json
@@ -39,6 +39,8 @@
     "allPluginsLabel": "所有插件"
   },
   "providerSelector": {
+    "allSources": "全部源",
+    "filterSource": "筛选提供商源",
     "notSelected": "未选择",
     "defaultModel": "默认模型",
     "model": "模型",

From 59aca4f5a3a7a9fe69efa933244d3a27085fd88c Mon Sep 17 00:00:00 2001
From: Soulter <37870767+Soulter@users.noreply.github.com>
Date: Mon, 14 Sep 2026 21:41:00 +0800
Subject: [PATCH 3/3] fix: align model filter borders and hide single-source
 filter

---
 dashboard/src/components/shared/ProviderSelectMenu.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/dashboard/src/components/shared/ProviderSelectMenu.vue b/dashboard/src/components/shared/ProviderSelectMenu.vue
index 8a0a2b26de..6465aebb27 100644
--- a/dashboard/src/components/shared/ProviderSelectMenu.vue
+++ b/dashboard/src/components/shared/ProviderSelectMenu.vue
@@ -31,6 +31,7 @@
         <div class="provider-menu-body">
           <div class="provider-search-row">
             <v-menu
+              v-if="providerSources.length > 1"
               v-model="sourceMenuOpen"
               :close-on-content-click="false"
               offset="6"
@@ -940,7 +941,8 @@ defineExpose({ getCurrentSelection });
   box-shadow: none;
 }
 
-.provider-search :deep(.v-field__outline) {
+.provider-search :deep(.v-field .v-field__outline) {
+  --v-field-border-opacity: 1;
   color: rgba(var(--v-theme-on-surface), 0.16);
 }