feat: add gateway enabled toggle in Providers settings

- Add global gateway enabled state to localStorage (defaults to true)
- Add toggle switch in Mux Gateway provider section when coupon is set
- Respect global enabled state across all gateway UI elements
- Simplify GatewayIcon to diamond relay symbol

This allows users to disable gateway routing without removing
their coupon code, useful for testing or debugging.

Author: ammar-agent

src/browser/components/ModelSelector.tsx

@@ -33,6 +33,7 @@ export const ModelSelector = forwardRef<ModelSelectorRef, ModelSelectorProps>(
       isEnabled: isGatewayEnabled,
       toggle: toggleGateway,
       gatewayAvailable,
+      gatewayGloballyEnabled,
     } = useGatewayModels();
     const [isEditing, setIsEditing] = useState(false);
     const [inputValue, setInputValue] = useState(value);
@@ -198,7 +199,10 @@ export const ModelSelector = forwardRef<ModelSelectorRef, ModelSelectorProps>(
 
     if (!isEditing) {
       const gatewayEnabled =
-        isGatewayEnabled(value) && gatewayAvailable && isGatewaySupported(value);
+        gatewayGloballyEnabled &&
+        isGatewayEnabled(value) &&
+        gatewayAvailable &&
+        isGatewaySupported(value);
       return (
         <div ref={containerRef} className="relative flex items-center gap-1">
           {gatewayEnabled && (
@@ -270,8 +274,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 and model's provider is supported */}
-                      {gatewayAvailable && isGatewaySupported(model) && (
+                      {/* Gateway toggle - only show when gateway is globally enabled, configured, and model's provider is supported */}
+                      {gatewayGloballyEnabled && gatewayAvailable && isGatewaySupported(model) && (
                         <TooltipWrapper inline>
                           <button
                             type="button"

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

@@ -33,6 +33,7 @@ export function ModelsSection() {
     isEnabled: isGatewayEnabled,
     toggle: toggleGateway,
     gatewayAvailable,
+    gatewayGloballyEnabled,
   } = useGatewayModels();
 
   // Check if a model already exists (for duplicate prevention)
@@ -234,7 +235,7 @@ export function ModelsSection() {
               }
               onRemove={() => handleRemoveModel(model.provider, model.modelId)}
               onToggleGateway={
-                gatewayAvailable && isGatewaySupported(model.fullId)
+                gatewayGloballyEnabled && gatewayAvailable && isGatewaySupported(model.fullId)
                   ? () => toggleGateway(model.fullId)
                   : undefined
               }
@@ -261,7 +262,7 @@ export function ModelsSection() {
             isGatewayEnabled={isGatewayEnabled(model.fullId)}
             onSetDefault={() => setDefaultModel(model.fullId)}
             onToggleGateway={
-              gatewayAvailable && isGatewaySupported(model.fullId)
+              gatewayGloballyEnabled && gatewayAvailable && isGatewaySupported(model.fullId)
                 ? () => toggleGateway(model.fullId)
                 : undefined
             }

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

@@ -5,6 +5,7 @@ import type { ProviderName } from "@/common/constants/providers";
 import { ProviderWithIcon } from "@/browser/components/ProviderIcon";
 import { useAPI } from "@/browser/contexts/API";
 import { useProvidersConfig } from "@/browser/hooks/useProvidersConfig";
+import { useGatewayModels } from "@/browser/hooks/useGatewayModels";
 
 interface FieldConfig {
   key: string;
@@ -69,6 +70,7 @@ function getProviderFields(provider: ProviderName): FieldConfig[] {
 export function ProvidersSection() {
   const { api } = useAPI();
   const { config, updateOptimistically } = useProvidersConfig();
+  const { gatewayAvailable, gatewayGloballyEnabled, toggleGloballyEnabled } = useGatewayModels();
   const [expandedProvider, setExpandedProvider] = useState<string | null>(null);
   const [editingField, setEditingField] = useState<{
     provider: string;
@@ -315,6 +317,31 @@ export function ProvidersSection() {
                     </div>
                   );
                 })}
+
+                {/* Gateway enabled toggle - only for mux-gateway when configured */}
+                {provider === "mux-gateway" && gatewayAvailable && (
+                  <div className="border-border-light flex items-center justify-between border-t pt-3">
+                    <div>
+                      <label className="text-foreground block text-xs font-medium">Enabled</label>
+                      <span className="text-muted text-xs">Route requests through Mux Gateway</span>
+                    </div>
+                    <button
+                      type="button"
+                      onClick={toggleGloballyEnabled}
+                      className={`relative h-5 w-9 rounded-full transition-colors ${
+                        gatewayGloballyEnabled ? "bg-accent" : "bg-border-medium"
+                      }`}
+                      role="switch"
+                      aria-checked={gatewayGloballyEnabled}
+                    >
+                      <span
+                        className={`absolute top-0.5 left-0.5 h-4 w-4 rounded-full bg-white transition-transform ${
+                          gatewayGloballyEnabled ? "translate-x-4" : "translate-x-0"
+                        }`}
+                      />
+                    </button>
+                  </div>
+                )}
               </div>
             )}
           </div>

src/browser/components/icons/GatewayIcon.tsx

@@ -6,7 +6,7 @@ interface GatewayIconProps extends React.SVGProps<SVGSVGElement> {
 
 /**
  * Gateway icon - represents routing through Mux Gateway.
- * A stylized "relay" symbol showing data passing through a central hub.
+ * A simplified relay symbol: arrow passing through a central node.
  */
 export function GatewayIcon(props: GatewayIconProps) {
   return (
@@ -20,14 +20,13 @@ export function GatewayIcon(props: GatewayIconProps) {
       strokeLinejoin="round"
       {...props}
     >
-      {/* Central hexagon hub */}
-      <path d="M12 6l5.196 3v6L12 18l-5.196-3V9z" />
-      {/* Left incoming arrow */}
-      <path d="M2 12h4" />
-      <path d="M4 10l2 2-2 2" />
-      {/* Right outgoing arrow */}
-      <path d="M18 12h4" />
-      <path d="M20 10l2 2-2 2" />
+      {/* Central diamond/node */}
+      <path d="M12 8l4 4-4 4-4-4z" />
+      {/* Input line */}
+      <path d="M4 12h4" />
+      {/* Output arrow */}
+      <path d="M16 12h4" />
+      <path d="M18 10l2 2-2 2" />
     </svg>
   );
 }

src/browser/hooks/useGatewayModels.ts

@@ -4,6 +4,7 @@ import { useProvidersConfig } from "./useProvidersConfig";
 
 const GATEWAY_MODELS_KEY = "gateway-models";
 const GATEWAY_AVAILABLE_KEY = "gateway-available";
+const GATEWAY_ENABLED_KEY = "gateway-enabled";
 
 /**
  * Providers that Mux Gateway supports routing to.
@@ -88,6 +89,20 @@ export function isGatewayAvailable(): boolean {
   return readPersistedState<boolean>(GATEWAY_AVAILABLE_KEY, false);
 }
 
+/**
+ * Check if the gateway is globally enabled (user toggle, defaults to true when available)
+ */
+export function isGatewayGloballyEnabled(): boolean {
+  return readPersistedState<boolean>(GATEWAY_ENABLED_KEY, true);
+}
+
+/**
+ * Set the global gateway enabled state
+ */
+export function setGatewayGloballyEnabled(enabled: boolean): void {
+  updatePersistedState(GATEWAY_ENABLED_KEY, enabled);
+}
+
 /**
  * Transform a model ID to gateway format if gateway is enabled AND available AND supported.
  * Falls back to direct provider if:
@@ -98,8 +113,17 @@ export function isGatewayAvailable(): boolean {
  * 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, gateway is configured, and provider is supported
-  if (!isGatewayEnabled(modelId) || !isGatewayAvailable() || !isGatewaySupported(modelId)) {
+  // Only transform if:
+  // 1. Gateway is globally enabled (user hasn't disabled it)
+  // 2. User enabled gateway for this specific model
+  // 3. Gateway is configured (coupon code set)
+  // 4. Provider is supported by gateway
+  if (
+    !isGatewayGloballyEnabled() ||
+    !isGatewayEnabled(modelId) ||
+    !isGatewayAvailable() ||
+    !isGatewaySupported(modelId)
+  ) {
     return modelId;
   }
   // Transform provider:model to mux-gateway:provider/model
@@ -144,6 +168,11 @@ export function useGatewayModels() {
     false,
     { listener: true }
   );
+  const [gatewayGloballyEnabled, setGatewayGloballyEnabled] = usePersistedState<boolean>(
+    GATEWAY_ENABLED_KEY,
+    true,
+    { listener: true }
+  );
 
   // Sync gateway availability from provider config
   useEffect(() => {
@@ -152,6 +181,10 @@ export function useGatewayModels() {
     setGatewayAvailable(available);
   }, [config, setGatewayAvailable]);
 
+  const toggleGloballyEnabled = useCallback(() => {
+    setGatewayGloballyEnabled((prev) => !prev);
+  }, [setGatewayGloballyEnabled]);
+
   const isEnabled = useCallback(
     (modelId: string) => gatewayModels.includes(modelId),
     [gatewayModels]
@@ -169,5 +202,12 @@ export function useGatewayModels() {
     [setGatewayModels]
   );
 
-  return { gatewayModels, isEnabled, toggle, gatewayAvailable };
+  return {
+    gatewayModels,
+    isEnabled,
+    toggle,
+    gatewayAvailable,
+    gatewayGloballyEnabled,
+    toggleGloballyEnabled,
+  };
 }