fix(ui): show selected agent default model

steipete · hyspacex · steipete · commit 07b81bf1088f · 2026-07-06T04:27:55.000-04:00
Co-authored-by: Harry Xie &lt;harryhsieh963@yahoo.com&gt;
diff --git a/ui/src/e2e/chat-flow.e2e.test.ts b/ui/src/e2e/chat-flow.e2e.test.ts
@@ -1440,6 +1440,104 @@ describeControlUiE2e("Control UI mocked Gateway E2E", () => {
     }
   });
 
+  it("restores the selected agent model after clearing a session override", async () => {
+    const context = await newBrowserContext({
+      locale: "en-US",
+      serviceWorkers: "block",
+      viewport: { height: 900, width: 1280 },
+    });
+    const page = await context.newPage();
+    const agentsList = {
+      agents: [
+        {
+          id: "ops",
+          model: { primary: "anthropic/claude-opus-4-5" },
+          name: "Operations",
+        },
+      ],
+      defaultId: "ops",
+      mainKey: "main",
+      scope: "agent",
+    };
+    const sessionsList = {
+      count: 1,
+      defaults: {
+        contextTokens: null,
+        model: "gpt-5.5",
+        modelProvider: "openai",
+      },
+      path: "",
+      sessions: [
+        {
+          key: "agent:ops:session-a",
+          kind: "direct",
+          label: "Operations",
+          updatedAt: Date.now(),
+        },
+      ],
+      ts: Date.now(),
+    };
+    const gateway = await installMockGateway(page, {
+      assistantAgentId: "ops",
+      defaultAgentId: "ops",
+      methodResponses: {
+        "agents.list": agentsList,
+        "chat.startup": {
+          agentsList,
+          messages: [],
+          metadata: {
+            models: [
+              { id: "gpt-5.5", name: "GPT-5.5", provider: "openai" },
+              {
+                id: "claude-opus-4-5",
+                name: "Claude Opus 4.5",
+                provider: "anthropic",
+              },
+            ],
+          },
+          sessionId: "control-ui-e2e-session",
+          thinkingLevel: null,
+        },
+        "sessions.list": sessionsList,
+      },
+      models: [
+        { id: "gpt-5.5", name: "GPT-5.5", provider: "openai" },
+        { id: "claude-opus-4-5", name: "Claude Opus 4.5", provider: "anthropic" },
+      ],
+      sessionKey: "agent:ops:session-a",
+    });
+
+    try {
+      await page.goto(`${server.baseUrl}chat`);
+      const main = page.getByRole("main");
+      const modelSelect = main.locator('[data-chat-model-select="true"]').first();
+      await modelSelect.waitFor({ state: "visible", timeout: 10_000 });
+      expect(await modelSelect.textContent()).toContain("Claude Opus 4.5");
+      expect(await modelSelect.getAttribute("data-chat-select-value")).toBe("");
+
+      await modelSelect.click();
+      await main.locator('[data-chat-model-option="openai/gpt-5.5"]').click();
+      const firstPatch = await gateway.waitForRequest("sessions.patch");
+      expect(requireRecord(firstPatch.params)).toMatchObject({
+        key: "agent:ops:session-a",
+        model: "openai/gpt-5.5",
+      });
+      expect(await modelSelect.textContent()).toContain("GPT-5.5");
+
+      await modelSelect.click();
+      await main.locator('[data-chat-model-option=""]').click();
+      const patches = await waitForRequests(gateway, "sessions.patch", 2);
+      expect(requireRecord(patches[1]?.params)).toMatchObject({
+        key: "agent:ops:session-a",
+        model: null,
+      });
+      expect(await modelSelect.textContent()).toContain("Claude Opus 4.5");
+      expect(await modelSelect.getAttribute("data-chat-select-value")).toBe("");
+    } finally {
+      await closeBrowserContext(context);
+    }
+  });
+
   it("clears hover marquee state when a session switch reshuffles recent rows", async () => {
     const context = await newBrowserContext({
       locale: "en-US",
diff --git a/ui/src/lib/chat/model-select-state.test.ts b/ui/src/lib/chat/model-select-state.test.ts
@@ -197,6 +197,34 @@ describe("chat-model-select-state", () => {
     ]);
   });
 
+  it("uses the active agent model for the default label", () => {
+    const state = createChatModelState({
+      agentDefaultModel: "anthropic/claude-opus-4-5",
+      chatModelCatalog: createModelCatalog(
+        {
+          id: "gpt-5.5",
+          name: "GPT-5.5",
+          provider: "openai",
+        },
+        {
+          id: "claude-opus-4-5",
+          name: "Claude Opus 4.5",
+          provider: "anthropic",
+        },
+      ),
+      sessionsResult: createSessionsListResult({
+        defaultsModel: "gpt-5.5",
+        defaultsProvider: "openai",
+        model: "claude-opus-4-5",
+        modelProvider: "anthropic",
+      }),
+    });
+
+    const resolved = resolveChatModelSelectState(state);
+    expect(resolved.defaultModel).toBe("anthropic/claude-opus-4-5");
+    expect(resolved.defaultLabel).toBe("Default (Claude Opus 4.5)");
+  });
+
   it("disambiguates duplicate friendly names in picker options and default labels", () => {
     const state = createChatModelState({
       chatModelCatalog: createModelCatalog(
diff --git a/ui/src/lib/chat/model-select-state.ts b/ui/src/lib/chat/model-select-state.ts
@@ -17,6 +17,7 @@ import {
 } from "./model-ref.ts";
 
 type ChatModelSelectStateInput = {
+  agentDefaultModel?: string;
   chatModelCatalog: ModelCatalogEntry[];
   modelOverrides: Readonly<Record<string, string | null | undefined>>;
   sessionKey: string;
@@ -87,6 +88,14 @@ export function resolveChatModelOverrideValue(state: ChatModelSelectStateInput):
 }
 
 function resolveDefaultModelValue(state: ChatModelSelectStateInput): string {
+  const agentDefault = resolvePreferredServerChatModelValue(
+    state.agentDefaultModel,
+    undefined,
+    state.chatModelCatalog ?? [],
+  );
+  if (agentDefault) {
+    return agentDefault;
+  }
   return resolvePreferredServerChatModelValue(
     state.sessionsResult?.defaults?.model,
     state.sessionsResult?.defaults?.modelProvider,
diff --git a/ui/src/pages/chat/chat-page.ts b/ui/src/pages/chat/chat-page.ts
@@ -612,6 +612,9 @@ export class ChatPage extends LitElement {
       return html`<main class="app-shell app-shell--booting" aria-busy="true"></main>`;
     }
     const currentAgentId = resolveChatAgentId(state);
+    const agentDefaultModel = this.context.agents.state.agentsList?.agents.find(
+      (agent) => agent.id === currentAgentId,
+    )?.model?.primary;
     const selectedSessionArchived =
       state.selectedChatSessionArchived ||
       state.sessionsResult?.sessions.some(
@@ -672,6 +675,7 @@ export class ChatPage extends LitElement {
         manualRefreshInFlight: state.chatManualRefreshInFlight,
         model: {
           activeRunId: state.chatRunId,
+          agentDefaultModel,
           connected: state.connected,
           gatewayAvailable: Boolean(state.client),
           loading: state.chatLoading,
diff --git a/ui/src/pages/chat/components/chat-model-controls.ts b/ui/src/pages/chat/components/chat-model-controls.ts
@@ -18,6 +18,7 @@ import {
 
 export type ChatModelControlsProps = {
   activeRunId: string | null;
+  agentDefaultModel?: string;
   connected: boolean;
   gatewayAvailable: boolean;
   loading: boolean;
@@ -40,6 +41,7 @@ export function renderChatModelControls(props: ChatModelControlsProps) {
     defaultLabel,
     options: selectOptions,
   } = resolveChatModelSelectState({
+    agentDefaultModel: props.agentDefaultModel,
     chatModelCatalog: props.modelCatalog,
     modelOverrides: props.modelOverrides ?? {},
     sessionKey: props.sessionKey,
