release: v1.18.9

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

@@ -55,7 +55,6 @@ export function PromptInputV2Composer(props: PromptInputV2ComposerProps) {
         controller={props.controller}
         borderUnderlay={props.borderUnderlay}
         class={props.class}
-        variantControlVisible={!props.controller.model.loading}
         attachKeybind={command.keybindParts("file.attach")}
         attachShortcut={command.keybind("file.attach")}
         modelControl={

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

@@ -9,86 +9,53 @@
   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: 6px;
+  gap: 13.5px;
 }
 
 [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: -3.75px;
+  left: -6.75px;
   width: 1.5px;
   height: 12px;
   border-radius: 9999px;
-  background: var(--tab-separator);
+  background: var(--v2-background-bg-layer-02);
 }
 
 [data-titlebar-tab-slot][data-active="true"] + [data-titlebar-tab-slot]::before {
   display: none;
 }
 
-[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 {
+[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));
   display: none;
 }
 
-[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"]:not([data-editing="true"]) [data-slot="tab-close"]::before {
+  display: block;
+  right: 0;
 }
 
-[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"]: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"]: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] px-1.5 [container-type:inline-size]"
+      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)]"
       classList={{ invisible: props.hidden }}
       data-active={props.active}
       data-dragging={props.dragging}
-      data-state={props.active || props.pressed ? "pressed" : undefined}
+      data-pressed={props.pressed}
       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">
+      <div data-slot="tab-close" class="group-hover:bg-[var(--tab-bg)] group-data-[active=true]:bg-[var(--tab-bg)]">
         <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-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"
+      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)]"
       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">
+      <div data-slot="tab-close" class="group-hover:bg-[var(--tab-bg)] group-data-[active=true]:bg-[var(--tab-bg)]">
         <IconButtonV2
           size="small"
           variant="ghost-muted"

packages/app/src/context/settings.test.ts

@@ -1,7 +1,6 @@
 import { describe, expect, test } from "bun:test"
 import {
   hasExistingWebState,
-  initialAgentVisibility,
   isAppUpgrade,
   layoutTransitionState,
   maximumSunsetTimeout,
@@ -12,22 +11,6 @@ import {
   shouldEnableNewLayout,
 } from "./settings"
 
-describe("agent visibility", () => {
-  test("shows the picker for existing profiles and hides it for first-time installs", () => {
-    expect(initialAgentVisibility(undefined, true)).toBe(true)
-    expect(initialAgentVisibility(undefined, false)).toBe(false)
-  })
-
-  test("shows the picker when updating from a recent release", () => {
-    expect(initialAgentVisibility(undefined, false, "1.18.8")).toBe(true)
-  })
-
-  test("preserves the preference after initialization", () => {
-    expect(initialAgentVisibility(true, true, "1.18.8")).toBeUndefined()
-    expect(initialAgentVisibility(true, false)).toBeUndefined()
-  })
-})
-
 describe("layout transition", () => {
   test("blank profiles default to the new layout", () => {
     expect(newLayoutDesignsDefault).toBe(true)

packages/app/src/context/settings.tsx

@@ -1,5 +1,5 @@
 import { createStore, reconcile } from "solid-js/store"
-import { batch, createEffect, createMemo, createSignal, onCleanup } from "solid-js"
+import { createEffect, createMemo, createSignal, onCleanup } from "solid-js"
 import { createSimpleContext } from "@opencode-ai/ui/context"
 import { persisted } from "@/utils/persist"
 import { usePlatform } from "@/context/platform"
@@ -36,7 +36,6 @@ export interface Settings {
     mobileTitlebarPosition: "top" | "bottom"
     newLayoutDesigns?: boolean
     layoutTransitionEligible?: boolean
-    agentVisibilityInitialized?: boolean
     newInterfaceNoticeDismissed?: boolean
     shouldDisplayTabsToast?: boolean
   }
@@ -94,11 +93,6 @@ export function hasExistingWebState(settings: Promise<string> | string | null, p
   return settings !== null || previousVersion !== undefined
 }
 
-export function initialAgentVisibility(initialized: boolean | undefined, existing: boolean, previousVersion?: string) {
-  if (initialized === true) return
-  return existing || previousVersion !== undefined
-}
-
 export function shouldEnableNewLayout(previous: string | undefined, current: string | undefined) {
   if (!current) return false
   const currentComparison = compareVersions(current, newLayoutDesignsUpgradeCutoff)
@@ -277,14 +271,6 @@ export const { use: useSettings, provider: SettingsProvider } = createSimpleCont
       )
     })
     const visible = (preference: () => boolean) => createMemo(() => !newLayoutDesigns() || preference())
-    const initializeAgentVisibility = (existing: boolean) => {
-      const initial = initialAgentVisibility(store.general?.agentVisibilityInitialized, existing, launchState.previous)
-      if (initial === undefined) return
-      batch(() => {
-        setStore("general", "showCustomAgents", initial)
-        setStore("general", "agentVisibilityInitialized", true)
-      })
-    }
 
     if (sunset && !oldInterfaceRetired()) {
       const timeout = { current: undefined as ReturnType<typeof setTimeout> | undefined }
@@ -313,9 +299,8 @@ export const { use: useSettings, provider: SettingsProvider } = createSimpleCont
 
     createEffect(() => {
       if (!ready() || !launchState.classified || platform.platform !== "web") return
-      const existing = hasExistingWebState(settingsInit, launchState.previous)
-      if (!layoutTransitionClassified()) setStore("general", "layoutTransitionEligible", existing)
-      initializeAgentVisibility(existing)
+      if (layoutTransitionClassified()) return
+      setStore("general", "layoutTransitionEligible", hasExistingWebState(settingsInit, launchState.previous))
     })
 
     createEffect(() => {
@@ -441,7 +426,6 @@ export const { use: useSettings, provider: SettingsProvider } = createSimpleCont
           if (typeof current === "boolean") return
           setStore("general", "layoutTransitionEligible", eligible)
         },
-        initializeAgentVisibility,
         layoutTransitionAvailable: createMemo(() => ready() && layoutTransition().available),
         newInterfaceNoticeVisible: createMemo(() => ready() && layoutTransition().notice),
         dismissNewInterfaceNotice() {

packages/desktop/src/renderer/onboarding.tsx

@@ -17,7 +17,6 @@ export function DesktopFirstLaunchOnboarding(props: { initialUrl: string; onLoad
       )
       const existingInstall = await window.api.isOldLayoutEligible()
       settings.general.setOldLayoutEligible(existingInstall)
-      settings.general.initializeAgentVisibility(existingInstall)
       if (!server.isLocal()) return
 
       const pending = await window.api.isFirstLaunchOnboardingPending()

packages/session-ui/src/v2/components/prompt-input/index.tsx

@@ -39,7 +39,6 @@ export type PromptInputV2Props = {
   borderUnderlay?: boolean
   class?: string
   modelControl?: JSX.Element
-  variantControlVisible?: boolean
   attachKeybind?: string[]
   attachShortcut?: string
 }
@@ -233,7 +232,7 @@ export function PromptInputV2(props: PromptInputV2Props) {
             >
               {props.modelControl}
             </Show>
-            <Show when={(props.variantControlVisible ?? true) && view.variant}>
+            <Show when={view.variant}>
               {(control) => (
                 <Show when={control().options().length > 1}>
                   <PromptInputV2ConfiguredSelect