🤖 fix: keep model display pretty with mux-gateway (#1104)

Fixes a UI regression where enabling mux-gateway caused the bottom-left
model selector to show an ugly raw string (e.g. "Openai/gpt 4o") instead
of the pretty display name.

- Use canonical `baseModel` for display components (ModelSelector +
ModelSettings)
- Add a Storybook interaction regression test:
App/Chat/ModelSelectorPrettyWithGateway

Tests:
- make static-check
- make storybook-build
- make test-storybook

_Generated with `mux`_

Author: ammar-agent

.storybook/mocks/orpc.ts

@@ -6,7 +6,7 @@
 import type { APIClient } from "@/browser/contexts/API";
 import type { FrontendWorkspaceMetadata } from "@/common/types/workspace";
 import type { ProjectConfig } from "@/node/config";
-import type { WorkspaceChatMessage } from "@/common/orpc/types";
+import type { WorkspaceChatMessage, ProvidersConfigMap } from "@/common/orpc/types";
 import type { ChatStats } from "@/common/types/chatStats";
 import { DEFAULT_RUNTIME_CONFIG } from "@/common/constants/workspace";
 import { createAsyncMessageQueue } from "@/common/utils/asyncMessageQueue";
@@ -22,7 +22,7 @@ export interface MockORPCClientOptions {
     script: string
   ) => Promise<{ success: true; output: string; exitCode: number; wall_duration_ms: number }>;
   /** Provider configuration (API keys, base URLs, etc.) */
-  providersConfig?: Record<string, { apiKeySet: boolean; baseUrl?: string; models?: string[] }>;
+  providersConfig?: ProvidersConfigMap;
   /** List of available provider names */
   providersList?: string[];
   /** Mock for projects.remove - return error string to simulate failure */

Makefile

@@ -246,10 +246,10 @@ static-check: lint typecheck fmt-check check-eager-imports check-bench-agent che
 check-bench-agent: ## Verify terminal-bench agent configuration and imports
 	@./scripts/check-bench-agent.sh
 
-lint: node_modules/.installed ## Run ESLint (typecheck runs in separate target)
+lint: node_modules/.installed src/version.ts ## Run ESLint (typecheck runs in separate target)
 	@./scripts/lint.sh
 
-lint-fix: node_modules/.installed ## Run linter with --fix
+lint-fix: node_modules/.installed src/version.ts ## Run linter with --fix
 	@./scripts/lint.sh --fix
 
 ifeq ($(OS),Windows_NT)

eslint.config.mjs

@@ -217,7 +217,7 @@ export default defineConfig([
     files: ["src/**/*.{ts,tsx}"],
     languageOptions: {
       parserOptions: {
-        project: ["./tsconfig.json", "./tsconfig.main.json"],
+        project: ["./tsconfig.json"],
         tsconfigRootDir: import.meta.dirname,
       },
       globals: {

src/browser/components/ChatInput/index.tsx

@@ -1534,7 +1534,7 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
               >
                 <ModelSelector
                   ref={modelSelectorRef}
-                  value={preferredModel}
+                  value={baseModel}
                   onChange={setPreferredModel}
                   recentModels={recentModels}
                   onComplete={() => inputRef.current?.focus()}
@@ -1576,7 +1576,7 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
               </div>
 
               <div className="ml-4 flex items-center" data-component="ModelSettingsGroup">
-                <ModelSettings model={preferredModel || ""} />
+                <ModelSettings model={baseModel || ""} />
               </div>
 
               {preferredModel && (

src/browser/components/ModelSelector.tsx

@@ -208,7 +208,12 @@ export const ModelSelector = forwardRef<ModelSelectorRef, ModelSelectorProps>(
           {gatewayActive && (
             <Tooltip>
               <TooltipTrigger asChild>
-                <GatewayIcon className="text-accent h-3 w-3 shrink-0" active />
+                <GatewayIcon
+                  className="text-accent h-3 w-3 shrink-0"
+                  active
+                  role="img"
+                  aria-label="Using Mux Gateway"
+                />
               </TooltipTrigger>
               <TooltipContent align="center">Using Mux Gateway</TooltipContent>
             </Tooltip>

src/browser/stories/App.chat.stories.tsx

@@ -14,6 +14,8 @@ import {
   createStatusTool,
   createGenericTool,
 } from "./mockFactory";
+import { updatePersistedState } from "@/browser/hooks/usePersistedState";
+import { getModelKey } from "@/common/constants/storage";
 import { setupSimpleChatStory, setupStreamingChatStory } from "./storyHelpers";
 import { within, userEvent, waitFor } from "@storybook/test";
 
@@ -498,3 +500,74 @@ export const ModeHelpTooltip: AppStory = {
     },
   },
 };
+
+/**
+ * Model selector pretty display with mux-gateway enabled.
+ *
+ * Regression test: when gateway is enabled, `useSendMessageOptions().model` becomes
+ * `mux-gateway:provider/model`, but the UI should still display the canonical
+ * provider:model form (e.g. GPT-4o, not \"Openai/gpt 4o\").
+ */
+export const ModelSelectorPrettyWithGateway: AppStory = {
+  render: () => (
+    <AppWithMocks
+      setup={() => {
+        const workspaceId = "ws-gateway-model";
+        const baseModel = "openai:gpt-4o";
+
+        // Ensure the gateway transform actually kicks in (so the regression would reproduce).
+        updatePersistedState(getModelKey(workspaceId), baseModel);
+        updatePersistedState("gateway-enabled", true);
+        updatePersistedState("gateway-available", true);
+        updatePersistedState("gateway-models", [baseModel]);
+
+        return setupSimpleChatStory({
+          workspaceId,
+          messages: [],
+          providersConfig: {
+            "mux-gateway": { apiKeySet: false, couponCodeSet: true },
+          },
+        });
+      }}
+    />
+  ),
+  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+    const canvas = within(canvasElement);
+
+    // Wait for chat input to mount.
+    await canvas.findAllByText("Exec", {}, { timeout: 10000 });
+
+    // With gateway enabled, we should still display the *pretty* model name.
+    await waitFor(() => {
+      canvas.getByText("GPT-4o");
+    });
+
+    // The buggy rendering (mux-gateway:openai/gpt-4o) shows up as "Openai/gpt 4o".
+    const ugly = canvas.queryByText("Openai/gpt 4o");
+    if (ugly) {
+      throw new Error(`Unexpected gateway-formatted model label: ${ugly.textContent ?? "(empty)"}`);
+    }
+
+    // Sanity check that the gateway indicator exists.
+    const gatewayIndicator = canvasElement.querySelector('[aria-label="Using Mux Gateway"]');
+    if (!gatewayIndicator) throw new Error("Gateway indicator not found");
+
+    // Hover to prove the gateway tooltip is wired up (and keep it visible for snapshot).
+    await userEvent.hover(gatewayIndicator);
+    await waitFor(
+      () => {
+        const tooltip = document.querySelector('[role="tooltip"]');
+        if (!tooltip) throw new Error("Tooltip not visible");
+      },
+      { timeout: 2000, interval: 50 }
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Verifies the bottom-left model selector stays pretty (e.g. GPT-4o) even when mux-gateway routing is enabled.",
+      },
+    },
+  },
+};

src/browser/stories/storyHelpers.ts

@@ -6,7 +6,7 @@
  */
 
 import type { FrontendWorkspaceMetadata } from "@/common/types/workspace";
-import type { WorkspaceChatMessage, ChatMuxMessage } from "@/common/orpc/types";
+import type { WorkspaceChatMessage, ChatMuxMessage, ProvidersConfigMap } from "@/common/orpc/types";
 import type { APIClient } from "@/browser/contexts/API";
 import {
   SELECTED_WORKSPACE_KEY,
@@ -153,7 +153,7 @@ export interface SimpleChatSetupOptions {
   projectName?: string;
   messages: ChatMuxMessage[];
   gitStatus?: GitStatusFixture;
-  providersConfig?: Record<string, { apiKeySet: boolean; baseUrl?: string; models?: string[] }>;
+  providersConfig?: ProvidersConfigMap;
   backgroundProcesses?: BackgroundProcessFixture[];
 }
 

tsconfig.main.json

@@ -12,6 +12,7 @@
     "excludeFiles": ["**/*.d.ts.map"]
   },
   "include": [
+    "src/version.ts",
     "src/cli/index.ts",
     "src/cli/server.ts",
     "src/desktop/**/*",