From ba51955ea767d339ed85252fcda8a4128e623225 Mon Sep 17 00:00:00 2001
From: Leo <leoplayz317@gmail.com>
Date: Thu, 22 Jan 2026 21:12:44 -0500
Subject: [PATCH] fix: unify filter names in model selector (#548)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Separate provider slug (for filtering/grouping) from logo ID (for images).
Previously `providerId` served both purposes, causing "Meta Llama" to use
"llama" as the filter key. Now filters group by the actual provider slug
from the model ID, and logos load from the dedicated `logoId` field.

Also renames "Meta Llama" → "Llama" for consistency with other
model-brand-based filter names (Qwen, DeepSeek, Mistral).

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 apps/web/src/components/model-selector.tsx | 11 ++++++-----
 apps/web/src/routes/settings.tsx           |  2 +-
 apps/web/src/stores/model.ts               | 18 +++++++++++++-----
 3 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/apps/web/src/components/model-selector.tsx b/apps/web/src/components/model-selector.tsx
index 5cdd3068..792df0db 100644
--- a/apps/web/src/components/model-selector.tsx
+++ b/apps/web/src/components/model-selector.tsx
@@ -156,7 +156,7 @@ function ModelItem({
         isSelected && "bg-accent/60",
       )}
     >
-      <ProviderLogo providerId={model.providerId} className="size-5 shrink-0" />
+      <ProviderLogo providerId={model.logoId} className="size-5 shrink-0" />
 
       <span className={cn(
         "flex-1 truncate text-[13px] font-medium tracking-tight transition-colors duration-150",
@@ -250,7 +250,7 @@ export function ModelSelector({
   const selectedModel = useMemo(() => getModelById(models, value), [models, value]);
 
   const uniqueProviders = useMemo(() => {
-    const providerMap = new Map<string, { id: string; name: string; count: number }>();
+    const providerMap = new Map<string, { id: string; name: string; logoId: string; count: number }>();
     for (const model of models) {
       const existing = providerMap.get(model.providerId);
       if (existing) {
@@ -259,6 +259,7 @@ export function ModelSelector({
         providerMap.set(model.providerId, {
           id: model.providerId,
           name: model.provider,
+          logoId: model.logoId,
           count: 1,
         });
       }
@@ -457,7 +458,7 @@ export function ModelSelector({
       >
         {selectedModel ? (
           <>
-            <ProviderLogo providerId={selectedModel.providerId} className="size-4" />
+            <ProviderLogo providerId={selectedModel.logoId} className="size-4" />
             <span className="truncate max-w-[80px] md:max-w-[140px] font-medium">{selectedModel.name}</span>
           </>
         ) : (
@@ -572,7 +573,7 @@ export function ModelSelector({
                           : "bg-muted/50 text-muted-foreground active:bg-accent active:text-foreground",
                       )}
                     >
-                      <ProviderLogo providerId={provider.id} className="size-4" />
+                      <ProviderLogo providerId={provider.logoId} className="size-4" />
                       <span className="max-w-[80px] truncate">{provider.name}</span>
                     </button>
                   ))}
@@ -714,7 +715,7 @@ export function ModelSelector({
                       )}
                       title={provider.name}
                     >
-                      <ProviderLogo providerId={provider.id} className="size-5" />
+                      <ProviderLogo providerId={provider.logoId} className="size-5" />
                     </button>
                   ))}
                 </div>
diff --git a/apps/web/src/routes/settings.tsx b/apps/web/src/routes/settings.tsx
index 30422ee0..2f58362b 100644
--- a/apps/web/src/routes/settings.tsx
+++ b/apps/web/src/routes/settings.tsx
@@ -850,7 +850,7 @@ function ModelsSection() {
               {models.slice(0, 8).map((model) => (
                 <div key={model.id} className="flex items-center gap-3 p-3">
                   <img
-                    src={`https://models.dev/logos/${model.providerId}.svg`}
+                    src={`https://models.dev/logos/${model.logoId}.svg`}
                     alt={model.provider}
                     className="size-5 dark:invert"
                     onError={(e) => {
diff --git a/apps/web/src/stores/model.ts b/apps/web/src/stores/model.ts
index 39196f31..1f86fae0 100644
--- a/apps/web/src/stores/model.ts
+++ b/apps/web/src/stores/model.ts
@@ -39,7 +39,8 @@ export interface Model {
   id: string;
   name: string;
   provider: string; // Provider display name (e.g., "Anthropic")
-  providerId: string; // Provider slug for logos (e.g., "anthropic")
+  providerId: string; // Provider slug from model ID (e.g., "meta-llama", "qwen")
+  logoId: string; // Logo slug for models.dev (e.g., "llama", "alibaba")
   family?: string; // Model family (e.g., "claude-3.5")
   description?: string;
   contextLength?: number;
@@ -60,7 +61,7 @@ const PROVIDER_INFO: Record<string, { name: string; logoId: string }> = {
   openai: { name: "OpenAI", logoId: "openai" },
   anthropic: { name: "Anthropic", logoId: "anthropic" },
   google: { name: "Google", logoId: "google" },
-  "meta-llama": { name: "Meta Llama", logoId: "llama" },
+  "meta-llama": { name: "Llama", logoId: "llama" },
   mistralai: { name: "Mistral", logoId: "mistral" },
   deepseek: { name: "DeepSeek", logoId: "deepseek" },
   "x-ai": { name: "xAI", logoId: "xai" },
@@ -291,7 +292,8 @@ function transformModel(raw: OpenRouterModel): Model {
     id,
     name: raw.name || id,
     provider: info.name,
-    providerId: info.logoId,
+    providerId: providerSlug,
+    logoId: info.logoId,
     family: extractFamily(id, raw.name || ""),
     description: raw.description,
     contextLength: raw.context_length,
@@ -412,6 +414,7 @@ function getFallbackModels(): Model[] {
       name: "Claude 3.5 Sonnet",
       provider: "Anthropic",
       providerId: "anthropic",
+      logoId: "anthropic",
       family: "Claude 3.5",
       isPopular: true,
     },
@@ -420,6 +423,7 @@ function getFallbackModels(): Model[] {
       name: "GPT-4o",
       provider: "OpenAI",
       providerId: "openai",
+      logoId: "openai",
       family: "GPT-4o",
       isPopular: true,
     },
@@ -428,6 +432,7 @@ function getFallbackModels(): Model[] {
       name: "GPT-4o Mini",
       provider: "OpenAI",
       providerId: "openai",
+      logoId: "openai",
       family: "GPT-4o",
       isPopular: true,
     },
@@ -436,6 +441,7 @@ function getFallbackModels(): Model[] {
       name: "Gemini 2.5 Flash",
       provider: "Google",
       providerId: "google",
+      logoId: "google",
       family: "Gemini 2.5",
       isPopular: true,
     },
@@ -444,14 +450,16 @@ function getFallbackModels(): Model[] {
       name: "DeepSeek Chat",
       provider: "DeepSeek",
       providerId: "deepseek",
+      logoId: "deepseek",
       family: "DeepSeek",
       isPopular: true,
     },
     {
       id: "meta-llama/llama-3.3-70b-instruct",
       name: "Llama 3.3 70B",
-      provider: "Meta Llama",
-      providerId: "llama",
+      provider: "Llama",
+      providerId: "meta-llama",
+      logoId: "llama",
       family: "Llama 3.3",
       isPopular: true,
     },