From 99408f1e3f528224e8b17095845219769ed5e8d8 Mon Sep 17 00:00:00 2001
From: usrnk1 <7547651+usrnk1@users.noreply.github.com>
Date: Thu, 29 Oct 2026 09:27:34 +0100
Subject: [PATCH 1/3] feat(app): align searchable dialog layouts

---
 .../regression/mcp-workspace-toggle.spec.ts   | 41 ++++++++++++
 .../app/src/providers/connect/mcp-dialog.tsx  | 63 ++++++++++++------
 packages/app/src/runtime/i18n/en.ts           |  2 +-
 packages/app/src/runtime/plugin/dialogs.tsx   |  8 +--
 .../app/src/session/commands/fork-dialog.tsx  | 59 ++++++++++-------
 packages/app/src/shell/search-list.css        | 66 +++++++++++++++++--
 6 files changed, 186 insertions(+), 53 deletions(-)

diff --git a/packages/app/e2e/regression/mcp-workspace-toggle.spec.ts b/packages/app/e2e/regression/mcp-workspace-toggle.spec.ts
index e160098bf6d9..03cad2d1d3dd 100644
--- a/packages/app/e2e/regression/mcp-workspace-toggle.spec.ts
+++ b/packages/app/e2e/regression/mcp-workspace-toggle.spec.ts
@@ -255,6 +255,47 @@ for (const surface of ["dialog"] as const) {
   })
 }
 
+test("the MCP list shrinks with matches and keeps its search anchored while scrolling", async ({ page }) => {
+  const view = await open(page, {
+    surface: "dialog",
+    mcp: ["figma-desktop", ...Array.from({ length: 24 }, (_, index) => `server-${String(index).padStart(2, "0")}`)].map(
+      (name) => ({ name, status: { status: "disabled" } }),
+    ),
+  })
+  const input = view.panel.getByRole("combobox", { name: "Search MCPs", exact: true })
+  const container = page.locator('[data-component="dialog-v2"] [data-slot="dialog-container"]')
+  const geometry = () =>
+    container.evaluate((element) => ({
+      height: element.getBoundingClientRect().height,
+      inputTop: element.querySelector('[role="combobox"]')!.getBoundingClientRect().top,
+    }))
+
+  await expect(input).toBeFocused()
+  await expect(view.panel.getByRole("option")).toHaveCount(25)
+  await input.hover()
+  const initial = await geometry()
+
+  await input.fill("figma-desktop")
+  await expect(view.panel.getByRole("option")).toHaveCount(1)
+  await expect.poll(async () => (await geometry()).height).toBeLessThan(initial.height - 100)
+  await expect.poll(async () => (await geometry()).inputTop).toBeCloseTo(initial.inputTop, 0)
+
+  await input.clear()
+  await expect(view.panel.getByRole("option")).toHaveCount(25)
+  const scroll = view.panel.locator('[data-slot="search-list-scroll"]')
+
+  await expect.poll(() => scroll.evaluate((element) => element.scrollHeight - element.clientHeight)).toBeGreaterThan(0)
+  await expect.poll(async () => (await geometry()).height).toBeLessThanOrEqual(480)
+  await input.press("End")
+  const last = view.panel.getByRole("option", { name: "server-23", exact: true })
+
+  await expect(last).toHaveAttribute("aria-selected", "true")
+  await expect(last).toBeInViewport()
+  await expect.poll(() => scroll.evaluate((element) => element.scrollTop)).toBeGreaterThan(0)
+  await expect.poll(async () => (await geometry()).inputTop).toBeCloseTo(initial.inputTop, 0)
+  await expect(input).toBeFocused()
+})
+
 test("toggling an MCP from the dialog keeps it highlighted", async ({ page }) => {
   const connected = new Set<string>()
   const names = ["alpha-mcp", "figma-desktop", "zeta-mcp"]
diff --git a/packages/app/src/providers/connect/mcp-dialog.tsx b/packages/app/src/providers/connect/mcp-dialog.tsx
index 7e0023061f59..b2c6cadf462a 100644
--- a/packages/app/src/providers/connect/mcp-dialog.tsx
+++ b/packages/app/src/providers/connect/mcp-dialog.tsx
@@ -1,6 +1,7 @@
 import { Component, createEffect, createMemo, on, Show } from "solid-js"
 import { createStore } from "solid-js/store"
 import fuzzysort from "fuzzysort"
+import type { McpServer } from "@opencode/client/promise"
 import { useData } from "@/runtime/server/current"
 import { useWorkspaceLocation } from "@/workspaces/location"
 import { Button } from "@opencode/ui/button"
@@ -34,10 +35,36 @@ export const DialogSelectMcp: Component = () => {
 /** Lists the MCP servers of `directory`; `server` opens directly on that server's error. */
 export const DialogMcp: Component<{ directory: string; server?: string }> = (props) => {
   const data = useData()
-  const language = useLanguage()
-  const platform = usePlatform()
   const directory = () => props.directory
   const toggle = useMcpToggle(directory)
+  const target = () => {
+    const current = toggle.isPending ? toggle.variables : undefined
+
+    return typeof current === "string" ? current : current?.name
+  }
+
+  createEffect(() => void data.location.mcp.server.sync({ directory: directory() }).catch(() => undefined))
+
+  return (
+    <McpDialog
+      servers={data.location.mcp.server.list({ directory: directory() })}
+      server={props.server}
+      pending={toggle.isPending}
+      target={target()}
+      onToggle={(input) => toggle.mutate(input)}
+    />
+  )
+}
+
+export function McpDialog(props: {
+  servers: McpServer[] | undefined
+  server?: string
+  pending: boolean
+  target?: string
+  onToggle: (input: string | { name: string; enabled: boolean }) => void
+}) {
+  const language = useLanguage()
+  const platform = usePlatform()
 
   const [store, setStore] = createStore<{ detail?: string; copied: boolean; query: string }>({
     detail: props.server,
@@ -45,11 +72,9 @@ export const DialogMcp: Component<{ directory: string; server?: string }> = (pro
     query: "",
   })
 
-  const loaded = () => data.location.mcp.server.list({ directory: directory() })
+  const loaded = () => props.servers
   const servers = createMemo(() => loaded() ?? [])
 
-  createEffect(() => void data.location.mcp.server.sync({ directory: directory() }).catch(() => undefined))
-
   const items = createMemo(() =>
     servers()
       .map((server) => ({ name: server.name, status: server.status.status }))
@@ -77,8 +102,8 @@ export const DialogMcp: Component<{ directory: string; server?: string }> = (pro
   const toggleServer = (name: string) => {
     const status = servers().find((server) => server.name === name)?.status.status
 
-    if (!status || status === "pending" || toggle.isPending) return
-    toggle.mutate(name)
+    if (!status || status === "pending" || props.pending) return
+    props.onToggle(name)
   }
 
   const select = (name: string) => {
@@ -126,7 +151,7 @@ export const DialogMcp: Component<{ directory: string; server?: string }> = (pro
 
   return (
     // Like the model picker and the TUI, the list has no visible header; the search field leads.
-    <Dialog class="command-palette search-list-dialog mcp-dialog" size="large">
+    <Dialog class="command-palette command-palette-compact search-list-dialog mcp-dialog" size="large" fit>
       <Show
         when={failure()}
         fallback={
@@ -172,12 +197,12 @@ export const DialogMcp: Component<{ directory: string; server?: string }> = (pro
                 </Button>
                 <Button
                   variant="ghost"
-                  disabled={toggle.isPending}
-                  onClick={() => toggle.mutate({ name: current().name, enabled: false })}
+                  disabled={props.pending}
+                  onClick={() => props.onToggle({ name: current().name, enabled: false })}
                 >
                   {language.t("dialog.mcp.error.disable")}
                 </Button>
-                <Button variant="neutral" disabled={toggle.isPending} onClick={() => toggleServer(current().name)}>
+                <Button variant="neutral" disabled={props.pending} onClick={() => toggleServer(current().name)}>
                   {language.t("common.retry")}
                 </Button>
               </ErrorDetails>
@@ -207,11 +232,7 @@ export const DialogMcp: Component<{ directory: string; server?: string }> = (pro
               // The switch would start sign-in anyway, so an auth-gated server shows that action instead.
               const signIn = () => status()?.status === "needs_auth" && !!server()?.integrationID
 
-              const busy = () => {
-                const target = toggle.isPending ? toggle.variables : undefined
-
-                return (typeof target === "string" ? target : target?.name) === item().name
-              }
+              const busy = () => props.target === item().name
 
               // The dot shows the status, as in the session's MCP list; the words stay for assistive technology.
               const label = () => {
@@ -221,9 +242,11 @@ export const DialogMcp: Component<{ directory: string; server?: string }> = (pro
               }
 
               return (
-                <div {...row} data-option-key={item().name} data-status={status()?.status}>
+                <div {...row} data-option-key={item().name} data-status={status()?.status} data-size="compact">
                   <span class="mcp-dialog-lead">
-                    <span class="mcp-status-dot" data-status={status()?.status} aria-hidden="true" />
+                    <span class="mcp-dialog-status" aria-hidden="true">
+                      <span class="mcp-status-dot" data-status={status()?.status} />
+                    </span>
                     <TruncatedText text={item().name} class="mcp-dialog-name" />
                   </span>
                   <div class="mcp-trailing" onClick={(event) => event.stopPropagation()}>
@@ -247,8 +270,8 @@ export const DialogMcp: Component<{ directory: string; server?: string }> = (pro
                           description={label()}
                           class="[&_[data-slot=switch-description]]:sr-only"
                           onChange={(enabled) => {
-                            if (toggle.isPending) return
-                            toggle.mutate({ name: item().name, enabled })
+                            if (props.pending) return
+                            props.onToggle({ name: item().name, enabled })
                           }}
                         >
                           <span class="sr-only">{item().name}</span>
diff --git a/packages/app/src/runtime/i18n/en.ts b/packages/app/src/runtime/i18n/en.ts
index eedeb08fd650..3fdaf09a1867 100644
--- a/packages/app/src/runtime/i18n/en.ts
+++ b/packages/app/src/runtime/i18n/en.ts
@@ -378,7 +378,7 @@ export const dict = {
   "dialog.mcp.error.details":
     "MCP server: {{name}}\nStatus: failed\nConfiguration: mcp.servers.{{name}}\nError: {{error}}",
   "dialog.fork.search.empty": "No messages found",
-  "dialog.fork.description": "Edit an earlier message in a new session",
+  "dialog.fork.description": "Choose a message to fork from",
 
   "mcp.status.connected": "Connected",
   "mcp.status.failed": "Failed",
diff --git a/packages/app/src/runtime/plugin/dialogs.tsx b/packages/app/src/runtime/plugin/dialogs.tsx
index ac74d71ff9c1..0285b64aae5e 100644
--- a/packages/app/src/runtime/plugin/dialogs.tsx
+++ b/packages/app/src/runtime/plugin/dialogs.tsx
@@ -129,7 +129,7 @@ export function PluginSelectDialog<T>(props: { options: SelectOptions<T>; done:
   })
 
   return (
-    <Dialog class="command-palette" size="large">
+    <Dialog class="command-palette command-palette-compact" size="large" fit>
       <div class="sr-only">
         <DialogTitle>{props.options.title}</DialogTitle>
       </div>
@@ -153,15 +153,15 @@ export function PluginSelectDialog<T>(props: { options: SelectOptions<T>; done:
           onClose={() => props.done(undefined)}
         >
           {(row, attrs) => (
-            <button type="button" class="command-palette-row group" {...attrs}>
+            <button type="button" class="command-palette-row group" data-size="compact" {...attrs}>
               <div class="command-palette-row-main">
                 <div class="command-palette-row-text">
-                  <span class="command-palette-title palette-menu-title">
+                  <span class="command-palette-title palette-menu-title" dir="auto">
                     <SearchHighlight text={row().title} />
                   </span>
                   <Show when={row().description}>
                     {(description) => (
-                      <span class="command-palette-description">
+                      <span class="command-palette-description" dir="auto">
                         <SearchHighlight text={description()} />
                       </span>
                     )}
diff --git a/packages/app/src/session/commands/fork-dialog.tsx b/packages/app/src/session/commands/fork-dialog.tsx
index dbec3edfe871..b11c40e1b22d 100644
--- a/packages/app/src/session/commands/fork-dialog.tsx
+++ b/packages/app/src/session/commands/fork-dialog.tsx
@@ -2,12 +2,14 @@ import { Component, createMemo, For, Show } from "solid-js"
 import { useParams } from "@solidjs/router"
 import { useData } from "@/runtime/server/current"
 import { useDialog } from "@opencode/ui/context/dialog"
-import { Dialog, DialogBody, DialogHeader, DialogTitleGroup } from "@opencode/ui/dialog"
+import { Dialog, DialogBody, DialogTitle, DialogTitleGroup } from "@opencode/ui/dialog"
 import { useFilteredList } from "@opencode/ui/hooks"
 import { Icon } from "@opencode/ui/icon"
 import { TextInput } from "@opencode/ui/text-input"
 import { useLanguage } from "@/runtime/i18n/language"
 import { useSessionFork } from "@/session/fork"
+import "@/shell/commands/dialog.css"
+import "@/shell/palette-menu.css"
 import "@/shell/search-list.css"
 
 interface ForkableMessage {
@@ -24,7 +26,6 @@ export const DialogFork: Component = () => {
   const params = useParams()
   const data = useData()
   const dialog = useDialog()
-  const language = useLanguage()
   const fork = useSessionFork()
 
   const messages = createMemo((): ForkableMessage[] => {
@@ -48,21 +49,30 @@ export const DialogFork: Component = () => {
     return result.reverse()
   })
 
-  const handleSelect = (item: ForkableMessage | undefined) => {
+  const handleSelect = (messageID: string) => {
     const sessionID = params.id
 
-    if (!item || !sessionID) return
+    if (!sessionID) return
 
-    void fork({ sessionID, messageID: item.id }).then((opened) => {
+    void fork({ sessionID, messageID }).then((opened) => {
       if (opened) dialog.close()
     })
   }
 
+  return <ForkDialog messages={messages()} onSelect={handleSelect} />
+}
+
+export function ForkDialog(props: { messages: ForkableMessage[]; onSelect: (messageID: string) => void }) {
+  const language = useLanguage()
+  const select = (item: ForkableMessage | undefined) => {
+    if (item) props.onSelect(item.id)
+  }
+
   const list = useFilteredList({
-    items: messages,
+    items: () => props.messages,
     key: (x) => x.id,
     filterKeys: ["text"],
-    onSelect: handleSelect,
+    onSelect: select,
   })
 
   let resultsRef: HTMLDivElement | undefined
@@ -71,7 +81,7 @@ export const DialogFork: Component = () => {
     // The pointer leaving the rows clears the highlight, so Enter then forks from the newest match.
     if (event.key === "Enter" && !event.isComposing && !list.active()) {
       event.preventDefault()
-      handleSelect(list.flat()[0])
+      select(list.flat()[0])
 
       return
     }
@@ -84,20 +94,17 @@ export const DialogFork: Component = () => {
   }
 
   return (
-    <Dialog class="search-list-dialog">
-      <DialogHeader>
-        <DialogTitleGroup
-          title={language.t("command.session.fork")}
-          description={language.t("dialog.fork.description")}
-        />
-      </DialogHeader>
-      <DialogBody class="search-list-body">
-        <div class="search-list-search">
+    <Dialog class="command-palette command-palette-compact fork-dialog" fit>
+      <div class="sr-only">
+        <DialogTitle>{language.t("command.session.fork")}</DialogTitle>
+      </div>
+      <DialogBody class="command-palette-body">
+        <div class="palette-menu-search" data-slot="search-list-search">
           <TextInput
             type="search"
             appearance="base"
             class="!w-full"
-            leadingIcon={<Icon name="magnifying-glass" size="small" />}
+            leadingIcon={<Icon name="magnifying-glass" />}
             value={list.filter()}
             onInput={(event) => list.onInput(event.currentTarget.value)}
             onKeyDown={onKeyDown}
@@ -114,16 +121,19 @@ export const DialogFork: Component = () => {
             onClearClick={() => list.clear()}
           />
         </div>
+        <div class="fork-dialog-section">
+          <DialogTitleGroup description={language.t("dialog.fork.description")} />
+        </div>
         <div class="search-list-scroll" data-scrollable ref={(el) => (resultsRef = el)}>
           <Show
             when={list.flat().length > 0}
             fallback={
               <div class="search-list-empty">
-                {language.t(messages().length > 0 ? "dialog.fork.search.empty" : "dialog.fork.empty")}
+                {language.t(props.messages.length > 0 ? "dialog.fork.search.empty" : "dialog.fork.empty")}
               </div>
             }
           >
-            <div role="listbox" class="search-list-results">
+            <div role="listbox" class="search-list-results" data-slot="search-list-results">
               <For each={list.flat()}>
                 {(item) => (
                   <button
@@ -132,18 +142,21 @@ export const DialogFork: Component = () => {
                     aria-selected={list.active() === item.id}
                     data-option-key={item.id}
                     data-active={list.active() === item.id ? "" : undefined}
+                    data-slot="search-list-row"
                     class="search-list-row"
                     onMouseMove={() => list.setActive(item.id)}
                     onMouseLeave={() => list.setActive("")}
                     onMouseDown={(event) => event.preventDefault()}
-                    onClick={() => handleSelect(item)}
+                    onClick={() => select(item)}
                   >
                     <span class="search-list-row-text">
-                      <span class="search-list-title" data-weight="regular">
+                      <span class="search-list-title" data-weight="regular" dir="auto">
                         {item.text}
                       </span>
                     </span>
-                    <span class="search-list-trailing">{item.time}</span>
+                    <span class="search-list-trailing" dir="auto">
+                      {item.time}
+                    </span>
                   </button>
                 )}
               </For>
diff --git a/packages/app/src/shell/search-list.css b/packages/app/src/shell/search-list.css
index b44247fd9b01..7445e6def171 100644
--- a/packages/app/src/shell/search-list.css
+++ b/packages/app/src/shell/search-list.css
@@ -115,10 +115,6 @@
   letter-spacing: -0.04px;
 }
 
-[data-component="dialog-v2"]:has(.mcp-dialog) [data-slot="dialog-container"] {
-  width: min(calc(100vw - 24px), 480px);
-}
-
 .mcp-dialog [data-slot="search-list-row"] {
   gap: 16px;
 }
@@ -128,7 +124,15 @@
   min-width: 0;
   flex: 1;
   align-items: center;
-  gap: 10px;
+  gap: 6px;
+}
+
+.mcp-dialog-status {
+  display: flex;
+  width: 16px;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
 }
 
 .mcp-dialog-name {
@@ -236,6 +240,58 @@
   grid-row: 2;
 }
 
+[data-component="dialog-v2"]:has(.fork-dialog) [data-slot="dialog-container"] {
+  border-radius: 10px;
+}
+
+.fork-dialog [data-slot="search-list-search"] {
+  padding: 6px 6px 9px;
+
+  &::after {
+    bottom: 0;
+    border-color: var(--v2-border-border-muted);
+  }
+
+  [data-slot="text-input-v2-value"] {
+    gap: 8px;
+  }
+
+  [data-slot="text-input-v2-leading-icon"] {
+    padding-inline-start: 8px;
+  }
+}
+
+.fork-dialog-section {
+  display: flex;
+  min-height: 28px;
+  flex-shrink: 0;
+  align-items: center;
+  padding: 4px 14px;
+  color: var(--v2-text-text-muted);
+  font-size: 13px;
+  font-weight: 440;
+  line-height: var(--line-height-compact);
+  letter-spacing: -0.04px;
+
+  [data-slot="dialog-description"] {
+    margin: 0;
+  }
+}
+
+.fork-dialog .search-list-results {
+  gap: 2px;
+  padding-top: 0;
+}
+
+.fork-dialog [data-slot="search-list-row"] {
+  height: 28px;
+  padding-inline: 8px;
+}
+
+.fork-dialog .search-list-trailing {
+  font-variant-numeric: tabular-nums;
+}
+
 @media (max-width: 639px), (hover: none) {
   .mcp-dialog [data-slot="search-list-row"] {
     height: auto;

From 07e964057829ad07055d5b79465b0889ba54a5d4 Mon Sep 17 00:00:00 2001
From: usrnk1 <7547651+usrnk1@users.noreply.github.com>
Date: Thu, 29 Oct 2026 09:27:45 +0100
Subject: [PATCH 2/3] test(app): add dialog preview stories

---
 .../app/component-tests/fork-dialog.spec.ts   | 59 ++++++++++++++++++
 .../providers/connect/mcp-dialog.stories.tsx  | 60 +++++++++++++++++++
 .../src/runtime/plugin/dialogs.stories.tsx    | 55 +++++++++++++++++
 .../session/commands/fork-dialog.stories.tsx  | 56 +++++++++++++++++
 4 files changed, 230 insertions(+)
 create mode 100644 packages/app/component-tests/fork-dialog.spec.ts
 create mode 100644 packages/app/src/providers/connect/mcp-dialog.stories.tsx
 create mode 100644 packages/app/src/runtime/plugin/dialogs.stories.tsx
 create mode 100644 packages/app/src/session/commands/fork-dialog.stories.tsx

diff --git a/packages/app/component-tests/fork-dialog.spec.ts b/packages/app/component-tests/fork-dialog.spec.ts
new file mode 100644
index 000000000000..18849cd4d49b
--- /dev/null
+++ b/packages/app/component-tests/fork-dialog.spec.ts
@@ -0,0 +1,59 @@
+import { expect, story } from "../../stories/playwright/story"
+
+story.use({ viewport: { width: 1000, height: 400 } })
+
+story("fork search anchors filtering and keyboard scrolling", async ({ mount, page }) => {
+  await mount("app-dialog-fork-session--default")
+  const dialog = page.getByRole("dialog", { name: "Fork from message", exact: true })
+  const input = dialog.getByRole("searchbox", { name: "Search", exact: true })
+  const container = page.locator('[data-component="dialog-v2"] [data-slot="dialog-container"]')
+  const geometry = () =>
+    container.evaluate((element) => {
+      const field = element.querySelector('input[type="search"]')!.getBoundingClientRect()
+
+      return {
+        height: element.getBoundingClientRect().height,
+        inputTop: field.top,
+        inputBottom: field.bottom,
+        instructionTop: element.querySelector('[data-slot="dialog-description"]')!.getBoundingClientRect().top,
+      }
+    })
+
+  await expect(input).toBeFocused()
+  await expect(dialog.getByRole("option")).toHaveCount(8)
+  await expect(dialog).toHaveAccessibleDescription("Choose a message to fork from")
+  await expect(dialog.getByText("Choose a message to fork from", { exact: true })).toBeVisible()
+  await page.evaluate(() => document.fonts.ready.then(() => undefined))
+  await input.hover()
+  const initial = await geometry()
+  expect(initial.instructionTop).toBeGreaterThanOrEqual(initial.inputBottom)
+
+  await input.fill("keyboard navigation")
+  await expect(dialog.getByRole("option")).toHaveCount(1)
+  await expect.poll(async () => (await geometry()).height).toBeLessThan(initial.height - 100)
+  await expect.poll(async () => (await geometry()).inputTop).toBeCloseTo(initial.inputTop, 0)
+
+  await input.clear()
+  await expect(dialog.getByRole("option")).toHaveCount(8)
+  const scroll = dialog.locator("[data-scrollable]")
+
+  await expect.poll(() => scroll.evaluate((element) => element.scrollHeight - element.clientHeight)).toBeGreaterThan(0)
+  await input.press("ArrowUp")
+  const oldest = dialog.getByRole("option", {
+    name: /^Investigate how the command palette handles keyboard navigation\./,
+  })
+
+  await expect(oldest).toHaveAttribute("aria-selected", "true")
+  await expect(oldest).toBeInViewport()
+  await expect.poll(() => scroll.evaluate((element) => element.scrollTop)).toBeGreaterThan(0)
+  await expect.poll(async () => (await geometry()).inputTop).toBeCloseTo(initial.inputTop, 0)
+  await expect(input).toBeFocused()
+  await input.press("Enter")
+  await expect(dialog).toBeHidden()
+  await expect(page.getByRole("status")).toHaveText("story-message-0")
+
+  await page.getByRole("button", { name: "Open fork session dialog", exact: true }).click()
+  await expect(input).toBeFocused()
+  await input.press("Escape")
+  await expect(dialog).toBeHidden()
+})
diff --git a/packages/app/src/providers/connect/mcp-dialog.stories.tsx b/packages/app/src/providers/connect/mcp-dialog.stories.tsx
new file mode 100644
index 000000000000..2c82c3150521
--- /dev/null
+++ b/packages/app/src/providers/connect/mcp-dialog.stories.tsx
@@ -0,0 +1,60 @@
+import { Button } from "@opencode/ui/button"
+import { useDialog } from "@opencode/ui/context/dialog"
+import type { McpServer } from "@opencode/client/promise"
+import { onMount } from "solid-js"
+import { createStore } from "solid-js/store"
+import { McpDialog } from "./mcp-dialog"
+
+function McpDialogStory(props: { server?: string }) {
+  const dialog = useDialog()
+  const [servers, setServers] = createStore<McpServer[]>([
+    { name: "figma-remote", integrationID: "figma-oauth", status: { status: "needs_auth", error: "Sign in required" } },
+    { name: "local-files", status: { status: "disabled" } },
+    { name: "paper", status: { status: "connected" } },
+    { name: "search-index", status: { status: "pending" } },
+    {
+      name: "unreachable-server",
+      status: {
+        status: "failed",
+        error: "Streamable HTTP error: Error POSTing to endpoint: 404 Not Found\nCheck the server URL and try again.",
+      },
+    },
+  ])
+  const open = () =>
+    dialog.show(() => (
+      <McpDialog
+        servers={servers}
+        server={props.server}
+        pending={false}
+        onToggle={(input) => {
+          const name = typeof input === "string" ? input : input.name
+          const enabled =
+            typeof input === "string"
+              ? servers.find((server) => server.name === name)?.status.status !== "connected"
+              : input.enabled
+          setServers((server) => server.name === name, "status", { status: enabled ? "connected" : "disabled" })
+        }}
+      />
+    ))
+
+  onMount(open)
+
+  return (
+    <Button variant="neutral" onClick={open}>
+      Open MCP dialog
+    </Button>
+  )
+}
+
+export default {
+  title: "App/Dialogs/MCP",
+  id: "app-dialog-mcp",
+}
+
+export const Default = {
+  render: () => <McpDialogStory />,
+}
+
+export const ConnectionError = {
+  render: () => <McpDialogStory server="unreachable-server" />,
+}
diff --git a/packages/app/src/runtime/plugin/dialogs.stories.tsx b/packages/app/src/runtime/plugin/dialogs.stories.tsx
new file mode 100644
index 000000000000..814450dd808c
--- /dev/null
+++ b/packages/app/src/runtime/plugin/dialogs.stories.tsx
@@ -0,0 +1,55 @@
+import { Button } from "@opencode/ui/button"
+import { useDialog } from "@opencode/ui/context/dialog"
+import { onMount } from "solid-js"
+import { createStore } from "solid-js/store"
+import { PluginSelectDialog } from "./dialogs"
+
+function PluginSelectStory() {
+  const dialog = useDialog()
+  const [store, setStore] = createStore({ selected: "Nothing selected" })
+  const open = () =>
+    dialog.show(() => (
+      <PluginSelectDialog
+        options={{
+          title: "Choose a destination",
+          placeholder: "Search destinations",
+          options: [
+            { title: "Design notes", description: "Research and references", group: "Recent", value: "design" },
+            { title: "Project roadmap", description: "Upcoming milestones", group: "Recent", value: "roadmap" },
+            {
+              title: "Engineering",
+              description: "Implementation and architecture",
+              group: "Teams",
+              value: "engineering",
+            },
+            { title: "Product", description: "Planning and feedback", group: "Teams", value: "product" },
+            { title: "Support", description: "Customer questions", group: "Teams", value: "support" },
+          ],
+        }}
+        done={(value) => {
+          setStore("selected", value ?? "Selection dismissed")
+          dialog.close()
+        }}
+      />
+    ))
+
+  onMount(open)
+
+  return (
+    <div class="flex flex-col items-start gap-3">
+      <Button variant="neutral" onClick={open}>
+        Open plugin selection dialog
+      </Button>
+      <p role="status">{store.selected}</p>
+    </div>
+  )
+}
+
+export default {
+  title: "App/Dialogs/Plugin Selection",
+  id: "app-dialog-plugin-selection",
+}
+
+export const Default = {
+  render: () => <PluginSelectStory />,
+}
diff --git a/packages/app/src/session/commands/fork-dialog.stories.tsx b/packages/app/src/session/commands/fork-dialog.stories.tsx
new file mode 100644
index 000000000000..eac525cd1d25
--- /dev/null
+++ b/packages/app/src/session/commands/fork-dialog.stories.tsx
@@ -0,0 +1,56 @@
+import { Button } from "@opencode/ui/button"
+import { useDialog } from "@opencode/ui/context/dialog"
+import { onMount } from "solid-js"
+import { createStore } from "solid-js/store"
+import { ForkDialog } from "./fork-dialog"
+
+function ForkDialogStory() {
+  const dialog = useDialog()
+  const [store, setStore] = createStore({ selected: "No message selected" })
+  const messages = [
+    "Investigate how the command palette handles keyboard navigation.",
+    "Show me where session titles are stored.",
+    "Find the component that renders recent projects.",
+    "Add a shortcut for reopening the last session.",
+    "Keep the search query when returning to the list.",
+    "Make long project names readable on smaller screens.",
+    "Explain how worktrees are selected for a new session.",
+    "Add a filter for archived sessions.",
+  ]
+    .map((text, index) => ({
+      id: `story-message-${index}`,
+      text,
+      time: new Date(Date.UTC(2026, 9, 28, 10, index * 5)).toLocaleTimeString(undefined, { timeStyle: "short" }),
+    }))
+    .reverse()
+  const open = () =>
+    dialog.show(() => (
+      <ForkDialog
+        messages={messages}
+        onSelect={(messageID) => {
+          setStore("selected", messageID)
+          dialog.close()
+        }}
+      />
+    ))
+
+  onMount(open)
+
+  return (
+    <div class="flex flex-col items-start gap-3">
+      <Button variant="neutral" onClick={open}>
+        Open fork session dialog
+      </Button>
+      <p role="status">{store.selected}</p>
+    </div>
+  )
+}
+
+export default {
+  title: "App/Dialogs/Fork Session",
+  id: "app-dialog-fork-session",
+}
+
+export const Default = {
+  render: () => <ForkDialogStory />,
+}

From c6d5f6455832078c3b86178b056381f24f7dfa8c Mon Sep 17 00:00:00 2001
From: usrnk1 <7547651+usrnk1@users.noreply.github.com>
Date: Thu, 29 Oct 2026 09:41:26 +0100
Subject: [PATCH 3/3] fix(app): satisfy changed-file lint checks

---
 packages/app/component-tests/fork-dialog.spec.ts |  2 ++
 .../e2e/regression/mcp-workspace-toggle.spec.ts  | 13 +++++++------
 .../src/providers/connect/mcp-dialog.stories.tsx | 16 ++++++++++------
 .../app/src/providers/connect/mcp-dialog.tsx     |  6 +++++-
 .../app/src/runtime/plugin/dialogs.stories.tsx   |  1 +
 .../src/session/commands/fork-dialog.stories.tsx |  2 ++
 .../app/src/session/commands/fork-dialog.tsx     |  1 +
 7 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/packages/app/component-tests/fork-dialog.spec.ts b/packages/app/component-tests/fork-dialog.spec.ts
index 18849cd4d49b..59e7fc4dbb1b 100644
--- a/packages/app/component-tests/fork-dialog.spec.ts
+++ b/packages/app/component-tests/fork-dialog.spec.ts
@@ -7,6 +7,7 @@ story("fork search anchors filtering and keyboard scrolling", async ({ mount, pa
   const dialog = page.getByRole("dialog", { name: "Fork from message", exact: true })
   const input = dialog.getByRole("searchbox", { name: "Search", exact: true })
   const container = page.locator('[data-component="dialog-v2"] [data-slot="dialog-container"]')
+
   const geometry = () =>
     container.evaluate((element) => {
       const field = element.querySelector('input[type="search"]')!.getBoundingClientRect()
@@ -39,6 +40,7 @@ story("fork search anchors filtering and keyboard scrolling", async ({ mount, pa
 
   await expect.poll(() => scroll.evaluate((element) => element.scrollHeight - element.clientHeight)).toBeGreaterThan(0)
   await input.press("ArrowUp")
+
   const oldest = dialog.getByRole("option", {
     name: /^Investigate how the command palette handles keyboard navigation\./,
   })
diff --git a/packages/app/e2e/regression/mcp-workspace-toggle.spec.ts b/packages/app/e2e/regression/mcp-workspace-toggle.spec.ts
index 03cad2d1d3dd..cb8ef2fc0473 100644
--- a/packages/app/e2e/regression/mcp-workspace-toggle.spec.ts
+++ b/packages/app/e2e/regression/mcp-workspace-toggle.spec.ts
@@ -47,12 +47,11 @@ async function open(
   await expectSessionTitle(page, title)
   await expect(page.getByRole("textbox", { name: "Prompt", exact: true })).toBeEditable()
 
-  const panel =
-    input.surface === "settings"
-      ? page.getByTestId("settings-screen")
-      : input.surface === "popover"
-        ? page.getByRole("group", { name: "MCP", exact: true })
-        : page.getByRole("dialog", { name: "MCPs", exact: true })
+  const panel = {
+    settings: page.getByTestId("settings-screen"),
+    popover: page.getByRole("group", { name: "MCP", exact: true }),
+    dialog: page.getByRole("dialog", { name: "MCPs", exact: true }),
+  }[input.surface]
 
   const show = async () => {
     if (input.surface === "dialog") return page.keyboard.press("Control+;")
@@ -262,8 +261,10 @@ test("the MCP list shrinks with matches and keeps its search anchored while scro
       (name) => ({ name, status: { status: "disabled" } }),
     ),
   })
+
   const input = view.panel.getByRole("combobox", { name: "Search MCPs", exact: true })
   const container = page.locator('[data-component="dialog-v2"] [data-slot="dialog-container"]')
+
   const geometry = () =>
     container.evaluate((element) => ({
       height: element.getBoundingClientRect().height,
diff --git a/packages/app/src/providers/connect/mcp-dialog.stories.tsx b/packages/app/src/providers/connect/mcp-dialog.stories.tsx
index 2c82c3150521..294b9e68dddd 100644
--- a/packages/app/src/providers/connect/mcp-dialog.stories.tsx
+++ b/packages/app/src/providers/connect/mcp-dialog.stories.tsx
@@ -1,12 +1,14 @@
 import { Button } from "@opencode/ui/button"
 import { useDialog } from "@opencode/ui/context/dialog"
 import type { McpServer } from "@opencode/client/promise"
+import { Predicate } from "effect"
 import { onMount } from "solid-js"
 import { createStore } from "solid-js/store"
 import { McpDialog } from "./mcp-dialog"
 
 function McpDialogStory(props: { server?: string }) {
   const dialog = useDialog()
+
   const [servers, setServers] = createStore<McpServer[]>([
     { name: "figma-remote", integrationID: "figma-oauth", status: { status: "needs_auth", error: "Sign in required" } },
     { name: "local-files", status: { status: "disabled" } },
@@ -20,6 +22,7 @@ function McpDialogStory(props: { server?: string }) {
       },
     },
   ])
+
   const open = () =>
     dialog.show(() => (
       <McpDialog
@@ -27,12 +30,13 @@ function McpDialogStory(props: { server?: string }) {
         server={props.server}
         pending={false}
         onToggle={(input) => {
-          const name = typeof input === "string" ? input : input.name
-          const enabled =
-            typeof input === "string"
-              ? servers.find((server) => server.name === name)?.status.status !== "connected"
-              : input.enabled
-          setServers((server) => server.name === name, "status", { status: enabled ? "connected" : "disabled" })
+          const action = Predicate.isString(input)
+            ? { name: input, enabled: servers.find((server) => server.name === input)?.status.status !== "connected" }
+            : input
+
+          setServers((server) => server.name === action.name, "status", {
+            status: action.enabled ? "connected" : "disabled",
+          })
         }}
       />
     ))
diff --git a/packages/app/src/providers/connect/mcp-dialog.tsx b/packages/app/src/providers/connect/mcp-dialog.tsx
index b2c6cadf462a..3fdfdc3a4290 100644
--- a/packages/app/src/providers/connect/mcp-dialog.tsx
+++ b/packages/app/src/providers/connect/mcp-dialog.tsx
@@ -1,6 +1,7 @@
 import { Component, createEffect, createMemo, on, Show } from "solid-js"
 import { createStore } from "solid-js/store"
 import fuzzysort from "fuzzysort"
+import { Predicate } from "effect"
 import type { McpServer } from "@opencode/client/promise"
 import { useData } from "@/runtime/server/current"
 import { useWorkspaceLocation } from "@/workspaces/location"
@@ -37,10 +38,11 @@ export const DialogMcp: Component<{ directory: string; server?: string }> = (pro
   const data = useData()
   const directory = () => props.directory
   const toggle = useMcpToggle(directory)
+
   const target = () => {
     const current = toggle.isPending ? toggle.variables : undefined
 
-    return typeof current === "string" ? current : current?.name
+    return Predicate.isString(current) ? current : current?.name
   }
 
   createEffect(() => void data.location.mcp.server.sync({ directory: directory() }).catch(() => undefined))
@@ -224,11 +226,13 @@ export function McpDialog(props: {
             {(item, row) => {
               const server = () => servers().find((entry) => entry.name === item().name)
               const status = () => server()?.status
+
               const error = () => {
                 const current = status()
 
                 return current?.status === "failed" ? current.error : undefined
               }
+
               // The switch would start sign-in anyway, so an auth-gated server shows that action instead.
               const signIn = () => status()?.status === "needs_auth" && !!server()?.integrationID
 
diff --git a/packages/app/src/runtime/plugin/dialogs.stories.tsx b/packages/app/src/runtime/plugin/dialogs.stories.tsx
index 814450dd808c..0017cdc8751c 100644
--- a/packages/app/src/runtime/plugin/dialogs.stories.tsx
+++ b/packages/app/src/runtime/plugin/dialogs.stories.tsx
@@ -7,6 +7,7 @@ import { PluginSelectDialog } from "./dialogs"
 function PluginSelectStory() {
   const dialog = useDialog()
   const [store, setStore] = createStore({ selected: "Nothing selected" })
+
   const open = () =>
     dialog.show(() => (
       <PluginSelectDialog
diff --git a/packages/app/src/session/commands/fork-dialog.stories.tsx b/packages/app/src/session/commands/fork-dialog.stories.tsx
index eac525cd1d25..ebea73c255d4 100644
--- a/packages/app/src/session/commands/fork-dialog.stories.tsx
+++ b/packages/app/src/session/commands/fork-dialog.stories.tsx
@@ -7,6 +7,7 @@ import { ForkDialog } from "./fork-dialog"
 function ForkDialogStory() {
   const dialog = useDialog()
   const [store, setStore] = createStore({ selected: "No message selected" })
+
   const messages = [
     "Investigate how the command palette handles keyboard navigation.",
     "Show me where session titles are stored.",
@@ -23,6 +24,7 @@ function ForkDialogStory() {
       time: new Date(Date.UTC(2026, 9, 28, 10, index * 5)).toLocaleTimeString(undefined, { timeStyle: "short" }),
     }))
     .reverse()
+
   const open = () =>
     dialog.show(() => (
       <ForkDialog
diff --git a/packages/app/src/session/commands/fork-dialog.tsx b/packages/app/src/session/commands/fork-dialog.tsx
index b11c40e1b22d..776bd01f63ea 100644
--- a/packages/app/src/session/commands/fork-dialog.tsx
+++ b/packages/app/src/session/commands/fork-dialog.tsx
@@ -64,6 +64,7 @@ export const DialogFork: Component = () => {
 
 export function ForkDialog(props: { messages: ForkableMessage[]; onSelect: (messageID: string) => void }) {
   const language = useLanguage()
+
   const select = (item: ForkableMessage | undefined) => {
     if (item) props.onSelect(item.id)
   }