fix: fallback to direct provider when gateway not configured

- Track gateway availability (couponCodeSet) in localStorage
- Only transform to gateway format when gateway is both enabled AND available
- Hide cloud icon toggle when gateway provider is not configured
- Cloud icon only shows in model selector when gateway is actually active

Author: ammar-agent

src/browser/components/ModelSelector.tsx

@@ -28,7 +28,11 @@ export interface ModelSelectorRef {
 export const ModelSelector = forwardRef<ModelSelectorRef, ModelSelectorProps>(
   ({ value, onChange, recentModels, onComplete, defaultModel, onSetDefaultModel }, ref) => {
     const { open: openSettings } = useSettings();
-    const { isEnabled: isGatewayEnabled, toggle: toggleGateway } = useGatewayModels();
+    const {
+      isEnabled: isGatewayEnabled,
+      toggle: toggleGateway,
+      gatewayAvailable,
+    } = useGatewayModels();
     const [isEditing, setIsEditing] = useState(false);
     const [inputValue, setInputValue] = useState(value);
     const [error, setError] = useState<string | null>(null);
@@ -192,7 +196,7 @@ export const ModelSelector = forwardRef<ModelSelectorRef, ModelSelectorProps>(
     }, [highlightedIndex]);
 
     if (!isEditing) {
-      const gatewayEnabled = isGatewayEnabled(value);
+      const gatewayEnabled = isGatewayEnabled(value) && gatewayAvailable;
       return (
         <div ref={containerRef} className="relative flex items-center gap-1">
           {gatewayEnabled && (
@@ -264,34 +268,36 @@ 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 */}
-                      <TooltipWrapper inline>
-                        <button
-                          type="button"
-                          onMouseDown={(e) => e.preventDefault()}
-                          onClick={(e) => {
-                            e.preventDefault();
-                            e.stopPropagation();
-                            toggleGateway(model);
-                          }}
-                          className={cn(
-                            "flex items-center justify-center rounded-sm border px-1 py-0.5 transition-colors duration-150",
-                            isGatewayEnabled(model)
-                              ? "text-accent border-accent/40"
-                              : "text-muted-light border-border-light/40 hover:border-foreground/60 hover:text-foreground"
-                          )}
-                          aria-label={
-                            isGatewayEnabled(model) ? "Disable Mux Gateway" : "Enable Mux Gateway"
-                          }
-                        >
-                          <Cloud
-                            className={cn("h-3 w-3", isGatewayEnabled(model) && "fill-current")}
-                          />
-                        </button>
-                        <Tooltip className="tooltip" align="center">
-                          {isGatewayEnabled(model) ? "Using Mux Gateway" : "Use Mux Gateway"}
-                        </Tooltip>
-                      </TooltipWrapper>
+                      {/* Gateway toggle - only show when gateway is configured */}
+                      {gatewayAvailable && (
+                        <TooltipWrapper inline>
+                          <button
+                            type="button"
+                            onMouseDown={(e) => e.preventDefault()}
+                            onClick={(e) => {
+                              e.preventDefault();
+                              e.stopPropagation();
+                              toggleGateway(model);
+                            }}
+                            className={cn(
+                              "flex items-center justify-center rounded-sm border px-1 py-0.5 transition-colors duration-150",
+                              isGatewayEnabled(model)
+                                ? "text-accent border-accent/40"
+                                : "text-muted-light border-border-light/40 hover:border-foreground/60 hover:text-foreground"
+                            )}
+                            aria-label={
+                              isGatewayEnabled(model) ? "Disable Mux Gateway" : "Enable Mux Gateway"
+                            }
+                          >
+                            <Cloud
+                              className={cn("h-3 w-3", isGatewayEnabled(model) && "fill-current")}
+                            />
+                          </button>
+                          <Tooltip className="tooltip" align="center">
+                            {isGatewayEnabled(model) ? "Using Mux Gateway" : "Use Mux Gateway"}
+                          </Tooltip>
+                        </TooltipWrapper>
+                      )}
                       {/* Default model toggle */}
                       {onSetDefaultModel && (
                         <TooltipWrapper inline>

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

@@ -26,7 +26,11 @@ export function ModelsSection() {
   const [editing, setEditing] = useState<EditingState | null>(null);
   const [error, setError] = useState<string | null>(null);
   const { defaultModel, setDefaultModel } = useModelLRU();
-  const { isEnabled: isGatewayEnabled, toggle: toggleGateway } = useGatewayModels();
+  const {
+    isEnabled: isGatewayEnabled,
+    toggle: toggleGateway,
+    gatewayAvailable,
+  } = useGatewayModels();
 
   // Check if a model already exists (for duplicate prevention)
   const modelExists = useCallback(
@@ -224,7 +228,7 @@ export function ModelsSection() {
                 setEditing((prev) => (prev ? { ...prev, newModelId: value } : null))
               }
               onRemove={() => handleRemoveModel(model.provider, model.modelId)}
-              onToggleGateway={() => toggleGateway(model.fullId)}
+              onToggleGateway={gatewayAvailable ? () => toggleGateway(model.fullId) : undefined}
             />
           );
         })}
@@ -247,7 +251,7 @@ export function ModelsSection() {
             isEditing={false}
             isGatewayEnabled={isGatewayEnabled(model.fullId)}
             onSetDefault={() => setDefaultModel(model.fullId)}
-            onToggleGateway={() => toggleGateway(model.fullId)}
+            onToggleGateway={gatewayAvailable ? () => toggleGateway(model.fullId) : undefined}
           />
         ))}
       </div>

src/browser/hooks/useGatewayModels.ts

@@ -1,7 +1,9 @@
-import { useCallback } from "react";
+import { useCallback, useEffect } from "react";
 import { usePersistedState, readPersistedState, updatePersistedState } from "./usePersistedState";
+import { useProvidersConfig } from "./useProvidersConfig";
 
 const GATEWAY_MODELS_KEY = "gateway-models";
+const GATEWAY_AVAILABLE_KEY = "gateway-available";
 
 /**
  * Check if a model is gateway-enabled (static read, no reactivity)
@@ -12,11 +14,20 @@ export function isGatewayEnabled(modelId: string): boolean {
 }
 
 /**
- * Transform a model ID to gateway format if gateway is enabled for it.
+ * Check if the gateway provider is available (has coupon code configured)
+ */
+export function isGatewayAvailable(): boolean {
+  return readPersistedState<boolean>(GATEWAY_AVAILABLE_KEY, false);
+}
+
+/**
+ * Transform a model ID to gateway format if gateway is enabled AND available.
+ * Falls back to direct provider if gateway is not configured.
  * Example: "anthropic:claude-opus-4-5" → "mux-gateway:anthropic/claude-opus-4-5"
  */
 export function toGatewayModel(modelId: string): string {
-  if (!isGatewayEnabled(modelId)) {
+  // Only transform if user enabled gateway for this model AND gateway is configured
+  if (!isGatewayEnabled(modelId) || !isGatewayAvailable()) {
     return modelId;
   }
   // Transform provider:model to mux-gateway:provider/model
@@ -47,11 +58,27 @@ export function toggleGatewayModel(modelId: string): void {
 /**
  * Hook to manage which models use the Mux Gateway.
  * Returns reactive state and toggle function.
+ *
+ * Also syncs gateway availability from provider config to localStorage
+ * so that toGatewayModel() can check it synchronously.
  */
 export function useGatewayModels() {
+  const { config } = useProvidersConfig();
   const [gatewayModels, setGatewayModels] = usePersistedState<string[]>(GATEWAY_MODELS_KEY, [], {
     listener: true,
   });
+  const [gatewayAvailable, setGatewayAvailable] = usePersistedState<boolean>(
+    GATEWAY_AVAILABLE_KEY,
+    false,
+    { listener: true }
+  );
+
+  // Sync gateway availability from provider config
+  useEffect(() => {
+    if (!config) return;
+    const available = config["mux-gateway"]?.couponCodeSet ?? false;
+    setGatewayAvailable(available);
+  }, [config, setGatewayAvailable]);
 
   const isEnabled = useCallback(
     (modelId: string) => gatewayModels.includes(modelId),
@@ -70,5 +97,5 @@ export function useGatewayModels() {
     [setGatewayModels]
   );
 
-  return { gatewayModels, isEnabled, toggle };
+  return { gatewayModels, isEnabled, toggle, gatewayAvailable };
 }