fix(tui): handle error when creating a session (#16767)

Co-authored-by: Aiden Cline <63023139+rekram1-node@users.noreply.github.com>

.github/workflows/storybook.yml

@@ -0,0 +1,38 @@
+name: storybook
+
+on:
+  push:
+    branches: [dev]
+    paths:
+      - ".github/workflows/storybook.yml"
+      - "package.json"
+      - "bun.lock"
+      - "packages/storybook/**"
+      - "packages/ui/**"
+  pull_request:
+    branches: [dev]
+    paths:
+      - ".github/workflows/storybook.yml"
+      - "package.json"
+      - "bun.lock"
+      - "packages/storybook/**"
+      - "packages/ui/**"
+  workflow_dispatch:
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  build:
+    name: storybook build
+    runs-on: blacksmith-4vcpu-ubuntu-2404
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Bun
+        uses: ./.github/actions/setup-bun
+
+      - name: Build Storybook
+        run: bun --cwd packages/storybook build

.opencode/opencode.jsonc

@@ -5,6 +5,11 @@
       "options": {},
     },
   },
+  "permission": {
+    "edit": {
+      "packages/opencode/migration/*": "deny",
+    },
+  },
   "mcp": {},
   "tools": {
     "github-triage": false,

bun.lock

@@ -26,7 +26,7 @@
     },
     "packages/app": {
       "name": "@opencode-ai/app",
-      "version": "1.2.21",
+      "version": "1.2.24",
       "dependencies": {
         "@kobalte/core": "catalog:",
         "@opencode-ai/sdk": "workspace:*",
@@ -76,7 +76,7 @@
     },
     "packages/console/app": {
       "name": "@opencode-ai/console-app",
-      "version": "1.2.21",
+      "version": "1.2.24",
       "dependencies": {
         "@cloudflare/vite-plugin": "1.15.2",
         "@ibm/plex": "6.4.1",
@@ -110,7 +110,7 @@
     },
     "packages/console/core": {
       "name": "@opencode-ai/console-core",
-      "version": "1.2.21",
+      "version": "1.2.24",
       "dependencies": {
         "@aws-sdk/client-sts": "3.782.0",
         "@jsx-email/render": "1.1.1",
@@ -137,7 +137,7 @@
     },
     "packages/console/function": {
       "name": "@opencode-ai/console-function",
-      "version": "1.2.21",
+      "version": "1.2.24",
       "dependencies": {
         "@ai-sdk/anthropic": "2.0.0",
         "@ai-sdk/openai": "2.0.2",
@@ -161,7 +161,7 @@
     },
     "packages/console/mail": {
       "name": "@opencode-ai/console-mail",
-      "version": "1.2.21",
+      "version": "1.2.24",
       "dependencies": {
         "@jsx-email/all": "2.2.3",
         "@jsx-email/cli": "1.4.3",
@@ -185,7 +185,7 @@
     },
     "packages/desktop": {
       "name": "@opencode-ai/desktop",
-      "version": "1.2.21",
+      "version": "1.2.24",
       "dependencies": {
         "@opencode-ai/app": "workspace:*",
         "@opencode-ai/ui": "workspace:*",
@@ -218,7 +218,7 @@
     },
     "packages/desktop-electron": {
       "name": "@opencode-ai/desktop-electron",
-      "version": "1.2.21",
+      "version": "1.2.24",
       "dependencies": {
         "@opencode-ai/app": "workspace:*",
         "@opencode-ai/ui": "workspace:*",
@@ -248,7 +248,7 @@
     },
     "packages/enterprise": {
       "name": "@opencode-ai/enterprise",
-      "version": "1.2.21",
+      "version": "1.2.24",
       "dependencies": {
         "@opencode-ai/ui": "workspace:*",
         "@opencode-ai/util": "workspace:*",
@@ -277,7 +277,7 @@
     },
     "packages/function": {
       "name": "@opencode-ai/function",
-      "version": "1.2.21",
+      "version": "1.2.24",
       "dependencies": {
         "@octokit/auth-app": "8.0.1",
         "@octokit/rest": "catalog:",
@@ -293,7 +293,7 @@
     },
     "packages/opencode": {
       "name": "opencode",
-      "version": "1.2.21",
+      "version": "1.2.24",
       "bin": {
         "opencode": "./bin/opencode",
       },
@@ -409,7 +409,7 @@
     },
     "packages/plugin": {
       "name": "@opencode-ai/plugin",
-      "version": "1.2.21",
+      "version": "1.2.24",
       "dependencies": {
         "@opencode-ai/sdk": "workspace:*",
         "zod": "catalog:",
@@ -429,7 +429,7 @@
     },
     "packages/sdk/js": {
       "name": "@opencode-ai/sdk",
-      "version": "1.2.21",
+      "version": "1.2.24",
       "devDependencies": {
         "@hey-api/openapi-ts": "0.90.10",
         "@tsconfig/node22": "catalog:",
@@ -440,7 +440,7 @@
     },
     "packages/slack": {
       "name": "@opencode-ai/slack",
-      "version": "1.2.21",
+      "version": "1.2.24",
       "dependencies": {
         "@opencode-ai/sdk": "workspace:*",
         "@slack/bolt": "^3.17.1",
@@ -475,7 +475,7 @@
     },
     "packages/ui": {
       "name": "@opencode-ai/ui",
-      "version": "1.2.21",
+      "version": "1.2.24",
       "dependencies": {
         "@kobalte/core": "catalog:",
         "@opencode-ai/sdk": "workspace:*",
@@ -521,7 +521,7 @@
     },
     "packages/util": {
       "name": "@opencode-ai/util",
-      "version": "1.2.21",
+      "version": "1.2.24",
       "dependencies": {
         "zod": "catalog:",
       },
@@ -532,7 +532,7 @@
     },
     "packages/web": {
       "name": "@opencode-ai/web",
-      "version": "1.2.21",
+      "version": "1.2.24",
       "dependencies": {
         "@astrojs/cloudflare": "12.6.3",
         "@astrojs/markdown-remark": "6.3.1",

packages/app/e2e/actions.ts

@@ -7,7 +7,6 @@ import { createSdk, modKey, resolveDirectory, serverUrl } from "./utils"
 import {
   dropdownMenuTriggerSelector,
   dropdownMenuContentSelector,
-  sessionTimelineHeaderSelector,
   projectMenuTriggerSelector,
   projectCloseMenuSelector,
   projectWorkspacesToggleSelector,
@@ -244,9 +243,7 @@ export async function openSessionMoreMenu(page: Page, sessionID: string) {
 
   const scroller = page.locator(".scroll-view__viewport").first()
   await expect(scroller).toBeVisible()
-  const header = page.locator(sessionTimelineHeaderSelector).first()
-  await expect(header).toBeVisible({ timeout: 30_000 })
-  await expect(header.getByRole("heading", { level: 1 }).first()).toBeVisible({ timeout: 30_000 })
+  await expect(scroller.getByRole("heading", { level: 1 }).first()).toBeVisible({ timeout: 30_000 })
 
   const menu = page
     .locator(dropdownMenuContentSelector)
@@ -262,7 +259,7 @@ export async function openSessionMoreMenu(page: Page, sessionID: string) {
 
   if (opened) return menu
 
-  const menuTrigger = header.getByRole("button", { name: /more options/i }).first()
+  const menuTrigger = scroller.getByRole("button", { name: /more options/i }).first()
   await expect(menuTrigger).toBeVisible()
   await menuTrigger.click()
 

packages/app/e2e/projects/projects-close.spec.ts

@@ -25,16 +25,26 @@ test("closing active project navigates to another open project", async ({ page,
         await clickMenuItem(menu, /^Close$/i, { force: true })
 
         await expect
-          .poll(() => {
-            const pathname = new URL(page.url()).pathname
-            if (new RegExp(`^/${slug}/session(?:/[^/]+)?/?$`).test(pathname)) return "project"
-            if (pathname === "/") return "home"
-            return ""
-          })
+          .poll(
+            () => {
+              const pathname = new URL(page.url()).pathname
+              if (new RegExp(`^/${slug}/session(?:/[^/]+)?/?$`).test(pathname)) return "project"
+              if (pathname === "/") return "home"
+              return ""
+            },
+            { timeout: 15_000 },
+          )
           .toMatch(/^(project|home)$/)
 
         await expect(page).not.toHaveURL(new RegExp(`/${otherSlug}/session(?:[/?#]|$)`))
-        await expect(otherButton).toHaveCount(0)
+        await expect
+          .poll(
+            async () => {
+              return await page.locator(projectSwitchSelector(otherSlug)).count()
+            },
+            { timeout: 15_000 },
+          )
+          .toBe(0)
       },
       { extra: [other] },
     )

packages/app/e2e/selectors.ts

@@ -51,8 +51,6 @@ export const dropdownMenuContentSelector = '[data-component="dropdown-menu-conte
 
 export const inlineInputSelector = '[data-component="inline-input"]'
 
-export const sessionTimelineHeaderSelector = "[data-session-title]"
-
 export const sessionItemSelector = (sessionID: string) => `${sidebarNavSelector} [data-session-id="${sessionID}"]`
 
 export const workspaceItemSelector = (slug: string) =>

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

@@ -7,7 +7,7 @@ import {
   openSharePopover,
   withSession,
 } from "../actions"
-import { sessionItemSelector, inlineInputSelector, sessionTimelineHeaderSelector } from "../selectors"
+import { sessionItemSelector, inlineInputSelector } from "../selectors"
 
 const shareDisabled = process.env.OPENCODE_DISABLE_SHARE === "true" || process.env.OPENCODE_DISABLE_SHARE === "1"
 
@@ -39,14 +39,12 @@ test("session can be renamed via header menu", async ({ page, sdk, gotoSession }
   await withSession(sdk, originalTitle, async (session) => {
     await seedMessage(sdk, session.id)
     await gotoSession(session.id)
-    await expect(page.locator(sessionTimelineHeaderSelector).getByRole("heading", { level: 1 }).first()).toHaveText(
-      originalTitle,
-    )
+    await expect(page.getByRole("heading", { level: 1 }).first()).toHaveText(originalTitle)
 
     const menu = await openSessionMoreMenu(page, session.id)
     await clickMenuItem(menu, /rename/i)
 
-    const input = page.locator(sessionTimelineHeaderSelector).locator(inlineInputSelector).first()
+    const input = page.locator(".scroll-view__viewport").locator(inlineInputSelector).first()
     await expect(input).toBeVisible()
     await expect(input).toBeFocused()
     await input.fill(renamedTitle)
@@ -63,9 +61,7 @@ test("session can be renamed via header menu", async ({ page, sdk, gotoSession }
       )
       .toBe(renamedTitle)
 
-    await expect(page.locator(sessionTimelineHeaderSelector).getByRole("heading", { level: 1 }).first()).toHaveText(
-      renamedTitle,
-    )
+    await expect(page.getByRole("heading", { level: 1 }).first()).toHaveText(renamedTitle)
   })
 })
 

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

@@ -83,16 +83,23 @@ test("changing theme persists in localStorage", async ({ page, gotoSession }) =>
   const select = dialog.locator(settingsThemeSelector)
   await expect(select).toBeVisible()
 
+  const currentThemeId = await page.evaluate(() => {
+    return document.documentElement.getAttribute("data-theme")
+  })
+  const currentTheme = (await select.locator('[data-slot="select-select-trigger-value"]').textContent())?.trim() ?? ""
+
   await select.locator('[data-slot="select-select-trigger"]').click()
 
   const items = page.locator('[data-slot="select-select-item"]')
   const count = await items.count()
   expect(count).toBeGreaterThan(1)
 
-  const firstTheme = await items.nth(1).locator('[data-slot="select-select-item-label"]').textContent()
-  expect(firstTheme).toBeTruthy()
+  const nextTheme = (await items.locator('[data-slot="select-select-item-label"]').allTextContents())
+    .map((x) => x.trim())
+    .find((x) => x && x !== currentTheme)
+  expect(nextTheme).toBeTruthy()
 
-  await items.nth(1).click()
+  await items.filter({ hasText: nextTheme! }).first().click()
 
   await page.keyboard.press("Escape")
 
@@ -101,7 +108,7 @@ test("changing theme persists in localStorage", async ({ page, gotoSession }) =>
   })
 
   expect(storedThemeId).not.toBeNull()
-  expect(storedThemeId).not.toBe("oc-1")
+  expect(storedThemeId).not.toBe(currentThemeId)
 
   const dataTheme = await page.evaluate(() => {
     return document.documentElement.getAttribute("data-theme")
@@ -109,6 +116,42 @@ test("changing theme persists in localStorage", async ({ page, gotoSession }) =>
   expect(dataTheme).toBe(storedThemeId)
 })
 
+test("legacy oc-1 theme migrates to oc-2", async ({ page, gotoSession }) => {
+  await page.addInitScript(() => {
+    localStorage.setItem("opencode-theme-id", "oc-1")
+    localStorage.setItem("opencode-theme-css-light", "--background-base:#fff;")
+    localStorage.setItem("opencode-theme-css-dark", "--background-base:#000;")
+  })
+
+  await gotoSession()
+
+  await expect(page.locator("html")).toHaveAttribute("data-theme", "oc-2")
+
+  await expect
+    .poll(async () => {
+      return await page.evaluate(() => {
+        return localStorage.getItem("opencode-theme-id")
+      })
+    })
+    .toBe("oc-2")
+
+  await expect
+    .poll(async () => {
+      return await page.evaluate(() => {
+        return localStorage.getItem("opencode-theme-css-light")
+      })
+    })
+    .toBeNull()
+
+  await expect
+    .poll(async () => {
+      return await page.evaluate(() => {
+        return localStorage.getItem("opencode-theme-css-dark")
+      })
+    })
+    .toBeNull()
+})
+
 test("changing font persists in localStorage and updates CSS variable", async ({ page, gotoSession }) => {
   await gotoSession()
 

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

@@ -44,12 +44,14 @@ async function store(page: Page, key: string) {
   }, key)
 }
 
-test("terminal tab buffers persist across tab switches", async ({ page, withProject }) => {
+test("inactive terminal tab buffers persist across tab switches", async ({ page, withProject }) => {
   await withProject(async ({ directory, gotoSession }) => {
     const key = workspacePersistKey(directory, "terminal")
     const one = `E2E_TERM_ONE_${Date.now()}`
     const two = `E2E_TERM_TWO_${Date.now()}`
     const tabs = page.locator('#terminal-panel [data-slot="tabs-trigger"]')
+    const first = tabs.filter({ hasText: /Terminal 1/ }).first()
+    const second = tabs.filter({ hasText: /Terminal 2/ }).first()
 
     await gotoSession()
     await open(page)
@@ -61,22 +63,39 @@ test("terminal tab buffers persist across tab switches", async ({ page, withProj
 
     await run(page, `echo ${two}`)
 
-    await tabs
-      .filter({ hasText: /Terminal 1/ })
-      .first()
-      .click()
-
+    await first.click()
+    await expect(first).toHaveAttribute("aria-selected", "true")
     await expect
       .poll(
         async () => {
           const state = await store(page, key)
           const first = state?.all.find((item) => item.titleNumber === 1)?.buffer ?? ""
           const second = state?.all.find((item) => item.titleNumber === 2)?.buffer ?? ""
-          return first.includes(one) && second.includes(two)
+          return {
+            first: first.includes(one),
+            second: second.includes(two),
+          }
         },
         { timeout: 30_000 },
       )
-      .toBe(true)
+      .toEqual({ first: false, second: true })
+
+    await second.click()
+    await expect(second).toHaveAttribute("aria-selected", "true")
+    await expect
+      .poll(
+        async () => {
+          const state = await store(page, key)
+          const first = state?.all.find((item) => item.titleNumber === 1)?.buffer ?? ""
+          const second = state?.all.find((item) => item.titleNumber === 2)?.buffer ?? ""
+          return {
+            first: first.includes(one),
+            second: second.includes(two),
+          }
+        },
+        { timeout: 30_000 },
+      )
+      .toEqual({ first: true, second: false })
   })
 })
 

packages/app/e2e/utils.ts

@@ -57,7 +57,7 @@ export function sessionPath(directory: string, sessionID?: string) {
 }
 
 export function workspacePersistKey(directory: string, key: string) {
-  const head = directory.slice(0, 12) || "workspace"
+  const head = (directory.slice(0, 12) || "workspace").replace(/[^a-zA-Z0-9._-]/g, "-")
   const sum = checksum(directory) ?? "0"
   return `opencode.workspace.${head}.${sum}.dat:workspace:${key}`
 }

packages/app/package.json

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

packages/app/public/oc-theme-preload.js

@@ -1,6 +1,13 @@
 ;(function () {
-  var themeId = localStorage.getItem("opencode-theme-id")
-  if (!themeId) return
+  var key = "opencode-theme-id"
+  var themeId = localStorage.getItem(key) || "oc-2"
+
+  if (themeId === "oc-1") {
+    themeId = "oc-2"
+    localStorage.setItem(key, themeId)
+    localStorage.removeItem("opencode-theme-css-light")
+    localStorage.removeItem("opencode-theme-css-dark")
+  }
 
   var scheme = localStorage.getItem("opencode-color-scheme") || "system"
   var isDark = scheme === "dark" || (scheme === "system" && matchMedia("(prefers-color-scheme: dark)").matches)
@@ -9,9 +16,9 @@
   document.documentElement.dataset.theme = themeId
   document.documentElement.dataset.colorScheme = mode
 
-  if (themeId === "oc-1") return
+  if (themeId === "oc-2") return
 
-  var css = localStorage.getItem("opencode-theme-css-" + themeId + "-" + mode)
+  var css = localStorage.getItem("opencode-theme-css-" + mode)
   if (css) {
     var style = document.createElement("style")
     style.id = "oc-theme-preload"

packages/app/src/components/session/session-new-view.tsx

@@ -4,6 +4,7 @@ import { useSync } from "@/context/sync"
 import { useSDK } from "@/context/sdk"
 import { useLanguage } from "@/context/language"
 import { Icon } from "@opencode-ai/ui/icon"
+import { Mark } from "@opencode-ai/ui/logo"
 import { getDirectory, getFilename } from "@opencode-ai/util/path"
 
 const MAIN_WORKTREE = "main"
@@ -52,7 +53,10 @@ export function NewSessionView(props: NewSessionViewProps) {
       <div class="h-12 shrink-0" aria-hidden />
       <div class="flex-1 px-6 pb-30 flex items-center justify-center text-center">
         <div class="w-full max-w-200 flex flex-col items-center text-center gap-4">
-          <div class="text-20-medium text-text-strong">{language.t("session.new.title")}</div>
+          <div class="flex flex-col items-center gap-6">
+            <Mark class="w-10" />
+            <div class="text-20-medium text-text-strong">{language.t("session.new.title")}</div>
+          </div>
           <div class="w-full flex flex-col gap-4 items-center">
             <div class="flex items-start justify-center gap-3 min-h-5">
               <div class="text-12-medium text-text-weak select-text leading-5 min-w-0 max-w-160 break-words text-center">

packages/app/src/components/terminal.tsx

@@ -217,7 +217,7 @@ export const Terminal = (props: TerminalProps) => {
     const currentTheme = theme.themes()[theme.themeId()]
     if (!currentTheme) return fallback
     const variant = mode === "dark" ? currentTheme.dark : currentTheme.light
-    if (!variant?.seeds) return fallback
+    if (!variant?.seeds && !variant?.palette) return fallback
     const resolved = resolveThemeVariant(variant, mode === "dark")
     const text = resolved["text-stronger"] ?? fallback.foreground
     const background = resolved["background-stronger"] ?? fallback.background

packages/app/src/context/global-sync.tsx

@@ -27,7 +27,7 @@ import type { InitError } from "../pages/error"
 import { useGlobalSDK } from "./global-sdk"
 import { bootstrapDirectory, bootstrapGlobal } from "./global-sync/bootstrap"
 import { createChildStoreManager } from "./global-sync/child-store"
-import { applyDirectoryEvent, applyGlobalEvent } from "./global-sync/event-reducer"
+import { applyDirectoryEvent, applyGlobalEvent, cleanupDroppedSessionCaches } from "./global-sync/event-reducer"
 import { createRefreshQueue } from "./global-sync/queue"
 import { estimateRootSessionTotal, loadRootSessionsWithFallback } from "./global-sync/session-load"
 import { trimSessions } from "./global-sync/session-trim"
@@ -189,6 +189,7 @@ function createGlobalSync() {
       })
       if (next.length !== store.session.length) {
         setStore("session", reconcile(next, { key: "id" }))
+        cleanupDroppedSessionCaches(store, setStore, next, setSessionTodo)
       }
       children.unpin(directory)
       return
@@ -220,6 +221,7 @@ function createGlobalSync() {
           }),
         )
         setStore("session", reconcile(sessions, { key: "id" }))
+        cleanupDroppedSessionCaches(store, setStore, sessions, setSessionTodo)
         sessionMeta.set(directory, { limit })
       })
       .catch((err) => {

packages/app/src/context/global-sync/event-reducer.test.ts

@@ -2,7 +2,7 @@ import { describe, expect, test } from "bun:test"
 import type { Message, Part, PermissionRequest, Project, QuestionRequest, Session } from "@opencode-ai/sdk/v2/client"
 import { createStore } from "solid-js/store"
 import type { State } from "./types"
-import { applyDirectoryEvent, applyGlobalEvent } from "./event-reducer"
+import { applyDirectoryEvent, applyGlobalEvent, cleanupDroppedSessionCaches } from "./event-reducer"
 
 const rootSession = (input: { id: string; parentID?: string; archived?: number }) =>
   ({
@@ -248,6 +248,62 @@ describe("applyDirectoryEvent", () => {
     }
   })
 
+  test("cleans caches for trimmed sessions on session.created", () => {
+    const dropped = rootSession({ id: "ses_b" })
+    const kept = rootSession({ id: "ses_a" })
+    const message = userMessage("msg_1", dropped.id)
+    const todos: string[] = []
+    const [store, setStore] = createStore(
+      baseState({
+        limit: 1,
+        session: [dropped],
+        message: { [dropped.id]: [message] },
+        part: { [message.id]: [textPart("prt_1", dropped.id, message.id)] },
+        session_diff: { [dropped.id]: [] },
+        todo: { [dropped.id]: [] },
+        permission: { [dropped.id]: [] },
+        question: { [dropped.id]: [] },
+        session_status: { [dropped.id]: { type: "busy" } },
+      }),
+    )
+
+    applyDirectoryEvent({
+      event: { type: "session.created", properties: { info: kept } },
+      store,
+      setStore,
+      push() {},
+      directory: "/tmp",
+      loadLsp() {},
+      setSessionTodo(sessionID, value) {
+        if (value !== undefined) return
+        todos.push(sessionID)
+      },
+    })
+
+    expect(store.session.map((x) => x.id)).toEqual([kept.id])
+    expect(store.message[dropped.id]).toBeUndefined()
+    expect(store.part[message.id]).toBeUndefined()
+    expect(store.session_diff[dropped.id]).toBeUndefined()
+    expect(store.todo[dropped.id]).toBeUndefined()
+    expect(store.permission[dropped.id]).toBeUndefined()
+    expect(store.question[dropped.id]).toBeUndefined()
+    expect(store.session_status[dropped.id]).toBeUndefined()
+    expect(todos).toEqual([dropped.id])
+  })
+
+  test("cleanupDroppedSessionCaches clears part-only orphan state", () => {
+    const [store, setStore] = createStore(
+      baseState({
+        session: [rootSession({ id: "ses_keep" })],
+        part: { msg_1: [textPart("prt_1", "ses_drop", "msg_1")] },
+      }),
+    )
+
+    cleanupDroppedSessionCaches(store, setStore, store.session)
+
+    expect(store.part.msg_1).toBeUndefined()
+  })
+
   test("upserts and removes messages while clearing orphaned parts", () => {
     const sessionID = "ses_1"
     const [store, setStore] = createStore(

packages/app/src/context/global-sync/event-reducer.ts

@@ -13,6 +13,7 @@ import type {
 } from "@opencode-ai/sdk/v2/client"
 import type { State, VcsCache } from "./types"
 import { trimSessions } from "./session-trim"
+import { dropSessionCaches } from "./session-cache"
 
 export function applyGlobalEvent(input: {
   event: { type: string; properties?: unknown }
@@ -40,37 +41,44 @@ export function applyGlobalEvent(input: {
 }
 
 function cleanupSessionCaches(
-  store: Store<State>,
   setStore: SetStoreFunction<State>,
   sessionID: string,
   setSessionTodo?: (sessionID: string, todos: Todo[] | undefined) => void,
 ) {
   if (!sessionID) return
-  const hasAny =
-    store.message[sessionID] !== undefined ||
-    store.session_diff[sessionID] !== undefined ||
-    store.todo[sessionID] !== undefined ||
-    store.permission[sessionID] !== undefined ||
-    store.question[sessionID] !== undefined ||
-    store.session_status[sessionID] !== undefined
   setSessionTodo?.(sessionID, undefined)
-  if (!hasAny) return
   setStore(
     produce((draft) => {
-      const messages = draft.message[sessionID]
-      if (messages) {
-        for (const message of messages) {
-          const id = message?.id
-          if (!id) continue
-          delete draft.part[id]
-        }
-      }
-      delete draft.message[sessionID]
-      delete draft.session_diff[sessionID]
-      delete draft.todo[sessionID]
-      delete draft.permission[sessionID]
-      delete draft.question[sessionID]
-      delete draft.session_status[sessionID]
+      dropSessionCaches(draft, [sessionID])
+    }),
+  )
+}
+
+export function cleanupDroppedSessionCaches(
+  store: Store<State>,
+  setStore: SetStoreFunction<State>,
+  next: Session[],
+  setSessionTodo?: (sessionID: string, todos: Todo[] | undefined) => void,
+) {
+  const keep = new Set(next.map((item) => item.id))
+  const stale = [
+    ...Object.keys(store.message),
+    ...Object.keys(store.session_diff),
+    ...Object.keys(store.todo),
+    ...Object.keys(store.permission),
+    ...Object.keys(store.question),
+    ...Object.keys(store.session_status),
+    ...Object.values(store.part)
+      .map((parts) => parts?.find((part) => !!part?.sessionID)?.sessionID)
+      .filter((sessionID): sessionID is string => !!sessionID),
+  ].filter((sessionID, index, list) => !keep.has(sessionID) && list.indexOf(sessionID) === index)
+  if (stale.length === 0) return
+  for (const sessionID of stale) {
+    setSessionTodo?.(sessionID, undefined)
+  }
+  setStore(
+    produce((draft) => {
+      dropSessionCaches(draft, stale)
     }),
   )
 }
@@ -102,6 +110,7 @@ export function applyDirectoryEvent(input: {
       next.splice(result.index, 0, info)
       const trimmed = trimSessions(next, { limit: input.store.limit, permission: input.store.permission })
       input.setStore("session", reconcile(trimmed, { key: "id" }))
+      cleanupDroppedSessionCaches(input.store, input.setStore, trimmed, input.setSessionTodo)
       if (!info.parentID) input.setStore("sessionTotal", (value) => value + 1)
       break
     }
@@ -117,7 +126,7 @@ export function applyDirectoryEvent(input: {
             }),
           )
         }
-        cleanupSessionCaches(input.store, input.setStore, info.id, input.setSessionTodo)
+        cleanupSessionCaches(input.setStore, info.id, input.setSessionTodo)
         if (info.parentID) break
         input.setStore("sessionTotal", (value) => Math.max(0, value - 1))
         break
@@ -130,6 +139,7 @@ export function applyDirectoryEvent(input: {
       next.splice(result.index, 0, info)
       const trimmed = trimSessions(next, { limit: input.store.limit, permission: input.store.permission })
       input.setStore("session", reconcile(trimmed, { key: "id" }))
+      cleanupDroppedSessionCaches(input.store, input.setStore, trimmed, input.setSessionTodo)
       break
     }
     case "session.deleted": {
@@ -143,7 +153,7 @@ export function applyDirectoryEvent(input: {
           }),
         )
       }
-      cleanupSessionCaches(input.store, input.setStore, info.id, input.setSessionTodo)
+      cleanupSessionCaches(input.setStore, info.id, input.setSessionTodo)
       if (info.parentID) break
       input.setStore("sessionTotal", (value) => Math.max(0, value - 1))
       break

packages/app/src/context/global-sync/session-cache.test.ts

@@ -0,0 +1,102 @@
+import { describe, expect, test } from "bun:test"
+import type {
+  FileDiff,
+  Message,
+  Part,
+  PermissionRequest,
+  QuestionRequest,
+  SessionStatus,
+  Todo,
+} from "@opencode-ai/sdk/v2/client"
+import { dropSessionCaches, pickSessionCacheEvictions } from "./session-cache"
+
+const msg = (id: string, sessionID: string) =>
+  ({
+    id,
+    sessionID,
+    role: "user",
+    time: { created: 1 },
+    agent: "assistant",
+    model: { providerID: "openai", modelID: "gpt" },
+  }) as Message
+
+const part = (id: string, sessionID: string, messageID: string) =>
+  ({
+    id,
+    sessionID,
+    messageID,
+    type: "text",
+    text: id,
+  }) as Part
+
+describe("app session cache", () => {
+  test("dropSessionCaches clears orphaned parts without message rows", () => {
+    const store: {
+      session_status: Record<string, SessionStatus | undefined>
+      session_diff: Record<string, FileDiff[] | undefined>
+      todo: Record<string, Todo[] | undefined>
+      message: Record<string, Message[] | undefined>
+      part: Record<string, Part[] | undefined>
+      permission: Record<string, PermissionRequest[] | undefined>
+      question: Record<string, QuestionRequest[] | undefined>
+    } = {
+      session_status: { ses_1: { type: "busy" } as SessionStatus },
+      session_diff: { ses_1: [] },
+      todo: { ses_1: [] as Todo[] },
+      message: {},
+      part: { msg_1: [part("prt_1", "ses_1", "msg_1")] },
+      permission: { ses_1: [] as PermissionRequest[] },
+      question: { ses_1: [] as QuestionRequest[] },
+    }
+
+    dropSessionCaches(store, ["ses_1"])
+
+    expect(store.message.ses_1).toBeUndefined()
+    expect(store.part.msg_1).toBeUndefined()
+    expect(store.todo.ses_1).toBeUndefined()
+    expect(store.session_diff.ses_1).toBeUndefined()
+    expect(store.session_status.ses_1).toBeUndefined()
+    expect(store.permission.ses_1).toBeUndefined()
+    expect(store.question.ses_1).toBeUndefined()
+  })
+
+  test("dropSessionCaches clears message-backed parts", () => {
+    const m = msg("msg_1", "ses_1")
+    const store: {
+      session_status: Record<string, SessionStatus | undefined>
+      session_diff: Record<string, FileDiff[] | undefined>
+      todo: Record<string, Todo[] | undefined>
+      message: Record<string, Message[] | undefined>
+      part: Record<string, Part[] | undefined>
+      permission: Record<string, PermissionRequest[] | undefined>
+      question: Record<string, QuestionRequest[] | undefined>
+    } = {
+      session_status: {},
+      session_diff: {},
+      todo: {},
+      message: { ses_1: [m] },
+      part: { [m.id]: [part("prt_1", "ses_1", m.id)] },
+      permission: {},
+      question: {},
+    }
+
+    dropSessionCaches(store, ["ses_1"])
+
+    expect(store.message.ses_1).toBeUndefined()
+    expect(store.part[m.id]).toBeUndefined()
+  })
+
+  test("pickSessionCacheEvictions preserves requested sessions", () => {
+    const seen = new Set(["ses_1", "ses_2", "ses_3"])
+
+    const stale = pickSessionCacheEvictions({
+      seen,
+      keep: "ses_4",
+      limit: 2,
+      preserve: ["ses_1"],
+    })
+
+    expect(stale).toEqual(["ses_2", "ses_3"])
+    expect([...seen]).toEqual(["ses_1", "ses_4"])
+  })
+})

packages/app/src/context/global-sync/session-cache.ts

@@ -0,0 +1,62 @@
+import type {
+  FileDiff,
+  Message,
+  Part,
+  PermissionRequest,
+  QuestionRequest,
+  SessionStatus,
+  Todo,
+} from "@opencode-ai/sdk/v2/client"
+
+export const SESSION_CACHE_LIMIT = 40
+
+type SessionCache = {
+  session_status: Record<string, SessionStatus | undefined>
+  session_diff: Record<string, FileDiff[] | undefined>
+  todo: Record<string, Todo[] | undefined>
+  message: Record<string, Message[] | undefined>
+  part: Record<string, Part[] | undefined>
+  permission: Record<string, PermissionRequest[] | undefined>
+  question: Record<string, QuestionRequest[] | undefined>
+}
+
+export function dropSessionCaches(store: SessionCache, sessionIDs: Iterable<string>) {
+  const stale = new Set(Array.from(sessionIDs).filter(Boolean))
+  if (stale.size === 0) return
+
+  for (const key of Object.keys(store.part)) {
+    const parts = store.part[key]
+    if (!parts?.some((part) => stale.has(part?.sessionID ?? ""))) continue
+    delete store.part[key]
+  }
+
+  for (const sessionID of stale) {
+    delete store.message[sessionID]
+    delete store.todo[sessionID]
+    delete store.session_diff[sessionID]
+    delete store.session_status[sessionID]
+    delete store.permission[sessionID]
+    delete store.question[sessionID]
+  }
+}
+
+export function pickSessionCacheEvictions(input: {
+  seen: Set<string>
+  keep: string
+  limit: number
+  preserve?: Iterable<string>
+}) {
+  const stale: string[] = []
+  const keep = new Set([input.keep, ...Array.from(input.preserve ?? [])])
+  if (input.seen.has(input.keep)) input.seen.delete(input.keep)
+  input.seen.add(input.keep)
+  for (const id of input.seen) {
+    if (input.seen.size - stale.length <= input.limit) break
+    if (keep.has(id)) continue
+    stale.push(id)
+  }
+  for (const id of stale) {
+    input.seen.delete(id)
+  }
+  return stale
+}

packages/app/src/context/sync.tsx

@@ -6,6 +6,7 @@ import { createSimpleContext } from "@opencode-ai/ui/context"
 import { useGlobalSync } from "./global-sync"
 import { useSDK } from "./sdk"
 import type { Message, Part } from "@opencode-ai/sdk/v2/client"
+import { SESSION_CACHE_LIMIT, dropSessionCaches, pickSessionCacheEvictions } from "./global-sync/session-cache"
 
 function sortParts(parts: Part[]) {
   return parts.filter((part) => !!part?.id).sort((a, b) => cmp(a.id, b.id))
@@ -108,6 +109,8 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
     const inflight = new Map<string, Promise<void>>()
     const inflightDiff = new Map<string, Promise<void>>()
     const inflightTodo = new Map<string, Promise<void>>()
+    const maxDirs = 30
+    const seen = new Map<string, Set<string>>()
     const [meta, setMeta] = createStore({
       limit: {} as Record<string, number>,
       complete: {} as Record<string, boolean>,
@@ -121,6 +124,62 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
       return undefined
     }
 
+    const seenFor = (directory: string) => {
+      const existing = seen.get(directory)
+      if (existing) {
+        seen.delete(directory)
+        seen.set(directory, existing)
+        return existing
+      }
+      const created = new Set<string>()
+      seen.set(directory, created)
+      while (seen.size > maxDirs) {
+        const first = seen.keys().next().value
+        if (!first) break
+        const stale = [...(seen.get(first) ?? [])]
+        seen.delete(first)
+        const [, setStore] = globalSync.child(first, { bootstrap: false })
+        evict(first, setStore, stale)
+      }
+      return created
+    }
+
+    const clearMeta = (directory: string, sessionIDs: string[]) => {
+      if (sessionIDs.length === 0) return
+      setMeta(
+        produce((draft) => {
+          for (const sessionID of sessionIDs) {
+            const key = keyFor(directory, sessionID)
+            delete draft.limit[key]
+            delete draft.complete[key]
+            delete draft.loading[key]
+          }
+        }),
+      )
+    }
+
+    const evict = (directory: string, setStore: Setter, sessionIDs: string[]) => {
+      if (sessionIDs.length === 0) return
+      for (const sessionID of sessionIDs) {
+        globalSync.todo.set(sessionID, undefined)
+      }
+      setStore(
+        produce((draft) => {
+          dropSessionCaches(draft, sessionIDs)
+        }),
+      )
+      clearMeta(directory, sessionIDs)
+    }
+
+    const touch = (directory: string, setStore: Setter, sessionID: string) => {
+      const stale = pickSessionCacheEvictions({
+        seen: seenFor(directory),
+        keep: sessionID,
+        limit: SESSION_CACHE_LIMIT,
+      })
+      evict(directory, setStore, stale)
+    }
+
     const fetchMessages = async (input: { client: typeof sdk.client; sessionID: string; limit: number }) => {
       const messages = await retry(() =>
         input.client.session.messages({ sessionID: input.sessionID, limit: input.limit }),
@@ -135,6 +194,8 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
       }
     }
 
+    const tracked = (directory: string, sessionID: string) => seen.get(directory)?.has(sessionID) ?? false
+
     const loadMessages = async (input: {
       directory: string
       client: typeof sdk.client
@@ -148,6 +209,7 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
       setMeta("loading", key, true)
       await fetchMessages(input)
         .then((next) => {
+          if (!tracked(input.directory, input.sessionID)) return
           batch(() => {
             input.setStore("message", input.sessionID, reconcile(next.session, { key: "id" }))
             for (const p of next.part) {
@@ -158,6 +220,7 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
           })
         })
         .finally(() => {
+          if (!tracked(input.directory, input.sessionID)) return
           setMeta("loading", key, false)
         })
     }
@@ -224,11 +287,16 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
           const key = keyFor(directory, sessionID)
           const hasSession = Binary.search(store.session, sessionID, (s) => s.id).found
 
+          touch(directory, setStore, sessionID)
+
+          if (store.message[sessionID] !== undefined && hasSession && meta.limit[key] !== undefined) return
+
           const limit = meta.limit[key] ?? messagePageSize
 
           const sessionReq = hasSession
             ? Promise.resolve()
             : retry(() => client.session.get({ sessionID })).then((session) => {
+                if (!tracked(directory, sessionID)) return
                 const data = session.data
                 if (!data) return
                 setStore(
@@ -258,11 +326,13 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
           const directory = sdk.directory
           const client = sdk.client
           const [store, setStore] = globalSync.child(directory)
+          touch(directory, setStore, sessionID)
           if (store.session_diff[sessionID] !== undefined) return
 
           const key = keyFor(directory, sessionID)
           return runInflight(inflightDiff, key, () =>
             retry(() => client.session.diff({ sessionID })).then((diff) => {
+              if (!tracked(directory, sessionID)) return
               setStore("session_diff", sessionID, reconcile(diff.data ?? [], { key: "file" }))
             }),
           )
@@ -271,6 +341,7 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
           const directory = sdk.directory
           const client = sdk.client
           const [store, setStore] = globalSync.child(directory)
+          touch(directory, setStore, sessionID)
           const existing = store.todo[sessionID]
           const cached = globalSync.data.session_todo[sessionID]
           if (existing !== undefined) {
@@ -287,6 +358,7 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
           const key = keyFor(directory, sessionID)
           return runInflight(inflightTodo, key, () =>
             retry(() => client.session.todo({ sessionID })).then((todo) => {
+              if (!tracked(directory, sessionID)) return
               const list = todo.data ?? []
               setStore("todo", sessionID, reconcile(list, { key: "id" }))
               globalSync.todo.set(sessionID, list)
@@ -310,6 +382,7 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
             const directory = sdk.directory
             const client = sdk.client
             const [, setStore] = globalSync.child(directory)
+            touch(directory, setStore, sessionID)
             const key = keyFor(directory, sessionID)
             const step = count ?? messagePageSize
             if (meta.loading[key]) return
@@ -325,6 +398,11 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
             })
           },
         },
+        evict(sessionID: string, directory = sdk.directory) {
+          const [, setStore] = globalSync.child(directory)
+          seenFor(directory).delete(sessionID)
+          evict(directory, setStore, [sessionID])
+        },
         fetch: async (count = 10) => {
           const directory = sdk.directory
           const client = sdk.client

packages/app/src/context/terminal.tsx

@@ -1,6 +1,6 @@
 import { createStore, produce } from "solid-js/store"
 import { createSimpleContext } from "@opencode-ai/ui/context"
-import { batch, createEffect, createMemo, createRoot, onCleanup } from "solid-js"
+import { batch, createEffect, createMemo, createRoot, on, onCleanup } from "solid-js"
 import { useParams } from "@solidjs/router"
 import { useSDK } from "./sdk"
 import type { Platform } from "./platform"
@@ -38,6 +38,16 @@ type TerminalCacheEntry = {
 
 const caches = new Set<Map<string, TerminalCacheEntry>>()
 
+const trimTerminal = (pty: LocalPTY) => {
+  if (!pty.buffer && pty.cursor === undefined && pty.scrollY === undefined) return pty
+  return {
+    ...pty,
+    buffer: undefined,
+    cursor: undefined,
+    scrollY: undefined,
+  }
+}
+
 export function clearWorkspaceTerminals(dir: string, sessionIDs?: string[], platform?: Platform) {
   const key = getWorkspaceTerminalCacheKey(dir)
   for (const cache of caches) {
@@ -188,6 +198,18 @@ function createWorkspaceTerminalSession(sdk: ReturnType<typeof useSDK>, dir: str
           console.error("Failed to update terminal", error)
         })
     },
+    trim(id: string) {
+      const index = store.all.findIndex((x) => x.id === id)
+      if (index === -1) return
+      setStore("all", index, (pty) => trimTerminal(pty))
+    },
+    trimAll() {
+      setStore("all", (all) => {
+        const next = all.map(trimTerminal)
+        if (next.every((pty, index) => pty === all[index])) return all
+        return next
+      })
+    },
     async clone(id: string) {
       const index = store.all.findIndex((x) => x.id === id)
       const pty = store.all[index]
@@ -322,12 +344,27 @@ export const { use: useTerminal, provider: TerminalProvider } = createSimpleCont
 
     const workspace = createMemo(() => loadWorkspace(params.dir!, params.id))
 
+    createEffect(
+      on(
+        () => ({ dir: params.dir, id: params.id }),
+        (next, prev) => {
+          if (!prev?.dir) return
+          if (next.dir === prev.dir && next.id === prev.id) return
+          if (next.dir === prev.dir && next.id) return
+          loadWorkspace(prev.dir, prev.id).trimAll()
+        },
+        { defer: true },
+      ),
+    )
+
     return {
       ready: () => workspace().ready(),
       all: () => workspace().all(),
       active: () => workspace().active(),
       new: () => workspace().new(),
       update: (pty: Partial<LocalPTY> & { id: string }) => workspace().update(pty),
+      trim: (id: string) => workspace().trim(id),
+      trimAll: () => workspace().trimAll(),
       clone: (id: string) => workspace().clone(id),
       open: (id: string) => workspace().open(id),
       close: (id: string) => workspace().close(id),

packages/app/src/pages/layout.tsx

@@ -34,6 +34,7 @@ import { useProviders } from "@/hooks/use-providers"
 import { showToast, Toast, toaster } from "@opencode-ai/ui/toast"
 import { useGlobalSDK } from "@/context/global-sdk"
 import { clearWorkspaceTerminals } from "@/context/terminal"
+import { dropSessionCaches, pickSessionCacheEvictions } from "@/context/global-sync/session-cache"
 import { useNotification } from "@/context/notification"
 import { usePermission } from "@/context/permission"
 import { Binary } from "@opencode-ai/util/binary"
@@ -423,6 +424,17 @@ export default function Layout(props: ParentProps) {
           return
         }
 
+        if (
+          e.details?.type === "question.replied" ||
+          e.details?.type === "question.rejected" ||
+          e.details?.type === "permission.replied"
+        ) {
+          const props = e.details.properties as { sessionID: string }
+          const sessionKey = `${e.name}:${props.sessionID}`
+          dismissSessionAlert(sessionKey)
+          return
+        }
+
         if (e.details?.type !== "permission.asked" && e.details?.type !== "question.asked") return
         const title =
           e.details.type === "permission.asked"
@@ -657,25 +669,24 @@ export default function Layout(props: ParentProps) {
   const prefetchQueues = new Map<string, PrefetchQueue>()
 
   const PREFETCH_MAX_SESSIONS_PER_DIR = 10
-  const prefetchedByDir = new Map<string, Map<string, true>>()
+  const prefetchedByDir = new Map<string, Set<string>>()
 
   const lruFor = (directory: string) => {
     const existing = prefetchedByDir.get(directory)
     if (existing) return existing
-    const created = new Map<string, true>()
+    const created = new Set<string>()
     prefetchedByDir.set(directory, created)
     return created
   }
 
   const markPrefetched = (directory: string, sessionID: string) => {
     const lru = lruFor(directory)
-    if (lru.has(sessionID)) lru.delete(sessionID)
-    lru.set(sessionID, true)
-    while (lru.size > PREFETCH_MAX_SESSIONS_PER_DIR) {
-      const oldest = lru.keys().next().value as string | undefined
-      if (!oldest) return
-      lru.delete(oldest)
-    }
+    return pickSessionCacheEvictions({
+      seen: lru,
+      keep: sessionID,
+      limit: PREFETCH_MAX_SESSIONS_PER_DIR,
+      preserve: directory === params.dir && params.id ? [params.id] : undefined,
+    })
   }
 
   createEffect(() => {
@@ -724,6 +735,7 @@ export default function Layout(props: ParentProps) {
     return retry(() => globalSDK.client.session.messages({ directory, sessionID, limit: prefetchChunk }))
       .then((messages) => {
         if (prefetchToken.value !== token) return
+        if (!lruFor(directory).has(sessionID)) return
 
         const items = (messages.data ?? []).filter((x) => !!x?.info?.id)
         const next = items.map((x) => x.info).filter((m): m is Message => !!m?.id)
@@ -787,7 +799,18 @@ export default function Layout(props: ParentProps) {
     const lru = lruFor(directory)
     const known = lru.has(session.id)
     if (!known && lru.size >= PREFETCH_MAX_SESSIONS_PER_DIR && priority !== "high") return
-    markPrefetched(directory, session.id)
+    const stale = markPrefetched(directory, session.id)
+    if (stale.length > 0) {
+      const [, setStore] = globalSync.child(directory, { bootstrap: false })
+      for (const id of stale) {
+        globalSync.todo.set(id, undefined)
+      }
+      setStore(
+        produce((draft) => {
+          dropSessionCaches(draft, stale)
+        }),
+      )
+    }
 
     if (priority === "high") q.pending.unshift(session.id)
     if (priority !== "high") q.pending.push(session.id)
@@ -1879,6 +1902,7 @@ export default function Layout(props: ParentProps) {
 
   const SidebarPanel = (panelProps: { project: LocalProject | undefined; mobile?: boolean; merged?: boolean }) => {
     const merged = createMemo(() => panelProps.mobile || (panelProps.merged ?? layout.sidebar.opened()))
+    const hover = createMemo(() => !panelProps.mobile && panelProps.merged === false && !layout.sidebar.opened())
     const projectName = createMemo(() => {
       const project = panelProps.project
       if (!project) return ""
@@ -1904,11 +1928,11 @@ export default function Layout(props: ParentProps) {
     return (
       <div
         classList={{
-          "flex flex-col min-h-0 min-w-0 rounded-tl-[12px] px-2": true,
+          "flex flex-col min-h-0 min-w-0 box-border rounded-tl-[12px] px-2": true,
           "border border-b-0 border-border-weak-base": !merged(),
           "border-l border-t border-border-weaker-base": merged(),
-          "bg-background-base": merged(),
-          "bg-background-stronger": !merged(),
+          "bg-background-base": merged() || hover(),
+          "bg-background-stronger": !merged() && !hover(),
           "flex-1 min-w-0": panelProps.mobile,
           "max-w-full overflow-hidden": panelProps.mobile,
         }}

packages/app/src/pages/layout/sidebar-project.tsx

@@ -91,6 +91,7 @@ const ProjectTile = (props: {
       modal={!props.sidebarHovering()}
       onOpenChange={(value) => {
         props.setMenu(value)
+        props.setSuppressHover(value)
         if (value) props.setOpen(false)
       }}
     >
@@ -107,6 +108,12 @@ const ProjectTile = (props: {
             !props.selected() && !props.active(),
           "bg-surface-base-hover border border-border-weak-base": !props.selected() && props.active(),
         }}
+        onPointerDown={(event) => {
+          if (!props.overlay()) return
+          if (event.button !== 2 && !(event.button === 0 && event.ctrlKey)) return
+          props.setSuppressHover(true)
+          event.preventDefault()
+        }}
         onMouseEnter={(event: MouseEvent) => {
           if (!props.overlay()) return
           if (props.suppressHover()) return

packages/app/src/pages/session.tsx

@@ -37,7 +37,6 @@ import { createOpenReviewFile, createSizing } from "@/pages/session/helpers"
 import { MessageTimeline } from "@/pages/session/message-timeline"
 import { type DiffStyle, SessionReviewTab, type SessionReviewTabProps } from "@/pages/session/review-tab"
 import { resetSessionModel, syncSessionModel } from "@/pages/session/session-model-helpers"
-import { createScrollSpy } from "@/pages/session/scroll-spy"
 import { SessionMobileTabs } from "@/pages/session/session-mobile-tabs"
 import { SessionSidePanel } from "@/pages/session/session-side-panel"
 import { TerminalPanel } from "@/pages/session/terminal-panel"
@@ -122,9 +121,13 @@ function createSessionHistoryWindow(input: SessionHistoryWindowInput) {
       return
     }
     const beforeTop = el.scrollTop
+    const beforeHeight = el.scrollHeight
     fn()
-    void el.scrollHeight
-    el.scrollTop = beforeTop
+    requestAnimationFrame(() => {
+      const delta = el.scrollHeight - beforeHeight
+      if (!delta) return
+      el.scrollTop = beforeTop + delta
+    })
   }
 
   const backfillTurns = () => {
@@ -207,7 +210,7 @@ function createSessionHistoryWindow(input: SessionHistoryWindowInput) {
     if (!input.userScrolled()) return
     const el = input.scroller()
     if (!el) return
-    if (el.scrollHeight - el.clientHeight + el.scrollTop >= turnScrollThreshold) return
+    if (el.scrollTop >= turnScrollThreshold) return
 
     const start = turnStart()
     if (start > 0) {
@@ -281,6 +284,7 @@ export default function Page() {
   const [ui, setUi] = createStore({
     git: false,
     pendingMessage: undefined as string | undefined,
+    reviewSnap: false,
     scrollGesture: 0,
     scroll: {
       overflow: false,
@@ -426,10 +430,12 @@ export default function Page() {
 
   createEffect(
     on(
-      () => params.id,
-      (id, prev) => {
-        if (id || !prev) return
-        resetSessionModel(local)
+      () => ({ dir: params.dir, id: params.id }),
+      (next, prev) => {
+        if (!prev) return
+        if (next.dir === prev.dir && next.id === prev.id) return
+        if (prev.id) sync.session.evict(prev.id, prev.dir)
+        if (!next.id) resetSessionModel(local)
       },
       { defer: true },
     ),
@@ -454,6 +460,21 @@ export default function Page() {
     return key
   }, sessionKey())
 
+  let reviewFrame: number | undefined
+
+  createComputed((prev) => {
+    const open = desktopReviewOpen()
+    if (prev === undefined || prev === open) return open
+
+    if (reviewFrame !== undefined) cancelAnimationFrame(reviewFrame)
+    setUi("reviewSnap", true)
+    reviewFrame = requestAnimationFrame(() => {
+      reviewFrame = undefined
+      setUi("reviewSnap", false)
+    })
+    return open
+  }, desktopReviewOpen())
+
   const turnDiffs = createMemo(() => lastUserMessage()?.summary?.diffs ?? [])
   const reviewDiffs = createMemo(() => (store.changes === "session" ? diffs() : turnDiffs()))
 
@@ -464,20 +485,49 @@ export default function Page() {
     return "main"
   })
 
-  const activeMessage = createMemo(() => {
-    if (!store.messageId) return lastUserMessage()
-    const found = visibleUserMessages()?.find((m) => m.id === store.messageId)
-    return found ?? lastUserMessage()
-  })
   const setActiveMessage = (message: UserMessage | undefined) => {
+    messageMark = scrollMark
     setStore("messageId", message?.id)
   }
 
+  const anchor = (id: string) => `message-${id}`
+
+  const cursor = () => {
+    const root = scroller
+    if (!root) return store.messageId
+
+    const box = root.getBoundingClientRect()
+    const line = box.top + 100
+    const list = [...root.querySelectorAll<HTMLElement>("[data-message-id]")]
+      .map((el) => {
+        const id = el.dataset.messageId
+        if (!id) return
+
+        const rect = el.getBoundingClientRect()
+        return { id, top: rect.top, bottom: rect.bottom }
+      })
+      .filter((item): item is { id: string; top: number; bottom: number } => !!item)
+
+    const shown = list.filter((item) => item.bottom > box.top && item.top < box.bottom)
+    const hit = shown.find((item) => item.top <= line && item.bottom >= line)
+    if (hit) return hit.id
+
+    const near = [...shown].sort((a, b) => {
+      const da = Math.abs(a.top - line)
+      const db = Math.abs(b.top - line)
+      if (da !== db) return da - db
+      return a.top - b.top
+    })[0]
+    if (near) return near.id
+
+    return list.filter((item) => item.top <= line).at(-1)?.id ?? list[0]?.id ?? store.messageId
+  }
+
   function navigateMessageByOffset(offset: number) {
     const msgs = visibleUserMessages()
     if (msgs.length === 0) return
 
-    const current = store.messageId
+    const current = store.messageId && messageMark === scrollMark ? store.messageId : cursor()
     const base = current ? msgs.findIndex((m) => m.id === current) : msgs.length
     const currentIndex = base === -1 ? msgs.length : base
     const targetIndex = currentIndex + offset
@@ -550,6 +600,8 @@ export default function Page() {
   let dockHeight = 0
   let scroller: HTMLDivElement | undefined
   let content: HTMLDivElement | undefined
+  let scrollMark = 0
+  let messageMark = 0
 
   const scrollGestureWindowMs = 250
 
@@ -594,6 +646,7 @@ export default function Page() {
       () => {
         setStore("messageId", undefined)
         setStore("changes", "session")
+        setUi("pendingMessage", undefined)
       },
       { defer: true },
     ),
@@ -1088,17 +1141,11 @@ export default function Page() {
 
   let scrollStateFrame: number | undefined
   let scrollStateTarget: HTMLDivElement | undefined
-  const scrollSpy = createScrollSpy({
-    onActive: (id) => {
-      if (id === store.messageId) return
-      setStore("messageId", id)
-    },
-  })
 
   const updateScrollState = (el: HTMLDivElement) => {
     const max = el.scrollHeight - el.clientHeight
     const overflow = max > 1
-    const bottom = !overflow || Math.abs(el.scrollTop) <= 2 || !autoScroll.userScrolled()
+    const bottom = !overflow || el.scrollTop >= max - 2
 
     if (ui.scroll.overflow === overflow && ui.scroll.bottom === bottom) return
     setUi("scroll", { overflow, bottom })
@@ -1121,7 +1168,7 @@ export default function Page() {
 
   const resumeScroll = () => {
     setStore("messageId", undefined)
-    autoScroll.smoothScrollToBottom()
+    autoScroll.forceScrollToBottom()
     clearMessageHash()
 
     const el = scroller
@@ -1141,31 +1188,21 @@ export default function Page() {
     ),
   )
 
-  createEffect(
-    on(
-      sessionKey,
-      () => {
-        scrollSpy.clear()
-      },
-      { defer: true },
-    ),
-  )
-
-  const anchor = (id: string) => `message-${id}`
-
   const setScrollRef = (el: HTMLDivElement | undefined) => {
     scroller = el
     autoScroll.scrollRef(el)
-    scrollSpy.setContainer(el)
     if (el) scheduleScrollState(el)
   }
 
+  const markUserScroll = () => {
+    scrollMark += 1
+  }
+
   createResizeObserver(
     () => content,
     () => {
       const el = scroller
       if (el) scheduleScrollState(el)
-      scrollSpy.markDirty()
     },
   )
 
@@ -1189,14 +1226,15 @@ export default function Page() {
 
       const el = scroller
       const delta = next - dockHeight
-      const stick = el ? Math.abs(el.scrollTop) < 10 + Math.max(0, delta) : false
+      const stick = el
+        ? !autoScroll.userScrolled() || el.scrollHeight - el.clientHeight - el.scrollTop < 10 + Math.max(0, delta)
+        : false
 
       dockHeight = next
 
-      if (stick) autoScroll.smoothScrollToBottom()
+      if (stick) autoScroll.forceScrollToBottom()
 
       if (el) scheduleScrollState(el)
-      scrollSpy.markDirty()
     },
   )
 
@@ -1224,7 +1262,7 @@ export default function Page() {
 
   onCleanup(() => {
     document.removeEventListener("keydown", handleKeyDown)
-    scrollSpy.destroy()
+    if (reviewFrame !== undefined) cancelAnimationFrame(reviewFrame)
     if (scrollStateFrame !== undefined) cancelAnimationFrame(scrollStateFrame)
   })
 
@@ -1246,7 +1284,7 @@ export default function Page() {
           classList={{
             "@container relative shrink-0 flex flex-col min-h-0 h-full bg-background-stronger flex-1 md:flex-none": true,
             "transition-[width] duration-[240ms] ease-[cubic-bezier(0.22,1,0.36,1)] will-change-[width] motion-reduce:transition-none":
-              !size.active(),
+              !size.active() && !ui.reviewSnap,
           }}
           style={{
             width: sessionPanelWidth(),
@@ -1255,7 +1293,7 @@ export default function Page() {
           <div class="flex-1 min-h-0 overflow-hidden">
             <Switch>
               <Match when={params.id}>
-                <Show when={activeMessage()}>
+                <Show when={lastUserMessage()}>
                   <MessageTimeline
                     mobileChanges={mobileChanges()}
                     mobileFallback={reviewContent({
@@ -1275,11 +1313,9 @@ export default function Page() {
                     onAutoScrollHandleScroll={autoScroll.handleScroll}
                     onMarkScrollGesture={markScrollGesture}
                     hasScrollGesture={hasScrollGesture}
-                    isDesktop={isDesktop()}
-                    onScrollSpyScroll={scrollSpy.onScroll}
+                    onUserScroll={markUserScroll}
                     onTurnBackfillScroll={historyWindow.onScrollerScroll}
                     onAutoScrollInteraction={autoScroll.handleInteraction}
-                    onPreserveScrollAnchor={autoScroll.preserve}
                     centered={centered()}
                     setContentRef={(el) => {
                       content = el
@@ -1296,8 +1332,6 @@ export default function Page() {
                     }}
                     renderedUserMessages={historyWindow.renderedUserMessages()}
                     anchor={anchor}
-                    onRegisterMessage={scrollSpy.register}
-                    onUnregisterMessage={scrollSpy.unregister}
                   />
                 </Show>
               </Match>
@@ -1362,6 +1396,7 @@ export default function Page() {
           reviewPanel={reviewPanel}
           activeDiff={tree.activeDiff}
           focusReviewDiff={focusReviewDiff}
+          reviewSnap={ui.reviewSnap}
           size={size}
         />
       </div>

packages/app/src/pages/session/composer/session-composer-region.tsx

@@ -140,7 +140,7 @@ export function SessionComposerRegion(props: {
       <div
         classList={{
           "w-full px-3 pointer-events-auto": true,
-          "md:max-w-[500px] md:mx-auto 2xl:max-w-[700px]": props.centered,
+          "md:max-w-200 md:mx-auto 2xl:max-w-[1000px]": props.centered,
         }}
       >
         <Show when={props.state.questionRequest()} keyed>

packages/app/src/pages/session/file-tabs.tsx

@@ -446,9 +446,9 @@ export function FileTabContent(props: { tab: string }) {
   )
 
   return (
-    <Tabs.Content value={props.tab} class="mt-3 relative flex h-full min-h-0 flex-col overflow-hidden contain-strict">
+    <Tabs.Content value={props.tab} class="mt-3 relative h-full">
       <ScrollView
-        class="h-full min-h-0 flex-1"
+        class="h-full"
         viewportRef={(el: HTMLDivElement) => {
           scroll = el
           restoreScroll()

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

@@ -1,31 +1,28 @@
-import {
-  For,
-  Index,
-  createEffect,
-  createMemo,
-  createSignal,
-  on,
-  onCleanup,
-  Show,
-  startTransition,
-  type JSX,
-} from "solid-js"
-import { createStore } from "solid-js/store"
-import { useParams } from "@solidjs/router"
+import { For, createEffect, createMemo, on, onCleanup, Show, Index, type JSX } from "solid-js"
+import { createStore, produce } from "solid-js/store"
+import { useNavigate, useParams } from "@solidjs/router"
 import { Button } from "@opencode-ai/ui/button"
 import { FileIcon } from "@opencode-ai/ui/file-icon"
 import { Icon } from "@opencode-ai/ui/icon"
+import { IconButton } from "@opencode-ai/ui/icon-button"
+import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
+import { Dialog } from "@opencode-ai/ui/dialog"
+import { InlineInput } from "@opencode-ai/ui/inline-input"
+import { Spinner } from "@opencode-ai/ui/spinner"
 import { SessionTurn } from "@opencode-ai/ui/session-turn"
 import { ScrollView } from "@opencode-ai/ui/scroll-view"
 import type { AssistantMessage, Message as MessageType, Part, TextPart, UserMessage } from "@opencode-ai/sdk/v2"
+import { showToast } from "@opencode-ai/ui/toast"
 import { Binary } from "@opencode-ai/util/binary"
 import { getFilename } from "@opencode-ai/util/path"
 import { shouldMarkBoundaryGesture, normalizeWheelDelta } from "@/pages/session/message-gesture"
+import { SessionContextUsage } from "@/components/session-context-usage"
+import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { useLanguage } from "@/context/language"
 import { useSettings } from "@/context/settings"
+import { useSDK } from "@/context/sdk"
 import { useSync } from "@/context/sync"
 import { parseCommentNote, readCommentMetadata } from "@/utils/comment-note"
-import { SessionTimelineHeader } from "@/pages/session/session-timeline-header"
 
 type MessageComment = {
   path: string
@@ -37,9 +34,7 @@ type MessageComment = {
 }
 
 const emptyMessages: MessageType[] = []
-
-const isDefaultSessionTitle = (title?: string) =>
-  !!title && /^(New session - |Child session - )\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z$/.test(title)
+const idle = { type: "idle" as const }
 
 const messageComments = (parts: Part[]): MessageComment[] =>
   parts.flatMap((part) => {
@@ -116,8 +111,6 @@ function createTimelineStaging(input: TimelineStageInput) {
     completedSession: "",
     count: 0,
   })
-  const [readySession, setReadySession] = createSignal("")
-  let active = ""
 
   const stagedCount = createMemo(() => {
     const total = input.messages().length
@@ -142,46 +135,23 @@ function createTimelineStaging(input: TimelineStageInput) {
     cancelAnimationFrame(frame)
     frame = undefined
   }
-  const scheduleReady = (sessionKey: string) => {
-    if (input.sessionKey() !== sessionKey) return
-    if (readySession() === sessionKey) return
-    setReadySession(sessionKey)
-  }
 
   createEffect(
     on(
       () => [input.sessionKey(), input.turnStart() > 0, input.messages().length] as const,
       ([sessionKey, isWindowed, total]) => {
-        const switched = active !== sessionKey
-        if (switched) {
-          active = sessionKey
-          setReadySession("")
-        }
-
-        const staging = state.activeSession === sessionKey && state.completedSession !== sessionKey
-        const shouldStage = isWindowed && total > input.config.init && state.completedSession !== sessionKey
-
-        if (staging && !switched && shouldStage && frame !== undefined) return
-
         cancel()
-
-        if (shouldStage) setReadySession("")
+        const shouldStage =
+          isWindowed &&
+          total > input.config.init &&
+          state.completedSession !== sessionKey &&
+          state.activeSession !== sessionKey
         if (!shouldStage) {
-          setState({
-            activeSession: "",
-            completedSession: isWindowed ? sessionKey : state.completedSession,
-            count: total,
-          })
-          if (total <= 0) {
-            setReadySession("")
-            return
-          }
-          if (readySession() !== sessionKey) scheduleReady(sessionKey)
+          setState({ activeSession: "", count: total })
           return
         }
 
         let count = Math.min(total, input.config.init)
-        if (staging) count = Math.min(total, Math.max(count, state.count))
         setState({ activeSession: sessionKey, count })
 
         const step = () => {
@@ -191,11 +161,10 @@ function createTimelineStaging(input: TimelineStageInput) {
           }
           const currentTotal = input.messages().length
           count = Math.min(currentTotal, count + input.config.batch)
-          startTransition(() => setState("count", count))
+          setState("count", count)
           if (count >= currentTotal) {
             setState({ completedSession: sessionKey, activeSession: "" })
             frame = undefined
-            scheduleReady(sessionKey)
             return
           }
           frame = requestAnimationFrame(step)
@@ -209,12 +178,9 @@ function createTimelineStaging(input: TimelineStageInput) {
     const key = input.sessionKey()
     return state.activeSession === key && state.completedSession !== key
   })
-  const ready = createMemo(() => readySession() === input.sessionKey())
 
-  onCleanup(() => {
-    cancel()
-  })
-  return { messages: stagedUserMessages, isStaging, ready }
+  onCleanup(cancel)
+  return { messages: stagedUserMessages, isStaging }
 }
 
 export function MessageTimeline(props: {
@@ -227,11 +193,9 @@ export function MessageTimeline(props: {
   onAutoScrollHandleScroll: () => void
   onMarkScrollGesture: (target?: EventTarget | null) => void
   hasScrollGesture: () => boolean
-  isDesktop: boolean
-  onScrollSpyScroll: () => void
+  onUserScroll: () => void
   onTurnBackfillScroll: () => void
   onAutoScrollInteraction: (event: MouseEvent) => void
-  onPreserveScrollAnchor: (target: HTMLElement) => void
   centered: boolean
   setContentRef: (el: HTMLDivElement) => void
   turnStart: number
@@ -240,25 +204,18 @@ export function MessageTimeline(props: {
   onLoadEarlier: () => void
   renderedUserMessages: UserMessage[]
   anchor: (id: string) => string
-  onRegisterMessage: (el: HTMLDivElement, id: string) => void
-  onUnregisterMessage: (id: string) => void
 }) {
   let touchGesture: number | undefined
 
   const params = useParams()
+  const navigate = useNavigate()
+  const sdk = useSDK()
   const sync = useSync()
   const settings = useSettings()
+  const dialog = useDialog()
   const language = useLanguage()
 
-  const trigger = (target: EventTarget | null) => {
-    const next =
-      target instanceof Element
-        ? target.closest('[data-slot="collapsible-trigger"], [data-slot="accordion-trigger"], [data-scroll-preserve]')
-        : undefined
-    if (!(next instanceof HTMLElement)) return
-    return next
-  }
-
+  const rendered = createMemo(() => props.renderedUserMessages.map((message) => message.id))
   const sessionKey = createMemo(() => `${params.dir}${params.id ? "/" + params.id : ""}`)
   const sessionID = createMemo(() => params.id)
   const sessionMessages = createMemo(() => {
@@ -271,20 +228,62 @@ export function MessageTimeline(props: {
       (item): item is AssistantMessage => item.role === "assistant" && typeof item.time.completed !== "number",
     ),
   )
-  const sessionStatus = createMemo(() => sync.data.session_status[sessionID() ?? ""]?.type ?? "idle")
+  const sessionStatus = createMemo(() => {
+    const id = sessionID()
+    if (!id) return idle
+    return sync.data.session_status[id] ?? idle
+  })
+  const working = createMemo(() => !!pending() || sessionStatus().type !== "idle")
+
+  const [slot, setSlot] = createStore({
+    open: false,
+    show: false,
+    fade: false,
+  })
+
+  let f: number | undefined
+  const clear = () => {
+    if (f !== undefined) window.clearTimeout(f)
+    f = undefined
+  }
+
+  onCleanup(clear)
+  createEffect(
+    on(
+      working,
+      (on, prev) => {
+        clear()
+        if (on) {
+          setSlot({ open: true, show: true, fade: false })
+          return
+        }
+        if (prev) {
+          setSlot({ open: false, show: true, fade: true })
+          f = window.setTimeout(() => setSlot({ show: false, fade: false }), 260)
+          return
+        }
+        setSlot({ open: false, show: false, fade: false })
+      },
+      { defer: true },
+    ),
+  )
   const activeMessageID = createMemo(() => {
-    const messages = sessionMessages()
-    const message = pending()
-    if (message?.parentID) {
-      const result = Binary.search(messages, message.parentID, (item) => item.id)
-      const parent = result.found ? messages[result.index] : messages.find((item) => item.id === message.parentID)
-      if (parent?.role === "user") return parent.id
+    const parentID = pending()?.parentID
+    if (parentID) {
+      const messages = sessionMessages()
+      const result = Binary.search(messages, parentID, (message) => message.id)
+      const message = result.found ? messages[result.index] : messages.find((item) => item.id === parentID)
+      if (message && message.role === "user") return message.id
     }
 
-    if (sessionStatus() === "idle") return undefined
-    for (let i = messages.length - 1; i >= 0; i--) {
-      if (messages[i].role === "user") return messages[i].id
+    const status = sessionStatus()
+    if (status.type !== "idle") {
+      const messages = sessionMessages()
+      for (let i = messages.length - 1; i >= 0; i--) {
+        if (messages[i].role === "user") return messages[i].id
+      }
     }
+
     return undefined
   })
   const info = createMemo(() => {
@@ -292,19 +291,9 @@ export function MessageTimeline(props: {
     if (!id) return
     return sync.session.get(id)
   })
-  const titleValue = createMemo(() => {
-    const title = info()?.title
-    if (!title) return
-    if (isDefaultSessionTitle(title)) return language.t("command.session.new")
-    return title
-  })
-  const defaultTitle = createMemo(() => isDefaultSessionTitle(info()?.title))
-  const headerTitle = createMemo(
-    () => titleValue() ?? (props.renderedUserMessages.length ? language.t("command.session.new") : undefined),
-  )
-  const placeholderTitle = createMemo(() => defaultTitle() || (!info()?.title && props.renderedUserMessages.length > 0))
+  const titleValue = createMemo(() => info()?.title)
   const parentID = createMemo(() => info()?.parentID)
-  const showHeader = createMemo(() => !!(headerTitle() || parentID()))
+  const showHeader = createMemo(() => !!(titleValue() || parentID()))
   const stageCfg = { init: 1, batch: 3 }
   const staging = createTimelineStaging({
     sessionKey,
@@ -312,7 +301,212 @@ export function MessageTimeline(props: {
     messages: () => props.renderedUserMessages,
     config: stageCfg,
   })
-  const rendered = createMemo(() => staging.messages().map((message) => message.id))
+
+  const [title, setTitle] = createStore({
+    draft: "",
+    editing: false,
+    saving: false,
+    menuOpen: false,
+    pendingRename: false,
+  })
+  let titleRef: HTMLInputElement | undefined
+
+  const errorMessage = (err: unknown) => {
+    if (err && typeof err === "object" && "data" in err) {
+      const data = (err as { data?: { message?: string } }).data
+      if (data?.message) return data.message
+    }
+    if (err instanceof Error) return err.message
+    return language.t("common.requestFailed")
+  }
+
+  createEffect(
+    on(
+      sessionKey,
+      () => setTitle({ draft: "", editing: false, saving: false, menuOpen: false, pendingRename: false }),
+      { defer: true },
+    ),
+  )
+
+  const openTitleEditor = () => {
+    if (!sessionID()) return
+    setTitle({ editing: true, draft: titleValue() ?? "" })
+    requestAnimationFrame(() => {
+      titleRef?.focus()
+      titleRef?.select()
+    })
+  }
+
+  const closeTitleEditor = () => {
+    if (title.saving) return
+    setTitle({ editing: false, saving: false })
+  }
+
+  const saveTitleEditor = async () => {
+    const id = sessionID()
+    if (!id) return
+    if (title.saving) return
+
+    const next = title.draft.trim()
+    if (!next || next === (titleValue() ?? "")) {
+      setTitle({ editing: false, saving: false })
+      return
+    }
+
+    setTitle("saving", true)
+    await sdk.client.session
+      .update({ sessionID: id, title: next })
+      .then(() => {
+        sync.set(
+          produce((draft) => {
+            const index = draft.session.findIndex((s) => s.id === id)
+            if (index !== -1) draft.session[index].title = next
+          }),
+        )
+        setTitle({ editing: false, saving: false })
+      })
+      .catch((err) => {
+        setTitle("saving", false)
+        showToast({
+          title: language.t("common.requestFailed"),
+          description: errorMessage(err),
+        })
+      })
+  }
+
+  const navigateAfterSessionRemoval = (sessionID: string, parentID?: string, nextSessionID?: string) => {
+    if (params.id !== sessionID) return
+    if (parentID) {
+      navigate(`/${params.dir}/session/${parentID}`)
+      return
+    }
+    if (nextSessionID) {
+      navigate(`/${params.dir}/session/${nextSessionID}`)
+      return
+    }
+    navigate(`/${params.dir}/session`)
+  }
+
+  const archiveSession = async (sessionID: string) => {
+    const session = sync.session.get(sessionID)
+    if (!session) return
+
+    const sessions = sync.data.session ?? []
+    const index = sessions.findIndex((s) => s.id === sessionID)
+    const nextSession = index === -1 ? undefined : (sessions[index + 1] ?? sessions[index - 1])
+
+    await sdk.client.session
+      .update({ sessionID, time: { archived: Date.now() } })
+      .then(() => {
+        sync.set(
+          produce((draft) => {
+            const index = draft.session.findIndex((s) => s.id === sessionID)
+            if (index !== -1) draft.session.splice(index, 1)
+          }),
+        )
+        navigateAfterSessionRemoval(sessionID, session.parentID, nextSession?.id)
+      })
+      .catch((err) => {
+        showToast({
+          title: language.t("common.requestFailed"),
+          description: errorMessage(err),
+        })
+      })
+  }
+
+  const deleteSession = async (sessionID: string) => {
+    const session = sync.session.get(sessionID)
+    if (!session) return false
+
+    const sessions = (sync.data.session ?? []).filter((s) => !s.parentID && !s.time?.archived)
+    const index = sessions.findIndex((s) => s.id === sessionID)
+    const nextSession = index === -1 ? undefined : (sessions[index + 1] ?? sessions[index - 1])
+
+    const result = await sdk.client.session
+      .delete({ sessionID })
+      .then((x) => x.data)
+      .catch((err) => {
+        showToast({
+          title: language.t("session.delete.failed.title"),
+          description: errorMessage(err),
+        })
+        return false
+      })
+
+    if (!result) return false
+
+    sync.set(
+      produce((draft) => {
+        const removed = new Set<string>([sessionID])
+
+        const byParent = new Map<string, string[]>()
+        for (const item of draft.session) {
+          const parentID = item.parentID
+          if (!parentID) continue
+          const existing = byParent.get(parentID)
+          if (existing) {
+            existing.push(item.id)
+            continue
+          }
+          byParent.set(parentID, [item.id])
+        }
+
+        const stack = [sessionID]
+        while (stack.length) {
+          const parentID = stack.pop()
+          if (!parentID) continue
+
+          const children = byParent.get(parentID)
+          if (!children) continue
+
+          for (const child of children) {
+            if (removed.has(child)) continue
+            removed.add(child)
+            stack.push(child)
+          }
+        }
+
+        draft.session = draft.session.filter((s) => !removed.has(s.id))
+      }),
+    )
+
+    navigateAfterSessionRemoval(sessionID, session.parentID, nextSession?.id)
+    return true
+  }
+
+  const navigateParent = () => {
+    const id = parentID()
+    if (!id) return
+    navigate(`/${params.dir}/session/${id}`)
+  }
+
+  function DialogDeleteSession(props: { sessionID: string }) {
+    const name = createMemo(() => sync.session.get(props.sessionID)?.title ?? language.t("command.session.new"))
+    const handleDelete = async () => {
+      await deleteSession(props.sessionID)
+      dialog.close()
+    }
+
+    return (
+      <Dialog title={language.t("session.delete.title")} fit>
+        <div class="flex flex-col gap-4 pl-6 pr-2.5 pb-3">
+          <div class="flex flex-col gap-1">
+            <span class="text-14-regular text-text-strong">
+              {language.t("session.delete.confirm", { name: name() })}
+            </span>
+          </div>
+          <div class="flex justify-end gap-2">
+            <Button variant="ghost" size="large" onClick={() => dialog.close()}>
+              {language.t("common.cancel")}
+            </Button>
+            <Button variant="primary" size="large" onClick={handleDelete}>
+              {language.t("session.delete.button")}
+            </Button>
+          </div>
+        </div>
+      </Dialog>
+    )
+  }
 
   return (
     <Show
@@ -336,18 +530,7 @@ export function MessageTimeline(props: {
             <Icon name="arrow-down-to-line" />
           </button>
         </div>
-        <SessionTimelineHeader
-          centered={props.centered}
-          showHeader={showHeader}
-          sessionKey={sessionKey}
-          sessionID={sessionID}
-          parentID={parentID}
-          titleValue={titleValue}
-          headerTitle={headerTitle}
-          placeholderTitle={placeholderTitle}
-        />
         <ScrollView
-          reverse
           viewportRef={props.setScrollRef}
           onWheel={(e) => {
             const root = e.currentTarget
@@ -381,44 +564,166 @@ export function MessageTimeline(props: {
             touchGesture = undefined
           }}
           onPointerDown={(e) => {
-            const next = trigger(e.target)
-            if (next) props.onPreserveScrollAnchor(next)
-
             if (e.target !== e.currentTarget) return
             props.onMarkScrollGesture(e.currentTarget)
           }}
-          onKeyDown={(e) => {
-            if (e.key !== "Enter" && e.key !== " ") return
-            const next = trigger(e.target)
-            if (!next) return
-            props.onPreserveScrollAnchor(next)
-          }}
           onScroll={(e) => {
             props.onScheduleScrollState(e.currentTarget)
             props.onTurnBackfillScroll()
             if (!props.hasScrollGesture()) return
+            props.onUserScroll()
             props.onAutoScrollHandleScroll()
             props.onMarkScrollGesture(e.currentTarget)
-            if (props.isDesktop) props.onScrollSpyScroll()
-          }}
-          onClick={(e) => {
-            props.onAutoScrollInteraction(e)
           }}
+          onClick={props.onAutoScrollInteraction}
           class="relative min-w-0 w-full h-full"
           style={{
-            "--session-title-height": showHeader() ? "72px" : "0px",
+            "--session-title-height": showHeader() ? "40px" : "0px",
             "--sticky-accordion-top": showHeader() ? "48px" : "0px",
           }}
         >
-          <div>
+          <div ref={props.setContentRef} class="min-w-0 w-full">
+            <Show when={showHeader()}>
+              <div
+                data-session-title
+                classList={{
+                  "sticky top-0 z-30 bg-[linear-gradient(to_bottom,var(--background-stronger)_48px,transparent)]": true,
+                  "w-full": true,
+                  "pb-4": true,
+                  "pl-2 pr-3 md:pl-4 md:pr-3": true,
+                  "md:max-w-200 md:mx-auto 2xl:max-w-[1000px]": props.centered,
+                }}
+              >
+                <div class="h-12 w-full flex items-center justify-between gap-2">
+                  <div class="flex items-center gap-1 min-w-0 flex-1 pr-3">
+                    <Show when={parentID()}>
+                      <IconButton
+                        tabIndex={-1}
+                        icon="arrow-left"
+                        variant="ghost"
+                        onClick={navigateParent}
+                        aria-label={language.t("common.goBack")}
+                      />
+                    </Show>
+                    <div class="flex items-center min-w-0 grow-1">
+                      <div
+                        class="shrink-0 flex items-center justify-center overflow-hidden transition-[width,margin] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]"
+                        style={{
+                          width: slot.open ? "16px" : "0px",
+                          "margin-right": slot.open ? "8px" : "0px",
+                        }}
+                        aria-hidden="true"
+                      >
+                        <Show when={slot.show}>
+                          <div
+                            class="transition-opacity duration-200 ease-out"
+                            classList={{
+                              "opacity-0": slot.fade,
+                            }}
+                          >
+                            <Spinner class="size-4" style={{ color: "var(--icon-interactive-base)" }} />
+                          </div>
+                        </Show>
+                      </div>
+                      <Show when={titleValue() || title.editing}>
+                        <Show
+                          when={title.editing}
+                          fallback={
+                            <h1
+                              class="text-14-medium text-text-strong truncate grow-1 min-w-0"
+                              onDblClick={openTitleEditor}
+                            >
+                              {titleValue()}
+                            </h1>
+                          }
+                        >
+                          <InlineInput
+                            ref={(el) => {
+                              titleRef = el
+                            }}
+                            value={title.draft}
+                            disabled={title.saving}
+                            class="text-14-medium text-text-strong grow-1 min-w-0 rounded-[6px]"
+                            style={{ "--inline-input-shadow": "var(--shadow-xs-border-select)" }}
+                            onInput={(event) => setTitle("draft", event.currentTarget.value)}
+                            onKeyDown={(event) => {
+                              event.stopPropagation()
+                              if (event.key === "Enter") {
+                                event.preventDefault()
+                                void saveTitleEditor()
+                                return
+                              }
+                              if (event.key === "Escape") {
+                                event.preventDefault()
+                                closeTitleEditor()
+                              }
+                            }}
+                            onBlur={closeTitleEditor}
+                          />
+                        </Show>
+                      </Show>
+                    </div>
+                  </div>
+                  <Show when={sessionID()}>
+                    {(id) => (
+                      <div class="shrink-0 flex items-center gap-3">
+                        <SessionContextUsage placement="bottom" />
+                        <DropdownMenu
+                          gutter={4}
+                          placement="bottom-end"
+                          open={title.menuOpen}
+                          onOpenChange={(open) => setTitle("menuOpen", open)}
+                        >
+                          <DropdownMenu.Trigger
+                            as={IconButton}
+                            icon="dot-grid"
+                            variant="ghost"
+                            class="size-6 rounded-md data-[expanded]:bg-surface-base-active"
+                            aria-label={language.t("common.moreOptions")}
+                          />
+                          <DropdownMenu.Portal>
+                            <DropdownMenu.Content
+                              style={{ "min-width": "104px" }}
+                              onCloseAutoFocus={(event) => {
+                                if (!title.pendingRename) return
+                                event.preventDefault()
+                                setTitle("pendingRename", false)
+                                openTitleEditor()
+                              }}
+                            >
+                              <DropdownMenu.Item
+                                onSelect={() => {
+                                  setTitle("pendingRename", true)
+                                  setTitle("menuOpen", false)
+                                }}
+                              >
+                                <DropdownMenu.ItemLabel>{language.t("common.rename")}</DropdownMenu.ItemLabel>
+                              </DropdownMenu.Item>
+                              <DropdownMenu.Item onSelect={() => void archiveSession(id())}>
+                                <DropdownMenu.ItemLabel>{language.t("common.archive")}</DropdownMenu.ItemLabel>
+                              </DropdownMenu.Item>
+                              <DropdownMenu.Separator />
+                              <DropdownMenu.Item
+                                onSelect={() => dialog.show(() => <DialogDeleteSession sessionID={id()} />)}
+                              >
+                                <DropdownMenu.ItemLabel>{language.t("common.delete")}</DropdownMenu.ItemLabel>
+                              </DropdownMenu.Item>
+                            </DropdownMenu.Content>
+                          </DropdownMenu.Portal>
+                        </DropdownMenu>
+                      </div>
+                    )}
+                  </Show>
+                </div>
+              </div>
+            </Show>
+
             <div
-              ref={props.setContentRef}
               role="log"
-              class="flex flex-col gap-0 items-start justify-start pb-16 transition-[margin]"
-              style={{ "padding-top": "var(--session-title-height)" }}
+              class="flex flex-col gap-12 items-start justify-start pb-16 transition-[margin]"
               classList={{
                 "w-full": true,
-                "md:max-w-[500px] md:mx-auto 2xl:max-w-[700px]": props.centered,
+                "md:max-w-200 md:mx-auto 2xl:max-w-[1000px]": props.centered,
                 "mt-0.5": props.centered,
                 "mt-0": !props.centered,
               }}
@@ -440,15 +745,6 @@ export function MessageTimeline(props: {
               </Show>
               <For each={rendered()}>
                 {(messageID) => {
-                  // Capture at creation time: animate only messages added after the
-                  // timeline finishes its initial backfill staging, plus the first
-                  // turn while a brand new session is still using its default title.
-                  const isNew =
-                    staging.ready() ||
-                    (defaultTitle() &&
-                      sessionStatus() !== "idle" &&
-                      props.renderedUserMessages.length === 1 &&
-                      messageID === props.renderedUserMessages[0]?.id)
                   const active = createMemo(() => activeMessageID() === messageID)
                   const queued = createMemo(() => {
                     if (active()) return false
@@ -457,23 +753,16 @@ export function MessageTimeline(props: {
                     return false
                   })
                   const comments = createMemo(() => messageComments(sync.data.part[messageID] ?? []), [], {
-                    equals: (a, b) => {
-                      if (a.length !== b.length) return false
-                      return a.every((x, i) => x.path === b[i].path && x.comment === b[i].comment)
-                    },
+                    equals: (a, b) => JSON.stringify(a) === JSON.stringify(b),
                   })
                   const commentCount = createMemo(() => comments().length)
                   return (
                     <div
                       id={props.anchor(messageID)}
                       data-message-id={messageID}
-                      ref={(el) => {
-                        props.onRegisterMessage(el, messageID)
-                        onCleanup(() => props.onUnregisterMessage(messageID))
-                      }}
                       classList={{
                         "min-w-0 w-full max-w-full": true,
-                        "md:max-w-[500px] 2xl:max-w-[700px]": props.centered,
+                        "md:max-w-200 2xl:max-w-[1000px]": props.centered,
                       }}
                     >
                       <Show when={commentCount() > 0}>
@@ -517,7 +806,7 @@ export function MessageTimeline(props: {
                         messageID={messageID}
                         active={active()}
                         queued={queued()}
-                        animate={isNew || active()}
+                        status={active() ? sessionStatus() : undefined}
                         showReasoningSummaries={settings.general.showReasoningSummaries()}
                         shellToolDefaultOpen={settings.general.shellToolPartsExpanded()}
                         editToolDefaultOpen={settings.general.editToolPartsExpanded()}

packages/app/src/pages/session/scroll-spy.test.ts

@@ -1,127 +0,0 @@
-import { describe, expect, test } from "bun:test"
-import { createScrollSpy, pickOffsetId, pickVisibleId } from "./scroll-spy"
-
-const rect = (top: number, height = 80): DOMRect =>
-  ({
-    x: 0,
-    y: top,
-    top,
-    left: 0,
-    right: 800,
-    bottom: top + height,
-    width: 800,
-    height,
-    toJSON: () => ({}),
-  }) as DOMRect
-
-const setRect = (el: Element, top: number, height = 80) => {
-  Object.defineProperty(el, "getBoundingClientRect", {
-    configurable: true,
-    value: () => rect(top, height),
-  })
-}
-
-describe("pickVisibleId", () => {
-  test("prefers higher intersection ratio", () => {
-    const id = pickVisibleId(
-      [
-        { id: "a", ratio: 0.2, top: 100 },
-        { id: "b", ratio: 0.8, top: 300 },
-      ],
-      120,
-    )
-
-    expect(id).toBe("b")
-  })
-
-  test("breaks ratio ties by nearest line", () => {
-    const id = pickVisibleId(
-      [
-        { id: "a", ratio: 0.5, top: 90 },
-        { id: "b", ratio: 0.5, top: 140 },
-      ],
-      130,
-    )
-
-    expect(id).toBe("b")
-  })
-})
-
-describe("pickOffsetId", () => {
-  test("uses binary search cutoff", () => {
-    const id = pickOffsetId(
-      [
-        { id: "a", top: 0 },
-        { id: "b", top: 200 },
-        { id: "c", top: 400 },
-      ],
-      350,
-    )
-
-    expect(id).toBe("b")
-  })
-})
-
-describe("createScrollSpy fallback", () => {
-  test("tracks active id from offsets and dirty refresh", () => {
-    const active: string[] = []
-    const root = document.createElement("div") as HTMLDivElement
-    const one = document.createElement("div")
-    const two = document.createElement("div")
-    const three = document.createElement("div")
-
-    root.append(one, two, three)
-    document.body.append(root)
-
-    Object.defineProperty(root, "scrollTop", { configurable: true, writable: true, value: 250 })
-    setRect(root, 0, 800)
-    setRect(one, -250)
-    setRect(two, -50)
-    setRect(three, 150)
-
-    const queue: FrameRequestCallback[] = []
-    const flush = () => {
-      const run = [...queue]
-      queue.length = 0
-      for (const cb of run) cb(0)
-    }
-
-    const spy = createScrollSpy({
-      onActive: (id) => active.push(id),
-      raf: (cb) => (queue.push(cb), queue.length),
-      caf: () => {},
-      IntersectionObserver: undefined,
-      ResizeObserver: undefined,
-      MutationObserver: undefined,
-    })
-
-    spy.setContainer(root)
-    spy.register(one, "a")
-    spy.register(two, "b")
-    spy.register(three, "c")
-    spy.onScroll()
-    flush()
-
-    expect(spy.getActiveId()).toBe("b")
-    expect(active.at(-1)).toBe("b")
-
-    root.scrollTop = 450
-    setRect(one, -450)
-    setRect(two, -250)
-    setRect(three, -50)
-    spy.onScroll()
-    flush()
-    expect(spy.getActiveId()).toBe("c")
-
-    root.scrollTop = 250
-    setRect(one, -250)
-    setRect(two, 250)
-    setRect(three, 150)
-    spy.markDirty()
-    spy.onScroll()
-    flush()
-    expect(spy.getActiveId()).toBe("a")
-
-    spy.destroy()
-  })
-})

packages/app/src/pages/session/scroll-spy.ts

@@ -1,275 +0,0 @@
-type Visible = {
-  id: string
-  ratio: number
-  top: number
-}
-
-type Offset = {
-  id: string
-  top: number
-}
-
-type Input = {
-  onActive: (id: string) => void
-  raf?: (cb: FrameRequestCallback) => number
-  caf?: (id: number) => void
-  IntersectionObserver?: typeof globalThis.IntersectionObserver
-  ResizeObserver?: typeof globalThis.ResizeObserver
-  MutationObserver?: typeof globalThis.MutationObserver
-}
-
-export const pickVisibleId = (list: Visible[], line: number) => {
-  if (list.length === 0) return
-
-  const sorted = [...list].sort((a, b) => {
-    if (b.ratio !== a.ratio) return b.ratio - a.ratio
-
-    const da = Math.abs(a.top - line)
-    const db = Math.abs(b.top - line)
-    if (da !== db) return da - db
-
-    return a.top - b.top
-  })
-
-  return sorted[0]?.id
-}
-
-export const pickOffsetId = (list: Offset[], cutoff: number) => {
-  if (list.length === 0) return
-
-  let lo = 0
-  let hi = list.length - 1
-  let out = 0
-
-  while (lo <= hi) {
-    const mid = (lo + hi) >> 1
-    const top = list[mid]?.top
-    if (top === undefined) break
-
-    if (top <= cutoff) {
-      out = mid
-      lo = mid + 1
-      continue
-    }
-
-    hi = mid - 1
-  }
-
-  return list[out]?.id
-}
-
-export const createScrollSpy = (input: Input) => {
-  const raf = input.raf ?? requestAnimationFrame
-  const caf = input.caf ?? cancelAnimationFrame
-  const CtorIO = input.IntersectionObserver ?? globalThis.IntersectionObserver
-  const CtorRO = input.ResizeObserver ?? globalThis.ResizeObserver
-  const CtorMO = input.MutationObserver ?? globalThis.MutationObserver
-
-  let root: HTMLDivElement | undefined
-  let io: IntersectionObserver | undefined
-  let ro: ResizeObserver | undefined
-  let mo: MutationObserver | undefined
-  let frame: number | undefined
-  let active: string | undefined
-  let dirty = true
-
-  const node = new Map<string, HTMLElement>()
-  const id = new WeakMap<HTMLElement, string>()
-  const visible = new Map<string, { ratio: number; top: number }>()
-  let offset: Offset[] = []
-
-  const schedule = () => {
-    if (frame !== undefined) return
-    frame = raf(() => {
-      frame = undefined
-      update()
-    })
-  }
-
-  const refreshOffset = () => {
-    const el = root
-    if (!el) {
-      offset = []
-      dirty = false
-      return
-    }
-
-    const base = el.getBoundingClientRect().top
-    offset = [...node].map(([next, item]) => ({
-      id: next,
-      top: item.getBoundingClientRect().top - base + el.scrollTop,
-    }))
-    offset.sort((a, b) => a.top - b.top)
-    dirty = false
-  }
-
-  const update = () => {
-    const el = root
-    if (!el) return
-
-    const line = el.getBoundingClientRect().top + 100
-    const next =
-      pickVisibleId(
-        [...visible].map(([k, v]) => ({
-          id: k,
-          ratio: v.ratio,
-          top: v.top,
-        })),
-        line,
-      ) ??
-      (() => {
-        if (dirty) refreshOffset()
-        return pickOffsetId(offset, el.scrollTop + 100)
-      })()
-
-    if (!next || next === active) return
-    active = next
-    input.onActive(next)
-  }
-
-  const observe = () => {
-    const el = root
-    if (!el) return
-
-    io?.disconnect()
-    io = undefined
-    if (CtorIO) {
-      try {
-        io = new CtorIO(
-          (entries) => {
-            for (const entry of entries) {
-              const item = entry.target
-              if (!(item instanceof HTMLElement)) continue
-              const key = id.get(item)
-              if (!key) continue
-
-              if (!entry.isIntersecting || entry.intersectionRatio <= 0) {
-                visible.delete(key)
-                continue
-              }
-
-              visible.set(key, {
-                ratio: entry.intersectionRatio,
-                top: entry.boundingClientRect.top,
-              })
-            }
-
-            schedule()
-          },
-          {
-            root: el,
-            threshold: [0, 0.25, 0.5, 0.75, 1],
-          },
-        )
-      } catch {
-        io = undefined
-      }
-    }
-
-    if (io) {
-      for (const item of node.values()) io.observe(item)
-    }
-
-    ro?.disconnect()
-    ro = undefined
-    if (CtorRO) {
-      ro = new CtorRO(() => {
-        dirty = true
-        schedule()
-      })
-      ro.observe(el)
-      for (const item of node.values()) ro.observe(item)
-    }
-
-    mo?.disconnect()
-    mo = undefined
-    if (CtorMO) {
-      mo = new CtorMO(() => {
-        dirty = true
-        schedule()
-      })
-      mo.observe(el, { subtree: true, childList: true, characterData: true })
-    }
-
-    dirty = true
-    schedule()
-  }
-
-  const setContainer = (el?: HTMLDivElement) => {
-    if (root === el) return
-
-    root = el
-    visible.clear()
-    active = undefined
-    observe()
-  }
-
-  const register = (el: HTMLElement, key: string) => {
-    const prev = node.get(key)
-    if (prev && prev !== el) {
-      io?.unobserve(prev)
-      ro?.unobserve(prev)
-    }
-
-    node.set(key, el)
-    id.set(el, key)
-    if (io) io.observe(el)
-    if (ro) ro.observe(el)
-    dirty = true
-    schedule()
-  }
-
-  const unregister = (key: string) => {
-    const item = node.get(key)
-    if (!item) return
-
-    io?.unobserve(item)
-    ro?.unobserve(item)
-    node.delete(key)
-    visible.delete(key)
-    dirty = true
-    schedule()
-  }
-
-  const markDirty = () => {
-    dirty = true
-    schedule()
-  }
-
-  const clear = () => {
-    for (const item of node.values()) {
-      io?.unobserve(item)
-      ro?.unobserve(item)
-    }
-
-    node.clear()
-    visible.clear()
-    offset = []
-    active = undefined
-    dirty = true
-  }
-
-  const destroy = () => {
-    if (frame !== undefined) caf(frame)
-    frame = undefined
-    clear()
-    io?.disconnect()
-    ro?.disconnect()
-    mo?.disconnect()
-    io = undefined
-    ro = undefined
-    mo = undefined
-    root = undefined
-  }
-
-  return {
-    setContainer,
-    register,
-    unregister,
-    onScroll: schedule,
-    markDirty,
-    clear,
-    destroy,
-    getActiveId: () => active,
-  }
-}

packages/app/src/pages/session/session-side-panel.tsx

@@ -31,6 +31,7 @@ export function SessionSidePanel(props: {
   reviewPanel: () => JSX.Element
   activeDiff?: string
   focusReviewDiff: (path: string) => void
+  reviewSnap: boolean
   size: Sizing
 }) {
   const params = useParams()
@@ -228,7 +229,7 @@ export function SessionSidePanel(props: {
         classList={{
           "pointer-events-none": !open(),
           "transition-[width] duration-[240ms] ease-[cubic-bezier(0.22,1,0.36,1)] will-change-[width] motion-reduce:transition-none":
-            !props.size.active(),
+            !props.size.active() && !props.reviewSnap,
         }}
         style={{ width: panelWidth() }}
       >

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

@@ -1,522 +0,0 @@
-import { createEffect, createMemo, on, onCleanup, Show } from "solid-js"
-import { createStore, produce } from "solid-js/store"
-import { useNavigate, useParams } from "@solidjs/router"
-import { Button } from "@opencode-ai/ui/button"
-import { IconButton } from "@opencode-ai/ui/icon-button"
-import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
-import { Dialog } from "@opencode-ai/ui/dialog"
-import { prefersReducedMotion } from "@opencode-ai/ui/hooks"
-import { InlineInput } from "@opencode-ai/ui/inline-input"
-import { animate, type AnimationPlaybackControls, clearFadeStyles, FAST_SPRING } from "@opencode-ai/ui/motion"
-import { showToast } from "@opencode-ai/ui/toast"
-import { errorMessage } from "@/pages/layout/helpers"
-import { SessionContextUsage } from "@/components/session-context-usage"
-import { useDialog } from "@opencode-ai/ui/context/dialog"
-import { useLanguage } from "@/context/language"
-import { useSDK } from "@/context/sdk"
-import { useSync } from "@/context/sync"
-
-export function SessionTimelineHeader(props: {
-  centered: boolean
-  showHeader: () => boolean
-  sessionKey: () => string
-  sessionID: () => string | undefined
-  parentID: () => string | undefined
-  titleValue: () => string | undefined
-  headerTitle: () => string | undefined
-  placeholderTitle: () => boolean
-}) {
-  const navigate = useNavigate()
-  const params = useParams()
-  const sdk = useSDK()
-  const sync = useSync()
-  const dialog = useDialog()
-  const language = useLanguage()
-  const reduce = prefersReducedMotion
-
-  const [title, setTitle] = createStore({
-    draft: "",
-    editing: false,
-    saving: false,
-    menuOpen: false,
-    pendingRename: false,
-  })
-  const [headerText, setHeaderText] = createStore({
-    session: props.sessionKey(),
-    value: props.headerTitle(),
-    prev: undefined as string | undefined,
-    muted: props.placeholderTitle(),
-    prevMuted: false,
-  })
-  let headerAnim: AnimationPlaybackControls | undefined
-  let enterAnim: AnimationPlaybackControls | undefined
-  let leaveAnim: AnimationPlaybackControls | undefined
-  let titleRef: HTMLInputElement | undefined
-  let headerRef: HTMLDivElement | undefined
-  let enterRef: HTMLSpanElement | undefined
-  let leaveRef: HTMLSpanElement | undefined
-
-  const clearHeaderAnim = () => {
-    headerAnim?.stop()
-    headerAnim = undefined
-  }
-
-  const animateHeader = () => {
-    const el = headerRef
-    if (!el) return
-
-    clearHeaderAnim()
-    if (!headerText.muted || reduce()) {
-      el.style.opacity = "1"
-      return
-    }
-
-    headerAnim = animate(el, { opacity: [0, 1] }, { type: "spring", visualDuration: 1.0, bounce: 0 })
-    headerAnim.finished.then(() => {
-      if (headerRef !== el) return
-      clearFadeStyles(el)
-    })
-  }
-
-  const clearTitleAnims = () => {
-    enterAnim?.stop()
-    enterAnim = undefined
-    leaveAnim?.stop()
-    leaveAnim = undefined
-  }
-
-  const settleTitleEnter = () => {
-    if (enterRef) clearFadeStyles(enterRef)
-  }
-
-  const hideLeave = () => {
-    if (!leaveRef) return
-    leaveRef.style.opacity = "0"
-    leaveRef.style.filter = ""
-    leaveRef.style.transform = ""
-  }
-
-  const animateEnterSpan = () => {
-    if (!enterRef) return
-    if (reduce()) {
-      settleTitleEnter()
-      return
-    }
-    enterAnim = animate(
-      enterRef,
-      { opacity: [0, 1], filter: ["blur(2px)", "blur(0px)"], transform: ["translateY(-2px)", "translateY(0)"] },
-      FAST_SPRING,
-    )
-    enterAnim.finished.then(() => settleTitleEnter())
-  }
-
-  const crossfadeTitle = (nextTitle: string, nextMuted: boolean) => {
-    clearTitleAnims()
-    setHeaderText({ prev: headerText.value, prevMuted: headerText.muted })
-    setHeaderText({ value: nextTitle, muted: nextMuted })
-
-    if (reduce()) {
-      setHeaderText({ prev: undefined, prevMuted: false })
-      hideLeave()
-      settleTitleEnter()
-      return
-    }
-
-    if (leaveRef) {
-      leaveAnim = animate(
-        leaveRef,
-        { opacity: [1, 0], filter: ["blur(0px)", "blur(2px)"], transform: ["translateY(0)", "translateY(2px)"] },
-        FAST_SPRING,
-      )
-      leaveAnim.finished.then(() => {
-        setHeaderText({ prev: undefined, prevMuted: false })
-        hideLeave()
-      })
-    }
-
-    animateEnterSpan()
-  }
-
-  const fadeInTitle = (nextTitle: string, nextMuted: boolean) => {
-    clearTitleAnims()
-    setHeaderText({ value: nextTitle, muted: nextMuted, prev: undefined, prevMuted: false })
-    animateEnterSpan()
-  }
-
-  const snapTitle = (nextTitle: string | undefined, nextMuted: boolean) => {
-    clearTitleAnims()
-    setHeaderText({ value: nextTitle, muted: nextMuted, prev: undefined, prevMuted: false })
-    settleTitleEnter()
-  }
-
-  createEffect(
-    on(props.showHeader, (show, prev) => {
-      if (!show) {
-        clearHeaderAnim()
-        return
-      }
-      if (show === prev) return
-      animateHeader()
-    }),
-  )
-
-  createEffect(
-    on(
-      () => [props.sessionKey(), props.headerTitle(), props.placeholderTitle()] as const,
-      ([nextSession, nextTitle, nextMuted]) => {
-        if (nextSession !== headerText.session) {
-          setHeaderText("session", nextSession)
-          if (nextTitle && nextMuted) {
-            fadeInTitle(nextTitle, nextMuted)
-            return
-          }
-          snapTitle(nextTitle, nextMuted)
-          return
-        }
-        if (nextTitle === headerText.value && nextMuted === headerText.muted) return
-        if (!nextTitle) {
-          snapTitle(undefined, false)
-          return
-        }
-        if (!headerText.value) {
-          fadeInTitle(nextTitle, nextMuted)
-          return
-        }
-        if (title.saving || title.editing) {
-          snapTitle(nextTitle, nextMuted)
-          return
-        }
-        crossfadeTitle(nextTitle, nextMuted)
-      },
-    ),
-  )
-
-  onCleanup(() => {
-    clearHeaderAnim()
-    clearTitleAnims()
-  })
-
-  const toastError = (err: unknown) => errorMessage(err, language.t("common.requestFailed"))
-
-  createEffect(
-    on(
-      props.sessionKey,
-      () => setTitle({ draft: "", editing: false, saving: false, menuOpen: false, pendingRename: false }),
-      { defer: true },
-    ),
-  )
-
-  const openTitleEditor = () => {
-    if (!props.sessionID()) return
-    setTitle({ editing: true, draft: props.titleValue() ?? "" })
-    requestAnimationFrame(() => {
-      titleRef?.focus()
-      titleRef?.select()
-    })
-  }
-
-  const closeTitleEditor = () => {
-    if (title.saving) return
-    setTitle({ editing: false, saving: false })
-  }
-
-  const saveTitleEditor = async () => {
-    const id = props.sessionID()
-    if (!id) return
-    if (title.saving) return
-
-    const next = title.draft.trim()
-    if (!next || next === (props.titleValue() ?? "")) {
-      setTitle({ editing: false, saving: false })
-      return
-    }
-
-    setTitle("saving", true)
-    await sdk.client.session
-      .update({ sessionID: id, title: next })
-      .then(() => {
-        sync.set(
-          produce((draft) => {
-            const index = draft.session.findIndex((session) => session.id === id)
-            if (index !== -1) draft.session[index].title = next
-          }),
-        )
-        setTitle({ editing: false, saving: false })
-      })
-      .catch((err) => {
-        setTitle("saving", false)
-        showToast({
-          title: language.t("common.requestFailed"),
-          description: toastError(err),
-        })
-      })
-  }
-
-  const navigateAfterSessionRemoval = (sessionID: string, parentID?: string, nextSessionID?: string) => {
-    if (params.id !== sessionID) return
-    if (parentID) {
-      navigate(`/${params.dir}/session/${parentID}`)
-      return
-    }
-    if (nextSessionID) {
-      navigate(`/${params.dir}/session/${nextSessionID}`)
-      return
-    }
-    navigate(`/${params.dir}/session`)
-  }
-
-  const archiveSession = async (sessionID: string) => {
-    const session = sync.session.get(sessionID)
-    if (!session) return
-
-    const sessions = sync.data.session ?? []
-    const index = sessions.findIndex((item) => item.id === sessionID)
-    const nextSession = index === -1 ? undefined : (sessions[index + 1] ?? sessions[index - 1])
-
-    await sdk.client.session
-      .update({ sessionID, time: { archived: Date.now() } })
-      .then(() => {
-        sync.set(
-          produce((draft) => {
-            const index = draft.session.findIndex((item) => item.id === sessionID)
-            if (index !== -1) draft.session.splice(index, 1)
-          }),
-        )
-        navigateAfterSessionRemoval(sessionID, session.parentID, nextSession?.id)
-      })
-      .catch((err) => {
-        showToast({
-          title: language.t("common.requestFailed"),
-          description: toastError(err),
-        })
-      })
-  }
-
-  const deleteSession = async (sessionID: string) => {
-    const session = sync.session.get(sessionID)
-    if (!session) return false
-
-    const sessions = (sync.data.session ?? []).filter((item) => !item.parentID && !item.time?.archived)
-    const index = sessions.findIndex((item) => item.id === sessionID)
-    const nextSession = index === -1 ? undefined : (sessions[index + 1] ?? sessions[index - 1])
-
-    const result = await sdk.client.session
-      .delete({ sessionID })
-      .then((x) => x.data)
-      .catch((err) => {
-        showToast({
-          title: language.t("session.delete.failed.title"),
-          description: toastError(err),
-        })
-        return false
-      })
-
-    if (!result) return false
-
-    sync.set(
-      produce((draft) => {
-        const removed = new Set<string>([sessionID])
-        const byParent = new Map<string, string[]>()
-
-        for (const item of draft.session) {
-          const parentID = item.parentID
-          if (!parentID) continue
-
-          const existing = byParent.get(parentID)
-          if (existing) {
-            existing.push(item.id)
-            continue
-          }
-          byParent.set(parentID, [item.id])
-        }
-
-        const stack = [sessionID]
-        while (stack.length) {
-          const parentID = stack.pop()
-          if (!parentID) continue
-
-          const children = byParent.get(parentID)
-          if (!children) continue
-
-          for (const child of children) {
-            if (removed.has(child)) continue
-            removed.add(child)
-            stack.push(child)
-          }
-        }
-
-        draft.session = draft.session.filter((item) => !removed.has(item.id))
-      }),
-    )
-
-    navigateAfterSessionRemoval(sessionID, session.parentID, nextSession?.id)
-    return true
-  }
-
-  const navigateParent = () => {
-    const id = props.parentID()
-    if (!id) return
-    navigate(`/${params.dir}/session/${id}`)
-  }
-
-  function DialogDeleteSession(input: { sessionID: string }) {
-    const name = createMemo(() => sync.session.get(input.sessionID)?.title ?? language.t("command.session.new"))
-
-    const handleDelete = async () => {
-      await deleteSession(input.sessionID)
-      dialog.close()
-    }
-
-    return (
-      <Dialog title={language.t("session.delete.title")} fit>
-        <div class="flex flex-col gap-4 pl-6 pr-2.5 pb-3">
-          <div class="flex flex-col gap-1">
-            <span class="text-14-regular text-text-strong">
-              {language.t("session.delete.confirm", { name: name() })}
-            </span>
-          </div>
-          <div class="flex justify-end gap-2">
-            <Button variant="ghost" size="large" onClick={() => dialog.close()}>
-              {language.t("common.cancel")}
-            </Button>
-            <Button variant="primary" size="large" onClick={handleDelete}>
-              {language.t("session.delete.button")}
-            </Button>
-          </div>
-        </div>
-      </Dialog>
-    )
-  }
-
-  return (
-    <Show when={props.showHeader()}>
-      <div
-        data-session-title
-        ref={(el) => {
-          headerRef = el
-          el.style.opacity = "0"
-        }}
-        class="pointer-events-none absolute inset-x-0 top-0 z-30"
-      >
-        <div
-          classList={{
-            "bg-[linear-gradient(to_bottom,var(--background-stronger)_38px,transparent)]": true,
-            "w-full": true,
-            "pb-10": true,
-            "px-4 md:px-5": true,
-            "md:max-w-[500px] md:mx-auto 2xl:max-w-[700px]": props.centered,
-          }}
-        >
-          <div class="pointer-events-auto h-12 w-full flex items-center justify-between gap-2">
-            <div class="flex items-center gap-1 min-w-0 flex-1">
-              <Show when={props.parentID()}>
-                <div>
-                  <IconButton
-                    tabIndex={-1}
-                    icon="arrow-left"
-                    variant="ghost"
-                    onClick={navigateParent}
-                    aria-label={language.t("common.goBack")}
-                  />
-                </div>
-              </Show>
-              <Show when={!!headerText.value || title.editing}>
-                <Show
-                  when={title.editing}
-                  fallback={
-                    <h1 class="text-14-medium text-text-strong grow-1 min-w-0" onDblClick={openTitleEditor}>
-                      <span class="grid min-w-0" style={{ overflow: "clip" }}>
-                        <span ref={enterRef} class="col-start-1 row-start-1 min-w-0 truncate">
-                          <span classList={{ "opacity-60": headerText.muted }}>{headerText.value}</span>
-                        </span>
-                        <span
-                          ref={leaveRef}
-                          class="col-start-1 row-start-1 min-w-0 truncate pointer-events-none"
-                          style={{ opacity: "0" }}
-                        >
-                          <span classList={{ "opacity-60": headerText.prevMuted }}>{headerText.prev}</span>
-                        </span>
-                      </span>
-                    </h1>
-                  }
-                >
-                  <InlineInput
-                    ref={(el) => {
-                      titleRef = el
-                    }}
-                    value={title.draft}
-                    disabled={title.saving}
-                    class="text-14-medium text-text-strong grow-1 min-w-0 rounded-[6px]"
-                    style={{ "--inline-input-shadow": "var(--shadow-xs-border-select)" }}
-                    onInput={(event) => setTitle("draft", event.currentTarget.value)}
-                    onKeyDown={(event) => {
-                      event.stopPropagation()
-                      if (event.key === "Enter") {
-                        event.preventDefault()
-                        void saveTitleEditor()
-                        return
-                      }
-                      if (event.key === "Escape") {
-                        event.preventDefault()
-                        closeTitleEditor()
-                      }
-                    }}
-                    onBlur={closeTitleEditor}
-                  />
-                </Show>
-              </Show>
-            </div>
-            <Show when={props.sessionID()}>
-              {(id) => (
-                <div class="shrink-0 flex items-center gap-3">
-                  <SessionContextUsage placement="bottom" />
-                  <DropdownMenu
-                    gutter={4}
-                    placement="bottom-end"
-                    open={title.menuOpen}
-                    onOpenChange={(open) => setTitle("menuOpen", open)}
-                  >
-                    <DropdownMenu.Trigger
-                      as={IconButton}
-                      icon="dot-grid"
-                      variant="ghost"
-                      class="size-6 rounded-md data-[expanded]:bg-surface-base-active"
-                      aria-label={language.t("common.moreOptions")}
-                    />
-                    <DropdownMenu.Portal>
-                      <DropdownMenu.Content
-                        style={{ "min-width": "104px" }}
-                        onCloseAutoFocus={(event) => {
-                          if (!title.pendingRename) return
-                          event.preventDefault()
-                          setTitle("pendingRename", false)
-                          openTitleEditor()
-                        }}
-                      >
-                        <DropdownMenu.Item
-                          onSelect={() => {
-                            setTitle("pendingRename", true)
-                            setTitle("menuOpen", false)
-                          }}
-                        >
-                          <DropdownMenu.ItemLabel>{language.t("common.rename")}</DropdownMenu.ItemLabel>
-                        </DropdownMenu.Item>
-                        <DropdownMenu.Item onSelect={() => void archiveSession(id())}>
-                          <DropdownMenu.ItemLabel>{language.t("common.archive")}</DropdownMenu.ItemLabel>
-                        </DropdownMenu.Item>
-                        <DropdownMenu.Separator />
-                        <DropdownMenu.Item onSelect={() => dialog.show(() => <DialogDeleteSession sessionID={id()} />)}>
-                          <DropdownMenu.ItemLabel>{language.t("common.delete")}</DropdownMenu.ItemLabel>
-                        </DropdownMenu.Item>
-                      </DropdownMenu.Content>
-                    </DropdownMenu.Portal>
-                  </DropdownMenu>
-                </div>
-              )}
-            </Show>
-          </div>
-        </div>
-      </div>
-    </Show>
-  )
-}

packages/app/src/pages/session/terminal-panel.tsx

@@ -250,6 +250,7 @@ export function TerminalPanel() {
                           <div id={`terminal-wrapper-${id}`} class="absolute inset-0">
                             <Terminal
                               pty={pty()}
+                              onConnect={() => terminal.trim(id)}
                               onCleanup={terminal.update}
                               onConnectError={() => terminal.clone(id)}
                             />

packages/app/src/pages/session/use-session-hash-scroll.ts

@@ -1,4 +1,5 @@
 import type { UserMessage } from "@opencode-ai/sdk/v2"
+import { useLocation, useNavigate } from "@solidjs/router"
 import { createEffect, createMemo, onCleanup, onMount } from "solid-js"
 import { messageIdFromHash } from "./message-id-from-hash"
 
@@ -15,7 +16,7 @@ export const useSessionHashScroll = (input: {
   setPendingMessage: (value: string | undefined) => void
   setActiveMessage: (message: UserMessage | undefined) => void
   setTurnStart: (value: number) => void
-  autoScroll: { pause: () => void; snapToBottom: () => void }
+  autoScroll: { pause: () => void; forceScrollToBottom: () => void }
   scroller: () => HTMLDivElement | undefined
   anchor: (id: string) => string
   scheduleScrollState: (el: HTMLDivElement) => void
@@ -25,14 +26,40 @@ export const useSessionHashScroll = (input: {
   const messageById = createMemo(() => new Map(visibleUserMessages().map((m) => [m.id, m])))
   const messageIndex = createMemo(() => new Map(visibleUserMessages().map((m, i) => [m.id, i])))
   let pendingKey = ""
+  let clearing = false
+
+  const location = useLocation()
+  const navigate = useNavigate()
+
+  const frames = new Set<number>()
+  const queue = (fn: () => void) => {
+    const id = requestAnimationFrame(() => {
+      frames.delete(id)
+      fn()
+    })
+    frames.add(id)
+  }
+  const cancel = () => {
+    for (const id of frames) cancelAnimationFrame(id)
+    frames.clear()
+  }
 
   const clearMessageHash = () => {
-    if (!window.location.hash) return
-    window.history.replaceState(null, "", window.location.pathname + window.location.search)
+    cancel()
+    input.consumePendingMessage(input.sessionKey())
+    if (input.pendingMessage()) input.setPendingMessage(undefined)
+    if (!location.hash) return
+    clearing = true
+    navigate(location.pathname + location.search, { replace: true })
   }
 
   const updateHash = (id: string) => {
-    window.history.replaceState(null, "", `${window.location.pathname}${window.location.search}#${input.anchor(id)}`)
+    const hash = `#${input.anchor(id)}`
+    if (location.hash === hash) return
+    clearing = false
+    navigate(location.pathname + location.search + hash, {
+      replace: true,
+    })
   }
 
   const scrollToElement = (el: HTMLElement, behavior: ScrollBehavior) => {
@@ -41,65 +68,51 @@ export const useSessionHashScroll = (input: {
 
     const a = el.getBoundingClientRect()
     const b = root.getBoundingClientRect()
-    const title = parseFloat(getComputedStyle(root).getPropertyValue("--session-title-height"))
-    const inset = Number.isNaN(title) ? 0 : title
-    // With column-reverse, scrollTop is negative — don't clamp to 0
-    const top = a.top - b.top + root.scrollTop - inset
+    const sticky = root.querySelector("[data-session-title]")
+    const inset = sticky instanceof HTMLElement ? sticky.offsetHeight : 0
+    const top = Math.max(0, a.top - b.top + root.scrollTop - inset)
     root.scrollTo({ top, behavior })
     return true
   }
 
+  const seek = (id: string, behavior: ScrollBehavior, left = 4): boolean => {
+    const el = document.getElementById(input.anchor(id))
+    if (el) return scrollToElement(el, behavior)
+    if (left <= 0) return false
+    queue(() => {
+      seek(id, behavior, left - 1)
+    })
+    return false
+  }
+
   const scrollToMessage = (message: UserMessage, behavior: ScrollBehavior = "smooth") => {
+    cancel()
     if (input.currentMessageId() !== message.id) input.setActiveMessage(message)
 
     const index = messageIndex().get(message.id) ?? -1
     if (index !== -1 && index < input.turnStart()) {
       input.setTurnStart(index)
 
-      requestAnimationFrame(() => {
-        const el = document.getElementById(input.anchor(message.id))
-        if (!el) {
-          requestAnimationFrame(() => {
-            const next = document.getElementById(input.anchor(message.id))
-            if (!next) return
-            scrollToElement(next, behavior)
-          })
-          return
-        }
-        scrollToElement(el, behavior)
+      queue(() => {
+        seek(message.id, behavior)
       })
 
       updateHash(message.id)
       return
     }
 
-    const el = document.getElementById(input.anchor(message.id))
-    if (!el) {
-      updateHash(message.id)
-      requestAnimationFrame(() => {
-        const next = document.getElementById(input.anchor(message.id))
-        if (!next) return
-        if (!scrollToElement(next, behavior)) return
-      })
-      return
-    }
-    if (scrollToElement(el, behavior)) {
+    if (seek(message.id, behavior)) {
       updateHash(message.id)
       return
     }
 
-    requestAnimationFrame(() => {
-      const next = document.getElementById(input.anchor(message.id))
-      if (!next) return
-      if (!scrollToElement(next, behavior)) return
-    })
     updateHash(message.id)
   }
 
   const applyHash = (behavior: ScrollBehavior) => {
-    const hash = window.location.hash.slice(1)
+    const hash = location.hash.slice(1)
     if (!hash) {
-      input.autoScroll.snapToBottom()
+      input.autoScroll.forceScrollToBottom()
       const el = input.scroller()
       if (el) input.scheduleScrollState(el)
       return
@@ -123,28 +136,17 @@ export const useSessionHashScroll = (input: {
       return
     }
 
-    input.autoScroll.snapToBottom()
+    input.autoScroll.forceScrollToBottom()
     const el = input.scroller()
     if (el) input.scheduleScrollState(el)
   }
 
-  onMount(() => {
-    if (typeof window !== "undefined" && "scrollRestoration" in window.history) {
-      window.history.scrollRestoration = "manual"
-    }
-
-    const handler = () => {
-      if (!input.sessionID() || !input.messagesReady()) return
-      requestAnimationFrame(() => applyHash("auto"))
-    }
-
-    window.addEventListener("hashchange", handler)
-    onCleanup(() => window.removeEventListener("hashchange", handler))
-  })
-
   createEffect(() => {
+    const hash = location.hash
+    if (!hash) clearing = false
     if (!input.sessionID() || !input.messagesReady()) return
-    requestAnimationFrame(() => applyHash("auto"))
+    cancel()
+    queue(() => applyHash("auto"))
   })
 
   createEffect(() => {
@@ -166,17 +168,29 @@ export const useSessionHashScroll = (input: {
       }
     }
 
+    if (!targetId && !clearing) targetId = messageIdFromHash(location.hash)
     if (!targetId) return
-    if (input.currentMessageId() === targetId) return
 
+    const pending = input.pendingMessage() === targetId
     const msg = messageById().get(targetId)
     if (!msg) return
 
-    if (input.pendingMessage() === targetId) input.setPendingMessage(undefined)
+    if (pending) input.setPendingMessage(undefined)
+    if (input.currentMessageId() === targetId && !pending) return
+
     input.autoScroll.pause()
-    requestAnimationFrame(() => scrollToMessage(msg, "auto"))
+    cancel()
+    queue(() => scrollToMessage(msg, "auto"))
   })
 
+  onMount(() => {
+    if (typeof window !== "undefined" && "scrollRestoration" in window.history) {
+      window.history.scrollRestoration = "manual"
+    }
+  })
+
+  onCleanup(cancel)
+
   return {
     clearMessageHash,
     scrollToMessage,

packages/app/src/theme-preload.test.ts

@@ -0,0 +1,46 @@
+import { beforeEach, describe, expect, test } from "bun:test"
+
+const src = await Bun.file(new URL("../public/oc-theme-preload.js", import.meta.url)).text()
+
+const run = () => Function(src)()
+
+beforeEach(() => {
+  document.head.innerHTML = ""
+  document.documentElement.removeAttribute("data-theme")
+  document.documentElement.removeAttribute("data-color-scheme")
+  localStorage.clear()
+  Object.defineProperty(window, "matchMedia", {
+    value: () =>
+      ({
+        matches: false,
+      }) as MediaQueryList,
+    configurable: true,
+  })
+})
+
+describe("theme preload", () => {
+  test("migrates legacy oc-1 to oc-2 before mount", () => {
+    localStorage.setItem("opencode-theme-id", "oc-1")
+    localStorage.setItem("opencode-theme-css-light", "--background-base:#fff;")
+    localStorage.setItem("opencode-theme-css-dark", "--background-base:#000;")
+
+    run()
+
+    expect(document.documentElement.dataset.theme).toBe("oc-2")
+    expect(document.documentElement.dataset.colorScheme).toBe("light")
+    expect(localStorage.getItem("opencode-theme-id")).toBe("oc-2")
+    expect(localStorage.getItem("opencode-theme-css-light")).toBeNull()
+    expect(localStorage.getItem("opencode-theme-css-dark")).toBeNull()
+    expect(document.getElementById("oc-theme-preload")).toBeNull()
+  })
+
+  test("keeps cached css for non-default themes", () => {
+    localStorage.setItem("opencode-theme-id", "nightowl")
+    localStorage.setItem("opencode-theme-css-light", "--background-base:#fff;")
+
+    run()
+
+    expect(document.documentElement.dataset.theme).toBe("nightowl")
+    expect(document.getElementById("oc-theme-preload")?.textContent).toContain("--background-base:#fff;")
+  })
+})

packages/app/src/utils/persist.test.ts

@@ -104,4 +104,12 @@ describe("persist localStorage resilience", () => {
     const result = persistTesting.normalize({ value: "ok" }, '{"value":"\\x"}')
     expect(result).toBeUndefined()
   })
+
+  test("workspace storage sanitizes Windows filename characters", () => {
+    const result = persistTesting.workspaceStorage("C:\\Users\\foo")
+
+    expect(result).toStartWith("opencode.workspace.")
+    expect(result.endsWith(".dat")).toBeTrue()
+    expect(/[:\\/]/.test(result)).toBeFalse()
+  })
 })

packages/app/src/utils/persist.ts

@@ -204,7 +204,7 @@ function normalize(defaults: unknown, raw: string, migrate?: (value: unknown) =>
 }
 
 function workspaceStorage(dir: string) {
-  const head = dir.slice(0, 12) || "workspace"
+  const head = (dir.slice(0, 12) || "workspace").replace(/[^a-zA-Z0-9._-]/g, "-")
   const sum = checksum(dir) ?? "0"
   return `opencode.workspace.${head}.${sum}.dat`
 }
@@ -300,6 +300,7 @@ export const PersistTesting = {
   localStorageDirect,
   localStorageWithPrefix,
   normalize,
+  workspaceStorage,
 }
 
 export const Persist = {

packages/console/app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/console-app",
-  "version": "1.2.21",
+  "version": "1.2.24",
   "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.2.21",
+  "version": "1.2.24",
   "private": true,
   "type": "module",
   "license": "MIT",

packages/console/function/package.json

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

packages/console/mail/package.json

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

packages/desktop-electron/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@opencode-ai/desktop-electron",
   "private": true,
-  "version": "1.2.21",
+  "version": "1.2.24",
   "type": "module",
   "license": "MIT",
   "homepage": "https://opencode.ai",

packages/desktop/package.json

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

packages/enterprise/package.json

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

packages/extensions/zed/extension.toml

@@ -1,7 +1,7 @@
 id = "opencode"
 name = "OpenCode"
 description = "The open source coding agent."
-version = "1.2.21"
+version = "1.2.24"
 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.2.21/opencode-darwin-arm64.zip"
+archive = "https://github.com/anomalyco/opencode/releases/download/v1.2.24/opencode-darwin-arm64.zip"
 cmd = "./opencode"
 args = ["acp"]
 
 [agent_servers.opencode.targets.darwin-x86_64]
-archive = "https://github.com/anomalyco/opencode/releases/download/v1.2.21/opencode-darwin-x64.zip"
+archive = "https://github.com/anomalyco/opencode/releases/download/v1.2.24/opencode-darwin-x64.zip"
 cmd = "./opencode"
 args = ["acp"]
 
 [agent_servers.opencode.targets.linux-aarch64]
-archive = "https://github.com/anomalyco/opencode/releases/download/v1.2.21/opencode-linux-arm64.tar.gz"
+archive = "https://github.com/anomalyco/opencode/releases/download/v1.2.24/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.2.21/opencode-linux-x64.tar.gz"
+archive = "https://github.com/anomalyco/opencode/releases/download/v1.2.24/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.2.21/opencode-windows-x64.zip"
+archive = "https://github.com/anomalyco/opencode/releases/download/v1.2.24/opencode-windows-x64.zip"
 cmd = "./opencode.exe"
 args = ["acp"]

packages/function/package.json

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

packages/opencode/package.json

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

packages/opencode/src/cli/cmd/github.ts

@@ -27,9 +27,8 @@ import { Provider } from "../../provider/provider"
 import { Bus } from "../../bus"
 import { MessageV2 } from "../../session/message-v2"
 import { SessionPrompt } from "@/session/prompt"
+import { $ } from "bun"
 import { setTimeout as sleep } from "node:timers/promises"
-import { Process } from "@/util/process"
-import { git } from "@/util/git"
 
 type GitHubAuthor = {
   login: string
@@ -256,7 +255,7 @@ export const GithubInstallCommand = cmd({
             }
 
             // Get repo info
-            const info = (await git(["remote", "get-url", "origin"], { cwd: Instance.worktree })).text().trim()
+            const info = (await $`git remote get-url origin`.quiet().nothrow().text()).trim()
             const parsed = parseGitHubRemote(info)
             if (!parsed) {
               prompts.log.error(`Could not find git repository. Please run this command from a git repository.`)
@@ -494,26 +493,6 @@ export const GithubRunCommand = cmd({
           ? "pr_review"
           : "issue"
         : undefined
-      const gitText = async (args: string[]) => {
-        const result = await git(args, { cwd: Instance.worktree })
-        if (result.exitCode !== 0) {
-          throw new Process.RunFailedError(["git", ...args], result.exitCode, result.stdout, result.stderr)
-        }
-        return result.text().trim()
-      }
-      const gitRun = async (args: string[]) => {
-        const result = await git(args, { cwd: Instance.worktree })
-        if (result.exitCode !== 0) {
-          throw new Process.RunFailedError(["git", ...args], result.exitCode, result.stdout, result.stderr)
-        }
-        return result
-      }
-      const gitStatus = (args: string[]) => git(args, { cwd: Instance.worktree })
-      const commitChanges = async (summary: string, actor?: string) => {
-        const args = ["commit", "-m", summary]
-        if (actor) args.push("-m", `Co-authored-by: ${actor} <${actor}@users.noreply.github.com>`)
-        await gitRun(args)
-      }
 
       try {
         if (useGithubToken) {
@@ -574,7 +553,7 @@ export const GithubRunCommand = cmd({
           }
           const branchPrefix = isWorkflowDispatchEvent ? "dispatch" : "schedule"
           const branch = await checkoutNewBranch(branchPrefix)
-          const head = await gitText(["rev-parse", "HEAD"])
+          const head = (await $`git rev-parse HEAD`).stdout.toString().trim()
           const response = await chat(userPrompt, promptFiles)
           const { dirty, uncommittedChanges, switched } = await branchIsDirty(head, branch)
           if (switched) {
@@ -608,7 +587,7 @@ export const GithubRunCommand = cmd({
           // Local PR
           if (prData.headRepository.nameWithOwner === prData.baseRepository.nameWithOwner) {
             await checkoutLocalBranch(prData)
-            const head = await gitText(["rev-parse", "HEAD"])
+            const head = (await $`git rev-parse HEAD`).stdout.toString().trim()
             const dataPrompt = buildPromptDataForPR(prData)
             const response = await chat(`${userPrompt}\n\n${dataPrompt}`, promptFiles)
             const { dirty, uncommittedChanges, switched } = await branchIsDirty(head, prData.headRefName)
@@ -626,7 +605,7 @@ export const GithubRunCommand = cmd({
           // Fork PR
           else {
             const forkBranch = await checkoutForkBranch(prData)
-            const head = await gitText(["rev-parse", "HEAD"])
+            const head = (await $`git rev-parse HEAD`).stdout.toString().trim()
             const dataPrompt = buildPromptDataForPR(prData)
             const response = await chat(`${userPrompt}\n\n${dataPrompt}`, promptFiles)
             const { dirty, uncommittedChanges, switched } = await branchIsDirty(head, forkBranch)
@@ -645,7 +624,7 @@ export const GithubRunCommand = cmd({
         // Issue
         else {
           const branch = await checkoutNewBranch("issue")
-          const head = await gitText(["rev-parse", "HEAD"])
+          const head = (await $`git rev-parse HEAD`).stdout.toString().trim()
           const issueData = await fetchIssue()
           const dataPrompt = buildPromptDataForIssue(issueData)
           const response = await chat(`${userPrompt}\n\n${dataPrompt}`, promptFiles)
@@ -679,7 +658,7 @@ export const GithubRunCommand = cmd({
         exitCode = 1
         console.error(e instanceof Error ? e.message : String(e))
         let msg = e
-        if (e instanceof Process.RunFailedError) {
+        if (e instanceof $.ShellError) {
           msg = e.stderr.toString()
         } else if (e instanceof Error) {
           msg = e.message
@@ -1070,29 +1049,29 @@ export const GithubRunCommand = cmd({
         const config = "http.https://github.com/.extraheader"
         // actions/checkout@v6 no longer stores credentials in .git/config,
         // so this may not exist - use nothrow() to handle gracefully
-        const ret = await gitStatus(["config", "--local", "--get", config])
+        const ret = await $`git config --local --get ${config}`.nothrow()
         if (ret.exitCode === 0) {
           gitConfig = ret.stdout.toString().trim()
-          await gitRun(["config", "--local", "--unset-all", config])
+          await $`git config --local --unset-all ${config}`
         }
 
         const newCredentials = Buffer.from(`x-access-token:${appToken}`, "utf8").toString("base64")
 
-        await gitRun(["config", "--local", config, `AUTHORIZATION: basic ${newCredentials}`])
-        await gitRun(["config", "--global", "user.name", AGENT_USERNAME])
-        await gitRun(["config", "--global", "user.email", `${AGENT_USERNAME}@users.noreply.github.com`])
+        await $`git config --local ${config} "AUTHORIZATION: basic ${newCredentials}"`
+        await $`git config --global user.name "${AGENT_USERNAME}"`
+        await $`git config --global user.email "${AGENT_USERNAME}@users.noreply.github.com"`
       }
 
       async function restoreGitConfig() {
         if (gitConfig === undefined) return
         const config = "http.https://github.com/.extraheader"
-        await gitRun(["config", "--local", config, gitConfig])
+        await $`git config --local ${config} "${gitConfig}"`
       }
 
       async function checkoutNewBranch(type: "issue" | "schedule" | "dispatch") {
         console.log("Checking out new branch...")
         const branch = generateBranchName(type)
-        await gitRun(["checkout", "-b", branch])
+        await $`git checkout -b ${branch}`
         return branch
       }
 
@@ -1102,8 +1081,8 @@ export const GithubRunCommand = cmd({
         const branch = pr.headRefName
         const depth = Math.max(pr.commits.totalCount, 20)
 
-        await gitRun(["fetch", "origin", `--depth=${depth}`, branch])
-        await gitRun(["checkout", branch])
+        await $`git fetch origin --depth=${depth} ${branch}`
+        await $`git checkout ${branch}`
       }
 
       async function checkoutForkBranch(pr: GitHubPullRequest) {
@@ -1113,9 +1092,9 @@ export const GithubRunCommand = cmd({
         const localBranch = generateBranchName("pr")
         const depth = Math.max(pr.commits.totalCount, 20)
 
-        await gitRun(["remote", "add", "fork", `https://github.com/${pr.headRepository.nameWithOwner}.git`])
-        await gitRun(["fetch", "fork", `--depth=${depth}`, remoteBranch])
-        await gitRun(["checkout", "-b", localBranch, `fork/${remoteBranch}`])
+        await $`git remote add fork https://github.com/${pr.headRepository.nameWithOwner}.git`
+        await $`git fetch fork --depth=${depth} ${remoteBranch}`
+        await $`git checkout -b ${localBranch} fork/${remoteBranch}`
         return localBranch
       }
 
@@ -1136,23 +1115,28 @@ export const GithubRunCommand = cmd({
       async function pushToNewBranch(summary: string, branch: string, commit: boolean, isSchedule: boolean) {
         console.log("Pushing to new branch...")
         if (commit) {
-          await gitRun(["add", "."])
+          await $`git add .`
           if (isSchedule) {
-            await commitChanges(summary)
+            // No co-author for scheduled events - the schedule is operating as the repo
+            await $`git commit -m "${summary}"`
           } else {
-            await commitChanges(summary, actor)
+            await $`git commit -m "${summary}
+
+Co-authored-by: ${actor} <${actor}@users.noreply.github.com>"`
           }
         }
-        await gitRun(["push", "-u", "origin", branch])
+        await $`git push -u origin ${branch}`
       }
 
       async function pushToLocalBranch(summary: string, commit: boolean) {
         console.log("Pushing to local branch...")
         if (commit) {
-          await gitRun(["add", "."])
-          await commitChanges(summary, actor)
+          await $`git add .`
+          await $`git commit -m "${summary}
+
+Co-authored-by: ${actor} <${actor}@users.noreply.github.com>"`
         }
-        await gitRun(["push"])
+        await $`git push`
       }
 
       async function pushToForkBranch(summary: string, pr: GitHubPullRequest, commit: boolean) {
@@ -1161,28 +1145,30 @@ export const GithubRunCommand = cmd({
         const remoteBranch = pr.headRefName
 
         if (commit) {
-          await gitRun(["add", "."])
-          await commitChanges(summary, actor)
+          await $`git add .`
+          await $`git commit -m "${summary}
+
+Co-authored-by: ${actor} <${actor}@users.noreply.github.com>"`
         }
-        await gitRun(["push", "fork", `HEAD:${remoteBranch}`])
+        await $`git push fork HEAD:${remoteBranch}`
       }
 
       async function branchIsDirty(originalHead: string, expectedBranch: string) {
         console.log("Checking if branch is dirty...")
         // Detect if the agent switched branches during chat (e.g. created
         // its own branch, committed, and possibly pushed/created a PR).
-        const current = await gitText(["rev-parse", "--abbrev-ref", "HEAD"])
+        const current = (await $`git rev-parse --abbrev-ref HEAD`).stdout.toString().trim()
         if (current !== expectedBranch) {
           console.log(`Branch changed during chat: expected ${expectedBranch}, now on ${current}`)
           return { dirty: true, uncommittedChanges: false, switched: true }
         }
 
-        const ret = await gitStatus(["status", "--porcelain"])
+        const ret = await $`git status --porcelain`
         const status = ret.stdout.toString().trim()
         if (status.length > 0) {
           return { dirty: true, uncommittedChanges: true, switched: false }
         }
-        const head = await gitText(["rev-parse", "HEAD"])
+        const head = (await $`git rev-parse HEAD`).stdout.toString().trim()
         return {
           dirty: head !== originalHead,
           uncommittedChanges: false,
@@ -1194,11 +1180,11 @@ export const GithubRunCommand = cmd({
       // Falls back to fetching from origin when local refs are missing
       // (common in shallow clones from actions/checkout).
       async function hasNewCommits(base: string, head: string) {
-        const result = await gitStatus(["rev-list", "--count", `${base}..${head}`])
+        const result = await $`git rev-list --count ${base}..${head}`.nothrow()
         if (result.exitCode !== 0) {
           console.log(`rev-list failed, fetching origin/${base}...`)
-          await gitStatus(["fetch", "origin", base, "--depth=1"])
-          const retry = await gitStatus(["rev-list", "--count", `origin/${base}..${head}`])
+          await $`git fetch origin ${base} --depth=1`.nothrow()
+          const retry = await $`git rev-list --count origin/${base}..${head}`.nothrow()
           if (retry.exitCode !== 0) return true // assume dirty if we can't tell
           return parseInt(retry.stdout.toString().trim()) > 0
         }

packages/opencode/src/cli/cmd/pr.ts

@@ -1,8 +1,7 @@
 import { UI } from "../ui"
 import { cmd } from "./cmd"
 import { Instance } from "@/project/instance"
-import { Process } from "@/util/process"
-import { git } from "@/util/git"
+import { $ } from "bun"
 
 export const PrCommand = cmd({
   command: "pr <number>",
@@ -28,35 +27,21 @@ export const PrCommand = cmd({
         UI.println(`Fetching and checking out PR #${prNumber}...`)
 
         // Use gh pr checkout with custom branch name
-        const result = await Process.run(
-          ["gh", "pr", "checkout", `${prNumber}`, "--branch", localBranchName, "--force"],
-          {
-            nothrow: true,
-          },
-        )
+        const result = await $`gh pr checkout ${prNumber} --branch ${localBranchName} --force`.nothrow()
 
-        if (result.code !== 0) {
+        if (result.exitCode !== 0) {
           UI.error(`Failed to checkout PR #${prNumber}. Make sure you have gh CLI installed and authenticated.`)
           process.exit(1)
         }
 
         // Fetch PR info for fork handling and session link detection
-        const prInfoResult = await Process.text(
-          [
-            "gh",
-            "pr",
-            "view",
-            `${prNumber}`,
-            "--json",
-            "headRepository,headRepositoryOwner,isCrossRepository,headRefName,body",
-          ],
-          { nothrow: true },
-        )
+        const prInfoResult =
+          await $`gh pr view ${prNumber} --json headRepository,headRepositoryOwner,isCrossRepository,headRefName,body`.nothrow()
 
         let sessionId: string | undefined
 
-        if (prInfoResult.code === 0) {
-          const prInfoText = prInfoResult.text
+        if (prInfoResult.exitCode === 0) {
+          const prInfoText = prInfoResult.text()
           if (prInfoText.trim()) {
             const prInfo = JSON.parse(prInfoText)
 
@@ -67,19 +52,15 @@ export const PrCommand = cmd({
               const remoteName = forkOwner
 
               // Check if remote already exists
-              const remotes = (await git(["remote"], { cwd: Instance.worktree })).text().trim()
+              const remotes = (await $`git remote`.nothrow().text()).trim()
               if (!remotes.split("\n").includes(remoteName)) {
-                await git(["remote", "add", remoteName, `https://github.com/${forkOwner}/${forkName}.git`], {
-                  cwd: Instance.worktree,
-                })
+                await $`git remote add ${remoteName} https://github.com/${forkOwner}/${forkName}.git`.nothrow()
                 UI.println(`Added fork remote: ${remoteName}`)
               }
 
               // Set upstream to the fork so pushes go there
               const headRefName = prInfo.headRefName
-              await git(["branch", `--set-upstream-to=${remoteName}/${headRefName}`, localBranchName], {
-                cwd: Instance.worktree,
-              })
+              await $`git branch --set-upstream-to=${remoteName}/${headRefName} ${localBranchName}`.nothrow()
             }
 
             // Check for opencode session link in PR body
@@ -90,11 +71,9 @@ export const PrCommand = cmd({
                 UI.println(`Found opencode session: ${sessionUrl}`)
                 UI.println(`Importing session...`)
 
-                const importResult = await Process.text(["opencode", "import", sessionUrl], {
-                  nothrow: true,
-                })
-                if (importResult.code === 0) {
-                  const importOutput = importResult.text.trim()
+                const importResult = await $`opencode import ${sessionUrl}`.nothrow()
+                if (importResult.exitCode === 0) {
+                  const importOutput = importResult.text().trim()
                   // Extract session ID from the output (format: "Imported session: <session-id>")
                   const sessionIdMatch = importOutput.match(/Imported session: ([a-zA-Z0-9_-]+)/)
                   if (sessionIdMatch) {

packages/opencode/src/cli/cmd/run.ts

@@ -280,6 +280,11 @@ export const RunCommand = cmd({
         type: "string",
         describe: "attach to a running opencode server (e.g., http://localhost:4096)",
       })
+      .option("password", {
+        alias: ["p"],
+        type: "string",
+        describe: "basic auth password (defaults to OPENCODE_SERVER_PASSWORD)",
+      })
       .option("dir", {
         type: "string",
         describe: "directory to run in, path on remote server if attaching",
@@ -648,7 +653,14 @@ export const RunCommand = cmd({
     }
 
     if (args.attach) {
-      const sdk = createOpencodeClient({ baseUrl: args.attach, directory })
+      const headers = (() => {
+        const password = args.password ?? process.env.OPENCODE_SERVER_PASSWORD
+        if (!password) return undefined
+        const username = process.env.OPENCODE_SERVER_USERNAME ?? "opencode"
+        const auth = `Basic ${Buffer.from(`${username}:${password}`).toString("base64")}`
+        return { Authorization: auth }
+      })()
+      const sdk = createOpencodeClient({ baseUrl: args.attach, directory, headers })
       return await execute(sdk)
     }
 

packages/opencode/src/cli/cmd/tui/app.tsx

@@ -20,6 +20,7 @@ import { DialogHelp } from "./ui/dialog-help"
 import { CommandProvider, useCommandDialog } from "@tui/component/dialog-command"
 import { DialogAgent } from "@tui/component/dialog-agent"
 import { DialogSessionList } from "@tui/component/dialog-session-list"
+import { DialogWorkspaceList } from "@tui/component/dialog-workspace-list"
 import { KeybindProvider } from "@tui/context/keybind"
 import { ThemeProvider, useTheme } from "@tui/context/theme"
 import { Home } from "@tui/routes/home"
@@ -111,7 +112,6 @@ export function tui(input: {
   fetch?: typeof fetch
   headers?: RequestInit["headers"]
   events?: EventSource
-  onExit?: () => Promise<void>
 }) {
   // promise to prevent immediate exit
   return new Promise<void>(async (resolve) => {
@@ -126,7 +126,6 @@ export function tui(input: {
 
     const onExit = async () => {
       unguard?.()
-      await input.onExit?.()
       resolve()
     }
 
@@ -373,6 +372,22 @@ function App() {
         dialog.replace(() => <DialogSessionList />)
       },
     },
+    ...(Flag.OPENCODE_EXPERIMENTAL_WORKSPACES_TUI
+      ? [
+          {
+            title: "Manage workspaces",
+            value: "workspace.list",
+            category: "Workspace",
+            suggested: true,
+            slash: {
+              name: "workspaces",
+            },
+            onSelect: () => {
+              dialog.replace(() => <DialogWorkspaceList />)
+            },
+          },
+        ]
+      : []),
     {
       title: "New session",
       suggested: route.data.type === "session",

packages/opencode/src/cli/cmd/tui/component/dialog-workspace-list.tsx

@@ -0,0 +1,326 @@
+import { useDialog } from "@tui/ui/dialog"
+import { DialogSelect } from "@tui/ui/dialog-select"
+import { useRoute } from "@tui/context/route"
+import { useSync } from "@tui/context/sync"
+import { createEffect, createMemo, createSignal, onMount } from "solid-js"
+import type { Session } from "@opencode-ai/sdk/v2"
+import { useSDK } from "../context/sdk"
+import { useToast } from "../ui/toast"
+import { useKeybind } from "../context/keybind"
+import { DialogSessionList } from "./workspace/dialog-session-list"
+import { createOpencodeClient } from "@opencode-ai/sdk/v2"
+
+async function openWorkspace(input: {
+  dialog: ReturnType<typeof useDialog>
+  route: ReturnType<typeof useRoute>
+  sdk: ReturnType<typeof useSDK>
+  sync: ReturnType<typeof useSync>
+  toast: ReturnType<typeof useToast>
+  workspaceID: string
+  forceCreate?: boolean
+}) {
+  const cacheSession = (session: Session) => {
+    input.sync.set(
+      "session",
+      [...input.sync.data.session.filter((item) => item.id !== session.id), session].toSorted((a, b) =>
+        a.id.localeCompare(b.id),
+      ),
+    )
+  }
+
+  const client = createOpencodeClient({
+    baseUrl: input.sdk.url,
+    fetch: input.sdk.fetch,
+    directory: input.sync.data.path.directory || input.sdk.directory,
+    experimental_workspaceID: input.workspaceID,
+  })
+  const listed = input.forceCreate ? undefined : await client.session.list({ roots: true, limit: 1 })
+  const session = listed?.data?.[0]
+  if (session?.id) {
+    cacheSession(session)
+    input.route.navigate({
+      type: "session",
+      sessionID: session.id,
+    })
+    input.dialog.clear()
+    return
+  }
+  let created: Session | undefined
+  while (!created) {
+    const result = await client.session.create({}).catch(() => undefined)
+    if (!result) {
+      input.toast.show({
+        message: "Failed to open workspace",
+        variant: "error",
+      })
+      return
+    }
+    if (result.response.status >= 500 && result.response.status < 600) {
+      await Bun.sleep(1000)
+      continue
+    }
+    if (!result.data) {
+      input.toast.show({
+        message: "Failed to open workspace",
+        variant: "error",
+      })
+      return
+    }
+    created = result.data
+  }
+  cacheSession(created)
+  input.route.navigate({
+    type: "session",
+    sessionID: created.id,
+  })
+  input.dialog.clear()
+}
+
+function DialogWorkspaceCreate(props: { onSelect: (workspaceID: string) => Promise<void> }) {
+  const dialog = useDialog()
+  const sync = useSync()
+  const sdk = useSDK()
+  const toast = useToast()
+  const [creating, setCreating] = createSignal<string>()
+
+  onMount(() => {
+    dialog.setSize("medium")
+  })
+
+  const options = createMemo(() => {
+    const type = creating()
+    if (type) {
+      return [
+        {
+          title: `Creating ${type} workspace...`,
+          value: "creating" as const,
+          description: "This can take a while for remote environments",
+        },
+      ]
+    }
+    return [
+      {
+        title: "Worktree",
+        value: "worktree" as const,
+        description: "Create a local git worktree",
+      },
+    ]
+  })
+
+  const createWorkspace = async (type: string) => {
+    if (creating()) return
+    setCreating(type)
+
+    const result = await sdk.client.experimental.workspace.create({ type, branch: null }).catch((err) => {
+      console.log(err)
+      return undefined
+    })
+    console.log(JSON.stringify(result, null, 2))
+    const workspace = result?.data
+    if (!workspace) {
+      setCreating(undefined)
+      toast.show({
+        message: "Failed to create workspace",
+        variant: "error",
+      })
+      return
+    }
+    await sync.workspace.sync()
+    await props.onSelect(workspace.id)
+    setCreating(undefined)
+  }
+
+  return (
+    <DialogSelect
+      title={creating() ? "Creating Workspace" : "New Workspace"}
+      skipFilter={true}
+      options={options()}
+      onSelect={(option) => {
+        if (option.value === "creating") return
+        void createWorkspace(option.value)
+      }}
+    />
+  )
+}
+
+export function DialogWorkspaceList() {
+  const dialog = useDialog()
+  const route = useRoute()
+  const sync = useSync()
+  const sdk = useSDK()
+  const toast = useToast()
+  const keybind = useKeybind()
+  const [toDelete, setToDelete] = createSignal<string>()
+  const [counts, setCounts] = createSignal<Record<string, number | null | undefined>>({})
+
+  const open = (workspaceID: string, forceCreate?: boolean) =>
+    openWorkspace({
+      dialog,
+      route,
+      sdk,
+      sync,
+      toast,
+      workspaceID,
+      forceCreate,
+    })
+
+  async function selectWorkspace(workspaceID: string) {
+    if (workspaceID === "__local__") {
+      if (localCount() > 0) {
+        dialog.replace(() => <DialogSessionList localOnly={true} />)
+        return
+      }
+      route.navigate({
+        type: "home",
+      })
+      dialog.clear()
+      return
+    }
+    const count = counts()[workspaceID]
+    if (count && count > 0) {
+      dialog.replace(() => <DialogSessionList workspaceID={workspaceID} />)
+      return
+    }
+
+    if (count === 0) {
+      await open(workspaceID)
+      return
+    }
+    const client = createOpencodeClient({
+      baseUrl: sdk.url,
+      fetch: sdk.fetch,
+      directory: sync.data.path.directory || sdk.directory,
+      experimental_workspaceID: workspaceID,
+    })
+    const listed = await client.session.list({ roots: true, limit: 1 }).catch(() => undefined)
+    if (listed?.data?.length) {
+      dialog.replace(() => <DialogSessionList workspaceID={workspaceID} />)
+      return
+    }
+    await open(workspaceID)
+  }
+
+  const currentWorkspaceID = createMemo(() => {
+    if (route.data.type === "session") {
+      return sync.session.get(route.data.sessionID)?.workspaceID ?? "__local__"
+    }
+    return "__local__"
+  })
+
+  const localCount = createMemo(
+    () => sync.data.session.filter((session) => !session.workspaceID && !session.parentID).length,
+  )
+
+  let run = 0
+  createEffect(() => {
+    const workspaces = sync.data.workspaceList
+    const next = ++run
+    if (!workspaces.length) {
+      setCounts({})
+      return
+    }
+    setCounts(Object.fromEntries(workspaces.map((workspace) => [workspace.id, undefined])))
+    void Promise.all(
+      workspaces.map(async (workspace) => {
+        const client = createOpencodeClient({
+          baseUrl: sdk.url,
+          fetch: sdk.fetch,
+          directory: sync.data.path.directory || sdk.directory,
+          experimental_workspaceID: workspace.id,
+        })
+        const result = await client.session.list({ roots: true }).catch(() => undefined)
+        return [workspace.id, result ? (result.data?.length ?? 0) : null] as const
+      }),
+    ).then((entries) => {
+      if (run !== next) return
+      setCounts(Object.fromEntries(entries))
+    })
+  })
+
+  const options = createMemo(() => [
+    {
+      title: "Local",
+      value: "__local__",
+      category: "Workspace",
+      description: "Use the local machine",
+      footer: `${localCount()} session${localCount() === 1 ? "" : "s"}`,
+    },
+    ...sync.data.workspaceList.map((workspace) => {
+      const count = counts()[workspace.id]
+      return {
+        title:
+          toDelete() === workspace.id
+            ? `Delete ${workspace.id}? Press ${keybind.print("session_delete")} again`
+            : workspace.id,
+        value: workspace.id,
+        category: workspace.type,
+        description: workspace.branch ? `Branch ${workspace.branch}` : undefined,
+        footer:
+          count === undefined
+            ? "Loading sessions..."
+            : count === null
+              ? "Sessions unavailable"
+              : `${count} session${count === 1 ? "" : "s"}`,
+      }
+    }),
+    {
+      title: "+ New workspace",
+      value: "__create__",
+      category: "Actions",
+      description: "Create a new workspace",
+    },
+  ])
+
+  onMount(() => {
+    dialog.setSize("large")
+    void sync.workspace.sync()
+  })
+
+  return (
+    <DialogSelect
+      title="Workspaces"
+      skipFilter={true}
+      options={options()}
+      current={currentWorkspaceID()}
+      onMove={() => {
+        setToDelete(undefined)
+      }}
+      onSelect={(option) => {
+        setToDelete(undefined)
+        if (option.value === "__create__") {
+          dialog.replace(() => <DialogWorkspaceCreate onSelect={(workspaceID) => open(workspaceID, true)} />)
+          return
+        }
+        void selectWorkspace(option.value)
+      }}
+      keybind={[
+        {
+          keybind: keybind.all.session_delete?.[0],
+          title: "delete",
+          onTrigger: async (option) => {
+            if (option.value === "__create__" || option.value === "__local__") return
+            if (toDelete() !== option.value) {
+              setToDelete(option.value)
+              return
+            }
+            const result = await sdk.client.experimental.workspace.remove({ id: option.value }).catch(() => undefined)
+            setToDelete(undefined)
+            if (result?.error) {
+              toast.show({
+                message: "Failed to delete workspace",
+                variant: "error",
+              })
+              return
+            }
+            if (currentWorkspaceID() === option.value) {
+              route.navigate({
+                type: "home",
+              })
+            }
+            await sync.workspace.sync()
+          },
+        },
+      ]}
+    />
+  )
+}

packages/opencode/src/cli/cmd/tui/component/prompt/index.tsx

@@ -539,12 +539,25 @@ export function Prompt(props: PromptProps) {
       promptModelWarning()
       return
     }
-    const sessionID = props.sessionID
-      ? props.sessionID
-      : await (async () => {
-          const sessionID = await sdk.client.session.create({}).then((x) => x.data!.id)
-          return sessionID
-        })()
+
+    let sessionID = props.sessionID
+    if (sessionID == null) {
+      const res = await sdk.client.session.create({})
+
+      if (res.error) {
+        console.log("Creating a session failed:", res.error)
+
+        toast.show({
+          message: "Creating a session failed. Open console for more details.",
+          variant: "error",
+        })
+
+        return
+      }
+
+      sessionID = res.data.id
+    }
+
     const messageID = Identifier.ascending("message")
     let inputText = store.prompt.input
 

packages/opencode/src/cli/cmd/tui/component/workspace/dialog-session-list.tsx

@@ -0,0 +1,151 @@
+import { useDialog } from "@tui/ui/dialog"
+import { DialogSelect } from "@tui/ui/dialog-select"
+import { useRoute } from "@tui/context/route"
+import { useSync } from "@tui/context/sync"
+import { createMemo, createSignal, createResource, onMount, Show } from "solid-js"
+import { Locale } from "@/util/locale"
+import { useKeybind } from "../../context/keybind"
+import { useTheme } from "../../context/theme"
+import { useSDK } from "../../context/sdk"
+import { DialogSessionRename } from "../dialog-session-rename"
+import { useKV } from "../../context/kv"
+import { createDebouncedSignal } from "../../util/signal"
+import { Spinner } from "../spinner"
+import { useToast } from "../../ui/toast"
+
+export function DialogSessionList(props: { workspaceID?: string; localOnly?: boolean } = {}) {
+  const dialog = useDialog()
+  const route = useRoute()
+  const sync = useSync()
+  const keybind = useKeybind()
+  const { theme } = useTheme()
+  const sdk = useSDK()
+  const kv = useKV()
+  const toast = useToast()
+  const [toDelete, setToDelete] = createSignal<string>()
+  const [search, setSearch] = createDebouncedSignal("", 150)
+
+  const [listed, listedActions] = createResource(
+    () => props.workspaceID,
+    async (workspaceID) => {
+      if (!workspaceID) return undefined
+      const result = await sdk.client.session.list({ roots: true })
+      return result.data ?? []
+    },
+  )
+
+  const [searchResults] = createResource(search, async (query) => {
+    if (!query || props.localOnly) return undefined
+    const result = await sdk.client.session.list({
+      search: query,
+      limit: 30,
+      ...(props.workspaceID ? { roots: true } : {}),
+    })
+    return result.data ?? []
+  })
+
+  const currentSessionID = createMemo(() => (route.data.type === "session" ? route.data.sessionID : undefined))
+
+  const sessions = createMemo(() => {
+    if (searchResults()) return searchResults()!
+    if (props.workspaceID) return listed() ?? []
+    if (props.localOnly) return sync.data.session.filter((session) => !session.workspaceID)
+    return sync.data.session
+  })
+
+  const options = createMemo(() => {
+    const today = new Date().toDateString()
+    return sessions()
+      .filter((x) => {
+        if (x.parentID !== undefined) return false
+        if (props.workspaceID && listed()) return true
+        if (props.workspaceID) return x.workspaceID === props.workspaceID
+        if (props.localOnly) return !x.workspaceID
+        return true
+      })
+      .toSorted((a, b) => b.time.updated - a.time.updated)
+      .map((x) => {
+        const date = new Date(x.time.updated)
+        let category = date.toDateString()
+        if (category === today) {
+          category = "Today"
+        }
+        const isDeleting = toDelete() === x.id
+        const status = sync.data.session_status?.[x.id]
+        const isWorking = status?.type === "busy"
+        return {
+          title: isDeleting ? `Press ${keybind.print("session_delete")} again to confirm` : x.title,
+          bg: isDeleting ? theme.error : undefined,
+          value: x.id,
+          category,
+          footer: Locale.time(x.time.updated),
+          gutter: isWorking ? <Spinner /> : undefined,
+        }
+      })
+  })
+
+  onMount(() => {
+    dialog.setSize("large")
+  })
+
+  return (
+    <DialogSelect
+      title={props.workspaceID ? `Workspace Sessions` : props.localOnly ? "Local Sessions" : "Sessions"}
+      options={options()}
+      skipFilter={!props.localOnly}
+      current={currentSessionID()}
+      onFilter={setSearch}
+      onMove={() => {
+        setToDelete(undefined)
+      }}
+      onSelect={(option) => {
+        route.navigate({
+          type: "session",
+          sessionID: option.value,
+        })
+        dialog.clear()
+      }}
+      keybind={[
+        {
+          keybind: keybind.all.session_delete?.[0],
+          title: "delete",
+          onTrigger: async (option) => {
+            if (toDelete() === option.value) {
+              const deleted = await sdk.client.session
+                .delete({
+                  sessionID: option.value,
+                })
+                .then(() => true)
+                .catch(() => false)
+              setToDelete(undefined)
+              if (!deleted) {
+                toast.show({
+                  message: "Failed to delete session",
+                  variant: "error",
+                })
+                return
+              }
+              if (props.workspaceID) {
+                listedActions.mutate((sessions) => sessions?.filter((session) => session.id !== option.value))
+                return
+              }
+              sync.set(
+                "session",
+                sync.data.session.filter((session) => session.id !== option.value),
+              )
+              return
+            }
+            setToDelete(option.value)
+          },
+        },
+        {
+          keybind: keybind.all.session_rename?.[0],
+          title: "rename",
+          onTrigger: async (option) => {
+            dialog.replace(() => <DialogSessionRename session={option.value} />)
+          },
+        },
+      ]}
+    />
+  )
+}

packages/opencode/src/cli/cmd/tui/context/exit.tsx

@@ -15,6 +15,7 @@ export const { use: useExit, provider: ExitProvider } = createSimpleContext({
   init: (input: { onExit?: () => Promise<void> }) => {
     const renderer = useRenderer()
     let message: string | undefined
+    let task: Promise<void> | undefined
     const store = {
       set: (value?: string) => {
         const prev = message
@@ -29,20 +30,24 @@ export const { use: useExit, provider: ExitProvider } = createSimpleContext({
       get: () => message,
     }
     const exit: Exit = Object.assign(
-      async (reason?: unknown) => {
-        // Reset window title before destroying renderer
-        renderer.setTerminalTitle("")
-        renderer.destroy()
-        win32FlushInputBuffer()
-        if (reason) {
-          const formatted = FormatError(reason) ?? FormatUnknownError(reason)
-          if (formatted) {
-            process.stderr.write(formatted + "\n")
+      (reason?: unknown) => {
+        if (task) return task
+        task = (async () => {
+          // Reset window title before destroying renderer
+          renderer.setTerminalTitle("")
+          renderer.destroy()
+          win32FlushInputBuffer()
+          if (reason) {
+            const formatted = FormatError(reason) ?? FormatUnknownError(reason)
+            if (formatted) {
+              process.stderr.write(formatted + "\n")
+            }
           }
-        }
-        const text = store.get()
-        if (text) process.stdout.write(text + "\n")
-        await input.onExit?.()
+          const text = store.get()
+          if (text) process.stdout.write(text + "\n")
+          await input.onExit?.()
+        })()
+        return task
       },
       {
         message: store,

packages/opencode/src/cli/cmd/tui/context/sdk.tsx

@@ -5,6 +5,7 @@ import { batch, onCleanup, onMount } from "solid-js"
 
 export type EventSource = {
   on: (handler: (event: Event) => void) => () => void
+  setWorkspace?: (workspaceID?: string) => void
 }
 
 export const { use: useSDK, provider: SDKProvider } = createSimpleContext({
@@ -17,13 +18,21 @@ export const { use: useSDK, provider: SDKProvider } = createSimpleContext({
     events?: EventSource
   }) => {
     const abort = new AbortController()
-    const sdk = createOpencodeClient({
-      baseUrl: props.url,
-      signal: abort.signal,
-      directory: props.directory,
-      fetch: props.fetch,
-      headers: props.headers,
-    })
+    let workspaceID: string | undefined
+    let sse: AbortController | undefined
+
+    function createSDK() {
+      return createOpencodeClient({
+        baseUrl: props.url,
+        signal: abort.signal,
+        directory: props.directory,
+        fetch: props.fetch,
+        headers: props.headers,
+        experimental_workspaceID: workspaceID,
+      })
+    }
+
+    let sdk = createSDK()
 
     const emitter = createGlobalEmitter<{
       [key in Event["type"]]: Extract<Event, { type: key }>
@@ -61,41 +70,56 @@ export const { use: useSDK, provider: SDKProvider } = createSimpleContext({
       flush()
     }
 
-    onMount(async () => {
-      // If an event source is provided, use it instead of SSE
+    function startSSE() {
+      sse?.abort()
+      const ctrl = new AbortController()
+      sse = ctrl
+      ;(async () => {
+        while (true) {
+          if (abort.signal.aborted || ctrl.signal.aborted) break
+          const events = await sdk.event.subscribe({}, { signal: ctrl.signal })
+
+          for await (const event of events.stream) {
+            if (ctrl.signal.aborted) break
+            handleEvent(event)
+          }
+
+          if (timer) clearTimeout(timer)
+          if (queue.length > 0) flush()
+        }
+      })().catch(() => {})
+    }
+
+    onMount(() => {
       if (props.events) {
         const unsub = props.events.on(handleEvent)
         onCleanup(unsub)
-        return
-      }
-
-      // Fall back to SSE
-      while (true) {
-        if (abort.signal.aborted) break
-        const events = await sdk.event.subscribe(
-          {},
-          {
-            signal: abort.signal,
-          },
-        )
-
-        for await (const event of events.stream) {
-          handleEvent(event)
-        }
-
-        // Flush any remaining events
-        if (timer) clearTimeout(timer)
-        if (queue.length > 0) {
-          flush()
-        }
+      } else {
+        startSSE()
       }
     })
 
     onCleanup(() => {
       abort.abort()
+      sse?.abort()
       if (timer) clearTimeout(timer)
     })
 
-    return { client: sdk, event: emitter, url: props.url }
+    return {
+      get client() {
+        return sdk
+      },
+      directory: props.directory,
+      event: emitter,
+      fetch: props.fetch ?? fetch,
+      setWorkspace(next?: string) {
+        if (workspaceID === next) return
+        workspaceID = next
+        sdk = createSDK()
+        props.events?.setWorkspace?.(next)
+        if (!props.events) startSSE()
+      },
+      url: props.url,
+    }
   },
 })

packages/opencode/src/cli/cmd/tui/context/sync.tsx

@@ -28,6 +28,7 @@ import { useArgs } from "./args"
 import { batch, onMount } from "solid-js"
 import { Log } from "@/util/log"
 import type { Path } from "@opencode-ai/sdk"
+import type { Workspace } from "@opencode-ai/sdk/v2"
 
 export const { use: useSync, provider: SyncProvider } = createSimpleContext({
   name: "Sync",
@@ -73,6 +74,7 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
       formatter: FormatterStatus[]
       vcs: VcsInfo | undefined
       path: Path
+      workspaceList: Workspace[]
     }>({
       provider_next: {
         all: [],
@@ -100,10 +102,17 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
       formatter: [],
       vcs: undefined,
       path: { state: "", config: "", worktree: "", directory: "" },
+      workspaceList: [],
     })
 
     const sdk = useSDK()
 
+    async function syncWorkspaces() {
+      const result = await sdk.client.experimental.workspace.list().catch(() => undefined)
+      if (!result?.data) return
+      setStore("workspaceList", reconcile(result.data))
+    }
+
     sdk.event.listen((e) => {
       const event = e.details
       switch (event.type) {
@@ -413,6 +422,7 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
             sdk.client.provider.auth().then((x) => setStore("provider_auth", reconcile(x.data ?? {}))),
             sdk.client.vcs.get().then((x) => setStore("vcs", reconcile(x.data))),
             sdk.client.path.get().then((x) => setStore("path", reconcile(x.data!))),
+            syncWorkspaces(),
           ]).then(() => {
             setStore("status", "complete")
           })
@@ -481,6 +491,12 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
           fullSyncedSessions.add(sessionID)
         },
       },
+      workspace: {
+        get(workspaceID: string) {
+          return store.workspaceList.find((workspace) => workspace.id === workspaceID)
+        },
+        sync: syncWorkspaces,
+      },
       bootstrap,
     }
     return result

packages/opencode/src/cli/cmd/tui/routes/session/header.tsx

@@ -7,6 +7,7 @@ import { SplitBorder } from "@tui/component/border"
 import type { AssistantMessage, Session } from "@opencode-ai/sdk/v2"
 import { useCommandDialog } from "@tui/component/dialog-command"
 import { useKeybind } from "../../context/keybind"
+import { Flag } from "@/flag/flag"
 import { useTerminalDimensions } from "@opentui/solid"
 
 const Title = (props: { session: Accessor<Session> }) => {
@@ -29,6 +30,17 @@ const ContextInfo = (props: { context: Accessor<string | undefined>; cost: Acces
   )
 }
 
+const WorkspaceInfo = (props: { workspace: Accessor<string | undefined> }) => {
+  const { theme } = useTheme()
+  return (
+    <Show when={props.workspace()}>
+      <text fg={theme.textMuted} wrapMode="none" flexShrink={0}>
+        {props.workspace()}
+      </text>
+    </Show>
+  )
+}
+
 export function Header() {
   const route = useRouteData("session")
   const sync = useSync()
@@ -59,6 +71,14 @@ export function Header() {
     return result
   })
 
+  const workspace = createMemo(() => {
+    const id = session()?.workspaceID
+    if (!id) return "Workspace local"
+    const info = sync.workspace.get(id)
+    if (!info) return `Workspace ${id}`
+    return `Workspace ${id} (${info.type})`
+  })
+
   const { theme } = useTheme()
   const keybind = useKeybind()
   const command = useCommandDialog()
@@ -83,9 +103,19 @@ export function Header() {
           <Match when={session()?.parentID}>
             <box flexDirection="column" gap={1}>
               <box flexDirection={narrow() ? "column" : "row"} justifyContent="space-between" gap={narrow() ? 1 : 0}>
-                <text fg={theme.text}>
-                  <b>Subagent session</b>
-                </text>
+                {Flag.OPENCODE_EXPERIMENTAL_WORKSPACES_TUI ? (
+                  <box flexDirection="column">
+                    <text fg={theme.text}>
+                      <b>Subagent session</b>
+                    </text>
+                    <WorkspaceInfo workspace={workspace} />
+                  </box>
+                ) : (
+                  <text fg={theme.text}>
+                    <b>Subagent session</b>
+                  </text>
+                )}
+
                 <ContextInfo context={context} cost={cost} />
               </box>
               <box flexDirection="row" gap={2}>
@@ -124,7 +154,14 @@ export function Header() {
           </Match>
           <Match when={true}>
             <box flexDirection={narrow() ? "column" : "row"} justifyContent="space-between" gap={1}>
-              <Title session={session} />
+              {Flag.OPENCODE_EXPERIMENTAL_WORKSPACES_TUI ? (
+                <box flexDirection="column">
+                  <Title session={session} />
+                  <WorkspaceInfo workspace={workspace} />
+                </box>
+              ) : (
+                <Title session={session} />
+              )}
               <ContextInfo context={context} cost={cost} />
             </box>
           </Match>

packages/opencode/src/cli/cmd/tui/routes/session/index.tsx

@@ -182,6 +182,12 @@ export function Session() {
     return new CustomSpeedScroll(3)
   })
 
+  createEffect(() => {
+    if (session()?.workspaceID) {
+      sdk.setWorkspace(session()?.workspaceID)
+    }
+  })
+
   createEffect(async () => {
     await sync.session
       .sync(route.sessionID)

packages/opencode/src/cli/cmd/tui/thread.ts

@@ -42,6 +42,9 @@ function createWorkerFetch(client: RpcClient): typeof fetch {
 function createEventSource(client: RpcClient): EventSource {
   return {
     on: (handler) => client.on<Event>("event", handler),
+    setWorkspace: (workspaceID) => {
+      void client.call("setWorkspace", { workspaceID })
+    },
   }
 }
 
@@ -110,18 +113,20 @@ export const TuiThreadCommand = cmd({
         return
       }
 
-      // Resolve relative paths against PWD to preserve behavior when using --cwd flag
+      // Resolve relative --project paths from PWD, then use the real cwd after
+      // chdir so the thread and worker share the same directory key.
       const root = Filesystem.resolve(process.env.PWD ?? process.cwd())
-      const cwd = args.project
+      const next = args.project
         ? Filesystem.resolve(path.isAbsolute(args.project) ? args.project : path.join(root, args.project))
-        : root
+        : Filesystem.resolve(process.cwd())
       const file = await target()
       try {
-        process.chdir(cwd)
+        process.chdir(next)
       } catch {
-        UI.error("Failed to change directory to " + cwd)
+        UI.error("Failed to change directory to " + next)
         return
       }
+      const cwd = Filesystem.resolve(process.cwd())
 
       const worker = new Worker(file, {
         env: Object.fromEntries(
@@ -208,7 +213,6 @@ export const TuiThreadCommand = cmd({
             prompt,
             fork: args.fork,
           },
-          onExit: stop,
         })
       } finally {
         await stop()

packages/opencode/src/cli/cmd/tui/util/clipboard.ts

@@ -1,9 +1,9 @@
+import { $ } from "bun"
 import { platform, release } from "os"
 import clipboardy from "clipboardy"
 import { lazy } from "../../../../util/lazy.js"
 import { tmpdir } from "os"
 import path from "path"
-import fs from "fs/promises"
 import { Filesystem } from "../../../../util/filesystem"
 import { Process } from "../../../../util/process"
 import { which } from "../../../../util/which"
@@ -34,38 +34,23 @@ export namespace Clipboard {
     if (os === "darwin") {
       const tmpfile = path.join(tmpdir(), "opencode-clipboard.png")
       try {
-        await Process.run(
-          [
-            "osascript",
-            "-e",
-            'set imageData to the clipboard as "PNGf"',
-            "-e",
-            `set fileRef to open for access POSIX file "${tmpfile}" with write permission`,
-            "-e",
-            "set eof fileRef to 0",
-            "-e",
-            "write imageData to fileRef",
-            "-e",
-            "close access fileRef",
-          ],
-          { nothrow: true },
-        )
+        await $`osascript -e 'set imageData to the clipboard as "PNGf"' -e 'set fileRef to open for access POSIX file "${tmpfile}" with write permission' -e 'set eof fileRef to 0' -e 'write imageData to fileRef' -e 'close access fileRef'`
+          .nothrow()
+          .quiet()
         const buffer = await Filesystem.readBytes(tmpfile)
         return { data: buffer.toString("base64"), mime: "image/png" }
       } catch {
       } finally {
-        await fs.rm(tmpfile, { force: true }).catch(() => {})
+        await $`rm -f "${tmpfile}"`.nothrow().quiet()
       }
     }
 
     if (os === "win32" || release().includes("WSL")) {
       const script =
         "Add-Type -AssemblyName System.Windows.Forms; $img = [System.Windows.Forms.Clipboard]::GetImage(); if ($img) { $ms = New-Object System.IO.MemoryStream; $img.Save($ms, [System.Drawing.Imaging.ImageFormat]::Png); [System.Convert]::ToBase64String($ms.ToArray()) }"
-      const base64 = await Process.text(["powershell.exe", "-NonInteractive", "-NoProfile", "-command", script], {
-        nothrow: true,
-      })
-      if (base64.text) {
-        const imageBuffer = Buffer.from(base64.text.trim(), "base64")
+      const base64 = await $`powershell.exe -NonInteractive -NoProfile -command "${script}"`.nothrow().text()
+      if (base64) {
+        const imageBuffer = Buffer.from(base64.trim(), "base64")
         if (imageBuffer.length > 0) {
           return { data: imageBuffer.toString("base64"), mime: "image/png" }
         }
@@ -73,15 +58,13 @@ export namespace Clipboard {
     }
 
     if (os === "linux") {
-      const wayland = await Process.run(["wl-paste", "-t", "image/png"], { nothrow: true })
-      if (wayland.stdout.byteLength > 0) {
-        return { data: Buffer.from(wayland.stdout).toString("base64"), mime: "image/png" }
+      const wayland = await $`wl-paste -t image/png`.nothrow().arrayBuffer()
+      if (wayland && wayland.byteLength > 0) {
+        return { data: Buffer.from(wayland).toString("base64"), mime: "image/png" }
       }
-      const x11 = await Process.run(["xclip", "-selection", "clipboard", "-t", "image/png", "-o"], {
-        nothrow: true,
-      })
-      if (x11.stdout.byteLength > 0) {
-        return { data: Buffer.from(x11.stdout).toString("base64"), mime: "image/png" }
+      const x11 = await $`xclip -selection clipboard -t image/png -o`.nothrow().arrayBuffer()
+      if (x11 && x11.byteLength > 0) {
+        return { data: Buffer.from(x11).toString("base64"), mime: "image/png" }
       }
     }
 
@@ -98,7 +81,7 @@ export namespace Clipboard {
       console.log("clipboard: using osascript")
       return async (text: string) => {
         const escaped = text.replace(/\\/g, "\\\\").replace(/"/g, '\\"')
-        await Process.run(["osascript", "-e", `set the clipboard to "${escaped}"`], { nothrow: true })
+        await $`osascript -e 'set the clipboard to "${escaped}"'`.nothrow().quiet()
       }
     }
 

packages/opencode/src/cli/cmd/tui/worker.ts

@@ -44,7 +44,7 @@ const eventStream = {
   abort: undefined as AbortController | undefined,
 }
 
-const startEventStream = (directory: string) => {
+const startEventStream = (input: { directory: string; workspaceID?: string }) => {
   if (eventStream.abort) eventStream.abort.abort()
   const abort = new AbortController()
   eventStream.abort = abort
@@ -59,7 +59,8 @@ const startEventStream = (directory: string) => {
 
   const sdk = createOpencodeClient({
     baseUrl: "http://opencode.internal",
-    directory,
+    directory: input.directory,
+    experimental_workspaceID: input.workspaceID,
     fetch: fetchFn,
     signal,
   })
@@ -95,7 +96,7 @@ const startEventStream = (directory: string) => {
   })
 }
 
-startEventStream(process.cwd())
+startEventStream({ directory: process.cwd() })
 
 export const rpc = {
   async fetch(input: { url: string; method: string; headers: Record<string, string>; body?: string }) {
@@ -135,6 +136,9 @@ export const rpc = {
     Config.global.reset()
     await Instance.disposeAll()
   },
+  async setWorkspace(input: { workspaceID?: string }) {
+    startEventStream({ directory: process.cwd(), workspaceID: input.workspaceID })
+  },
   async shutdown() {
     Log.Default.info("worker shutting down")
     if (eventStream.abort) eventStream.abort.abort()

packages/opencode/src/cli/cmd/uninstall.ts

@@ -3,11 +3,11 @@ import { UI } from "../ui"
 import * as prompts from "@clack/prompts"
 import { Installation } from "../../installation"
 import { Global } from "../../global"
+import { $ } from "bun"
 import fs from "fs/promises"
 import path from "path"
 import os from "os"
 import { Filesystem } from "../../util/filesystem"
-import { Process } from "../../util/process"
 
 interface UninstallArgs {
   keepConfig: boolean
@@ -192,13 +192,16 @@ async function executeUninstall(method: Installation.Method, targets: RemovalTar
     const cmd = cmds[method]
     if (cmd) {
       spinner.start(`Running ${cmd.join(" ")}...`)
-      const result = await Process.run(method === "choco" ? ["choco", "uninstall", "opencode", "-y", "-r"] : cmd, {
-        nothrow: true,
-      })
-      if (result.code !== 0) {
-        spinner.stop(`Package manager uninstall failed: exit code ${result.code}`, 1)
-        const text = `${result.stdout.toString("utf8")}\n${result.stderr.toString("utf8")}`
-        if (method === "choco" && text.includes("not running from an elevated command shell")) {
+      const result =
+        method === "choco"
+          ? await $`echo Y | choco uninstall opencode -y -r`.quiet().nothrow()
+          : await $`${cmd}`.quiet().nothrow()
+      if (result.exitCode !== 0) {
+        spinner.stop(`Package manager uninstall failed: exit code ${result.exitCode}`, 1)
+        if (
+          method === "choco" &&
+          result.stdout.toString("utf8").includes("not running from an elevated command shell")
+        ) {
           prompts.log.warn(`You may need to run '${cmd.join(" ")}' from an elevated command shell`)
         } else {
           prompts.log.warn(`You may need to run manually: ${cmd.join(" ")}`)

packages/opencode/src/file/index.ts

@@ -1,5 +1,6 @@
 import { BusEvent } from "@/bus/bus-event"
 import z from "zod"
+import { $ } from "bun"
 import { formatPatch, structuredPatch } from "diff"
 import path from "path"
 import fs from "fs"
@@ -10,7 +11,6 @@ import { Instance } from "../project/instance"
 import { Ripgrep } from "./ripgrep"
 import fuzzysort from "fuzzysort"
 import { Global } from "../global"
-import { git } from "@/util/git"
 
 export namespace File {
   const log = Log.create({ service: "file" })
@@ -418,11 +418,11 @@ export namespace File {
     const project = Instance.project
     if (project.vcs !== "git") return []
 
-    const diffOutput = (
-      await git(["-c", "core.fsmonitor=false", "-c", "core.quotepath=false", "diff", "--numstat", "HEAD"], {
-        cwd: Instance.directory,
-      })
-    ).text()
+    const diffOutput = await $`git -c core.fsmonitor=false -c core.quotepath=false diff --numstat HEAD`
+      .cwd(Instance.directory)
+      .quiet()
+      .nothrow()
+      .text()
 
     const changedFiles: Info[] = []
 
@@ -439,14 +439,12 @@ export namespace File {
       }
     }
 
-    const untrackedOutput = (
-      await git(
-        ["-c", "core.fsmonitor=false", "-c", "core.quotepath=false", "ls-files", "--others", "--exclude-standard"],
-        {
-          cwd: Instance.directory,
-        },
-      )
-    ).text()
+    const untrackedOutput =
+      await $`git -c core.fsmonitor=false -c core.quotepath=false ls-files --others --exclude-standard`
+        .cwd(Instance.directory)
+        .quiet()
+        .nothrow()
+        .text()
 
     if (untrackedOutput.trim()) {
       const untrackedFiles = untrackedOutput.trim().split("\n")
@@ -467,14 +465,12 @@ export namespace File {
     }
 
     // Get deleted files
-    const deletedOutput = (
-      await git(
-        ["-c", "core.fsmonitor=false", "-c", "core.quotepath=false", "diff", "--name-only", "--diff-filter=D", "HEAD"],
-        {
-          cwd: Instance.directory,
-        },
-      )
-    ).text()
+    const deletedOutput =
+      await $`git -c core.fsmonitor=false -c core.quotepath=false diff --name-only --diff-filter=D HEAD`
+        .cwd(Instance.directory)
+        .quiet()
+        .nothrow()
+        .text()
 
     if (deletedOutput.trim()) {
       const deletedFiles = deletedOutput.trim().split("\n")
@@ -545,14 +541,16 @@ export namespace File {
     const content = (await Filesystem.readText(full).catch(() => "")).trim()
 
     if (project.vcs === "git") {
-      let diff = (await git(["-c", "core.fsmonitor=false", "diff", "--", file], { cwd: Instance.directory })).text()
+      let diff = await $`git -c core.fsmonitor=false diff ${file}`.cwd(Instance.directory).quiet().nothrow().text()
       if (!diff.trim()) {
-        diff = (
-          await git(["-c", "core.fsmonitor=false", "diff", "--staged", "--", file], { cwd: Instance.directory })
-        ).text()
+        diff = await $`git -c core.fsmonitor=false diff --staged ${file}`
+          .cwd(Instance.directory)
+          .quiet()
+          .nothrow()
+          .text()
       }
       if (diff.trim()) {
-        const original = (await git(["show", `HEAD:${file}`], { cwd: Instance.directory })).text()
+        const original = await $`git show HEAD:${file}`.cwd(Instance.directory).quiet().nothrow().text()
         const patch = structuredPatch(file, file, original, content, "old", "new", {
           context: Infinity,
           ignoreWhitespace: true,

packages/opencode/src/file/ripgrep.ts

@@ -5,7 +5,7 @@ import fs from "fs/promises"
 import z from "zod"
 import { NamedError } from "@opencode-ai/util/error"
 import { lazy } from "../util/lazy"
-
+import { $ } from "bun"
 import { Filesystem } from "../util/filesystem"
 import { Process } from "../util/process"
 import { which } from "../util/which"
@@ -338,7 +338,7 @@ export namespace Ripgrep {
     limit?: number
     follow?: boolean
   }) {
-    const args = [`${await filepath()}`, "--json", "--hidden", "--glob=!.git/*"]
+    const args = [`${await filepath()}`, "--json", "--hidden", "--glob='!.git/*'"]
     if (input.follow) args.push("--follow")
 
     if (input.glob) {
@@ -354,16 +354,14 @@ export namespace Ripgrep {
     args.push("--")
     args.push(input.pattern)
 
-    const result = await Process.text(args, {
-      cwd: input.cwd,
-      nothrow: true,
-    })
-    if (result.code !== 0) {
+    const command = args.join(" ")
+    const result = await $`${{ raw: command }}`.cwd(input.cwd).quiet().nothrow()
+    if (result.exitCode !== 0) {
       return []
     }
 
     // Handle both Unix (\n) and Windows (\r\n) line endings
-    const lines = result.text.trim().split(/\r?\n/).filter(Boolean)
+    const lines = result.text().trim().split(/\r?\n/).filter(Boolean)
     // Parse JSON lines from ripgrep output
 
     return lines

packages/opencode/src/file/watcher.ts

@@ -11,9 +11,9 @@ import { createWrapper } from "@parcel/watcher/wrapper"
 import { lazy } from "@/util/lazy"
 import { withTimeout } from "@/util/timeout"
 import type ParcelWatcher from "@parcel/watcher"
+import { $ } from "bun"
 import { Flag } from "@/flag/flag"
 import { readdir } from "fs/promises"
-import { git } from "@/util/git"
 
 const SUBSCRIBE_TIMEOUT_MS = 10_000
 
@@ -88,10 +88,13 @@ export namespace FileWatcher {
       }
 
       if (Instance.project.vcs === "git") {
-        const result = await git(["rev-parse", "--git-dir"], {
-          cwd: Instance.worktree,
-        })
-        const vcsDir = result.exitCode === 0 ? path.resolve(Instance.worktree, result.text().trim()) : undefined
+        const vcsDir = await $`git rev-parse --git-dir`
+          .quiet()
+          .nothrow()
+          .cwd(Instance.worktree)
+          .text()
+          .then((x) => path.resolve(Instance.worktree, x.trim()))
+          .catch(() => undefined)
         if (vcsDir && !cfgIgnores.includes(".git") && !cfgIgnores.includes(vcsDir)) {
           const gitDirContents = await readdir(vcsDir).catch(() => [])
           const ignoreList = gitDirContents.filter((entry) => entry !== "HEAD")

packages/opencode/src/flag/flag.ts

@@ -57,6 +57,8 @@ export namespace Flag {
   export const OPENCODE_EXPERIMENTAL_LSP_TOOL = OPENCODE_EXPERIMENTAL || truthy("OPENCODE_EXPERIMENTAL_LSP_TOOL")
   export const OPENCODE_DISABLE_FILETIME_CHECK = truthy("OPENCODE_DISABLE_FILETIME_CHECK")
   export const OPENCODE_EXPERIMENTAL_PLAN_MODE = OPENCODE_EXPERIMENTAL || truthy("OPENCODE_EXPERIMENTAL_PLAN_MODE")
+  export const OPENCODE_EXPERIMENTAL_WORKSPACES_TUI =
+    OPENCODE_EXPERIMENTAL || truthy("OPENCODE_EXPERIMENTAL_WORKSPACES_TUI")
   export const OPENCODE_EXPERIMENTAL_MARKDOWN = !falsy("OPENCODE_EXPERIMENTAL_MARKDOWN")
   export const OPENCODE_MODELS_URL = process.env["OPENCODE_MODELS_URL"]
   export const OPENCODE_MODELS_PATH = process.env["OPENCODE_MODELS_PATH"]

packages/opencode/src/installation/index.ts

@@ -1,12 +1,11 @@
 import { BusEvent } from "@/bus/bus-event"
 import path from "path"
+import { $ } from "bun"
 import z from "zod"
 import { NamedError } from "@opencode-ai/util/error"
 import { Log } from "../util/log"
 import { iife } from "@/util/iife"
 import { Flag } from "../flag/flag"
-import { Process } from "@/util/process"
-import { buffer } from "node:stream/consumers"
 
 declare global {
   const OPENCODE_VERSION: string
@@ -16,38 +15,6 @@ declare global {
 export namespace Installation {
   const log = Log.create({ service: "installation" })
 
-  async function text(cmd: string[], opts: { cwd?: string; env?: NodeJS.ProcessEnv } = {}) {
-    return Process.text(cmd, {
-      cwd: opts.cwd,
-      env: opts.env,
-      nothrow: true,
-    }).then((x) => x.text)
-  }
-
-  async function upgradeCurl(target: string) {
-    const body = await fetch("https://opencode.ai/install").then((res) => {
-      if (!res.ok) throw new Error(res.statusText)
-      return res.text()
-    })
-    const proc = Process.spawn(["bash"], {
-      stdin: "pipe",
-      stdout: "pipe",
-      stderr: "pipe",
-      env: {
-        ...process.env,
-        VERSION: target,
-      },
-    })
-    if (!proc.stdin || !proc.stdout || !proc.stderr) throw new Error("Process output not available")
-    proc.stdin.end(body)
-    const [code, stdout, stderr] = await Promise.all([proc.exited, buffer(proc.stdout), buffer(proc.stderr)])
-    return {
-      code,
-      stdout,
-      stderr,
-    }
-  }
-
   export type Method = Awaited<ReturnType<typeof method>>
 
   export const Event = {
@@ -98,31 +65,31 @@ export namespace Installation {
     const checks = [
       {
         name: "npm" as const,
-        command: () => text(["npm", "list", "-g", "--depth=0"]),
+        command: () => $`npm list -g --depth=0`.throws(false).quiet().text(),
       },
       {
         name: "yarn" as const,
-        command: () => text(["yarn", "global", "list"]),
+        command: () => $`yarn global list`.throws(false).quiet().text(),
       },
       {
         name: "pnpm" as const,
-        command: () => text(["pnpm", "list", "-g", "--depth=0"]),
+        command: () => $`pnpm list -g --depth=0`.throws(false).quiet().text(),
       },
       {
         name: "bun" as const,
-        command: () => text(["bun", "pm", "ls", "-g"]),
+        command: () => $`bun pm ls -g`.throws(false).quiet().text(),
       },
       {
         name: "brew" as const,
-        command: () => text(["brew", "list", "--formula", "opencode"]),
+        command: () => $`brew list --formula opencode`.throws(false).quiet().text(),
       },
       {
         name: "scoop" as const,
-        command: () => text(["scoop", "list", "opencode"]),
+        command: () => $`scoop list opencode`.throws(false).quiet().text(),
       },
       {
         name: "choco" as const,
-        command: () => text(["choco", "list", "--limit-output", "opencode"]),
+        command: () => $`choco list --limit-output opencode`.throws(false).quiet().text(),
       },
     ]
 
@@ -154,70 +121,61 @@ export namespace Installation {
   )
 
   async function getBrewFormula() {
-    const tapFormula = await text(["brew", "list", "--formula", "anomalyco/tap/opencode"])
+    const tapFormula = await $`brew list --formula anomalyco/tap/opencode`.throws(false).quiet().text()
     if (tapFormula.includes("opencode")) return "anomalyco/tap/opencode"
-    const coreFormula = await text(["brew", "list", "--formula", "opencode"])
+    const coreFormula = await $`brew list --formula opencode`.throws(false).quiet().text()
     if (coreFormula.includes("opencode")) return "opencode"
     return "opencode"
   }
 
   export async function upgrade(method: Method, target: string) {
-    let result: Awaited<ReturnType<typeof upgradeCurl>> | undefined
+    let cmd
     switch (method) {
       case "curl":
-        result = await upgradeCurl(target)
+        cmd = $`curl -fsSL https://opencode.ai/install | bash`.env({
+          ...process.env,
+          VERSION: target,
+        })
         break
       case "npm":
-        result = await Process.run(["npm", "install", "-g", `opencode-ai@${target}`], { nothrow: true })
+        cmd = $`npm install -g opencode-ai@${target}`
         break
       case "pnpm":
-        result = await Process.run(["pnpm", "install", "-g", `opencode-ai@${target}`], { nothrow: true })
+        cmd = $`pnpm install -g opencode-ai@${target}`
         break
       case "bun":
-        result = await Process.run(["bun", "install", "-g", `opencode-ai@${target}`], { nothrow: true })
+        cmd = $`bun install -g opencode-ai@${target}`
         break
       case "brew": {
         const formula = await getBrewFormula()
-        const env = {
+        if (formula.includes("/")) {
+          cmd =
+            $`brew tap anomalyco/tap && cd "$(brew --repo anomalyco/tap)" && git pull --ff-only && brew upgrade ${formula}`.env(
+              {
+                HOMEBREW_NO_AUTO_UPDATE: "1",
+                ...process.env,
+              },
+            )
+          break
+        }
+        cmd = $`brew upgrade ${formula}`.env({
           HOMEBREW_NO_AUTO_UPDATE: "1",
           ...process.env,
-        }
-        if (formula.includes("/")) {
-          const tap = await Process.run(["brew", "tap", "anomalyco/tap"], { env, nothrow: true })
-          if (tap.code !== 0) {
-            result = tap
-            break
-          }
-          const repo = await Process.text(["brew", "--repo", "anomalyco/tap"], { env, nothrow: true })
-          if (repo.code !== 0) {
-            result = repo
-            break
-          }
-          const dir = repo.text.trim()
-          if (dir) {
-            const pull = await Process.run(["git", "pull", "--ff-only"], { cwd: dir, env, nothrow: true })
-            if (pull.code !== 0) {
-              result = pull
-              break
-            }
-          }
-        }
-        result = await Process.run(["brew", "upgrade", formula], { env, nothrow: true })
+        })
         break
       }
-
       case "choco":
-        result = await Process.run(["choco", "upgrade", "opencode", `--version=${target}`, "-y"], { nothrow: true })
+        cmd = $`echo Y | choco upgrade opencode --version=${target}`
         break
       case "scoop":
-        result = await Process.run(["scoop", "install", `opencode@${target}`], { nothrow: true })
+        cmd = $`scoop install opencode@${target}`
         break
       default:
         throw new Error(`Unknown method: ${method}`)
     }
-    if (!result || result.code !== 0) {
-      const stderr =
-        method === "choco" ? "not running from an elevated command shell" : result?.stderr.toString("utf8") || ""
+    const result = await cmd.quiet().throws(false)
+    if (result.exitCode !== 0) {
+      const stderr = method === "choco" ? "not running from an elevated command shell" : result.stderr.toString("utf8")
       throw new UpgradeFailedError({
         stderr: stderr,
       })
@@ -228,7 +186,7 @@ export namespace Installation {
       stdout: result.stdout.toString(),
       stderr: result.stderr.toString(),
     })
-    await Process.text([process.execPath, "--version"], { nothrow: true })
+    await $`${process.execPath} --version`.nothrow().quiet().text()
   }
 
   export const VERSION = typeof OPENCODE_VERSION === "string" ? OPENCODE_VERSION : "local"
@@ -241,7 +199,7 @@ export namespace Installation {
     if (detectedMethod === "brew") {
       const formula = await getBrewFormula()
       if (formula.includes("/")) {
-        const infoJson = await text(["brew", "info", "--json=v2", formula])
+        const infoJson = await $`brew info --json=v2 ${formula}`.quiet().text()
         const info = JSON.parse(infoJson)
         const version = info.formulae?.[0]?.versions?.stable
         if (!version) throw new Error(`Could not detect version for tap formula: ${formula}`)
@@ -257,7 +215,7 @@ export namespace Installation {
 
     if (detectedMethod === "npm" || detectedMethod === "bun" || detectedMethod === "pnpm") {
       const registry = await iife(async () => {
-        const r = (await text(["npm", "config", "get", "registry"])).trim()
+        const r = (await $`npm config get registry`.quiet().nothrow().text()).trim()
         const reg = r || "https://registry.npmjs.org"
         return reg.endsWith("/") ? reg.slice(0, -1) : reg
       })

packages/opencode/src/lsp/server.ts

@@ -4,6 +4,7 @@ import os from "os"
 import { Global } from "../global"
 import { Log } from "../util/log"
 import { BunProc } from "../bun"
+import { $ } from "bun"
 import { text } from "node:stream/consumers"
 import fs from "fs/promises"
 import { Filesystem } from "../util/filesystem"
@@ -20,8 +21,6 @@ export namespace LSPServer {
       .stat(p)
       .then(() => true)
       .catch(() => false)
-  const run = (cmd: string[], opts: Process.RunOptions = {}) => Process.run(cmd, { ...opts, nothrow: true })
-  const output = (cmd: string[], opts: Process.RunOptions = {}) => Process.text(cmd, { ...opts, nothrow: true })
 
   export interface Handle {
     process: ChildProcessWithoutNullStreams
@@ -206,8 +205,8 @@ export namespace LSPServer {
         await fs.rename(extractedPath, finalPath)
 
         const npmCmd = process.platform === "win32" ? "npm.cmd" : "npm"
-        await Process.run([npmCmd, "install"], { cwd: finalPath })
-        await Process.run([npmCmd, "run", "compile"], { cwd: finalPath })
+        await $`${npmCmd} install`.cwd(finalPath).quiet()
+        await $`${npmCmd} run compile`.cwd(finalPath).quiet()
 
         log.info("installed VS Code ESLint server", { serverPath })
       }
@@ -603,11 +602,10 @@ export namespace LSPServer {
             recursive: true,
           })
 
-          const cwd = path.join(Global.Path.bin, "elixir-ls-master")
-          const env = { MIX_ENV: "prod", ...process.env }
-          await Process.run(["mix", "deps.get"], { cwd, env })
-          await Process.run(["mix", "compile"], { cwd, env })
-          await Process.run(["mix", "elixir_ls.release2", "-o", "release"], { cwd, env })
+          await $`mix deps.get && mix compile && mix elixir_ls.release2 -o release`
+            .quiet()
+            .cwd(path.join(Global.Path.bin, "elixir-ls-master"))
+            .env({ MIX_ENV: "prod", ...process.env })
 
           log.info(`installed elixir-ls`, {
             path: elixirLsPath,
@@ -708,7 +706,7 @@ export namespace LSPServer {
             })
           if (!ok) return
         } else {
-          await run(["tar", "-xf", tempPath], { cwd: Global.Path.bin })
+          await $`tar -xf ${tempPath}`.cwd(Global.Path.bin).quiet().nothrow()
         }
 
         await fs.rm(tempPath, { force: true })
@@ -721,7 +719,7 @@ export namespace LSPServer {
         }
 
         if (platform !== "win32") {
-          await fs.chmod(bin, 0o755).catch(() => {})
+          await $`chmod +x ${bin}`.quiet().nothrow()
         }
 
         log.info(`installed zls`, { bin })
@@ -833,11 +831,11 @@ export namespace LSPServer {
       // This is specific to macOS where sourcekit-lsp is typically installed with Xcode
       if (!which("xcrun")) return
 
-      const lspLoc = await output(["xcrun", "--find", "sourcekit-lsp"])
+      const lspLoc = await $`xcrun --find sourcekit-lsp`.quiet().nothrow()
 
-      if (lspLoc.code !== 0) return
+      if (lspLoc.exitCode !== 0) return
 
-      const bin = lspLoc.text.trim()
+      const bin = lspLoc.text().trim()
 
       return {
         process: spawn(bin, {
@@ -1012,7 +1010,7 @@ export namespace LSPServer {
         if (!ok) return
       }
       if (tar) {
-        await run(["tar", "-xf", archive], { cwd: Global.Path.bin })
+        await $`tar -xf ${archive}`.cwd(Global.Path.bin).quiet().nothrow()
       }
       await fs.rm(archive, { force: true })
 
@@ -1023,7 +1021,7 @@ export namespace LSPServer {
       }
 
       if (platform !== "win32") {
-        await fs.chmod(bin, 0o755).catch(() => {})
+        await $`chmod +x ${bin}`.quiet().nothrow()
       }
 
       await fs.unlink(path.join(Global.Path.bin, "clangd")).catch(() => {})
@@ -1132,7 +1130,30 @@ export namespace LSPServer {
 
   export const JDTLS: Info = {
     id: "jdtls",
-    root: NearestRoot(["pom.xml", "build.gradle", "build.gradle.kts", ".project", ".classpath"]),
+    root: async (file) => {
+      // Without exclusions, NearestRoot defaults to instance directory so we can't
+      // distinguish between a) no project found and b) project found at instance dir.
+      // So we can't choose the root from (potential) monorepo markers first.
+      // Look for potential subproject markers first while excluding potential monorepo markers.
+      const settingsMarkers = ["settings.gradle", "settings.gradle.kts"]
+      const gradleMarkers = ["gradlew", "gradlew.bat"]
+      const exclusionsForMonorepos = gradleMarkers.concat(settingsMarkers)
+
+      const [projectRoot, wrapperRoot, settingsRoot] = await Promise.all([
+        NearestRoot(
+          ["pom.xml", "build.gradle", "build.gradle.kts", ".project", ".classpath"],
+          exclusionsForMonorepos,
+        )(file),
+        NearestRoot(gradleMarkers, settingsMarkers)(file),
+        NearestRoot(settingsMarkers)(file),
+      ])
+
+      // If projectRoot is undefined we know we are in a monorepo or no project at all.
+      // So can safely fall through to the other roots
+      if (projectRoot) return projectRoot
+      if (wrapperRoot) return wrapperRoot
+      if (settingsRoot) return settingsRoot
+    },
     extensions: [".java"],
     async spawn(root) {
       const java = which("java")
@@ -1140,10 +1161,13 @@ export namespace LSPServer {
         log.error("Java 21 or newer is required to run the JDTLS. Please install it first.")
         return
       }
-      const javaMajorVersion = await run(["java", "-version"]).then((result) => {
-        const m = /"(\d+)\.\d+\.\d+"/.exec(result.stderr.toString())
-        return !m ? undefined : parseInt(m[1])
-      })
+      const javaMajorVersion = await $`java -version`
+        .quiet()
+        .nothrow()
+        .then(({ stderr }) => {
+          const m = /"(\d+)\.\d+\.\d+"/.exec(stderr.toString())
+          return !m ? undefined : parseInt(m[1])
+        })
       if (javaMajorVersion == null || javaMajorVersion < 21) {
         log.error("JDTLS requires at least Java 21.")
         return
@@ -1160,27 +1184,27 @@ export namespace LSPServer {
         const archiveName = "release.tar.gz"
 
         log.info("Downloading JDTLS archive", { url: releaseURL, dest: distPath })
-        const download = await fetch(releaseURL)
-        if (!download.ok || !download.body) {
-          log.error("Failed to download JDTLS", { status: download.status, statusText: download.statusText })
+        const curlResult = await $`curl -L -o ${archiveName} '${releaseURL}'`.cwd(distPath).quiet().nothrow()
+        if (curlResult.exitCode !== 0) {
+          log.error("Failed to download JDTLS", { exitCode: curlResult.exitCode, stderr: curlResult.stderr.toString() })
           return
         }
-        await Filesystem.writeStream(path.join(distPath, archiveName), download.body)
 
         log.info("Extracting JDTLS archive")
-        const tarResult = await run(["tar", "-xzf", archiveName], { cwd: distPath })
-        if (tarResult.code !== 0) {
-          log.error("Failed to extract JDTLS", { exitCode: tarResult.code, stderr: tarResult.stderr.toString() })
+        const tarResult = await $`tar -xzf ${archiveName}`.cwd(distPath).quiet().nothrow()
+        if (tarResult.exitCode !== 0) {
+          log.error("Failed to extract JDTLS", { exitCode: tarResult.exitCode, stderr: tarResult.stderr.toString() })
           return
         }
 
         await fs.rm(path.join(distPath, archiveName), { force: true })
         log.info("JDTLS download and extraction completed")
       }
-      const jarFileName =
-        (await fs.readdir(launcherDir).catch(() => []))
-          .find((item) => /^org\.eclipse\.equinox\.launcher_.*\.jar$/.test(item))
-          ?.trim() ?? ""
+      const jarFileName = await $`ls org.eclipse.equinox.launcher_*.jar`
+        .cwd(launcherDir)
+        .quiet()
+        .nothrow()
+        .then(({ stdout }) => stdout.toString().trim())
       const launcherJar = path.join(launcherDir, jarFileName)
       if (!(await pathExists(launcherJar))) {
         log.error(`Failed to locate the JDTLS launcher module in the installed directory: ${distPath}.`)
@@ -1293,15 +1317,7 @@ export namespace LSPServer {
 
         await fs.mkdir(distPath, { recursive: true })
         const archivePath = path.join(distPath, "kotlin-ls.zip")
-        const download = await fetch(releaseURL)
-        if (!download.ok || !download.body) {
-          log.error("Failed to download Kotlin Language Server", {
-            status: download.status,
-            statusText: download.statusText,
-          })
-          return
-        }
-        await Filesystem.writeStream(archivePath, download.body)
+        await $`curl -L -o '${archivePath}' '${releaseURL}'`.quiet().nothrow()
         const ok = await Archive.extractZip(archivePath, distPath)
           .then(() => true)
           .catch((error) => {
@@ -1311,7 +1327,7 @@ export namespace LSPServer {
         if (!ok) return
         await fs.rm(archivePath, { force: true })
         if (process.platform !== "win32") {
-          await fs.chmod(launcherScript, 0o755).catch(() => {})
+          await $`chmod +x ${launcherScript}`.quiet().nothrow()
         }
         log.info("Installed Kotlin Language Server", { path: launcherScript })
       }
@@ -1475,9 +1491,10 @@ export namespace LSPServer {
             })
           if (!ok) return
         } else {
-          const ok = await run(["tar", "-xzf", tempPath, "-C", installDir])
-            .then((result) => result.code === 0)
-            .catch((error: unknown) => {
+          const ok = await $`tar -xzf ${tempPath} -C ${installDir}`
+            .quiet()
+            .then(() => true)
+            .catch((error) => {
               log.error("Failed to extract lua-language-server archive", { error })
               return false
             })
@@ -1495,15 +1512,11 @@ export namespace LSPServer {
         }
 
         if (platform !== "win32") {
-          const ok = await fs
-            .chmod(bin, 0o755)
-            .then(() => true)
-            .catch((error: unknown) => {
-              log.error("Failed to set executable permission for lua-language-server binary", {
-                error,
-              })
-              return false
+          const ok = await $`chmod +x ${bin}`.quiet().catch((error) => {
+            log.error("Failed to set executable permission for lua-language-server binary", {
+              error,
             })
+          })
           if (!ok) return
         }
 
@@ -1717,7 +1730,7 @@ export namespace LSPServer {
         }
 
         if (platform !== "win32") {
-          await fs.chmod(bin, 0o755).catch(() => {})
+          await $`chmod +x ${bin}`.quiet().nothrow()
         }
 
         log.info(`installed terraform-ls`, { bin })
@@ -1800,7 +1813,7 @@ export namespace LSPServer {
           if (!ok) return
         }
         if (ext === "tar.gz") {
-          await run(["tar", "-xzf", tempPath], { cwd: Global.Path.bin })
+          await $`tar -xzf ${tempPath}`.cwd(Global.Path.bin).quiet().nothrow()
         }
 
         await fs.rm(tempPath, { force: true })
@@ -1813,7 +1826,7 @@ export namespace LSPServer {
         }
 
         if (platform !== "win32") {
-          await fs.chmod(bin, 0o755).catch(() => {})
+          await $`chmod +x ${bin}`.quiet().nothrow()
         }
 
         log.info("installed texlab", { bin })
@@ -2005,7 +2018,7 @@ export namespace LSPServer {
             })
           if (!ok) return
         } else {
-          await run(["tar", "-xzf", tempPath, "--strip-components=1"], { cwd: Global.Path.bin })
+          await $`tar -xzf ${tempPath} --strip-components=1`.cwd(Global.Path.bin).quiet().nothrow()
         }
 
         await fs.rm(tempPath, { force: true })
@@ -2018,7 +2031,7 @@ export namespace LSPServer {
         }
 
         if (platform !== "win32") {
-          await fs.chmod(bin, 0o755).catch(() => {})
+          await $`chmod +x ${bin}`.quiet().nothrow()
         }
 
         log.info("installed tinymist", { bin })

packages/opencode/src/project/vcs.ts

@@ -1,11 +1,11 @@
 import { BusEvent } from "@/bus/bus-event"
 import { Bus } from "@/bus"
+import { $ } from "bun"
 import path from "path"
 import z from "zod"
 import { Log } from "@/util/log"
 import { Instance } from "./instance"
 import { FileWatcher } from "@/file/watcher"
-import { git } from "@/util/git"
 
 const log = Log.create({ service: "vcs" })
 
@@ -29,13 +29,13 @@ export namespace Vcs {
   export type Info = z.infer<typeof Info>
 
   async function currentBranch() {
-    const result = await git(["rev-parse", "--abbrev-ref", "HEAD"], {
-      cwd: Instance.worktree,
-    })
-    if (result.exitCode !== 0) return
-    const text = result.text().trim()
-    if (!text) return
-    return text
+    return $`git rev-parse --abbrev-ref HEAD`
+      .quiet()
+      .nothrow()
+      .cwd(Instance.worktree)
+      .text()
+      .then((x) => x.trim())
+      .catch(() => undefined)
   }
 
   const state = Instance.state(

packages/opencode/src/provider/provider.ts

@@ -480,6 +480,7 @@ export namespace Provider {
 
       const aiGatewayHeaders = {
         "User-Agent": `opencode/${Installation.VERSION} gitlab-ai-provider/${GITLAB_PROVIDER_VERSION} (${os.platform()} ${os.release()}; ${os.arch()})`,
+        "anthropic-beta": "context-1m-2025-08-07",
         ...(providerConfig?.options?.aiGatewayHeaders || {}),
       }
 
@@ -1288,12 +1289,6 @@ export namespace Provider {
       }
     }
 
-    // Check if opencode provider is available before using it
-    const opencodeProvider = await state().then((state) => state.providers["opencode"])
-    if (opencodeProvider && opencodeProvider.models["gpt-5-nano"]) {
-      return getModel("opencode", "gpt-5-nano")
-    }
-
     return undefined
   }
 

packages/opencode/src/provider/transform.ts

@@ -440,7 +440,9 @@ export namespace ProviderTransform {
         const copilotEfforts = iife(() => {
           if (id.includes("5.1-codex-max") || id.includes("5.2") || id.includes("5.3"))
             return [...WIDELY_SUPPORTED_EFFORTS, "xhigh"]
-          return WIDELY_SUPPORTED_EFFORTS
+          const arr = [...WIDELY_SUPPORTED_EFFORTS]
+          if (id.includes("gpt-5") && model.release_date >= "2025-12-04") arr.push("xhigh")
+          return arr
         })
         return Object.fromEntries(
           copilotEfforts.map((effort) => [

packages/opencode/src/snapshot/index.ts

@@ -1,3 +1,4 @@
+import { $ } from "bun"
 import path from "path"
 import fs from "fs/promises"
 import { Filesystem } from "../util/filesystem"
@@ -8,17 +9,12 @@ import z from "zod"
 import { Config } from "../config/config"
 import { Instance } from "../project/instance"
 import { Scheduler } from "../scheduler"
-import { Process } from "@/util/process"
 
 export namespace Snapshot {
   const log = Log.create({ service: "snapshot" })
   const hour = 60 * 60 * 1000
   const prune = "7.days"
 
-  function args(git: string, cmd: string[]) {
-    return ["--git-dir", git, "--work-tree", Instance.worktree, ...cmd]
-  }
-
   export function init() {
     Scheduler.register({
       id: "snapshot.cleanup",
@@ -38,13 +34,13 @@ export namespace Snapshot {
       .then(() => true)
       .catch(() => false)
     if (!exists) return
-    const result = await Process.run(["git", ...args(git, ["gc", `--prune=${prune}`])], {
-      cwd: Instance.directory,
-      nothrow: true,
-    })
-    if (result.code !== 0) {
+    const result = await $`git --git-dir ${git} --work-tree ${Instance.worktree} gc --prune=${prune}`
+      .quiet()
+      .cwd(Instance.directory)
+      .nothrow()
+    if (result.exitCode !== 0) {
       log.warn("cleanup failed", {
-        exitCode: result.code,
+        exitCode: result.exitCode,
         stderr: result.stderr.toString(),
         stdout: result.stdout.toString(),
       })
@@ -59,27 +55,27 @@ export namespace Snapshot {
     if (cfg.snapshot === false) return
     const git = gitdir()
     if (await fs.mkdir(git, { recursive: true })) {
-      await Process.run(["git", "init"], {
-        env: {
+      await $`git init`
+        .env({
           ...process.env,
           GIT_DIR: git,
           GIT_WORK_TREE: Instance.worktree,
-        },
-        nothrow: true,
-      })
-
+        })
+        .quiet()
+        .nothrow()
       // Configure git to not convert line endings on Windows
-      await Process.run(["git", "--git-dir", git, "config", "core.autocrlf", "false"], { nothrow: true })
-      await Process.run(["git", "--git-dir", git, "config", "core.longpaths", "true"], { nothrow: true })
-      await Process.run(["git", "--git-dir", git, "config", "core.symlinks", "true"], { nothrow: true })
-      await Process.run(["git", "--git-dir", git, "config", "core.fsmonitor", "false"], { nothrow: true })
+      await $`git --git-dir ${git} config core.autocrlf false`.quiet().nothrow()
+      await $`git --git-dir ${git} config core.longpaths true`.quiet().nothrow()
+      await $`git --git-dir ${git} config core.symlinks true`.quiet().nothrow()
+      await $`git --git-dir ${git} config core.fsmonitor false`.quiet().nothrow()
       log.info("initialized")
     }
     await add(git)
-    const hash = await Process.text(["git", ...args(git, ["write-tree"])], {
-      cwd: Instance.directory,
-      nothrow: true,
-    }).then((x) => x.text)
+    const hash = await $`git --git-dir ${git} --work-tree ${Instance.worktree} write-tree`
+      .quiet()
+      .cwd(Instance.directory)
+      .nothrow()
+      .text()
     log.info("tracking", { hash, cwd: Instance.directory, git })
     return hash.trim()
   }
@@ -93,32 +89,19 @@ export namespace Snapshot {
   export async function patch(hash: string): Promise<Patch> {
     const git = gitdir()
     await add(git)
-    const result = await Process.text(
-      [
-        "git",
-        "-c",
-        "core.autocrlf=false",
-        "-c",
-        "core.longpaths=true",
-        "-c",
-        "core.symlinks=true",
-        "-c",
-        "core.quotepath=false",
-        ...args(git, ["diff", "--no-ext-diff", "--name-only", hash, "--", "."]),
-      ],
-      {
-        cwd: Instance.directory,
-        nothrow: true,
-      },
-    )
+    const result =
+      await $`git -c core.autocrlf=false -c core.longpaths=true -c core.symlinks=true -c core.quotepath=false --git-dir ${git} --work-tree ${Instance.worktree} diff --no-ext-diff --name-only ${hash} -- .`
+        .quiet()
+        .cwd(Instance.directory)
+        .nothrow()
 
     // If git diff fails, return empty patch
-    if (result.code !== 0) {
-      log.warn("failed to get diff", { hash, exitCode: result.code })
+    if (result.exitCode !== 0) {
+      log.warn("failed to get diff", { hash, exitCode: result.exitCode })
       return { hash, files: [] }
     }
 
-    const files = result.text
+    const files = result.text()
     return {
       hash,
       files: files
@@ -133,37 +116,20 @@ export namespace Snapshot {
   export async function restore(snapshot: string) {
     log.info("restore", { commit: snapshot })
     const git = gitdir()
-    const result = await Process.run(
-      ["git", "-c", "core.longpaths=true", "-c", "core.symlinks=true", ...args(git, ["read-tree", snapshot])],
-      {
-        cwd: Instance.worktree,
-        nothrow: true,
-      },
-    )
-    if (result.code === 0) {
-      const checkout = await Process.run(
-        ["git", "-c", "core.longpaths=true", "-c", "core.symlinks=true", ...args(git, ["checkout-index", "-a", "-f"])],
-        {
-          cwd: Instance.worktree,
-          nothrow: true,
-        },
-      )
-      if (checkout.code === 0) return
+    const result =
+      await $`git -c core.longpaths=true -c core.symlinks=true --git-dir ${git} --work-tree ${Instance.worktree} read-tree ${snapshot} && git -c core.longpaths=true -c core.symlinks=true --git-dir ${git} --work-tree ${Instance.worktree} checkout-index -a -f`
+        .quiet()
+        .cwd(Instance.worktree)
+        .nothrow()
+
+    if (result.exitCode !== 0) {
       log.error("failed to restore snapshot", {
         snapshot,
-        exitCode: checkout.code,
-        stderr: checkout.stderr.toString(),
-        stdout: checkout.stdout.toString(),
+        exitCode: result.exitCode,
+        stderr: result.stderr.toString(),
+        stdout: result.stdout.toString(),
       })
-      return
     }
-
-    log.error("failed to restore snapshot", {
-      snapshot,
-      exitCode: result.code,
-      stderr: result.stderr.toString(),
-      stdout: result.stdout.toString(),
-    })
   }
 
   export async function revert(patches: Patch[]) {
@@ -173,37 +139,19 @@ export namespace Snapshot {
       for (const file of item.files) {
         if (files.has(file)) continue
         log.info("reverting", { file, hash: item.hash })
-        const result = await Process.run(
-          [
-            "git",
-            "-c",
-            "core.longpaths=true",
-            "-c",
-            "core.symlinks=true",
-            ...args(git, ["checkout", item.hash, "--", file]),
-          ],
-          {
-            cwd: Instance.worktree,
-            nothrow: true,
-          },
-        )
-        if (result.code !== 0) {
+        const result =
+          await $`git -c core.longpaths=true -c core.symlinks=true --git-dir ${git} --work-tree ${Instance.worktree} checkout ${item.hash} -- ${file}`
+            .quiet()
+            .cwd(Instance.worktree)
+            .nothrow()
+        if (result.exitCode !== 0) {
           const relativePath = path.relative(Instance.worktree, file)
-          const checkTree = await Process.text(
-            [
-              "git",
-              "-c",
-              "core.longpaths=true",
-              "-c",
-              "core.symlinks=true",
-              ...args(git, ["ls-tree", item.hash, "--", relativePath]),
-            ],
-            {
-              cwd: Instance.worktree,
-              nothrow: true,
-            },
-          )
-          if (checkTree.code === 0 && checkTree.text.trim()) {
+          const checkTree =
+            await $`git -c core.longpaths=true -c core.symlinks=true --git-dir ${git} --work-tree ${Instance.worktree} ls-tree ${item.hash} -- ${relativePath}`
+              .quiet()
+              .cwd(Instance.worktree)
+              .nothrow()
+          if (checkTree.exitCode === 0 && checkTree.text().trim()) {
             log.info("file existed in snapshot but checkout failed, keeping", {
               file,
             })
@@ -220,36 +168,23 @@ export namespace Snapshot {
   export async function diff(hash: string) {
     const git = gitdir()
     await add(git)
-    const result = await Process.text(
-      [
-        "git",
-        "-c",
-        "core.autocrlf=false",
-        "-c",
-        "core.longpaths=true",
-        "-c",
-        "core.symlinks=true",
-        "-c",
-        "core.quotepath=false",
-        ...args(git, ["diff", "--no-ext-diff", hash, "--", "."]),
-      ],
-      {
-        cwd: Instance.worktree,
-        nothrow: true,
-      },
-    )
+    const result =
+      await $`git -c core.autocrlf=false -c core.longpaths=true -c core.symlinks=true -c core.quotepath=false --git-dir ${git} --work-tree ${Instance.worktree} diff --no-ext-diff ${hash} -- .`
+        .quiet()
+        .cwd(Instance.worktree)
+        .nothrow()
 
-    if (result.code !== 0) {
+    if (result.exitCode !== 0) {
       log.warn("failed to get diff", {
         hash,
-        exitCode: result.code,
+        exitCode: result.exitCode,
         stderr: result.stderr.toString(),
         stdout: result.stdout.toString(),
       })
       return ""
     }
 
-    return result.text.trim()
+    return result.text().trim()
   }
 
   export const FileDiff = z
@@ -270,24 +205,12 @@ export namespace Snapshot {
     const result: FileDiff[] = []
     const status = new Map<string, "added" | "deleted" | "modified">()
 
-    const statuses = await Process.text(
-      [
-        "git",
-        "-c",
-        "core.autocrlf=false",
-        "-c",
-        "core.longpaths=true",
-        "-c",
-        "core.symlinks=true",
-        "-c",
-        "core.quotepath=false",
-        ...args(git, ["diff", "--no-ext-diff", "--name-status", "--no-renames", from, to, "--", "."]),
-      ],
-      {
-        cwd: Instance.directory,
-        nothrow: true,
-      },
-    ).then((x) => x.text)
+    const statuses =
+      await $`git -c core.autocrlf=false -c core.longpaths=true -c core.symlinks=true -c core.quotepath=false --git-dir ${git} --work-tree ${Instance.worktree} diff --no-ext-diff --name-status --no-renames ${from} ${to} -- .`
+        .quiet()
+        .cwd(Instance.directory)
+        .nothrow()
+        .text()
 
     for (const line of statuses.trim().split("\n")) {
       if (!line) continue
@@ -297,57 +220,26 @@ export namespace Snapshot {
       status.set(file, kind)
     }
 
-    for (const line of await Process.lines(
-      [
-        "git",
-        "-c",
-        "core.autocrlf=false",
-        "-c",
-        "core.longpaths=true",
-        "-c",
-        "core.symlinks=true",
-        "-c",
-        "core.quotepath=false",
-        ...args(git, ["diff", "--no-ext-diff", "--no-renames", "--numstat", from, to, "--", "."]),
-      ],
-      {
-        cwd: Instance.directory,
-        nothrow: true,
-      },
-    )) {
+    for await (const line of $`git -c core.autocrlf=false -c core.longpaths=true -c core.symlinks=true -c core.quotepath=false --git-dir ${git} --work-tree ${Instance.worktree} diff --no-ext-diff --no-renames --numstat ${from} ${to} -- .`
+      .quiet()
+      .cwd(Instance.directory)
+      .nothrow()
+      .lines()) {
       if (!line) continue
       const [additions, deletions, file] = line.split("\t")
       const isBinaryFile = additions === "-" && deletions === "-"
       const before = isBinaryFile
         ? ""
-        : await Process.text(
-            [
-              "git",
-              "-c",
-              "core.autocrlf=false",
-              "-c",
-              "core.longpaths=true",
-              "-c",
-              "core.symlinks=true",
-              ...args(git, ["show", `${from}:${file}`]),
-            ],
-            { nothrow: true },
-          ).then((x) => x.text)
+        : await $`git -c core.autocrlf=false -c core.longpaths=true -c core.symlinks=true --git-dir ${git} --work-tree ${Instance.worktree} show ${from}:${file}`
+            .quiet()
+            .nothrow()
+            .text()
       const after = isBinaryFile
         ? ""
-        : await Process.text(
-            [
-              "git",
-              "-c",
-              "core.autocrlf=false",
-              "-c",
-              "core.longpaths=true",
-              "-c",
-              "core.symlinks=true",
-              ...args(git, ["show", `${to}:${file}`]),
-            ],
-            { nothrow: true },
-          ).then((x) => x.text)
+        : await $`git -c core.autocrlf=false -c core.longpaths=true -c core.symlinks=true --git-dir ${git} --work-tree ${Instance.worktree} show ${to}:${file}`
+            .quiet()
+            .nothrow()
+            .text()
       const added = isBinaryFile ? 0 : parseInt(additions)
       const deleted = isBinaryFile ? 0 : parseInt(deletions)
       result.push({
@@ -369,22 +261,10 @@ export namespace Snapshot {
 
   async function add(git: string) {
     await syncExclude(git)
-    await Process.run(
-      [
-        "git",
-        "-c",
-        "core.autocrlf=false",
-        "-c",
-        "core.longpaths=true",
-        "-c",
-        "core.symlinks=true",
-        ...args(git, ["add", "."]),
-      ],
-      {
-        cwd: Instance.directory,
-        nothrow: true,
-      },
-    )
+    await $`git -c core.autocrlf=false -c core.longpaths=true -c core.symlinks=true --git-dir ${git} --work-tree ${Instance.worktree} add .`
+      .quiet()
+      .cwd(Instance.directory)
+      .nothrow()
   }
 
   async function syncExclude(git: string) {
@@ -401,10 +281,11 @@ export namespace Snapshot {
   }
 
   async function excludes() {
-    const file = await Process.text(["git", "rev-parse", "--path-format=absolute", "--git-path", "info/exclude"], {
-      cwd: Instance.worktree,
-      nothrow: true,
-    }).then((x) => x.text)
+    const file = await $`git rev-parse --path-format=absolute --git-path info/exclude`
+      .quiet()
+      .cwd(Instance.worktree)
+      .nothrow()
+      .text()
     if (!file.trim()) return
     const exists = await fs
       .stat(file.trim())

packages/opencode/src/storage/storage.ts

@@ -5,10 +5,10 @@ import { Global } from "../global"
 import { Filesystem } from "../util/filesystem"
 import { lazy } from "../util/lazy"
 import { Lock } from "../util/lock"
+import { $ } from "bun"
 import { NamedError } from "@opencode-ai/util/error"
 import z from "zod"
 import { Glob } from "../util/glob"
-import { git } from "@/util/git"
 
 export namespace Storage {
   const log = Log.create({ service: "storage" })
@@ -49,15 +49,18 @@ export namespace Storage {
           }
           if (!worktree) continue
           if (!(await Filesystem.isDir(worktree))) continue
-          const result = await git(["rev-list", "--max-parents=0", "--all"], {
-            cwd: worktree,
-          })
-          const [id] = result
+          const [id] = await $`git rev-list --max-parents=0 --all`
+            .quiet()
+            .nothrow()
+            .cwd(worktree)
             .text()
-            .split("\n")
-            .filter(Boolean)
-            .map((x) => x.trim())
-            .toSorted()
+            .then((x) =>
+              x
+                .split("\n")
+                .filter(Boolean)
+                .map((x) => x.trim())
+                .toSorted(),
+            )
           if (!id) continue
           projectID = id
 

packages/opencode/src/tool/bash.ts

@@ -7,8 +7,8 @@ import { Log } from "../util/log"
 import { Instance } from "../project/instance"
 import { lazy } from "@/util/lazy"
 import { Language } from "web-tree-sitter"
-import fs from "fs/promises"
 
+import { $ } from "bun"
 import { Filesystem } from "@/util/filesystem"
 import { fileURLToPath } from "url"
 import { Flag } from "@/flag/flag.ts"
@@ -116,7 +116,12 @@ export const BashTool = Tool.define("bash", async () => {
         if (["cd", "rm", "cp", "mv", "mkdir", "touch", "chmod", "chown", "cat"].includes(command[0])) {
           for (const arg of command.slice(1)) {
             if (arg.startsWith("-") || (command[0] === "chmod" && arg.startsWith("+"))) continue
-            const resolved = await fs.realpath(path.resolve(cwd, arg)).catch(() => "")
+            const resolved = await $`realpath ${arg}`
+              .cwd(cwd)
+              .quiet()
+              .nothrow()
+              .text()
+              .then((x) => x.trim())
             log.info("resolved path", { arg, resolved })
             if (resolved) {
               const normalized =

packages/opencode/src/util/archive.ts

@@ -1,5 +1,5 @@
+import { $ } from "bun"
 import path from "path"
-import { Process } from "./process"
 
 export namespace Archive {
   export async function extractZip(zipPath: string, destDir: string) {
@@ -8,10 +8,9 @@ export namespace Archive {
       const winDestDir = path.resolve(destDir)
       // $global:ProgressPreference suppresses PowerShell's blue progress bar popup
       const cmd = `$global:ProgressPreference = 'SilentlyContinue'; Expand-Archive -Path '${winZipPath}' -DestinationPath '${winDestDir}' -Force`
-      await Process.run(["powershell", "-NoProfile", "-NonInteractive", "-Command", cmd])
-      return
+      await $`powershell -NoProfile -NonInteractive -Command ${cmd}`.quiet()
+    } else {
+      await $`unzip -o -q ${zipPath} -d ${destDir}`.quiet()
     }
-
-    await Process.run(["unzip", "-o", "-q", zipPath, "-d", destDir])
   }
 }

packages/opencode/src/util/keybind.ts

@@ -23,7 +23,7 @@ export namespace Keybind {
    */
   export function fromParsedKey(key: ParsedKey, leader = false): Info {
     return {
-      name: key.name,
+      name: key.name === " " ? "space" : key.name,
       ctrl: key.ctrl,
       meta: key.meta,
       shift: key.shift,

packages/opencode/src/util/process.ts

@@ -25,10 +25,6 @@ export namespace Process {
     stderr: Buffer
   }
 
-  export interface TextResult extends Result {
-    text: string
-  }
-
   export class RunFailedError extends Error {
     readonly cmd: string[]
     readonly code: number
@@ -118,33 +114,13 @@ export namespace Process {
 
     if (!proc.stdout || !proc.stderr) throw new Error("Process output not available")
 
-    const out = await Promise.all([proc.exited, buffer(proc.stdout), buffer(proc.stderr)])
-      .then(([code, stdout, stderr]) => ({
-        code,
-        stdout,
-        stderr,
-      }))
-      .catch((err: unknown) => {
-        if (!opts.nothrow) throw err
-        return {
-          code: 1,
-          stdout: Buffer.alloc(0),
-          stderr: Buffer.from(err instanceof Error ? err.message : String(err)),
-        }
-      })
+    const [code, stdout, stderr] = await Promise.all([proc.exited, buffer(proc.stdout), buffer(proc.stderr)])
+    const out = {
+      code,
+      stdout,
+      stderr,
+    }
     if (out.code === 0 || opts.nothrow) return out
     throw new RunFailedError(cmd, out.code, out.stdout, out.stderr)
   }
-
-  export async function text(cmd: string[], opts: RunOptions = {}): Promise<TextResult> {
-    const out = await run(cmd, opts)
-    return {
-      ...out,
-      text: out.stdout.toString(),
-    }
-  }
-
-  export async function lines(cmd: string[], opts: RunOptions = {}): Promise<string[]> {
-    return (await text(cmd, opts)).text.split(/\r?\n/).filter(Boolean)
-  }
 }

packages/opencode/src/worktree/index.ts

@@ -1,3 +1,4 @@
+import { $ } from "bun"
 import fs from "fs/promises"
 import path from "path"
 import z from "zod"
@@ -10,8 +11,6 @@ import { Database, eq } from "../storage/db"
 import { ProjectTable } from "../project/project.sql"
 import { fn } from "../util/fn"
 import { Log } from "../util/log"
-import { Process } from "../util/process"
-import { git } from "../util/git"
 import { BusEvent } from "@/bus/bus-event"
 import { GlobalBus } from "@/bus/global"
 
@@ -249,14 +248,14 @@ export namespace Worktree {
   }
 
   async function sweep(root: string) {
-    const first = await git(["clean", "-ffdx"], { cwd: root })
+    const first = await $`git clean -ffdx`.quiet().nothrow().cwd(root)
     if (first.exitCode === 0) return first
 
     const entries = failed(first)
     if (!entries.length) return first
 
     await prune(root, entries)
-    return git(["clean", "-ffdx"], { cwd: root })
+    return $`git clean -ffdx`.quiet().nothrow().cwd(root)
   }
 
   async function canonical(input: string) {
@@ -275,9 +274,7 @@ export namespace Worktree {
       if (await exists(directory)) continue
 
       const ref = `refs/heads/${branch}`
-      const branchCheck = await git(["show-ref", "--verify", "--quiet", ref], {
-        cwd: Instance.worktree,
-      })
+      const branchCheck = await $`git show-ref --verify --quiet ${ref}`.quiet().nothrow().cwd(Instance.worktree)
       if (branchCheck.exitCode === 0) continue
 
       return Info.parse({ name, branch, directory })
@@ -288,9 +285,9 @@ export namespace Worktree {
 
   async function runStartCommand(directory: string, cmd: string) {
     if (process.platform === "win32") {
-      return Process.run(["cmd", "/c", cmd], { cwd: directory, nothrow: true })
+      return $`cmd /c ${cmd}`.nothrow().cwd(directory)
     }
-    return Process.run(["bash", "-lc", cmd], { cwd: directory, nothrow: true })
+    return $`bash -lc ${cmd}`.nothrow().cwd(directory)
   }
 
   type StartKind = "project" | "worktree"
@@ -300,7 +297,7 @@ export namespace Worktree {
     if (!text) return true
 
     const ran = await runStartCommand(directory, text)
-    if (ran.code === 0) return true
+    if (ran.exitCode === 0) return true
 
     log.error("worktree start command failed", {
       kind,
@@ -347,9 +344,10 @@ export namespace Worktree {
   }
 
   export async function createFromInfo(info: Info, startCommand?: string) {
-    const created = await git(["worktree", "add", "--no-checkout", "-b", info.branch, info.directory], {
-      cwd: Instance.worktree,
-    })
+    const created = await $`git worktree add --no-checkout -b ${info.branch} ${info.directory}`
+      .quiet()
+      .nothrow()
+      .cwd(Instance.worktree)
     if (created.exitCode !== 0) {
       throw new CreateFailedError({ message: errorText(created) || "Failed to create git worktree" })
     }
@@ -361,7 +359,7 @@ export namespace Worktree {
 
     return () => {
       const start = async () => {
-        const populated = await git(["reset", "--hard"], { cwd: info.directory })
+        const populated = await $`git reset --hard`.quiet().nothrow().cwd(info.directory)
         if (populated.exitCode !== 0) {
           const message = errorText(populated) || "Failed to populate worktree"
           log.error("worktree checkout failed", { directory: info.directory, message })
@@ -478,10 +476,10 @@ export namespace Worktree {
 
     const stop = async (target: string) => {
       if (!(await exists(target))) return
-      await git(["fsmonitor--daemon", "stop"], { cwd: target })
+      await $`git fsmonitor--daemon stop`.quiet().nothrow().cwd(target)
     }
 
-    const list = await git(["worktree", "list", "--porcelain"], { cwd: Instance.worktree })
+    const list = await $`git worktree list --porcelain`.quiet().nothrow().cwd(Instance.worktree)
     if (list.exitCode !== 0) {
       throw new RemoveFailedError({ message: errorText(list) || "Failed to read git worktrees" })
     }
@@ -498,11 +496,9 @@ export namespace Worktree {
     }
 
     await stop(entry.path)
-    const removed = await git(["worktree", "remove", "--force", entry.path], {
-      cwd: Instance.worktree,
-    })
+    const removed = await $`git worktree remove --force ${entry.path}`.quiet().nothrow().cwd(Instance.worktree)
     if (removed.exitCode !== 0) {
-      const next = await git(["worktree", "list", "--porcelain"], { cwd: Instance.worktree })
+      const next = await $`git worktree list --porcelain`.quiet().nothrow().cwd(Instance.worktree)
       if (next.exitCode !== 0) {
         throw new RemoveFailedError({
           message: errorText(removed) || errorText(next) || "Failed to remove git worktree",
@@ -519,7 +515,7 @@ export namespace Worktree {
 
     const branch = entry.branch?.replace(/^refs\/heads\//, "")
     if (branch) {
-      const deleted = await git(["branch", "-D", branch], { cwd: Instance.worktree })
+      const deleted = await $`git branch -D ${branch}`.quiet().nothrow().cwd(Instance.worktree)
       if (deleted.exitCode !== 0) {
         throw new RemoveFailedError({ message: errorText(deleted) || "Failed to delete worktree branch" })
       }
@@ -539,7 +535,7 @@ export namespace Worktree {
       throw new ResetFailedError({ message: "Cannot reset the primary workspace" })
     }
 
-    const list = await git(["worktree", "list", "--porcelain"], { cwd: Instance.worktree })
+    const list = await $`git worktree list --porcelain`.quiet().nothrow().cwd(Instance.worktree)
     if (list.exitCode !== 0) {
       throw new ResetFailedError({ message: errorText(list) || "Failed to read git worktrees" })
     }
@@ -572,7 +568,7 @@ export namespace Worktree {
       throw new ResetFailedError({ message: "Worktree not found" })
     }
 
-    const remoteList = await git(["remote"], { cwd: Instance.worktree })
+    const remoteList = await $`git remote`.quiet().nothrow().cwd(Instance.worktree)
     if (remoteList.exitCode !== 0) {
       throw new ResetFailedError({ message: errorText(remoteList) || "Failed to list git remotes" })
     }
@@ -591,19 +587,18 @@ export namespace Worktree {
           : ""
 
     const remoteHead = remote
-      ? await git(["symbolic-ref", `refs/remotes/${remote}/HEAD`], { cwd: Instance.worktree })
+      ? await $`git symbolic-ref refs/remotes/${remote}/HEAD`.quiet().nothrow().cwd(Instance.worktree)
       : { exitCode: 1, stdout: undefined, stderr: undefined }
 
     const remoteRef = remoteHead.exitCode === 0 ? outputText(remoteHead.stdout) : ""
     const remoteTarget = remoteRef ? remoteRef.replace(/^refs\/remotes\//, "") : ""
     const remoteBranch = remote && remoteTarget.startsWith(`${remote}/`) ? remoteTarget.slice(`${remote}/`.length) : ""
 
-    const mainCheck = await git(["show-ref", "--verify", "--quiet", "refs/heads/main"], {
-      cwd: Instance.worktree,
-    })
-    const masterCheck = await git(["show-ref", "--verify", "--quiet", "refs/heads/master"], {
-      cwd: Instance.worktree,
-    })
+    const mainCheck = await $`git show-ref --verify --quiet refs/heads/main`.quiet().nothrow().cwd(Instance.worktree)
+    const masterCheck = await $`git show-ref --verify --quiet refs/heads/master`
+      .quiet()
+      .nothrow()
+      .cwd(Instance.worktree)
     const localBranch = mainCheck.exitCode === 0 ? "main" : masterCheck.exitCode === 0 ? "master" : ""
 
     const target = remoteBranch ? `${remote}/${remoteBranch}` : localBranch
@@ -612,7 +607,7 @@ export namespace Worktree {
     }
 
     if (remoteBranch) {
-      const fetch = await git(["fetch", remote, remoteBranch], { cwd: Instance.worktree })
+      const fetch = await $`git fetch ${remote} ${remoteBranch}`.quiet().nothrow().cwd(Instance.worktree)
       if (fetch.exitCode !== 0) {
         throw new ResetFailedError({ message: errorText(fetch) || `Failed to fetch ${target}` })
       }
@@ -624,7 +619,7 @@ export namespace Worktree {
 
     const worktreePath = entry.path
 
-    const resetToTarget = await git(["reset", "--hard", target], { cwd: worktreePath })
+    const resetToTarget = await $`git reset --hard ${target}`.quiet().nothrow().cwd(worktreePath)
     if (resetToTarget.exitCode !== 0) {
       throw new ResetFailedError({ message: errorText(resetToTarget) || "Failed to reset worktree to target" })
     }
@@ -634,26 +629,22 @@ export namespace Worktree {
       throw new ResetFailedError({ message: errorText(clean) || "Failed to clean worktree" })
     }
 
-    const update = await git(["submodule", "update", "--init", "--recursive", "--force"], { cwd: worktreePath })
+    const update = await $`git submodule update --init --recursive --force`.quiet().nothrow().cwd(worktreePath)
     if (update.exitCode !== 0) {
       throw new ResetFailedError({ message: errorText(update) || "Failed to update submodules" })
     }
 
-    const subReset = await git(["submodule", "foreach", "--recursive", "git", "reset", "--hard"], {
-      cwd: worktreePath,
-    })
+    const subReset = await $`git submodule foreach --recursive git reset --hard`.quiet().nothrow().cwd(worktreePath)
     if (subReset.exitCode !== 0) {
       throw new ResetFailedError({ message: errorText(subReset) || "Failed to reset submodules" })
     }
 
-    const subClean = await git(["submodule", "foreach", "--recursive", "git", "clean", "-fdx"], {
-      cwd: worktreePath,
-    })
+    const subClean = await $`git submodule foreach --recursive git clean -fdx`.quiet().nothrow().cwd(worktreePath)
     if (subClean.exitCode !== 0) {
       throw new ResetFailedError({ message: errorText(subClean) || "Failed to clean submodules" })
     }
 
-    const status = await git(["-c", "core.fsmonitor=false", "status", "--porcelain=v1"], { cwd: worktreePath })
+    const status = await $`git -c core.fsmonitor=false status --porcelain=v1`.quiet().nothrow().cwd(worktreePath)
     if (status.exitCode !== 0) {
       throw new ResetFailedError({ message: errorText(status) || "Failed to read git status" })
     }

packages/opencode/test/cli/tui/thread.test.ts

@@ -0,0 +1,157 @@
+import { describe, expect, mock, test } from "bun:test"
+import fs from "fs/promises"
+import path from "path"
+import { tmpdir } from "../../fixture/fixture"
+
+const stop = new Error("stop")
+const seen = {
+  tui: [] as string[],
+  inst: [] as string[],
+}
+
+mock.module("../../../src/cli/cmd/tui/app", () => ({
+  tui: async (input: { directory: string }) => {
+    seen.tui.push(input.directory)
+    throw stop
+  },
+}))
+
+mock.module("@/util/rpc", () => ({
+  Rpc: {
+    client: () => ({
+      call: async () => ({ url: "http://127.0.0.1" }),
+      on: () => {},
+    }),
+  },
+}))
+
+mock.module("@/cli/ui", () => ({
+  UI: {
+    error: () => {},
+  },
+}))
+
+mock.module("@/util/log", () => ({
+  Log: {
+    init: async () => {},
+    create: () => ({
+      error: () => {},
+      info: () => {},
+      warn: () => {},
+      debug: () => {},
+      time: () => ({ stop: () => {} }),
+    }),
+    Default: {
+      error: () => {},
+      info: () => {},
+      warn: () => {},
+      debug: () => {},
+    },
+  },
+}))
+
+mock.module("@/util/timeout", () => ({
+  withTimeout: <T>(input: Promise<T>) => input,
+}))
+
+mock.module("@/cli/network", () => ({
+  withNetworkOptions: <T>(input: T) => input,
+  resolveNetworkOptions: async () => ({
+    mdns: false,
+    port: 0,
+    hostname: "127.0.0.1",
+  }),
+}))
+
+mock.module("../../../src/cli/cmd/tui/win32", () => ({
+  win32DisableProcessedInput: () => {},
+  win32InstallCtrlCGuard: () => undefined,
+}))
+
+mock.module("@/config/tui", () => ({
+  TuiConfig: {
+    get: () => ({}),
+  },
+}))
+
+mock.module("@/project/instance", () => ({
+  Instance: {
+    provide: async (input: { directory: string; fn: () => Promise<unknown> | unknown }) => {
+      seen.inst.push(input.directory)
+      return input.fn()
+    },
+  },
+}))
+
+describe("tui thread", () => {
+  async function call(project?: string) {
+    const { TuiThreadCommand } = await import("../../../src/cli/cmd/tui/thread")
+    const args: Parameters<NonNullable<typeof TuiThreadCommand.handler>>[0] = {
+      _: [],
+      $0: "opencode",
+      project,
+      prompt: "hi",
+      model: undefined,
+      agent: undefined,
+      session: undefined,
+      continue: false,
+      fork: false,
+      port: 0,
+      hostname: "127.0.0.1",
+      mdns: false,
+      "mdns-domain": "opencode.local",
+      mdnsDomain: "opencode.local",
+      cors: [],
+    }
+    return TuiThreadCommand.handler(args)
+  }
+
+  async function check(project?: string) {
+    await using tmp = await tmpdir({ git: true })
+    const cwd = process.cwd()
+    const pwd = process.env.PWD
+    const worker = globalThis.Worker
+    const tty = Object.getOwnPropertyDescriptor(process.stdin, "isTTY")
+    const link = path.join(path.dirname(tmp.path), path.basename(tmp.path) + "-link")
+    const type = process.platform === "win32" ? "junction" : "dir"
+    seen.tui.length = 0
+    seen.inst.length = 0
+    await fs.symlink(tmp.path, link, type)
+
+    Object.defineProperty(process.stdin, "isTTY", {
+      configurable: true,
+      value: true,
+    })
+    globalThis.Worker = class extends EventTarget {
+      onerror = null
+      onmessage = null
+      onmessageerror = null
+      postMessage() {}
+      terminate() {}
+    } as unknown as typeof Worker
+
+    try {
+      process.chdir(tmp.path)
+      process.env.PWD = link
+      await expect(call(project)).rejects.toBe(stop)
+      expect(seen.inst[0]).toBe(tmp.path)
+      expect(seen.tui[0]).toBe(tmp.path)
+    } finally {
+      process.chdir(cwd)
+      if (pwd === undefined) delete process.env.PWD
+      else process.env.PWD = pwd
+      if (tty) Object.defineProperty(process.stdin, "isTTY", tty)
+      else delete (process.stdin as { isTTY?: boolean }).isTTY
+      globalThis.Worker = worker
+      await fs.rm(link, { recursive: true, force: true }).catch(() => undefined)
+    }
+  }
+
+  test("uses the real cwd when PWD points at a symlink", async () => {
+    await check()
+  })
+
+  test("uses the real cwd after resolving a relative project from PWD", async () => {
+    await check(".")
+  })
+})

packages/opencode/test/file/ripgrep.test.ts

@@ -36,4 +36,19 @@ describe("file.ripgrep", () => {
     expect(hasVisible).toBe(true)
     expect(hasHidden).toBe(false)
   })
+
+  test("search returns empty when nothing matches", async () => {
+    await using tmp = await tmpdir({
+      init: async (dir) => {
+        await Bun.write(path.join(dir, "match.ts"), "const value = 'other'\n")
+      },
+    })
+
+    const hits = await Ripgrep.search({
+      cwd: tmp.path,
+      pattern: "needle",
+    })
+
+    expect(hits).toEqual([])
+  })
 })

packages/opencode/test/installation/installation.test.ts

@@ -0,0 +1,47 @@
+import { afterEach, describe, expect, test } from "bun:test"
+import { Installation } from "../../src/installation"
+
+const fetch0 = globalThis.fetch
+
+afterEach(() => {
+  globalThis.fetch = fetch0
+})
+
+describe("installation", () => {
+  test("reads release version from GitHub releases", async () => {
+    globalThis.fetch = (async () =>
+      new Response(JSON.stringify({ tag_name: "v1.2.3" }), {
+        status: 200,
+        headers: { "content-type": "application/json" },
+      })) as unknown as typeof fetch
+
+    expect(await Installation.latest("unknown")).toBe("1.2.3")
+  })
+
+  test("reads scoop manifest versions", async () => {
+    globalThis.fetch = (async () =>
+      new Response(JSON.stringify({ version: "2.3.4" }), {
+        status: 200,
+        headers: { "content-type": "application/json" },
+      })) as unknown as typeof fetch
+
+    expect(await Installation.latest("scoop")).toBe("2.3.4")
+  })
+
+  test("reads chocolatey feed versions", async () => {
+    globalThis.fetch = (async () =>
+      new Response(
+        JSON.stringify({
+          d: {
+            results: [{ Version: "3.4.5" }],
+          },
+        }),
+        {
+          status: 200,
+          headers: { "content-type": "application/json" },
+        },
+      )) as unknown as typeof fetch
+
+    expect(await Installation.latest("choco")).toBe("3.4.5")
+  })
+})

packages/opencode/test/provider/gitlab-duo.test.ts

@@ -198,6 +198,30 @@ test("GitLab Duo: config apiKey takes precedence over environment variable", asy
   })
 })
 
+test("GitLab Duo: includes context-1m beta header in aiGatewayHeaders", async () => {
+  await using tmp = await tmpdir({
+    init: async (dir) => {
+      await Bun.write(
+        path.join(dir, "opencode.json"),
+        JSON.stringify({
+          $schema: "https://opencode.ai/config.json",
+        }),
+      )
+    },
+  })
+  await Instance.provide({
+    directory: tmp.path,
+    init: async () => {
+      Env.set("GITLAB_TOKEN", "test-token")
+    },
+    fn: async () => {
+      const providers = await Provider.list()
+      expect(providers["gitlab"]).toBeDefined()
+      expect(providers["gitlab"].options?.aiGatewayHeaders?.["anthropic-beta"]).toContain("context-1m-2025-08-07")
+    },
+  })
+})
+
 test("GitLab Duo: supports feature flags configuration", async () => {
   await using tmp = await tmpdir({
     init: async (dir) => {

packages/opencode/test/provider/transform.test.ts

@@ -2002,6 +2002,35 @@ describe("ProviderTransform.variants", () => {
       const result = ProviderTransform.variants(model)
       expect(Object.keys(result)).toEqual(["low", "medium", "high", "xhigh"])
     })
+
+    test("gpt-5.3-codex includes xhigh", () => {
+      const model = createMockModel({
+        id: "gpt-5.3-codex",
+        providerID: "github-copilot",
+        api: {
+          id: "gpt-5.3-codex",
+          url: "https://api.githubcopilot.com",
+          npm: "@ai-sdk/github-copilot",
+        },
+      })
+      const result = ProviderTransform.variants(model)
+      expect(Object.keys(result)).toEqual(["low", "medium", "high", "xhigh"])
+    })
+
+    test("gpt-5.4 includes xhigh", () => {
+      const model = createMockModel({
+        id: "gpt-5.4",
+        release_date: "2026-03-05",
+        providerID: "github-copilot",
+        api: {
+          id: "gpt-5.4",
+          url: "https://api.githubcopilot.com",
+          npm: "@ai-sdk/github-copilot",
+        },
+      })
+      const result = ProviderTransform.variants(model)
+      expect(Object.keys(result)).toEqual(["low", "medium", "high", "xhigh"])
+    })
   })
 
   describe("@ai-sdk/cerebras", () => {

packages/opencode/test/util/process.test.ts

@@ -1,5 +1,6 @@
 import { describe, expect, test } from "bun:test"
 import { Process } from "../../src/util/process"
+import { tmpdir } from "../fixture/fixture"
 
 function node(script: string) {
   return [process.execPath, "-e", script]
@@ -56,4 +57,21 @@ describe("util.process", () => {
     expect(out.code).not.toBe(0)
     expect(Date.now() - started).toBeLessThan(1000)
   }, 3000)
+
+  test("uses cwd when spawning commands", async () => {
+    await using tmp = await tmpdir()
+    const out = await Process.run(node("process.stdout.write(process.cwd())"), {
+      cwd: tmp.path,
+    })
+    expect(out.stdout.toString()).toBe(tmp.path)
+  })
+
+  test("merges environment overrides", async () => {
+    const out = await Process.run(node('process.stdout.write(process.env.OPENCODE_TEST ?? "")'), {
+      env: {
+        OPENCODE_TEST: "set",
+      },
+    })
+    expect(out.stdout.toString()).toBe("set")
+  })
 })

packages/plugin/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@opencode-ai/plugin",
-  "version": "1.2.21",
+  "version": "1.2.24",
   "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.2.21",
+  "version": "1.2.24",
   "type": "module",
   "license": "MIT",
   "scripts": {

packages/sdk/js/src/v2/client.ts

@@ -5,7 +5,7 @@ import { type Config } from "./gen/client/types.gen.js"
 import { OpencodeClient } from "./gen/sdk.gen.js"
 export { type Config as OpencodeClientConfig, OpencodeClient }
 
-export function createOpencodeClient(config?: Config & { directory?: string }) {
+export function createOpencodeClient(config?: Config & { directory?: string; experimental_workspaceID?: string }) {
   if (!config?.fetch) {
     const customFetch: any = (req: any) => {
       // @ts-ignore
@@ -27,6 +27,13 @@ export function createOpencodeClient(config?: Config & { directory?: string }) {
     }
   }
 
+  if (config?.experimental_workspaceID) {
+    config.headers = {
+      ...config.headers,
+      "x-opencode-workspace": config.experimental_workspaceID,
+    }
+  }
+
   const client = createClient(config)
   return new OpencodeClient({ client })
 }

packages/slack/package.json

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

packages/ui/package.json

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

packages/ui/src/components/animated-number.css

@@ -9,20 +9,19 @@
     display: inline-flex;
     flex-direction: row-reverse;
     align-items: baseline;
-    justify-content: flex-start;
+    justify-content: flex-end;
     line-height: inherit;
     width: var(--animated-number-width, 1ch);
-    overflow: clip;
-    transition: width var(--tool-motion-spring-ms, 800ms) var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1));
+    overflow: hidden;
+    transition: width var(--tool-motion-spring-ms, 560ms) var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1));
   }
 
   [data-slot="animated-number-digit"] {
     display: inline-block;
-    flex-shrink: 0;
     width: 1ch;
     height: 1em;
     line-height: 1em;
-    overflow: clip;
+    overflow: hidden;
     vertical-align: baseline;
     -webkit-mask-image: linear-gradient(
       to bottom,
@@ -47,7 +46,7 @@
     flex-direction: column;
     transform: translateY(calc(var(--animated-number-offset, 10) * -1em));
     transition-property: transform;
-    transition-duration: var(--animated-number-duration, 600ms);
+    transition-duration: var(--animated-number-duration, 560ms);
     transition-timing-function: var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1));
   }
 

packages/ui/src/components/animated-number.tsx

@@ -1,7 +1,7 @@
 import { For, Index, createEffect, createMemo, createSignal, on } from "solid-js"
 
 const TRACK = Array.from({ length: 30 }, (_, index) => index % 10)
-const DURATION = 800
+const DURATION = 600
 
 function normalize(value: number) {
   return ((value % 10) + 10) % 10
@@ -90,35 +90,10 @@ export function AnimatedNumber(props: { value: number; class?: string }) {
   )
   const width = createMemo(() => `${digits().length}ch`)
 
-  const [exitingDigits, setExitingDigits] = createSignal<number[]>([])
-  let exitTimer: number | undefined
-
-  createEffect(
-    on(
-      digits,
-      (current, prev) => {
-        if (prev && current.length < prev.length) {
-          setExitingDigits(prev.slice(current.length))
-          clearTimeout(exitTimer)
-          exitTimer = window.setTimeout(() => setExitingDigits([]), DURATION)
-        } else {
-          clearTimeout(exitTimer)
-          setExitingDigits([])
-        }
-      },
-      { defer: true },
-    ),
-  )
-
-  const displayDigits = createMemo(() => {
-    const exiting = exitingDigits()
-    return exiting.length ? [...digits(), ...exiting] : digits()
-  })
-
   return (
     <span data-component="animated-number" class={props.class} aria-label={label()}>
       <span data-slot="animated-number-value" style={{ "--animated-number-width": width() }}>
-        <Index each={displayDigits()}>{(digit) => <Digit value={digit()} direction={direction()} />}</Index>
+        <Index each={digits()}>{(digit) => <Digit value={digit()} direction={direction()} />}</Index>
       </span>
     </span>
   )

packages/ui/src/components/basic-tool.css

@@ -8,28 +8,54 @@
   justify-content: flex-start;
 
   [data-slot="basic-tool-tool-trigger-content"] {
-    width: 100%;
-    min-width: 0;
+    width: auto;
     display: flex;
     align-items: center;
     align-self: stretch;
     gap: 8px;
   }
 
+  [data-slot="basic-tool-tool-indicator"] {
+    width: 16px;
+    height: 16px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+
+    [data-component="spinner"] {
+      width: 16px;
+      height: 16px;
+    }
+  }
+
+  [data-slot="basic-tool-tool-spinner"] {
+    width: 16px;
+    height: 16px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    color: var(--text-weak);
+
+    [data-component="spinner"] {
+      width: 16px;
+      height: 16px;
+    }
+  }
+
   [data-slot="icon-svg"] {
     flex-shrink: 0;
   }
 
   [data-slot="basic-tool-tool-info"] {
-    flex: 1 1 auto;
+    flex: 0 1 auto;
     min-width: 0;
     font-size: 14px;
   }
 
   [data-slot="basic-tool-tool-info-structured"] {
     width: auto;
-    max-width: 100%;
-    min-width: 0;
     display: flex;
     align-items: center;
     gap: 8px;
@@ -37,12 +63,11 @@
   }
 
   [data-slot="basic-tool-tool-info-main"] {
-    flex: 0 1 auto;
     display: flex;
-    align-items: center;
+    align-items: baseline;
     gap: 8px;
     min-width: 0;
-    overflow: clip;
+    overflow: hidden;
   }
 
   [data-slot="basic-tool-tool-title"] {
@@ -54,14 +79,22 @@
     line-height: var(--line-height-large);
     letter-spacing: var(--letter-spacing-normal);
     color: var(--text-strong);
+
+    &.capitalize {
+      text-transform: capitalize;
+    }
+
+    &.agent-title {
+      color: var(--text-strong);
+      font-weight: var(--font-weight-medium);
+    }
   }
 
   [data-slot="basic-tool-tool-subtitle"] {
-    display: inline-block;
-    flex: 0 1 auto;
-    max-width: 100%;
+    flex-shrink: 1;
     min-width: 0;
-    overflow: clip;
+    overflow: hidden;
+    text-overflow: ellipsis;
     white-space: nowrap;
     font-family: var(--font-family-sans);
     font-variant-numeric: tabular-nums;
@@ -106,7 +139,8 @@
   [data-slot="basic-tool-tool-arg"] {
     flex-shrink: 1;
     min-width: 0;
-    overflow: clip;
+    overflow: hidden;
+    text-overflow: ellipsis;
     white-space: nowrap;
     font-family: var(--font-family-sans);
     font-variant-numeric: tabular-nums;

packages/ui/src/components/basic-tool.tsx

@@ -1,20 +1,8 @@
-import {
-  createEffect,
-  createSignal,
-  For,
-  Match,
-  on,
-  onCleanup,
-  onMount,
-  Show,
-  splitProps,
-  Switch,
-  type JSX,
-} from "solid-js"
-import { animate, type AnimationPlaybackControls, tunableSpringValue, COLLAPSIBLE_SPRING } from "./motion"
+import { createEffect, createSignal, For, Match, on, onCleanup, Show, Switch, type JSX } from "solid-js"
+import { animate, type AnimationPlaybackControls } from "motion"
 import { Collapsible } from "./collapsible"
+import type { IconProps } from "./icon"
 import { TextShimmer } from "./text-shimmer"
-import { hold } from "./tool-utils"
 
 export type TriggerTitle = {
   title: string
@@ -32,99 +20,26 @@ const isTriggerTitle = (val: any): val is TriggerTitle => {
   )
 }
 
-interface ToolCallPanelBaseProps {
-  icon: string
+export interface BasicToolProps {
+  icon: IconProps["name"]
   trigger: TriggerTitle | JSX.Element
   children?: JSX.Element
   status?: string
-  animate?: boolean
   hideDetails?: boolean
   defaultOpen?: boolean
   forceOpen?: boolean
   defer?: boolean
   locked?: boolean
-  watchDetails?: boolean
-  springContent?: boolean
+  animated?: boolean
   onSubtitleClick?: () => void
 }
 
-function ToolCallTriggerBody(props: {
-  trigger: TriggerTitle | JSX.Element
-  pending: boolean
-  onSubtitleClick?: () => void
-  arrow?: boolean
-}) {
-  return (
-    <div data-component="tool-trigger" data-arrow={props.arrow ? "" : undefined}>
-      <div data-slot="basic-tool-tool-trigger-content">
-        <div data-slot="basic-tool-tool-info">
-          <Switch>
-            <Match when={isTriggerTitle(props.trigger) && props.trigger}>
-              {(trigger) => (
-                <div data-slot="basic-tool-tool-info-structured">
-                  <div data-slot="basic-tool-tool-info-main">
-                    <span
-                      data-slot="basic-tool-tool-title"
-                      classList={{
-                        [trigger().titleClass ?? ""]: !!trigger().titleClass,
-                      }}
-                    >
-                      <TextShimmer text={trigger().title} active={props.pending} />
-                    </span>
-                    <Show when={!props.pending}>
-                      <Show when={trigger().subtitle}>
-                        <span
-                          data-slot="basic-tool-tool-subtitle"
-                          classList={{
-                            [trigger().subtitleClass ?? ""]: !!trigger().subtitleClass,
-                            clickable: !!props.onSubtitleClick,
-                          }}
-                          onClick={(e) => {
-                            if (!props.onSubtitleClick) return
-                            e.stopPropagation()
-                            props.onSubtitleClick()
-                          }}
-                        >
-                          {trigger().subtitle}
-                        </span>
-                      </Show>
-                      <Show when={trigger().args?.length}>
-                        <For each={trigger().args}>
-                          {(arg) => (
-                            <span
-                              data-slot="basic-tool-tool-arg"
-                              classList={{
-                                [trigger().argsClass ?? ""]: !!trigger().argsClass,
-                              }}
-                            >
-                              {arg}
-                            </span>
-                          )}
-                        </For>
-                      </Show>
-                    </Show>
-                  </div>
-                  <Show when={!props.pending && trigger().action}>{trigger().action}</Show>
-                </div>
-              )}
-            </Match>
-            <Match when={true}>{props.trigger as JSX.Element}</Match>
-          </Switch>
-        </div>
-      </div>
-      <Show when={props.arrow}>
-        <Collapsible.Arrow />
-      </Show>
-    </div>
-  )
-}
+const SPRING = { type: "spring" as const, visualDuration: 0.35, bounce: 0 }
 
-function ToolCallPanel(props: ToolCallPanelBaseProps) {
+export function BasicTool(props: BasicToolProps) {
   const [open, setOpen] = createSignal(props.defaultOpen ?? false)
   const [ready, setReady] = createSignal(open())
-  const pendingRaw = () => props.status === "pending" || props.status === "running"
-  const pending = hold(pendingRaw, 1000)
-  const watchDetails = () => props.watchDetails !== false
+  const pending = () => props.status === "pending" || props.status === "running"
 
   let frame: number | undefined
 
@@ -144,7 +59,7 @@ function ToolCallPanel(props: ToolCallPanelBaseProps) {
     on(
       open,
       (value) => {
-        if (!props.defer || props.springContent) return
+        if (!props.defer) return
         if (!value) {
           cancel()
           setReady(false)
@@ -162,110 +77,36 @@ function ToolCallPanel(props: ToolCallPanelBaseProps) {
     ),
   )
 
-  // Animated content height — single springValue drives all height changes
+  // Animated height for collapsible open/close
   let contentRef: HTMLDivElement | undefined
-  let bodyRef: HTMLDivElement | undefined
-  let fadeAnim: AnimationPlaybackControls | undefined
-  let observer: ResizeObserver | undefined
-  let resizeFrame: number | undefined
+  let heightAnim: AnimationPlaybackControls | undefined
   const initialOpen = open()
-  const heightSpring = tunableSpringValue<number>(0, COLLAPSIBLE_SPRING)
-
-  const read = () => Math.max(0, Math.ceil(bodyRef?.getBoundingClientRect().height ?? 0))
-
-  const doOpen = () => {
-    if (!contentRef || !bodyRef) return
-    contentRef.style.display = ""
-    // Ensure fade starts from 0 if content was hidden (first open or after close cleared styles)
-    if (bodyRef.style.opacity === "") {
-      bodyRef.style.opacity = "0"
-      bodyRef.style.filter = "blur(2px)"
-    }
-    const next = read()
-    fadeAnim?.stop()
-    fadeAnim = animate(bodyRef, { opacity: 1, filter: "blur(0px)" }, COLLAPSIBLE_SPRING)
-    fadeAnim.finished.then(() => {
-      if (!bodyRef) return
-      bodyRef.style.opacity = ""
-      bodyRef.style.filter = ""
-    })
-    heightSpring.set(next)
-  }
-
-  const doClose = () => {
-    if (!contentRef || !bodyRef) return
-    fadeAnim?.stop()
-    fadeAnim = animate(bodyRef, { opacity: 0, filter: "blur(2px)" }, COLLAPSIBLE_SPRING)
-    fadeAnim.finished.then(() => {
-      if (!contentRef || open()) return
-      contentRef.style.display = "none"
-    })
-    heightSpring.set(0)
-  }
-
-  const grow = () => {
-    if (!contentRef || !open()) return
-    const next = read()
-    if (Math.abs(next - heightSpring.get()) < 1) return
-    heightSpring.set(next)
-  }
-
-  onMount(() => {
-    if (!props.springContent || props.animate === false || !contentRef || !bodyRef) return
-
-    const offChange = heightSpring.on("change", (v) => {
-      if (!contentRef) return
-      contentRef.style.height = `${Math.max(0, Math.ceil(v))}px`
-    })
-    onCleanup(() => {
-      offChange()
-    })
-
-    if (watchDetails()) {
-      observer = new ResizeObserver(() => {
-        if (resizeFrame !== undefined) return
-        resizeFrame = requestAnimationFrame(() => {
-          resizeFrame = undefined
-          grow()
-        })
-      })
-      observer.observe(bodyRef)
-    }
-
-    if (!open()) return
-    if (contentRef.style.display !== "none") {
-      const next = read()
-      heightSpring.jump(next)
-      contentRef.style.height = `${next}px`
-      return
-    }
-    let mountFrame: number | undefined = requestAnimationFrame(() => {
-      mountFrame = undefined
-      if (!open()) return
-      doOpen()
-    })
-    onCleanup(() => {
-      if (mountFrame !== undefined) cancelAnimationFrame(mountFrame)
-    })
-  })
 
   createEffect(
     on(
       open,
       (isOpen) => {
-        if (!props.springContent || props.animate === false || !contentRef) return
-        if (isOpen) doOpen()
-        else doClose()
+        if (!props.animated || !contentRef) return
+        heightAnim?.stop()
+        if (isOpen) {
+          contentRef.style.overflow = "hidden"
+          heightAnim = animate(contentRef, { height: "auto" }, SPRING)
+          heightAnim.finished.then(() => {
+            if (!contentRef || !open()) return
+            contentRef.style.overflow = "visible"
+            contentRef.style.height = "auto"
+          })
+        } else {
+          contentRef.style.overflow = "hidden"
+          heightAnim = animate(contentRef, { height: "0px" }, SPRING)
+        }
       },
       { defer: true },
     ),
   )
 
   onCleanup(() => {
-    if (resizeFrame !== undefined) cancelAnimationFrame(resizeFrame)
-    observer?.disconnect()
-    fadeAnim?.stop()
-    heightSpring.destroy()
+    heightAnim?.stop()
   })
 
   const handleOpenChange = (value: boolean) => {
@@ -277,34 +118,85 @@ function ToolCallPanel(props: ToolCallPanelBaseProps) {
   return (
     <Collapsible open={open()} onOpenChange={handleOpenChange} class="tool-collapsible">
       <Collapsible.Trigger>
-        <ToolCallTriggerBody
-          trigger={props.trigger}
-          pending={pending()}
-          onSubtitleClick={props.onSubtitleClick}
-          arrow={!!props.children && !props.hideDetails && !props.locked && !pending()}
-        />
+        <div data-component="tool-trigger">
+          <div data-slot="basic-tool-tool-trigger-content">
+            <div data-slot="basic-tool-tool-info">
+              <Switch>
+                <Match when={isTriggerTitle(props.trigger) && props.trigger}>
+                  {(trigger) => (
+                    <div data-slot="basic-tool-tool-info-structured">
+                      <div data-slot="basic-tool-tool-info-main">
+                        <span
+                          data-slot="basic-tool-tool-title"
+                          classList={{
+                            [trigger().titleClass ?? ""]: !!trigger().titleClass,
+                          }}
+                        >
+                          <TextShimmer text={trigger().title} active={pending()} />
+                        </span>
+                        <Show when={!pending()}>
+                          <Show when={trigger().subtitle}>
+                            <span
+                              data-slot="basic-tool-tool-subtitle"
+                              classList={{
+                                [trigger().subtitleClass ?? ""]: !!trigger().subtitleClass,
+                                clickable: !!props.onSubtitleClick,
+                              }}
+                              onClick={(e) => {
+                                if (props.onSubtitleClick) {
+                                  e.stopPropagation()
+                                  props.onSubtitleClick()
+                                }
+                              }}
+                            >
+                              {trigger().subtitle}
+                            </span>
+                          </Show>
+                          <Show when={trigger().args?.length}>
+                            <For each={trigger().args}>
+                              {(arg) => (
+                                <span
+                                  data-slot="basic-tool-tool-arg"
+                                  classList={{
+                                    [trigger().argsClass ?? ""]: !!trigger().argsClass,
+                                  }}
+                                >
+                                  {arg}
+                                </span>
+                              )}
+                            </For>
+                          </Show>
+                        </Show>
+                      </div>
+                      <Show when={!pending() && trigger().action}>{trigger().action}</Show>
+                    </div>
+                  )}
+                </Match>
+                <Match when={true}>{props.trigger as JSX.Element}</Match>
+              </Switch>
+            </div>
+          </div>
+          <Show when={props.children && !props.hideDetails && !props.locked && !pending()}>
+            <Collapsible.Arrow />
+          </Show>
+        </div>
       </Collapsible.Trigger>
-      <Show when={props.springContent && props.animate !== false && props.children && !props.hideDetails}>
+      <Show when={props.animated && props.children && !props.hideDetails}>
         <div
           ref={contentRef}
           data-slot="collapsible-content"
-          data-spring-content
+          data-animated
           style={{
             height: initialOpen ? "auto" : "0px",
-            overflow: "hidden",
-            display: initialOpen ? undefined : "none",
+            overflow: initialOpen ? "visible" : "hidden",
           }}
         >
-          <div ref={bodyRef} data-slot="basic-tool-content-inner">
-            {props.children}
-          </div>
+          {props.children}
         </div>
       </Show>
-      <Show when={(!props.springContent || props.animate === false) && props.children && !props.hideDetails}>
+      <Show when={!props.animated && props.children && !props.hideDetails}>
         <Collapsible.Content>
-          <Show when={!props.defer || ready()}>
-            <div data-slot="basic-tool-content-inner">{props.children}</div>
-          </Show>
+          <Show when={!props.defer || ready()}>{props.children}</Show>
         </Collapsible.Content>
       </Show>
     </Collapsible>
@@ -330,60 +222,6 @@ function args(input: Record<string, unknown> | undefined) {
     .slice(0, 3)
 }
 
-export interface ToolCallRowProps {
-  variant: "row"
-  icon: string
-  trigger: TriggerTitle | JSX.Element
-  status?: string
-  animate?: boolean
-  onSubtitleClick?: () => void
-  open?: boolean
-  showArrow?: boolean
-  onOpenChange?: (value: boolean) => void
-}
-export interface ToolCallPanelProps extends Omit<ToolCallPanelBaseProps, "hideDetails"> {
-  variant: "panel"
-}
-export type ToolCallProps = ToolCallRowProps | ToolCallPanelProps
-function ToolCallRoot(props: ToolCallProps) {
-  const pending = () => props.status === "pending" || props.status === "running"
-  if (props.variant === "row") {
-    return (
-      <Show
-        when={props.onOpenChange}
-        fallback={
-          <div data-component="collapsible" data-variant="normal" class="tool-collapsible">
-            <div data-slot="collapsible-trigger">
-              <ToolCallTriggerBody
-                trigger={props.trigger}
-                pending={pending()}
-                onSubtitleClick={props.onSubtitleClick}
-              />
-            </div>
-          </div>
-        }
-      >
-        {(onOpenChange) => (
-          <Collapsible open={props.open ?? true} onOpenChange={onOpenChange()} class="tool-collapsible">
-            <Collapsible.Trigger>
-              <ToolCallTriggerBody
-                trigger={props.trigger}
-                pending={pending()}
-                onSubtitleClick={props.onSubtitleClick}
-                arrow={!!props.showArrow}
-              />
-            </Collapsible.Trigger>
-          </Collapsible>
-        )}
-      </Show>
-    )
-  }
-
-  const [, rest] = splitProps(props, ["variant"])
-  return <ToolCallPanel {...rest} />
-}
-export const ToolCall = ToolCallRoot
-
 export function GenericTool(props: {
   tool: string
   status?: string
@@ -391,8 +229,7 @@ export function GenericTool(props: {
   input?: Record<string, unknown>
 }) {
   return (
-    <ToolCall
-      variant={props.hideDetails ? "row" : "panel"}
+    <BasicTool
       icon="mcp"
       status={props.status}
       trigger={{
@@ -400,6 +237,7 @@ export function GenericTool(props: {
         subtitle: label(props.input),
         args: args(props.input),
       }}
+      hideDetails={props.hideDetails}
     />
   )
 }

packages/ui/src/components/collapsible.css

@@ -8,18 +8,14 @@
   border-radius: var(--radius-md);
   overflow: visible;
 
-  &.tool-collapsible [data-slot="collapsible-trigger"] {
-    height: 37px;
-  }
-
-  &.tool-collapsible [data-slot="basic-tool-content-inner"] {
-    padding-top: 0;
+  &.tool-collapsible {
+    gap: 8px;
   }
 
   [data-slot="collapsible-trigger"] {
     width: 100%;
     display: flex;
-    height: 36px;
+    height: 32px;
     padding: 0;
     align-items: center;
     align-self: stretch;
@@ -27,17 +23,6 @@
     user-select: none;
     color: var(--text-base);
 
-    > [data-component="tool-trigger"][data-arrow] {
-      width: auto;
-      max-width: 100%;
-      flex: 0 1 auto;
-
-      [data-slot="basic-tool-tool-trigger-content"] {
-        width: auto;
-        max-width: 100%;
-      }
-    }
-
     [data-slot="collapsible-arrow"] {
       opacity: 0;
       transition: opacity 0.15s ease;
@@ -65,6 +50,9 @@
     line-height: var(--line-height-large); /* 166.667% */
     letter-spacing: var(--letter-spacing-normal);
 
+    /* &:hover { */
+    /*   background-color: var(--surface-base); */
+    /* } */
     &:focus-visible {
       outline: none;
       background-color: var(--surface-raised-base-hover);
@@ -94,16 +82,16 @@
   }
 
   [data-slot="collapsible-content"] {
-    overflow: clip;
+    overflow: hidden;
+    /* animation: slideUp 250ms ease-out; */
 
     &[data-expanded] {
       overflow: visible;
     }
 
-    /* JS-animated content: overflow managed by animate() */
-    &[data-spring-content] {
-      overflow: clip;
-    }
+    /* &[data-expanded] { */
+    /*   animation: slideDown 250ms ease-out; */
+    /* } */
   }
 
   &[data-variant="ghost"] {
@@ -115,6 +103,9 @@
       border: none;
       padding: 0;
 
+      /* &:hover { */
+      /*   color: var(--text-strong); */
+      /* } */
       &:focus-visible {
         outline: none;
         background-color: var(--surface-raised-base-hover);
@@ -131,3 +122,21 @@
     }
   }
 }
+
+@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/context-tool-results.tsx

@@ -1,199 +0,0 @@
-import { createMemo, createSignal, For, onMount } from "solid-js"
-import type { ToolPart } from "@opencode-ai/sdk/v2"
-import { getFilename } from "@opencode-ai/util/path"
-import { useI18n } from "../context/i18n"
-import { prefersReducedMotion } from "../hooks/use-reduced-motion"
-import { ToolCall } from "./basic-tool"
-import { ToolStatusTitle } from "./tool-status-title"
-import { AnimatedCountList } from "./tool-count-summary"
-import { RollingResults } from "./rolling-results"
-import { GROW_SPRING } from "./motion"
-import { useSpring } from "./motion-spring"
-import { busy, updateScrollMask, useCollapsible, useRowWipe } from "./tool-utils"
-
-function contextToolLabel(part: ToolPart): { action: string; detail: string } {
-  const state = part.state
-  const title = "title" in state ? (state.title as string | undefined) : undefined
-  const input = state.input
-  if (part.tool === "read") {
-    const path = input?.filePath as string | undefined
-    return { action: "Read", detail: title || (path ? getFilename(path) : "") }
-  }
-  if (part.tool === "grep") {
-    const pattern = input?.pattern as string | undefined
-    return { action: "Search", detail: title || (pattern ? `"${pattern}"` : "") }
-  }
-  if (part.tool === "glob") {
-    const pattern = input?.pattern as string | undefined
-    return { action: "Find", detail: title || (pattern ?? "") }
-  }
-  if (part.tool === "list") {
-    const path = input?.path as string | undefined
-    return { action: "List", detail: title || (path ? getFilename(path) : "") }
-  }
-  return { action: part.tool, detail: title || "" }
-}
-
-function contextToolSummary(parts: ToolPart[]) {
-  let read = 0
-  let search = 0
-  let list = 0
-  for (const part of parts) {
-    if (part.tool === "read") read++
-    else if (part.tool === "glob" || part.tool === "grep") search++
-    else if (part.tool === "list") list++
-  }
-  return { read, search, list }
-}
-
-export function ContextToolGroupHeader(props: {
-  parts: ToolPart[]
-  pending: boolean
-  open: boolean
-  onOpenChange: (value: boolean) => void
-}) {
-  const i18n = useI18n()
-  const summary = createMemo(() => contextToolSummary(props.parts))
-  return (
-    <ToolCall
-      variant="row"
-      icon="magnifying-glass-menu"
-      open={!props.pending && props.open}
-      showArrow={!props.pending}
-      onOpenChange={(v) => {
-        if (!props.pending) props.onOpenChange(v)
-      }}
-      trigger={
-        <div data-component="context-tool-group-trigger" data-pending={props.pending || undefined}>
-          <span
-            data-slot="context-tool-group-title"
-            class="min-w-0 flex items-center gap-2 text-14-medium text-text-strong"
-          >
-            <span data-slot="context-tool-group-label" class="shrink-0">
-              <ToolStatusTitle
-                active={props.pending}
-                activeText={i18n.t("ui.sessionTurn.status.gatheringContext")}
-                doneText={i18n.t("ui.sessionTurn.status.gatheredContext")}
-                split={false}
-              />
-            </span>
-            <span
-              data-slot="context-tool-group-summary"
-              class="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap font-normal text-text-base"
-            >
-              <AnimatedCountList
-                items={[
-                  {
-                    key: "read",
-                    count: summary().read,
-                    one: i18n.t("ui.messagePart.context.read.one"),
-                    other: i18n.t("ui.messagePart.context.read.other"),
-                  },
-                  {
-                    key: "search",
-                    count: summary().search,
-                    one: i18n.t("ui.messagePart.context.search.one"),
-                    other: i18n.t("ui.messagePart.context.search.other"),
-                  },
-                  {
-                    key: "list",
-                    count: summary().list,
-                    one: i18n.t("ui.messagePart.context.list.one"),
-                    other: i18n.t("ui.messagePart.context.list.other"),
-                  },
-                ]}
-                fallback=""
-              />
-            </span>
-          </span>
-        </div>
-      }
-    />
-  )
-}
-
-export function ContextToolExpandedList(props: { parts: ToolPart[]; expanded: boolean }) {
-  let contentRef: HTMLDivElement | undefined
-  let bodyRef: HTMLDivElement | undefined
-  let scrollRef: HTMLDivElement | undefined
-  const updateMask = () => {
-    if (scrollRef) updateScrollMask(scrollRef)
-  }
-
-  useCollapsible({
-    content: () => contentRef,
-    body: () => bodyRef,
-    open: () => props.expanded,
-    onOpen: updateMask,
-  })
-
-  return (
-    <div ref={contentRef} style={{ overflow: "clip", height: "0px", display: "none" }}>
-      <div ref={bodyRef}>
-        <div ref={scrollRef} data-component="context-tool-expanded-list" onScroll={updateMask}>
-          <For each={props.parts}>
-            {(part) => {
-              const label = createMemo(() => contextToolLabel(part))
-              return (
-                <div data-component="context-tool-expanded-row">
-                  <span data-slot="context-tool-expanded-action">{label().action}</span>
-                  <span data-slot="context-tool-expanded-detail">{label().detail}</span>
-                </div>
-              )
-            }}
-          </For>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export function ContextToolRollingResults(props: { parts: ToolPart[]; pending: boolean }) {
-  const wiped = new Set<string>()
-  const [mounted, setMounted] = createSignal(false)
-  onMount(() => setMounted(true))
-  const reduce = prefersReducedMotion
-  const show = () => mounted() && props.pending
-  const opacity = useSpring(() => (show() ? 1 : 0), GROW_SPRING)
-  const blur = useSpring(() => (show() ? 0 : 2), GROW_SPRING)
-  return (
-    <div style={{ opacity: reduce() ? (show() ? 1 : 0) : opacity(), filter: `blur(${reduce() ? 0 : blur()}px)` }}>
-      <RollingResults
-        items={props.parts}
-        rows={5}
-        rowHeight={22}
-        rowGap={0}
-        open={props.pending}
-        animate
-        getKey={(part) => part.callID || part.id}
-        render={(part) => {
-          const label = createMemo(() => contextToolLabel(part))
-          const k = part.callID || part.id
-          return (
-            <div data-component="context-tool-rolling-row">
-              <span data-slot="context-tool-rolling-action">{label().action}</span>
-              {(() => {
-                const [detailRef, setDetailRef] = createSignal<HTMLSpanElement>()
-                useRowWipe({
-                  id: () => k,
-                  text: () => label().detail,
-                  ref: detailRef,
-                  seen: wiped,
-                })
-                return (
-                  <span
-                    ref={setDetailRef}
-                    data-slot="context-tool-rolling-detail"
-                    style={{ display: label().detail ? undefined : "none" }}
-                  >
-                    {label().detail}
-                  </span>
-                )
-              })()}
-            </div>
-          )
-        }}
-      />
-    </div>
-  )
-}

packages/ui/src/components/grow-box.tsx

@@ -1,426 +0,0 @@
-import { createEffect, on, type JSX, onMount, onCleanup } from "solid-js"
-import { animate, tunableSpringValue, type AnimationPlaybackControls, GROW_SPRING, type SpringConfig } from "./motion"
-import { prefersReducedMotion } from "../hooks/use-reduced-motion"
-
-export interface GrowBoxProps {
-  children: JSX.Element
-  /** Enable animation. When false, content shows immediately at full height. */
-  animate?: boolean
-  /** Animate height from 0 to content height. Default: true. */
-  grow?: boolean
-  /** Keep watching body size and animate subsequent height changes. Default: false. */
-  watch?: boolean
-  /** Fade in body content (opacity + blur). Default: true. */
-  fade?: boolean
-  /** Top padding in px on the body wrapper. Default: 0. */
-  gap?: number
-  /** Reset to height:auto after grow completes, or stay at fixed px. Default: true. */
-  autoHeight?: boolean
-  /** Controlled visibility for animating open/close without unmounting children. */
-  open?: boolean
-  /** Animate controlled open/close changes after mount. Default: true. */
-  animateToggle?: boolean
-  /** data-slot attribute on the root div. */
-  slot?: string
-  /** CSS class on the root div. */
-  class?: string
-  /** Override mount and resize spring config. Default: GROW_SPRING. */
-  spring?: SpringConfig
-  /** Override controlled open/close spring config. Default: spring. */
-  toggleSpring?: SpringConfig
-  /** Show a temporary bottom edge fade while height animation is running. */
-  edge?: boolean
-  /** Edge fade height in px. Default: 20. */
-  edgeHeight?: number
-  /** Edge fade opacity (0-1). Default: 1. */
-  edgeOpacity?: number
-  /** Delay before edge fades out after height settles. Default: 320. */
-  edgeIdle?: number
-  /** Edge fade-out duration in seconds. Default: 0.24. */
-  edgeFade?: number
-  /** Edge fade-in duration in seconds. Default: 0.2. */
-  edgeRise?: number
-}
-
-/**
- * Wraps children in a container that animates from zero height on mount.
- *
- * Includes a ResizeObserver so content changes after mount are also spring-animated.
- * Used for timeline turns, assistant part groups, and user messages.
- */
-export function GrowBox(props: GrowBoxProps) {
-  const reduce = prefersReducedMotion
-  const spring = () => props.spring ?? GROW_SPRING
-  const toggleSpring = () => props.toggleSpring ?? spring()
-  let mode: "mount" | "toggle" = "mount"
-  let root: HTMLDivElement | undefined
-  let body: HTMLDivElement | undefined
-  let fadeAnim: AnimationPlaybackControls | undefined
-  let edgeRef: HTMLDivElement | undefined
-  let edgeAnim: AnimationPlaybackControls | undefined
-  let edgeTimer: ReturnType<typeof setTimeout> | undefined
-  let edgeOn = false
-  let mountFrame: number | undefined
-  let resizeFrame: number | undefined
-  let observer: ResizeObserver | undefined
-  let springTarget = -1
-  const height = tunableSpringValue<number>(0, {
-    type: "spring",
-    get visualDuration() {
-      return (mode === "toggle" ? toggleSpring() : spring()).visualDuration
-    },
-    get bounce() {
-      return (mode === "toggle" ? toggleSpring() : spring()).bounce
-    },
-  })
-
-  const gap = () => Math.max(0, props.gap ?? 0)
-  const grow = () => props.grow !== false
-  const watch = () => props.watch === true
-  const open = () => props.open !== false
-  const animateToggle = () => props.animateToggle !== false
-  const edge = () => props.edge === true
-  const edgeHeight = () => Math.max(0, props.edgeHeight ?? 20)
-  const edgeOpacity = () => Math.min(1, Math.max(0, props.edgeOpacity ?? 1))
-  const edgeIdle = () => Math.max(0, props.edgeIdle ?? 320)
-  const edgeFade = () => Math.max(0.05, props.edgeFade ?? 0.24)
-  const edgeRise = () => Math.max(0.05, props.edgeRise ?? 0.2)
-  const animated = () => props.animate !== false && !reduce()
-  const edgeReady = () => animated() && open() && edge() && edgeHeight() > 0
-
-  const stopEdgeTimer = () => {
-    if (edgeTimer === undefined) return
-    clearTimeout(edgeTimer)
-    edgeTimer = undefined
-  }
-
-  const hideEdge = (instant = false) => {
-    stopEdgeTimer()
-    if (!edgeRef) {
-      edgeOn = false
-      return
-    }
-    edgeAnim?.stop()
-    edgeAnim = undefined
-    if (instant || reduce()) {
-      edgeRef.style.opacity = "0"
-      edgeOn = false
-      return
-    }
-    if (!edgeOn) {
-      edgeRef.style.opacity = "0"
-      return
-    }
-    const current = animate(edgeRef, { opacity: 0 }, { type: "spring", visualDuration: edgeFade(), bounce: 0 })
-    edgeAnim = current
-    current.finished
-      .catch(() => {})
-      .finally(() => {
-        if (edgeAnim !== current) return
-        edgeAnim = undefined
-        if (!edgeRef) return
-        edgeRef.style.opacity = "0"
-        edgeOn = false
-      })
-  }
-
-  const showEdge = () => {
-    stopEdgeTimer()
-    if (!edgeRef) return
-    if (reduce()) {
-      edgeRef.style.opacity = `${edgeOpacity()}`
-      edgeOn = true
-      return
-    }
-    if (edgeOn && edgeAnim === undefined) {
-      edgeRef.style.opacity = `${edgeOpacity()}`
-      return
-    }
-    edgeAnim?.stop()
-    edgeAnim = undefined
-    if (!edgeOn) edgeRef.style.opacity = "0"
-    const current = animate(
-      edgeRef,
-      { opacity: edgeOpacity() },
-      { type: "spring", visualDuration: edgeRise(), bounce: 0 },
-    )
-    edgeAnim = current
-    edgeOn = true
-    current.finished
-      .catch(() => {})
-      .finally(() => {
-        if (edgeAnim !== current) return
-        edgeAnim = undefined
-        if (!edgeRef) return
-        edgeRef.style.opacity = `${edgeOpacity()}`
-      })
-  }
-
-  const queueEdgeHide = () => {
-    stopEdgeTimer()
-    if (!edgeOn) return
-    if (edgeIdle() <= 0) {
-      hideEdge()
-      return
-    }
-    edgeTimer = setTimeout(() => {
-      edgeTimer = undefined
-      hideEdge()
-    }, edgeIdle())
-  }
-
-  const hideBody = () => {
-    if (!body) return
-    body.style.opacity = "0"
-    body.style.filter = "blur(2px)"
-  }
-
-  const clearBody = () => {
-    if (!body) return
-    body.style.opacity = ""
-    body.style.filter = ""
-  }
-
-  const fadeBodyIn = (nextMode: "mount" | "toggle" = "mount") => {
-    if (props.fade === false || !body) return
-    if (reduce()) {
-      clearBody()
-      return
-    }
-    hideBody()
-    fadeAnim?.stop()
-    fadeAnim = animate(body, { opacity: 1, filter: "blur(0px)" }, nextMode === "toggle" ? toggleSpring() : spring())
-    fadeAnim.finished.then(() => {
-      if (!body || !open()) return
-      clearBody()
-    })
-  }
-
-  const setInstant = (visible: boolean) => {
-    const next = visible ? targetHeight() : 0
-    springTarget = next
-    height.jump(next)
-    root!.style.height = visible ? "" : "0px"
-    root!.style.overflow = visible ? "" : "clip"
-    hideEdge(true)
-    if (visible || props.fade === false) clearBody()
-    else hideBody()
-  }
-
-  const currentHeight = () => {
-    if (!root) return 0
-    const v = root.style.height
-    if (v && v !== "auto") {
-      const n = Number.parseFloat(v)
-      if (!Number.isNaN(n)) return n
-    }
-    return Math.max(0, root.getBoundingClientRect().height)
-  }
-
-  const targetHeight = () => Math.max(0, Math.ceil(body?.getBoundingClientRect().height ?? 0))
-
-  const setHeight = (nextMode: "mount" | "toggle" = "mount") => {
-    if (!root || !open()) return
-    const next = targetHeight()
-    if (reduce()) {
-      springTarget = next
-      height.jump(next)
-      if (props.autoHeight === false || watch()) {
-        root.style.height = `${next}px`
-        root.style.overflow = next > 0 ? "visible" : "clip"
-        return
-      }
-      root.style.height = "auto"
-      root.style.overflow = next > 0 ? "visible" : "clip"
-      return
-    }
-    if (next === springTarget) return
-    const prev = currentHeight()
-    if (Math.abs(next - prev) < 1) {
-      springTarget = next
-      if (props.autoHeight === false || watch()) {
-        root.style.height = `${next}px`
-        root.style.overflow = next > 0 ? "visible" : "clip"
-      }
-      return
-    }
-    root.style.overflow = "clip"
-    springTarget = next
-    mode = nextMode
-    height.set(next)
-  }
-
-  onMount(() => {
-    if (!root || !body) return
-
-    const offChange = height.on("change", (next) => {
-      if (!root) return
-      root.style.height = `${Math.max(0, next)}px`
-    })
-    const offStart = height.on("animationStart", () => {
-      if (!root) return
-      root.style.overflow = "clip"
-      root.style.willChange = "height"
-      root.style.contain = "layout style"
-      if (edgeReady()) showEdge()
-    })
-    const offComplete = height.on("animationComplete", () => {
-      if (!root) return
-      root.style.willChange = ""
-      root.style.contain = ""
-      if (!open()) {
-        springTarget = 0
-        root.style.height = "0px"
-        root.style.overflow = "clip"
-        return
-      }
-      const next = targetHeight()
-      springTarget = next
-      if (props.autoHeight === false || watch()) {
-        root.style.height = `${next}px`
-        root.style.overflow = next > 0 ? "visible" : "clip"
-        if (edgeReady()) queueEdgeHide()
-        return
-      }
-      root.style.height = "auto"
-      root.style.overflow = "visible"
-      if (edgeReady()) queueEdgeHide()
-    })
-
-    onCleanup(() => {
-      offComplete()
-      offStart()
-      offChange()
-    })
-
-    if (!animated()) {
-      setInstant(open())
-      return
-    }
-
-    if (props.fade !== false) hideBody()
-    hideEdge(true)
-
-    if (!open()) {
-      root.style.height = "0px"
-      root.style.overflow = "clip"
-    } else {
-      if (grow()) {
-        root.style.height = "0px"
-        root.style.overflow = "clip"
-      } else {
-        root.style.height = "auto"
-        root.style.overflow = "visible"
-      }
-      mountFrame = requestAnimationFrame(() => {
-        mountFrame = undefined
-        fadeBodyIn("mount")
-        if (grow()) setHeight("mount")
-      })
-    }
-    if (watch()) {
-      observer = new ResizeObserver(() => {
-        if (!open()) return
-        if (resizeFrame !== undefined) return
-        resizeFrame = requestAnimationFrame(() => {
-          resizeFrame = undefined
-          setHeight("mount")
-        })
-      })
-      observer.observe(body)
-    }
-  })
-
-  createEffect(
-    on(
-      () => props.open,
-      (value) => {
-        if (value === undefined) return
-        if (!root || !body) return
-        if (!animateToggle() || reduce()) {
-          setInstant(value)
-          return
-        }
-        fadeAnim?.stop()
-        if (!value) hideEdge(true)
-        if (!value) {
-          const next = currentHeight()
-          if (Math.abs(next - height.get()) >= 1) {
-            springTarget = next
-            height.jump(next)
-            root.style.height = `${next}px`
-          }
-          if (props.fade !== false) {
-            fadeAnim = animate(body, { opacity: 0, filter: "blur(2px)" }, toggleSpring())
-          }
-          root.style.overflow = "clip"
-          springTarget = 0
-          mode = "toggle"
-          height.set(0)
-          return
-        }
-        fadeBodyIn("toggle")
-        setHeight("toggle")
-      },
-      { defer: true },
-    ),
-  )
-
-  createEffect(() => {
-    if (!edgeRef) return
-    edgeRef.style.height = `${edgeHeight()}px`
-    if (!animated() || !open() || edgeHeight() <= 0) {
-      hideEdge(true)
-      return
-    }
-    if (edge()) return
-    hideEdge()
-  })
-
-  createEffect(() => {
-    if (!root || !body) return
-    if (!reduce()) return
-    fadeAnim?.stop()
-    edgeAnim?.stop()
-    setInstant(open())
-  })
-
-  onCleanup(() => {
-    stopEdgeTimer()
-    if (mountFrame !== undefined) cancelAnimationFrame(mountFrame)
-    if (resizeFrame !== undefined) cancelAnimationFrame(resizeFrame)
-    observer?.disconnect()
-    height.destroy()
-    fadeAnim?.stop()
-    edgeAnim?.stop()
-    edgeAnim = undefined
-    edgeOn = false
-  })
-
-  return (
-    <div
-      ref={root}
-      data-slot={props.slot}
-      class={props.class}
-      style={{ transform: "translateZ(0)", position: "relative" }}
-    >
-      <div ref={body} style={{ "padding-top": gap() > 0 ? `${gap()}px` : undefined }}>
-        {props.children}
-      </div>
-      <div
-        ref={edgeRef}
-        data-slot="grow-box-edge"
-        style={{
-          position: "absolute",
-          left: "0",
-          right: "0",
-          bottom: "0",
-          height: `${edgeHeight()}px`,
-          opacity: 0,
-          "pointer-events": "none",
-          background: "linear-gradient(to bottom, transparent 0%, var(--background-stronger) 100%)",
-        }}
-      />
-    </div>
-  )
-}

packages/ui/src/components/line-comment.tsx

@@ -244,6 +244,7 @@ export const LineCommentEditor = (props: LineCommentEditorProps) => {
             event.stopPropagation()
             if (e.key === "Escape") {
               event.preventDefault()
+              e.currentTarget.blur()
               split.onCancel()
               return
             }

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

@@ -1,20 +1,10 @@
 [data-component="assistant-message"] {
   content-visibility: auto;
   width: 100%;
-}
-
-[data-component="assistant-parts"] {
-  width: 100%;
-  min-width: 0;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: 0;
-}
-
-[data-component="assistant-part-item"] {
-  width: 100%;
-  min-width: 0;
+  gap: 12px;
 }
 
 [data-component="user-message"] {
@@ -37,14 +27,6 @@
     color: var(--text-weak);
   }
 
-  [data-slot="user-message-inner"] {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-    width: 100%;
-    gap: 4px;
-  }
   [data-slot="user-message-attachments"] {
     display: flex;
     flex-wrap: wrap;
@@ -53,7 +35,6 @@
     width: fit-content;
     max-width: min(82%, 64ch);
     margin-left: auto;
-    margin-bottom: 4px;
   }
 
   [data-slot="user-message-attachment"] {
@@ -153,7 +134,7 @@
 
   [data-slot="user-message-copy-wrapper"] {
     min-height: 24px;
-    margin-top: 0;
+    margin-top: 4px;
     display: flex;
     align-items: center;
     justify-content: flex-end;
@@ -163,6 +144,7 @@
     pointer-events: none;
     transition: opacity 0.15s ease;
     will-change: opacity;
+
     [data-component="tooltip-trigger"] {
       display: inline-flex;
       width: fit-content;
@@ -205,21 +187,56 @@
     opacity: 1;
     pointer-events: auto;
   }
+
+  .text-text-strong {
+    color: var(--text-strong);
+  }
+
+  .font-medium {
+    font-weight: var(--font-weight-medium);
+  }
 }
 
 [data-component="text-part"] {
   width: 100%;
-  margin-top: 0;
-  padding-block: 4px;
-  position: relative;
+  margin-top: 24px;
 
   [data-slot="text-part-body"] {
     margin-top: 0;
   }
 
-  [data-slot="text-part-turn-summary"] {
+  [data-slot="text-part-copy-wrapper"] {
+    min-height: 24px;
+    margin-top: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 10px;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.15s ease;
+    will-change: opacity;
+
+    [data-component="tooltip-trigger"] {
+      display: inline-flex;
+      width: fit-content;
+    }
+  }
+
+  [data-slot="text-part-meta"] {
+    user-select: none;
+  }
+
+  [data-slot="text-part-copy-wrapper"][data-interrupted] {
     width: 100%;
-    min-width: 0;
+    justify-content: flex-end;
+    gap: 12px;
+  }
+
+  &:hover [data-slot="text-part-copy-wrapper"],
+  &:focus-within [data-slot="text-part-copy-wrapper"] {
+    opacity: 1;
+    pointer-events: auto;
   }
 
   [data-component="markdown"] {
@@ -228,10 +245,6 @@
   }
 }
 
-[data-component="assistant-part-item"][data-kind="text"][data-last="true"] [data-component="text-part"] {
-  padding-bottom: 0;
-}
-
 [data-component="compaction-part"] {
   width: 100%;
   display: flex;
@@ -265,6 +278,7 @@
   line-height: var(--line-height-normal);
 
   [data-component="markdown"] {
+    margin-top: 24px;
     font-style: normal;
     font-size: inherit;
     color: var(--text-weak);
@@ -358,16 +372,13 @@
     height: auto;
     max-height: 240px;
     overflow-y: auto;
-    overscroll-behavior: contain;
     scrollbar-width: none;
     -ms-overflow-style: none;
-    -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 6px, black calc(100% - 6px), transparent 100%);
-    mask-image: linear-gradient(to bottom, transparent 0, black 6px, black calc(100% - 6px), transparent 100%);
-    -webkit-mask-repeat: no-repeat;
-    mask-repeat: no-repeat;
+
     &::-webkit-scrollbar {
       display: none;
     }
+
     [data-component="markdown"] {
       overflow: visible;
     }
@@ -437,7 +448,7 @@
 [data-component="write-trigger"] {
   display: flex;
   align-items: center;
-  justify-content: flex-start;
+  justify-content: space-between;
   gap: 8px;
   width: 100%;
 
@@ -450,8 +461,7 @@
   }
 
   [data-slot="message-part-title"] {
-    flex-shrink: 1;
-    min-width: 0;
+    flex-shrink: 0;
     display: flex;
     align-items: center;
     gap: 8px;
@@ -483,45 +493,40 @@
   [data-slot="message-part-title-text"] {
     text-transform: capitalize;
     color: var(--text-strong);
-    flex-shrink: 0;
-  }
-
-  [data-slot="message-part-meta-line"],
-  .message-part-meta-line {
-    min-width: 0;
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    font-weight: var(--font-weight-regular);
-
-    [data-component="diff-changes"] {
-      flex-shrink: 0;
-      gap: 6px;
-    }
-  }
-
-  .message-part-meta-line.soft {
-    [data-slot="message-part-title-filename"] {
-      color: var(--text-base);
-    }
   }
 
   [data-slot="message-part-title-filename"] {
     /* No text-transform - preserve original filename casing */
-    color: var(--text-strong);
-    flex-shrink: 0;
+    font-weight: var(--font-weight-regular);
   }
 
-  [data-slot="message-part-directory-inline"] {
-    color: var(--text-weak);
+  [data-slot="message-part-path"] {
+    display: flex;
+    flex-grow: 1;
     min-width: 0;
-    max-width: min(48vw, 36ch);
+    font-weight: var(--font-weight-regular);
+  }
+
+  [data-slot="message-part-directory"] {
+    color: var(--text-weak);
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
     direction: rtl;
     text-align: left;
   }
+
+  [data-slot="message-part-filename"] {
+    color: var(--text-strong);
+    flex-shrink: 0;
+  }
+
+  [data-slot="message-part-actions"] {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+    justify-content: flex-end;
+  }
 }
 
 [data-component="edit-content"] {
@@ -612,17 +617,6 @@
   }
 }
 
-[data-slot="webfetch-meta"] {
-  min-width: 0;
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-
-  [data-component="tool-action"] {
-    flex-shrink: 0;
-  }
-}
-
 [data-component="todos"] {
   padding: 10px 0 24px 0;
   display: flex;
@@ -645,6 +639,7 @@
 }
 
 [data-component="context-tool-group-trigger"] {
+  width: 100%;
   min-height: 24px;
   display: flex;
   align-items: center;
@@ -652,352 +647,28 @@
   gap: 0px;
   cursor: pointer;
 
-  &[data-pending] {
-    cursor: default;
-  }
-
   [data-slot="context-tool-group-title"] {
     flex-shrink: 1;
     min-width: 0;
   }
-}
 
-/* Prevent the trigger content from stretching full-width so the arrow sits after the text */
-[data-slot="basic-tool-tool-trigger-content"]:has([data-component="context-tool-group-trigger"]) {
-  width: auto;
-  flex: 0 1 auto;
-
-  [data-slot="basic-tool-tool-info"] {
-    flex: 0 1 auto;
-  }
-}
-
-[data-component="context-tool-step"] {
-  width: 100%;
-  min-width: 0;
-  padding-left: 12px;
-}
-
-[data-component="context-tool-expanded-list"] {
-  display: flex;
-  flex-direction: column;
-  padding: 4px 0 4px 12px;
-  max-height: 200px;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  -webkit-mask-repeat: no-repeat;
-  mask-repeat: no-repeat;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}
-
-[data-component="context-tool-expanded-row"] {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  min-width: 0;
-  height: 22px;
-  flex-shrink: 0;
-  white-space: nowrap;
-  overflow: hidden;
-
-  [data-slot="context-tool-expanded-action"] {
-    flex-shrink: 0;
-    font-size: var(--font-size-base);
-    font-weight: 500;
-    color: var(--text-base);
-  }
-
-  [data-slot="context-tool-expanded-detail"] {
-    flex-shrink: 1;
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font-size: var(--font-size-base);
-    color: var(--text-base);
-    opacity: 0.75;
-  }
-}
-
-[data-component="context-tool-rolling-row"] {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  width: 100%;
-  min-width: 0;
-  white-space: nowrap;
-  overflow: hidden;
-  padding-left: 12px;
-
-  [data-slot="context-tool-rolling-action"] {
-    flex-shrink: 0;
-    font-size: var(--font-size-base);
-    font-weight: 500;
-    color: var(--text-base);
-  }
-
-  [data-slot="context-tool-rolling-detail"] {
-    flex-shrink: 1;
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font-size: var(--font-size-base);
-    color: var(--text-weak);
-  }
-}
-
-[data-component="shell-rolling-results"] {
-  width: 100%;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-
-  [data-slot="shell-rolling-header-clip"] {
-    &:hover [data-slot="shell-rolling-actions"] {
-      opacity: 1;
-    }
-
-    &[data-clickable="true"] {
-      cursor: pointer;
-    }
-  }
-
-  [data-slot="shell-rolling-header"] {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    min-width: 0;
-    max-width: 100%;
-    height: 37px;
-    box-sizing: border-box;
-  }
-
-  [data-slot="shell-rolling-title"] {
-    flex-shrink: 0;
-    font-family: var(--font-family-sans);
-    font-size: 14px;
-    font-style: normal;
-    font-weight: var(--font-weight-medium);
-    line-height: var(--line-height-large);
-    letter-spacing: var(--letter-spacing-normal);
-    color: var(--text-strong);
-  }
-
-  [data-slot="shell-rolling-subtitle"] {
-    flex: 0 1 auto;
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    font-family: var(--font-family-sans);
-    font-size: 14px;
-    font-weight: var(--font-weight-normal);
-    line-height: var(--line-height-large);
-    color: var(--text-weak);
-  }
-
-  [data-slot="shell-rolling-actions"] {
-    flex-shrink: 0;
-    display: inline-flex;
-    align-items: center;
-    gap: 2px;
-    opacity: 0;
-    transition: opacity 0.15s ease;
-  }
-
-  .shell-rolling-copy {
-    border: none !important;
-    outline: none !important;
-    box-shadow: none !important;
-    background: transparent !important;
-
-    [data-slot="icon-svg"] {
-      color: var(--icon-weaker);
-    }
-
-    &:hover:not(:disabled) {
-      background: color-mix(in srgb, var(--text-base) 8%, transparent) !important;
-      box-shadow: 0 0 0 1px color-mix(in srgb, var(--icon-weaker) 40%, transparent) !important;
-      border-radius: var(--radius-sm);
-
-      [data-slot="icon-svg"] {
-        color: var(--icon-base);
-      }
-    }
-  }
-
-  [data-slot="shell-rolling-arrow"] {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--icon-weaker);
-    transform: rotate(-90deg);
-    transition: transform 0.15s ease;
-  }
-
-  [data-slot="shell-rolling-arrow"][data-open="true"] {
-    transform: rotate(0deg);
-  }
-}
-
-[data-component="shell-rolling-output"] {
-  width: 100%;
-  min-width: 0;
-}
-
-[data-slot="shell-rolling-preview"] {
-  width: 100%;
-  min-width: 0;
-}
-
-[data-component="shell-expanded-output"] {
-  width: 100%;
-  max-width: 100%;
-  overflow-y: auto;
-  overflow-x: hidden;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}
-
-[data-component="shell-expanded-shell"] {
-  position: relative;
-  width: 100%;
-  min-width: 0;
-  border: 1px solid var(--border-weak-base);
-  border-radius: 6px;
-  background: transparent;
-  overflow: hidden;
-}
-
-[data-slot="shell-expanded-body"] {
-  position: relative;
-  width: 100%;
-  min-width: 0;
-}
-
-[data-slot="shell-expanded-top"] {
-  position: relative;
-  width: 100%;
-  min-width: 0;
-  padding: 9px 44px 9px 16px;
-  box-sizing: border-box;
-}
-
-[data-slot="shell-expanded-command"] {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  width: 100%;
-  min-width: 0;
-  font-family: var(--font-family-mono);
-  font-feature-settings: var(--font-family-mono--font-feature-settings);
-  font-size: 13px;
-  line-height: 1.45;
-}
-
-[data-slot="shell-expanded-prompt"] {
-  flex-shrink: 0;
-  color: var(--text-weaker);
-}
-
-[data-slot="shell-expanded-input"] {
-  min-width: 0;
-  color: var(--text-strong);
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-}
-
-[data-slot="shell-expanded-actions"] {
-  position: absolute;
-  top: 50%;
-  right: 8px;
-  z-index: 1;
-  transform: translateY(-50%);
-}
-
-.shell-expanded-copy {
-  border: none !important;
-  outline: none !important;
-  box-shadow: none !important;
-  background: transparent !important;
-
-  [data-slot="icon-svg"] {
+  [data-slot="collapsible-arrow"] {
     color: var(--icon-weaker);
   }
+}
 
-  &:hover:not(:disabled) {
-    background: color-mix(in srgb, var(--text-base) 8%, transparent) !important;
-    box-shadow: 0 0 0 1px color-mix(in srgb, var(--icon-weaker) 40%, transparent) !important;
-    border-radius: var(--radius-sm);
+[data-component="context-tool-group-list"] {
+  padding: 6px 0 4px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
 
-    [data-slot="icon-svg"] {
-      color: var(--icon-base);
-    }
+  [data-slot="context-tool-group-item"] {
+    min-width: 0;
+    padding: 6px 0;
   }
 }
 
-[data-slot="shell-expanded-divider"] {
-  width: 100%;
-  height: 1px;
-  background: var(--border-weak-base);
-}
-
-[data-slot="shell-expanded-pre"] {
-  margin: 0;
-  padding: 12px 16px;
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-
-  code {
-    font-family: var(--font-family-mono);
-    font-feature-settings: var(--font-family-mono--font-feature-settings);
-    font-size: 13px;
-    line-height: 1.45;
-    color: var(--text-base);
-  }
-}
-
-[data-component="shell-rolling-command"],
-[data-component="shell-rolling-row"] {
-  display: inline-flex;
-  align-items: center;
-  width: 100%;
-  min-width: 0;
-  overflow: hidden;
-  white-space: pre;
-  padding-left: 12px;
-}
-
-[data-slot="shell-rolling-text"] {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-family: var(--font-family-mono);
-  font-feature-settings: var(--font-family-mono--font-feature-settings);
-  font-size: var(--font-size-small);
-  line-height: var(--line-height-large);
-}
-
-[data-component="shell-rolling-command"] [data-slot="shell-rolling-text"] {
-  color: var(--text-base);
-}
-
-[data-component="shell-rolling-command"] [data-slot="shell-rolling-prompt"] {
-  color: var(--text-weaker);
-}
-
-[data-component="shell-rolling-row"] [data-slot="shell-rolling-text"] {
-  color: var(--text-weak);
-}
-
 [data-component="diagnostics"] {
   display: flex;
   flex-direction: column;
@@ -1058,30 +729,6 @@
   width: 100%;
 }
 
-[data-slot="assistant-part-grow"] {
-  width: 100%;
-  min-width: 0;
-  overflow: visible;
-}
-
-[data-component="tool-part-wrapper"][data-tool="bash"] {
-  [data-component="tool-trigger"] {
-    width: auto;
-    max-width: 100%;
-  }
-
-  [data-slot="basic-tool-tool-info-main"] {
-    align-items: center;
-  }
-
-  [data-slot="basic-tool-tool-title"],
-  [data-slot="basic-tool-tool-subtitle"] {
-    display: inline-flex;
-    align-items: center;
-    line-height: var(--line-height-large);
-  }
-}
-
 [data-component="dock-prompt"][data-kind="permission"] {
   position: relative;
   display: flex;
@@ -1540,7 +1187,8 @@
     position: sticky;
     top: var(--sticky-accordion-top, 0px);
     z-index: 20;
-    height: 37px;
+    height: 40px;
+    padding-bottom: 8px;
     background-color: var(--background-stronger);
   }
 }
@@ -1551,12 +1199,11 @@
   }
 
   [data-slot="apply-patch-trigger-content"] {
-    display: inline-flex;
+    display: flex;
     align-items: center;
-    justify-content: flex-start;
-    max-width: 100%;
-    min-width: 0;
-    gap: 8px;
+    justify-content: space-between;
+    width: 100%;
+    gap: 20px;
   }
 
   [data-slot="apply-patch-file-info"] {
@@ -1590,9 +1237,9 @@
   [data-slot="apply-patch-trigger-actions"] {
     flex-shrink: 0;
     display: flex;
-    gap: 8px;
+    gap: 16px;
     align-items: center;
-    justify-content: flex-start;
+    justify-content: flex-end;
   }
 
   [data-slot="apply-patch-change"] {
@@ -1632,11 +1279,10 @@
 }
 
 [data-component="tool-loaded-file"] {
-  min-width: 0;
   display: flex;
   align-items: center;
   gap: 8px;
-  padding: 4px 0 4px 12px;
+  padding: 4px 0 4px 28px;
   font-family: var(--font-family-sans);
   font-size: var(--font-size-small);
   font-weight: var(--font-weight-regular);
@@ -1647,11 +1293,4 @@
     flex-shrink: 0;
     color: var(--icon-weak);
   }
-
-  span {
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
 }

packages/ui/src/components/motion-spring.tsx

@@ -1,9 +1,8 @@
 import { attachSpring, motionValue } from "motion"
 import type { SpringOptions } from "motion"
 import { createEffect, createSignal, onCleanup } from "solid-js"
-import { prefersReducedMotion } from "../hooks/use-reduced-motion"
 
-type Opt = Pick<SpringOptions, "visualDuration" | "bounce" | "stiffness" | "damping" | "mass" | "velocity">
+type Opt = Partial<Pick<SpringOptions, "visualDuration" | "bounce" | "stiffness" | "damping" | "mass" | "velocity">>
 const eq = (a: Opt | undefined, b: Opt | undefined) =>
   a?.visualDuration === b?.visualDuration &&
   a?.bounce === b?.bounce &&
@@ -14,41 +13,24 @@ const eq = (a: Opt | undefined, b: Opt | undefined) =>
 
 export function useSpring(target: () => number, options?: Opt | (() => Opt)) {
   const read = () => (typeof options === "function" ? options() : options)
-  const reduce = prefersReducedMotion
   const [value, setValue] = createSignal(target())
   const source = motionValue(value())
   const spring = motionValue(value())
   let config = read()
-  let reduced = reduce()
-  let stop = reduced ? () => {} : attachSpring(spring, source, config)
-  let off = spring.on("change", (next) => setValue(next))
+  let stop = attachSpring(spring, source, config)
+  let off = spring.on("change", (next: number) => setValue(next))
 
   createEffect(() => {
-    const next = target()
-    if (reduced) {
-      source.set(next)
-      spring.set(next)
-      setValue(next)
-      return
-    }
-    source.set(next)
+    source.set(target())
   })
 
   createEffect(() => {
+    if (!options) return
     const next = read()
-    const skip = reduce()
-    if (eq(config, next) && reduced === skip) return
+    if (eq(config, next)) return
     config = next
-    reduced = skip
     stop()
-    stop = skip ? () => {} : attachSpring(spring, source, next)
-    if (skip) {
-      const value = target()
-      source.set(value)
-      spring.set(value)
-      setValue(value)
-      return
-    }
+    stop = attachSpring(spring, source, next)
     setValue(spring.get())
   })