fix(app): align desktop agent and model switching (#47286)

Co-authored-by: nexxeln <95541290+nexxeln@users.noreply.github.com>
Co-authored-by: Brendonovich <14191578+Brendonovich@users.noreply.github.com>

packages/app/e2e/performance/unit/mock-server.test.ts

@@ -1,6 +1,25 @@
 import { expect, test } from "bun:test"
 import type { Page, Route } from "@playwright/test"
-import { mockOpenCodeServer } from "../../utils/mock-server"
+import { createMockServerHandler, mockOpenCodeServer } from "../../utils/mock-server"
+
+test("serves an empty config document list for composer defaults", async () => {
+  const server = createMockServerHandler({
+    provider: {},
+    directory: "C:/OpenCode",
+    project: {},
+    sessions: [],
+    pageMessages: () => ({ items: [] }),
+  })
+  try {
+    const response = await server.handler(
+      new Request("http://localhost/api/config?location%5Bdirectory%5D=C%3A%2FOpenCode"),
+    )
+    expect(response.status).toBe(200)
+    expect(await response.json()).toEqual([])
+  } finally {
+    await server.dispose()
+  }
+})
 
 test("applies message latency after a list response gate is released", async () => {
   const events: string[] = []

packages/app/e2e/regression/remote-session-settings.spec.ts

@@ -342,6 +342,7 @@ async function mockServers(
     if (route.request().method() === "GET" && sessionPermission)
       return json(route, { data: options.sessionPending?.[sessionPermission[1]!] ?? [] })
     if (requestDirectory && requestDirectory !== directory) return json(route, { name: "InvalidDirectory" }, 500)
+    if (url.pathname === "/api/config") return json(route, [])
     if (url.pathname === "/api/provider")
       return json(route, {
         location: { directory },

packages/app/e2e/regression/tab-navigate-mousedown.spec.ts

@@ -602,6 +602,7 @@ async function mockServer(page: Page) {
     if (url.origin !== server) return route.fallback()
     if (url.pathname === `/api/session/${unresolvedSessionID}`) return new Promise(() => {})
     if (url.pathname === "/api/event") return sse(route)
+    if (url.pathname === "/api/config") return json(route, [])
     if (url.pathname === "/api/session")
       return json(route, { data: sessions.map((session) => currentSession(session)), cursor: {} })
     if (url.pathname === "/api/session/active") return json(route, { data: {} })

packages/app/e2e/utils/mock-api.ts

@@ -39,6 +39,7 @@ const Group = HttpApiGroup.make("mock")
     }),
   )
   .add(HttpApiEndpoint.get("reference", "/api/reference", { success: Json }))
+  .add(HttpApiEndpoint.get("config", "/api/config", { success: Json }))
   .add(HttpApiEndpoint.get("agent", "/api/agent", { success: Json }))
   .add(HttpApiEndpoint.get("provider", "/api/provider", { success: Json }))
   .add(HttpApiEndpoint.get("model", "/api/model", { success: Json }))

packages/app/e2e/utils/mock-server.ts

@@ -207,6 +207,7 @@ function mockHandlers(config: MockServerConfig, state: { cursors: Map<string, st
       )
       .handleAll({
         health: () => Effect.succeed({ healthy: true, version: "2.0.0", pid: 1 }),
+        config: () => Effect.succeed([]),
         reference: () =>
           Effect.succeed({
             location: {

packages/app/src/composer/selection.ts

@@ -1,4 +1,5 @@
-import { batch, type Accessor, createMemo, startTransition } from "solid-js"
+import { batch, type Accessor, createEffect, createMemo, on } from "solid-js"
+import { createStore } from "solid-js/store"
 import type { ComposerControls } from "./adapter"
 import { useLayout } from "@/shell/state/layout"
 import { useLocal, type ModelKey, type ModelSelection } from "@/providers/models/selection"
@@ -9,6 +10,7 @@ import { normalizeAgentList } from "@/runtime/server/global-sync/utils"
 import { useModels } from "@/providers/models/models"
 import { cycleModelVariant, getConfiguredAgentVariant, resolveModelVariant } from "@/providers/models/variant"
 import { useComposerState } from "./persistence"
+import { useConfiguredModel } from "@/providers/models/configured"
 
 export function createComposerControls(input: { sessionKey: Accessor<string>; model?: ModelSelection }) {
   const layout = useLayout()
@@ -31,6 +33,7 @@ export function createComposerControls(input: { sessionKey: Accessor<string>; mo
         selection: input.model ?? local.model,
         paid: providers.paid().length > 0,
         loading:
+          !(input.model ?? local.model).ready() ||
           (local.agent.visible() && data.location.agent.list({ directory: sdk().directory }) === undefined) ||
           !providers.ready(),
       },
@@ -43,15 +46,31 @@ export function createComposerControls(input: { sessionKey: Accessor<string>; mo
 }
 
 export function createComposerModelSelection(input: {
-  agent: () => { model?: ModelKey; variant?: string } | undefined
+  agent: () => { name: string; model?: ModelKey; variant?: string } | undefined
 }) {
   const sdk = useWorkspaceLocation()
   const models = useModels()
+  const local = useLocal()
   const prompt = useComposerState()
+  const configuredModel = useConfiguredModel()
+  const [remembered, setRemembered] = createStore<Record<string, ModelKey | undefined>>({})
+  createEffect(
+    on(
+      () => input.agent()?.name,
+      (name, previous) => {
+        if (!name || !previous || name === previous) return
+        batch(() => {
+          const model = prompt.model.current()
+          setRemembered(previous, model ? { providerID: model.providerID, modelID: model.modelID } : undefined)
+          prompt.model.set(remembered[name] ? { ...remembered[name] } : undefined)
+        })
+      },
+    ),
+  )
   const providers = useProviders(() => sdk().directory)
   const connected = createMemo(() => new Set(providers.connected().map((item) => item.id)))
 
-  const valid = (model: ModelKey) => {
+  const valid = (model: Pick<ModelKey, "providerID" | "modelID">) => {
     const provider = providers.all().get(model.providerID)
     return !!provider?.models[model.modelID] && connected().has(model.providerID)
   }
@@ -62,7 +81,8 @@ export function createComposerModelSelection(input: {
       return modelID ? [{ providerID: provider.id, modelID }] : []
     })[0]
   const current = () => {
-    const key = [prompt.model.current(), input.agent()?.model, recent(), fallback()].find(
+    if (!configuredModel.ready()) return
+    const key = [prompt.model.current(), input.agent()?.model, configuredModel(), recent(), fallback()].find(
       (item): item is ModelKey => !!item && valid(item),
     )
     return key ? models.find(key) : undefined
@@ -74,7 +94,9 @@ export function createComposerModelSelection(input: {
       .filter((item): item is NonNullable<typeof item> => !!item),
   )
   const selection = {
-    ready: models.ready,
+    trackSessionCommit: local.model.trackSessionCommit,
+    remembered: () => Object.fromEntries(Object.entries(remembered).map(([name, model]) => [name, { model }])),
+    ready: Object.assign(() => models.ready() && configuredModel.ready(), { promise: models.ready.promise }),
     current,
     recent: recentModels,
     list: models.list,
@@ -83,19 +105,24 @@ export function createComposerModelSelection(input: {
       const item = current()
       if (!item) return
       const index = items.findIndex((entry) => entry.provider.id === item.provider.id && entry.id === item.id)
-      if (index === -1) return
-      const next = items[(index + direction + items.length) % items.length]
+      const next =
+        items[
+          index === -1 ? (direction === 1 ? 0 : items.length - 1) : (index + direction + items.length) % items.length
+        ]
       if (next) selection.set({ providerID: next.provider.id, modelID: next.id })
     },
     set(item: ModelKey | undefined, options?: { recent?: boolean }) {
-      void startTransition(() =>
-        batch(() => {
-          prompt.model.set(item ? { ...item, variant: prompt.model.current()?.variant } : undefined)
-          if (!item) return
-          models.setVisibility(item, true)
-          if (options?.recent) models.recent.push(item)
-        }),
-      )
+      batch(() => {
+        if (item && !valid(item)) return
+        const previous = current()
+        const same = item && previous?.provider.id === item.providerID && previous.id === item.modelID
+        prompt.model.set(
+          item ? { ...item, variant: same ? (selection.variant.current() ?? null) : undefined } : undefined,
+        )
+        if (!item) return
+        models.setVisibility(item, true)
+        if (options?.recent) models.recent.push(item)
+      })
     },
     visible: models.visible,
     setVisibility: models.setVisibility,
@@ -104,38 +131,41 @@ export function createComposerModelSelection(input: {
         const item = input.agent()
         const model = current()
         if (!item || !model) return
-        return getConfiguredAgentVariant({
-          agent: { model: item.model, variant: item.variant },
-          model: { providerID: model.provider.id, modelID: model.id, variants: model.variants },
-        })
+        const global = configuredModel()
+        return (
+          getConfiguredAgentVariant({
+            agent: { model: item.model, variant: item.variant },
+            model: { providerID: model.provider.id, modelID: model.id, variants: model.variants },
+          }) ??
+          getConfiguredAgentVariant({
+            agent: { model: global, variant: global?.variant },
+            model: { providerID: model.provider.id, modelID: model.id, variants: model.variants },
+          })
+        )
       },
       selected() {
-        return prompt.model.current()?.variant
+        const model = prompt.model.current()
+        return model && valid(model) ? model.variant : undefined
       },
       current() {
-        const resolved = resolveModelVariant({
+        const model = current()
+        return resolveModelVariant({
           variants: this.list(),
           selected: this.selected(),
           configured: this.configured(),
+          preferred: model ? models.variant.get({ providerID: model.provider.id, modelID: model.id }) : undefined,
         })
-        if (resolved) return resolved
-        const model = current()
-        if (!model) return
-        const saved = models.variant.get({ providerID: model.provider.id, modelID: model.id })
-        if (saved && this.list().includes(saved)) return saved
       },
       list() {
         return Object.keys(current()?.variants ?? {})
       },
       set(value: string | undefined) {
-        void startTransition(() =>
-          batch(() => {
-            const model = current()
-            if (!model) return
-            prompt.model.set({ providerID: model.provider.id, modelID: model.id, variant: value ?? null })
-            models.variant.set({ providerID: model.provider.id, modelID: model.id }, value)
-          }),
-        )
+        batch(() => {
+          const model = current()
+          if (!model) return
+          prompt.model.set({ providerID: model.provider.id, modelID: model.id, variant: value ?? null })
+          models.variant.set({ providerID: model.provider.id, modelID: model.id }, value)
+        })
       },
       cycle() {
         const variants = this.list()
@@ -143,13 +173,13 @@ export function createComposerModelSelection(input: {
         this.set(
           cycleModelVariant({
             variants,
-            selected: this.selected(),
-            configured: this.configured(),
+            selected: this.current() ?? null,
+            configured: undefined,
           }),
         )
       },
     },
-  } satisfies ModelSelection
+  }
 
-  return selection
+  return selection satisfies ModelSelection
 }

packages/app/src/composer/submit.test.ts

@@ -91,6 +91,8 @@ function session(input: {
   admitted?: (messageID: string) => boolean
   shell?: () => Promise<unknown>
   command?: ComposerSession["api"]["command"]
+  switchAgent?: ComposerSession["api"]["switchAgent"]
+  switchModel?: ComposerSession["api"]["switchModel"]
 }): ComposerSession {
   return {
     id: "session-1",
@@ -99,12 +101,16 @@ function session(input: {
     current: input.current ?? (() => undefined),
     admitted: input.admitted ?? (() => false),
     api: {
-      switchAgent: async () => {
-        input.calls.push("switch-agent")
-      },
-      switchModel: async () => {
-        input.calls.push("switch-model")
-      },
+      switchAgent:
+        input.switchAgent ??
+        (async () => {
+          input.calls.push("switch-agent")
+        }),
+      switchModel:
+        input.switchModel ??
+        (async () => {
+          input.calls.push("switch-model")
+        }),
       shell: input.shell ?? (async () => undefined),
       command: input.command ?? (async () => undefined),
     },
@@ -122,6 +128,146 @@ function session(input: {
 }
 
 describe("Composer submission", () => {
+  test("applies the captured agent and model before a custom command without passing over its overrides", async () => {
+    const state = createMemoryComposerState({ prompt: "/review changes" }).capture()
+    const calls: string[] = []
+    const selected = controls()
+    const agent = Promise.withResolvers<void>()
+    const started = Promise.withResolvers<void>()
+    const committed = Promise.withResolvers<void>()
+    const completed = Promise.withResolvers<void>()
+    const target = session({
+      calls,
+      prompt: async () => {
+        throw new Error("command must not call prompt")
+      },
+      switchAgent: async (request) => {
+        expect(request.agent).toBe("build")
+        calls.push("agent")
+        started.resolve()
+        await agent.promise
+      },
+      switchModel: async (request) => {
+        expect(request.model).toEqual({ providerID: "provider-1", id: "model-1", variant: "balanced" })
+        calls.push("model")
+        await committed.promise
+      },
+      command: async (request) => {
+        expect(request).toMatchObject({ command: "review", text: "changes", delivery: "steer" })
+        expect(request).not.toHaveProperty("model")
+        expect(request).not.toHaveProperty("agent")
+        calls.push("command")
+        completed.resolve()
+      },
+    })
+    selected.model.selection = {
+      ...selection,
+      trackSessionCommit: (_id, value) => {
+        expect(value).toEqual({
+          agent: "build",
+          model: { providerID: "provider-1", modelID: "model-1" },
+          variant: "balanced",
+        })
+        calls.push("track")
+        return () => calls.push("cancel")
+      },
+    }
+    const adapter: ActiveComposerAdapter = {
+      kind: "active-session",
+      state,
+      ready: () => true,
+      controls: () => selected,
+      working: () => false,
+      session: () => target,
+      interrupt: async () => undefined,
+      submitted() {},
+      setEditor() {},
+    }
+    await submitInput(adapter, undefined, "normal", () => [{ name: "review" }]).submit(new Event("submit"))
+    await started.promise
+    expect(calls).toEqual(["track", "agent"])
+    selected.agents.current = "plan"
+    selected.model.selection = { ...selection, variant: { ...selection.variant, current: () => "high" } }
+    agent.resolve()
+    committed.resolve()
+    await completed.promise
+    expect(calls).toEqual(["track", "agent", "model", "command"])
+  })
+
+  test("commits the model even when cached session state already matches", async () => {
+    const state = createMemoryComposerState({ prompt: "continue" }).capture()
+    const calls: string[] = []
+    const done = Promise.withResolvers<void>()
+    const target = session({
+      calls,
+      current: () => ({ agent: "build", model: { providerID: "provider-1", id: "model-1", variant: "balanced" } }),
+      prompt: async () => done.resolve(),
+    })
+    const adapter: ActiveComposerAdapter = {
+      kind: "active-session",
+      state,
+      ready: () => true,
+      controls,
+      working: () => false,
+      session: () => target,
+      interrupt: async () => undefined,
+      submitted() {},
+      setEditor() {},
+    }
+    await submitInput(adapter).submit(new Event("submit"))
+    await done.promise
+    expect(calls).toEqual(["switch-model", "prompt"])
+  })
+
+  test("cancels selection tracking and does not execute a command when selection fails", async () => {
+    const state = createMemoryComposerState({ prompt: "/review changes" }).capture()
+    const calls: string[] = []
+    const selected = controls()
+    const failed = Promise.withResolvers<unknown>()
+    const error = new Error("model unavailable")
+    const target = session({
+      calls,
+      prompt: async () => {
+        calls.push("prompt")
+      },
+      switchModel: async () => {
+        throw error
+      },
+      command: async () => {
+        calls.push("command")
+      },
+    })
+    selected.model.selection = {
+      ...selection,
+      trackSessionCommit: () => {
+        calls.push("track")
+        return () => {
+          calls.push("cancel")
+        }
+      },
+    }
+    const adapter: ActiveComposerAdapter = {
+      kind: "active-session",
+      state,
+      ready: () => true,
+      controls: () => selected,
+      working: () => false,
+      session: () => target,
+      interrupt: async () => undefined,
+      submitted() {},
+      setEditor() {},
+    }
+    await submitInput(
+      adapter,
+      { missingSelection() {}, failed: (_kind, error) => failed.resolve(error) },
+      "normal",
+      () => [{ name: "review" }],
+    ).submit(new Event("submit"))
+    expect(await failed.promise).toBe(error)
+    expect(calls).toEqual(["track", "switch-agent", "cancel"])
+    expect(state.current()[0]).toMatchObject({ content: "/review changes" })
+  })
+
   test("submits a slash skill with its trailing text and attachments", async () => {
     const state = createMemoryComposerState({ prompt: "/show-me explain " }).capture()
     state.set([

packages/app/src/composer/submit.ts

@@ -11,6 +11,7 @@ import { createComposerSubmission } from "./submission-state"
 import { buildPromptRequest } from "./request"
 import { setCursorPosition } from "./editor/dom"
 import { blobDataUrl } from "@/runtime/persistence/drafts"
+import type { ModelSelection } from "@/providers/models/selection"
 
 const submitting = new WeakSet<object>()
 
@@ -88,7 +89,7 @@ export function createComposerSubmit(input: ComposerSubmitInput) {
         session.handoff?.set(handoffMessage(value))
         const optimisticBusy = !input.adapter.working()
         if (optimisticBusy) session.data.session.setStatus(session.id, "running")
-        const sending = sendPrompt(session, value).then(
+        const sending = sendPrompt(session, value, input.adapter.controls().model.selection.trackSessionCommit).then(
           () => ({ ok: true as const }),
           (error) => ({ ok: false as const, error }),
         )
@@ -124,9 +125,12 @@ export function createComposerSubmit(input: ComposerSubmitInput) {
         // Commands always steer: the server applies a command's configured
         // agent and model immediately at admission, so queueing one would
         // reconfigure the turn it is supposed to wait behind.
-        void sendCommand(session, { ...value, delivery: "steer" }, command).catch((error) =>
-          failSubmission(input, session, "command", error, restore, value.id),
-        )
+        void sendCommand(
+          session,
+          { ...value, delivery: "steer" },
+          command,
+          input.adapter.controls().model.selection.trackSessionCommit,
+        ).catch((error) => failSubmission(input, session, "command", error, restore, value.id))
         return
       }
     } finally {
@@ -315,8 +319,10 @@ async function sendCommand(
   session: ComposerSession,
   value: ComposerSubmission,
   command: { command: string; arguments: string },
+  track?: ModelSelection["trackSessionCommit"],
 ) {
   const request = await buildSubmissionRequest(session, value)
+  await applySelection(session, value.selection, track)
   await session.api.command({
     sessionID: session.id,
     command: command.command,
@@ -328,7 +334,33 @@ async function sendCommand(
   })
 }
 
-async function sendPrompt(session: ComposerSession, value: ComposerSubmission) {
+async function applySelection(
+  session: ComposerSession,
+  selection: ComposerSelection,
+  track?: ModelSelection["trackSessionCommit"],
+) {
+  const cancel = track?.(session.id, selection)
+  try {
+    const current = session.current()
+    if (current?.agent !== selection.agent) {
+      await session.api.switchAgent({ sessionID: session.id, agent: selection.agent })
+    }
+    // The server deduplicates unchanged selections; cached SSE state may still be behind an earlier switch.
+    await session.api.switchModel({
+      sessionID: session.id,
+      model: { id: selection.model.modelID, providerID: selection.model.providerID, variant: selection.variant },
+    })
+  } catch (error) {
+    cancel?.()
+    throw error
+  }
+}
+
+async function sendPrompt(
+  session: ComposerSession,
+  value: ComposerSubmission,
+  track?: ModelSelection["trackSessionCommit"],
+) {
   const request = await buildSubmissionRequest(session, value)
   // Switching agent or model reconfigures the session immediately, and with it
   // the remainder of a running turn. A steer targets that turn, so its
@@ -336,24 +368,7 @@ async function sendPrompt(session: ComposerSession, value: ComposerSubmission) {
   // waits behind, so it runs with the session selection at delivery time (the
   // intended selection stays recorded in its metadata).
   if (value.delivery === "steer") {
-    const current = session.current()
-    if (current?.agent !== value.selection.agent) {
-      await session.api.switchAgent({ sessionID: session.id, agent: value.selection.agent })
-    }
-    if (
-      current?.model?.providerID !== value.selection.model.providerID ||
-      current.model.id !== value.selection.model.modelID ||
-      (current.model.variant ?? "default") !== (value.selection.variant ?? "default")
-    ) {
-      await session.api.switchModel({
-        sessionID: session.id,
-        model: {
-          id: value.selection.model.modelID,
-          providerID: value.selection.model.providerID,
-          variant: value.selection.variant,
-        },
-      })
-    }
+    await applySelection(session, value.selection, track)
   }
 
   const admission = {

packages/app/src/new-session/composer-adapter.ts

@@ -110,6 +110,7 @@ export function createNewSessionComposerAdapter(props: {
           agent: selection.agent,
           model: selection.model,
           variant: selection.variant ?? null,
+          choices: model.remembered(),
         })
         if (!pending) tabs.promoteDraft(draftID, { server: server.key, sessionId: created.id })
         submission.retarget(

packages/app/src/providers/models/configured.ts

@@ -0,0 +1,28 @@
+import { createEffect, createMemo, on } from "solid-js"
+import { useData } from "@/runtime/server/current"
+import { useWorkspaceLocation } from "@/workspaces/location"
+import { useServerSDK } from "@/runtime/server/client"
+
+export function useConfiguredModel() {
+  const data = useData()
+  const location = useWorkspaceLocation()
+  const server = useServerSDK()
+  createEffect(
+    on(
+      () => [location().directory, server.connection.status()] as const,
+      ([directory]) => {
+        void data.location.config.sync({ directory }).catch(() => undefined)
+      },
+    ),
+  )
+  const documents = () => data.location.config.list({ directory: location().directory })
+  const model = createMemo(() => {
+    const entry = documents()?.findLast((entry) => entry.type === "document" && entry.info.model !== undefined)
+    const model = entry?.type === "document" ? entry.info.model : undefined
+    if (!model) return
+    if (typeof model !== "string") return { providerID: model.providerID, modelID: model.model, variant: model.variant }
+    const [providerID, ...parts] = model.split("/")
+    return { providerID, modelID: parts.join("/"), variant: undefined }
+  })
+  return Object.assign(model, { ready: () => documents() !== undefined })
+}

packages/app/src/providers/models/models.tsx

@@ -122,10 +122,10 @@ const createModelsController = (directory: Accessor<string | undefined>) => {
   const setVariant = (model: ModelKey, value: string | undefined) => {
     const key = variantKey(model)
     if (!store.variant) {
-      setStore("variant", { [key]: value })
+      setStore("variant", { [key]: value ?? "default" })
       return
     }
-    setStore("variant", key, value)
+    setStore("variant", key, value ?? "default")
   }
 
   return {

packages/app/src/providers/models/select-dialog.tsx

@@ -1,7 +1,7 @@
 import { Popover } from "@kobalte/core/popover"
 import { Component, ComponentProps, createEffect, createMemo, For, JSX, Show } from "solid-js"
 import { createStore } from "solid-js/store"
-import { useLocal } from "@/providers/models/selection"
+import { useLocal, type ModelSelection } from "@/providers/models/selection"
 import { useDialog } from "@opencode/ui/context/dialog"
 import { popularProviders } from "@/providers/catalog/providers"
 import { Button } from "@opencode/ui/button"
@@ -27,7 +27,7 @@ import "@/settings/settings.css"
 const isFree = (provider: string, cost: { input: number } | undefined) =>
   provider === "opencode" && (!cost || cost.input === 0)
 
-type ModelState = ReturnType<typeof useLocal>["model"]
+type ModelState = ModelSelection
 type ModelItem = ReturnType<ModelState["list"]>[number]
 
 const modelKey = (model: ModelItem) => `${model.provider.id}:${model.id}`

packages/app/src/providers/models/selection.tsx

@@ -1,7 +1,7 @@
 import { createSimpleContext } from "@opencode/ui/context"
 import { base64Encode } from "@opencode/util/encode"
 import { useParams } from "@solidjs/router"
-import { batch, createEffect, createMemo, startTransition } from "solid-js"
+import { batch, createEffect, createMemo, onCleanup } from "solid-js"
 import { createStore } from "solid-js/store"
 import { Schema, SchemaGetter } from "effect"
 import { useModels } from "@/providers/models/models"
@@ -16,6 +16,7 @@ import { useData } from "@/runtime/server/current"
 import { normalizeAgentList } from "@/runtime/server/global-sync/utils"
 import { useServerSDK } from "@/runtime/server/client"
 import { ScopedKey, type ServerScope } from "@/runtime/server/scope"
+import { useConfiguredModel } from "./configured"
 
 const ModelKeySchema = Schema.Struct({
   providerID: Schema.String,
@@ -24,11 +25,15 @@ const ModelKeySchema = Schema.Struct({
 })
 export type ModelKey = typeof ModelKeySchema.Type
 
-const StateSchema = Schema.Struct({
-  agent: Persistence.optional(Schema.String),
+const ChoiceSchema = Schema.Struct({
   model: Persistence.optional(ModelKeySchema),
   variant: Persistence.optional(Schema.NullOr(Schema.String)),
 })
+const StateSchema = Schema.Struct({
+  ...ChoiceSchema.fields,
+  agent: Persistence.optional(Schema.String),
+  choices: Persistence.optional(Schema.Record(Schema.String, ChoiceSchema)),
+})
 type State = typeof StateSchema.Type
 
 const SessionsSchema = Schema.Record(
@@ -78,6 +83,7 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
     const providers = useProviders(() => sdk().directory)
     const models = useModels()
     const settings = useSettings()
+    const configuredModel = useConfiguredModel()
 
     const id = createMemo(() => params.id || undefined)
     const list = createMemo(() =>
@@ -98,16 +104,9 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
       current?: string
       draft?: State
       promoting?: State
-      last?: {
-        type: "agent" | "model" | "variant"
-        agent?: string
-        model?: ModelKey | null
-        variant?: string | null
-      }
     }>({
       current: list()[0]?.name,
       draft: undefined,
-      last: undefined,
     })
 
     const validModel = (model: ModelKey) => {
@@ -176,13 +175,17 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
       }
     }
 
-    const fallback = createMemo<ModelKey | undefined>(() => recentModel() ?? defaultModel())
+    const fallback = createMemo(() => firstModel(configuredModel, recentModel, defaultModel))
+    const durable = () => {
+      const session = id()
+      return session ? data.session.get(session) : undefined
+    }
 
     const agent = {
       list,
       visible: agentsVisible,
       current() {
-        return pickAgent(agentsVisible() ? (scope()?.agent ?? store.current) : "build")
+        return pickAgent(scope()?.agent ?? durable()?.agent ?? (agentsVisible() ? store.current : "build"))
       },
       set(name: string | undefined) {
         const item = pickAgent(name)
@@ -192,25 +195,24 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
         }
 
         batch(() => {
-          setStore("current", item.name)
-          setStore("last", {
-            type: "agent",
-            agent: item.name,
-            model: item.model,
-            variant: item.variant ?? null,
-          })
+          const previous = snapshot()
+          if (previous.agent === item.name) return
           const prev = scope()
+          const choices = {
+            ...prev?.choices,
+            ...(previous.agent ? { [previous.agent]: { model: previous.model, variant: previous.variant } } : {}),
+          }
+          setStore("current", item.name)
           const next = {
             agent: item.name,
-            model: item.model ?? prev?.model,
-            variant: item.variant ?? prev?.variant,
+            model: choices[item.name]?.model,
+            variant: choices[item.name]?.variant,
+            choices,
           } satisfies State
-          const session = id()
-          if (session) {
-            setSaved("session", session, next)
-            return
-          }
-          setStore("draft", next)
+          write(next)
+          // Pin both choices while the agent and model acknowledgments arrive separately.
+          const selected = current()
+          if (selected) model.set({ providerID: selected.provider.id, modelID: selected.id })
         })
       },
       move(direction: 1 | -1) {
@@ -230,8 +232,15 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
     }
 
     const current = createMemo(() => {
+      if (!configuredModel.ready()) return
       const item = firstModel(
         () => scope()?.model,
+        () => {
+          const session = durable()
+          if (session?.agent && session.agent !== agent.current()?.name) return
+          const model = session?.model
+          return model && { providerID: model.providerID, modelID: model.id }
+        },
         () => agent.current()?.model,
         fallback,
       )
@@ -243,26 +252,41 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
       const item = agent.current()
       const model = current()
       if (!item || !model) return
-      return getConfiguredAgentVariant({
-        agent: { model: item.model, variant: item.variant },
-        model: { providerID: model.provider.id, modelID: model.id, variants: model.variants },
-      })
+      const global = configuredModel()
+      return (
+        getConfiguredAgentVariant({
+          agent: { model: item.model, variant: item.variant },
+          model: { providerID: model.provider.id, modelID: model.id, variants: model.variants },
+        }) ??
+        getConfiguredAgentVariant({
+          agent: { model: global, variant: global?.variant },
+          model: { providerID: model.provider.id, modelID: model.id, variants: model.variants },
+        })
+      )
     }
 
-    const selected = () => scope()?.variant
+    const selected = () => {
+      const draft = scope()
+      if (draft?.model && validModel(draft.model)) return draft.variant
+      const session = durable()
+      if (session?.agent && session.agent !== agent.current()?.name) return
+      const value = session?.model
+      if (value && validModel({ providerID: value.providerID, modelID: value.id })) return value.variant ?? null
+    }
 
     const snapshot = () => {
-      const model = current()
+      const selected = current()
       return {
         agent: agent.current()?.name,
-        model: model ? { providerID: model.provider.id, modelID: model.id } : undefined,
-        variant: selected(),
+        model: selected ? { providerID: selected.provider.id, modelID: selected.id } : undefined,
+        variant: selected ? (model.variant.current() ?? null) : undefined,
       } satisfies State
     }
 
     const write = (next: Partial<State>) => {
       const state = {
-        ...(scope() ?? { agent: agent.current()?.name }),
+        ...scope(),
+        agent: agent.current()?.name,
         ...next,
       } satisfies State
 
@@ -274,22 +298,59 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
       setStore("draft", state)
     }
 
-    const recent = createMemo(() => models.recent.list().map(models.find).filter(Boolean))
+    const recent = createMemo(() => models.recent.list().filter(validModel).map(models.find).filter(Boolean))
+    const pending = new Map<string, State>()
+    const sameSelection = (a: State, b: State) =>
+      a.agent === b.agent &&
+      a.model?.providerID === b.model?.providerID &&
+      a.model?.modelID === b.model?.modelID &&
+      (a.variant ?? "default") === (b.variant ?? "default")
+
+    const reconcile = (sessionID: string) => {
+      const expected = pending.get(sessionID)
+      const session = data.session.get(sessionID)
+      if (!expected || !session?.model) return
+      if (
+        !sameSelection(expected, {
+          agent: session.agent,
+          model: { providerID: session.model.providerID, modelID: session.model.id },
+          variant: session.model.variant,
+        })
+      )
+        return
+      pending.delete(sessionID)
+      const draft = saved.session[sessionID]
+      if (id() !== sessionID || !draft || !sameSelection(draft, expected)) return
+      setSaved("session", sessionID, { agent: undefined, model: undefined, variant: undefined })
+    }
+    onCleanup(serverSDK.event.on("session.model.selected", (event) => reconcile(event.data.sessionID)))
+    onCleanup(serverSDK.event.on("session.agent.selected", (event) => reconcile(event.data.sessionID)))
+    onCleanup(
+      serverSDK.event.on("session.deleted", (event) => {
+        pending.delete(event.data.sessionID)
+        setSaved("session", event.data.sessionID, undefined)
+      }),
+    )
 
     const model = {
-      ready: models.ready,
+      ready: Object.assign(() => models.ready() && configuredModel.ready(), { promise: models.ready.promise }),
       current,
       recent,
       list: models.list,
+      trackSessionCommit(sessionID: string, selection: { agent: string; model: ModelKey; variant?: string }) {
+        pending.set(sessionID, selection)
+        reconcile(sessionID)
+        return () => {
+          if (pending.get(sessionID) === selection) pending.delete(sessionID)
+        }
+      },
       cycle(direction: 1 | -1) {
         const items = recent()
         const item = current()
         if (!item) return
 
         const index = items.findIndex((entry) => entry?.provider.id === item.provider.id && entry?.id === item.id)
-        if (index === -1) return
-
-        let next = index + direction
+        let next = index === -1 ? (direction === 1 ? 0 : items.length - 1) : index + direction
         if (next < 0) next = items.length - 1
         if (next >= items.length) next = 0
 
@@ -298,21 +359,18 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
         model.set({ providerID: entry.provider.id, modelID: entry.id })
       },
       set(item: ModelKey | undefined, options?: { recent?: boolean }) {
-        startTransition(() =>
-          batch(() => {
-            setStore("last", {
-              type: "model",
-              agent: agent.current()?.name,
-              model: item ?? null,
-              variant: selected(),
-            })
-            write({ model: item })
-            if (!item) return
-            models.setVisibility(item, true)
-            if (!options?.recent) return
-            models.recent.push(item)
-          }),
-        )
+        batch(() => {
+          if (item && !validModel(item)) return
+          const previous = current()
+          const same = item && previous?.provider.id === item.providerID && previous.id === item.modelID
+          write({ model: item, variant: same ? (model.variant.current() ?? null) : undefined })
+          if (!item) return
+          // A session draft owns its variant even when preferences change in another session.
+          if (id() && !same) write({ variant: model.variant.current() ?? null })
+          models.setVisibility(item, true)
+          if (!options?.recent) return
+          models.recent.push(item)
+        })
       },
       visible(item: ModelKey) {
         return models.visible(item)
@@ -324,16 +382,13 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
         configured,
         selected,
         current() {
-          const resolved = resolveModelVariant({
+          const model = current()
+          return resolveModelVariant({
             variants: this.list(),
             selected: this.selected(),
             configured: this.configured(),
+            preferred: model ? models.variant.get({ providerID: model.provider.id, modelID: model.id }) : undefined,
           })
-          if (resolved) return resolved
-          const model = current()
-          if (!model) return
-          const saved = models.variant.get({ providerID: model.provider.id, modelID: model.id })
-          if (saved && this.list().includes(saved)) return saved
         },
         list() {
           const item = current()
@@ -341,21 +396,12 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
           return Object.keys(item.variants)
         },
         set(value: string | undefined) {
-          startTransition(() =>
-            batch(() => {
-              const model = current()
-              setStore("last", {
-                type: "variant",
-                agent: agent.current()?.name,
-                model: model ? { providerID: model.provider.id, modelID: model.id } : null,
-                variant: value ?? null,
-              })
-              write({ variant: value ?? null })
-              if (model) {
-                models.variant.set({ providerID: model.provider.id, modelID: model.id }, value ?? undefined)
-              }
-            }),
-          )
+          batch(() => {
+            const model = current()
+            if (!model) return
+            write({ model: { providerID: model.provider.id, modelID: model.id }, variant: value ?? null })
+            models.variant.set({ providerID: model.provider.id, modelID: model.id }, value)
+          })
         },
         cycle() {
           const items = this.list()
@@ -363,8 +409,8 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
           this.set(
             cycleModelVariant({
               variants: items,
-              selected: this.selected(),
-              configured: this.configured(),
+              selected: this.current() ?? null,
+              configured: undefined,
             }),
           )
         },
@@ -383,20 +429,34 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
         promote(dir: string, session: string, state?: State) {
           const next = clone(state ?? snapshot())
           if (!next) return
+          // Creation already owns the active selection; keep only agent memory once it is in the read model.
+          // Otherwise a first-message command's configured overrides would stay hidden behind this handoff.
+          const created = data.session.get(session)
+          const selection = created?.model
+          const committed =
+            selection &&
+            sameSelection(next, {
+              agent: created.agent,
+              model: { providerID: selection.providerID, modelID: selection.id },
+              variant: selection.variant,
+            })
+              ? { choices: next.choices }
+              : next
           const key = handoffKey(serverSDK.scope, dir, session)
-          handoff.set(key, next)
+          handoff.set(key, committed)
 
           if (dir === sdk().directory) {
-            setSaved("session", session, next)
+            setSaved("session", session, committed)
           }
 
-          setStore("promoting", next)
+          setStore("promoting", committed)
           setStore("draft", undefined)
         },
         restore(msg: { sessionID: string; agent: string; model: ModelKey }) {
           const session = id()
           if (!session) return
           if (msg.sessionID !== session) return
+          if (durable()?.model) return
           if (saved.session[session] !== undefined) return
           if (handoff.has(handoffKey(serverSDK.scope, sdk().directory, session))) return
 
@@ -412,4 +472,5 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
   },
 })
 
-export type ModelSelection = ReturnType<typeof useLocal>["model"]
+export type ModelSelection = Omit<ReturnType<typeof useLocal>["model"], "trackSessionCommit"> &
+  Partial<Pick<ReturnType<typeof useLocal>["model"], "trackSessionCommit">>

packages/app/src/providers/models/unpaid.tsx

@@ -6,13 +6,13 @@ import { Tooltip } from "@opencode/ui/tooltip"
 import { useDialog } from "@opencode/ui/context/dialog"
 import { useTheme } from "@opencode/ui/theme"
 import { createMemo, onCleanup, onMount, type Component, For, Show } from "solid-js"
-import { useLocal } from "@/providers/models/selection"
+import { useLocal, type ModelSelection } from "@/providers/models/selection"
 import { useIntegrations } from "@/providers/catalog/integrations"
 import { decode64 } from "@/runtime/persistence/base64"
 import { useLanguage } from "@/runtime/i18n/language"
 import { ModelTooltip } from "./tooltip"
 
-type ModelState = ReturnType<typeof useLocal>["model"]
+type ModelState = ModelSelection
 const featuredProviders = ["opencode-go", "opencode", "openai", "anthropic", "google", "github-copilot"]
 const displayModelName = (name: string) => name.replace(/\s+(?:\(free\)|free)$/i, "")
 

packages/app/src/providers/models/variant.test.ts

@@ -64,14 +64,14 @@ describe("model variant", () => {
     expect(value).toBe("xhigh")
   })
 
-  test("wraps from configured last variant to first", () => {
+  test("cycles from configured last variant to default", () => {
     const value = cycleModelVariant({
       variants: ["low", "high", "xhigh"],
       selected: undefined,
       configured: "xhigh",
     })
 
-    expect(value).toBe("low")
+    expect(value).toBeUndefined()
   })
 
   test("cycles from an explicit default to the first variant", () => {
@@ -83,4 +83,22 @@ describe("model variant", () => {
 
     expect(value).toBe("low")
   })
+
+  test("prefers a saved variant to configuration, including explicit Default", () => {
+    const input = { variants: ["low", "high"], selected: undefined, configured: "high" }
+    expect(resolveModelVariant({ ...input, preferred: "low" })).toBe("low")
+    expect(resolveModelVariant({ ...input, preferred: "default" })).toBeUndefined()
+    expect(resolveModelVariant({ ...input, preferred: "low", selected: null })).toBeUndefined()
+    expect(resolveModelVariant({ ...input, preferred: "low", selected: "high" })).toBe("high")
+    expect(cycleModelVariant({ ...input, preferred: "high" })).toBeUndefined()
+    expect(cycleModelVariant({ ...input, preferred: "default" })).toBe("low")
+  })
+
+  test("normalizes unavailable selections instead of silently applying another variant", () => {
+    expect(resolveModelVariant({ variants: ["low"], selected: "high", configured: "low" })).toBeUndefined()
+    expect(
+      resolveModelVariant({ variants: ["low"], selected: undefined, preferred: "high", configured: "low" }),
+    ).toBeUndefined()
+    expect(cycleModelVariant({ variants: [], selected: undefined, configured: undefined })).toBeUndefined()
+  })
 })

packages/app/src/providers/models/variant.ts

@@ -16,6 +16,7 @@ type VariantInput = {
   variants: string[]
   selected: string | null | undefined
   configured: string | undefined
+  preferred?: string
 }
 
 export function getConfiguredAgentVariant(input: { agent: Agent | undefined; model: Model | undefined }) {
@@ -24,29 +25,16 @@ export function getConfiguredAgentVariant(input: { agent: Agent | undefined; mod
   if (!input.model?.variants) return undefined
   if (input.agent.model.providerID !== input.model.providerID) return undefined
   if (input.agent.model.modelID !== input.model.modelID) return undefined
-  if (!(input.agent.variant in input.model.variants)) return undefined
   return input.agent.variant
 }
 
 export function resolveModelVariant(input: VariantInput) {
   if (input.selected === null) return undefined
-  if (input.selected && input.variants.includes(input.selected)) return input.selected
-  if (input.configured && input.variants.includes(input.configured)) return input.configured
-  return undefined
+  const value = input.selected ?? input.preferred ?? input.configured
+  return value && value !== "default" && input.variants.includes(value) ? value : undefined
 }
 
 export function cycleModelVariant(input: VariantInput) {
-  if (input.variants.length === 0) return undefined
-  if (input.selected === null) return input.variants[0]
-  if (input.selected && input.variants.includes(input.selected)) {
-    const index = input.variants.indexOf(input.selected)
-    if (index === input.variants.length - 1) return undefined
-    return input.variants[index + 1]
-  }
-  if (input.configured && input.variants.includes(input.configured)) {
-    const index = input.variants.indexOf(input.configured)
-    if (index === input.variants.length - 1) return input.variants[0]
-    return input.variants[index + 1]
-  }
-  return input.variants[0]
+  const current = resolveModelVariant(input)
+  return input.variants[current ? input.variants.indexOf(current) + 1 : 0]
 }

packages/app/src/session/composer/region.tsx

@@ -20,7 +20,7 @@ import { useComposerCommands } from "@/composer/commands"
 import { useSessionCommands } from "../commands/use-session-commands"
 import type { SessionModel } from "../model"
 import type { SessionScreenLayout } from "../screen-layout"
-import { restorePromptModel, syncPromptModel, syncSessionModel } from "../session-model-helpers"
+import { syncPromptModel, syncSessionModel } from "../session-model-helpers"
 import type { SessionTimelineInteraction } from "../timeline/interaction"
 import { createSessionRevert } from "../revert"
 import { SessionComposerRegion } from "./session-composer-region"
@@ -62,14 +62,10 @@ export function createActiveSessionRegion(input: {
       },
     ),
   )
-  let restoredModelSession: string | undefined
   createEffect(() => {
     const id = input.session.identity.params.id
     if (!id || !prompt.ready() || !local.session.ready()) return
-    if (restoredModelSession !== id) {
-      restoredModelSession = id
-      if (restorePromptModel(local, prompt)) return
-    }
+    // Prompt model is a submission mirror. Local drafts and durable session state own selection.
     syncPromptModel(local, prompt)
   })
   createEffect(

packages/app/src/session/session-model-helpers.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from "bun:test"
-import { resetSessionModel, restorePromptModel, syncPromptModel, syncSessionModel } from "./session-model-helpers"
+import { resetSessionModel, syncPromptModel, syncSessionModel } from "./session-model-helpers"
 
 const message = (input?: { agent?: string; model?: { providerID: string; modelID: string; variant?: string } }) => ({
   sessionID: "session",
@@ -54,8 +54,7 @@ describe("syncPromptModel", () => {
       {
         model: {
           current: () => ({ id: "claude-sonnet-4", provider: { id: "anthropic" } }),
-          set() {},
-          variant: { current: () => "high", set() {} },
+          variant: { current: () => "high" },
         },
       },
       {
@@ -77,8 +76,7 @@ describe("syncPromptModel", () => {
       {
         model: {
           current: () => ({ id: model.modelID, provider: { id: model.providerID } }),
-          set() {},
-          variant: { current: () => model.variant, set() {} },
+          variant: { current: () => model.variant },
         },
       },
       {
@@ -93,54 +91,26 @@ describe("syncPromptModel", () => {
   })
 })
 
-describe("restorePromptModel", () => {
-  test("restores the persisted prompt model into session selection", () => {
+describe("stale prompt model", () => {
+  test("replaces the submission mirror without changing the effective selection", () => {
     const calls: unknown[] = []
-    const restored = restorePromptModel(
+    syncPromptModel(
       {
         model: {
           current: () => ({ id: "gpt", provider: { id: "openai" } }),
-          set: (model) => calls.push(model),
           variant: {
             current: () => undefined,
-            set: (variant) => calls.push(variant),
           },
         },
       },
       {
         model: {
           current: () => ({ providerID: "anthropic", modelID: "claude", variant: "high" }),
-          set() {},
+          set: (value) => calls.push(value),
         },
       },
     )
 
-    expect(restored).toBe(true)
-    expect(calls).toEqual([{ providerID: "anthropic", modelID: "claude" }, "high"])
-  })
-
-  test("does nothing without a persisted prompt model", () => {
-    const calls: unknown[] = []
-    const restored = restorePromptModel(
-      {
-        model: {
-          current: () => ({ id: "gpt", provider: { id: "openai" } }),
-          set: (model) => calls.push(model),
-          variant: {
-            current: () => undefined,
-            set: (variant) => calls.push(variant),
-          },
-        },
-      },
-      {
-        model: {
-          current: () => undefined,
-          set() {},
-        },
-      },
-    )
-
-    expect(restored).toBe(false)
-    expect(calls).toEqual([])
+    expect(calls).toEqual([{ providerID: "openai", modelID: "gpt", variant: undefined }])
   })
 })

packages/app/src/session/session-model-helpers.ts

@@ -12,10 +12,8 @@ type Local = {
 type ModelSelection = {
   model: {
     current(): { id: string; provider: { id: string } } | undefined
-    set(model: { providerID: string; modelID: string }): void
     variant: {
       current(): string | undefined
-      set(variant: string | undefined): void
     }
   }
 }
@@ -51,18 +49,3 @@ export const syncPromptModel = (local: ModelSelection, prompt: PromptState) => {
     return
   prompt.model.set(next)
 }
-
-export const restorePromptModel = (local: ModelSelection, prompt: PromptState) => {
-  const model = prompt.model.current()
-  if (!model) return false
-  const current = local.model.current()
-  if (
-    current?.provider.id === model.providerID &&
-    current.id === model.modelID &&
-    local.model.variant.current() === (model.variant ?? undefined)
-  )
-    return true
-  local.model.set({ providerID: model.providerID, modelID: model.modelID })
-  local.model.variant.set(model.variant ?? undefined)
-  return true
-}

packages/app/test-browser/fixtures/model-selection.ts

@@ -0,0 +1,459 @@
+import { afterEach, expect, mock, test } from "bun:test"
+import { createRequire } from "node:module"
+import { createComponent, createRoot } from "solid-js"
+import { createStore } from "solid-js/store"
+import type { Agent } from "@/runtime/server/types"
+import type { ModelKey } from "@/providers/models/selection"
+import { ServerScope } from "@/runtime/server/scope"
+
+// Bun does not compile Solid JSX. Compile the real context provider with the
+// same presets as Vite instead of replacing LocalProvider's implementation.
+const require = createRequire(import.meta.url)
+const solid = createRequire(require.resolve("vite-plugin-solid"))
+const { transformSync } = solid("@babel/core")
+Bun.plugin({
+  name: "selection-solid-context",
+  setup(build) {
+    build.onLoad({ filter: /[\\/]ui[\\/]src[\\/]context[\\/]helper\.tsx$/ }, async (args) => ({
+      contents: transformSync(await Bun.file(args.path).text(), {
+        filename: args.path,
+        presets: [solid.resolve("babel-preset-solid"), solid.resolve("@babel/preset-typescript")],
+      }).code,
+      loader: "js",
+    }))
+  },
+})
+
+type Commit = { agent?: string; model?: { providerID: string; id: string; variant?: string } }
+type Event = { data: { sessionID: string } }
+type ConfigModel = string | { providerID: string; model: string; variant?: string }
+const key = (modelID: string): ModelKey => ({ providerID: "provider", modelID })
+const durable = (modelID: string, variant?: string, agent = "build"): Commit => ({
+  agent,
+  model: { providerID: "provider", id: modelID, variant },
+})
+const agent = (name: string, model?: ModelKey, variant?: string): Agent => ({
+  name,
+  mode: "primary",
+  permission: [],
+  options: {},
+  model,
+  variant,
+})
+
+let active: ReturnType<typeof fixture>
+mock.module("@solidjs/router", () => ({ useParams: () => active.state.route }))
+mock.module("@/runtime/server/current", () => ({ useData: () => active.data }))
+mock.module("@/runtime/server/client", () => ({ useServerSDK: () => active.sdk }))
+mock.module("@/runtime/server/runtime", () => ({ useGlobal: () => ({ models: active.preferences }) }))
+mock.module("@/workspaces/location", () => ({ useWorkspaceLocation: () => () => ({ directory: active.directory }) }))
+mock.module("@/settings/model", () => ({
+  useSettings: () => ({ visibility: { customAgents: () => active.state.visible } }),
+}))
+mock.module("@/composer/persistence", () => ({ useComposerState: () => active.prompt }))
+mock.module("@/shell/state/layout", () => ({ useLayout: () => undefined }))
+mock.module("@/runtime/platform/platform", () => ({
+  usePlatform: () => ({
+    platform: "web",
+    openExternal() {},
+    restart: async () => {},
+    notify: async () => {},
+  }),
+}))
+
+const { LocalProvider, useLocal } = await import("@/providers/models/selection")
+const { ModelsProvider } = await import("@/providers/models/models")
+const { Persist } = await import("@/runtime/persistence/storage")
+const { createMemoryComposerState } = await import("@/composer/state")
+const { createComposerModelSelection } = await import("@/composer/selection")
+
+const cleanups: Array<() => void> = []
+afterEach(() =>
+  cleanups
+    .splice(0)
+    .reverse()
+    .forEach((dispose) => dispose()),
+)
+
+function fixture(input: { session?: Commit; agents?: Agent[]; config?: ConfigModel; preferred?: string } = {}) {
+  const directory = `/selection-test/${crypto.randomUUID()}`
+  const [state, set] = createStore({
+    visible: true,
+    configLoaded: true,
+    connection: "connected",
+    route: { id: "ses_a" as string | undefined },
+    agents: input.agents ?? [agent("build"), agent("plan")],
+    config: input.config as ConfigModel | undefined,
+    sessions: { ses_a: input.session } as Record<string, Commit | undefined>,
+    providers: [{ id: "provider", name: "Provider", package: "@ai-sdk/test", activation: "enabled" }],
+    models: ["a", "b", "c"].map((id) => ({
+      id,
+      modelID: id,
+      providerID: "provider",
+      name: `Model ${id}`,
+      settings: {},
+      headers: {},
+      capabilities: { tools: true, input: ["text"], output: ["text"] },
+      variants: ["low", "high"].map((id) => ({ id, settings: {} })),
+      time: { released: 1 },
+      cost: [],
+      status: "active",
+      enabled: true,
+      limit: { context: 128_000, output: 8192 },
+    })),
+  })
+  const [preferences, setPreferences] = createStore({
+    user: [] as Array<ModelKey & { visibility: "show" | "hide" }>,
+    recent: [] as ModelKey[],
+    variant: (input.preferred ? { "provider/a": input.preferred } : {}) as Record<string, string>,
+  })
+  const events = new Map<string, Set<(event: Event) => void>>()
+  const configLoads: string[] = []
+  const result = {
+    prompt: createMemoryComposerState(),
+    directory,
+    state,
+    set,
+    setPreferences,
+    preferences: { store: preferences, set: setPreferences, ready: () => true, recent: () => preferences.recent },
+    data: {
+      session: { get: (id: string) => state.sessions[id] },
+      location: {
+        agent: { list: () => state.agents },
+        config: {
+          list: () => (state.configLoaded ? [{ type: "document", info: { model: state.config } }] : undefined),
+          sync: async () => {
+            configLoads.push(state.connection)
+          },
+        },
+        provider: { list: () => state.providers },
+        model: { list: () => state.models },
+        integration: { list: () => [] },
+      },
+    },
+    sdk: {
+      scope: ServerScope.local,
+      connection: { status: () => state.connection },
+      event: {
+        on(type: string, handler: (event: Event) => void) {
+          const handlers = events.get(type) ?? new Set()
+          events.set(type, handlers)
+          handlers.add(handler)
+          return () => handlers.delete(handler)
+        },
+      },
+    },
+    emit(type: string, sessionID = "ses_a") {
+      events.get(type)?.forEach((handler) => handler({ data: { sessionID } }))
+    },
+    configLoads,
+    mount(draft = false) {
+      active = result
+      let local!: ReturnType<typeof useLocal>
+      let composer: ReturnType<typeof createComposerModelSelection> | undefined
+      const dispose = createRoot((dispose) => {
+        createComponent(ModelsProvider, {
+          directory,
+          get children() {
+            return createComponent(LocalProvider, {
+              get children() {
+                local = useLocal()
+                if (draft) composer = createComposerModelSelection({ agent: local.agent.current })
+                return null
+              },
+            })
+          },
+        })
+        return dispose
+      })
+      cleanups.push(dispose)
+      return { local, composer, dispose }
+    },
+  }
+  const target = Persist.serverWorkspace(ServerScope.local, directory, "model-selection")
+  cleanups.push(() => localStorage.removeItem(`${target.storage}:${target.key}`))
+  return result
+}
+
+function selection(local: ReturnType<typeof useLocal>) {
+  return {
+    agent: local.agent.current()?.name,
+    model: local.model.current()?.id,
+    variant: local.model.variant.current(),
+  }
+}
+
+test("restores durable agents even when the agent selector is hidden", () => {
+  const f = fixture({ session: durable("b", "high", "plan") })
+  f.set("visible", false)
+  const { local } = f.mount()
+  expect(local.agent.visible()).toBe(false)
+  expect(selection(local)).toEqual({ agent: "plan", model: "b", variant: "high" })
+})
+
+test("waits for initial configuration and reloads it after reconnecting", () => {
+  const f = fixture({ config: "provider/b" })
+  f.set("configLoaded", false)
+  const { local } = f.mount()
+  expect(local.model.ready()).toBe(false)
+  expect(local.model.current()).toBeUndefined()
+  f.set("connection", "reconnecting")
+  f.set("connection", "connected")
+  expect(f.configLoads).toEqual(["connected", "reconnecting", "connected"])
+  f.set("configLoaded", true)
+  expect(local.model.ready()).toBe(true)
+  expect(local.model.current()?.id).toBe("b")
+})
+
+test("new-session promotion does not mask a command's durable overrides", () => {
+  const f = fixture({ session: durable("a", "low") })
+  const { local } = f.mount()
+  local.session.promote(f.directory, "ses_a", { agent: "build", model: key("a"), variant: "low" })
+  f.set("sessions", "ses_a", durable("b", "high", "plan"))
+  expect(selection(local)).toEqual({ agent: "plan", model: "b", variant: "high" })
+})
+
+test("new-session drafts remember each agent's model and hand off inactive choices", () => {
+  const f = fixture({ agents: [agent("build", key("a")), agent("plan", key("b"))] })
+  f.set("route", "id", undefined)
+  const { local, composer } = f.mount(true)
+  if (!composer) throw new Error("missing draft composer")
+  composer.set(key("c"))
+  composer.variant.set("high")
+  local.agent.set("plan")
+  expect(composer.current()?.id).toBe("b")
+  expect(composer.variant.current()).toBeUndefined()
+  local.agent.set("build")
+  expect(composer.current()?.id).toBe("c")
+  expect(composer.variant.current()).toBe("high")
+  local.agent.set("plan")
+  const choices = composer.remembered()
+  f.set("sessions", "ses_a", durable("b", undefined, "plan"))
+  local.session.promote(f.directory, "ses_a", { agent: "plan", model: key("b"), choices })
+  f.set("route", "id", "ses_a")
+  local.agent.set("build")
+  expect(local.model.current()?.id).toBe("c")
+})
+
+test("session model picks snapshot the variant rather than following another session's preferences", () => {
+  const f = fixture({ session: durable("a") })
+  const { local } = f.mount()
+  f.setPreferences("variant", "provider/b", "low")
+  local.model.set(key("b"))
+  f.setPreferences("variant", "provider/b", "high")
+  expect(local.model.variant.current()).toBe("low")
+})
+
+test("remembers distinct variants for agents using the same model, scoped to the session", () => {
+  const f = fixture({ session: durable("a", "low"), agents: [agent("build", key("a")), agent("plan", key("a"))] })
+  const { local } = f.mount()
+  local.model.variant.set("high")
+  local.agent.set("plan")
+  local.model.variant.set("low")
+  local.agent.set("build")
+  expect(selection(local)).toEqual({ agent: "build", model: "a", variant: "high" })
+  local.agent.set("plan")
+  expect(selection(local)).toEqual({ agent: "plan", model: "a", variant: "low" })
+
+  f.set("sessions", "ses_b", durable("b", "high"))
+  f.set("route", "id", "ses_b")
+  expect(selection(local)).toEqual({ agent: "build", model: "b", variant: "high" })
+  f.set("route", "id", "ses_a")
+  expect(selection(local)).toEqual({ agent: "plan", model: "a", variant: "low" })
+})
+
+test("restores each agent's model and variant after provider remount", () => {
+  const f = fixture({ agents: [agent("build", key("a")), agent("plan", key("b"))] })
+  const first = f.mount()
+  first.local.model.variant.set("high")
+  first.local.agent.set("plan")
+  first.local.model.set(key("c"))
+  first.local.model.variant.set("low")
+  first.dispose()
+  const { local } = f.mount()
+  expect(selection(local)).toEqual({ agent: "plan", model: "c", variant: "low" })
+  local.agent.set("build")
+  expect(selection(local)).toEqual({ agent: "build", model: "a", variant: "high" })
+  local.agent.set("plan")
+  expect(selection(local)).toEqual({ agent: "plan", model: "c", variant: "low" })
+})
+
+test("changing models drops the old variant even when both models support it", () => {
+  const f = fixture({ session: durable("a", "high") })
+  const { local } = f.mount()
+  local.model.set(key("b"))
+  expect(selection(local)).toEqual({ agent: "build", model: "b", variant: undefined })
+  f.setPreferences("variant", "provider/c", "low")
+  local.model.set(key("c"))
+  expect(local.model.variant.current()).toBe("low")
+})
+
+test("restores durable selection ahead of agent, global, and saved variant defaults", () => {
+  const f = fixture({
+    session: durable("a", "low", "plan"),
+    agents: [agent("build"), agent("plan", key("b"), "high")],
+    config: { providerID: "provider", model: "c", variant: "high" },
+    preferred: "high",
+  })
+  const { local } = f.mount()
+  expect(selection(local)).toEqual({ agent: "plan", model: "a", variant: "low" })
+  local.session.restore({ sessionID: "ses_a", agent: "build", model: key("c") })
+  expect(selection(local)).toEqual({ agent: "plan", model: "a", variant: "low" })
+})
+
+test("uses historical message selection only when durable and local selection are absent", () => {
+  const f = fixture()
+  const { local } = f.mount()
+  local.session.restore({ sessionID: "ses_b", agent: "plan", model: key("b") })
+  expect(selection(local)).toEqual({ agent: "build", model: "a", variant: undefined })
+  local.session.restore({ sessionID: "ses_a", agent: "plan", model: { ...key("b"), variant: "low" } })
+  expect(selection(local)).toEqual({ agent: "plan", model: "b", variant: "low" })
+  local.model.variant.set("high")
+  local.session.restore({ sessionID: "ses_a", agent: "build", model: key("c") })
+  expect(selection(local)).toEqual({ agent: "plan", model: "b", variant: "high" })
+})
+
+test("invalid durable models fall through agent, global, recent, and connected defaults", () => {
+  const f = fixture({
+    session: durable("removed", "high"),
+    agents: [agent("build", key("b"), "low")],
+    config: "provider/c",
+  })
+  const { local } = f.mount()
+  expect(selection(local)).toEqual({ agent: "build", model: "b", variant: "low" })
+  f.set("agents", [agent("build", key("removed"))])
+  expect(local.model.current()?.id).toBe("c")
+  f.setPreferences("recent", [key("removed"), key("b")])
+  f.set("config", "provider/removed")
+  expect(local.model.current()?.id).toBe("b")
+  f.setPreferences("recent", [key("removed")])
+  expect(local.model.current()?.id).toBe("a")
+  f.set("providers", [])
+  expect(local.model.current()).toBeUndefined()
+})
+
+test("global and agent model/variant defaults react to configuration replacement", () => {
+  const f = fixture({ config: { providerID: "provider", model: "a", variant: "low" } })
+  const { local } = f.mount()
+  expect(selection(local)).toEqual({ agent: "build", model: "a", variant: "low" })
+  f.set("config", { providerID: "provider", model: "b", variant: "high" })
+  expect(selection(local)).toEqual({ agent: "build", model: "b", variant: "high" })
+  f.set("agents", [agent("build", key("a"), "low")])
+  expect(selection(local)).toEqual({ agent: "build", model: "a", variant: "low" })
+  f.set("agents", [agent("build", key("c"), "high")])
+  expect(selection(local)).toEqual({ agent: "build", model: "c", variant: "high" })
+  f.set("agents", [agent("build")])
+  f.set("config", "provider/b")
+  expect(selection(local)).toEqual({ agent: "build", model: "b", variant: undefined })
+})
+
+test("durable and explicitly selected Default override a saved variant preference", () => {
+  const f = fixture({
+    session: durable("a"),
+    preferred: "high",
+    config: { providerID: "provider", model: "a", variant: "low" },
+  })
+  const { local } = f.mount()
+  expect(local.model.variant.current()).toBeUndefined()
+  local.model.variant.set(undefined)
+  expect(f.preferences.store.variant["provider/a"]).toBe("default")
+  f.set("route", "id", "ses_b")
+  expect(local.model.variant.current()).toBeUndefined()
+  f.set("route", "id", "ses_a")
+  f.setPreferences("variant", "provider/a", "high")
+  expect(local.model.variant.current()).toBeUndefined()
+  f.set("route", "id", "ses_b")
+  expect(local.model.variant.current()).toBe("high")
+  f.set("route", "id", "ses_a")
+  expect(local.model.variant.current()).toBeUndefined()
+})
+
+test("waits for both commit acknowledgments, then releases only the matching draft", () => {
+  const f = fixture({ session: durable("b", "low") })
+  const { local } = f.mount()
+  local.agent.set("plan")
+  local.model.set(key("a"))
+  local.model.variant.set("high")
+  local.model.trackSessionCommit("ses_a", { agent: "plan", model: key("a"), variant: "high" })
+  f.set("sessions", "ses_a", durable("b", "low", "plan"))
+  f.emit("session.agent.selected")
+  expect(selection(local)).toEqual({ agent: "plan", model: "a", variant: "high" })
+  f.set("sessions", "ses_a", durable("a", "high", "plan"))
+  f.emit("session.model.selected")
+  f.set("sessions", "ses_a", durable("c", "low", "plan"))
+  expect(selection(local)).toEqual({ agent: "plan", model: "c", variant: "low" })
+})
+
+test.each(["a", "b"])("a delayed commit preserves the newer %s/low selection", (model) => {
+  const f = fixture()
+  const { local } = f.mount()
+  local.model.set(key("a"))
+  local.model.variant.set("high")
+  local.model.trackSessionCommit("ses_a", { agent: "build", model: key("a"), variant: "high" })
+  local.model.set(key(model))
+  local.model.variant.set("low")
+  f.set("sessions", "ses_a", durable("a", "high"))
+  f.emit("session.model.selected")
+  expect(selection(local)).toEqual({ agent: "build", model, variant: "low" })
+})
+
+test("a delayed commit preserves a newer agent even when model and variant match", () => {
+  const f = fixture({ agents: [agent("build", key("a")), agent("plan", key("a"))] })
+  const { local } = f.mount()
+  local.model.variant.set("high")
+  local.model.trackSessionCommit("ses_a", { agent: "build", model: key("a"), variant: "high" })
+  local.agent.set("plan")
+  f.set("sessions", "ses_a", durable("a", "high"))
+  f.emit("session.model.selected")
+  expect(selection(local)).toEqual({ agent: "plan", model: "a", variant: "high" })
+})
+
+test("a commit received while its session is inactive does not discard its local selection", () => {
+  const f = fixture()
+  const { local } = f.mount()
+  local.model.set(key("a"))
+  local.model.variant.set("high")
+  local.model.trackSessionCommit("ses_a", { agent: "build", model: key("a"), variant: "high" })
+  f.set("sessions", "ses_b", durable("b", "low"))
+  f.set("route", "id", "ses_b")
+  f.set("sessions", "ses_a", durable("a", "high"))
+  f.emit("session.model.selected")
+  expect(selection(local)).toEqual({ agent: "build", model: "b", variant: "low" })
+  f.set("sessions", "ses_a", durable("c", "low"))
+  f.set("route", "id", "ses_a")
+  expect(selection(local)).toEqual({ agent: "build", model: "a", variant: "high" })
+})
+
+test("cancelling a failed commit retains the draft and does not cancel a newer commit", () => {
+  const f = fixture()
+  const { local } = f.mount()
+  local.model.set(key("a"))
+  local.model.variant.set("high")
+  const cancel = local.model.trackSessionCommit("ses_a", { agent: "build", model: key("a"), variant: "high" })
+  cancel()
+  f.set("sessions", "ses_a", durable("a", "high"))
+  f.emit("session.model.selected")
+  f.set("sessions", "ses_a", durable("c", "low"))
+  expect(local.model.current()?.id).toBe("a")
+
+  local.model.set(key("b"))
+  local.model.variant.set("low")
+  local.model.trackSessionCommit("ses_a", { agent: "build", model: key("b"), variant: "low" })
+  cancel()
+  f.set("sessions", "ses_a", durable("b", "low"))
+  f.emit("session.model.selected")
+  f.set("sessions", "ses_a", durable("c", "high"))
+  expect(selection(local)).toEqual({ agent: "build", model: "c", variant: "high" })
+})
+
+test.each([1, -1] as const)("cycles %p from outside recents to the correct end and wraps", (direction) => {
+  const f = fixture({ session: durable("a") })
+  f.setPreferences("recent", [key("removed"), key("b"), key("c")])
+  const { local } = f.mount()
+  local.model.cycle(direction)
+  expect(local.model.current()?.id).toBe(direction === 1 ? "b" : "c")
+  local.model.cycle(direction)
+  expect(local.model.current()?.id).toBe(direction === 1 ? "c" : "b")
+  local.model.cycle(direction)
+  expect(local.model.current()?.id).toBe(direction === 1 ? "b" : "c")
+})

packages/app/test-browser/model-selection.test.ts

@@ -0,0 +1,23 @@
+import { expect, test } from "bun:test"
+import { fileURLToPath } from "node:url"
+
+test("LocalProvider selection integration", async () => {
+  // Isolate provider module substitutions from the rest of the browser suite.
+  const child = Bun.spawn(
+    [
+      process.execPath,
+      "test",
+      "--conditions=browser",
+      "--preload",
+      "./happydom.ts",
+      "./test-browser/fixtures/model-selection.ts",
+    ],
+    { cwd: fileURLToPath(new URL("..", import.meta.url)), stdout: "pipe", stderr: "pipe" },
+  )
+  const [status, stdout, stderr] = await Promise.all([
+    child.exited,
+    new Response(child.stdout).text(),
+    new Response(child.stderr).text(),
+  ])
+  expect(status, stdout + stderr).toBe(0)
+}, 30_000)