fix(app): startup homepage flash

packages/app/e2e/fixtures.ts

@@ -95,9 +95,6 @@ async function seedStorage(page: Page, input: { directory: string; extra?: strin
     const win = window as E2EWindow
     win.__opencode_e2e = {
       ...win.__opencode_e2e,
-      model: {
-        enabled: true,
-      },
       terminal: {
         enabled: true,
         terminals: {},

packages/app/e2e/selectors.ts

@@ -13,9 +13,6 @@ export const sessionTodoToggleButtonSelector = '[data-action="session-todo-toggl
 export const sessionTodoListSelector = '[data-slot="session-todo-list"]'
 
 export const modelVariantCycleSelector = '[data-action="model-variant-cycle"]'
-export const promptAgentSelector = '[data-component="prompt-agent-control"]'
-export const promptModelSelector = '[data-component="prompt-model-control"]'
-export const promptVariantSelector = '[data-component="prompt-variant-control"]'
 export const settingsLanguageSelectSelector = '[data-action="settings-language"]'
 export const settingsColorSchemeSelector = '[data-action="settings-color-scheme"]'
 export const settingsThemeSelector = '[data-action="settings-theme"]'

packages/app/e2e/session/session-model-persistence.spec.ts

@@ -1,351 +0,0 @@
-import { base64Decode } from "@opencode-ai/util/encode"
-import type { Locator, Page } from "@playwright/test"
-import { test, expect } from "../fixtures"
-import { openSidebar, sessionIDFromUrl, setWorkspacesEnabled, waitSessionIdle, waitSlug } from "../actions"
-import {
-  promptAgentSelector,
-  promptModelSelector,
-  promptSelector,
-  promptVariantSelector,
-  workspaceItemSelector,
-  workspaceNewSessionSelector,
-} from "../selectors"
-import { createSdk, sessionPath } from "../utils"
-
-type Footer = {
-  agent: string
-  model: string
-  variant: string
-}
-
-type Probe = {
-  dir?: string
-  sessionID?: string
-  model?: { providerID: string; modelID: string }
-}
-
-const escape = (value: string) => value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
-
-const text = async (locator: Locator) => ((await locator.textContent()) ?? "").trim()
-
-const modelKey = (state: Probe | null) => (state?.model ? `${state.model.providerID}:${state.model.modelID}` : null)
-
-const dirKey = (state: Probe | null) => state?.dir ?? ""
-
-async function probe(page: Page): Promise<Probe | null> {
-  return page.evaluate(() => {
-    const win = window as Window & {
-      __opencode_e2e?: {
-        model?: {
-          current?: Probe
-        }
-      }
-    }
-    return win.__opencode_e2e?.model?.current ?? null
-  })
-}
-
-async function currentDir(page: Page) {
-  let hit = ""
-  await expect
-    .poll(
-      async () => {
-        const next = dirKey(await probe(page))
-        if (next) hit = next
-        return next
-      },
-      { timeout: 30_000 },
-    )
-    .not.toBe("")
-  return hit
-}
-
-async function read(page: Page): Promise<Footer> {
-  return {
-    agent: await text(page.locator(`${promptAgentSelector} [data-slot="select-select-trigger-value"]`).first()),
-    model: await text(page.locator(`${promptModelSelector} [data-action="prompt-model"] span`).first()),
-    variant: await text(page.locator(`${promptVariantSelector} [data-slot="select-select-trigger-value"]`).first()),
-  }
-}
-
-async function waitFooter(page: Page, expected: Partial<Footer>) {
-  let hit: Footer | null = null
-  await expect
-    .poll(
-      async () => {
-        const state = await read(page)
-        const ok = Object.entries(expected).every(([key, value]) => state[key as keyof Footer] === value)
-        if (ok) hit = state
-        return ok
-      },
-      { timeout: 30_000 },
-    )
-    .toBe(true)
-  if (!hit) throw new Error("Failed to resolve prompt footer state")
-  return hit
-}
-
-async function waitModel(page: Page, value: string) {
-  await expect.poll(() => probe(page).then(modelKey), { timeout: 30_000 }).toBe(value)
-}
-
-async function choose(page: Page, root: string, value: string) {
-  const select = page.locator(root)
-  await expect(select).toBeVisible()
-  await select.locator('[data-action], [data-slot="select-select-trigger"]').first().click()
-  const item = page
-    .locator('[data-slot="select-select-item"]')
-    .filter({ hasText: new RegExp(`^\\s*${escape(value)}\\s*$`) })
-    .first()
-  await expect(item).toBeVisible()
-  await item.click()
-}
-
-async function variantCount(page: Page) {
-  const select = page.locator(promptVariantSelector)
-  await expect(select).toBeVisible()
-  await select.locator('[data-slot="select-select-trigger"]').click()
-  const count = await page.locator('[data-slot="select-select-item"]').count()
-  await page.keyboard.press("Escape")
-  return count
-}
-
-async function agents(page: Page) {
-  const select = page.locator(promptAgentSelector)
-  await expect(select).toBeVisible()
-  await select.locator('[data-action], [data-slot="select-select-trigger"]').first().click()
-  const labels = await page.locator('[data-slot="select-select-item-label"]').allTextContents()
-  await page.keyboard.press("Escape")
-  return labels.map((item) => item.trim()).filter(Boolean)
-}
-
-async function ensureVariant(page: Page, directory: string): Promise<Footer> {
-  const current = await read(page)
-  if ((await variantCount(page)) >= 2) return current
-
-  const cfg = await createSdk(directory)
-    .config.get()
-    .then((x) => x.data)
-  const visible = new Set(await agents(page))
-  const entry = Object.entries(cfg?.agent ?? {}).find((item) => {
-    const value = item[1]
-    return !!value && typeof value === "object" && "variant" in value && "model" in value && visible.has(item[0])
-  })
-  const name = entry?.[0]
-  test.skip(!name, "no agent with alternate variants available")
-  if (!name) return current
-
-  await choose(page, promptAgentSelector, name)
-  await expect.poll(() => variantCount(page), { timeout: 30_000 }).toBeGreaterThanOrEqual(2)
-  return waitFooter(page, { agent: name })
-}
-
-async function chooseDifferentVariant(page: Page): Promise<Footer> {
-  const current = await read(page)
-  const select = page.locator(promptVariantSelector)
-  await expect(select).toBeVisible()
-  await select.locator('[data-slot="select-select-trigger"]').click()
-
-  const items = page.locator('[data-slot="select-select-item"]')
-  const count = await items.count()
-  if (count < 2) throw new Error("Current model has no alternate variant to select")
-
-  for (let i = 0; i < count; i++) {
-    const item = items.nth(i)
-    const next = await text(item.locator('[data-slot="select-select-item-label"]').first())
-    if (!next || next === current.variant) continue
-    await item.click()
-    return waitFooter(page, { agent: current.agent, model: current.model, variant: next })
-  }
-
-  throw new Error("Failed to choose a different variant")
-}
-
-async function chooseOtherModel(page: Page): Promise<Footer> {
-  const current = await read(page)
-  const button = page.locator(`${promptModelSelector} [data-action="prompt-model"]`)
-  await expect(button).toBeVisible()
-  await button.click()
-
-  const dialog = page.getByRole("dialog")
-  await expect(dialog).toBeVisible()
-  const items = dialog.locator('[data-slot="list-item"]')
-  const count = await items.count()
-  expect(count).toBeGreaterThan(1)
-
-  for (let i = 0; i < count; i++) {
-    const item = items.nth(i)
-    const selected = (await item.getAttribute("data-selected")) === "true"
-    if (selected) continue
-    await item.click()
-    await expect(dialog).toHaveCount(0)
-    await expect.poll(async () => (await read(page)).model !== current.model, { timeout: 30_000 }).toBe(true)
-    return read(page)
-  }
-
-  throw new Error("Failed to choose a different model")
-}
-
-async function goto(page: Page, directory: string, sessionID?: string) {
-  await page.goto(sessionPath(directory, sessionID))
-  await expect(page.locator(promptSelector)).toBeVisible()
-  await expect.poll(async () => dirKey(await probe(page)), { timeout: 30_000 }).toBe(directory)
-}
-
-async function submit(page: Page, value: string) {
-  const prompt = page.locator(promptSelector)
-  await expect(prompt).toBeVisible()
-  await prompt.click()
-  await prompt.fill(value)
-  await prompt.press("Enter")
-
-  await expect.poll(() => sessionIDFromUrl(page.url()) ?? "", { timeout: 30_000 }).not.toBe("")
-  const id = sessionIDFromUrl(page.url())
-  if (!id) throw new Error(`Failed to resolve session id from ${page.url()}`)
-  return id
-}
-
-async function waitUser(directory: string, sessionID: string) {
-  const sdk = createSdk(directory)
-  await expect
-    .poll(
-      async () => {
-        const items = await sdk.session.messages({ sessionID, limit: 20 }).then((x) => x.data ?? [])
-        return items.some((item) => item.info.role === "user")
-      },
-      { timeout: 30_000 },
-    )
-    .toBe(true)
-  await sdk.session.abort({ sessionID }).catch(() => undefined)
-  await waitSessionIdle(sdk, sessionID, 30_000).catch(() => undefined)
-}
-
-async function createWorkspace(page: Page, root: string, seen: string[]) {
-  await openSidebar(page)
-  await page.getByRole("button", { name: "New workspace" }).first().click()
-
-  const slug = await waitSlug(page, [root, ...seen])
-  const directory = base64Decode(slug)
-  if (!directory) throw new Error(`Failed to decode workspace slug: ${slug}`)
-  return { slug, directory }
-}
-
-async function waitWorkspace(page: Page, slug: string) {
-  await openSidebar(page)
-  await expect
-    .poll(
-      async () => {
-        const item = page.locator(workspaceItemSelector(slug)).first()
-        try {
-          await item.hover({ timeout: 500 })
-          return true
-        } catch {
-          return false
-        }
-      },
-      { timeout: 60_000 },
-    )
-    .toBe(true)
-}
-
-async function newWorkspaceSession(page: Page, slug: string) {
-  await waitWorkspace(page, slug)
-  const item = page.locator(workspaceItemSelector(slug)).first()
-  await item.hover()
-
-  const button = page.locator(workspaceNewSessionSelector(slug)).first()
-  await expect(button).toBeVisible()
-  await button.click({ force: true })
-
-  const next = await waitSlug(page)
-  await expect(page).toHaveURL(new RegExp(`/${next}/session(?:[/?#]|$)`))
-  await expect(page.locator(promptSelector)).toBeVisible()
-  return currentDir(page)
-}
-
-test("session model and variant restore per session without leaking into new sessions", async ({
-  page,
-  withProject,
-}) => {
-  await page.setViewportSize({ width: 1440, height: 900 })
-
-  await withProject(async ({ directory, gotoSession, trackSession }) => {
-    await gotoSession()
-
-    await ensureVariant(page, directory)
-    const firstState = await chooseDifferentVariant(page)
-    const first = await submit(page, `session variant ${Date.now()}`)
-    trackSession(first)
-    await waitUser(directory, first)
-
-    await page.reload()
-    await expect(page.locator(promptSelector)).toBeVisible()
-    await waitFooter(page, firstState)
-
-    await gotoSession()
-    const fresh = await ensureVariant(page, directory)
-    expect(fresh.variant).not.toBe(firstState.variant)
-
-    const secondState = await chooseOtherModel(page)
-    const second = await submit(page, `session model ${Date.now()}`)
-    trackSession(second)
-    await waitUser(directory, second)
-
-    await goto(page, directory, first)
-    await waitFooter(page, firstState)
-
-    await goto(page, directory, second)
-    await waitFooter(page, secondState)
-
-    await gotoSession()
-    await waitFooter(page, fresh)
-  })
-})
-
-test("session model restore across workspaces", async ({ page, withProject }) => {
-  await page.setViewportSize({ width: 1440, height: 900 })
-
-  await withProject(async ({ directory: root, slug, gotoSession, trackDirectory, trackSession }) => {
-    await gotoSession()
-
-    await ensureVariant(page, root)
-    const firstState = await chooseDifferentVariant(page)
-    const first = await submit(page, `root session ${Date.now()}`)
-    trackSession(first, root)
-    await waitUser(root, first)
-
-    await openSidebar(page)
-    await setWorkspacesEnabled(page, slug, true)
-
-    const one = await createWorkspace(page, slug, [])
-    const oneDir = await newWorkspaceSession(page, one.slug)
-    trackDirectory(oneDir)
-
-    const secondState = await chooseOtherModel(page)
-    const second = await submit(page, `workspace one ${Date.now()}`)
-    trackSession(second, oneDir)
-    await waitUser(oneDir, second)
-
-    const two = await createWorkspace(page, slug, [one.slug])
-    const twoDir = await newWorkspaceSession(page, two.slug)
-    trackDirectory(twoDir)
-
-    await ensureVariant(page, twoDir)
-    const thirdState = await chooseDifferentVariant(page)
-    const third = await submit(page, `workspace two ${Date.now()}`)
-    trackSession(third, twoDir)
-    await waitUser(twoDir, third)
-
-    await goto(page, root, first)
-    await waitFooter(page, firstState)
-
-    await goto(page, oneDir, second)
-    await waitFooter(page, secondState)
-
-    await goto(page, twoDir, third)
-    await waitFooter(page, thirdState)
-
-    await goto(page, root, first)
-    await waitFooter(page, firstState)
-  })
-})

packages/app/src/components/dialog-fork.tsx

@@ -66,7 +66,6 @@ export const DialogFork: Component = () => {
       directory: sdk.directory,
       attachmentName: language.t("common.attachment"),
     })
-    const dir = base64Encode(sdk.directory)
 
     sdk.client.session
       .fork({ sessionID, messageID: item.id })
@@ -76,8 +75,10 @@ export const DialogFork: Component = () => {
           return
         }
         dialog.close()
-        prompt.set(restored, undefined, { dir, id: forked.data.id })
-        navigate(`/${dir}/session/${forked.data.id}`)
+        navigate(`/${base64Encode(sdk.directory)}/session/${forked.data.id}`)
+        requestAnimationFrame(() => {
+          prompt.set(restored)
+        })
       })
       .catch((err: unknown) => {
         const message = err instanceof Error ? err.message : String(err)

packages/app/src/components/dialog-select-model-unpaid.tsx

@@ -13,10 +13,8 @@ import { DialogSelectProvider } from "./dialog-select-provider"
 import { ModelTooltip } from "./model-tooltip"
 import { useLanguage } from "@/context/language"
 
-type ModelState = ReturnType<typeof useLocal>["model"]
-
-export const DialogSelectModelUnpaid: Component<{ model?: ModelState }> = (props) => {
-  const model = props.model ?? useLocal().model
+export const DialogSelectModelUnpaid: Component = () => {
+  const local = useLocal()
   const dialog = useDialog()
   const providers = useProviders()
   const language = useLanguage()
@@ -37,8 +35,8 @@ export const DialogSelectModelUnpaid: Component<{ model?: ModelState }> = (props
         <List
           class="[&_[data-slot=list-scroll]]:overflow-visible"
           ref={(ref) => (listRef = ref)}
-          items={model.list}
-          current={model.current()}
+          items={local.model.list}
+          current={local.model.current()}
           key={(x) => `${x.provider.id}:${x.id}`}
           itemWrapper={(item, node) => (
             <Tooltip
@@ -57,7 +55,7 @@ export const DialogSelectModelUnpaid: Component<{ model?: ModelState }> = (props
             </Tooltip>
           )}
           onSelect={(x) => {
-            model.set(x ? { modelID: x.id, providerID: x.provider.id } : undefined, {
+            local.model.set(x ? { modelID: x.id, providerID: x.provider.id } : undefined, {
               recent: true,
             })
             dialog.close()

packages/app/src/components/dialog-select-model.tsx

@@ -18,22 +18,19 @@ import { useLanguage } from "@/context/language"
 const isFree = (provider: string, cost: { input: number } | undefined) =>
   provider === "opencode" && (!cost || cost.input === 0)
 
-type ModelState = ReturnType<typeof useLocal>["model"]
-
 const ModelList: Component<{
   provider?: string
   class?: string
   onSelect: () => void
   action?: JSX.Element
-  model?: ModelState
 }> = (props) => {
-  const model = props.model ?? useLocal().model
+  const local = useLocal()
   const language = useLanguage()
 
   const models = createMemo(() =>
-    model
+    local.model
       .list()
-      .filter((m) => model.visible({ modelID: m.id, providerID: m.provider.id }))
+      .filter((m) => local.model.visible({ modelID: m.id, providerID: m.provider.id }))
       .filter((m) => (props.provider ? m.provider.id === props.provider : true)),
   )
 
@@ -44,7 +41,7 @@ const ModelList: Component<{
       emptyMessage={language.t("dialog.model.empty")}
       key={(x) => `${x.provider.id}:${x.id}`}
       items={models}
-      current={model.current()}
+      current={local.model.current()}
       filterKeys={["provider.name", "name", "id"]}
       sortBy={(a, b) => a.name.localeCompare(b.name)}
       groupBy={(x) => x.provider.name}
@@ -66,7 +63,7 @@ const ModelList: Component<{
         </Tooltip>
       )}
       onSelect={(x) => {
-        model.set(x ? { modelID: x.id, providerID: x.provider.id } : undefined, {
+        local.model.set(x ? { modelID: x.id, providerID: x.provider.id } : undefined, {
           recent: true,
         })
         props.onSelect()
@@ -91,7 +88,6 @@ type ModelSelectorTriggerProps = Omit<ComponentProps<typeof Kobalte.Trigger>, "a
 
 export function ModelSelectorPopover(props: {
   provider?: string
-  model?: ModelState
   children?: JSX.Element
   triggerAs?: ValidComponent
   triggerProps?: ModelSelectorTriggerProps
@@ -155,7 +151,6 @@ export function ModelSelectorPopover(props: {
           <Kobalte.Title class="sr-only">{language.t("dialog.model.select.title")}</Kobalte.Title>
           <ModelList
             provider={props.provider}
-            model={props.model}
             onSelect={() => setStore("open", false)}
             class="p-1"
             action={
@@ -189,7 +184,7 @@ export function ModelSelectorPopover(props: {
   )
 }
 
-export const DialogSelectModel: Component<{ provider?: string; model?: ModelState }> = (props) => {
+export const DialogSelectModel: Component<{ provider?: string }> = (props) => {
   const dialog = useDialog()
   const language = useLanguage()
 
@@ -207,7 +202,7 @@ export const DialogSelectModel: Component<{ provider?: string; model?: ModelStat
         </Button>
       }
     >
-      <ModelList provider={props.provider} model={props.model} onSelect={() => dialog.close()} />
+      <ModelList provider={props.provider} onSelect={() => dialog.close()} />
       <Button
         variant="ghost"
         class="ml-3 mt-5 mb-6 text-text-base self-start"

packages/app/src/components/prompt-input.tsx

@@ -121,7 +121,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
   let slashPopoverRef!: HTMLDivElement
 
   const mirror = { input: false }
-  const inset = 56
+  const inset = 52
   const space = `${inset}px`
 
   const scrollCursorIntoView = () => {
@@ -1031,17 +1031,6 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     if (!id) return permission.isAutoAcceptingDirectory(sdk.directory)
     return permission.isAutoAccepting(id, sdk.directory)
   })
-  const acceptLabel = createMemo(() =>
-    language.t(accepting() ? "command.permissions.autoaccept.disable" : "command.permissions.autoaccept.enable"),
-  )
-  const toggleAccept = () => {
-    if (!params.id) {
-      permission.toggleAutoAcceptDirectory(sdk.directory)
-      return
-    }
-
-    permission.toggleAutoAccept(params.id, sdk.directory)
-  }
 
   const { abort, handleSubmit } = createPromptSubmit({
     info,
@@ -1348,7 +1337,33 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
               }}
             />
 
-            <div class="flex items-center gap-1 pointer-events-auto">
+            <div
+              aria-hidden={store.mode !== "normal"}
+              class="flex items-center gap-1"
+              style={{
+                "pointer-events": buttonsSpring() > 0.5 ? "auto" : "none",
+              }}
+            >
+              <TooltipKeybind
+                placement="top"
+                title={language.t("prompt.action.attachFile")}
+                keybind={command.keybind("file.attach")}
+              >
+                <Button
+                  data-action="prompt-attach"
+                  type="button"
+                  variant="ghost"
+                  class="size-8 p-0"
+                  style={buttons()}
+                  onClick={pick}
+                  disabled={store.mode !== "normal"}
+                  tabIndex={store.mode === "normal" ? undefined : -1}
+                  aria-label={language.t("prompt.action.attachFile")}
+                >
+                  <Icon name="plus" class="size-4.5" />
+                </Button>
+              </TooltipKeybind>
+
               <Tooltip
                 placement="top"
                 inactive={!prompt.dirty() && !working()}
@@ -1385,30 +1400,42 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
           </div>
 
           <div class="pointer-events-none absolute bottom-2 left-2">
-            <div
-              aria-hidden={store.mode !== "normal"}
-              class="pointer-events-auto"
-              style={{
-                "pointer-events": buttonsSpring() > 0.5 ? "auto" : "none",
-              }}
-            >
+            <div class="pointer-events-auto">
               <TooltipKeybind
                 placement="top"
-                title={language.t("prompt.action.attachFile")}
-                keybind={command.keybind("file.attach")}
+                gutter={8}
+                title={language.t(
+                  accepting() ? "command.permissions.autoaccept.disable" : "command.permissions.autoaccept.enable",
+                )}
+                keybind={command.keybind("permissions.autoaccept")}
               >
                 <Button
-                  data-action="prompt-attach"
-                  type="button"
+                  data-action="prompt-permissions"
                   variant="ghost"
-                  class="size-8 p-0"
-                  style={buttons()}
-                  onClick={pick}
-                  disabled={store.mode !== "normal"}
-                  tabIndex={store.mode === "normal" ? undefined : -1}
-                  aria-label={language.t("prompt.action.attachFile")}
+                  onClick={() => {
+                    if (!params.id) {
+                      permission.toggleAutoAcceptDirectory(sdk.directory)
+                      return
+                    }
+                    permission.toggleAutoAccept(params.id, sdk.directory)
+                  }}
+                  classList={{
+                    "size-6 flex items-center justify-center": true,
+                    "text-text-base": !accepting(),
+                    "hover:bg-surface-success-base": accepting(),
+                  }}
+                  aria-label={
+                    accepting()
+                      ? language.t("command.permissions.autoaccept.disable")
+                      : language.t("command.permissions.autoaccept.enable")
+                  }
+                  aria-pressed={accepting()}
                 >
-                  <Icon name="plus" class="size-4.5" />
+                  <Icon
+                    name="chevron-double-right"
+                    size="small"
+                    classList={{ "text-icon-success-base": accepting() }}
+                  />
                 </Button>
               </TooltipKeybind>
             </div>
@@ -1430,76 +1457,39 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                 <div class="size-4 shrink-0" />
               </div>
               <div class="flex items-center gap-1.5 min-w-0 flex-1">
-                <div data-component="prompt-agent-control">
-                  <TooltipKeybind
-                    placement="top"
-                    gutter={4}
-                    title={language.t("command.agent.cycle")}
-                    keybind={command.keybind("agent.cycle")}
-                  >
-                    <Select
-                      size="normal"
-                      options={agentNames()}
-                      current={local.agent.current()?.name ?? ""}
-                      onSelect={local.agent.set}
-                      class="capitalize max-w-[160px] text-text-base"
-                      valueClass="truncate text-13-regular text-text-base"
-                      triggerStyle={control()}
-                      triggerProps={{ "data-action": "prompt-agent" }}
-                      variant="ghost"
-                    />
-                  </TooltipKeybind>
-                </div>
-                <div data-component="prompt-model-control">
-                  <Show
-                    when={providers.paid().length > 0}
-                    fallback={
-                      <TooltipKeybind
-                        placement="top"
-                        gutter={4}
-                        title={language.t("command.model.choose")}
-                        keybind={command.keybind("model.choose")}
-                      >
-                        <Button
-                          data-action="prompt-model"
-                          as="div"
-                          variant="ghost"
-                          size="normal"
-                          class="min-w-0 max-w-[320px] text-13-regular text-text-base group"
-                          style={control()}
-                          onClick={() => dialog.show(() => <DialogSelectModelUnpaid model={local.model} />)}
-                        >
-                          <Show when={local.model.current()?.provider?.id}>
-                            <ProviderIcon
-                              id={local.model.current()!.provider.id}
-                              class="size-4 shrink-0 opacity-40 group-hover:opacity-100 transition-opacity duration-150"
-                              style={{ "will-change": "opacity", transform: "translateZ(0)" }}
-                            />
-                          </Show>
-                          <span class="truncate">
-                            {local.model.current()?.name ?? language.t("dialog.model.select.title")}
-                          </span>
-                          <Icon name="chevron-down" size="small" class="shrink-0" />
-                        </Button>
-                      </TooltipKeybind>
-                    }
-                  >
+                <TooltipKeybind
+                  placement="top"
+                  gutter={4}
+                  title={language.t("command.agent.cycle")}
+                  keybind={command.keybind("agent.cycle")}
+                >
+                  <Select
+                    size="normal"
+                    options={agentNames()}
+                    current={local.agent.current()?.name ?? ""}
+                    onSelect={local.agent.set}
+                    class="capitalize max-w-[160px]"
+                    valueClass="truncate text-13-regular"
+                    triggerStyle={control()}
+                    variant="ghost"
+                  />
+                </TooltipKeybind>
+                <Show
+                  when={providers.paid().length > 0}
+                  fallback={
                     <TooltipKeybind
                       placement="top"
                       gutter={4}
                       title={language.t("command.model.choose")}
                       keybind={command.keybind("model.choose")}
                     >
-                      <ModelSelectorPopover
-                        model={local.model}
-                        triggerAs={Button}
-                        triggerProps={{
-                          variant: "ghost",
-                          size: "normal",
-                          style: control(),
-                          class: "min-w-0 max-w-[320px] text-13-regular text-text-base group",
-                          "data-action": "prompt-model",
-                        }}
+                      <Button
+                        as="div"
+                        variant="ghost"
+                        size="normal"
+                        class="min-w-0 max-w-[320px] text-13-regular group"
+                        style={control()}
+                        onClick={() => dialog.show(() => <DialogSelectModelUnpaid />)}
                       >
                         <Show when={local.model.current()?.provider?.id}>
                           <ProviderIcon
@@ -1512,52 +1502,56 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                           {local.model.current()?.name ?? language.t("dialog.model.select.title")}
                         </span>
                         <Icon name="chevron-down" size="small" class="shrink-0" />
-                      </ModelSelectorPopover>
+                      </Button>
                     </TooltipKeybind>
-                  </Show>
-                </div>
-                <div data-component="prompt-variant-control">
+                  }
+                >
                   <TooltipKeybind
                     placement="top"
                     gutter={4}
-                    title={language.t("command.model.variant.cycle")}
-                    keybind={command.keybind("model.variant.cycle")}
+                    title={language.t("command.model.choose")}
+                    keybind={command.keybind("model.choose")}
                   >
-                    <Select
-                      size="normal"
-                      options={variants()}
-                      current={local.model.variant.current() ?? "default"}
-                      label={(x) => (x === "default" ? language.t("common.default") : x)}
-                      onSelect={(x) => local.model.variant.set(x === "default" ? undefined : x)}
-                      class="capitalize max-w-[160px] text-text-base"
-                      valueClass="truncate text-13-regular text-text-base"
-                      triggerStyle={control()}
-                      triggerProps={{ "data-action": "prompt-model-variant" }}
-                      variant="ghost"
-                    />
+                    <ModelSelectorPopover
+                      triggerAs={Button}
+                      triggerProps={{
+                        variant: "ghost",
+                        size: "normal",
+                        style: control(),
+                        class: "min-w-0 max-w-[320px] text-13-regular group",
+                      }}
+                    >
+                      <Show when={local.model.current()?.provider?.id}>
+                        <ProviderIcon
+                          id={local.model.current()!.provider.id}
+                          class="size-4 shrink-0 opacity-40 group-hover:opacity-100 transition-opacity duration-150"
+                          style={{ "will-change": "opacity", transform: "translateZ(0)" }}
+                        />
+                      </Show>
+                      <span class="truncate">
+                        {local.model.current()?.name ?? language.t("dialog.model.select.title")}
+                      </span>
+                      <Icon name="chevron-down" size="small" class="shrink-0" />
+                    </ModelSelectorPopover>
                   </TooltipKeybind>
-                </div>
+                </Show>
                 <TooltipKeybind
                   placement="top"
-                  gutter={8}
-                  title={acceptLabel()}
-                  keybind={command.keybind("permissions.autoaccept")}
+                  gutter={4}
+                  title={language.t("command.model.variant.cycle")}
+                  keybind={command.keybind("model.variant.cycle")}
                 >
-                  <Button
-                    data-action="prompt-permissions"
+                  <Select
+                    size="normal"
+                    options={variants()}
+                    current={local.model.variant.current() ?? "default"}
+                    label={(x) => (x === "default" ? language.t("common.default") : x)}
+                    onSelect={(x) => local.model.variant.set(x === "default" ? undefined : x)}
+                    class="capitalize max-w-[160px]"
+                    valueClass="truncate text-13-regular"
+                    triggerStyle={control()}
                     variant="ghost"
-                    onClick={toggleAccept}
-                    classList={{
-                      "h-7 w-7 p-0 shrink-0 flex items-center justify-center": true,
-                      "text-text-base": !accepting(),
-                      "hover:bg-surface-success-base": accepting(),
-                    }}
-                    style={control()}
-                    aria-label={acceptLabel()}
-                    aria-pressed={accepting()}
-                  >
-                    <Icon name="shield" size="small" classList={{ "text-icon-success-base": accepting() }} />
-                  </Button>
+                  />
                 </TooltipKeybind>
               </div>
             </div>

packages/app/src/components/prompt-input/submit.test.ts

@@ -17,7 +17,6 @@ const optimistic: Array<{
 }> = []
 const optimisticSeeded: boolean[] = []
 const storedSessions: Record<string, Array<{ id: string; title?: string }>> = {}
-const promoted: Array<{ directory: string; sessionID: string }> = []
 const sentShell: string[] = []
 const syncedDirectories: string[] = []
 
@@ -87,11 +86,6 @@ beforeAll(async () => {
       agent: {
         current: () => ({ name: "agent" }),
       },
-      session: {
-        promote(directory: string, sessionID: string) {
-          promoted.push({ directory, sessionID })
-        },
-      },
     }),
   }))
 
@@ -207,7 +201,6 @@ beforeEach(() => {
   enabledAutoAccept.length = 0
   optimistic.length = 0
   optimisticSeeded.length = 0
-  promoted.length = 0
   params = {}
   sentShell.length = 0
   syncedDirectories.length = 0
@@ -247,11 +240,6 @@ describe("prompt submit worktree selection", () => {
     expect(createdSessions).toEqual(["/repo/worktree-a", "/repo/worktree-b"])
     expect(sentShell).toEqual(["/repo/worktree-a", "/repo/worktree-b"])
     expect(syncedDirectories).toEqual(["/repo/worktree-a", "/repo/worktree-a", "/repo/worktree-b", "/repo/worktree-b"])
-    expect(promoted).toEqual([
-      { directory: "/repo/worktree-a", sessionID: "session-1" },
-      { directory: "/repo/worktree-b", sessionID: "session-2" },
-    ])
-    expect(syncedDirectories).toEqual(["/repo/worktree-a", "/repo/worktree-a", "/repo/worktree-b", "/repo/worktree-b"])
   })
 
   test("applies auto-accept to newly created sessions", async () => {

packages/app/src/components/prompt-input/submit.ts

@@ -296,7 +296,6 @@ export function createPromptSubmit(input: PromptSubmitInput) {
 
     const currentModel = local.model.current()
     const currentAgent = local.agent.current()
-    const variant = local.model.variant.current()
     if (!currentModel || !currentAgent) {
       showToast({
         title: language.t("prompt.toast.modelAgentRequired.title"),
@@ -371,7 +370,6 @@ export function createPromptSubmit(input: PromptSubmitInput) {
         seed(sessionDirectory, created)
         session = created
         if (shouldAutoAccept) permission.enableAutoAccept(session.id, sessionDirectory)
-        local.session.promote(sessionDirectory, session.id)
         layout.handoff.setTabs(base64Encode(sessionDirectory), session.id)
         navigate(`/${base64Encode(sessionDirectory)}/session/${session.id}`)
       }
@@ -389,6 +387,7 @@ export function createPromptSubmit(input: PromptSubmitInput) {
       providerID: currentModel.provider.id,
     }
     const agent = currentAgent.name
+    const variant = local.model.variant.current()
     const context = prompt.context.items().slice()
     const draft: FollowupDraft = {
       sessionID: session.id,

packages/app/src/components/session/session-header.tsx

@@ -16,11 +16,9 @@ import { useLanguage } from "@/context/language"
 import { useLayout } from "@/context/layout"
 import { usePlatform } from "@/context/platform"
 import { useServer } from "@/context/server"
-import { useSync } from "@/context/sync"
 import { useTerminal } from "@/context/terminal"
 import { focusTerminalById } from "@/pages/session/helpers"
 import { useSessionLayout } from "@/pages/session/session-layout"
-import { messageAgentColor } from "@/utils/agent"
 import { decode64 } from "@/utils/base64"
 import { Persist, persisted } from "@/utils/persist"
 import { StatusPopover } from "../status-popover"
@@ -134,7 +132,6 @@ export function SessionHeader() {
   const server = useServer()
   const platform = usePlatform()
   const language = useLanguage()
-  const sync = useSync()
   const terminal = useTerminal()
   const { params, view } = useSessionLayout()
 
@@ -221,9 +218,6 @@ export function SessionHeader() {
       ({ id: "finder", label: fileManager().label, icon: fileManager().icon } as const),
   )
   const opening = createMemo(() => openRequest.app !== undefined)
-  const tint = createMemo(() =>
-    messageAgentColor(params.id ? sync.data.message[params.id] : undefined, sync.data.agent),
-  )
 
   const selectApp = (app: OpenApp) => {
     if (!options().some((item) => item.id === app)) return
@@ -336,7 +330,7 @@ export function SessionHeader() {
                         >
                           <div class="flex size-5 shrink-0 items-center justify-center [&_[data-component=app-icon]]:size-5">
                             <Show when={opening()} fallback={<AppIcon id={current().icon} />}>
-                              <Spinner class="size-3.5" style={{ color: tint() ?? "var(--icon-base)" }} />
+                              <Spinner class="size-3.5 text-icon-base" />
                             </Show>
                           </div>
                           <span class="text-12-regular text-text-strong">{language.t("common.open")}</span>

packages/app/src/components/titlebar.tsx

@@ -217,49 +217,26 @@ export function Titlebar() {
           </TooltipKeybind>
           <div class="hidden xl:flex items-center shrink-0">
             <Show when={params.dir}>
-              <div
-                class="flex items-center shrink-0 w-8 mr-1"
-                aria-hidden={layout.sidebar.opened() ? "true" : undefined}
+              <TooltipKeybind
+                placement="bottom"
+                title={language.t("command.session.new")}
+                keybind={command.keybind("session.new")}
+                openDelay={2000}
               >
-                <div
-                  class="transition-opacity"
-                  classList={{
-                    "opacity-100 duration-120 ease-out": !layout.sidebar.opened(),
-                    "opacity-0 duration-120 ease-in delay-0 pointer-events-none": layout.sidebar.opened(),
+                <Button
+                  variant="ghost"
+                  icon={creating() ? "new-session-active" : "new-session"}
+                  class="titlebar-icon w-8 h-6 p-0 box-border"
+                  onClick={() => {
+                    if (!params.dir) return
+                    navigate(`/${params.dir}/session`)
                   }}
-                >
-                  <TooltipKeybind
-                    placement="bottom"
-                    title={language.t("command.session.new")}
-                    keybind={command.keybind("session.new")}
-                    openDelay={2000}
-                  >
-                    <Button
-                      variant="ghost"
-                      icon={creating() ? "new-session-active" : "new-session"}
-                      class="titlebar-icon w-8 h-6 p-0 box-border"
-                      disabled={layout.sidebar.opened()}
-                      tabIndex={layout.sidebar.opened() ? -1 : undefined}
-                      onClick={() => {
-                        if (!params.dir) return
-                        navigate(`/${params.dir}/session`)
-                      }}
-                      aria-label={language.t("command.session.new")}
-                      aria-current={creating() ? "page" : undefined}
-                    />
-                  </TooltipKeybind>
-                </div>
-              </div>
+                  aria-label={language.t("command.session.new")}
+                  aria-current={creating() ? "page" : undefined}
+                />
+              </TooltipKeybind>
             </Show>
-            <div
-              class="flex items-center gap-0 transition-transform"
-              classList={{
-                "translate-x-0": !layout.sidebar.opened(),
-                "-translate-x-[36px]": layout.sidebar.opened(),
-                "duration-180 ease-out": !layout.sidebar.opened(),
-                "duration-180 ease-in": layout.sidebar.opened(),
-              }}
-            >
+            <div class="flex items-center gap-0" classList={{ "ml-1": !!params.dir }}>
               <Tooltip placement="bottom" value={language.t("common.goBack")} openDelay={2000}>
                 <Button
                   variant="ghost"

packages/app/src/context/local.tsx

@@ -1,421 +1,252 @@
-import { createSimpleContext } from "@opencode-ai/ui/context"
-import { base64Encode } from "@opencode-ai/util/encode"
-import { useParams } from "@solidjs/router"
-import { batch, createEffect, createMemo, onCleanup } from "solid-js"
 import { createStore } from "solid-js/store"
-import { useModels } from "@/context/models"
-import { useProviders } from "@/hooks/use-providers"
-import { modelEnabled, modelProbe } from "@/testing/model-selection"
-import { Persist, persisted } from "@/utils/persist"
-import { cycleModelVariant, getConfiguredAgentVariant, resolveModelVariant } from "./model-variant"
+import { batch, createMemo } from "solid-js"
+import { createSimpleContext } from "@opencode-ai/ui/context"
 import { useSDK } from "./sdk"
 import { useSync } from "./sync"
+import { base64Encode } from "@opencode-ai/util/encode"
+import { useProviders } from "@/hooks/use-providers"
+import { useModels } from "@/context/models"
+import { cycleModelVariant, getConfiguredAgentVariant, resolveModelVariant } from "./model-variant"
 
 export type ModelKey = { providerID: string; modelID: string }
 
-type State = {
-  agent?: string
-  model?: ModelKey
-  variant?: string | null
-}
-
-type Saved = {
-  session: Record<string, State | undefined>
-}
-
-const WORKSPACE_KEY = "__workspace__"
-const handoff = new Map<string, State>()
-
-const handoffKey = (dir: string, id: string) => `${dir}\n${id}`
-
-const migrate = (value: unknown) => {
-  if (!value || typeof value !== "object") return { session: {} }
-
-  const item = value as {
-    session?: Record<string, State | undefined>
-    pick?: Record<string, State | undefined>
-  }
-
-  if (item.session && typeof item.session === "object") return { session: item.session }
-  if (!item.pick || typeof item.pick !== "object") return { session: {} }
-
-  return {
-    session: Object.fromEntries(Object.entries(item.pick).filter(([key]) => key !== WORKSPACE_KEY)),
-  }
-}
-
-const clone = (value: State | undefined) => {
-  if (!value) return undefined
-  return {
-    ...value,
-    model: value.model ? { ...value.model } : undefined,
-  } satisfies State
-}
-
 export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
   name: "Local",
   init: () => {
-    const params = useParams()
     const sdk = useSDK()
     const sync = useSync()
     const providers = useProviders()
-    const models = useModels()
+    const connected = createMemo(() => new Set(providers.connected().map((provider) => provider.id)))
 
-    const id = createMemo(() => params.id || undefined)
-    const list = createMemo(() => sync.data.agent.filter((item) => item.mode !== "subagent" && !item.hidden))
-    const connected = createMemo(() => new Set(providers.connected().map((item) => item.id)))
-
-    const [saved, setSaved] = persisted(
-      {
-        ...Persist.workspace(sdk.directory, "model-selection", ["model-selection.v1"]),
-        migrate,
-      },
-      createStore<Saved>({
-        session: {},
-      }),
-    )
-
-    const [store, setStore] = createStore<{
-      current?: string
-      draft?: 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) => {
-      const provider = providers.all().find((item) => item.id === model.providerID)
+    function isModelValid(model: ModelKey) {
+      const provider = providers.all().find((x) => x.id === model.providerID)
       return !!provider?.models[model.modelID] && connected().has(model.providerID)
     }
 
-    const firstModel = (...items: Array<() => ModelKey | undefined>) => {
-      for (const item of items) {
-        const model = item()
+    function getFirstValidModel(...modelFns: (() => ModelKey | undefined)[]) {
+      for (const modelFn of modelFns) {
+        const model = modelFn()
         if (!model) continue
-        if (validModel(model)) return model
+        if (isModelValid(model)) return model
       }
     }
 
-    const pickAgent = (name: string | undefined) => {
-      const items = list()
-      if (items.length === 0) return undefined
-      return items.find((item) => item.name === name) ?? items[0]
-    }
+    let setModel: (model: ModelKey | undefined, options?: { recent?: boolean }) => void = () => undefined
 
-    createEffect(() => {
-      const items = list()
-      if (items.length === 0) {
-        if (store.current !== undefined) setStore("current", undefined)
-        return
-      }
-      if (items.some((item) => item.name === store.current)) return
-      setStore("current", items[0]?.name)
-    })
+    const agent = (() => {
+      const list = createMemo(() => sync.data.agent.filter((x) => x.mode !== "subagent" && !x.hidden))
+      const models = useModels()
 
-    const scope = createMemo<State | undefined>(() => {
-      const session = id()
-      if (!session) return store.draft
-      return saved.session[session] ?? handoff.get(handoffKey(sdk.directory, session))
-    })
-
-    createEffect(() => {
-      const session = id()
-      if (!session) return
-
-      const key = handoffKey(sdk.directory, session)
-      const next = handoff.get(key)
-      if (!next) return
-      if (saved.session[session] !== undefined) {
-        handoff.delete(key)
-        return
-      }
-
-      setSaved("session", session, clone(next))
-      handoff.delete(key)
-    })
-
-    const configuredModel = () => {
-      if (!sync.data.config.model) return
-      const [providerID, modelID] = sync.data.config.model.split("/")
-      const model = { providerID, modelID }
-      if (validModel(model)) return model
-    }
-
-    const recentModel = () => {
-      for (const item of models.recent.list()) {
-        if (validModel(item)) return item
-      }
-    }
-
-    const defaultModel = () => {
-      const defaults = providers.default()
-      for (const provider of providers.connected()) {
-        const configured = defaults[provider.id]
-        if (configured) {
-          const model = { providerID: provider.id, modelID: configured }
-          if (validModel(model)) return model
-        }
-
-        const first = Object.values(provider.models)[0]
-        if (!first) continue
-        const model = { providerID: provider.id, modelID: first.id }
-        if (validModel(model)) return model
-      }
-    }
-
-    const fallback = createMemo<ModelKey | undefined>(() => configuredModel() ?? recentModel() ?? defaultModel())
-
-    const agent = {
-      list,
-      current() {
-        return pickAgent(scope()?.agent ?? store.current)
-      },
-      set(name: string | undefined) {
-        const item = pickAgent(name)
-        if (!item) {
-          setStore("current", undefined)
-          return
-        }
-
-        batch(() => {
-          setStore("current", item.name)
-          setStore("last", {
-            type: "agent",
-            agent: item.name,
-            model: item.model,
-            variant: item.variant ?? null,
-          })
-          const next = {
-            agent: item.name,
-            model: item.model,
-            variant: item.variant,
-          } satisfies State
-          const session = id()
-          if (session) {
-            setSaved("session", session, next)
+      const [store, setStore] = createStore<{
+        current?: string
+      }>({
+        current: list()[0]?.name,
+      })
+      return {
+        list,
+        current() {
+          const available = list()
+          if (available.length === 0) return undefined
+          return available.find((x) => x.name === store.current) ?? available[0]
+        },
+        set(name: string | undefined) {
+          const available = list()
+          if (available.length === 0) {
+            setStore("current", undefined)
             return
           }
-          setStore("draft", next)
-        })
-      },
-      move(direction: 1 | -1) {
-        const items = list()
-        if (items.length === 0) {
-          setStore("current", undefined)
-          return
-        }
-
-        let next = items.findIndex((item) => item.name === agent.current()?.name) + direction
-        if (next < 0) next = items.length - 1
-        if (next >= items.length) next = 0
-        const item = items[next]
-        if (!item) return
-        agent.set(item.name)
-      },
-    }
-
-    const current = () => {
-      const item = firstModel(
-        () => scope()?.model,
-        () => agent.current()?.model,
-        fallback,
-      )
-      if (!item) return undefined
-      return models.find(item)
-    }
-
-    const configured = () => {
-      const item = agent.current()
-      const model = current()
-      if (!item || !model) return undefined
-      return getConfiguredAgentVariant({
-        agent: { model: item.model, variant: item.variant },
-        model: { providerID: model.provider.id, modelID: model.id, variants: model.variants },
-      })
-    }
-
-    const selected = () => scope()?.variant
-
-    const snapshot = () => {
-      const model = current()
-      return {
-        agent: agent.current()?.name,
-        model: model ? { providerID: model.provider.id, modelID: model.id } : undefined,
-        variant: selected(),
-      } satisfies State
-    }
-
-    const write = (next: Partial<State>) => {
-      const state = {
-        ...(scope() ?? { agent: agent.current()?.name }),
-        ...next,
-      } satisfies State
-
-      const session = id()
-      if (session) {
-        setSaved("session", session, state)
-        return
+          const match = name ? available.find((x) => x.name === name) : undefined
+          const value = match ?? available[0]
+          if (!value) return
+          setStore("current", value.name)
+          if (!value.model) return
+          setModel({
+            providerID: value.model.providerID,
+            modelID: value.model.modelID,
+          })
+          if (value.variant)
+            models.variant.set({ providerID: value.model.providerID, modelID: value.model.modelID }, value.variant)
+        },
+        move(direction: 1 | -1) {
+          const available = list()
+          if (available.length === 0) {
+            setStore("current", undefined)
+            return
+          }
+          let next = available.findIndex((x) => x.name === store.current) + direction
+          if (next < 0) next = available.length - 1
+          if (next >= available.length) next = 0
+          const value = available[next]
+          if (!value) return
+          setStore("current", value.name)
+          if (!value.model) return
+          setModel({
+            providerID: value.model.providerID,
+            modelID: value.model.modelID,
+          })
+          if (value.variant)
+            models.variant.set({ providerID: value.model.providerID, modelID: value.model.modelID }, value.variant)
+        },
       }
-      setStore("draft", state)
-    }
+    })()
 
-    const recent = createMemo(() => models.recent.list().map(models.find).filter(Boolean))
+    const model = (() => {
+      const models = useModels()
 
-    const model = {
-      ready: models.ready,
-      current,
-      recent,
-      list: models.list,
-      cycle(direction: 1 | -1) {
-        const items = recent()
-        const item = current()
-        if (!item) return
+      const [ephemeral, setEphemeral] = createStore<{
+        model: Record<string, ModelKey | undefined>
+      }>({
+        model: {},
+      })
 
-        const index = items.findIndex((entry) => entry?.provider.id === item.provider.id && entry?.id === item.id)
+      const resolveConfigured = () => {
+        if (!sync.data.config.model) return
+        const [providerID, modelID] = sync.data.config.model.split("/")
+        const key = { providerID, modelID }
+        if (isModelValid(key)) return key
+      }
+
+      const resolveRecent = () => {
+        for (const item of models.recent.list()) {
+          if (isModelValid(item)) return item
+        }
+      }
+
+      const resolveDefault = () => {
+        const defaults = providers.default()
+        for (const provider of providers.connected()) {
+          const configured = defaults[provider.id]
+          if (configured) {
+            const key = { providerID: provider.id, modelID: configured }
+            if (isModelValid(key)) return key
+          }
+
+          const first = Object.values(provider.models)[0]
+          if (!first) continue
+          const key = { providerID: provider.id, modelID: first.id }
+          if (isModelValid(key)) return key
+        }
+      }
+
+      const fallbackModel = createMemo<ModelKey | undefined>(() => {
+        return resolveConfigured() ?? resolveRecent() ?? resolveDefault()
+      })
+
+      const current = createMemo(() => {
+        const a = agent.current()
+        if (!a) return undefined
+        const key = getFirstValidModel(
+          () => ephemeral.model[a.name],
+          () => a.model,
+          fallbackModel,
+        )
+        if (!key) return undefined
+        return models.find(key)
+      })
+
+      const recent = createMemo(() => models.recent.list().map(models.find).filter(Boolean))
+
+      const cycle = (direction: 1 | -1) => {
+        const recentList = recent()
+        const currentModel = current()
+        if (!currentModel) return
+
+        const index = recentList.findIndex(
+          (x) => x?.provider.id === currentModel.provider.id && x?.id === currentModel.id,
+        )
         if (index === -1) return
 
         let next = index + direction
-        if (next < 0) next = items.length - 1
-        if (next >= items.length) next = 0
+        if (next < 0) next = recentList.length - 1
+        if (next >= recentList.length) next = 0
 
-        const entry = items[next]
-        if (!entry) return
-        model.set({ providerID: entry.provider.id, modelID: entry.id })
-      },
-      set(item: ModelKey | undefined, options?: { recent?: boolean }) {
-        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)
+        const val = recentList[next]
+        if (!val) return
+
+        model.set({
+          providerID: val.provider.id,
+          modelID: val.id,
         })
-      },
-      visible(item: ModelKey) {
-        return models.visible(item)
-      },
-      setVisibility(item: ModelKey, visible: boolean) {
-        models.setVisibility(item, visible)
-      },
-      variant: {
-        configured,
-        selected,
-        current() {
-          return resolveModelVariant({
-            variants: this.list(),
-            selected: this.selected(),
-            configured: this.configured(),
-          })
+      }
+
+      const set = (model: ModelKey | undefined, options?: { recent?: boolean }) => {
+        batch(() => {
+          const currentAgent = agent.current()
+          const next = model ?? fallbackModel()
+          if (currentAgent) setEphemeral("model", currentAgent.name, next)
+          if (model) models.setVisibility(model, true)
+          if (options?.recent && model) models.recent.push(model)
+        })
+      }
+
+      setModel = set
+
+      return {
+        ready: models.ready,
+        current,
+        recent,
+        list: models.list,
+        cycle,
+        set,
+        visible(model: ModelKey) {
+          return models.visible(model)
         },
-        list() {
-          const item = current()
-          if (!item?.variants) return []
-          return Object.keys(item.variants)
+        setVisibility(model: ModelKey, visible: boolean) {
+          models.setVisibility(model, visible)
         },
-        set(value: string | undefined) {
-          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,
+        variant: {
+          configured() {
+            const a = agent.current()
+            const m = current()
+            if (!a || !m) return undefined
+            return getConfiguredAgentVariant({
+              agent: { model: a.model, variant: a.variant },
+              model: { providerID: m.provider.id, modelID: m.id, variants: m.variants },
             })
-            write({ variant: value ?? null })
-          })
-        },
-        cycle() {
-          const items = this.list()
-          if (items.length === 0) return
-          this.set(
-            cycleModelVariant({
-              variants: items,
+          },
+          selected() {
+            const m = current()
+            if (!m) return undefined
+            return models.variant.get({ providerID: m.provider.id, modelID: m.id })
+          },
+          current() {
+            return resolveModelVariant({
+              variants: this.list(),
               selected: this.selected(),
               configured: this.configured(),
-            }),
-          )
+            })
+          },
+          list() {
+            const m = current()
+            if (!m) return []
+            if (!m.variants) return []
+            return Object.keys(m.variants)
+          },
+          set(value: string | undefined) {
+            const m = current()
+            if (!m) return
+            models.variant.set({ providerID: m.provider.id, modelID: m.id }, value)
+          },
+          cycle() {
+            const variants = this.list()
+            if (variants.length === 0) return
+            this.set(
+              cycleModelVariant({
+                variants,
+                selected: this.selected(),
+                configured: this.configured(),
+              }),
+            )
+          },
         },
-      },
-    }
+      }
+    })()
 
     const result = {
       slug: createMemo(() => base64Encode(sdk.directory)),
       model,
       agent,
-      session: {
-        reset() {
-          setStore("draft", undefined)
-        },
-        promote(dir: string, session: string) {
-          const next = clone(snapshot())
-          if (!next) return
-
-          if (dir === sdk.directory) {
-            setSaved("session", session, next)
-            setStore("draft", undefined)
-            return
-          }
-
-          handoff.set(handoffKey(dir, session), next)
-          setStore("draft", undefined)
-        },
-        restore(msg: { sessionID: string; agent: string; model: ModelKey; variant?: string }) {
-          const session = id()
-          if (!session) return
-          if (msg.sessionID !== session) return
-          if (saved.session[session] !== undefined) return
-          if (handoff.has(handoffKey(sdk.directory, session))) return
-
-          setSaved("session", session, {
-            agent: msg.agent,
-            model: msg.model,
-            variant: msg.variant ?? null,
-          })
-        },
-      },
     }
-
-    if (modelEnabled()) {
-      createEffect(() => {
-        const agent = result.agent.current()
-        const model = result.model.current()
-        modelProbe.set({
-          dir: sdk.directory,
-          sessionID: id(),
-          last: store.last,
-          agent: agent?.name,
-          model: model
-            ? {
-                providerID: model.provider.id,
-                modelID: model.id,
-                name: model.name,
-              }
-            : undefined,
-          variant: result.model.variant.current() ?? null,
-          selected: result.model.variant.selected(),
-          configured: result.model.variant.configured(),
-          pick: scope(),
-          base: undefined,
-          current: store.current,
-        })
-      })
-
-      onCleanup(() => modelProbe.clear())
-    }
-
     return result
   },
 })

packages/app/src/context/model-variant.test.ts

@@ -44,16 +44,6 @@ describe("model variant", () => {
     expect(value).toBe("high")
   })
 
-  test("lets an explicit default override the configured variant", () => {
-    const value = resolveModelVariant({
-      variants: ["low", "high", "xhigh"],
-      selected: null,
-      configured: "xhigh",
-    })
-
-    expect(value).toBeUndefined()
-  })
-
   test("cycles from configured variant to next", () => {
     const value = cycleModelVariant({
       variants: ["low", "high", "xhigh"],
@@ -73,14 +63,4 @@ describe("model variant", () => {
 
     expect(value).toBe("low")
   })
-
-  test("cycles from an explicit default to the first variant", () => {
-    const value = cycleModelVariant({
-      variants: ["low", "high", "xhigh"],
-      selected: null,
-      configured: "xhigh",
-    })
-
-    expect(value).toBe("low")
-  })
 })

packages/app/src/context/model-variant.ts

@@ -14,7 +14,7 @@ type Model = AgentModel & {
 
 type VariantInput = {
   variants: string[]
-  selected: string | null | undefined
+  selected: string | undefined
   configured: string | undefined
 }
 
@@ -29,7 +29,6 @@ export function getConfiguredAgentVariant(input: { agent: Agent | undefined; mod
 }
 
 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
@@ -37,7 +36,6 @@ export function resolveModelVariant(input: VariantInput) {
 
 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

packages/app/src/context/prompt.tsx

@@ -151,11 +151,6 @@ const MAX_PROMPT_SESSIONS = 20
 
 type PromptSession = ReturnType<typeof createPromptSession>
 
-type Scope = {
-  dir: string
-  id?: string
-}
-
 type PromptCacheEntry = {
   value: PromptSession
   dispose: VoidFunction
@@ -270,7 +265,6 @@ export const { use: usePrompt, provider: PromptProvider } = createSimpleContext(
     }
 
     const session = createMemo(() => load(params.dir!, params.id))
-    const pick = (scope?: Scope) => (scope ? load(scope.dir, scope.id) : session())
 
     return {
       ready: () => session().ready(),
@@ -286,8 +280,8 @@ export const { use: usePrompt, provider: PromptProvider } = createSimpleContext(
           session().context.updateComment(path, commentID, next),
         replaceComments: (items: FileContextItem[]) => session().context.replaceComments(items),
       },
-      set: (prompt: Prompt, cursorPosition?: number, scope?: Scope) => pick(scope).set(prompt, cursorPosition),
-      reset: (scope?: Scope) => pick(scope).reset(),
+      set: (prompt: Prompt, cursorPosition?: number) => session().set(prompt, cursorPosition),
+      reset: () => session().reset(),
     }
   },
 })

packages/app/src/pages/directory-layout.tsx

@@ -80,11 +80,11 @@ export default function Layout(props: ParentProps) {
   })
 
   return (
-    <Show when={state.resolved} keyed>
+    <Show when={state.resolved}>
       {(resolved) => (
-        <SDKProvider directory={() => resolved}>
+        <SDKProvider directory={resolved}>
           <SyncProvider>
-            <DirectoryDataProvider directory={resolved}>{props.children}</DirectoryDataProvider>
+            <DirectoryDataProvider directory={resolved()}>{props.children}</DirectoryDataProvider>
           </SyncProvider>
         </SDKProvider>
       )}

packages/app/src/pages/layout.tsx

@@ -1,16 +1,4 @@
-import {
-  batch,
-  createEffect,
-  createMemo,
-  For,
-  on,
-  onCleanup,
-  onMount,
-  ParentProps,
-  Show,
-  untrack,
-  type Accessor,
-} from "solid-js"
+import { batch, createEffect, createMemo, For, on, onCleanup, onMount, ParentProps, Show, untrack } from "solid-js"
 import { useNavigate, useParams } from "@solidjs/router"
 import { useLayout, LocalProject } from "@/context/layout"
 import { useGlobalSync } from "@/context/global-sync"
@@ -140,6 +128,7 @@ export default function Layout(props: ParentProps) {
 
   const [state, setState] = createStore({
     autoselect: !initialDirectory,
+    routing: false,
     busyWorkspaces: {} as Record<string, boolean>,
     hoverSession: undefined as string | undefined,
     hoverProject: undefined as string | undefined,
@@ -147,11 +136,12 @@ export default function Layout(props: ParentProps) {
     nav: undefined as HTMLElement | undefined,
     sortNow: Date.now(),
     sizing: false,
-    peek: undefined as string | undefined,
+    peek: undefined as LocalProject | undefined,
     peeked: false,
   })
 
   const editor = createInlineEditorController()
+  let token = 0
   const setBusy = (directory: string, value: boolean) => {
     const key = workspaceKey(directory)
     if (value) {
@@ -245,12 +235,6 @@ export default function Layout(props: ParentProps) {
     return layout.projects.list().find((project) => project.worktree === id)
   })
 
-  const peekProject = createMemo(() => {
-    const id = state.peek
-    if (!id) return
-    return layout.projects.list().find((project) => project.worktree === id)
-  })
-
   createEffect(() => {
     const p = hoverProjectData()
     if (p) {
@@ -258,7 +242,7 @@ export default function Layout(props: ParentProps) {
         clearTimeout(peekt)
         peekt = undefined
       }
-      setState("peek", p.worktree)
+      setState("peek", p)
       setState("peeked", true)
       return
     }
@@ -279,6 +263,7 @@ export default function Layout(props: ParentProps) {
 
   const autoselecting = createMemo(() => {
     if (params.dir) return false
+    if (state.routing) return true
     if (!state.autoselect) return false
     if (!pageReady()) return true
     if (!layoutReady()) return true
@@ -288,12 +273,16 @@ export default function Layout(props: ParentProps) {
   })
 
   createEffect(() => {
-    if (!state.autoselect) return
+    if (!state.autoselect && !state.routing) return
     const dir = params.dir
     if (!dir) return
     const directory = decode64(dir)
     if (!directory) return
-    setState("autoselect", false)
+    token += 1
+    batch(() => {
+      setState("autoselect", false)
+      setState("routing", false)
+    })
   })
 
   const editorOpen = editor.editorOpen
@@ -579,23 +568,32 @@ export default function Layout(props: ParentProps) {
         if (!value.ready) return
         if (!value.layoutReady) return
         if (!state.autoselect) return
+        if (state.routing) return
         if (value.dir) return
 
         const last = server.projects.last()
-
-        if (value.list.length === 0) {
-          if (!last) return
-          setState("autoselect", false)
-          openProject(last, false)
-          navigateToProject(last)
-          return
-        }
-
-        const next = value.list.find((project) => project.worktree === last) ?? value.list[0]
+        const next =
+          value.list.length === 0
+            ? last
+            : (value.list.find((project) => project.worktree === last)?.worktree ?? value.list[0]?.worktree)
         if (!next) return
-        setState("autoselect", false)
-        openProject(next.worktree, false)
-        navigateToProject(next.worktree)
+
+        const id = ++token
+        batch(() => {
+          setState("autoselect", false)
+          setState("routing", true)
+        })
+        void navigateToProject(next, () => id === token && !params.dir).then(
+          (navigated) => {
+            if (id !== token) return
+            if (navigated) return
+            setState("routing", false)
+          },
+          () => {
+            if (id !== token) return
+            setState("routing", false)
+          },
+        )
       },
     ),
   )
@@ -1229,14 +1227,19 @@ export default function Layout(props: ParentProps) {
     return root
   }
 
-  async function navigateToProject(directory: string | undefined) {
-    if (!directory) return
+  async function navigateToProject(directory: string | undefined, live = () => true) {
+    if (!directory || !live()) return false
     const root = projectRoot(directory)
-    server.projects.touch(root)
+    const touch = () => {
+      if (!live()) return false
+      layout.projects.open(root)
+      server.projects.touch(root)
+      return true
+    }
     const project = layout.projects.list().find((item) => item.worktree === root)
-    let dirs = project
-      ? effectiveWorkspaceOrder(root, [root, ...(project.sandboxes ?? [])], store.workspaceOrder[root])
-      : [root]
+    const sandboxes =
+      project?.sandboxes ?? globalSync.data.project.find((item) => item.worktree === root)?.sandboxes ?? []
+    let dirs = effectiveWorkspaceOrder(root, [root, ...sandboxes], store.workspaceOrder[root])
     const canOpen = (value: string | undefined) => {
       if (!value) return false
       return dirs.some((item) => workspaceKey(item) === workspaceKey(value))
@@ -1247,13 +1250,16 @@ export default function Layout(props: ParentProps) {
         .list({ directory: root })
         .then((x) => x.data ?? [])
         .catch(() => [] as string[])
+      if (!live()) return false
       dirs = effectiveWorkspaceOrder(root, [root, ...listed], store.workspaceOrder[root])
       return canOpen(target)
     }
     const openSession = async (target: { directory: string; id: string }) => {
+      if (!live()) return false
       if (!canOpen(target.directory)) return false
       const [data] = globalSync.child(target.directory, { bootstrap: false })
       if (data.session.some((item) => item.id === target.id)) {
+        if (!touch()) return false
         setStore("lastProjectSession", root, { directory: target.directory, id: target.id, at: Date.now() })
         navigateWithSidebarReset(`/${base64Encode(target.directory)}/session/${target.id}`)
         return true
@@ -1262,8 +1268,10 @@ export default function Layout(props: ParentProps) {
         .get({ sessionID: target.id })
         .then((x) => x.data)
         .catch(() => undefined)
+      if (!live()) return false
       if (!resolved?.directory) return false
       if (!canOpen(resolved.directory)) return false
+      if (!touch()) return false
       setStore("lastProjectSession", root, { directory: resolved.directory, id: resolved.id, at: Date.now() })
       navigateWithSidebarReset(`/${base64Encode(resolved.directory)}/session/${resolved.id}`)
       return true
@@ -1272,19 +1280,23 @@ export default function Layout(props: ParentProps) {
     const projectSession = store.lastProjectSession[root]
     if (projectSession?.id) {
       await refreshDirs(projectSession.directory)
+      if (!live()) return false
       const opened = await openSession(projectSession)
-      if (opened) return
+      if (opened) return true
+      if (!live()) return false
       clearLastProjectSession(root)
     }
 
+    if (!live()) return false
     const latest = latestRootSession(
       dirs.map((item) => globalSync.child(item, { bootstrap: false })[0]),
       Date.now(),
     )
     if (latest && (await openSession(latest))) {
-      return
+      return true
     }
 
+    if (!live()) return false
     const fetched = latestRootSession(
       await Promise.all(
         dirs.map(async (item) => ({
@@ -1297,11 +1309,14 @@ export default function Layout(props: ParentProps) {
       ),
       Date.now(),
     )
+    if (!live()) return false
     if (fetched && (await openSession(fetched))) {
-      return
+      return true
     }
 
+    if (!touch()) return false
     navigateWithSidebarReset(`/${base64Encode(root)}/session`)
+    return true
   }
 
   function navigateToSession(session: Session | undefined) {
@@ -1950,32 +1965,17 @@ export default function Layout(props: ParentProps) {
     setHoverSession,
   }
 
-  const SidebarPanel = (panelProps: {
-    project: Accessor<LocalProject | undefined>
-    mobile?: boolean
-    merged?: boolean
-  }) => {
-    const project = panelProps.project
+  const SidebarPanel = (panelProps: { project: LocalProject | undefined; mobile?: boolean; merged?: boolean }) => {
     const merged = createMemo(() => panelProps.mobile || (panelProps.merged ?? layout.sidebar.opened()))
     const hover = createMemo(() => !panelProps.mobile && panelProps.merged === false && !layout.sidebar.opened())
     const popover = createMemo(() => !!panelProps.mobile || panelProps.merged === false || layout.sidebar.opened())
     const projectName = createMemo(() => {
-      const item = project()
-      if (!item) return ""
-      return item.name || getFilename(item.worktree)
-    })
-    const projectId = createMemo(() => project()?.id ?? "")
-    const worktree = createMemo(() => project()?.worktree ?? "")
-    const slug = createMemo(() => {
-      const dir = worktree()
-      if (!dir) return ""
-      return base64Encode(dir)
-    })
-    const workspaces = createMemo(() => {
-      const item = project()
-      if (!item) return [] as string[]
-      return workspaceIds(item)
+      const project = panelProps.project
+      if (!project) return ""
+      return project.name || getFilename(project.worktree)
     })
+    const projectId = createMemo(() => panelProps.project?.id ?? "")
+    const workspaces = createMemo(() => workspaceIds(panelProps.project))
     const unseenCount = createMemo(() =>
       workspaces().reduce((total, directory) => total + notification.project.unseenCount(directory), 0),
     )
@@ -1984,15 +1984,10 @@ export default function Layout(props: ParentProps) {
         .filter((directory) => notification.project.unseenCount(directory) > 0)
         .forEach((directory) => notification.project.markViewed(directory))
     const workspacesEnabled = createMemo(() => {
-      const item = project()
-      if (!item) return false
-      if (item.vcs !== "git") return false
-      return layout.sidebar.workspaces(item.worktree)()
-    })
-    const canToggle = createMemo(() => {
-      const item = project()
-      if (!item) return false
-      return item.vcs === "git" || layout.sidebar.workspaces(item.worktree)()
+      const project = panelProps.project
+      if (!project) return false
+      if (project.vcs !== "git") return false
+      return layout.sidebar.workspaces(project.worktree)()
     })
     const homedir = createMemo(() => globalSync.data.path.home)
 
@@ -2011,197 +2006,168 @@ export default function Layout(props: ParentProps) {
           width: panelProps.mobile ? undefined : `${Math.max(Math.max(layout.sidebar.width(), 244) - 64, 0)}px`,
         }}
       >
-        <Show when={project()}>
-          <>
-            <div class="shrink-0 pl-1 py-1">
-              <div class="group/project flex items-start justify-between gap-2 py-2 pl-2 pr-0">
-                <div class="flex flex-col min-w-0">
-                  <InlineEditor
-                    id={`project:${projectId()}`}
-                    value={projectName}
-                    onSave={(next) => {
-                      const item = project()
-                      if (!item) return
-                      renameProject(item, next)
-                    }}
-                    class="text-14-medium text-text-strong truncate"
-                    displayClass="text-14-medium text-text-strong truncate"
-                    stopPropagation
-                  />
+        <Show when={panelProps.project}>
+          {(p) => (
+            <>
+              <div class="shrink-0 pl-1 py-1">
+                <div class="group/project flex items-start justify-between gap-2 py-2 pl-2 pr-0">
+                  <div class="flex flex-col min-w-0">
+                    <InlineEditor
+                      id={`project:${projectId()}`}
+                      value={projectName}
+                      onSave={(next) => renameProject(p(), next)}
+                      class="text-14-medium text-text-strong truncate"
+                      displayClass="text-14-medium text-text-strong truncate"
+                      stopPropagation
+                    />
 
-                  <Tooltip
-                    placement="bottom"
-                    gutter={2}
-                    value={worktree()}
-                    class="shrink-0"
-                    contentStyle={{
-                      "max-width": "640px",
-                      transform: "translate3d(52px, 0, 0)",
-                    }}
-                  >
-                    <span class="text-12-regular text-text-base truncate select-text">
-                      {worktree().replace(homedir(), "~")}
-                    </span>
-                  </Tooltip>
-                </div>
-
-                <DropdownMenu modal={!sidebarHovering()}>
-                  <DropdownMenu.Trigger
-                    as={IconButton}
-                    icon="dot-grid"
-                    variant="ghost"
-                    data-action="project-menu"
-                    data-project={slug()}
-                    class="shrink-0 size-6 rounded-md data-[expanded]:bg-surface-base-active"
-                    classList={{
-                      "opacity-0 group-hover/project:opacity-100 data-[expanded]:opacity-100": !panelProps.mobile,
-                    }}
-                    aria-label={language.t("common.moreOptions")}
-                  />
-                  <DropdownMenu.Portal>
-                    <DropdownMenu.Content class="mt-1">
-                      <DropdownMenu.Item
-                        onSelect={() => {
-                          const item = project()
-                          if (!item) return
-                          showEditProjectDialog(item)
-                        }}
-                      >
-                        <DropdownMenu.ItemLabel>{language.t("common.edit")}</DropdownMenu.ItemLabel>
-                      </DropdownMenu.Item>
-                      <DropdownMenu.Item
-                        data-action="project-workspaces-toggle"
-                        data-project={slug()}
-                        disabled={!canToggle()}
-                        onSelect={() => {
-                          const item = project()
-                          if (!item) return
-                          toggleProjectWorkspaces(item)
-                        }}
-                      >
-                        <DropdownMenu.ItemLabel>
-                          {workspacesEnabled()
-                            ? language.t("sidebar.workspaces.disable")
-                            : language.t("sidebar.workspaces.enable")}
-                        </DropdownMenu.ItemLabel>
-                      </DropdownMenu.Item>
-                      <DropdownMenu.Item
-                        data-action="project-clear-notifications"
-                        data-project={slug()}
-                        disabled={unseenCount() === 0}
-                        onSelect={clearNotifications}
-                      >
-                        <DropdownMenu.ItemLabel>
-                          {language.t("sidebar.project.clearNotifications")}
-                        </DropdownMenu.ItemLabel>
-                      </DropdownMenu.Item>
-                      <DropdownMenu.Separator />
-                      <DropdownMenu.Item
-                        data-action="project-close-menu"
-                        data-project={slug()}
-                        onSelect={() => {
-                          const dir = worktree()
-                          if (!dir) return
-                          closeProject(dir)
-                        }}
-                      >
-                        <DropdownMenu.ItemLabel>{language.t("common.close")}</DropdownMenu.ItemLabel>
-                      </DropdownMenu.Item>
-                    </DropdownMenu.Content>
-                  </DropdownMenu.Portal>
-                </DropdownMenu>
-              </div>
-            </div>
-
-            <div class="flex-1 min-h-0 flex flex-col">
-              <Show
-                when={workspacesEnabled()}
-                fallback={
-                  <>
-                    <div class="shrink-0 py-4">
-                      <Button
-                        size="large"
-                        icon="new-session"
-                        class="w-full"
-                        onClick={() => {
-                          const dir = worktree()
-                          if (!dir) return
-                          navigateWithSidebarReset(`/${base64Encode(dir)}/session`)
-                        }}
-                      >
-                        {language.t("command.session.new")}
-                      </Button>
-                    </div>
-                    <div class="flex-1 min-h-0">
-                      <LocalWorkspace
-                        ctx={workspaceSidebarCtx}
-                        project={project()!}
-                        sortNow={sortNow}
-                        mobile={panelProps.mobile}
-                        popover={popover()}
-                      />
-                    </div>
-                  </>
-                }
-              >
-                <>
-                  <div class="shrink-0 py-4">
-                    <Button
-                      size="large"
-                      icon="plus-small"
-                      class="w-full"
-                      onClick={() => {
-                        const item = project()
-                        if (!item) return
-                        createWorkspace(item)
+                    <Tooltip
+                      placement="bottom"
+                      gutter={2}
+                      value={p().worktree}
+                      class="shrink-0"
+                      contentStyle={{
+                        "max-width": "640px",
+                        transform: "translate3d(52px, 0, 0)",
                       }}
                     >
-                      {language.t("workspace.new")}
-                    </Button>
+                      <span class="text-12-regular text-text-base truncate select-text">
+                        {p().worktree.replace(homedir(), "~")}
+                      </span>
+                    </Tooltip>
                   </div>
-                  <div class="relative flex-1 min-h-0">
-                    <DragDropProvider
-                      onDragStart={handleWorkspaceDragStart}
-                      onDragEnd={handleWorkspaceDragEnd}
-                      onDragOver={handleWorkspaceDragOver}
-                      collisionDetector={closestCenter}
-                    >
-                      <DragDropSensors />
-                      <ConstrainDragXAxis />
-                      <div
-                        ref={(el) => {
-                          if (!panelProps.mobile) scrollContainerRef = el
-                        }}
-                        class="size-full flex flex-col py-2 gap-4 overflow-y-auto no-scrollbar [overflow-anchor:none]"
-                      >
-                        <SortableProvider ids={workspaces()}>
-                          <For each={workspaces()}>
-                            {(directory) => (
-                              <SortableWorkspace
-                                ctx={workspaceSidebarCtx}
-                                directory={directory}
-                                project={project()!}
-                                sortNow={sortNow}
-                                mobile={panelProps.mobile}
-                                popover={popover()}
-                              />
-                            )}
-                          </For>
-                        </SortableProvider>
+
+                  <DropdownMenu modal={!sidebarHovering()}>
+                    <DropdownMenu.Trigger
+                      as={IconButton}
+                      icon="dot-grid"
+                      variant="ghost"
+                      data-action="project-menu"
+                      data-project={base64Encode(p().worktree)}
+                      class="shrink-0 size-6 rounded-md data-[expanded]:bg-surface-base-active"
+                      classList={{
+                        "opacity-0 group-hover/project:opacity-100 data-[expanded]:opacity-100": !panelProps.mobile,
+                      }}
+                      aria-label={language.t("common.moreOptions")}
+                    />
+                    <DropdownMenu.Portal>
+                      <DropdownMenu.Content class="mt-1">
+                        <DropdownMenu.Item onSelect={() => showEditProjectDialog(p())}>
+                          <DropdownMenu.ItemLabel>{language.t("common.edit")}</DropdownMenu.ItemLabel>
+                        </DropdownMenu.Item>
+                        <DropdownMenu.Item
+                          data-action="project-workspaces-toggle"
+                          data-project={base64Encode(p().worktree)}
+                          disabled={p().vcs !== "git" && !layout.sidebar.workspaces(p().worktree)()}
+                          onSelect={() => toggleProjectWorkspaces(p())}
+                        >
+                          <DropdownMenu.ItemLabel>
+                            {layout.sidebar.workspaces(p().worktree)()
+                              ? language.t("sidebar.workspaces.disable")
+                              : language.t("sidebar.workspaces.enable")}
+                          </DropdownMenu.ItemLabel>
+                        </DropdownMenu.Item>
+                        <DropdownMenu.Item
+                          data-action="project-clear-notifications"
+                          data-project={base64Encode(p().worktree)}
+                          disabled={unseenCount() === 0}
+                          onSelect={clearNotifications}
+                        >
+                          <DropdownMenu.ItemLabel>
+                            {language.t("sidebar.project.clearNotifications")}
+                          </DropdownMenu.ItemLabel>
+                        </DropdownMenu.Item>
+                        <DropdownMenu.Separator />
+                        <DropdownMenu.Item
+                          data-action="project-close-menu"
+                          data-project={base64Encode(p().worktree)}
+                          onSelect={() => closeProject(p().worktree)}
+                        >
+                          <DropdownMenu.ItemLabel>{language.t("common.close")}</DropdownMenu.ItemLabel>
+                        </DropdownMenu.Item>
+                      </DropdownMenu.Content>
+                    </DropdownMenu.Portal>
+                  </DropdownMenu>
+                </div>
+              </div>
+
+              <div class="flex-1 min-h-0 flex flex-col">
+                <Show
+                  when={workspacesEnabled()}
+                  fallback={
+                    <>
+                      <div class="shrink-0 py-4">
+                        <Button
+                          size="large"
+                          icon="plus-small"
+                          class="w-full"
+                          onClick={() => navigateWithSidebarReset(`/${base64Encode(p().worktree)}/session`)}
+                        >
+                          {language.t("command.session.new")}
+                        </Button>
                       </div>
-                      <DragOverlay>
-                        <WorkspaceDragOverlay
-                          sidebarProject={sidebarProject}
-                          activeWorkspace={() => store.activeWorkspace}
-                          workspaceLabel={workspaceLabel}
+                      <div class="flex-1 min-h-0">
+                        <LocalWorkspace
+                          ctx={workspaceSidebarCtx}
+                          project={p()}
+                          sortNow={sortNow}
+                          mobile={panelProps.mobile}
+                          popover={popover()}
                         />
-                      </DragOverlay>
-                    </DragDropProvider>
-                  </div>
-                </>
-              </Show>
-            </div>
-          </>
+                      </div>
+                    </>
+                  }
+                >
+                  <>
+                    <div class="shrink-0 py-4">
+                      <Button size="large" icon="plus-small" class="w-full" onClick={() => createWorkspace(p())}>
+                        {language.t("workspace.new")}
+                      </Button>
+                    </div>
+                    <div class="relative flex-1 min-h-0">
+                      <DragDropProvider
+                        onDragStart={handleWorkspaceDragStart}
+                        onDragEnd={handleWorkspaceDragEnd}
+                        onDragOver={handleWorkspaceDragOver}
+                        collisionDetector={closestCenter}
+                      >
+                        <DragDropSensors />
+                        <ConstrainDragXAxis />
+                        <div
+                          ref={(el) => {
+                            if (!panelProps.mobile) scrollContainerRef = el
+                          }}
+                          class="size-full flex flex-col py-2 gap-4 overflow-y-auto no-scrollbar [overflow-anchor:none]"
+                        >
+                          <SortableProvider ids={workspaces()}>
+                            <For each={workspaces()}>
+                              {(directory) => (
+                                <SortableWorkspace
+                                  ctx={workspaceSidebarCtx}
+                                  directory={directory}
+                                  project={p()}
+                                  sortNow={sortNow}
+                                  mobile={panelProps.mobile}
+                                  popover={popover()}
+                                />
+                              )}
+                            </For>
+                          </SortableProvider>
+                        </div>
+                        <DragOverlay>
+                          <WorkspaceDragOverlay
+                            sidebarProject={sidebarProject}
+                            activeWorkspace={() => store.activeWorkspace}
+                            workspaceLabel={workspaceLabel}
+                          />
+                        </DragOverlay>
+                      </DragDropProvider>
+                    </div>
+                  </>
+                </Show>
+              </div>
+            </>
+          )}
         </Show>
 
         <div
@@ -2261,10 +2227,10 @@ export default function Layout(props: ParentProps) {
       onOpenHelp={() => platform.openLink("https://opencode.ai/desktop-feedback")}
       renderPanel={() =>
         mobile ? (
-          <SidebarPanel project={currentProject} mobile />
+          <SidebarPanel project={currentProject()} mobile />
         ) : (
           <Show when={currentProject()}>
-            <SidebarPanel project={currentProject} merged />
+            <SidebarPanel project={currentProject()} merged />
           </Show>
         )
       }
@@ -2392,8 +2358,8 @@ export default function Layout(props: ParentProps) {
                 arm()
               }}
             >
-              <Show when={peekProject()}>
-                <SidebarPanel project={peekProject} merged={false} />
+              <Show when={state.peek}>
+                <SidebarPanel project={state.peek} merged={false} />
               </Show>
             </div>
 

packages/app/src/pages/layout/sidebar-items.tsx

@@ -9,13 +9,14 @@ import { Tooltip } from "@opencode-ai/ui/tooltip"
 import { base64Encode } from "@opencode-ai/util/encode"
 import { getFilename } from "@opencode-ai/util/path"
 import { A, useNavigate, useParams } from "@solidjs/router"
-import { type Accessor, createMemo, For, type JSX, Match, onCleanup, Show, Switch } from "solid-js"
+import { type Accessor, createEffect, createMemo, For, type JSX, on, onCleanup, Show } from "solid-js"
+import { createStore } from "solid-js/store"
 import { useGlobalSync } from "@/context/global-sync"
 import { useLanguage } from "@/context/language"
 import { getAvatarColors, type LocalProject, useLayout } from "@/context/layout"
 import { useNotification } from "@/context/notification"
 import { usePermission } from "@/context/permission"
-import { messageAgentColor } from "@/utils/agent"
+import { agentColor } from "@/utils/agent"
 import { sessionPermissionRequest } from "../session/composer/session-request-tree"
 import { hasProjectPermissions } from "./helpers"
 
@@ -101,46 +102,94 @@ const SessionRow = (props: {
   warmPress: () => void
   warmFocus: () => void
   cancelHoverPrefetch: () => void
-}): JSX.Element => (
-  <A
-    href={`/${props.slug}/session/${props.session.id}`}
-    class={`flex items-center justify-between gap-3 min-w-0 text-left w-full focus:outline-none transition-[padding] ${props.mobile ? "pr-7" : ""} group-hover/session:pr-7 group-focus-within/session:pr-7 group-active/session:pr-7 ${props.dense ? "py-0.5" : "py-1"}`}
-    onPointerDown={props.warmPress}
-    onPointerEnter={props.warmHover}
-    onPointerLeave={props.cancelHoverPrefetch}
-    onFocus={props.warmFocus}
-    onClick={() => {
-      props.setHoverSession(undefined)
-      if (props.sidebarOpened()) return
-      props.clearHoverProjectSoon()
-    }}
-  >
-    <div class="flex items-center gap-1 w-full">
-      <div
-        class="shrink-0 size-6 flex items-center justify-center"
-        style={{ color: props.tint() ?? "var(--icon-interactive-base)" }}
-      >
-        <Switch fallback={<Icon name="dash" size="small" class="text-icon-weak" />}>
-          <Match when={props.isWorking()}>
-            <Spinner class="size-[15px]" />
-          </Match>
-          <Match when={props.hasPermissions()}>
-            <div class="size-1.5 rounded-full bg-surface-warning-strong" />
-          </Match>
-          <Match when={props.hasError()}>
-            <div class="size-1.5 rounded-full bg-text-diff-delete-base" />
-          </Match>
-          <Match when={props.unseenCount() > 0}>
-            <div class="size-1.5 rounded-full bg-text-interactive-base" />
-          </Match>
-        </Switch>
+}): JSX.Element => {
+  const [slot, setSlot] = createStore({
+    open: false,
+    show: false,
+    fade: false,
+  })
+
+  let f: number | undefined
+  const clear = () => {
+    if (f !== undefined) window.clearTimeout(f)
+    f = undefined
+  }
+
+  onCleanup(clear)
+  createEffect(
+    on(
+      () => props.isWorking(),
+      (on, prev) => {
+        clear()
+        if (on) {
+          setSlot({ open: true, show: true, fade: false })
+          return
+        }
+        if (prev) {
+          setSlot({ open: false, show: true, fade: true })
+          f = window.setTimeout(() => setSlot({ show: false, fade: false }), 260)
+          return
+        }
+        setSlot({ open: false, show: false, fade: false })
+      },
+      { defer: true },
+    ),
+  )
+
+  return (
+    <A
+      href={`/${props.slug}/session/${props.session.id}`}
+      class={`relative flex items-center min-w-0 text-left w-full focus:outline-none transition-[padding] ${props.mobile ? "pr-7" : ""} group-hover/session:pr-7 group-focus-within/session:pr-7 group-active/session:pr-7 ${props.dense ? "py-0.5" : "py-1"}`}
+      onPointerDown={props.warmPress}
+      onPointerEnter={props.warmHover}
+      onPointerLeave={props.cancelHoverPrefetch}
+      onFocus={props.warmFocus}
+      onClick={() => {
+        props.setHoverSession(undefined)
+        if (props.sidebarOpened()) return
+        props.clearHoverProjectSoon()
+      }}
+    >
+      <Show when={!props.isWorking() && (props.hasPermissions() || props.hasError() || props.unseenCount() > 0)}>
+        <div
+          classList={{
+            "absolute left-0 top-1/2 -translate-y-1/2 size-1.5 rounded-full": true,
+            "bg-surface-warning-strong": props.hasPermissions(),
+            "bg-text-diff-delete-base": !props.hasPermissions() && props.hasError(),
+            "bg-text-interactive-base": !props.hasPermissions() && !props.hasError() && props.unseenCount() > 0,
+          }}
+          aria-hidden="true"
+        />
+      </Show>
+
+      <div class="flex items-center min-w-0 grow-1">
+        <div
+          class="shrink-0 flex items-center justify-center overflow-hidden transition-[width,margin] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]"
+          style={{
+            width: slot.open ? "16px" : "0px",
+            "margin-right": slot.open ? "8px" : "0px",
+          }}
+          aria-hidden="true"
+        >
+          <Show when={slot.show}>
+            <div
+              class="transition-opacity duration-200 ease-out"
+              classList={{
+                "opacity-0": slot.fade,
+              }}
+            >
+              <Spinner class="size-4" style={{ color: props.tint() ?? "var(--icon-interactive-base)" }} />
+            </div>
+          </Show>
+        </div>
+
+        <span class="text-14-regular text-text-strong grow-1 min-w-0 overflow-hidden text-ellipsis truncate">
+          {props.session.title}
+        </span>
       </div>
-      <span class="text-14-regular text-text-strong grow-1 min-w-0 overflow-hidden text-ellipsis truncate">
-        {props.session.title}
-      </span>
-    </div>
-  </A>
-)
+    </A>
+  )
+}
 
 const SessionHoverPreview = (props: {
   mobile?: boolean
@@ -219,7 +268,19 @@ export const SessionItem = (props: SessionItemProps): JSX.Element => {
   })
 
   const tint = createMemo(() => {
-    return messageAgentColor(sessionStore.message[props.session.id], sessionStore.agent)
+    const messages = sessionStore.message[props.session.id]
+    if (!messages) return undefined
+    let user: Message | undefined
+    for (let i = messages.length - 1; i >= 0; i--) {
+      const message = messages[i]
+      if (message.role !== "user") continue
+      user = message
+      break
+    }
+    if (!user?.agent) return undefined
+
+    const agent = sessionStore.agent.find((a) => a.name === user.agent)
+    return agentColor(user.agent, agent?.color)
   })
 
   const hoverMessages = createMemo(() =>
@@ -298,7 +359,7 @@ export const SessionItem = (props: SessionItemProps): JSX.Element => {
   return (
     <div
       data-session-id={props.session.id}
-      class="group/session relative w-full rounded-md cursor-default pl-2 pr-3 transition-colors
+      class="group/session relative w-full rounded-md cursor-default pl-3 pr-3 transition-colors
              hover:bg-surface-raised-base-hover [&:has(:focus-visible)]:bg-surface-raised-base-hover has-[[data-expanded]]:bg-surface-raised-base-hover has-[.active]:bg-surface-base-active"
     >
       <Show
@@ -384,7 +445,7 @@ export const NewSessionItem = (props: {
     >
       <div class="flex items-center gap-1 w-full">
         <div class="shrink-0 size-6 flex items-center justify-center">
-          <Icon name="new-session" size="small" class="text-icon-weak" />
+          <Icon name="plus-small" size="small" class="text-icon-weak" />
         </div>
         <span class="text-14-regular text-text-strong grow-1 min-w-0 overflow-hidden text-ellipsis truncate">
           {label}

packages/app/src/pages/layout/sidebar-workspace.tsx

@@ -217,7 +217,7 @@ const WorkspaceActions = (props: {
     <Show when={!props.touch()}>
       <Tooltip value={props.language.t("command.session.new")} placement="top">
         <IconButton
-          icon="new-session"
+          icon="plus-small"
           variant="ghost"
           class="size-6 rounded-md opacity-0 pointer-events-none group-hover/workspace:opacity-100 group-hover/workspace:pointer-events-auto group-focus-within/workspace:opacity-100 group-focus-within/workspace:pointer-events-auto"
           data-action="workspace-new-session"

packages/app/src/pages/session.tsx

@@ -44,7 +44,7 @@ import { createOpenReviewFile, createSessionTabs, createSizing, focusTerminalByI
 import { MessageTimeline } from "@/pages/session/message-timeline"
 import { type DiffStyle, SessionReviewTab, type SessionReviewTabProps } from "@/pages/session/review-tab"
 import { useSessionLayout } from "@/pages/session/session-layout"
-import { syncSessionModel } from "@/pages/session/session-model-helpers"
+import { resetSessionModel, syncSessionModel } from "@/pages/session/session-model-helpers"
 import { SessionSidePanel } from "@/pages/session/session-side-panel"
 import { TerminalPanel } from "@/pages/session/terminal-panel"
 import { useSessionCommands } from "@/pages/session/use-session-commands"
@@ -490,7 +490,7 @@ export default function Page() {
       (next, prev) => {
         if (!prev) return
         if (next.dir === prev.dir && next.id === prev.id) return
-        if (prev.id && !next.id) local.session.reset()
+        if (!next.id) resetSessionModel(local)
       },
       { defer: true },
     ),
@@ -1477,7 +1477,6 @@ export default function Page() {
 
   const fork = (input: { sessionID: string; messageID: string }) => {
     const value = draft(input.messageID)
-    const dir = base64Encode(sdk.directory)
     return sdk.client.session
       .fork(input)
       .then((result) => {
@@ -1489,8 +1488,10 @@ export default function Page() {
           })
           return
         }
-        prompt.set(value, undefined, { dir, id: next.id })
-        navigate(`/${dir}/session/${next.id}`)
+        navigate(`/${base64Encode(sdk.directory)}/session/${next.id}`)
+        requestAnimationFrame(() => {
+          prompt.set(value)
+        })
       })
       .catch(fail)
   }

packages/app/src/pages/session/message-timeline.tsx

@@ -27,7 +27,6 @@ import { usePlatform } from "@/context/platform"
 import { useSettings } from "@/context/settings"
 import { useSDK } from "@/context/sdk"
 import { useSync } from "@/context/sync"
-import { messageAgentColor } from "@/utils/agent"
 import { parseCommentNote, readCommentMetadata } from "@/utils/comment-note"
 
 type MessageComment = {
@@ -247,7 +246,6 @@ export function MessageTimeline(props: {
     return sync.data.session_status[id] ?? idle
   })
   const working = createMemo(() => !!pending() || sessionStatus().type !== "idle")
-  const tint = createMemo(() => messageAgentColor(sessionMessages(), sync.data.agent))
 
   const [slot, setSlot] = createStore({
     open: false,
@@ -691,7 +689,7 @@ export function MessageTimeline(props: {
                               "opacity-0": slot.fade,
                             }}
                           >
-                            <Spinner class="size-4" style={{ color: tint() ?? "var(--icon-interactive-base)" }} />
+                            <Spinner class="size-4" style={{ color: "var(--icon-interactive-base)" }} />
                           </div>
                         </Show>
                       </div>

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

@@ -14,38 +14,145 @@ const message = (input?: Partial<Pick<UserMessage, "agent" | "model" | "variant"
   }) as UserMessage
 
 describe("syncSessionModel", () => {
-  test("restores the last message through session state", () => {
+  test("restores the last message model and variant", () => {
     const calls: unknown[] = []
 
     syncSessionModel(
       {
-        session: {
-          restore(value) {
-            calls.push(value)
+        agent: {
+          current() {
+            return undefined
+          },
+          set(value) {
+            calls.push(["agent", value])
+          },
+        },
+        model: {
+          set(value) {
+            calls.push(["model", value])
+          },
+          current() {
+            return { id: "claude-sonnet-4", provider: { id: "anthropic" } }
+          },
+          variant: {
+            set(value) {
+              calls.push(["variant", value])
+            },
           },
-          reset() {},
         },
       },
       message({ variant: "high" }),
     )
 
-    expect(calls).toEqual([message({ variant: "high" })])
+    expect(calls).toEqual([
+      ["agent", "build"],
+      ["model", { providerID: "anthropic", modelID: "claude-sonnet-4" }],
+      ["variant", "high"],
+    ])
+  })
+
+  test("skips variant when the model falls back", () => {
+    const calls: unknown[] = []
+
+    syncSessionModel(
+      {
+        agent: {
+          current() {
+            return undefined
+          },
+          set(value) {
+            calls.push(["agent", value])
+          },
+        },
+        model: {
+          set(value) {
+            calls.push(["model", value])
+          },
+          current() {
+            return { id: "gpt-5", provider: { id: "openai" } }
+          },
+          variant: {
+            set(value) {
+              calls.push(["variant", value])
+            },
+          },
+        },
+      },
+      message({ variant: "high" }),
+    )
+
+    expect(calls).toEqual([
+      ["agent", "build"],
+      ["model", { providerID: "anthropic", modelID: "claude-sonnet-4" }],
+    ])
   })
 })
 
 describe("resetSessionModel", () => {
-  test("clears draft session state", () => {
-    const calls: string[] = []
+  test("restores the current agent defaults", () => {
+    const calls: unknown[] = []
 
     resetSessionModel({
-      session: {
-        reset() {
-          calls.push("reset")
+      agent: {
+        current() {
+          return {
+            model: { providerID: "anthropic", modelID: "claude-sonnet-4" },
+            variant: "high",
+          }
+        },
+        set() {},
+      },
+      model: {
+        set(value) {
+          calls.push(["model", value])
+        },
+        current() {
+          return undefined
+        },
+        variant: {
+          set(value) {
+            calls.push(["variant", value])
+          },
         },
-        restore() {},
       },
     })
 
-    expect(calls).toEqual(["reset"])
+    expect(calls).toEqual([
+      ["model", { providerID: "anthropic", modelID: "claude-sonnet-4" }],
+      ["variant", "high"],
+    ])
+  })
+
+  test("clears the variant when the agent has none", () => {
+    const calls: unknown[] = []
+
+    resetSessionModel({
+      agent: {
+        current() {
+          return {
+            model: { providerID: "anthropic", modelID: "claude-sonnet-4" },
+          }
+        },
+        set() {},
+      },
+      model: {
+        set(value) {
+          calls.push(["model", value])
+        },
+        current() {
+          return undefined
+        },
+        variant: {
+          set(value) {
+            calls.push(["variant", value])
+          },
+        },
+      },
+    })
+
+    expect(calls).toEqual([
+      ["model", { providerID: "anthropic", modelID: "claude-sonnet-4" }],
+      ["variant", undefined],
+    ])
   })
 })

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

@@ -1,16 +1,48 @@
 import type { UserMessage } from "@opencode-ai/sdk/v2"
+import { batch } from "solid-js"
 
 type Local = {
-  session: {
-    reset(): void
-    restore(msg: UserMessage): void
+  agent: {
+    current():
+      | {
+          model?: UserMessage["model"]
+          variant?: string
+        }
+      | undefined
+    set(name: string | undefined): void
+  }
+  model: {
+    set(model: UserMessage["model"] | undefined): void
+    current():
+      | {
+          id: string
+          provider: { id: string }
+        }
+      | undefined
+    variant: {
+      set(value: string | undefined): void
+    }
   }
 }
 
 export const resetSessionModel = (local: Local) => {
-  local.session.reset()
+  const agent = local.agent.current()
+  if (!agent) return
+  batch(() => {
+    local.model.set(agent.model)
+    local.model.variant.set(agent.variant)
+  })
 }
 
 export const syncSessionModel = (local: Local, msg: UserMessage) => {
-  local.session.restore(msg)
+  batch(() => {
+    local.agent.set(msg.agent)
+    local.model.set(msg.model)
+  })
+
+  const model = local.model.current()
+  if (!model) return
+  if (model.provider.id !== msg.model.providerID) return
+  if (model.id !== msg.model.modelID) return
+  local.model.variant.set(msg.variant)
 }

packages/app/src/pages/session/use-session-commands.tsx

@@ -351,7 +351,7 @@ export const useSessionCommands = (actions: SessionCommandContext) => {
         description: language.t("command.model.choose.description"),
         keybind: "mod+'",
         slash: "model",
-        onSelect: () => dialog.show(() => <DialogSelectModel model={local.model} />),
+        onSelect: () => dialog.show(() => <DialogSelectModel />),
       }),
       mcpCommand({
         id: "mcp.toggle",

packages/app/src/testing/model-selection.ts

@@ -1,80 +0,0 @@
-type ModelKey = {
-  providerID: string
-  modelID: string
-}
-
-type State = {
-  agent?: string
-  model?: ModelKey | null
-  variant?: string | null
-}
-
-export type ModelProbeState = {
-  dir?: string
-  sessionID?: string
-  last?: {
-    type: "agent" | "model" | "variant"
-    agent?: string
-    model?: ModelKey | null
-    variant?: string | null
-  }
-  agent?: string
-  model?: (ModelKey & { name?: string }) | undefined
-  variant?: string | null
-  selected?: string | null
-  configured?: string
-  pick?: State
-  base?: State
-  current?: string
-}
-
-export type ModelWindow = Window & {
-  __opencode_e2e?: {
-    model?: {
-      enabled?: boolean
-      current?: ModelProbeState
-    }
-  }
-}
-
-const clone = (state?: State) => {
-  if (!state) return undefined
-  return {
-    ...state,
-    model: state.model ? { ...state.model } : state.model,
-  }
-}
-
-export const modelEnabled = () => {
-  if (typeof window === "undefined") return false
-  return (window as ModelWindow).__opencode_e2e?.model?.enabled === true
-}
-
-const root = () => {
-  if (!modelEnabled()) return
-  return (window as ModelWindow).__opencode_e2e?.model
-}
-
-export const modelProbe = {
-  set(input: ModelProbeState) {
-    const state = root()
-    if (!state) return
-    state.current = {
-      ...input,
-      model: input.model ? { ...input.model } : undefined,
-      last: input.last
-        ? {
-            ...input.last,
-            model: input.last.model ? { ...input.last.model } : input.last.model,
-          }
-        : undefined,
-      pick: clone(input.pick),
-      base: clone(input.base),
-    }
-  },
-  clear() {
-    const state = root()
-    if (!state) return
-    state.current = undefined
-  },
-}

packages/app/src/testing/terminal.ts

@@ -1,5 +1,3 @@
-import type { ModelProbeState } from "./model-selection"
-
 export const terminalAttr = "data-pty-id"
 
 export type TerminalProbeState = {
@@ -15,10 +13,6 @@ type TerminalProbeControl = {
 
 export type E2EWindow = Window & {
   __opencode_e2e?: {
-    model?: {
-      enabled?: boolean
-      current?: ModelProbeState
-    }
     terminal?: {
       enabled?: boolean
       terminals?: Record<string, TerminalProbeState>

packages/app/src/utils/agent.ts

@@ -9,15 +9,3 @@ export function agentColor(name: string, custom?: string) {
   if (custom) return custom
   return defaults[name] ?? defaults[name.toLowerCase()]
 }
-
-export function messageAgentColor(
-  list: readonly { role: string; agent?: string }[] | undefined,
-  agents: readonly { name: string; color?: string }[],
-) {
-  if (!list) return undefined
-  for (let i = list.length - 1; i >= 0; i--) {
-    const item = list[i]
-    if (item.role !== "user" || !item.agent) continue
-    return agentColor(item.agent, agents.find((agent) => agent.name === item.agent)?.color)
-  }
-}

packages/opencode/src/util/effect-zod.ts

@@ -1,92 +0,0 @@
-import { Schema, SchemaAST } from "effect"
-import z from "zod"
-
-export function zod<S extends Schema.Top>(schema: S): z.ZodType<Schema.Schema.Type<S>> {
-  return walk(schema.ast) as z.ZodType<Schema.Schema.Type<S>>
-}
-
-function walk(ast: SchemaAST.AST): z.ZodTypeAny {
-  const out = body(ast)
-  const desc = SchemaAST.resolveDescription(ast)
-  const ref = SchemaAST.resolveIdentifier(ast)
-  const next = desc ? out.describe(desc) : out
-  return ref ? next.meta({ ref }) : next
-}
-
-function body(ast: SchemaAST.AST): z.ZodTypeAny {
-  if (SchemaAST.isOptional(ast)) return opt(ast)
-
-  switch (ast._tag) {
-    case "String":
-      return z.string()
-    case "Number":
-      return z.number()
-    case "Boolean":
-      return z.boolean()
-    case "Null":
-      return z.null()
-    case "Undefined":
-      return z.undefined()
-    case "Any":
-    case "Unknown":
-      return z.unknown()
-    case "Never":
-      return z.never()
-    case "Literal":
-      return z.literal(ast.literal)
-    case "Union":
-      return union(ast)
-    case "Objects":
-      return object(ast)
-    case "Arrays":
-      return array(ast)
-    case "Declaration":
-      return decl(ast)
-    default:
-      return fail(ast)
-  }
-}
-
-function opt(ast: SchemaAST.AST): z.ZodTypeAny {
-  if (ast._tag !== "Union") return fail(ast)
-  const items = ast.types.filter((item) => item._tag !== "Undefined")
-  if (items.length === 1) return walk(items[0]).optional()
-  if (items.length > 1)
-    return z.union(items.map(walk) as [z.ZodTypeAny, z.ZodTypeAny, ...Array<z.ZodTypeAny>]).optional()
-  return z.undefined().optional()
-}
-
-function union(ast: SchemaAST.Union): z.ZodTypeAny {
-  const items = ast.types.map(walk)
-  if (items.length === 1) return items[0]
-  if (items.length < 2) return fail(ast)
-  return z.union(items as [z.ZodTypeAny, z.ZodTypeAny, ...Array<z.ZodTypeAny>])
-}
-
-function object(ast: SchemaAST.Objects): z.ZodTypeAny {
-  if (ast.propertySignatures.length === 0 && ast.indexSignatures.length === 1) {
-    const sig = ast.indexSignatures[0]
-    if (sig.parameter._tag !== "String") return fail(ast)
-    return z.record(z.string(), walk(sig.type))
-  }
-
-  if (ast.indexSignatures.length > 0) return fail(ast)
-
-  return z.object(Object.fromEntries(ast.propertySignatures.map((sig) => [String(sig.name), walk(sig.type)])))
-}
-
-function array(ast: SchemaAST.Arrays): z.ZodTypeAny {
-  if (ast.elements.length > 0) return fail(ast)
-  if (ast.rest.length !== 1) return fail(ast)
-  return z.array(walk(ast.rest[0]))
-}
-
-function decl(ast: SchemaAST.Declaration): z.ZodTypeAny {
-  if (ast.typeParameters.length !== 1) return fail(ast)
-  return walk(ast.typeParameters[0])
-}
-
-function fail(ast: SchemaAST.AST): never {
-  const ref = SchemaAST.resolveIdentifier(ast)
-  throw new Error(`unsupported effect schema: ${ref ?? ast._tag}`)
-}

packages/opencode/test/util/effect-zod.test.ts

@@ -1,61 +0,0 @@
-import { describe, expect, test } from "bun:test"
-import { Schema } from "effect"
-
-import { zod } from "../../src/util/effect-zod"
-
-describe("util.effect-zod", () => {
-  test("converts class schemas for route dto shapes", () => {
-    class Method extends Schema.Class<Method>("ProviderAuthMethod")({
-      type: Schema.Union([Schema.Literal("oauth"), Schema.Literal("api")]),
-      label: Schema.String,
-    }) {}
-
-    const out = zod(Method)
-
-    expect(out.meta()?.ref).toBe("ProviderAuthMethod")
-    expect(
-      out.parse({
-        type: "oauth",
-        label: "OAuth",
-      }),
-    ).toEqual({
-      type: "oauth",
-      label: "OAuth",
-    })
-  })
-
-  test("converts structs with optional fields, arrays, and records", () => {
-    const out = zod(
-      Schema.Struct({
-        foo: Schema.optional(Schema.String),
-        bar: Schema.Array(Schema.Number),
-        baz: Schema.Record(Schema.String, Schema.Boolean),
-      }),
-    )
-
-    expect(
-      out.parse({
-        bar: [1, 2],
-        baz: { ok: true },
-      }),
-    ).toEqual({
-      bar: [1, 2],
-      baz: { ok: true },
-    })
-    expect(
-      out.parse({
-        foo: "hi",
-        bar: [1],
-        baz: { ok: false },
-      }),
-    ).toEqual({
-      foo: "hi",
-      bar: [1],
-      baz: { ok: false },
-    })
-  })
-
-  test("throws for unsupported tuple schemas", () => {
-    expect(() => zod(Schema.Tuple([Schema.String, Schema.Number]))).toThrow("unsupported effect schema")
-  })
-})

packages/ui/src/components/button.css

@@ -115,7 +115,7 @@
 
     font-size: var(--font-size-small);
     line-height: var(--line-height-large);
-    gap: 8px;
+    gap: 4px;
 
     /* text-12-medium */
     font-family: var(--font-family-sans);
@@ -135,7 +135,7 @@
     }
 
     font-size: var(--font-size-small);
-    gap: 8px;
+    gap: 6px;
 
     /* text-12-medium */
     font-family: var(--font-family-sans);
@@ -153,7 +153,7 @@
       padding: 0 12px 0 8px;
     }
 
-    gap: 8px;
+    gap: 4px;
 
     /* text-14-medium */
     font-family: var(--font-family-sans);

packages/ui/src/components/icon.tsx

@@ -82,7 +82,6 @@ const icons = {
   check: `<path d="M5 11.9657L8.37838 14.7529L15 5.83398" stroke="currentColor" stroke-linecap="square"/>`,
   photo: `<path d="M16.6665 16.6666L11.6665 11.6666L9.99984 13.3333L6.6665 9.99996L3.08317 13.5833M2.9165 2.91663H17.0832V17.0833H2.9165V2.91663ZM13.3332 7.49996C13.3332 8.30537 12.6803 8.95829 11.8748 8.95829C11.0694 8.95829 10.4165 8.30537 10.4165 7.49996C10.4165 6.69454 11.0694 6.04163 11.8748 6.04163C12.6803 6.04163 13.3332 6.69454 13.3332 7.49996Z" stroke="currentColor" stroke-linecap="square"/>`,
   share: `<path d="M10.0013 12.0846L10.0013 3.33464M13.7513 6.66797L10.0013 2.91797L6.2513 6.66797M17.0846 10.418V17.0846H2.91797V10.418" stroke="currentColor" stroke-linecap="square"/>`,
-  shield: `<path d="M7.49935 9.3737L9.16602 11.0404L12.4994 7.70703M9.99935 2.08203L17.0827 4.3737V9.92565C17.0827 14.0694 13.3327 16.2487 9.99935 18.047C6.66602 16.2487 2.91602 14.0694 2.91602 9.92565V4.3737L9.99935 2.08203Z" stroke="currentColor" stroke-linecap="square"/>`,
   download: `<path d="M13.9583 10.6257L10 14.584L6.04167 10.6257M10 2.08398V13.959M16.25 17.9173H3.75" stroke="currentColor" stroke-linecap="square"/>`,
   menu: `<path d="M2.5 5H17.5M2.5 10H17.5M2.5 15H17.5" stroke="currentColor" stroke-linecap="square"/>`,
   server: `<rect x="3.35547" y="1.92969" width="13.2857" height="16.1429" stroke="currentColor"/><rect x="3.35547" y="11.9297" width="13.2857" height="6.14286" stroke="currentColor"/><rect x="12.8555" y="14.2852" width="1.42857" height="1.42857" fill="currentColor"/><rect x="10" y="14.2852" width="1.42857" height="1.42857" fill="currentColor"/>`,

packages/ui/src/components/select.tsx

@@ -19,7 +19,6 @@ export type SelectProps<T> = Omit<ComponentProps<typeof Kobalte<T>>, "value" | "
   children?: (item: T | undefined) => JSX.Element
   triggerStyle?: JSX.CSSProperties
   triggerVariant?: "settings"
-  triggerProps?: Record<string, string | number | boolean | undefined>
 }
 
 export function Select<T>(props: SelectProps<T> & Omit<ButtonProps, "children">) {
@@ -39,7 +38,6 @@ export function Select<T>(props: SelectProps<T> & Omit<ButtonProps, "children">)
     "children",
     "triggerStyle",
     "triggerVariant",
-    "triggerProps",
   ])
 
   const state = {
@@ -133,7 +131,6 @@ export function Select<T>(props: SelectProps<T> & Omit<ButtonProps, "children">)
       }}
     >
       <Kobalte.Trigger
-        {...local.triggerProps}
         disabled={props.disabled}
         data-slot="select-select-trigger"
         as={Button}

packages/ui/src/context/marked.tsx

@@ -428,11 +428,7 @@ async function highlightCodeBlocks(html: string): Promise<string> {
   const matches = [...html.matchAll(codeBlockRegex)]
   if (matches.length === 0) return html
 
-  const highlighter = await getSharedHighlighter({
-    themes: ["OpenCode"],
-    langs: [],
-    preferredHighlighter: "shiki-wasm",
-  })
+  const highlighter = await getSharedHighlighter({ themes: ["OpenCode"], langs: [] })
 
   let result = html
   for (const match of matches) {
@@ -483,11 +479,7 @@ export const { use: useMarked, provider: MarkedProvider } = createSimpleContext(
       }),
       markedShiki({
         async highlight(code, lang) {
-          const highlighter = await getSharedHighlighter({
-            themes: ["OpenCode"],
-            langs: [],
-            preferredHighlighter: "shiki-wasm",
-          })
+          const highlighter = await getSharedHighlighter({ themes: ["OpenCode"], langs: [] })
           if (!(lang in bundledLanguages)) {
             lang = "text"
           }