release: v1.1.47

Co-authored-by: Github Action <action@github.com>
Co-authored-by: Copilot <198982749+Copilot@users.noreply.github.com>
Co-authored-by: aaroniker <4730431+aaroniker@users.noreply.github.com>

.github/actions/setup-git-committer/action.yml

@@ -23,6 +23,7 @@ runs:
       with:
         app-id: ${{ inputs.opencode-app-id }}
         private-key: ${{ inputs.opencode-app-secret }}
+        owner: ${{ github.repository_owner }}
 
     - name: Configure git user
       run: |

.github/pull_request_template.md

@@ -1,3 +1,7 @@
 ### What does this PR do?
 
+Please provide a description of the issue (if there is one), the changes you made to fix it, and why they work. It is expected that you understand why your changes work and if you do not understand why at least say as much so a maintainer knows how much to value the pr.
+
+**If you paste a large clearly AI generated description here your PR may be IGNORED or CLOSED!**
+
 ### How did you verify your code works?

.github/workflows/beta.yml

@@ -19,16 +19,20 @@ jobs:
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
 
       - name: Setup Bun
         uses: ./.github/actions/setup-bun
 
-      - name: Configure Git
-        run: |
-          git config user.name "github-actions[bot]"
-          git config user.email "github-actions[bot]@users.noreply.github.com"
+      - name: Setup Git Committer
+        id: setup-git-committer
+        uses: ./.github/actions/setup-git-committer
+        with:
+          opencode-app-id: ${{ vars.OPENCODE_APP_ID }}
+          opencode-app-secret: ${{ secrets.OPENCODE_APP_SECRET }}
 
       - name: Sync beta branch
         env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GH_TOKEN: ${{ steps.setup-git-committer.outputs.token }}
         run: bun script/beta.ts

.github/workflows/generate.yml

@@ -4,8 +4,6 @@ on:
   push:
     branches:
       - dev
-  pull_request:
-  workflow_dispatch:
 
 jobs:
   generate:

.github/workflows/publish.yml

@@ -7,7 +7,6 @@ on:
       - ci
       - dev
       - beta
-      - workflow/publish-updates
       - snapshot-*
   workflow_dispatch:
     inputs:
@@ -43,14 +42,14 @@ jobs:
       - uses: ./.github/actions/setup-bun
 
       - name: Install OpenCode
-        # if: inputs.bump || inputs.version
+        if: inputs.bump || inputs.version
         run: bun i -g opencode-ai
 
       - id: version
         run: |
           ./script/version.ts
         env:
-          GITHUB_TOKEN: ${{ github.token }}
+          GH_TOKEN: ${{ github.token }}
           OPENCODE_BUMP: ${{ inputs.bump }}
           OPENCODE_VERSION: ${{ inputs.version }}
           OPENCODE_API_KEY: ${{ secrets.OPENCODE_API_KEY }}
@@ -77,7 +76,7 @@ jobs:
         env:
           OPENCODE_VERSION: ${{ needs.version.outputs.version }}
           OPENCODE_RELEASE: ${{ needs.version.outputs.release }}
-          GITHUB_TOKEN: ${{ github.token }}
+          GH_TOKEN: ${{ github.token }}
 
       - uses: actions/upload-artifact@v4
         with:
@@ -165,8 +164,9 @@ jobs:
           bun ./scripts/prepare.ts
         env:
           OPENCODE_VERSION: ${{ needs.version.outputs.version }}
+          GITHUB_TOKEN: ${{ steps.committer.outputs.token }}
           RUST_TARGET: ${{ matrix.settings.target }}
-          GITHUB_TOKEN: ${{ github.token }}
+          GH_TOKEN: ${{ github.token }}
           GITHUB_RUN_ID: ${{ github.run_id }}
 
       # Fixes AppImage build issues, can be removed when https://github.com/tauri-apps/tauri/pull/12491 is released
@@ -191,7 +191,7 @@ jobs:
           releaseDraft: true
           releaseAssetNamePattern: opencode-desktop-[platform]-[arch][ext]
         env:
-          GITHUB_TOKEN: ${{ github.token }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           TAURI_BUNDLER_NEW_APPIMAGE_FORMAT: true
           TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_SIGNING_PRIVATE_KEY }}
           TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_SIGNING_PRIVATE_KEY_PASSWORD }}
@@ -206,7 +206,7 @@ jobs:
     needs:
       - version
       - build-cli
-      # - build-tauri
+      - build-tauri
     runs-on: blacksmith-4vcpu-ubuntu-2404
     steps:
       - uses: actions/checkout@v3
@@ -218,7 +218,7 @@ jobs:
         with:
           registry: ghcr.io
           username: ${{ github.repository_owner }}
-          password: ${{ github.token }}
+          password: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Set up QEMU
         uses: docker/setup-qemu-action@v3
@@ -231,6 +231,13 @@ jobs:
           node-version: "24"
           registry-url: "https://registry.npmjs.org"
 
+      - name: Setup git committer
+        id: committer
+        uses: ./.github/actions/setup-git-committer
+        with:
+          opencode-app-id: ${{ vars.OPENCODE_APP_ID }}
+          opencode-app-secret: ${{ secrets.OPENCODE_APP_SECRET }}
+
       - uses: actions/download-artifact@v4
         with:
           name: opencode-cli
@@ -255,13 +262,6 @@ jobs:
           git config --global user.name "opencode"
           ssh-keyscan -H aur.archlinux.org >> ~/.ssh/known_hosts || true
 
-      - name: Setup git committer
-        id: committer
-        uses: ./.github/actions/setup-git-committer
-        with:
-          opencode-app-id: ${{ vars.OPENCODE_APP_ID }}
-          opencode-app-secret: ${{ secrets.OPENCODE_APP_SECRET }}
-
       - run: ./script/publish.ts
         env:
           OPENCODE_VERSION: ${{ needs.version.outputs.version }}

bun.lock

@@ -23,7 +23,7 @@
     },
     "packages/app": {
       "name": "@opencode-ai/app",
-      "version": "1.1.45",
+      "version": "1.1.47",
       "dependencies": {
         "@kobalte/core": "catalog:",
         "@opencode-ai/sdk": "workspace:*",
@@ -73,7 +73,7 @@
     },
     "packages/console/app": {
       "name": "@opencode-ai/console-app",
-      "version": "1.1.45",
+      "version": "1.1.47",
       "dependencies": {
         "@cloudflare/vite-plugin": "1.15.2",
         "@ibm/plex": "6.4.1",
@@ -107,7 +107,7 @@
     },
     "packages/console/core": {
       "name": "@opencode-ai/console-core",
-      "version": "1.1.45",
+      "version": "1.1.47",
       "dependencies": {
         "@aws-sdk/client-sts": "3.782.0",
         "@jsx-email/render": "1.1.1",
@@ -134,7 +134,7 @@
     },
     "packages/console/function": {
       "name": "@opencode-ai/console-function",
-      "version": "1.1.45",
+      "version": "1.1.47",
       "dependencies": {
         "@ai-sdk/anthropic": "2.0.0",
         "@ai-sdk/openai": "2.0.2",
@@ -158,7 +158,7 @@
     },
     "packages/console/mail": {
       "name": "@opencode-ai/console-mail",
-      "version": "1.1.45",
+      "version": "1.1.47",
       "dependencies": {
         "@jsx-email/all": "2.2.3",
         "@jsx-email/cli": "1.4.3",
@@ -182,7 +182,7 @@
     },
     "packages/desktop": {
       "name": "@opencode-ai/desktop",
-      "version": "1.1.45",
+      "version": "1.1.47",
       "dependencies": {
         "@opencode-ai/app": "workspace:*",
         "@opencode-ai/ui": "workspace:*",
@@ -213,7 +213,7 @@
     },
     "packages/enterprise": {
       "name": "@opencode-ai/enterprise",
-      "version": "1.1.45",
+      "version": "1.1.47",
       "dependencies": {
         "@opencode-ai/ui": "workspace:*",
         "@opencode-ai/util": "workspace:*",
@@ -242,7 +242,7 @@
     },
     "packages/function": {
       "name": "@opencode-ai/function",
-      "version": "1.1.45",
+      "version": "1.1.47",
       "dependencies": {
         "@octokit/auth-app": "8.0.1",
         "@octokit/rest": "catalog:",
@@ -258,7 +258,7 @@
     },
     "packages/opencode": {
       "name": "opencode",
-      "version": "1.1.45",
+      "version": "1.1.47",
       "bin": {
         "opencode": "./bin/opencode",
       },
@@ -362,7 +362,7 @@
     },
     "packages/plugin": {
       "name": "@opencode-ai/plugin",
-      "version": "1.1.45",
+      "version": "1.1.47",
       "dependencies": {
         "@opencode-ai/sdk": "workspace:*",
         "zod": "catalog:",
@@ -382,7 +382,7 @@
     },
     "packages/sdk/js": {
       "name": "@opencode-ai/sdk",
-      "version": "1.1.45",
+      "version": "1.1.47",
       "devDependencies": {
         "@hey-api/openapi-ts": "0.90.10",
         "@tsconfig/node22": "catalog:",
@@ -393,7 +393,7 @@
     },
     "packages/slack": {
       "name": "@opencode-ai/slack",
-      "version": "1.1.45",
+      "version": "1.1.47",
       "dependencies": {
         "@opencode-ai/sdk": "workspace:*",
         "@slack/bolt": "^3.17.1",
@@ -406,7 +406,7 @@
     },
     "packages/ui": {
       "name": "@opencode-ai/ui",
-      "version": "1.1.45",
+      "version": "1.1.47",
       "dependencies": {
         "@kobalte/core": "catalog:",
         "@opencode-ai/sdk": "workspace:*",
@@ -448,7 +448,7 @@
     },
     "packages/util": {
       "name": "@opencode-ai/util",
-      "version": "1.1.45",
+      "version": "1.1.47",
       "dependencies": {
         "zod": "catalog:",
       },
@@ -459,7 +459,7 @@
     },
     "packages/web": {
       "name": "@opencode-ai/web",
-      "version": "1.1.45",
+      "version": "1.1.47",
       "dependencies": {
         "@astrojs/cloudflare": "12.6.3",
         "@astrojs/markdown-remark": "6.3.1",

infra/console.ts

@@ -133,6 +133,8 @@ const ZEN_MODELS = [
   new sst.Secret("ZEN_MODELS6"),
   new sst.Secret("ZEN_MODELS7"),
   new sst.Secret("ZEN_MODELS8"),
+  new sst.Secret("ZEN_MODELS9"),
+  new sst.Secret("ZEN_MODELS10"),
 ]
 const STRIPE_SECRET_KEY = new sst.Secret("STRIPE_SECRET_KEY")
 const STRIPE_PUBLISHABLE_KEY = new sst.Secret("STRIPE_PUBLISHABLE_KEY")

packages/app/e2e/app/home.spec.ts

@@ -1,5 +1,5 @@
-import { test, expect } from "./fixtures"
-import { serverName } from "./utils"
+import { test, expect } from "../fixtures"
+import { serverName } from "../utils"
 
 test("home renders and shows core entrypoints", async ({ page }) => {
   await page.goto("/")

packages/app/e2e/app/navigation.spec.ts

@@ -1,5 +1,5 @@
-import { test, expect } from "./fixtures"
-import { dirPath, promptSelector } from "./utils"
+import { test, expect } from "../fixtures"
+import { dirPath, promptSelector } from "../utils"
 
 test("project route redirects to /session", async ({ page, directory, slug }) => {
   await page.goto(dirPath(directory))

packages/app/e2e/app/palette.spec.ts

@@ -1,5 +1,5 @@
-import { test, expect } from "./fixtures"
-import { modKey } from "./utils"
+import { test, expect } from "../fixtures"
+import { modKey } from "../utils"
 
 test("search palette opens and closes", async ({ page, gotoSession }) => {
   await gotoSession()

packages/app/e2e/app/server-default.spec.ts

@@ -1,5 +1,5 @@
-import { test, expect } from "./fixtures"
-import { serverName, serverUrl } from "./utils"
+import { test, expect } from "../fixtures"
+import { serverName, serverUrl } from "../utils"
 
 const DEFAULT_SERVER_URL_KEY = "opencode.settings.dat:defaultServerUrl"
 

packages/app/e2e/app/session.spec.ts

@@ -1,5 +1,5 @@
-import { test, expect } from "./fixtures"
-import { promptSelector } from "./utils"
+import { test, expect } from "../fixtures"
+import { promptSelector } from "../utils"
 
 test("can open an existing session and type into the prompt", async ({ page, sdk, gotoSession }) => {
   const title = `e2e smoke ${Date.now()}`

packages/app/e2e/app/titlebar-history.spec.ts

@@ -1,5 +1,5 @@
-import { test, expect } from "./fixtures"
-import { modKey, promptSelector } from "./utils"
+import { test, expect } from "../fixtures"
+import { modKey, promptSelector } from "../utils"
 
 test("titlebar back/forward navigates between sessions", async ({ page, slug, sdk, gotoSession }) => {
   await page.setViewportSize({ width: 1400, height: 800 })

packages/app/e2e/files/file-open.spec.ts

@@ -1,5 +1,5 @@
-import { test, expect } from "./fixtures"
-import { modKey } from "./utils"
+import { test, expect } from "../fixtures"
+import { modKey } from "../utils"
 
 test("can open a file tab from the search palette", async ({ page, gotoSession }) => {
   await gotoSession()

packages/app/e2e/files/file-tree.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect } from "./fixtures"
+import { test, expect } from "../fixtures"
 
 test.skip("file tree can expand folders and open a file", async ({ page, gotoSession }) => {
   await gotoSession()

packages/app/e2e/files/file-viewer.spec.ts

@@ -1,5 +1,5 @@
-import { test, expect } from "./fixtures"
-import { modKey } from "./utils"
+import { test, expect } from "../fixtures"
+import { modKey } from "../utils"
 
 test("smoke file viewer renders real file content", async ({ page, gotoSession }) => {
   await gotoSession()

packages/app/e2e/models/model-picker.spec.ts

@@ -1,5 +1,5 @@
-import { test, expect } from "./fixtures"
-import { promptSelector } from "./utils"
+import { test, expect } from "../fixtures"
+import { promptSelector } from "../utils"
 
 test("smoke model selection updates prompt footer", async ({ page, gotoSession }) => {
   await gotoSession()

packages/app/e2e/models/models-visibility.spec.ts

@@ -1,5 +1,5 @@
-import { test, expect } from "./fixtures"
-import { modKey, promptSelector } from "./utils"
+import { test, expect } from "../fixtures"
+import { modKey, promptSelector } from "../utils"
 
 test("hiding a model removes it from the model picker", async ({ page, gotoSession }) => {
   await gotoSession()

packages/app/e2e/prompt/context.spec.ts

@@ -1,5 +1,5 @@
-import { test, expect } from "./fixtures"
-import { promptSelector } from "./utils"
+import { test, expect } from "../fixtures"
+import { promptSelector } from "../utils"
 
 test("context panel can be opened from the prompt", async ({ page, sdk, gotoSession }) => {
   const title = `e2e smoke context ${Date.now()}`

packages/app/e2e/prompt/prompt-mention.spec.ts

@@ -1,5 +1,5 @@
-import { test, expect } from "./fixtures"
-import { promptSelector } from "./utils"
+import { test, expect } from "../fixtures"
+import { promptSelector } from "../utils"
 
 test("smoke @mention inserts file pill token", async ({ page, gotoSession }) => {
   await gotoSession()

packages/app/e2e/prompt/prompt-slash-open.spec.ts

@@ -1,5 +1,5 @@
-import { test, expect } from "./fixtures"
-import { promptSelector } from "./utils"
+import { test, expect } from "../fixtures"
+import { promptSelector } from "../utils"
 
 test("smoke /open opens file picker dialog", async ({ page, gotoSession }) => {
   await gotoSession()

packages/app/e2e/prompt/prompt.spec.ts

@@ -1,5 +1,5 @@
-import { test, expect } from "./fixtures"
-import { promptSelector } from "./utils"
+import { test, expect } from "../fixtures"
+import { promptSelector } from "../utils"
 
 function sessionIDFromUrl(url: string) {
   const match = /\/session\/([^/?#]+)/.exec(url)

packages/app/e2e/settings/settings-language.spec.ts

@@ -0,0 +1,39 @@
+import { test, expect } from "../fixtures"
+import { modKey, settingsLanguageSelectSelector } from "../utils"
+
+test("smoke changing language updates settings labels", async ({ page, gotoSession }) => {
+  await page.addInitScript(() => {
+    localStorage.setItem("opencode.global.dat:language", JSON.stringify({ locale: "en" }))
+  })
+
+  await gotoSession()
+
+  const dialog = page.getByRole("dialog")
+
+  await page.keyboard.press(`${modKey}+Comma`).catch(() => undefined)
+
+  const opened = await dialog
+    .waitFor({ state: "visible", timeout: 3000 })
+    .then(() => true)
+    .catch(() => false)
+
+  if (!opened) {
+    await page.getByRole("button", { name: "Settings" }).first().click()
+    await expect(dialog).toBeVisible()
+  }
+
+  const heading = dialog.getByRole("heading", { level: 2 })
+  await expect(heading).toHaveText("General")
+
+  const select = dialog.locator(settingsLanguageSelectSelector)
+  await expect(select).toBeVisible()
+  await select.locator('[data-slot="select-select-trigger"]').click()
+
+  await page.locator('[data-slot="select-select-item"]').filter({ hasText: "Deutsch" }).click()
+
+  await expect(heading).toHaveText("Allgemein")
+
+  await select.locator('[data-slot="select-select-trigger"]').click()
+  await page.locator('[data-slot="select-select-item"]').filter({ hasText: "English" }).click()
+  await expect(heading).toHaveText("General")
+})

packages/app/e2e/settings/settings-providers.spec.ts

@@ -1,5 +1,5 @@
-import { test, expect } from "./fixtures"
-import { modKey, promptSelector } from "./utils"
+import { test, expect } from "../fixtures"
+import { modKey, promptSelector } from "../utils"
 
 test("smoke providers settings opens provider selector", async ({ page, gotoSession }) => {
   await gotoSession()

packages/app/e2e/settings/settings.spec.ts

@@ -1,5 +1,5 @@
-import { test, expect } from "./fixtures"
-import { modKey } from "./utils"
+import { test, expect } from "../fixtures"
+import { modKey } from "../utils"
 
 test("smoke settings dialog opens, switches tabs, closes", async ({ page, gotoSession }) => {
   await gotoSession()

packages/app/e2e/sidebar/sidebar-session-links.spec.ts

@@ -1,33 +1,7 @@
-import { test, expect } from "./fixtures"
-import { modKey, promptSelector } from "./utils"
+import { test, expect } from "../fixtures"
+import { modKey, promptSelector } from "../utils"
 
-type Locator = {
-  first: () => Locator
-  getAttribute: (name: string) => Promise<string | null>
-  scrollIntoViewIfNeeded: () => Promise<void>
-  click: () => Promise<void>
-}
-
-type Page = {
-  locator: (selector: string) => Locator
-  keyboard: {
-    press: (key: string) => Promise<void>
-  }
-}
-
-type Fixtures = {
-  page: Page
-  slug: string
-  sdk: {
-    session: {
-      create: (input: { title: string }) => Promise<{ data?: { id?: string } }>
-      delete: (input: { sessionID: string }) => Promise<unknown>
-    }
-  }
-  gotoSession: (sessionID?: string) => Promise<void>
-}
-
-test("sidebar session links navigate to the selected session", async ({ page, slug, sdk, gotoSession }: Fixtures) => {
+test("sidebar session links navigate to the selected session", async ({ page, slug, sdk, gotoSession }) => {
   const stamp = Date.now()
 
   const one = await sdk.session.create({ title: `e2e sidebar nav 1 ${stamp}` }).then((r) => r.data)

packages/app/e2e/sidebar/sidebar.spec.ts

@@ -1,5 +1,5 @@
-import { test, expect } from "./fixtures"
-import { modKey } from "./utils"
+import { test, expect } from "../fixtures"
+import { modKey } from "../utils"
 
 test("sidebar can be collapsed and expanded", async ({ page, gotoSession }) => {
   await gotoSession()

packages/app/e2e/terminal/terminal-init.spec.ts

@@ -1,5 +1,5 @@
-import { test, expect } from "./fixtures"
-import { promptSelector, terminalSelector, terminalToggleKey } from "./utils"
+import { test, expect } from "../fixtures"
+import { promptSelector, terminalSelector, terminalToggleKey } from "../utils"
 
 test("smoke terminal mounts and can create a second tab", async ({ page, gotoSession }) => {
   await gotoSession()

packages/app/e2e/terminal/terminal.spec.ts

@@ -1,5 +1,5 @@
-import { test, expect } from "./fixtures"
-import { terminalSelector, terminalToggleKey } from "./utils"
+import { test, expect } from "../fixtures"
+import { terminalSelector, terminalToggleKey } from "../utils"
 
 test("terminal panel can be toggled", async ({ page, gotoSession }) => {
   await gotoSession()

packages/app/e2e/utils.ts

@@ -14,6 +14,8 @@ export const promptSelector = '[data-component="prompt-input"]'
 export const terminalSelector = '[data-component="terminal"]'
 export const modelVariantCycleSelector = '[data-action="model-variant-cycle"]'
 
+export const settingsLanguageSelectSelector = '[data-action="settings-language"]'
+
 export function createSdk(directory?: string) {
   return createOpencodeClient({ baseUrl: serverUrl, directory, throwOnError: true })
 }

packages/app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/app",
-  "version": "1.1.45",
+  "version": "1.1.47",
   "description": "",
   "type": "module",
   "exports": {

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

@@ -90,7 +90,7 @@ const ModelList: Component<{
 
 export function ModelSelectorPopover<T extends ValidComponent = "div">(props: {
   provider?: string
-  children?: JSX.Element
+  children?: JSX.Element | ((open: boolean) => JSX.Element)
   triggerAs?: T
   triggerProps?: ComponentProps<T>
 }) {
@@ -182,12 +182,13 @@ export function ModelSelectorPopover<T extends ValidComponent = "div">(props: {
         as={props.triggerAs ?? "div"}
         {...(props.triggerProps as any)}
       >
-        {props.children}
+        {typeof props.children === "function" ? props.children(store.open) : props.children}
       </Kobalte.Trigger>
       <Kobalte.Portal>
         <Kobalte.Content
+          class="w-72 h-80 flex flex-col rounded-md border border-border-base bg-surface-raised-stronger-non-alpha shadow-md z-50 outline-none overflow-hidden"
+          data-component="model-popover-content"
           ref={(el) => setStore("content", el)}
-          class="w-72 h-80 flex flex-col p-2 rounded-md border border-border-base bg-surface-raised-stronger-non-alpha shadow-md z-50 outline-none overflow-hidden"
           onEscapeKeyDown={(event) => {
             setStore("dismiss", "escape")
             setStore("open", false)

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

@@ -32,7 +32,9 @@ import { useNavigate, useParams } from "@solidjs/router"
 import { useSync } from "@/context/sync"
 import { useComments } from "@/context/comments"
 import { FileIcon } from "@opencode-ai/ui/file-icon"
+import { MorphChevron } from "@opencode-ai/ui/morph-chevron"
 import { Button } from "@opencode-ai/ui/button"
+import { CycleLabel } from "@opencode-ai/ui/cycle-label"
 import { Icon } from "@opencode-ai/ui/icon"
 import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
 import type { IconName } from "@opencode-ai/ui/icons/provider"
@@ -42,6 +44,7 @@ import { Select } from "@opencode-ai/ui/select"
 import { getDirectory, getFilename, getFilenameTruncated } from "@opencode-ai/util/path"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { ImagePreview } from "@opencode-ai/ui/image-preview"
+import { ReasoningIcon } from "@opencode-ai/ui/reasoning-icon"
 import { ModelSelectorPopover } from "@/components/dialog-select-model"
 import { DialogSelectModelUnpaid } from "@/components/dialog-select-model-unpaid"
 import { useProviders } from "@/hooks/use-providers"
@@ -1252,7 +1255,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
       clearInput()
       client.session
         .shell({
-          sessionID: session.id,
+          sessionID: session?.id || "",
           agent,
           model,
           command: text,
@@ -1275,7 +1278,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
         clearInput()
         client.session
           .command({
-            sessionID: session.id,
+            sessionID: session?.id || "",
             command: commandName,
             arguments: args.join(" "),
             agent,
@@ -1431,13 +1434,13 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
 
     const optimisticParts = requestParts.map((part) => ({
       ...part,
-      sessionID: session.id,
+      sessionID: session?.id || "",
       messageID,
     })) as unknown as Part[]
 
     const optimisticMessage: Message = {
       id: messageID,
-      sessionID: session.id,
+      sessionID: session?.id || "",
       role: "user",
       time: { created: Date.now() },
       agent,
@@ -1448,9 +1451,9 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
       if (sessionDirectory === projectDirectory) {
         sync.set(
           produce((draft) => {
-            const messages = draft.message[session.id]
+            const messages = draft.message[session?.id || ""]
             if (!messages) {
-              draft.message[session.id] = [optimisticMessage]
+              draft.message[session?.id || ""] = [optimisticMessage]
             } else {
               const result = Binary.search(messages, messageID, (m) => m.id)
               messages.splice(result.index, 0, optimisticMessage)
@@ -1466,9 +1469,9 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
 
       globalSync.child(sessionDirectory)[1](
         produce((draft) => {
-          const messages = draft.message[session.id]
+          const messages = draft.message[session?.id || ""]
           if (!messages) {
-            draft.message[session.id] = [optimisticMessage]
+            draft.message[session?.id || ""] = [optimisticMessage]
           } else {
             const result = Binary.search(messages, messageID, (m) => m.id)
             messages.splice(result.index, 0, optimisticMessage)
@@ -1485,7 +1488,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
       if (sessionDirectory === projectDirectory) {
         sync.set(
           produce((draft) => {
-            const messages = draft.message[session.id]
+            const messages = draft.message[session?.id || ""]
             if (messages) {
               const result = Binary.search(messages, messageID, (m) => m.id)
               if (result.found) messages.splice(result.index, 1)
@@ -1498,7 +1501,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
 
       globalSync.child(sessionDirectory)[1](
         produce((draft) => {
-          const messages = draft.message[session.id]
+          const messages = draft.message[session?.id || ""]
           if (messages) {
             const result = Binary.search(messages, messageID, (m) => m.id)
             if (result.found) messages.splice(result.index, 1)
@@ -1519,15 +1522,15 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
       const worktree = WorktreeState.get(sessionDirectory)
       if (!worktree || worktree.status !== "pending") return true
 
-      if (sessionDirectory === projectDirectory) {
-        sync.set("session_status", session.id, { type: "busy" })
+      if (sessionDirectory === projectDirectory && session?.id) {
+        sync.set("session_status", session?.id, { type: "busy" })
       }
 
       const controller = new AbortController()
 
       const cleanup = () => {
-        if (sessionDirectory === projectDirectory) {
-          sync.set("session_status", session.id, { type: "idle" })
+        if (sessionDirectory === projectDirectory && session?.id) {
+          sync.set("session_status", session?.id, { type: "idle" })
         }
         removeOptimisticMessage()
         for (const item of commentItems) {
@@ -1544,7 +1547,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
         restoreInput()
       }
 
-      pending.set(session.id, { abort: controller, cleanup })
+      pending.set(session?.id || "", { abort: controller, cleanup })
 
       const abort = new Promise<Awaited<ReturnType<typeof WorktreeState.wait>>>((resolve) => {
         if (controller.signal.aborted) {
@@ -1572,7 +1575,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
         if (timer.id === undefined) return
         clearTimeout(timer.id)
       })
-      pending.delete(session.id)
+      pending.delete(session?.id || "")
       if (controller.signal.aborted) return false
       if (result.status === "failed") throw new Error(result.message)
       return true
@@ -1582,7 +1585,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
       const ok = await waitForWorktree()
       if (!ok) return
       await client.session.prompt({
-        sessionID: session.id,
+        sessionID: session?.id || "",
         agent,
         model,
         messageID,
@@ -1592,9 +1595,9 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     }
 
     void send().catch((err) => {
-      pending.delete(session.id)
-      if (sessionDirectory === projectDirectory) {
-        sync.set("session_status", session.id, { type: "idle" })
+      pending.delete(session?.id || "")
+      if (sessionDirectory === projectDirectory && session?.id) {
+        sync.set("session_status", session?.id, { type: "idle" })
       }
       showToast({
         title: language.t("prompt.toast.promptSendFailed.title"),
@@ -1616,6 +1619,28 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     })
   }
 
+  const currrentModelVariant = createMemo(() => {
+    const modelVariant = local.model.variant.current() ?? ""
+    return modelVariant === "xhigh"
+      ? "xHigh"
+      : modelVariant.length > 0
+        ? modelVariant[0].toUpperCase() + modelVariant.slice(1)
+        : "Default"
+  })
+
+  const reasoningPercentage = createMemo(() => {
+    const variants = local.model.variant.list()
+    const current = local.model.variant.current()
+    const totalEntries = variants.length + 1
+
+    if (totalEntries <= 2 || current === "Default") {
+      return 0
+    }
+
+    const currentIndex = current ? variants.indexOf(current) + 1 : 0
+    return ((currentIndex + 1) / totalEntries) * 100
+  }, [local.model.variant])
+
   return (
     <div class="relative size-full _max-h-[320px] flex flex-col gap-3">
       <Show when={store.popover}>
@@ -1668,7 +1693,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                           </>
                         }
                       >
-                        <Icon name="brain" size="small" class="text-icon-info-active shrink-0" />
+                        <Icon name="brain" size="normal" class="text-icon-info-active shrink-0" />
                         <span class="text-14-regular text-text-strong whitespace-nowrap">
                           @{(item as { type: "agent"; name: string }).name}
                         </span>
@@ -1729,9 +1754,9 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
         }}
       >
         <Show when={store.dragging}>
-          <div class="absolute inset-0 z-10 flex items-center justify-center bg-surface-raised-stronger-non-alpha/90 pointer-events-none">
+          <div class="absolute inset-0 z-10 flex items-center justify-center bg-surface-raised-stronger-non-alpha/90 mr-1 pointer-events-none">
             <div class="flex flex-col items-center gap-2 text-text-weak">
-              <Icon name="photo" class="size-8" />
+              <Icon name="photo" size={18} class="text-icon-base stroke-1.5" />
               <span class="text-14-regular">{language.t("prompt.dropzone.label")}</span>
             </div>
           </div>
@@ -1770,7 +1795,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                       }}
                     >
                       <div class="flex items-center gap-1.5">
-                        <FileIcon node={{ path: item.path, type: "file" }} class="shrink-0 size-3.5" />
+                        <FileIcon node={{ path: item.path, type: "file" }} class="shrink-0 size-7" />
                         <div class="flex items-center text-11-regular min-w-0 font-medium">
                           <span class="text-text-strong whitespace-nowrap">{getFilenameTruncated(item.path, 14)}</span>
                           <Show when={item.selection}>
@@ -1787,7 +1812,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                           type="button"
                           icon="close-small"
                           variant="ghost"
-                          class="ml-auto h-5 w-5 opacity-0 group-hover:opacity-100 transition-all"
+                          class="ml-auto size-7 opacity-0 group-hover:opacity-100 transition-all"
                           onClick={(e) => {
                             e.stopPropagation()
                             if (item.commentID) comments.remove(item.path, item.commentID)
@@ -1817,7 +1842,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                     when={attachment.mime.startsWith("image/")}
                     fallback={
                       <div class="size-16 rounded-md bg-surface-base flex items-center justify-center border border-border-base">
-                        <Icon name="folder" class="size-6 text-text-weak" />
+                        <Icon name="folder" size="normal" class="size-6 text-text-base" />
                       </div>
                     }
                   >
@@ -1891,7 +1916,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
           </Show>
         </div>
         <div class="relative p-3 flex items-center justify-between">
-          <div class="flex items-center justify-start gap-0.5">
+          <div class="flex items-center justify-start gap-2">
             <Switch>
               <Match when={store.mode === "shell"}>
                 <div class="flex items-center gap-2 px-2 h-6">
@@ -1922,12 +1947,17 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                       title={language.t("command.model.choose")}
                       keybind={command.keybind("model.choose")}
                     >
-                      <Button as="div" variant="ghost" onClick={() => dialog.show(() => <DialogSelectModelUnpaid />)}>
+                      <Button
+                        as="div"
+                        variant="ghost"
+                        class="px-2"
+                        onClick={() => dialog.render(<DialogSelectModelUnpaid />, "select-model")}
+                      >
                         <Show when={local.model.current()?.provider?.id}>
                           <ProviderIcon id={local.model.current()!.provider.id as IconName} class="size-4 shrink-0" />
                         </Show>
                         {local.model.current()?.name ?? language.t("dialog.model.select.title")}
-                        <Icon name="chevron-down" size="small" />
+                        <MorphChevron expanded={dialog.isActive("select-model")} />
                       </Button>
                     </TooltipKeybind>
                   }
@@ -1938,11 +1968,15 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                     keybind={command.keybind("model.choose")}
                   >
                     <ModelSelectorPopover triggerAs={Button} triggerProps={{ variant: "ghost" }}>
-                      <Show when={local.model.current()?.provider?.id}>
-                        <ProviderIcon id={local.model.current()!.provider.id as IconName} class="size-4 shrink-0" />
-                      </Show>
-                      {local.model.current()?.name ?? language.t("dialog.model.select.title")}
-                      <Icon name="chevron-down" size="small" />
+                      {(open) => (
+                        <>
+                          <Show when={local.model.current()?.provider?.id}>
+                            <ProviderIcon id={local.model.current()!.provider.id as IconName} class="size-4 shrink-0" />
+                          </Show>
+                          {local.model.current()?.name ?? language.t("dialog.model.select.title")}
+                          <MorphChevron expanded={open} class="text-text-weak" />
+                        </>
+                      )}
                     </ModelSelectorPopover>
                   </TooltipKeybind>
                 </Show>
@@ -1955,10 +1989,13 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                     <Button
                       data-action="model-variant-cycle"
                       variant="ghost"
-                      class="text-text-base _hidden group-hover/prompt-input:inline-block capitalize text-12-regular"
+                      class="text-text-strong text-12-regular"
                       onClick={() => local.model.variant.cycle()}
                     >
-                      {local.model.variant.current() ?? language.t("common.default")}
+                      <Show when={local.model.variant.list().length > 1}>
+                        <ReasoningIcon percentage={reasoningPercentage()} size={16} strokeWidth={1.25} />
+                      </Show>
+                      <CycleLabel value={currrentModelVariant()} />
                     </Button>
                   </TooltipKeybind>
                 </Show>
@@ -1972,7 +2009,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                       variant="ghost"
                       onClick={() => permission.toggleAutoAccept(params.id!, sdk.directory)}
                       classList={{
-                        "_hidden group-hover/prompt-input:flex size-6 items-center justify-center": true,
+                        "_hidden group-hover/prompt-input:flex items-center justify-center": true,
                         "text-text-base": !permission.isAutoAccepting(params.id!, sdk.directory),
                         "hover:bg-surface-success-base": permission.isAutoAccepting(params.id!, sdk.directory),
                       }}
@@ -1994,7 +2031,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
               </Match>
             </Switch>
           </div>
-          <div class="flex items-center gap-3 absolute right-3 bottom-3">
+          <div class="flex items-center gap-1 absolute right-3 bottom-3">
             <input
               ref={fileInputRef}
               type="file"
@@ -2006,18 +2043,19 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                 e.currentTarget.value = ""
               }}
             />
-            <div class="flex items-center gap-2">
+            <div class="flex items-center gap-1.5 mr-1.5">
               <SessionContextUsage />
               <Show when={store.mode === "normal"}>
                 <Tooltip placement="top" value={language.t("prompt.action.attachFile")}>
                   <Button
                     type="button"
                     variant="ghost"
-                    class="size-6"
+                    size="small"
+                    class="px-1"
                     onClick={() => fileInputRef.click()}
                     aria-label={language.t("prompt.action.attachFile")}
                   >
-                    <Icon name="photo" class="size-4.5" />
+                    <Icon name="photo" class="size-6 text-icon-base" />
                   </Button>
                 </Tooltip>
               </Show>
@@ -2036,7 +2074,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                   <Match when={true}>
                     <div class="flex items-center gap-2">
                       <span>{language.t("prompt.action.send")}</span>
-                      <Icon name="enter" size="small" class="text-icon-base" />
+                      <Icon name="enter" size="normal" class="text-icon-base" />
                     </div>
                   </Match>
                 </Switch>
@@ -2047,7 +2085,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                 disabled={!prompt.dirty() && !working()}
                 icon={working() ? "stop" : "arrow-up"}
                 variant="primary"
-                class="h-6 w-4.5"
+                class="h-6 w-5.5"
                 aria-label={working() ? language.t("prompt.action.stop") : language.t("prompt.action.send")}
               />
             </Tooltip>

packages/app/src/components/session-context-usage.tsx

@@ -64,8 +64,8 @@ export function SessionContextUsage(props: SessionContextUsageProps) {
   }
 
   const circle = () => (
-    <div class="p-1">
-      <ProgressCircle size={16} strokeWidth={2} percentage={context()?.percentage ?? 0} />
+    <div class="text-icon-base">
+      <ProgressCircle size={18} percentage={context()?.percentage ?? 0} />
     </div>
   )
 
@@ -101,7 +101,7 @@ export function SessionContextUsage(props: SessionContextUsageProps) {
             <Button
               type="button"
               variant="ghost"
-              class="size-6"
+              class="size-7 text-icon-base"
               onClick={openContext}
               aria-label={language.t("context.usage.view")}
             >

packages/app/src/components/settings-general.tsx

@@ -10,6 +10,7 @@ import { usePlatform } from "@/context/platform"
 import { useSettings, monoFontFamily } from "@/context/settings"
 import { playSound, SOUND_OPTIONS } from "@/utils/sound"
 import { Link } from "./link"
+import { ScrollFade } from "@opencode-ai/ui/scroll-fade"
 
 let demoSoundState = {
   cleanup: undefined as (() => void) | undefined,
@@ -130,7 +131,12 @@ export const SettingsGeneral: Component = () => {
   const soundOptions = [...SOUND_OPTIONS]
 
   return (
-    <div class="flex flex-col h-full overflow-y-auto no-scrollbar px-4 pb-10 sm:px-10 sm:pb-10">
+    <ScrollFade
+      direction="vertical"
+      fadeStartSize={0}
+      fadeEndSize={16}
+      class="flex flex-col h-full overflow-y-auto no-scrollbar px-4 pb-10 sm:px-10 sm:pb-10"
+    >
       <div class="sticky top-0 z-10 bg-[linear-gradient(to_bottom,var(--surface-raised-stronger-non-alpha)_calc(100%_-_24px),transparent)]">
         <div class="flex flex-col gap-1 pt-6 pb-8">
           <h2 class="text-16-medium text-text-strong">{language.t("settings.tab.general")}</h2>
@@ -148,6 +154,7 @@ export const SettingsGeneral: Component = () => {
               description={language.t("settings.general.row.language.description")}
             >
               <Select
+                data-action="settings-language"
                 options={languageOptions()}
                 current={languageOptions().find((o) => o.value === language.locale())}
                 value={(o) => o.value}
@@ -394,7 +401,7 @@ export const SettingsGeneral: Component = () => {
           </div>
         </div>
       </div>
-    </div>
+    </ScrollFade>
   )
 }
 

packages/app/src/components/settings-keybinds.tsx

@@ -9,6 +9,7 @@ import fuzzysort from "fuzzysort"
 import { formatKeybind, parseKeybind, useCommand } from "@/context/command"
 import { useLanguage } from "@/context/language"
 import { useSettings } from "@/context/settings"
+import { ScrollFade } from "@opencode-ai/ui/scroll-fade"
 
 const IS_MAC = typeof navigator === "object" && /(Mac|iPod|iPhone|iPad)/.test(navigator.platform)
 const PALETTE_ID = "command.palette"
@@ -352,7 +353,12 @@ export const SettingsKeybinds: Component = () => {
   })
 
   return (
-    <div class="flex flex-col h-full overflow-y-auto no-scrollbar px-4 pb-10 sm:px-10 sm:pb-10">
+    <ScrollFade
+      direction="vertical"
+      fadeStartSize={0}
+      fadeEndSize={16}
+      class="flex flex-col h-full overflow-y-auto no-scrollbar px-4 pb-10 sm:px-10 sm:pb-10"
+    >
       <div class="sticky top-0 z-10 bg-[linear-gradient(to_bottom,var(--surface-raised-stronger-non-alpha)_calc(100%_-_24px),transparent)]">
         <div class="flex flex-col gap-4 pt-6 pb-6 max-w-[720px]">
           <div class="flex items-center justify-between gap-4">
@@ -429,6 +435,6 @@ export const SettingsKeybinds: Component = () => {
           </div>
         </Show>
       </div>
-    </div>
+    </ScrollFade>
   )
 }

packages/console/app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/console-app",
-  "version": "1.1.45",
+  "version": "1.1.47",
   "type": "module",
   "license": "MIT",
   "scripts": {

packages/console/core/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@opencode-ai/console-core",
-  "version": "1.1.45",
+  "version": "1.1.47",
   "private": true,
   "type": "module",
   "license": "MIT",

packages/console/core/script/promote-models.ts

@@ -2,20 +2,21 @@
 
 import { $ } from "bun"
 import path from "path"
+import os from "os"
 import { ZenData } from "../src/model"
 
 const stage = process.argv[2]
 if (!stage) throw new Error("Stage is required")
 
 const root = path.resolve(process.cwd(), "..", "..", "..")
-const PARTS = 8
+const PARTS = 10
 
 // read the secret
 const ret = await $`bun sst secret list`.cwd(root).text()
 const lines = ret.split("\n")
 const values = Array.from({ length: PARTS }, (_, i) => {
   const value = lines
-    .find((line) => line.startsWith(`ZEN_MODELS${i + 1}`))
+    .find((line) => line.startsWith(`ZEN_MODELS${i + 1}=`))
     ?.split("=")
     .slice(1)
     .join("=")
@@ -27,6 +28,6 @@ const values = Array.from({ length: PARTS }, (_, i) => {
 ZenData.validate(JSON.parse(values.join("")))
 
 // update the secret
-for (let i = 0; i < PARTS; i++) {
-  await $`bun sst secret set ZEN_MODELS${i + 1} --stage ${stage} -- ${values[i]}`
-}
+const envFile = Bun.file(path.join(os.tmpdir(), `models-${Date.now()}.env`))
+await envFile.write(values.map((v, i) => `ZEN_MODELS${i + 1}=${v}`).join("\n"))
+await $`bun sst secret load ${envFile.name} --stage ${stage}`.cwd(root)

packages/console/core/script/pull-models.ts

@@ -2,20 +2,21 @@
 
 import { $ } from "bun"
 import path from "path"
+import os from "os"
 import { ZenData } from "../src/model"
 
 const stage = process.argv[2]
 if (!stage) throw new Error("Stage is required")
 
 const root = path.resolve(process.cwd(), "..", "..", "..")
-const PARTS = 8
+const PARTS = 10
 
 // read the secret
 const ret = await $`bun sst secret list --stage ${stage}`.cwd(root).text()
 const lines = ret.split("\n")
 const values = Array.from({ length: PARTS }, (_, i) => {
   const value = lines
-    .find((line) => line.startsWith(`ZEN_MODELS${i + 1}`))
+    .find((line) => line.startsWith(`ZEN_MODELS${i + 1}=`))
     ?.split("=")
     .slice(1)
     .join("=")
@@ -27,6 +28,6 @@ const values = Array.from({ length: PARTS }, (_, i) => {
 ZenData.validate(JSON.parse(values.join("")))
 
 // update the secret
-for (let i = 0; i < PARTS; i++) {
-  await $`bun sst secret set ZEN_MODELS${i + 1} -- ${values[i]}`
-}
+const envFile = Bun.file(path.join(os.tmpdir(), `models-${Date.now()}.env`))
+await envFile.write(values.map((v, i) => `ZEN_MODELS${i + 1}=${v}`).join("\n"))
+await $`bun sst secret load ${envFile.name}`.cwd(root)

packages/console/core/script/update-models.ts

@@ -7,18 +7,20 @@ import { ZenData } from "../src/model"
 
 const root = path.resolve(process.cwd(), "..", "..", "..")
 const models = await $`bun sst secret list`.cwd(root).text()
-const PARTS = 8
+const PARTS = 10
 
 // read the line starting with "ZEN_MODELS"
 const lines = models.split("\n")
 const oldValues = Array.from({ length: PARTS }, (_, i) => {
   const value = lines
-    .find((line) => line.startsWith(`ZEN_MODELS${i + 1}`))
+    .find((line) => line.startsWith(`ZEN_MODELS${i + 1}=`))
     ?.split("=")
     .slice(1)
     .join("=")
-  if (!value) throw new Error(`ZEN_MODELS${i + 1} not found`)
-  return value
+  // TODO
+  //if (!value) throw new Error(`ZEN_MODELS${i + 1} not found`)
+  //return value
+  return value ?? ""
 })
 
 // store the prettified json to a temp file
@@ -38,6 +40,6 @@ const newValues = Array.from({ length: PARTS }, (_, i) =>
   newValue.slice(chunk * i, i === PARTS - 1 ? undefined : chunk * (i + 1)),
 )
 
-for (let i = 0; i < PARTS; i++) {
-  await $`bun sst secret set ZEN_MODELS${i + 1} -- ${newValues[i]}`
-}
+const envFile = Bun.file(path.join(os.tmpdir(), `models-${Date.now()}.env`))
+await envFile.write(newValues.map((v, i) => `ZEN_MODELS${i + 1}=${v}`).join("\n"))
+await $`bun sst secret load ${envFile.name}`.cwd(root)

packages/console/core/src/model.ts

@@ -75,7 +75,9 @@ export namespace ZenData {
         Resource.ZEN_MODELS5.value +
         Resource.ZEN_MODELS6.value +
         Resource.ZEN_MODELS7.value +
-        Resource.ZEN_MODELS8.value,
+        Resource.ZEN_MODELS8.value +
+        Resource.ZEN_MODELS9.value +
+        Resource.ZEN_MODELS10.value,
     )
     return ModelsSchema.parse(json)
   })

packages/console/core/sst-env.d.ts

@@ -133,6 +133,10 @@ declare module "sst" {
       "type": "sst.sst.Secret"
       "value": string
     }
+    "ZEN_MODELS10": {
+      "type": "sst.sst.Secret"
+      "value": string
+    }
     "ZEN_MODELS2": {
       "type": "sst.sst.Secret"
       "value": string
@@ -161,6 +165,10 @@ declare module "sst" {
       "type": "sst.sst.Secret"
       "value": string
     }
+    "ZEN_MODELS9": {
+      "type": "sst.sst.Secret"
+      "value": string
+    }
     "ZEN_SESSION_SECRET": {
       "type": "sst.sst.Secret"
       "value": string

packages/console/function/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/console-function",
-  "version": "1.1.45",
+  "version": "1.1.47",
   "$schema": "https://json.schemastore.org/package.json",
   "private": true,
   "type": "module",

packages/console/function/sst-env.d.ts

@@ -133,6 +133,10 @@ declare module "sst" {
       "type": "sst.sst.Secret"
       "value": string
     }
+    "ZEN_MODELS10": {
+      "type": "sst.sst.Secret"
+      "value": string
+    }
     "ZEN_MODELS2": {
       "type": "sst.sst.Secret"
       "value": string
@@ -161,6 +165,10 @@ declare module "sst" {
       "type": "sst.sst.Secret"
       "value": string
     }
+    "ZEN_MODELS9": {
+      "type": "sst.sst.Secret"
+      "value": string
+    }
     "ZEN_SESSION_SECRET": {
       "type": "sst.sst.Secret"
       "value": string

packages/console/mail/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/console-mail",
-  "version": "1.1.45",
+  "version": "1.1.47",
   "dependencies": {
     "@jsx-email/all": "2.2.3",
     "@jsx-email/cli": "1.4.3",

packages/console/resource/sst-env.d.ts

@@ -133,6 +133,10 @@ declare module "sst" {
       "type": "sst.sst.Secret"
       "value": string
     }
+    "ZEN_MODELS10": {
+      "type": "sst.sst.Secret"
+      "value": string
+    }
     "ZEN_MODELS2": {
       "type": "sst.sst.Secret"
       "value": string
@@ -161,6 +165,10 @@ declare module "sst" {
       "type": "sst.sst.Secret"
       "value": string
     }
+    "ZEN_MODELS9": {
+      "type": "sst.sst.Secret"
+      "value": string
+    }
     "ZEN_SESSION_SECRET": {
       "type": "sst.sst.Secret"
       "value": string

packages/desktop/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@opencode-ai/desktop",
   "private": true,
-  "version": "1.1.45",
+  "version": "1.1.47",
   "type": "module",
   "license": "MIT",
   "scripts": {

packages/desktop/src-tauri/src/lib.rs

@@ -345,6 +345,7 @@ pub fn run() {
                 .decorations(false);
 
             let window = window_builder.build().expect("Failed to create window");
+            let _ = window.show();
 
             #[cfg(windows)]
             let _ = window.create_overlay_titlebar();

packages/enterprise/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/enterprise",
-  "version": "1.1.45",
+  "version": "1.1.47",
   "private": true,
   "type": "module",
   "license": "MIT",

packages/enterprise/sst-env.d.ts

@@ -133,6 +133,10 @@ declare module "sst" {
       "type": "sst.sst.Secret"
       "value": string
     }
+    "ZEN_MODELS10": {
+      "type": "sst.sst.Secret"
+      "value": string
+    }
     "ZEN_MODELS2": {
       "type": "sst.sst.Secret"
       "value": string
@@ -161,6 +165,10 @@ declare module "sst" {
       "type": "sst.sst.Secret"
       "value": string
     }
+    "ZEN_MODELS9": {
+      "type": "sst.sst.Secret"
+      "value": string
+    }
     "ZEN_SESSION_SECRET": {
       "type": "sst.sst.Secret"
       "value": string

packages/extensions/zed/extension.toml

@@ -1,7 +1,7 @@
 id = "opencode"
 name = "OpenCode"
 description = "The open source coding agent."
-version = "1.1.45"
+version = "1.1.47"
 schema_version = 1
 authors = ["Anomaly"]
 repository = "https://github.com/anomalyco/opencode"
@@ -11,26 +11,26 @@ name = "OpenCode"
 icon = "./icons/opencode.svg"
 
 [agent_servers.opencode.targets.darwin-aarch64]
-archive = "https://github.com/anomalyco/opencode/releases/download/v1.1.45/opencode-darwin-arm64.zip"
+archive = "https://github.com/anomalyco/opencode/releases/download/v1.1.47/opencode-darwin-arm64.zip"
 cmd = "./opencode"
 args = ["acp"]
 
 [agent_servers.opencode.targets.darwin-x86_64]
-archive = "https://github.com/anomalyco/opencode/releases/download/v1.1.45/opencode-darwin-x64.zip"
+archive = "https://github.com/anomalyco/opencode/releases/download/v1.1.47/opencode-darwin-x64.zip"
 cmd = "./opencode"
 args = ["acp"]
 
 [agent_servers.opencode.targets.linux-aarch64]
-archive = "https://github.com/anomalyco/opencode/releases/download/v1.1.45/opencode-linux-arm64.tar.gz"
+archive = "https://github.com/anomalyco/opencode/releases/download/v1.1.47/opencode-linux-arm64.tar.gz"
 cmd = "./opencode"
 args = ["acp"]
 
 [agent_servers.opencode.targets.linux-x86_64]
-archive = "https://github.com/anomalyco/opencode/releases/download/v1.1.45/opencode-linux-x64.tar.gz"
+archive = "https://github.com/anomalyco/opencode/releases/download/v1.1.47/opencode-linux-x64.tar.gz"
 cmd = "./opencode"
 args = ["acp"]
 
 [agent_servers.opencode.targets.windows-x86_64]
-archive = "https://github.com/anomalyco/opencode/releases/download/v1.1.45/opencode-windows-x64.zip"
+archive = "https://github.com/anomalyco/opencode/releases/download/v1.1.47/opencode-windows-x64.zip"
 cmd = "./opencode.exe"
 args = ["acp"]

packages/function/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/function",
-  "version": "1.1.45",
+  "version": "1.1.47",
   "$schema": "https://json.schemastore.org/package.json",
   "private": true,
   "type": "module",

packages/function/sst-env.d.ts

@@ -133,6 +133,10 @@ declare module "sst" {
       "type": "sst.sst.Secret"
       "value": string
     }
+    "ZEN_MODELS10": {
+      "type": "sst.sst.Secret"
+      "value": string
+    }
     "ZEN_MODELS2": {
       "type": "sst.sst.Secret"
       "value": string
@@ -161,6 +165,10 @@ declare module "sst" {
       "type": "sst.sst.Secret"
       "value": string
     }
+    "ZEN_MODELS9": {
+      "type": "sst.sst.Secret"
+      "value": string
+    }
     "ZEN_SESSION_SECRET": {
       "type": "sst.sst.Secret"
       "value": string

packages/opencode/package.json

@@ -1,6 +1,6 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
-  "version": "1.1.45",
+  "version": "1.1.47",
   "name": "opencode",
   "type": "module",
   "license": "MIT",

packages/opencode/script/publish.ts

@@ -230,8 +230,14 @@ if (!Script.preview) {
     "",
   ].join("\n")
 
+  const token = process.env.GITHUB_TOKEN
+  if (!token) {
+    console.error("GITHUB_TOKEN is required to update homebrew tap")
+    process.exit(1)
+  }
+  const tap = `https://x-access-token:${token}@github.com/anomalyco/homebrew-tap.git`
   await $`rm -rf ./dist/homebrew-tap`
-  await $`git clone https://${process.env["GITHUB_TOKEN"]}@github.com/sst/homebrew-tap.git ./dist/homebrew-tap`
+  await $`git clone ${tap} ./dist/homebrew-tap`
   await Bun.file("./dist/homebrew-tap/opencode.rb").write(homebrewFormula)
   await $`cd ./dist/homebrew-tap && git add opencode.rb`
   await $`cd ./dist/homebrew-tap && git commit -m "Update to v${Script.version}"`

packages/opencode/src/config/config.ts

@@ -1078,29 +1078,6 @@ export namespace Config {
         .optional(),
       experimental: z
         .object({
-          hook: z
-            .object({
-              file_edited: z
-                .record(
-                  z.string(),
-                  z
-                    .object({
-                      command: z.string().array(),
-                      environment: z.record(z.string(), z.string()).optional(),
-                    })
-                    .array(),
-                )
-                .optional(),
-              session_completed: z
-                .object({
-                  command: z.string().array(),
-                  environment: z.record(z.string(), z.string()).optional(),
-                })
-                .array()
-                .optional(),
-            })
-            .optional(),
-          chatMaxRetries: z.number().optional().describe("Number of retries for chat completions on failure"),
           disable_paste_summary: z.boolean().optional(),
           batch_tool: z.boolean().optional().describe("Enable the batch tool"),
           openTelemetry: z

packages/plugin/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@opencode-ai/plugin",
-  "version": "1.1.45",
+  "version": "1.1.47",
   "type": "module",
   "license": "MIT",
   "scripts": {

packages/sdk/js/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@opencode-ai/sdk",
-  "version": "1.1.45",
+  "version": "1.1.47",
   "type": "module",
   "license": "MIT",
   "scripts": {

packages/sdk/js/src/v2/gen/types.gen.ts

@@ -1779,26 +1779,6 @@ export type Config = {
     prune?: boolean
   }
   experimental?: {
-    hook?: {
-      file_edited?: {
-        [key: string]: Array<{
-          command: Array<string>
-          environment?: {
-            [key: string]: string
-          }
-        }>
-      }
-      session_completed?: Array<{
-        command: Array<string>
-        environment?: {
-          [key: string]: string
-        }
-      }>
-    }
-    /**
-     * Number of retries for chat completions on failure
-     */
-    chatMaxRetries?: number
     disable_paste_summary?: boolean
     /**
      * Enable the batch tool

packages/sdk/openapi.json

@@ -9834,69 +9834,6 @@
           "experimental": {
             "type": "object",
             "properties": {
-              "hook": {
-                "type": "object",
-                "properties": {
-                  "file_edited": {
-                    "type": "object",
-                    "propertyNames": {
-                      "type": "string"
-                    },
-                    "additionalProperties": {
-                      "type": "array",
-                      "items": {
-                        "type": "object",
-                        "properties": {
-                          "command": {
-                            "type": "array",
-                            "items": {
-                              "type": "string"
-                            }
-                          },
-                          "environment": {
-                            "type": "object",
-                            "propertyNames": {
-                              "type": "string"
-                            },
-                            "additionalProperties": {
-                              "type": "string"
-                            }
-                          }
-                        },
-                        "required": ["command"]
-                      }
-                    }
-                  },
-                  "session_completed": {
-                    "type": "array",
-                    "items": {
-                      "type": "object",
-                      "properties": {
-                        "command": {
-                          "type": "array",
-                          "items": {
-                            "type": "string"
-                          }
-                        },
-                        "environment": {
-                          "type": "object",
-                          "propertyNames": {
-                            "type": "string"
-                          },
-                          "additionalProperties": {
-                            "type": "string"
-                          }
-                        }
-                      },
-                      "required": ["command"]
-                    }
-                  }
-                }
-              },
-              "chatMaxRetries": {
-                "description": "Number of retries for chat completions on failure",
-                "type": "number"
-              },
               "disable_paste_summary": {
                 "type": "boolean"
               },

packages/slack/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/slack",
-  "version": "1.1.45",
+  "version": "1.1.47",
   "type": "module",
   "license": "MIT",
   "scripts": {

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/ui",
-  "version": "1.1.45",
+  "version": "1.1.47",
   "type": "module",
   "license": "MIT",
   "exports": {

packages/ui/src/components/accordion.css

@@ -36,7 +36,9 @@
         border-radius: var(--radius-md);
         overflow: clip;
         color: var(--text-strong);
-        transition: background-color 0.15s ease;
+        transition-property: background-color, border-color;
+        transition-duration: var(--transition-duration);
+        transition-timing-function: var(--transition-easing);
 
         /* text-12-regular */
         font-family: var(--font-family-sans);
@@ -58,41 +60,48 @@
       }
     }
 
-    &[data-expanded] {
-      [data-slot="accordion-trigger"] {
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
-      }
-
-      [data-slot="accordion-content"] {
-        border: 1px solid var(--border-weak-base);
-        border-top: none;
-        border-bottom-left-radius: var(--radius-md);
-        border-bottom-right-radius: var(--radius-md);
-      }
+    [data-slot="accordion-arrow"] {
+      flex-shrink: 0;
+      width: 16px;
+      height: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--text-weak);
     }
 
     [data-slot="accordion-content"] {
-      overflow: hidden;
+      display: grid;
+      grid-template-rows: 0fr;
+      transition-property: grid-template-rows, opacity;
+      transition-duration: var(--transition-duration);
+      transition-timing-function: var(--transition-easing);
       width: 100%;
+
+      > * {
+        overflow: hidden;
+      }
+    }
+
+    [data-slot="accordion-content"][data-expanded] {
+      grid-template-rows: 1fr;
+    }
+
+    [data-slot="accordion-content"][data-closed] {
+      grid-template-rows: 0fr;
+    }
+
+    &[data-expanded] [data-slot="accordion-trigger"] {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    &[data-expanded] [data-slot="accordion-content"] {
+      border: 1px solid var(--border-weak-base);
+      border-top: none;
+      border-bottom-left-radius: var(--radius-md);
+      border-bottom-right-radius: var(--radius-md);
+      height: auto;
     }
   }
 }
-
-@keyframes slideDown {
-  from {
-    height: 0;
-  }
-  to {
-    height: var(--kb-accordion-content-height);
-  }
-}
-
-@keyframes slideUp {
-  from {
-    height: var(--kb-accordion-content-height);
-  }
-  to {
-    height: 0;
-  }
-}

packages/ui/src/components/accordion.tsx

@@ -1,6 +1,7 @@
 import { Accordion as Kobalte } from "@kobalte/core/accordion"
-import { splitProps } from "solid-js"
+import { Accessor, createContext, splitProps, useContext } from "solid-js"
 import type { ComponentProps, ParentProps } from "solid-js"
+import { MorphChevron } from "./morph-chevron"
 
 export interface AccordionProps extends ComponentProps<typeof Kobalte> {}
 export interface AccordionItemProps extends ComponentProps<typeof Kobalte.Item> {}
@@ -8,6 +9,8 @@ export interface AccordionHeaderProps extends ComponentProps<typeof Kobalte.Head
 export interface AccordionTriggerProps extends ComponentProps<typeof Kobalte.Trigger> {}
 export interface AccordionContentProps extends ComponentProps<typeof Kobalte.Content> {}
 
+const AccordionItemContext = createContext<Accessor<boolean>>()
+
 function AccordionRoot(props: AccordionProps) {
   const [split, rest] = splitProps(props, ["class", "classList"])
   return (
@@ -22,17 +25,19 @@ function AccordionRoot(props: AccordionProps) {
   )
 }
 
-function AccordionItem(props: AccordionItemProps) {
-  const [split, rest] = splitProps(props, ["class", "classList"])
+function AccordionItem(props: AccordionItemProps & { expanded?: boolean }) {
+  const [split, rest] = splitProps(props, ["class", "classList", "expanded"])
   return (
-    <Kobalte.Item
-      {...rest}
-      data-slot="accordion-item"
-      classList={{
-        ...(split.classList ?? {}),
-        [split.class ?? ""]: !!split.class,
-      }}
-    />
+    <AccordionItemContext.Provider value={() => split.expanded ?? false}>
+      <Kobalte.Item
+        {...rest}
+        data-slot="accordion-item"
+        classList={{
+          ...(split.classList ?? {}),
+          [split.class ?? ""]: !!split.class,
+        }}
+      />
+    </AccordionItemContext.Provider>
   )
 }
 
@@ -84,9 +89,25 @@ function AccordionContent(props: ParentProps<AccordionContentProps>) {
   )
 }
 
+export interface AccordionArrowProps extends ComponentProps<"div"> {
+  expanded?: boolean
+}
+
+function AccordionArrow(props: AccordionArrowProps = {}) {
+  const [local, rest] = splitProps(props, ["expanded"])
+  const contextExpanded = useContext(AccordionItemContext)
+  const isExpanded = () => local.expanded ?? contextExpanded?.() ?? false
+  return (
+    <div data-slot="accordion-arrow" {...rest}>
+      <MorphChevron expanded={isExpanded()} />
+    </div>
+  )
+}
+
 export const Accordion = Object.assign(AccordionRoot, {
   Item: AccordionItem,
   Header: AccordionHeader,
   Trigger: AccordionTrigger,
   Content: AccordionContent,
+  Arrow: AccordionArrow,
 })

packages/ui/src/components/button.css

@@ -8,8 +8,13 @@
   text-decoration: none;
   user-select: none;
   cursor: default;
-  outline: none;
+  padding: 4px 8px;
   white-space: nowrap;
+  transition-property: background-color, border-color, color, box-shadow, opacity;
+  transition-duration: var(--transition-duration);
+  transition-timing-function: var(--transition-easing);
+  outline: none;
+  line-height: 20px;
 
   &[data-variant="primary"] {
     background-color: var(--button-primary-base);
@@ -94,7 +99,6 @@
     &:active:not(:disabled) {
       background-color: var(--button-secondary-base);
       scale: 0.99;
-      transition: all 150ms ease-out;
     }
     &:disabled {
       border-color: var(--border-disabled);
@@ -109,34 +113,27 @@
   }
 
   &[data-size="small"] {
-    height: 22px;
-    padding: 0 8px;
+    padding: 2px 8px;
     &[data-icon] {
-      padding: 0 12px 0 4px;
+      padding: 2px 12px 2px 4px;
     }
 
-    font-size: var(--font-size-small);
-    line-height: var(--line-height-large);
     gap: 4px;
 
     /* text-12-medium */
     font-family: var(--font-family-sans);
-    font-size: var(--font-size-small);
+    font-size: var(--font-size-base);
     font-style: normal;
     font-weight: var(--font-weight-medium);
-    line-height: var(--line-height-large); /* 166.667% */
     letter-spacing: var(--letter-spacing-normal);
   }
 
   &[data-size="normal"] {
-    height: 24px;
-    line-height: 24px;
-    padding: 0 6px;
+    padding: 4px 6px;
     &[data-icon] {
-      padding: 0 12px 0 4px;
+      padding: 4px 12px 4px 4px;
     }
 
-    font-size: var(--font-size-small);
     gap: 6px;
 
     /* text-12-medium */
@@ -148,11 +145,10 @@
   }
 
   &[data-size="large"] {
-    height: 32px;
     padding: 6px 12px;
 
     &[data-icon] {
-      padding: 0 12px 0 8px;
+      padding: 6px 12px 6px 8px;
     }
 
     gap: 4px;
@@ -162,7 +158,6 @@
     font-size: 14px;
     font-style: normal;
     font-weight: var(--font-weight-medium);
-    line-height: var(--line-height-large); /* 142.857% */
     letter-spacing: var(--letter-spacing-normal);
   }
 

packages/ui/src/components/button.tsx

@@ -4,7 +4,7 @@ import { Icon, IconProps } from "./icon"
 
 export interface ButtonProps
   extends ComponentProps<typeof Kobalte>,
-    Pick<ComponentProps<"button">, "class" | "classList" | "children"> {
+    Pick<ComponentProps<"button">, "class" | "classList" | "children" | "style"> {
   size?: "small" | "normal" | "large"
   variant?: "primary" | "secondary" | "ghost"
   icon?: IconProps["name"]

packages/ui/src/components/card.css

@@ -4,7 +4,9 @@
   flex-direction: column;
   background-color: var(--surface-inset-base);
   border: 1px solid var(--border-weaker-base);
-  transition: background-color 0.15s ease;
+  transition-property: background-color, border-color;
+  transition-duration: var(--transition-duration);
+  transition-timing-function: var(--transition-easing);
   border-radius: var(--radius-md);
   padding: 6px 12px;
   overflow: clip;

packages/ui/src/components/checkbox.css

@@ -4,6 +4,18 @@
   gap: 12px;
   cursor: default;
 
+  [data-slot="checkbox-checkbox-control"] {
+    transition-property: border-color, background-color, box-shadow;
+    transition-duration: var(--transition-duration);
+    transition-timing-function: var(--transition-easing);
+  }
+
+  [data-slot="checkbox-checkbox-indicator"] {
+    transition-property: opacity;
+    transition-duration: var(--transition-duration);
+    transition-timing-function: var(--transition-easing);
+  }
+
   [data-slot="checkbox-checkbox-input"] {
     position: absolute;
     width: 1px;

packages/ui/src/components/collapsible.css

@@ -4,7 +4,9 @@
   flex-direction: column;
   background-color: var(--surface-inset-base);
   border: 1px solid var(--border-weaker-base);
-  transition: background-color 0.15s ease;
+  transition-property: background-color, border-color;
+  transition-duration: var(--transition-duration);
+  transition-timing-function: var(--transition-easing);
   border-radius: var(--radius-md);
   overflow: clip;
 
@@ -44,16 +46,28 @@
       display: flex;
       align-items: center;
       justify-content: center;
+      color: var(--text-weak);
     }
   }
 
   [data-slot="collapsible-content"] {
-    overflow: hidden;
-    /* animation: slideUp 250ms ease-out; */
+    display: grid;
+    grid-template-rows: 0fr;
+    transition-property: grid-template-rows, opacity;
+    transition-duration: var(--transition-duration);
+    transition-timing-function: var(--transition-easing);
 
-    /* &[data-expanded] { */
-    /*   animation: slideDown 250ms ease-out; */
-    /* } */
+    > * {
+      overflow: hidden;
+    }
+
+    &[data-expanded] {
+      grid-template-rows: 1fr;
+    }
+
+    &[data-closed] {
+      grid-template-rows: 0fr;
+    }
   }
 
   &[data-variant="ghost"] {
@@ -83,21 +97,3 @@
     }
   }
 }
-
-@keyframes slideDown {
-  from {
-    height: 0;
-  }
-  to {
-    height: var(--kb-collapsible-content-height);
-  }
-}
-
-@keyframes slideUp {
-  from {
-    height: var(--kb-collapsible-content-height);
-  }
-  to {
-    height: 0;
-  }
-}

packages/ui/src/components/collapsible.tsx

@@ -1,6 +1,8 @@
 import { Collapsible as Kobalte, CollapsibleRootProps } from "@kobalte/core/collapsible"
-import { ComponentProps, ParentProps, splitProps } from "solid-js"
-import { Icon } from "./icon"
+import { Accessor, ComponentProps, createContext, createSignal, ParentProps, splitProps, useContext } from "solid-js"
+import { MorphChevron } from "./morph-chevron"
+
+const CollapsibleContext = createContext<Accessor<boolean>>()
 
 export interface CollapsibleProps extends ParentProps<CollapsibleRootProps> {
   class?: string
@@ -9,17 +11,30 @@ export interface CollapsibleProps extends ParentProps<CollapsibleRootProps> {
 }
 
 function CollapsibleRoot(props: CollapsibleProps) {
-  const [local, others] = splitProps(props, ["class", "classList", "variant"])
+  const [local, others] = splitProps(props, ["class", "classList", "variant", "open", "onOpenChange", "children"])
+  const [internalOpen, setInternalOpen] = createSignal(local.open ?? false)
+
+  const handleOpenChange = (open: boolean) => {
+    setInternalOpen(open)
+    local.onOpenChange?.(open)
+  }
+
   return (
-    <Kobalte
-      data-component="collapsible"
-      data-variant={local.variant || "normal"}
-      classList={{
-        ...(local.classList ?? {}),
-        [local.class ?? ""]: !!local.class,
-      }}
-      {...others}
-    />
+    <CollapsibleContext.Provider value={internalOpen}>
+      <Kobalte
+        data-component="collapsible"
+        data-variant={local.variant || "normal"}
+        open={local.open}
+        onOpenChange={handleOpenChange}
+        classList={{
+          ...(local.classList ?? {}),
+          [local.class ?? ""]: !!local.class,
+        }}
+        {...others}
+      >
+        {local.children}
+      </Kobalte>
+    </CollapsibleContext.Provider>
   )
 }
 
@@ -32,9 +47,10 @@ function CollapsibleContent(props: ComponentProps<typeof Kobalte.Content>) {
 }
 
 function CollapsibleArrow(props?: ComponentProps<"div">) {
+  const isOpen = useContext(CollapsibleContext)
   return (
     <div data-slot="collapsible-arrow" {...(props || {})}>
-      <Icon name="chevron-grabber-vertical" size="small" />
+      <MorphChevron expanded={isOpen?.() ?? false} />
     </div>
   )
 }

packages/ui/src/components/cycle-label.css

@@ -0,0 +1,51 @@
+.cycle-label {
+  --c-dur: 200ms;
+  --c-stag: 30ms;
+  --c-ease: cubic-bezier(0.25, 0, 0.5, 1);
+  --c-opacity-start: 0;
+  --c-opacity-end: 1;
+  --c-blur-start: 0px;
+  --c-blur-end: 0px;
+  --c-skew: 10deg;
+
+  display: inline-flex;
+  position: relative;
+
+  transform-style: preserve-3d;
+  perspective: 500px;
+  transition: width 200ms var(--c-ease);
+  will-change: width;
+  overflow: hidden;
+
+  .cycle-char {
+    display: inline-block;
+    transform-style: preserve-3d;
+    min-width: 0.25em;
+    backface-visibility: hidden;
+
+    transition:
+      transform var(--c-dur) var(--c-ease),
+      opacity var(--c-dur) var(--c-ease),
+      filter var(--c-dur) var(--c-ease);
+    transition-delay: calc(var(--i, 0) * var(--c-stag));
+
+    &.enter {
+      opacity: var(--c-opacity-end);
+      filter: blur(var(--c-blur-end));
+      transform: translateY(0) rotateX(0) skewX(0);
+    }
+
+    &.exit {
+      opacity: var(--c-opacity-start);
+      filter: blur(var(--c-blur-start));
+      transform: translateY(50%) rotateX(90deg) skewX(var(--c-skew));
+    }
+
+    &.pre {
+      opacity: var(--c-opacity-start);
+      filter: blur(var(--c-blur-start));
+      transition: none;
+      transform: translateY(-50%) rotateX(-90deg) skewX(calc(var(--c-skew) * -1));
+    }
+  }
+}

packages/ui/src/components/cycle-label.tsx

@@ -0,0 +1,132 @@
+import "./cycle-label.css"
+import { createEffect, createSignal, JSX, on } from "solid-js"
+
+export interface CycleLabelProps extends JSX.HTMLAttributes<HTMLSpanElement> {
+  value: string
+  onValueChange?: (value: string) => void
+  duration?: number | ((value: string) => number)
+  stagger?: number
+  opacity?: [number, number]
+  blur?: [number, number]
+  skewX?: number
+  onAnimationStart?: () => void
+  onAnimationEnd?: () => void
+}
+
+const segmenter =
+  typeof Intl !== "undefined" && Intl.Segmenter ? new Intl.Segmenter("en", { granularity: "grapheme" }) : null
+
+const getChars = (text: string): string[] =>
+  segmenter ? Array.from(segmenter.segment(text), (s) => s.segment) : text.split("")
+
+const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
+
+export function CycleLabel(props: CycleLabelProps) {
+  const getDuration = (text: string) => {
+    const d = props?.duration ?? 200
+    return typeof d === "function" ? d(text) : d
+  }
+  const stagger = () => props?.stagger ?? 20
+  const opacity = () => props?.opacity ?? [0, 1]
+  const blur = () => props?.blur ?? [0, 0]
+  const skewX = () => props?.skewX ?? 10
+
+  let containerRef: HTMLSpanElement | undefined
+  let isAnimating = false
+  const [currentText, setCurrentText] = createSignal(props.value)
+
+  const setChars = (el: HTMLElement, text: string, state: "enter" | "exit" | "pre" = "enter") => {
+    el.innerHTML = ""
+    const chars = getChars(text)
+    chars.forEach((char, i) => {
+      const span = document.createElement("span")
+      span.textContent = char === " " ? "\u00A0" : char
+      span.className = `cycle-char ${state}`
+      span.style.setProperty("--i", String(i))
+      el.appendChild(span)
+    })
+  }
+
+  const animateToText = async (newText: string) => {
+    if (!containerRef || isAnimating) return
+    if (newText === currentText()) return
+
+    isAnimating = true
+    props.onAnimationStart?.()
+
+    const dur = getDuration(newText)
+    const stag = stagger()
+
+    containerRef.style.width = containerRef.offsetWidth + "px"
+
+    const oldChars = containerRef.querySelectorAll(".cycle-char")
+    oldChars.forEach((c) => c.classList.replace("enter", "exit"))
+
+    const clone = containerRef.cloneNode(false) as HTMLElement
+    Object.assign(clone.style, {
+      position: "absolute",
+      visibility: "hidden",
+      width: "auto",
+      transition: "none",
+    })
+    setChars(clone, newText)
+    document.body.appendChild(clone)
+    const nextWidth = clone.offsetWidth
+    clone.remove()
+
+    const exitTime = oldChars.length * stag + dur
+    await wait(exitTime * 0.3)
+
+    containerRef.style.width = nextWidth + "px"
+
+    const widthDur = 200
+    await wait(widthDur * 0.3)
+
+    setChars(containerRef, newText, "pre")
+    containerRef.offsetWidth
+
+    Array.from(containerRef.children).forEach((c) => (c.className = "cycle-char enter"))
+    setCurrentText(newText)
+    props.onValueChange?.(newText)
+
+    const enterTime = getChars(newText).length * stag + dur
+    await wait(enterTime)
+
+    containerRef.style.width = ""
+    isAnimating = false
+    props.onAnimationEnd?.()
+  }
+
+  createEffect(
+    on(
+      () => props.value,
+      (newValue) => {
+        if (newValue !== currentText()) {
+          animateToText(newValue)
+        }
+      },
+    ),
+  )
+
+  const initRef = (el: HTMLSpanElement) => {
+    containerRef = el
+    setChars(el, props.value)
+  }
+
+  return (
+    <span
+      ref={initRef}
+      class={`cycle-label ${props.class ?? ""}`}
+      style={{
+        "--c-dur": `${getDuration(currentText())}ms`,
+        "--c-stag": `${stagger()}ms`,
+        "--c-opacity-start": opacity()[0],
+        "--c-opacity-end": opacity()[1],
+        "--c-blur-start": `${blur()[0]}px`,
+        "--c-blur-end": `${blur()[1]}px`,
+        "--c-skew": `${skewX()}deg`,
+        ...(typeof props.style === "object" ? props.style : {}),
+      }}
+    />
+  )
+}

packages/ui/src/components/dialog.css

@@ -5,6 +5,16 @@
   inset: 0;
   z-index: 50;
   background-color: hsl(from var(--background-base) h s l / 0.2);
+
+  animation: overlayHide var(--transition-duration) var(--transition-easing) forwards;
+
+  &[data-expanded] {
+    animation: overlayShow var(--transition-duration) var(--transition-easing) forwards;
+  }
+
+  @starting-style {
+    animation: none;
+  }
 }
 
 [data-component="dialog"] {
@@ -25,7 +35,6 @@
     flex-direction: column;
     align-items: center;
     justify-items: start;
-    overflow: visible;
 
     [data-slot="dialog-content"] {
       display: flex;
@@ -35,16 +44,8 @@
       width: 100%;
       max-height: 100%;
       min-height: 280px;
-      overflow: auto;
       pointer-events: auto;
 
-      /* Hide scrollbar */
-      scrollbar-width: none;
-      -ms-overflow-style: none;
-      &::-webkit-scrollbar {
-        display: none;
-      }
-
       /* padding: 8px; */
       /* padding: 8px 8px 0 8px; */
       border-radius: var(--radius-xl);
@@ -52,6 +53,16 @@
       background-clip: padding-box;
       box-shadow: var(--shadow-lg-border-base);
 
+      animation: contentHide var(--transition-duration) var(--transition-easing) forwards;
+
+      &[data-expanded] {
+        animation: contentShow var(--transition-duration) var(--transition-easing) forwards;
+      }
+
+      @starting-style {
+        animation: none;
+      }
+
       [data-slot="dialog-header"] {
         display: flex;
         padding: 20px;
@@ -162,7 +173,7 @@
 @keyframes contentShow {
   from {
     opacity: 0;
-    transform: scale(0.98);
+    transform: translateY(2.5%) scale(0.975);
   }
   to {
     opacity: 1;
@@ -176,6 +187,6 @@
   }
   to {
     opacity: 0;
-    transform: scale(0.98);
+    transform: translateY(-2.5%) scale(0.975);
   }
 }

packages/ui/src/components/dropdown-menu.css

@@ -2,26 +2,29 @@
 [data-component="dropdown-menu-sub-content"] {
   min-width: 8rem;
   overflow: hidden;
+  border: none;
   border-radius: var(--radius-md);
-  border: 1px solid color-mix(in oklch, var(--border-base) 50%, transparent);
+  box-shadow: var(--shadow-xs-border);
   background-clip: padding-box;
   background-color: var(--surface-raised-stronger-non-alpha);
   padding: 4px;
-  box-shadow: var(--shadow-md);
-  z-index: 50;
+  z-index: 100;
   transform-origin: var(--kb-menu-content-transform-origin);
 
-  &:focus,
-  &:focus-visible {
+  &:focus-within,
+  &:focus {
     outline: none;
   }
 
-  &[data-closed] {
-    animation: dropdown-menu-close 0.15s ease-out;
+  animation: dropdownMenuContentHide var(--transition-duration) var(--transition-easing) forwards;
+
+  @starting-style {
+    animation: none;
   }
 
   &[data-expanded] {
-    animation: dropdown-menu-open 0.15s ease-out;
+    pointer-events: auto;
+    animation: dropdownMenuContentShow var(--transition-duration) var(--transition-easing) forwards;
   }
 }
 
@@ -38,18 +41,22 @@
     padding: 4px 8px;
     border-radius: var(--radius-sm);
     cursor: default;
-    user-select: none;
     outline: none;
 
     font-family: var(--font-family-sans);
-    font-size: var(--font-size-small);
+    font-size: var(--font-size-base);
     font-weight: var(--font-weight-medium);
     line-height: var(--line-height-large);
     letter-spacing: var(--letter-spacing-normal);
     color: var(--text-strong);
 
-    &[data-highlighted] {
-      background: var(--surface-raised-base-hover);
+    transition-property: background-color, color;
+    transition-duration: var(--transition-duration);
+    transition-timing-function: var(--transition-easing);
+    user-select: none;
+
+    &:hover {
+      background-color: var(--surface-raised-base-hover);
     }
 
     &[data-disabled] {
@@ -61,6 +68,8 @@
   [data-slot="dropdown-menu-sub-trigger"] {
     &[data-expanded] {
       background: var(--surface-raised-base-hover);
+      outline: none;
+      border: none;
     }
   }
 
@@ -102,24 +111,24 @@
   }
 }
 
-@keyframes dropdown-menu-open {
+@keyframes dropdownMenuContentShow {
   from {
     opacity: 0;
-    transform: scale(0.96);
+    transform: scaleY(0.95);
   }
   to {
     opacity: 1;
-    transform: scale(1);
+    transform: scaleY(1);
   }
 }
 
-@keyframes dropdown-menu-close {
+@keyframes dropdownMenuContentHide {
   from {
     opacity: 1;
-    transform: scale(1);
+    transform: scaleY(1);
   }
   to {
     opacity: 0;
-    transform: scale(0.96);
+    transform: scaleY(0.95);
   }
 }

packages/ui/src/components/hover-card.css

@@ -24,11 +24,11 @@
   }
 
   &[data-closed] {
-    animation: hover-card-close 0.15s ease-out;
+    animation: hover-card-close var(--transition-duration) var(--transition-easing);
   }
 
   &[data-expanded] {
-    animation: hover-card-open 0.15s ease-out;
+    animation: hover-card-open var(--transition-duration) var(--transition-easing);
   }
 
   [data-slot="hover-card-body"] {

packages/ui/src/components/icon-button.css

@@ -7,6 +7,9 @@
   user-select: none;
   aspect-ratio: 1;
   flex-shrink: 0;
+  transition-property: background-color, color, opacity, box-shadow;
+  transition-duration: var(--transition-duration);
+  transition-timing-function: var(--transition-easing);
 
   &[data-variant="primary"] {
     background-color: var(--icon-strong-base);
@@ -99,7 +102,7 @@
       /*   color: var(--icon-active); */
       /* } */
     }
-    &:selected:not(:disabled) {
+    &[data-selected]:not(:disabled) {
       background-color: var(--surface-raised-base-active);
       /* [data-slot="icon-svg"] { */
       /*   color: var(--icon-selected); */

packages/ui/src/components/icon.css

@@ -4,7 +4,7 @@
   justify-content: center;
   flex-shrink: 0;
   /* resize: both; */
-  aspect-ratio: 1/1;
+  aspect-ratio: 1 / 1;
   color: var(--icon-base);
 
   &[data-size="small"] {

packages/ui/src/components/icon.tsx

@@ -80,13 +80,16 @@ const icons = {
 
 export interface IconProps extends ComponentProps<"svg"> {
   name: keyof typeof icons
-  size?: "small" | "normal" | "medium" | "large"
+  size?: "small" | "normal" | "medium" | "large" | number
 }
 
 export function Icon(props: IconProps) {
   const [local, others] = splitProps(props, ["name", "size", "class", "classList"])
   return (
-    <div data-component="icon" data-size={local.size || "normal"}>
+    <div
+      data-component="icon"
+      data-size={typeof local.size !== "number" ? local.size || "normal" : `size-[${local.size}px]`}
+    >
       <svg
         data-slot="icon-svg"
         classList={{

packages/ui/src/components/list.css

@@ -19,7 +19,7 @@
 [data-component="list"] {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 8px;
   overflow: hidden;
   padding: 0 12px;
 
@@ -37,7 +37,9 @@
       flex-shrink: 0;
       background-color: transparent;
       opacity: 0.5;
-      transition: opacity 0.15s ease;
+      transition-property: opacity;
+      transition-duration: var(--transition-duration);
+      transition-timing-function: var(--transition-easing);
 
       &:hover:not(:disabled),
       &:focus-visible:not(:disabled),
@@ -88,7 +90,9 @@
       height: 20px;
       background-color: transparent;
       opacity: 0.5;
-      transition: opacity 0.15s ease;
+      transition-property: opacity;
+      transition-duration: var(--transition-duration);
+      transition-timing-function: var(--transition-easing);
 
       &:hover:not(:disabled),
       &:focus-visible:not(:disabled),
@@ -131,15 +135,6 @@
     gap: 12px;
     overflow-y: auto;
     overscroll-behavior: contain;
-    mask: linear-gradient(to bottom, #ffff calc(100% - var(--bottom-fade)), #0000);
-    animation: scroll;
-    animation-timeline: --scroll;
-    scroll-timeline: --scroll y;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-    &::-webkit-scrollbar {
-      display: none;
-    }
 
     [data-slot="list-empty-state"] {
       display: flex;
@@ -215,7 +210,9 @@
           background: linear-gradient(to bottom, var(--surface-raised-stronger-non-alpha), transparent);
           pointer-events: none;
           opacity: 0;
-          transition: opacity 0.15s ease;
+          transition-property: opacity;
+          transition-duration: var(--transition-duration);
+          transition-timing-function: var(--transition-easing);
         }
 
         &[data-stuck="true"]::after {
@@ -251,17 +248,22 @@
             align-items: center;
             justify-content: center;
             flex-shrink: 0;
-            aspect-ratio: 1/1;
+            aspect-ratio: 1 / 1;
             [data-component="icon"] {
               color: var(--icon-strong-base);
             }
           }
+
+          [name="check"] {
+            color: var(--icon-strong-base);
+          }
+
           [data-slot="list-item-active-icon"] {
             display: none;
             align-items: center;
             justify-content: center;
             flex-shrink: 0;
-            aspect-ratio: 1/1;
+            aspect-ratio: 1 / 1;
             [data-component="icon"] {
               color: var(--icon-strong-base);
             }

packages/ui/src/components/list.tsx

@@ -5,6 +5,7 @@ import { useI18n } from "../context/i18n"
 import { Icon, type IconProps } from "./icon"
 import { IconButton } from "./icon-button"
 import { TextField } from "./text-field"
+import { ScrollFade } from "./scroll-fade"
 
 function findByKey(container: HTMLElement, key: string) {
   const nodes = container.querySelectorAll<HTMLElement>('[data-slot="list-item"][data-key]')
@@ -267,7 +268,7 @@ export function List<T>(props: ListProps<T> & { ref?: (ref: ListRef) => void })
           {searchAction()}
         </div>
       </Show>
-      <div ref={setScrollRef} data-slot="list-scroll">
+      <ScrollFade ref={setScrollRef} direction="vertical" fadeStartSize={0} fadeEndSize={20} data-slot="list-scroll">
         <Show
           when={flat().length > 0 || showAdd()}
           fallback={
@@ -339,7 +340,7 @@ export function List<T>(props: ListProps<T> & { ref?: (ref: ListRef) => void })
             </div>
           </Show>
         </Show>
-      </div>
+      </ScrollFade>
     </div>
   )
 }

packages/ui/src/components/logo.css

@@ -1,4 +1,4 @@
 [data-component="logo-mark"] {
   width: 16px;
-  aspect-ratio: 4/5;
+  aspect-ratio: 4 / 5;
 }

packages/ui/src/components/message-part.tsx

@@ -49,6 +49,7 @@ import { Tooltip } from "./tooltip"
 import { IconButton } from "./icon-button"
 import { createAutoScroll } from "../hooks"
 import { createResizeObserver } from "@solid-primitives/resize-observer"
+import { MorphChevron } from "./morph-chevron"
 
 interface Diagnostic {
   range: {
@@ -415,7 +416,7 @@ export function UserMessageDisplay(props: { message: UserMessage; parts: PartTyp
               toggleExpanded()
             }}
           >
-            <Icon name="chevron-down" size="small" />
+            <MorphChevron expanded={expanded()} />
           </button>
           <div data-slot="user-message-copy-wrapper">
             <Tooltip

packages/ui/src/components/morph-chevron.css

@@ -0,0 +1,10 @@
+[data-slot="morph-chevron-svg"] {
+  width: 16px;
+  height: 16px;
+  display: block;
+  fill: none;
+  stroke-width: 1.5;
+  stroke: currentcolor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}

packages/ui/src/components/morph-chevron.tsx

@@ -0,0 +1,73 @@
+import { createEffect, createUniqueId, on } from "solid-js"
+
+export interface MorphChevronProps {
+  expanded: boolean
+  class?: string
+}
+
+const COLLAPSED = "M4 6L8 10L12 6"
+const EXPANDED = "M4 10L8 6L12 10"
+
+export function MorphChevron(props: MorphChevronProps) {
+  const id = createUniqueId()
+  let path: SVGPathElement | undefined
+  let expandAnim: SVGAnimateElement | undefined
+  let collapseAnim: SVGAnimateElement | undefined
+
+  createEffect(
+    on(
+      () => props.expanded,
+      (expanded, prev) => {
+        if (prev === undefined) {
+          // Set initial state without animation
+          path?.setAttribute("d", expanded ? EXPANDED : COLLAPSED)
+          return
+        }
+        if (expanded) {
+          expandAnim?.beginElement()
+        } else {
+          collapseAnim?.beginElement()
+        }
+      },
+    ),
+  )
+
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      data-slot="morph-chevron-svg"
+      class={props.class}
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+    >
+      <path ref={path} d={COLLAPSED} id={`morph-chevron-path-${id}`}>
+        <animate
+          ref={(el) => {
+            expandAnim = el
+          }}
+          id={`morph-expand-${id}`}
+          attributeName="d"
+          dur="200ms"
+          fill="freeze"
+          calcMode="spline"
+          keySplines="0.25 0 0.5 1"
+          values="M4 6L8 10L12 6;M4 10L8 6L12 10"
+          begin="indefinite"
+        />
+        <animate
+          ref={(el) => {
+            collapseAnim = el
+          }}
+          id={`morph-collapse-${id}`}
+          attributeName="d"
+          dur="200ms"
+          fill="freeze"
+          calcMode="spline"
+          keySplines="0.25 0 0.5 1"
+          values="M4 10L8 6L12 10;M4 6L8 10L12 6"
+          begin="indefinite"
+        />
+      </path>
+    </svg>
+  )
+}

packages/ui/src/components/popover.css

@@ -15,16 +15,35 @@
 
   transform-origin: var(--kb-popover-content-transform-origin);
 
-  &:focus-within {
-    outline: none;
-  }
+  animation: popoverContentHide var(--transition-duration) var(--transition-easing) forwards;
 
-  &[data-closed] {
-    animation: popover-close 0.15s ease-out;
+  @starting-style {
+    animation: none;
   }
 
   &[data-expanded] {
-    animation: popover-open 0.15s ease-out;
+    pointer-events: auto;
+    animation: popoverContentShow var(--transition-duration) var(--transition-easing) forwards;
+  }
+
+  [data-origin-top-right] {
+    transform-origin: top right;
+  }
+
+  [data-origin-top-left] {
+    transform-origin: top left;
+  }
+
+  [data-origin-bottom-right] {
+    transform-origin: bottom right;
+  }
+
+  [data-origin-bottom-left] {
+    transform-origin: bottom left;
+  }
+
+  &:focus-within {
+    outline: none;
   }
 
   [data-slot="popover-header"] {
@@ -75,24 +94,39 @@
   }
 }
 
-@keyframes popover-open {
+@keyframes popoverContentShow {
   from {
     opacity: 0;
-    transform: scale(0.96);
+    transform: scaleY(0.95);
   }
   to {
     opacity: 1;
-    transform: scale(1);
+    transform: scaleY(1);
   }
 }
 
-@keyframes popover-close {
+@keyframes popoverContentHide {
   from {
     opacity: 1;
-    transform: scale(1);
+    transform: scaleY(1);
   }
   to {
     opacity: 0;
-    transform: scale(0.96);
+    transform: scaleY(0.95);
+  }
+}
+
+[data-component="model-popover-content"] {
+  transform-origin: var(--kb-popper-content-transform-origin);
+  pointer-events: none;
+  animation: popoverContentHide var(--transition-duration) var(--transition-easing) forwards;
+
+  @starting-style {
+    animation: none;
+  }
+
+  &[data-expanded] {
+    pointer-events: auto;
+    animation: popoverContentShow var(--transition-duration) var(--transition-easing) forwards;
   }
 }

packages/ui/src/components/progress-circle.css

@@ -1,12 +1,10 @@
 [data-component="progress-circle"] {
-  transform: rotate(-90deg);
+  color: inherit;
 
   [data-slot="progress-circle-background"] {
-    stroke: var(--border-weak-base);
-  }
-
-  [data-slot="progress-circle-progress"] {
-    stroke: var(--border-active);
+    transform-origin: 50% 50%;
+    transform: rotate(270deg);
+    stroke-opacity: 0.5;
     transition: stroke-dashoffset 0.35s cubic-bezier(0.65, 0, 0.35, 1);
   }
 }

packages/ui/src/components/progress-circle.tsx

@@ -1,4 +1,4 @@
-import { type ComponentProps, createMemo, splitProps } from "solid-js"
+import { type ComponentProps, splitProps } from "solid-js"
 
 export interface ProgressCircleProps extends Pick<ComponentProps<"svg">, "class" | "classList"> {
   percentage: number
@@ -9,26 +9,15 @@ export interface ProgressCircleProps extends Pick<ComponentProps<"svg">, "class"
 export function ProgressCircle(props: ProgressCircleProps) {
   const [split, rest] = splitProps(props, ["percentage", "size", "strokeWidth", "class", "classList"])
 
-  const size = () => split.size || 16
-  const strokeWidth = () => split.strokeWidth || 3
-
-  const viewBoxSize = 16
-  const center = viewBoxSize / 2
-  const radius = () => center - strokeWidth() / 2
-  const circumference = createMemo(() => 2 * Math.PI * radius())
-
-  const offset = createMemo(() => {
-    const clampedPercentage = Math.max(0, Math.min(100, split.percentage || 0))
-    const progress = clampedPercentage / 100
-    return circumference() * (1 - progress)
-  })
+  const size = () => split.size || 18
+  const r = 7
 
   return (
     <svg
       {...rest}
       width={size()}
       height={size()}
-      viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}
+      viewBox="0 0 18 18"
       fill="none"
       data-component="progress-circle"
       classList={{
@@ -36,21 +25,18 @@ export function ProgressCircle(props: ProgressCircleProps) {
         [split.class ?? ""]: !!split.class,
       }}
     >
-      <circle
-        cx={center}
-        cy={center}
-        r={radius()}
-        data-slot="progress-circle-background"
-        stroke-width={strokeWidth()}
-      />
-      <circle
-        cx={center}
-        cy={center}
-        r={radius()}
-        data-slot="progress-circle-progress"
-        stroke-width={strokeWidth()}
-        stroke-dasharray={circumference().toString()}
-        stroke-dashoffset={offset()}
+      <circle cx="9" cy="9" r="7.75" stroke="currentColor" stroke-width="1.5" />
+      <path
+        opacity="0.5"
+        d={(() => {
+          const pct = Math.min(100, Math.max(0, split.percentage))
+          const angle = (pct / 100) * 2 * Math.PI - Math.PI / 2
+          const x = 9 + r * Math.cos(angle)
+          const y = 9 + r * Math.sin(angle)
+          const largeArc = pct > 50 ? 1 : 0
+          return `M9 2A${r} ${r} 0 ${largeArc} 1 ${x} ${y}L9 9Z`
+        })()}
+        fill="currentColor"
       />
     </svg>
   )

packages/ui/src/components/radio-group.css

@@ -27,12 +27,9 @@
     content: "";
     opacity: var(--indicator-opacity, 1);
     position: absolute;
-    transition:
-      opacity 300ms ease-in-out,
-      box-shadow 100ms ease-in-out,
-      width 150ms ease,
-      height 150ms ease,
-      transform 150ms ease;
+    transition-property: opacity, box-shadow, width, height, transform;
+    transition-duration: var(--transition-duration);
+    transition-timing-function: var(--transition-easing);
   }
 
   [data-slot="radio-group-item"] {
@@ -46,7 +43,9 @@
     content: "";
     inset: 6px 0;
     position: absolute;
-    transition: opacity 150ms ease;
+    transition-property: opacity;
+    transition-duration: var(--transition-duration);
+    transition-timing-function: var(--transition-easing);
     width: 1px;
     transform: translateX(-0.5px);
   }
@@ -72,9 +71,9 @@
     padding: 6px 12px;
     place-content: center;
     position: relative;
-    transition-duration: 150ms;
     transition-property: color, opacity;
-    transition-timing-function: ease-in-out;
+    transition-duration: var(--transition-duration);
+    transition-timing-function: var(--transition-easing);
     user-select: none;
   }
 

packages/ui/src/components/reasoning-icon.css

@@ -0,0 +1,8 @@
+[data-component="reasoning-icon"] {
+  color: var(--icon-strong-base);
+
+  [data-slot="reasoning-icon-percentage"] {
+    transition: clip-path 200ms cubic-bezier(0.25, 0, 0.5, 1);
+    clip-path: inset(calc(100% - var(--reasoning-icon-percentage) * 100%) 0 0 0);
+  }
+}

packages/ui/src/components/reasoning-icon.tsx

@@ -0,0 +1,46 @@
+import { type ComponentProps, splitProps } from "solid-js"
+
+export interface ReasoningIconProps extends Pick<ComponentProps<"svg">, "class" | "classList"> {
+  percentage: number
+  size?: number
+  strokeWidth?: number
+}
+
+export function ReasoningIcon(props: ReasoningIconProps) {
+  const [split, rest] = splitProps(props, ["percentage", "size", "strokeWidth", "class", "classList"])
+
+  const size = () => split.size || 16
+  const strokeWidth = () => split.strokeWidth || 1.25
+
+  return (
+    <svg
+      {...rest}
+      width={size()}
+      height={size()}
+      viewBox={`0 0 16 16`}
+      fill="none"
+      data-component="reasoning-icon"
+      classList={{
+        ...(split.classList ?? {}),
+        [split.class ?? ""]: !!split.class,
+      }}
+    >
+      <path
+        d="M5.83196 10.3225V11.1666C5.83196 11.7189 6.27967 12.1666 6.83196 12.1666H9.16687C9.71915 12.1666 10.1669 11.7189 10.1669 11.1666V10.3225M5.83196 10.3225C5.55695 10.1843 5.29695 10.0206 5.05505 9.83459C3.90601 8.95086 3.16549 7.56219 3.16549 6.00055C3.16549 3.33085 5.32971 1.16663 7.99941 1.16663C10.6691 1.16663 12.8333 3.33085 12.8333 6.00055C12.8333 7.56219 12.0928 8.95086 10.9438 9.83459C10.7019 10.0206 10.4419 10.1843 10.1669 10.3225M5.83196 10.3225H10.1669M6.5 14.1666H9.5"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <circle
+        cx="8"
+        cy="5.83325"
+        r="2.86364"
+        fill="currentColor"
+        stroke="currentColor"
+        stroke-width={strokeWidth()}
+        style={{ "--reasoning-icon-percentage": split.percentage / 100 }}
+        data-slot="reasoning-icon-percentage"
+      />
+    </svg>
+  )
+}

packages/ui/src/components/resize-handle.css

@@ -6,7 +6,9 @@
     content: "";
     position: absolute;
     opacity: 0;
-    transition: opacity 0.15s ease-in-out;
+    transition-property: opacity;
+    transition-duration: var(--transition-duration);
+    transition-timing-function: var(--transition-easing);
   }
 
   &:hover::after,

packages/ui/src/components/scroll-fade.css

@@ -0,0 +1,82 @@
+[data-component="scroll-fade"] {
+  overflow: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: none;
+  box-sizing: border-box;
+  color: inherit;
+  font: inherit;
+  -ms-overflow-style: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  &[data-direction="horizontal"] {
+    overflow-x: auto;
+    overflow-y: hidden;
+
+    /* Both fades */
+    &[data-fade-start][data-fade-end] {
+      mask-image: linear-gradient(
+        to right,
+        transparent,
+        black var(--scroll-fade-start),
+        black calc(100% - var(--scroll-fade-end)),
+        transparent
+      );
+      -webkit-mask-image: linear-gradient(
+        to right,
+        transparent,
+        black var(--scroll-fade-start),
+        black calc(100% - var(--scroll-fade-end)),
+        transparent
+      );
+    }
+
+    /* Only start fade */
+    &[data-fade-start]:not([data-fade-end]) {
+      mask-image: linear-gradient(to right, transparent, black var(--scroll-fade-start), black 100%);
+      -webkit-mask-image: linear-gradient(to right, transparent, black var(--scroll-fade-start), black 100%);
+    }
+
+    /* Only end fade */
+    &:not([data-fade-start])[data-fade-end] {
+      mask-image: linear-gradient(to right, black 0%, black calc(100% - var(--scroll-fade-end)), transparent);
+      -webkit-mask-image: linear-gradient(to right, black 0%, black calc(100% - var(--scroll-fade-end)), transparent);
+    }
+  }
+
+  &[data-direction="vertical"] {
+    overflow-y: auto;
+    overflow-x: hidden;
+
+    &[data-fade-start][data-fade-end] {
+      mask-image: linear-gradient(
+        to bottom,
+        transparent,
+        black var(--scroll-fade-start),
+        black calc(100% - var(--scroll-fade-end)),
+        transparent
+      );
+      -webkit-mask-image: linear-gradient(
+        to bottom,
+        transparent,
+        black var(--scroll-fade-start),
+        black calc(100% - var(--scroll-fade-end)),
+        transparent
+      );
+    }
+
+    /* Only start fade */
+    &[data-fade-start]:not([data-fade-end]) {
+      mask-image: linear-gradient(to bottom, transparent, black var(--scroll-fade-start), black 100%);
+      -webkit-mask-image: linear-gradient(to bottom, transparent, black var(--scroll-fade-start), black 100%);
+    }
+
+    /* Only end fade */
+    &:not([data-fade-start])[data-fade-end] {
+      mask-image: linear-gradient(to bottom, black 0%, black calc(100% - var(--scroll-fade-end)), transparent);
+      -webkit-mask-image: linear-gradient(to bottom, black 0%, black calc(100% - var(--scroll-fade-end)), transparent);
+    }
+  }
+}

packages/ui/src/components/scroll-fade.tsx

@@ -0,0 +1,207 @@
+import { type JSX, createEffect, createSignal, onCleanup, onMount, splitProps } from "solid-js"
+import "./scroll-fade.css"
+
+export interface ScrollFadeProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  direction?: "horizontal" | "vertical"
+  fadeStartSize?: number
+  fadeEndSize?: number
+  trackTransformSelector?: string
+  ref?: (el: HTMLDivElement) => void
+}
+
+export function ScrollFade(props: ScrollFadeProps) {
+  const [local, others] = splitProps(props, [
+    "children",
+    "direction",
+    "fadeStartSize",
+    "fadeEndSize",
+    "trackTransformSelector",
+    "class",
+    "style",
+    "ref",
+  ])
+
+  const direction = () => local.direction ?? "vertical"
+  const fadeStartSize = () => local.fadeStartSize ?? 20
+  const fadeEndSize = () => local.fadeEndSize ?? 20
+
+  const getTransformOffset = (element: Element): number => {
+    const style = getComputedStyle(element)
+    const transform = style.transform
+    if (!transform || transform === "none") return 0
+
+    const match = transform.match(/matrix(?:3d)?\(([^)]+)\)/)
+    if (!match) return 0
+
+    const values = match[1].split(",").map((v) => parseFloat(v.trim()))
+    const isHorizontal = direction() === "horizontal"
+
+    if (transform.startsWith("matrix3d")) {
+      return isHorizontal ? -(values[12] || 0) : -(values[13] || 0)
+    } else {
+      return isHorizontal ? -(values[4] || 0) : -(values[5] || 0)
+    }
+  }
+
+  let containerRef: HTMLDivElement | undefined
+
+  const [fadeStart, setFadeStart] = createSignal(0)
+  const [fadeEnd, setFadeEnd] = createSignal(0)
+  const [isScrollable, setIsScrollable] = createSignal(false)
+
+  let lastScrollPos = 0
+  let lastTransformPos = 0
+  let lastScrollSize = 0
+  let lastClientSize = 0
+
+  const updateFade = () => {
+    if (!containerRef) return
+
+    const isHorizontal = direction() === "horizontal"
+    const scrollPos = isHorizontal ? containerRef.scrollLeft : containerRef.scrollTop
+    const scrollSize = isHorizontal ? containerRef.scrollWidth : containerRef.scrollHeight
+    const clientSize = isHorizontal ? containerRef.clientWidth : containerRef.clientHeight
+
+    let transformPos = 0
+    if (local.trackTransformSelector) {
+      const transformElement = containerRef.querySelector(local.trackTransformSelector)
+      if (transformElement) {
+        transformPos = getTransformOffset(transformElement)
+      }
+    }
+
+    const effectiveScrollPos = Math.max(scrollPos, transformPos)
+
+    if (
+      effectiveScrollPos === lastScrollPos &&
+      transformPos === lastTransformPos &&
+      scrollSize === lastScrollSize &&
+      clientSize === lastClientSize
+    ) {
+      return
+    }
+
+    lastScrollPos = effectiveScrollPos
+    lastTransformPos = transformPos
+    lastScrollSize = scrollSize
+    lastClientSize = clientSize
+
+    const maxScroll = scrollSize - clientSize
+    const canScroll = maxScroll > 1
+
+    setIsScrollable(canScroll)
+
+    if (!canScroll) {
+      setFadeStart(0)
+      setFadeEnd(0)
+      return
+    }
+
+    const progress = maxScroll > 0 ? effectiveScrollPos / maxScroll : 0
+
+    const startProgress = Math.min(progress / 0.1, 1)
+    setFadeStart(startProgress * fadeStartSize())
+
+    const endProgress = progress > 0.9 ? (1 - progress) / 0.1 : 1
+    setFadeEnd(Math.max(0, endProgress) * fadeEndSize())
+  }
+
+  onMount(() => {
+    if (!containerRef) return
+
+    updateFade()
+
+    let rafId: number | undefined
+    let isPolling = false
+    let pollTimeout: ReturnType<typeof setTimeout> | undefined
+
+    const startPolling = () => {
+      if (isPolling) return
+      isPolling = true
+
+      const pollScroll = () => {
+        updateFade()
+        rafId = requestAnimationFrame(pollScroll)
+      }
+      rafId = requestAnimationFrame(pollScroll)
+    }
+
+    const stopPolling = () => {
+      if (!isPolling) return
+      isPolling = false
+      if (rafId !== undefined) {
+        cancelAnimationFrame(rafId)
+        rafId = undefined
+      }
+    }
+
+    const schedulePollingStop = () => {
+      if (pollTimeout !== undefined) clearTimeout(pollTimeout)
+      pollTimeout = setTimeout(stopPolling, 1000)
+    }
+
+    const onActivity = () => {
+      updateFade()
+      if (local.trackTransformSelector) {
+        startPolling()
+        schedulePollingStop()
+      }
+    }
+
+    containerRef.addEventListener("scroll", onActivity, { passive: true })
+
+    const resizeObserver = new ResizeObserver(() => {
+      lastScrollSize = 0
+      lastClientSize = 0
+      onActivity()
+    })
+    resizeObserver.observe(containerRef)
+
+    const mutationObserver = new MutationObserver(() => {
+      lastScrollSize = 0
+      lastClientSize = 0
+      requestAnimationFrame(onActivity)
+    })
+    mutationObserver.observe(containerRef, {
+      childList: true,
+      subtree: true,
+      characterData: true,
+    })
+
+    onCleanup(() => {
+      containerRef?.removeEventListener("scroll", onActivity)
+      resizeObserver.disconnect()
+      mutationObserver.disconnect()
+      stopPolling()
+      if (pollTimeout !== undefined) clearTimeout(pollTimeout)
+    })
+  })
+
+  createEffect(() => {
+    local.children
+    requestAnimationFrame(updateFade)
+  })
+
+  return (
+    <div
+      ref={(el) => {
+        containerRef = el
+        local.ref?.(el)
+      }}
+      data-component="scroll-fade"
+      data-direction={direction()}
+      data-scrollable={isScrollable() || undefined}
+      data-fade-start={fadeStart() > 0 || undefined}
+      data-fade-end={fadeEnd() > 0 || undefined}
+      class={local.class}
+      style={{
+        ...(typeof local.style === "object" ? local.style : {}),
+        "--scroll-fade-start": `${fadeStart()}px`,
+        "--scroll-fade-end": `${fadeEnd()}px`,
+      }}
+      {...others}
+    >
+      {local.children}
+    </div>
+  )
+}

packages/ui/src/components/scroll-reveal.tsx

@@ -0,0 +1,141 @@
+import { type JSX, onCleanup, splitProps } from "solid-js"
+import { ScrollFade, type ScrollFadeProps } from "./scroll-fade"
+
+const SCROLL_SPEED = 60
+const PAUSE_DURATION = 800
+
+type ScrollAnimationState = {
+  rafId: number | null
+  startTime: number
+  running: boolean
+}
+
+const startScrollAnimation = (containerEl: HTMLElement): ScrollAnimationState | null => {
+  containerEl.offsetHeight
+
+  const extraWidth = containerEl.scrollWidth - containerEl.clientWidth
+
+  if (extraWidth <= 0) {
+    return null
+  }
+
+  const scrollDuration = (extraWidth / SCROLL_SPEED) * 1000
+  const totalDuration = PAUSE_DURATION + scrollDuration + PAUSE_DURATION + scrollDuration + PAUSE_DURATION
+
+  const state: ScrollAnimationState = {
+    rafId: null,
+    startTime: performance.now(),
+    running: true,
+  }
+
+  const animate = (currentTime: number) => {
+    if (!state.running) return
+
+    const elapsed = currentTime - state.startTime
+    const progress = (elapsed % totalDuration) / totalDuration
+
+    const pausePercent = PAUSE_DURATION / totalDuration
+    const scrollPercent = scrollDuration / totalDuration
+
+    const pauseEnd1 = pausePercent
+    const scrollEnd1 = pauseEnd1 + scrollPercent
+    const pauseEnd2 = scrollEnd1 + pausePercent
+    const scrollEnd2 = pauseEnd2 + scrollPercent
+
+    let scrollPos = 0
+
+    if (progress < pauseEnd1) {
+      scrollPos = 0
+    } else if (progress < scrollEnd1) {
+      const scrollProgress = (progress - pauseEnd1) / scrollPercent
+      scrollPos = scrollProgress * extraWidth
+    } else if (progress < pauseEnd2) {
+      scrollPos = extraWidth
+    } else if (progress < scrollEnd2) {
+      const scrollProgress = (progress - pauseEnd2) / scrollPercent
+      scrollPos = extraWidth * (1 - scrollProgress)
+    } else {
+      scrollPos = 0
+    }
+
+    containerEl.scrollLeft = scrollPos
+    state.rafId = requestAnimationFrame(animate)
+  }
+
+  state.rafId = requestAnimationFrame(animate)
+  return state
+}
+
+const stopScrollAnimation = (state: ScrollAnimationState | null, containerEl?: HTMLElement) => {
+  if (state) {
+    state.running = false
+    if (state.rafId !== null) {
+      cancelAnimationFrame(state.rafId)
+    }
+  }
+  if (containerEl) {
+    containerEl.scrollLeft = 0
+  }
+}
+
+export interface ScrollRevealProps extends Omit<ScrollFadeProps, "direction"> {
+  hoverDelay?: number
+}
+
+export function ScrollReveal(props: ScrollRevealProps) {
+  const [local, others] = splitProps(props, ["children", "hoverDelay", "ref"])
+
+  const hoverDelay = () => local.hoverDelay ?? 300
+
+  let containerRef: HTMLDivElement | undefined
+  let hoverTimeout: ReturnType<typeof setTimeout> | undefined
+  let scrollAnimationState: ScrollAnimationState | null = null
+
+  const handleMouseEnter: JSX.EventHandler<HTMLDivElement, MouseEvent> = () => {
+    hoverTimeout = setTimeout(() => {
+      if (!containerRef) return
+
+      containerRef.offsetHeight
+
+      const isScrollable = containerRef.scrollWidth > containerRef.clientWidth + 1
+
+      if (isScrollable) {
+        stopScrollAnimation(scrollAnimationState, containerRef)
+        scrollAnimationState = startScrollAnimation(containerRef)
+      }
+    }, hoverDelay())
+  }
+
+  const handleMouseLeave: JSX.EventHandler<HTMLDivElement, MouseEvent> = () => {
+    if (hoverTimeout) {
+      clearTimeout(hoverTimeout)
+      hoverTimeout = undefined
+    }
+    stopScrollAnimation(scrollAnimationState, containerRef)
+    scrollAnimationState = null
+  }
+
+  onCleanup(() => {
+    if (hoverTimeout) {
+      clearTimeout(hoverTimeout)
+    }
+    stopScrollAnimation(scrollAnimationState, containerRef)
+  })
+
+  return (
+    <ScrollFade
+      ref={(el) => {
+        containerRef = el
+        local.ref?.(el)
+      }}
+      fadeStartSize={8}
+      fadeEndSize={8}
+      direction="horizontal"
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      {...others}
+    >
+      {local.children}
+    </ScrollFade>
+  )
+}

packages/ui/src/components/select.css

@@ -1,7 +1,13 @@
 [data-component="select"] {
   [data-slot="select-select-trigger"] {
-    padding: 0 4px 0 8px;
+    display: flex;
+    padding: 4px 8px !important;
+    align-items: center;
+    justify-content: space-between;
     box-shadow: none;
+    transition-property: background-color;
+    transition-duration: var(--transition-duration);
+    transition-timing-function: var(--transition-easing);
 
     [data-slot="select-select-trigger-value"] {
       overflow: hidden;
@@ -15,10 +21,10 @@
       align-items: center;
       justify-content: center;
       flex-shrink: 0;
-      color: var(--text-weak);
-      transition: transform 0.1s ease-in-out;
+      color: var(--icon-base);
     }
 
+    &:hover,
     &[data-expanded] {
       &[data-variant="secondary"] {
         background-color: var(--button-secondary-hover);
@@ -30,78 +36,42 @@
         background-color: var(--icon-strong-active);
       }
     }
-
+    &:not([data-expanded]):focus,
     &:not([data-expanded]):focus-visible {
       &[data-variant="secondary"] {
         background-color: var(--button-secondary-base);
       }
       &[data-variant="ghost"] {
-        background-color: var(--surface-raised-base-hover);
+        background-color: transparent;
       }
       &[data-variant="primary"] {
         background-color: var(--icon-strong-base);
       }
     }
   }
-
-  &[data-trigger-style="settings"] {
-    [data-slot="select-select-trigger"] {
-      padding: 6px 6px 6px 12px;
-      box-shadow: none;
-      border-radius: 6px;
-      min-width: 160px;
-      height: 32px;
-      justify-content: flex-end;
-      gap: 12px;
-      background-color: transparent;
-
-      [data-slot="select-select-trigger-value"] {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        font-size: var(--font-size-base);
-        font-weight: var(--font-weight-regular);
-      }
-      [data-slot="select-select-trigger-icon"] {
-        width: 16px;
-        height: 20px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-shrink: 0;
-        color: var(--text-weak);
-        background-color: var(--surface-raised-base);
-        border-radius: 4px;
-        transition: transform 0.1s ease-in-out;
-      }
-
-      &[data-slot="select-select-trigger"]:hover:not(:disabled),
-      &[data-slot="select-select-trigger"][data-expanded],
-      &[data-slot="select-select-trigger"][data-expanded]:hover:not(:disabled) {
-        background-color: var(--input-base);
-        box-shadow: var(--shadow-xs-border-base);
-      }
-
-      &:not([data-expanded]):focus {
-        background-color: transparent;
-        box-shadow: none;
-      }
-    }
-  }
 }
 
 [data-component="select-content"] {
-  min-width: 104px;
+  min-width: 8rem;
   max-width: 23rem;
   overflow: hidden;
   border-radius: var(--radius-md);
   background-color: var(--surface-raised-stronger-non-alpha);
   padding: 4px;
   box-shadow: var(--shadow-xs-border);
-  z-index: 60;
+  z-index: 50;
+  transform-origin: var(--kb-popper-content-transform-origin);
+  pointer-events: none;
+
+  animation: selectContentHide var(--transition-duration) var(--transition-easing) forwards;
+
+  @starting-style {
+    animation: none;
+  }
 
   &[data-expanded] {
-    animation: select-open 0.15s ease-out;
+    pointer-events: auto;
+    animation: selectContentShow var(--transition-duration) var(--transition-easing) forwards;
   }
 
   [data-slot="select-select-content-list"] {
@@ -111,43 +81,38 @@
     overflow-x: hidden;
     display: flex;
     flex-direction: column;
-
     &:focus {
       outline: none;
     }
-
     > *:not([role="presentation"]) + *:not([role="presentation"]) {
       margin-top: 2px;
     }
   }
-
   [data-slot="select-select-item"] {
     position: relative;
     display: flex;
     align-items: center;
-    padding: 2px 8px;
+    padding: 4px 8px;
     gap: 12px;
-    border-radius: 4px;
-    cursor: default;
+    border-radius: var(--radius-sm);
 
     /* text-12-medium */
     font-family: var(--font-family-sans);
-    font-size: var(--font-size-small);
+    font-size: var(--font-size-base);
     font-style: normal;
     font-weight: var(--font-weight-medium);
     line-height: var(--line-height-large); /* 166.667% */
     letter-spacing: var(--letter-spacing-normal);
-
     color: var(--text-strong);
 
-    transition:
-      background-color 0.2s ease-in-out,
-      color 0.2s ease-in-out;
+    transition-property: background-color, color;
+    transition-duration: var(--transition-duration);
+    transition-timing-function: var(--transition-easing);
     outline: none;
     user-select: none;
 
-    &[data-highlighted] {
-      background: var(--surface-raised-base-hover);
+    &:hover {
+      background-color: var(--surface-raised-base-hover);
     }
     &[data-disabled] {
       background-color: var(--surface-raised-base);
@@ -160,6 +125,11 @@
       margin-left: auto;
       width: 16px;
       height: 16px;
+      color: var(--icon-strong-base);
+
+      svg {
+        color: var(--icon-strong-base);
+      }
     }
     &:focus {
       outline: none;
@@ -170,33 +140,24 @@
   }
 }
 
-[data-component="select-content"][data-trigger-style="settings"] {
-  min-width: 160px;
-  border-radius: 8px;
-  padding: 0;
-
-  [data-slot="select-select-content-list"] {
-    padding: 4px;
-  }
-
-  [data-slot="select-select-item"] {
-    /* text-14-regular */
-    font-family: var(--font-family-sans);
-    font-size: var(--font-size-base);
-    font-style: normal;
-    font-weight: var(--font-weight-regular);
-    line-height: var(--line-height-large);
-    letter-spacing: var(--letter-spacing-normal);
-  }
-}
-
-@keyframes select-open {
+@keyframes selectContentShow {
   from {
     opacity: 0;
-    transform: scale(0.95);
+    transform: scaleY(0.95);
   }
   to {
     opacity: 1;
-    transform: scale(1);
+    transform: scaleY(1);
+  }
+}
+
+@keyframes selectContentHide {
+  from {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+  to {
+    opacity: 0;
+    transform: scaleY(0.95);
   }
 }

packages/ui/src/components/select.tsx

@@ -1,8 +1,10 @@
 import { Select as Kobalte } from "@kobalte/core/select"
-import { createMemo, onCleanup, splitProps, type ComponentProps, type JSX } from "solid-js"
+import { createMemo, createSignal, onCleanup, splitProps, type ComponentProps, type JSX } from "solid-js"
 import { pipe, groupBy, entries, map } from "remeda"
+import { Show } from "solid-js"
 import { Button, ButtonProps } from "./button"
 import { Icon } from "./icon"
+import { MorphChevron } from "./morph-chevron"
 
 export type SelectProps<T> = Omit<ComponentProps<typeof Kobalte<T>>, "value" | "onSelect" | "children"> & {
   placeholder?: string
@@ -38,6 +40,8 @@ export function Select<T>(props: SelectProps<T> & Omit<ButtonProps, "children">)
     "triggerVariant",
   ])
 
+  const [isOpen, setIsOpen] = createSignal(false)
+
   const state = {
     key: undefined as string | undefined,
     cleanup: undefined as (() => void) | void,
@@ -85,7 +89,7 @@ export function Select<T>(props: SelectProps<T> & Omit<ButtonProps, "children">)
       data-component="select"
       data-trigger-style={local.triggerVariant}
       placement={local.triggerVariant === "settings" ? "bottom-end" : "bottom-start"}
-      gutter={4}
+      gutter={8}
       value={local.current}
       options={grouped()}
       optionValue={(x) => (local.value ? local.value(x) : (x as string))}
@@ -115,7 +119,7 @@ export function Select<T>(props: SelectProps<T> & Omit<ButtonProps, "children">)
                 : (itemProps.item.rawValue as string)}
           </Kobalte.ItemLabel>
           <Kobalte.ItemIndicator data-slot="select-select-item-indicator">
-            <Icon name="check-small" size="small" />
+            <Icon name="check" size="small" />
           </Kobalte.ItemIndicator>
         </Kobalte.Item>
       )}
@@ -124,6 +128,7 @@ export function Select<T>(props: SelectProps<T> & Omit<ButtonProps, "children">)
         stop()
       }}
       onOpenChange={(open) => {
+        setIsOpen(open)
         local.onOpenChange?.(open)
         if (!open) stop()
       }}
@@ -149,7 +154,12 @@ export function Select<T>(props: SelectProps<T> & Omit<ButtonProps, "children">)
           }}
         </Kobalte.Value>
         <Kobalte.Icon data-slot="select-select-trigger-icon">
-          <Icon name={local.triggerVariant === "settings" ? "selector" : "chevron-down"} size="small" />
+          <Show when={local.triggerVariant === "settings"}>
+            <Icon name="selector" size="small" />
+          </Show>
+          <Show when={local.triggerVariant !== "settings"}>
+            <MorphChevron expanded={isOpen()} />
+          </Show>
         </Kobalte.Icon>
       </Kobalte.Trigger>
       <Kobalte.Portal>

packages/ui/src/components/session-review.css

@@ -63,12 +63,8 @@
 
   [data-slot="accordion-item"] {
     [data-slot="accordion-content"] {
-      display: none;
-    }
-    &[data-expanded] {
-      [data-slot="accordion-content"] {
-        display: block;
-      }
+      /* Use grid-template-rows for smooth height transition */
+      display: grid;
     }
   }
 
@@ -130,7 +126,9 @@
     cursor: pointer;
     border-radius: 4px;
     opacity: 0;
-    transition: opacity 0.15s ease;
+    transition-property: opacity, background-color, color;
+    transition-duration: var(--transition-duration);
+    transition-timing-function: var(--transition-easing);
 
     &:hover {
       color: var(--text-strong);

packages/ui/src/components/session-review.tsx

@@ -290,8 +290,8 @@ export const SessionReview = (props: SessionReviewProps) => {
         <div data-slot="session-review-title">{i18n.t("ui.sessionReview.title")}</div>
         <div data-slot="session-review-actions">
           <Show when={props.onDiffStyleChange}>
-            <RadioGroup
-              options={["unified", "split"] as const}
+            <RadioGroup<SessionReviewDiffStyle>
+              options={["unified", "split"]}
               current={diffStyle()}
               value={(style) => style}
               label={(style) =>
@@ -501,6 +501,7 @@ export const SessionReview = (props: SessionReviewProps) => {
                   value={diff.file}
                   id={diffId(diff.file)}
                   data-file={diff.file}
+                  expanded={open().includes(diff.file)}
                   data-slot="session-review-accordion-item"
                   data-selected={props.focusedFile === diff.file ? "" : undefined}
                 >

packages/ui/src/components/session-turn.css

@@ -102,10 +102,11 @@
 
   [data-component="user-message"] [data-slot="user-message-text"] {
     max-height: var(--user-message-collapsed-height, 64px);
+    transition: max-height 200ms cubic-bezier(0.25, 0, 0.5, 1);
   }
 
   [data-component="user-message"][data-expanded="true"] [data-slot="user-message-text"] {
-    max-height: none;
+    max-height: 2000px;
   }
 
   [data-component="user-message"][data-can-expand="true"] [data-slot="user-message-text"] {
@@ -151,17 +152,6 @@
     background: transparent;
     cursor: pointer;
     color: var(--text-weak);
-
-    [data-slot="icon-svg"] {
-      transition: transform 0.15s ease;
-    }
-  }
-
-  [data-component="user-message"][data-expanded="true"]
-    [data-slot="user-message-text"]
-    [data-slot="user-message-expand"]
-    [data-slot="icon-svg"] {
-    transform: rotate(180deg);
   }
 
   [data-component="user-message"] [data-slot="user-message-text"] [data-slot="user-message-expand"]:hover {
@@ -467,6 +457,7 @@
     gap: 16px;
     align-items: center;
     justify-content: flex-end;
+    color: var(--icon-base);
   }
 
   [data-slot="session-turn-accordion-content"] {