fix: unify filter names in model selector

[leoisadev8]

Summary

• Separates providerId (provider slug from model ID, used for filtering/grouping) from logoId (used for logo image URLs) in the Model interface
• Fixes "Meta Llama" → "Llama" to match the model-brand naming convention used by other filters (Qwen, DeepSeek, Mistral)
• Filter tabs now group models by their actual provider slug instead of logo ID, preventing accidental merging of unrelated providers

Test plan

• Verify model selector filter tabs show correct names and logos
• Verify clicking a filter tab shows only models from that provider
• Verify search for "meta" still finds Llama models (matches on model ID)
• Verify search for "llama" still works (matches display name and model ID)
• Verify logos load correctly in model list items, filter tabs, and settings page

Closes #548

🤖 Generated with Claude Code

[railway-app]

🚅 Deployed to the openchat-pr-551 environment in OpenChat

Service	Status	Web	Updated (UTC)
web	✅ Success (View Logs)	Web	Jan 23, 2026 at 2:15 am

[greptile-apps]

Greptile Summary

This PR separates provider identification logic from logo display logic by introducing a distinct logoId field in the Model interface. Previously, providerId served dual purposes: filtering/grouping models AND fetching logo images from models.dev. This caused issues for providers like Meta Llama where the model ID prefix ("meta-llama") differs from the logo slug ("llama").

Key Changes:

• Added logoId field to Model interface for logo image URLs
• providerId now only used for filtering and grouping (extracted from model ID)
• Updated "Meta Llama" → "Llama" to match naming convention of other filters (Qwen, DeepSeek, Mistral)
• All logo rendering components (ProviderLogo, settings preview) now use logoId
• Filter tabs continue to group by providerId to maintain correct provider separation

Impact:

• Filter tabs now display consistent provider names without mixing company/model nomenclature
• Search functionality remains intact (searches model ID, name, provider, family)
• Logo images load correctly using proper slugs for models.dev
• Prevents accidental merging of providers with similar names but different model ID prefixes

Confidence Score: 5/5

• This PR is safe to merge with minimal risk
• The changes are well-structured and follow a clear separation of concerns pattern. The refactoring introduces logoId as a dedicated field for logo URLs while preserving providerId for filtering logic, which improves code clarity and prevents naming conflicts. All affected components have been updated consistently across the codebase. The changes are backwards-compatible since fallback models include both fields, and the transformation logic properly sets both values for all models fetched from the API.
• No files require special attention

Important Files Changed

Filename	Overview
apps/web/src/stores/model.ts	Added logoId field to Model interface and updated PROVIDER_INFO for "meta-llama" provider. Changed "Meta Llama" to "Llama" for consistency with other filter names. Updated fallback models to include new logoId field.
apps/web/src/components/model-selector.tsx	Updated all ProviderLogo components to use logoId instead of providerId. Added logoId field to provider map for filter tabs. Maintains provider filtering by providerId while displaying logos using logoId.
apps/web/src/routes/settings.tsx	Updated model preview section to use logoId for logo URL instead of providerId.

Sequence Diagram

sequenceDiagram
    participant API as OpenRouter API
    participant Store as model.ts
    participant Selector as model-selector.tsx
    participant Settings as settings.tsx
    participant Logo as ProviderLogo Component
    
    API->>Store: Fetch models data
    Store->>Store: transformModel(raw)
    Note over Store: Extract providerSlug from model ID<br/>(e.g., "meta-llama")
    Store->>Store: Lookup PROVIDER_INFO[providerSlug]
    Note over Store: Get display name "Llama"<br/>and logoId "llama"
    Store->>Store: Create Model object<br/>providerId: "meta-llama"<br/>logoId: "llama"<br/>provider: "Llama"
    
    Store->>Selector: models array
    Selector->>Selector: Build uniqueProviders map
    Note over Selector: Group by providerId<br/>Store logoId for each provider
    Selector->>Selector: Filter models by providerId
    Note over Selector: selectedProvider filters<br/>using model.providerId
    
    Selector->>Logo: providerId={model.logoId}
    Logo->>Logo: Fetch logo from models.dev
    Note over Logo: URL: models.dev/logos/llama.svg
    
    Settings->>Logo: src={model.logoId}
    Logo->>Logo: Display logo using logoId
    Note over Logo: Separates filtering logic<br/>from logo display logic

Loading