fix: hide mux-gateway models and only show cloud for supported providers

- Filter out mux-gateway provider from custom models list in settings
- Filter out mux-gateway models from model LRU list
- Only show cloud icon for providers that gateway supports (anthropic, openai, google)
- Add isGatewaySupported() check in toGatewayModel for extra robustness

Author: ammar-agent

src/browser/components/ModelSelector.tsx

@@ -10,7 +10,7 @@ import { cn } from "@/common/lib/utils";
 import { Cloud, Settings, Star } from "lucide-react";
 import { TooltipWrapper, Tooltip } from "./Tooltip";
 import { useSettings } from "@/browser/contexts/SettingsContext";
-import { useGatewayModels } from "@/browser/hooks/useGatewayModels";
+import { useGatewayModels, isGatewaySupported } from "@/browser/hooks/useGatewayModels";
 
 interface ModelSelectorProps {
   value: string;
@@ -196,7 +196,8 @@ export const ModelSelector = forwardRef<ModelSelectorRef, ModelSelectorProps>(
     }, [highlightedIndex]);
 
     if (!isEditing) {
-      const gatewayEnabled = isGatewayEnabled(value) && gatewayAvailable;
+      const gatewayEnabled =
+        isGatewayEnabled(value) && gatewayAvailable && isGatewaySupported(value);
       return (
         <div ref={containerRef} className="relative flex items-center gap-1">
           {gatewayEnabled && (
@@ -268,8 +269,8 @@ export const ModelSelector = forwardRef<ModelSelectorRef, ModelSelectorProps>(
                   <div className="grid w-full grid-cols-[1fr_auto] items-center gap-2">
                     <span className="min-w-0 truncate">{model}</span>
                     <div className="flex items-center gap-0.5">
-                      {/* Gateway toggle - only show when gateway is configured */}
-                      {gatewayAvailable && (
+                      {/* Gateway toggle - only show when gateway is configured and model's provider is supported */}
+                      {gatewayAvailable && isGatewaySupported(model) && (
                         <TooltipWrapper inline>
                           <button
                             type="button"

src/browser/components/Settings/sections/ModelsSection.tsx

@@ -3,11 +3,14 @@ import { Plus, Loader2 } from "lucide-react";
 import { SUPPORTED_PROVIDERS, PROVIDER_DISPLAY_NAMES } from "@/common/constants/providers";
 import { KNOWN_MODELS } from "@/common/constants/knownModels";
 import { useModelLRU } from "@/browser/hooks/useModelLRU";
-import { useGatewayModels } from "@/browser/hooks/useGatewayModels";
+import { useGatewayModels, isGatewaySupported } from "@/browser/hooks/useGatewayModels";
 import { ModelRow } from "./ModelRow";
 import { useAPI } from "@/browser/contexts/API";
 import { useProvidersConfig } from "@/browser/hooks/useProvidersConfig";
 
+// Providers to exclude from the custom models UI (handled specially or internal)
+const HIDDEN_PROVIDERS = new Set(["mux-gateway"]);
+
 interface NewModelForm {
   provider: string;
   modelId: string;
@@ -131,10 +134,12 @@ export function ModelsSection() {
     );
   }
 
-  // Get all custom models across providers
+  // Get all custom models across providers (excluding hidden providers like mux-gateway)
   const getCustomModels = (): Array<{ provider: string; modelId: string; fullId: string }> => {
     const models: Array<{ provider: string; modelId: string; fullId: string }> = [];
     for (const [provider, providerConfig] of Object.entries(config)) {
+      // Skip hidden providers (mux-gateway models are accessed via the cloud toggle, not listed separately)
+      if (HIDDEN_PROVIDERS.has(provider)) continue;
       if (providerConfig.models) {
         for (const modelId of providerConfig.models) {
           models.push({ provider, modelId, fullId: `${provider}:${modelId}` });
@@ -228,7 +233,11 @@ export function ModelsSection() {
                 setEditing((prev) => (prev ? { ...prev, newModelId: value } : null))
               }
               onRemove={() => handleRemoveModel(model.provider, model.modelId)}
-              onToggleGateway={gatewayAvailable ? () => toggleGateway(model.fullId) : undefined}
+              onToggleGateway={
+                gatewayAvailable && isGatewaySupported(model.fullId)
+                  ? () => toggleGateway(model.fullId)
+                  : undefined
+              }
             />
           );
         })}
@@ -251,7 +260,11 @@ export function ModelsSection() {
             isEditing={false}
             isGatewayEnabled={isGatewayEnabled(model.fullId)}
             onSetDefault={() => setDefaultModel(model.fullId)}
-            onToggleGateway={gatewayAvailable ? () => toggleGateway(model.fullId) : undefined}
+            onToggleGateway={
+              gatewayAvailable && isGatewaySupported(model.fullId)
+                ? () => toggleGateway(model.fullId)
+                : undefined
+            }
           />
         ))}
       </div>

src/browser/hooks/useGatewayModels.ts

@@ -5,6 +5,23 @@ import { useProvidersConfig } from "./useProvidersConfig";
 const GATEWAY_MODELS_KEY = "gateway-models";
 const GATEWAY_AVAILABLE_KEY = "gateway-available";
 
+/**
+ * Providers that Mux Gateway supports routing to.
+ * Only models from these providers can use the gateway toggle.
+ */
+const GATEWAY_SUPPORTED_PROVIDERS = new Set(["anthropic", "openai", "google"]);
+
+/**
+ * Check if a model's provider is supported by Mux Gateway.
+ * @param modelId Full model ID (e.g., "anthropic:claude-opus-4-5")
+ */
+export function isGatewaySupported(modelId: string): boolean {
+  const colonIndex = modelId.indexOf(":");
+  if (colonIndex === -1) return false;
+  const provider = modelId.slice(0, colonIndex);
+  return GATEWAY_SUPPORTED_PROVIDERS.has(provider);
+}
+
 /**
  * Check if a model is gateway-enabled (static read, no reactivity)
  */
@@ -21,13 +38,17 @@ export function isGatewayAvailable(): boolean {
 }
 
 /**
- * Transform a model ID to gateway format if gateway is enabled AND available.
- * Falls back to direct provider if gateway is not configured.
+ * Transform a model ID to gateway format if gateway is enabled AND available AND supported.
+ * Falls back to direct provider if:
+ * - Gateway is not configured (no coupon code)
+ * - User hasn't enabled gateway for this model
+ * - Provider is not supported by gateway
+ *
  * Example: "anthropic:claude-opus-4-5" → "mux-gateway:anthropic/claude-opus-4-5"
  */
 export function toGatewayModel(modelId: string): string {
-  // Only transform if user enabled gateway for this model AND gateway is configured
-  if (!isGatewayEnabled(modelId) || !isGatewayAvailable()) {
+  // Only transform if user enabled gateway for this model, gateway is configured, and provider is supported
+  if (!isGatewayEnabled(modelId) || !isGatewayAvailable() || !isGatewaySupported(modelId)) {
     return modelId;
   }
   // Transform provider:model to mux-gateway:provider/model

src/browser/hooks/useModelLRU.ts

@@ -85,6 +85,8 @@ export function useModelLRU() {
         const providerConfig = await api.providers.getConfig();
         const models: string[] = [];
         for (const [provider, config] of Object.entries(providerConfig)) {
+          // Skip mux-gateway - those models are accessed via the cloud toggle, not listed separately
+          if (provider === "mux-gateway") continue;
           if (config.models) {
             for (const modelId of config.models) {
               // Format as provider:modelId for consistency