From 4d62c176c7fccdf43d01aa9901648038440e03e3 Mon Sep 17 00:00:00 2001
From: Yuhan Lei <lei.yuhan@outlook.com>
Date: Sun, 17 May 2026 22:12:27 +0800
Subject: [PATCH 1/3] fix(app): keep thinking picker clicks active

---
 .../e2e/models/model-picker-thinking.spec.ts  | 113 ++++++++++++++++++
 .../components/prompt-input/model-picker.tsx  |  17 ++-
 2 files changed, 125 insertions(+), 5 deletions(-)
 create mode 100644 packages/app/e2e/models/model-picker-thinking.spec.ts

diff --git a/packages/app/e2e/models/model-picker-thinking.spec.ts b/packages/app/e2e/models/model-picker-thinking.spec.ts
new file mode 100644
index 000000000..0b1bc1e6a
--- /dev/null
+++ b/packages/app/e2e/models/model-picker-thinking.spec.ts
@@ -0,0 +1,113 @@
+import type { Page } from "@playwright/test"
+import { expect, test } from "../fixtures"
+
+type ModelKey = {
+  providerID: string
+  modelID: string
+}
+
+type Probe = {
+  model?: ModelKey
+  variant?: string | null
+  selected?: string | null
+  variants?: string[]
+  models?: Array<ModelKey & { name: string }>
+}
+
+async function probe(page: Page): Promise<Probe | null> {
+  return page.evaluate(() => {
+    const win = window as Window & {
+      __opencode_e2e?: {
+        model?: {
+          current?: Probe
+          controls?: {
+            setModel?: (value: ModelKey | undefined) => void
+            setVariant?: (value: string | undefined) => void
+          }
+        }
+      }
+    }
+    return win.__opencode_e2e?.model?.current ?? null
+  })
+}
+
+async function setModel(page: Page, value: ModelKey) {
+  await page.evaluate((value) => {
+    const win = window as Window & {
+      __opencode_e2e?: {
+        model?: {
+          controls?: {
+            setModel?: (value: ModelKey | undefined) => void
+          }
+        }
+      }
+    }
+    const fn = win.__opencode_e2e?.model?.controls?.setModel
+    if (!fn) throw new Error("Model e2e model control is not enabled")
+    fn(value)
+  }, value)
+}
+
+async function setVariant(page: Page, value: string | undefined) {
+  await page.evaluate((value) => {
+    const win = window as Window & {
+      __opencode_e2e?: {
+        model?: {
+          controls?: {
+            setVariant?: (value: string | undefined) => void
+          }
+        }
+      }
+    }
+    const fn = win.__opencode_e2e?.model?.controls?.setVariant
+    if (!fn) throw new Error("Model e2e variant control is not enabled")
+    fn(value)
+  }, value)
+}
+
+async function chooseModelWithVariants(page: Page): Promise<string[] | undefined> {
+  await expect.poll(() => probe(page).then((state) => state?.models?.length ?? 0), { timeout: 30_000 }).toBeGreaterThan(0)
+
+  const candidates = (await probe(page))?.models ?? []
+  for (const candidate of candidates) {
+    await setModel(page, candidate)
+    await expect
+      .poll(() => probe(page).then((state) => `${state?.model?.providerID}:${state?.model?.modelID}`), {
+        timeout: 30_000,
+      })
+      .toBe(`${candidate.providerID}:${candidate.modelID}`)
+
+    const variants = (await probe(page))?.variants ?? []
+    if (variants.length > 0) return variants
+  }
+
+  return undefined
+}
+
+test("thinking option click updates variant from nested model picker", async ({ page, project }) => {
+  await page.setViewportSize({ width: 1440, height: 900 })
+  await project.open()
+
+  const variants = await chooseModelWithVariants(page)
+  test.skip(!variants, "no visible e2e model with thinking variants")
+  if (!variants) return
+  const target = variants.includes("xhigh") ? "xhigh" : variants[0]
+  if (!target) throw new Error("Expected at least one thinking variant")
+
+  await setVariant(page, undefined)
+  await expect.poll(() => probe(page).then((state) => state?.variant ?? null), { timeout: 30_000 }).toBe(null)
+
+  await page.locator('[data-action="prompt-model"]').first().click()
+
+  const thinkingTrigger = page.locator('[data-action="prompt-model-thinking-trigger"]').first()
+  await expect(thinkingTrigger).toBeVisible()
+  await expect(thinkingTrigger).toBeEnabled()
+  await thinkingTrigger.click()
+
+  const option = page.locator(`[data-action="prompt-model-thinking-option"][data-variant="${target}"]`).first()
+  await expect(option).toBeVisible()
+  await option.click()
+
+  await expect.poll(() => probe(page).then((state) => state?.selected ?? null), { timeout: 30_000 }).toBe(target)
+  await expect.poll(() => probe(page).then((state) => state?.variant ?? null), { timeout: 30_000 }).toBe(target)
+})
diff --git a/packages/app/src/components/prompt-input/model-picker.tsx b/packages/app/src/components/prompt-input/model-picker.tsx
index f918adc4d..cdbfeeac9 100644
--- a/packages/app/src/components/prompt-input/model-picker.tsx
+++ b/packages/app/src/components/prompt-input/model-picker.tsx
@@ -107,6 +107,7 @@ const ThinkingLevelSection: Component<{ model?: ModelState }> = (props) => {
       <Kobalte modal={false} placement="right-start" gutter={4}>
         <Kobalte.Trigger
           disabled={!supported()}
+          data-action="prompt-model-thinking-trigger"
           class="group/think w-full h-[30px] px-2 gap-3 flex items-center rounded-[6px] text-body text-fg-base text-left hover:bg-row-hover-overlay hover:text-fg-strong data-[expanded]:bg-row-hover-overlay data-[expanded]:text-fg-strong disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:text-fg-base"
         >
           <span>{language.t("dialog.model.variant")}</span>
@@ -124,6 +125,8 @@ const ThinkingLevelSection: Component<{ model?: ModelState }> = (props) => {
                   <button
                     type="button"
                     data-picker-item=""
+                    data-action="prompt-model-thinking-option"
+                    data-variant={opt}
                     data-selected={opt === current() ? "" : undefined}
                     class="w-full"
                     onClick={() => model.variant.set(opt === "default" ? undefined : opt)}
@@ -167,6 +170,8 @@ export function ModelSelectorPopover(props: {
     setStore("open", false)
     setExternalOpen(false)
   }
+  const isPickerContentTarget = (target: EventTarget | null) =>
+    target instanceof Element && !!target.closest("[data-picker-content]")
   let ignoreFocusOutsideForPointerInside = false
 
   const handlePointerDownInside = () => {
@@ -179,6 +184,10 @@ export function ModelSelectorPopover(props: {
   const handleFocusOutside = (
     event: Parameters<NonNullable<ComponentProps<typeof Kobalte.Content>["onFocusOutside"]>>[0],
   ) => {
+    if (isPickerContentTarget(event.target)) {
+      event.preventDefault()
+      return
+    }
     if (ignoreFocusOutsideForPointerInside) {
       ignoreFocusOutsideForPointerInside = false
       event.preventDefault()
@@ -216,11 +225,9 @@ export function ModelSelectorPopover(props: {
             // The nested ThinkingLevel popover renders into Kobalte.Portal, so
             // its Content sits outside this outer Content's DOM subtree. Without
             // this guard, clicks inside the inner picker satisfy "outside" for
-            // the outer popover and dismiss the model picker. Both popovers tag
-            // their content with data-picker-content, so a closest() hit means
-            // the click landed inside a nested picker — keep the outer open.
-            const target = event.target
-            if (target instanceof Element && target.closest("[data-picker-content]")) {
+            // the outer popover and dismiss the model picker before the inner
+            // button click runs.
+            if (isPickerContentTarget(event.target)) {
               event.preventDefault()
               return
             }

From 5c363725d9f494e91069cd937f3444a4eeb9548e Mon Sep 17 00:00:00 2001
From: Yuhan Lei <lei.yuhan@outlook.com>
Date: Sun, 17 May 2026 23:15:57 +0800
Subject: [PATCH 2/3] fix(app): hoist picker target helper

---
 packages/app/src/components/prompt-input/model-picker.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/app/src/components/prompt-input/model-picker.tsx b/packages/app/src/components/prompt-input/model-picker.tsx
index cdbfeeac9..91449ab1c 100644
--- a/packages/app/src/components/prompt-input/model-picker.tsx
+++ b/packages/app/src/components/prompt-input/model-picker.tsx
@@ -146,6 +146,9 @@ const ThinkingLevelSection: Component<{ model?: ModelState }> = (props) => {
 type ModelSelectorTriggerProps = Omit<ComponentProps<typeof Kobalte.Trigger>, "as" | "ref">
 type Dismiss = "escape" | "outside" | "select"
 
+const isPickerContentTarget = (target: EventTarget | null) =>
+  target instanceof Element && !!target.closest("[data-picker-content]")
+
 export function ModelSelectorPopover(props: {
   provider?: string
   model?: ModelState
@@ -170,8 +173,6 @@ export function ModelSelectorPopover(props: {
     setStore("open", false)
     setExternalOpen(false)
   }
-  const isPickerContentTarget = (target: EventTarget | null) =>
-    target instanceof Element && !!target.closest("[data-picker-content]")
   let ignoreFocusOutsideForPointerInside = false
 
   const handlePointerDownInside = () => {

From 5a35722ca65d9a79bcbc0e4fcc30309b7385ab00 Mon Sep 17 00:00:00 2001
From: Yuhan Lei <lei.yuhan@outlook.com>
Date: Sun, 17 May 2026 23:50:14 +0800
Subject: [PATCH 3/3] test(app): include thinking picker in smoke e2e

---
 packages/app/e2e/models/model-picker-thinking.spec.ts   | 2 +-
 packages/opencode/test/config/e2e-smoke-tagging.test.ts | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/app/e2e/models/model-picker-thinking.spec.ts b/packages/app/e2e/models/model-picker-thinking.spec.ts
index 0b1bc1e6a..7fb7bd151 100644
--- a/packages/app/e2e/models/model-picker-thinking.spec.ts
+++ b/packages/app/e2e/models/model-picker-thinking.spec.ts
@@ -84,7 +84,7 @@ async function chooseModelWithVariants(page: Page): Promise<string[] | undefined
   return undefined
 }
 
-test("thinking option click updates variant from nested model picker", async ({ page, project }) => {
+test("@smoke thinking option click updates variant from nested model picker", async ({ page, project }) => {
   await page.setViewportSize({ width: 1440, height: 900 })
   await project.open()
 
diff --git a/packages/opencode/test/config/e2e-smoke-tagging.test.ts b/packages/opencode/test/config/e2e-smoke-tagging.test.ts
index 68a7e114a..d979b7d65 100644
--- a/packages/opencode/test/config/e2e-smoke-tagging.test.ts
+++ b/packages/opencode/test/config/e2e-smoke-tagging.test.ts
@@ -14,6 +14,7 @@ const expectedSmokeTests = [
   "packages/app/e2e/app/session.spec.ts:@smoke session composer matches home structure without docktray or agent control",
   "packages/app/e2e/app/shell-frame.spec.ts:@smoke shell frame exposes stable desktop hooks",
   "packages/app/e2e/files/file-tree.spec.ts:@smoke review tab no longer renders the legacy file-tree sub-panel",
+  "packages/app/e2e/models/model-picker-thinking.spec.ts:@smoke thinking option click updates variant from nested model picker",
   "packages/app/e2e/prompt/first-message-reply.spec.ts:@smoke first replied message in a new session renders without page errors",
   "packages/app/e2e/prompt/prompt.spec.ts:@smoke can send a prompt and receive a reply",
   "packages/app/e2e/release-notes/release-notes-toast.spec.ts:@smoke shows subtle toast when stored version is older than current",