fix: unify filter names in model selector

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>

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) => {

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,
     },