chore: generate

packages/app/src/app.tsx

@@ -42,7 +42,7 @@ import { makeEventListener } from "@solid-primitives/event-listener"
 import { CommandProvider, useCommand, type CommandOption } from "@/context/command"
 import { CommentsProvider } from "@/context/comments"
 import { FileProvider } from "@/context/file"
-import { ServerSDKProvider, useServerSDK } from "@/context/server-sdk"
+import { ServerSDKProvider } from "@/context/server-sdk"
 import { ServerSyncProvider, useServerSync } from "@/context/server-sync"
 import { GlobalProvider, useGlobal } from "@/context/global"
 import { HighlightsProvider } from "@/context/highlights"
@@ -63,13 +63,7 @@ import LegacyLayout from "@/pages/layout"
 import NewLayout from "@/pages/layout-new"
 import { ErrorPage } from "./pages/error"
 import { useCheckServerHealth } from "./utils/server-health"
-import {
-  legacySessionHref,
-  legacySessionServer,
-  parseServerKey,
-  retainServerKey,
-  sessionHref,
-} from "./utils/session-route"
+import { legacySessionHref, legacySessionServer, requireServerKey, sessionHref } from "./utils/session-route"
 import { createSessionLineage } from "@/pages/session/session-lineage"
 
 import { SessionPage, SessionRouteErrorBoundary, TargetSessionRouteContent } from "@/pages/session"
@@ -117,22 +111,16 @@ const SessionRoute = () => {
 function TargetServerRoute(props: ParentProps) {
   const params = useParams<{ serverKey: string; id: string }>()
   const global = useGlobal()
-  const initial = parseServerKey(params.serverKey)
-  const key = createMemo<ServerConnection.Key | undefined>(
-    (previous) => retainServerKey(previous, params.serverKey),
-    initial,
-  )
   const conn = createMemo(() => {
-    const current = key()
-    if (!current) return undefined
-    return global.servers.list().find((item) => ServerConnection.key(item) === current)
+    const key = requireServerKey(params.serverKey)
+    return global.servers.list().find((item) => ServerConnection.key(item) === key)
   })
 
   return (
     // Owns the server-identity remount. Session changes must NOT remount this
     // subtree (SessionRouteErrorBoundary resets and createSessionLineage
     // re-resolves reactively instead); both rely on this key for server changes.
-    <Show when={key()} keyed fallback={<Navigate href="/" />}>
+    <Show when={requireServerKey(params.serverKey)} keyed>
       <ServerSDKProvider server={conn}>
         <ServerSyncProvider server={conn}>{props.children}</ServerSyncProvider>
       </ServerSDKProvider>
@@ -147,23 +135,16 @@ const TargetSessionRoute = () => (
 )
 
 function LegacyTargetSessionRoute() {
+  const params = useParams<{ serverKey: string; id: string }>()
   return (
     <TargetServerRoute>
-      <LegacyTargetSessionRouteContent />
+      <SessionRouteErrorBoundary sessionID={params.id} serverKey={requireServerKey(params.serverKey)}>
+        <LegacyTargetSessionRedirect />
+      </SessionRouteErrorBoundary>
     </TargetServerRoute>
   )
 }
 
-function LegacyTargetSessionRouteContent() {
-  const params = useParams<{ id: string }>()
-  const serverSDK = useServerSDK()
-  return (
-    <SessionRouteErrorBoundary sessionID={params.id} serverKey={ServerConnection.key(serverSDK().server)}>
-      <LegacyTargetSessionRedirect />
-    </SessionRouteErrorBoundary>
-  )
-}
-
 function LegacyTargetSessionRedirect() {
   const params = useParams<{ id: string }>()
   const navigate = useNavigate()

packages/app/src/components/titlebar-tab-nav.css

@@ -9,53 +9,86 @@
   justify-content: center;
 }
 
+[data-titlebar-tab] {
+  --tab-base: var(--v2-background-bg-deep);
+  --tab-overlay: transparent;
+  background: linear-gradient(var(--tab-overlay), var(--tab-overlay)), var(--tab-base);
+}
+
+[data-titlebar-tab]:is(:hover, :has(> [data-slot="tab-link"]:focus-visible)):not([data-state="pressed"]):not(
+    [data-dragging="true"]
+  ):not([data-editing="true"]) {
+  --tab-base: var(--v2-background-bg-layer-02);
+  --tab-overlay: var(--v2-overlay-simple-overlay-hover);
+}
+
+[data-titlebar-tab]:is([data-state="pressed"], [data-dragging="true"], [data-editing="true"]) {
+  --tab-base: var(--v2-background-bg-layer-02);
+  --tab-overlay: var(--v2-overlay-simple-overlay-pressed);
+}
+
+[data-titlebar-tab]:is(:hover, [data-state="pressed"]) [data-slot="tab-close"] {
+  background: linear-gradient(var(--tab-overlay), var(--tab-overlay)), var(--tab-base);
+}
+
 [data-titlebar-tab][data-editing="true"] [data-slot="tab-close"] {
   display: none;
 }
 
 [data-titlebar-tab-list] {
-  gap: 13.5px;
+  gap: 6px;
 }
 
 [data-titlebar-tab-slot] {
+  --tab-separator: var(--v2-background-bg-layer-03);
   position: relative;
 }
 
+[data-color-scheme="dark"] [data-titlebar-tab-slot] {
+  --tab-separator: var(--v2-background-bg-layer-02);
+}
+
 [data-titlebar-tab-slot]:not(:first-child):not([data-active="true"])::before {
   content: "";
   position: absolute;
   top: 8px;
-  left: -6.75px;
+  left: -3.75px;
   width: 1.5px;
   height: 12px;
   border-radius: 9999px;
-  background: var(--v2-background-bg-layer-02);
+  background: var(--tab-separator);
 }
 
 [data-titlebar-tab-slot][data-active="true"] + [data-titlebar-tab-slot]::before {
   display: none;
 }
 
-[data-titlebar-tab] [data-slot="tab-close"]::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  height: 28px;
-  width: 16px;
-  pointer-events: none;
-  background: linear-gradient(to right, transparent, var(--tab-bg));
+[data-titlebar-tab-slot]:not([data-active="true"]):has([data-titlebar-tab]:hover)::before,
+[data-titlebar-tab-slot]:not([data-active="true"]):has([data-titlebar-tab]:hover) + [data-titlebar-tab-slot]::before {
   display: none;
 }
 
-[data-titlebar-tab][data-title-overflow="true"]:not([data-editing="true"]) [data-slot="tab-close"]::before {
-  display: block;
-  right: 0;
+[data-titlebar-tab][data-title-overflow="true"]:not([data-editing="true"]) [data-slot="tab-link"] {
+  --tab-title-fade-offset: 4px;
+  -webkit-mask-image: linear-gradient(
+    to right,
+    black 0,
+    black calc(100% - var(--tab-title-fade-offset) - 16px),
+    transparent calc(100% - var(--tab-title-fade-offset)),
+    transparent 100%
+  );
+  mask-image: linear-gradient(
+    to right,
+    black 0,
+    black calc(100% - var(--tab-title-fade-offset) - 16px),
+    transparent calc(100% - var(--tab-title-fade-offset)),
+    transparent 100%
+  );
 }
 
-[data-titlebar-tab][data-title-overflow="true"]:hover:not([data-editing="true"]) [data-slot="tab-close"]::before,
-[data-titlebar-tab][data-title-overflow="true"][data-active="true"]:not([data-editing="true"])
-  [data-slot="tab-close"]::before {
-  right: 100%;
+[data-titlebar-tab][data-title-overflow="true"]:is(:hover, [data-active="true"]):not([data-editing="true"])
+  [data-slot="tab-link"] {
+  --tab-title-fade-offset: 24px;
 }
 
 [data-titlebar-tab][data-title-overflow="true"]:not(:hover):not([data-active="true"]):not([data-editing="true"])

packages/app/src/components/titlebar-tab-nav.tsx

@@ -180,11 +180,11 @@ export function TabNavItem(props: {
       data-slot="titlebar-tab-item"
       data-title-overflow={titleOverflowing()}
       data-editing={editing()}
-      class="group relative flex h-7 w-full min-w-0 select-none flex-row items-center gap-1.5 overflow-hidden whitespace-nowrap rounded-[6px] bg-[var(--tab-bg)] px-1.5 [container-type:inline-size] [--tab-bg:var(--v2-background-bg-deep)] hover:[--tab-bg:var(--v2-background-bg-layer-02)] has-[>a:focus-visible]:[--tab-bg:var(--v2-background-bg-layer-02)] data-[active='true']:[--tab-bg:var(--v2-background-bg-layer-02)] data-[dragging='true']:[--tab-bg:var(--v2-background-bg-layer-02)] data-[pressed='true']:[--tab-bg:var(--v2-background-bg-layer-02)] data-[editing='true']:[--tab-bg:var(--v2-background-bg-layer-02)]"
+      class="group relative flex h-7 w-full min-w-0 select-none flex-row items-center gap-1.5 overflow-hidden whitespace-nowrap rounded-[6px] px-1.5 [container-type:inline-size]"
       classList={{ invisible: props.hidden }}
       data-active={props.active}
       data-dragging={props.dragging}
-      data-pressed={props.pressed}
+      data-state={props.active || props.pressed ? "pressed" : undefined}
       onMouseDown={(event) => {
         if (event.button !== MIDDLE_MOUSE_BUTTON) return
         event.preventDefault()
@@ -276,7 +276,7 @@ export function TabNavItem(props: {
         />
       </a>
 
-      <div data-slot="tab-close" class="group-hover:bg-[var(--tab-bg)] group-data-[active=true]:bg-[var(--tab-bg)]">
+      <div data-slot="tab-close">
         <IconButtonV2
           size="small"
           variant="ghost-muted"
@@ -334,8 +334,8 @@ export function DraftTabItem(props: {
       data-slot="titlebar-tab-item"
       data-active={props.active}
       data-dragging={props.dragging}
-      data-pressed={props.pressed}
-      class="group relative flex h-7 w-full min-w-0 flex-row items-center gap-1.5 overflow-hidden rounded-[6px] bg-[var(--tab-bg)] px-1.5 [container-type:inline-size] whitespace-nowrap [--tab-bg:var(--v2-background-bg-deep)] hover:[--tab-bg:var(--v2-background-bg-layer-02)] has-[>a:focus-visible]:[--tab-bg:var(--v2-background-bg-layer-02)] data-[active='true']:[--tab-bg:var(--v2-background-bg-layer-02)] data-[dragging='true']:[--tab-bg:var(--v2-background-bg-layer-02)] data-[pressed='true']:[--tab-bg:var(--v2-background-bg-layer-02)] data-[editing='true']:[--tab-bg:var(--v2-background-bg-layer-02)]"
+      data-state={props.active || props.pressed ? "pressed" : undefined}
+      class="group relative flex h-7 w-full min-w-0 flex-row items-center gap-1.5 overflow-hidden rounded-[6px] px-1.5 [container-type:inline-size] whitespace-nowrap"
       classList={{ invisible: props.hidden }}
       onMouseDown={(event) => {
         if (event.button !== MIDDLE_MOUSE_BUTTON) return
@@ -381,7 +381,7 @@ export function DraftTabItem(props: {
           {props.title}
         </span>
       </a>
-      <div data-slot="tab-close" class="group-hover:bg-[var(--tab-bg)] group-data-[active=true]:bg-[var(--tab-bg)]">
+      <div data-slot="tab-close">
         <IconButtonV2
           size="small"
           variant="ghost-muted"

packages/app/src/context/layout.tsx

@@ -18,7 +18,7 @@ import { createPathHelpers } from "./file/path"
 import type { ProjectAvatarVariant } from "@opencode-ai/ui/v2/project-avatar-v2"
 import { migrateLegacySessionStateKeys, ServerScope, SessionStateKey } from "@/utils/server-scope"
 import { createSessionKeyReader, ensureSessionKey, pruneSessionKeys } from "./layout-helpers"
-import { parseServerKey } from "@/utils/session-route"
+import { requireServerKey } from "@/utils/session-route"
 import { type DraftTab, useTabs } from "./tabs"
 import { closeSessionTab, openSessionTab, previewSessionTab, type SessionTabs } from "./layout-tabs"
 
@@ -138,12 +138,10 @@ export const currentRoute = (pathname: string, search: string): LayoutRoute => {
   }
 
   if (parts[0] === "server" && parts[2] === "session" && parts[3]) {
-    const server = parseServerKey(parts[1])
-    if (!server) return { type: "home" }
     return {
       type: "session",
       sessionId: parts[3],
-      server,
+      server: requireServerKey(parts[1]),
     }
   }
 

packages/app/src/context/notification.tsx

@@ -15,7 +15,7 @@ import { playSoundById } from "@/utils/sound"
 import { useGlobal } from "./global"
 import { ServerConnection, useServer } from "./server"
 import { type DraftTab, useTabs } from "./tabs"
-import { parseServerKey } from "@/utils/session-route"
+import { requireServerKey } from "@/utils/session-route"
 import type { ServerScope } from "@/utils/server-scope"
 
 type NotificationBase = {
@@ -125,7 +125,7 @@ export const { use: useNotification, provider: NotificationProvider } = createSi
     const states = new Map<ServerScope, { dispose: () => void; state: NotificationState }>()
 
     const activeServer = createMemo(() => {
-      if (params.serverKey) return parseServerKey(params.serverKey) ?? server.key
+      if (params.serverKey) return requireServerKey(params.serverKey)
       if (search.draftId) {
         const draft = tabs.store.find((tab): tab is DraftTab => tab.type === "draft" && tab.draftID === search.draftId)
         if (draft) return draft.server

packages/app/src/context/permission.tsx

@@ -11,7 +11,7 @@ import { useGlobal } from "./global"
 import { ServerConnection, useServer } from "./server"
 import { type DraftTab, useTabs } from "./tabs"
 import { useSettings } from "./settings"
-import { parseServerKey } from "@/utils/session-route"
+import { requireServerKey } from "@/utils/session-route"
 import type { ServerScope } from "@/utils/server-scope"
 import { normalizePermissionRequest } from "./global-sync/utils"
 import {
@@ -71,7 +71,7 @@ export const { use: usePermission, provider: PermissionProvider } = createSimple
     })
 
     const activeServer = createMemo(() => {
-      if (params.serverKey && settings.general.newLayoutDesigns()) return parseServerKey(params.serverKey) ?? server.key
+      if (params.serverKey && settings.general.newLayoutDesigns()) return requireServerKey(params.serverKey)
       return activeDraft()?.server ?? server.key
     })
 

packages/app/src/context/prompt.tsx

@@ -2,6 +2,7 @@ import { base64Encode } from "@opencode-ai/core/util/encode"
 import { createSimpleContext } from "@opencode-ai/ui/context"
 import { useParams, useSearchParams } from "@solidjs/router"
 import { createMemo, createResource, createRoot, getOwner, onCleanup } from "solid-js"
+import { requireServerKey } from "@/utils/session-route"
 import { ServerConnection } from "./server"
 import { useServerSDK } from "./server-sdk"
 import { useSettings } from "./settings"
@@ -99,7 +100,8 @@ export const { use: usePrompt, provider: PromptProvider } = createSimpleContext(
     }
 
     const owner = getOwner()
-    const serverKey = () => ServerConnection.key(serverSDK().server)
+    const serverKey = () =>
+      params.serverKey ? requireServerKey(params.serverKey) : ServerConnection.key(serverSDK().server)
     const scope = (): PromptScope =>
       search.draftId ? { draftID: search.draftId } : { dir: base64Encode(sdk().directory), id: params.id }
     const load = (scope: PromptScope) => {

packages/app/src/pages/session.tsx

@@ -99,7 +99,7 @@ import { diffs as list } from "@/utils/diffs"
 import { Persist, persisted } from "@/utils/persist"
 import { extractPromptFromParts } from "@/utils/prompt"
 import { formatServerError, isLocalSessionNotFoundError, isSessionNotFoundError } from "@/utils/server-errors"
-import { legacySessionHref, sessionHref } from "@/utils/session-route"
+import { legacySessionHref, requireServerKey, sessionHref } from "@/utils/session-route"
 import { useUsageExceededDialogs } from "./session/usage-exceeded-dialogs"
 import { createSessionOwnership } from "./session/session-ownership"
 import { createSessionLineage } from "./session/session-lineage"
@@ -158,7 +158,6 @@ export function SessionPage() {
 // workspace-scoped state (terminal, directory providers) lives below.
 export function TargetSessionRouteContent() {
   const params = useParams<{ serverKey: string; id: string }>()
-  const serverSDK = useServerSDK()
   const serverSync = useServerSync()
   const directory = createMemo(() => serverSync().session.lineage.peek(params.id)?.session.directory)
   return (
@@ -166,7 +165,7 @@ export function TargetSessionRouteContent() {
     // when session content falls back to the route error boundary.
     <TargetServerScopedProviders directory={directory} sessionID={() => params.id}>
       <TargetSessionSettingsCommand />
-      <SessionRouteErrorBoundary sessionID={params.id} serverKey={ServerConnection.key(serverSDK().server)} padded>
+      <SessionRouteErrorBoundary sessionID={params.id} serverKey={requireServerKey(params.serverKey)} padded>
         <ResolvedTargetSessionRoute />
       </SessionRouteErrorBoundary>
     </TargetServerScopedProviders>
@@ -245,11 +244,10 @@ function SessionErrorFallback(props: { error: unknown; sessionID?: string; serve
 }
 
 function ResolvedTargetSessionRoute() {
-  const params = useParams<{ id: string }>()
-  const serverSDK = useServerSDK()
+  const params = useParams<{ serverKey: string; id: string }>()
   const tabs = useTabs()
   const sync = useServerSync()
-  const serverKey = createMemo(() => ServerConnection.key(serverSDK().server))
+  const serverKey = createMemo(() => requireServerKey(params.serverKey))
   const current = createSessionLineage(
     () => params.id,
     () => sync().session.lineage,
@@ -2163,7 +2161,7 @@ export default function Page() {
               if (!id) return
               navigate(
                 params.serverKey
-                  ? sessionHref(ServerConnection.key(serverSDK().server), id)
+                  ? sessionHref(requireServerKey(params.serverKey), id)
                   : legacySessionHref(sdk().directory, id),
               )
             },

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

@@ -63,11 +63,10 @@ import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { useLanguage } from "@/context/language"
 import { useSessionKey } from "@/pages/session/session-layout"
 import { useServerSDK } from "@/context/server-sdk"
-import { ServerConnection } from "@/context/server"
 import { usePlatform } from "@/context/platform"
 import { useSettings } from "@/context/settings"
 import { useTabs } from "@/context/tabs"
-import { legacySessionHref, sessionHref } from "@/utils/session-route"
+import { legacySessionHref, requireServerKey, sessionHref } from "@/utils/session-route"
 import { useSDK } from "@/context/sdk"
 import { useSync } from "@/context/sync"
 import { notifySessionTabsRemoved } from "@/components/titlebar-session-events"
@@ -794,9 +793,7 @@ export function MessageTimeline(props: {
   const navigateAfterSessionRemoval = (sessionID: string, parentID?: string, nextSessionID?: string) => {
     if (params.id !== sessionID) return
     const href = (id: string) =>
-      params.serverKey
-        ? sessionHref(ServerConnection.key(serverSDK().server), id)
-        : legacySessionHref(sdk().directory, id)
+      params.serverKey ? sessionHref(requireServerKey(params.serverKey), id) : legacySessionHref(sdk().directory, id)
     if (parentID) {
       navigate(href(parentID))
       return
@@ -806,7 +803,7 @@ export function MessageTimeline(props: {
       return
     }
     if (params.serverKey) {
-      tabs.newDraft({ server: ServerConnection.key(serverSDK().server), directory: sdk().directory })
+      tabs.newDraft({ server: requireServerKey(params.serverKey), directory: sdk().directory })
       return
     }
     navigate(`/${params.dir}/session`)
@@ -910,9 +907,7 @@ export function MessageTimeline(props: {
     const id = parentID()
     if (!id) return
     navigate(
-      params.serverKey
-        ? sessionHref(ServerConnection.key(serverSDK().server), id)
-        : legacySessionHref(sdk().directory, id),
+      params.serverKey ? sessionHref(requireServerKey(params.serverKey), id) : legacySessionHref(sdk().directory, id),
     )
   }
 

packages/app/src/utils/session-route.test.ts

@@ -1,13 +1,6 @@
 import { describe, expect, test } from "bun:test"
 import { ServerConnection } from "@/context/server"
-import {
-  legacySessionHref,
-  legacySessionServer,
-  parseServerKey,
-  retainServerKey,
-  rootSession,
-  sessionHref,
-} from "./session-route"
+import { legacySessionHref, legacySessionServer, requireServerKey, rootSession, sessionHref } from "./session-route"
 
 describe("session routes", () => {
   test("uses the unique persisted server for a legacy session route", () => {
@@ -38,17 +31,11 @@ describe("session routes", () => {
     const href = sessionHref(server, "session-1")
 
     expect(href).toBe("/server/aHR0cHM6Ly9leGFtcGxlLmNvbTo0MDk2/session/session-1")
-    expect(parseServerKey(href.split("/")[2])).toBe(server)
+    expect(requireServerKey(href.split("/")[2])).toBe(server)
   })
 
-  test("returns undefined for malformed server routes", () => {
-    expect(parseServerKey("not-base64")).toBeUndefined()
-  })
-
-  test("retains the current server while a route is being removed", () => {
-    const server = ServerConnection.Key.make("https://example.com:4096")
-    expect(retainServerKey(server, undefined)).toBe(server)
-    expect(retainServerKey(server, "not-base64")).toBeUndefined()
+  test("rejects malformed server keys", () => {
+    expect(() => requireServerKey("not-base64")).toThrow("Invalid server route")
   })
 
   test("builds the legacy directory-keyed route", () => {

packages/app/src/utils/session-route.ts

@@ -10,17 +10,12 @@ export function legacySessionHref(directory: string, sessionID: string) {
   return `/${base64Encode(directory)}/session/${sessionID}`
 }
 
-export function parseServerKey(segment: string | undefined) {
+export function requireServerKey(segment: string | undefined) {
   const key = decode64(segment)
-  if (!key || base64Encode(key) !== segment) return undefined
+  if (!key || base64Encode(key) !== segment) throw new Error("Invalid server route")
   return ServerConnection.Key.make(key)
 }
 
-export function retainServerKey(previous: ServerConnection.Key | undefined, segment: string | undefined) {
-  if (segment === undefined) return previous
-  return parseServerKey(segment)
-}
-
 export function legacySessionServer(
   tabs: readonly { type: "session"; server: ServerConnection.Key; sessionId: string }[],
   sessionID: string,

packages/ui/src/components/select-defer.test.ts

@@ -1,12 +0,0 @@
-import { expect, test } from "bun:test"
-import { deferSelect } from "./select-defer"
-
-test("defers controlled select updates until the current selection closes", async () => {
-  const order: string[] = []
-  deferSelect(() => order.push("update"), "theme")
-  order.push("close")
-
-  expect(order).toEqual(["close"])
-  await Promise.resolve()
-  expect(order).toEqual(["close", "update"])
-})

packages/ui/src/components/select-defer.ts

@@ -1,5 +0,0 @@
-export function deferSelect<T>(callback: ((value: T) => void) | undefined, value: T) {
-  // Kobalte closes the popup after onChange returns. Controlled updates must wait
-  // so they cannot rebuild the value or options during portal cleanup.
-  queueMicrotask(() => callback?.(value))
-}

packages/ui/src/components/select.tsx

@@ -3,7 +3,6 @@ import { createMemo, onCleanup, splitProps, type ComponentProps, type JSX } from
 import { pipe, groupBy, entries, map } from "remeda"
 import { Button, ButtonProps } from "./button"
 import { Icon } from "./icon"
-import { deferSelect } from "./select-defer"
 
 export type SelectProps<T> = Omit<ComponentProps<typeof Kobalte<T>>, "value" | "onSelect" | "children"> & {
   placeholder?: string
@@ -125,7 +124,7 @@ export function Select<T>(props: SelectProps<T> & Omit<ButtonProps, "children">)
         </Kobalte.Item>
       )}
       onChange={(v) => {
-        deferSelect(local.onSelect, v ?? undefined)
+        local.onSelect?.(v ?? undefined)
         stop()
       }}
       onOpenChange={(open) => {

packages/ui/src/v2/components/select-v2.tsx

@@ -1,6 +1,5 @@
 import { Select as Kobalte } from "@kobalte/core/select"
 import { Show, createMemo, onCleanup, splitProps, type ComponentProps, type JSX } from "solid-js"
-import { deferSelect } from "../../components/select-defer"
 import "./select-v2.css"
 
 function groupOptions<T>(options: T[], groupBy?: (x: T) => string): { category: string; options: T[] }[] {
@@ -166,7 +165,7 @@ export function SelectV2<T>(props: SelectV2Props<T>) {
       )}
       onChange={(next) => {
         const v = next == null ? null : Array.isArray(next) ? ((next[0] as T) ?? null) : (next as T)
-        deferSelect(local.onSelect, v)
+        local.onSelect?.(v)
         stop()
       }}
       onOpenChange={(open) => {