feat: add custom GatewayIcon for model gateway indicator

Replace generic Cloud icon with a dedicated gateway icon showing
data flowing through a central hub (hexagon with arrows).
More distinctive and semantically meaningful for the gateway feature.

Author: ammar-agent

src/browser/components/ModelSelector.tsx

@@ -7,7 +7,8 @@ import React, {
   forwardRef,
 } from "react";
 import { cn } from "@/common/lib/utils";
-import { Cloud, Settings, Star } from "lucide-react";
+import { Settings, Star } from "lucide-react";
+import { GatewayIcon } from "./icons/GatewayIcon";
 import { TooltipWrapper, Tooltip } from "./Tooltip";
 import { useSettings } from "@/browser/contexts/SettingsContext";
 import { useGatewayModels, isGatewaySupported } from "@/browser/hooks/useGatewayModels";
@@ -202,7 +203,7 @@ export const ModelSelector = forwardRef<ModelSelectorRef, ModelSelectorProps>(
         <div ref={containerRef} className="relative flex items-center gap-1">
           {gatewayEnabled && (
             <TooltipWrapper inline>
-              <Cloud className="text-accent h-3 w-3 shrink-0 fill-current" />
+              <GatewayIcon className="text-accent h-3 w-3 shrink-0 fill-current" />
               <Tooltip className="tooltip" align="center">
                 Using Mux Gateway
               </Tooltip>
@@ -290,7 +291,7 @@ export const ModelSelector = forwardRef<ModelSelectorRef, ModelSelectorProps>(
                               isGatewayEnabled(model) ? "Disable Mux Gateway" : "Enable Mux Gateway"
                             }
                           >
-                            <Cloud
+                            <GatewayIcon
                               className={cn("h-3 w-3", isGatewayEnabled(model) && "fill-current")}
                             />
                           </button>

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

@@ -1,5 +1,6 @@
 import React from "react";
-import { Check, Cloud, Pencil, Star, Trash2, X } from "lucide-react";
+import { Check, Pencil, Star, Trash2, X } from "lucide-react";
+import { GatewayIcon } from "@/browser/components/icons/GatewayIcon";
 import { cn } from "@/common/lib/utils";
 import { TooltipWrapper, Tooltip } from "@/browser/components/Tooltip";
 import { ProviderWithIcon } from "@/browser/components/ProviderIcon";
@@ -106,7 +107,9 @@ export function ModelRow(props: ModelRowProps) {
                   )}
                   aria-label={props.isGatewayEnabled ? "Disable Mux Gateway" : "Enable Mux Gateway"}
                 >
-                  <Cloud className={cn("h-3.5 w-3.5", props.isGatewayEnabled && "fill-current")} />
+                  <GatewayIcon
+                    className={cn("h-3.5 w-3.5", props.isGatewayEnabled && "fill-current")}
+                  />
                 </button>
                 <Tooltip className="tooltip" align="center">
                   {props.isGatewayEnabled ? "Using Mux Gateway" : "Use Mux Gateway"}

src/browser/components/icons/GatewayIcon.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+interface GatewayIconProps extends React.SVGProps<SVGSVGElement> {
+  className?: string;
+}
+
+/**
+ * Gateway icon - represents routing through Mux Gateway.
+ * A stylized "relay" symbol showing data passing through a central hub.
+ */
+export function GatewayIcon(props: GatewayIconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      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" />
+    </svg>
+  );
+}