fix(tui): revert "fix(core): handle SIGHUP and kill process (#16057 )"

This reverts commit 45ac20b8aa.
feat(tui): add initial support for workspaces into the tui (#16230 )
2026-03-09 11:56:47 -04:00 · 2026-03-09 10:28:04 -04:00 · 2026-03-09 09:22:00 -05:00 · 2026-03-09 22:07:12 +08:00 · 2026-03-09 13:50:43 +00:00 · 2026-03-09 08:25:41 -05:00
175 changed files with 5046 additions and 8487 deletions
@@ -26,7 +26,7 @@
    },
    "packages/app": {
      "name": "@opencode-ai/app",
-      "version": "1.2.21",
+      "version": "1.2.23",
      "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.23",
      "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.23",
      "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.23",
      "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.23",
      "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.23",
      "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.23",
      "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.23",
      "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.23",
      "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.23",
      "bin": {
        "opencode": "./bin/opencode",
      },
@@ -409,7 +409,7 @@
    },
    "packages/plugin": {
      "name": "@opencode-ai/plugin",
-      "version": "1.2.21",
+      "version": "1.2.23",
      "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.23",
      "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.23",
      "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.23",
      "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.23",
      "dependencies": {
        "zod": "catalog:",
      },
@@ -532,7 +532,7 @@
    },
    "packages/web": {
      "name": "@opencode-ai/web",
-      "version": "1.2.21",
+      "version": "1.2.23",
      "dependencies": {
        "@astrojs/cloudflare": "12.6.3",
        "@astrojs/markdown-remark": "6.3.1",
@@ -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()

@@ -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] },
    )
@@ -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) =>
@@ -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)
  })
 })

@@ -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()

@@ -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 })
  })
 })

@@ -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}`
 }
@@ -1,6 +1,6 @@
 {
  "name": "@opencode-ai/app",
-  "version": "1.2.21",
+  "version": "1.2.23",
  "description": "",
  "type": "module",
  "exports": {
@@ -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"
@@ -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">
@@ -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
@@ -155,7 +155,7 @@ export function Titlebar() {

  return (
    <header
-      class="h-10 shrink-0 bg-background-base relative grid grid-cols-[auto_minmax(0,1fr)_auto] items-center"
+      class="h-10 shrink-0 bg-background-base relative grid grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center"
      style={{ "min-height": minHeight() }}
      data-tauri-drag-region
      onMouseDown={drag}
@@ -269,7 +269,7 @@ export function Titlebar() {
      </div>

      <div class="min-w-0 flex items-center justify-center pointer-events-none">
-        <div id="opencode-titlebar-center" class="pointer-events-auto w-full min-w-0 flex justify-center lg:w-fit" />
+        <div id="opencode-titlebar-center" class="pointer-events-auto min-w-0 flex justify-center w-fit max-w-full" />
      </div>

      <div
@@ -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) => {
@@ -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(
@@ -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
@@ -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"])
+  })
+})
@@ -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
+}
@@ -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
@@ -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),
@@ -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"
@@ -657,25 +658,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 +724,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 +788,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 +1891,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 +1917,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,
        }}
@@ -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
@@ -122,9 +122,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 +211,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 +285,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 +431,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 +461,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()))

@@ -799,7 +821,7 @@ export default function Page() {
  }

  const emptyTurn = () => (
-    <div class="h-full pb-64 flex flex-col items-center justify-center text-center gap-6">
+    <div class="h-full pb-64 -mt-4 flex flex-col items-center justify-center text-center gap-6">
      <div class="text-14-regular text-text-weak max-w-56">{language.t("session.review.noChanges")}</div>
    </div>
  )
@@ -914,7 +936,7 @@ export default function Page() {
          diffStyle: layout.review.diffStyle(),
          onDiffStyleChange: layout.review.setDiffStyle,
          loadingClass: "px-6 py-4 text-text-weak",
-          emptyClass: "h-full pb-64 flex flex-col items-center justify-center text-center gap-6",
+          emptyClass: "h-full pb-64 -mt-4 flex flex-col items-center justify-center text-center gap-6",
        })}
      </div>
    </div>
@@ -1098,7 +1120,7 @@ export default function Page() {
  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 +1143,7 @@ export default function Page() {

  const resumeScroll = () => {
    setStore("messageId", undefined)
-    autoScroll.smoothScrollToBottom()
+    autoScroll.forceScrollToBottom()
    clearMessageHash()

    const el = scroller
@@ -1189,11 +1211,13 @@ 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()
@@ -1225,6 +1249,7 @@ export default function Page() {
  onCleanup(() => {
    document.removeEventListener("keydown", handleKeyDown)
    scrollSpy.destroy()
+    if (reviewFrame !== undefined) cancelAnimationFrame(reviewFrame)
    if (scrollStateFrame !== undefined) cancelAnimationFrame(scrollStateFrame)
  })

@@ -1246,7 +1271,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(),
@@ -1266,7 +1291,7 @@ export default function Page() {
                        container: "px-4",
                      },
                      loadingClass: "px-4 py-4 text-text-weak",
-                      emptyClass: "h-full pb-64 flex flex-col items-center justify-center text-center gap-6",
+                      emptyClass: "h-full pb-64 -mt-4 flex flex-col items-center justify-center text-center gap-6",
                    })}
                    scroll={ui.scroll}
                    onResumeScroll={resumeScroll}
@@ -1279,7 +1304,6 @@ export default function Page() {
                    onScrollSpyScroll={scrollSpy.onScroll}
                    onTurnBackfillScroll={historyWindow.onScrollerScroll}
                    onAutoScrollInteraction={autoScroll.handleInteraction}
-                    onPreserveScrollAnchor={autoScroll.preserve}
                    centered={centered()}
                    setContentRef={(el) => {
                      content = el
@@ -1362,6 +1386,7 @@ export default function Page() {
          reviewPanel={reviewPanel}
          activeDiff={tree.activeDiff}
          focusReviewDiff={focusReviewDiff}
+          reviewSnap={ui.reviewSnap}
          size={size}
        />
      </div>
@@ -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>
@@ -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()
@@ -1,31 +1,27 @@
-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 { 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 +33,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 +110,6 @@ function createTimelineStaging(input: TimelineStageInput) {
    completedSession: "",
    count: 0,
  })
-  const [readySession, setReadySession] = createSignal("")
-  let active = ""

  const stagedCount = createMemo(() => {
    const total = input.messages().length
@@ -142,46 +134,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 +160,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 +177,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: {
@@ -231,7 +196,6 @@ export function MessageTimeline(props: {
  onScrollSpyScroll: () => void
  onTurnBackfillScroll: () => void
  onAutoScrollInteraction: (event: MouseEvent) => void
-  onPreserveScrollAnchor: (target: HTMLElement) => void
  centered: boolean
  setContentRef: (el: HTMLDivElement) => void
  turnStart: number
@@ -246,19 +210,14 @@ export function MessageTimeline(props: {
  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 +230,28 @@ 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 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 +259,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 +269,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 +498,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,18 +532,9 @@ 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()
@@ -401,24 +543,134 @@ export function MessageTimeline(props: {
            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>
+                    <Show when={titleValue() || title.editing}>
+                      <Show
+                        when={title.editing}
+                        fallback={
+                          <h1
+                            class="text-14-medium text-text-strong truncate grow-1 min-w-0 pl-2"
+                            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 pl-2 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={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 +692,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,10 +700,7 @@ 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 (
@@ -473,7 +713,7 @@ export function MessageTimeline(props: {
                      }}
                      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 +757,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()}
@@ -31,6 +31,7 @@ export function SessionSidePanel(props: {
  reviewPanel: () => JSX.Element
  activeDiff?: string
  focusReviewDiff: (path: string) => void
+  reviewSnap: boolean
  size: Sizing
 }) {
  const params = useParams()
@@ -55,11 +56,6 @@ export function SessionSidePanel(props: {
    if (reviewOpen()) return `calc(100% - ${layout.session.width()}px)`
    return `${layout.fileTree.width()}px`
  })
-  const reviewWidth = createMemo(() => {
-    if (!reviewOpen()) return "0px"
-    if (!fileOpen()) return "100%"
-    return `calc(100% - ${layout.fileTree.width()}px)`
-  })
  const treeWidth = createMemo(() => (fileOpen() ? `${layout.fileTree.width()}px` : "0px"))

  const info = createMemo(() => (params.id ? sync.session.get(params.id) : undefined))
@@ -108,7 +104,7 @@ export function SessionSidePanel(props: {

  const empty = (msg: string) => (
    <div class="h-full flex flex-col">
-      <div class="h-12 shrink-0" aria-hidden />
+      <div class="h-6 shrink-0" aria-hidden />
      <div class="flex-1 pb-64 flex items-center justify-center text-center">
        <div class="text-12-regular text-text-weak">{msg}</div>
      </div>
@@ -231,10 +227,9 @@ export function SessionSidePanel(props: {
        inert={!open()}
        class="relative min-w-0 h-full flex shrink-0 overflow-hidden bg-background-base"
        classList={{
-          "opacity-100": open(),
-          "opacity-0 pointer-events-none": !open(),
-          "transition-[width,opacity] duration-[240ms] ease-[cubic-bezier(0.22,1,0.36,1)] will-change-[width] motion-reduce:transition-none":
-            !props.size.active(),
+          "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.reviewSnap,
        }}
        style={{ width: panelWidth() }}
      >
@@ -242,14 +237,10 @@ export function SessionSidePanel(props: {
          <div
            aria-hidden={!reviewOpen()}
            inert={!reviewOpen()}
-            class="relative min-w-0 h-full shrink-0 overflow-hidden bg-background-base"
+            class="relative min-w-0 h-full flex-1 overflow-hidden bg-background-base"
            classList={{
-              "opacity-100": reviewOpen(),
-              "opacity-0 pointer-events-none": !reviewOpen(),
-              "transition-[width,opacity] duration-[240ms] ease-[cubic-bezier(0.22,1,0.36,1)] will-change-[width] motion-reduce:transition-none":
-                !props.size.active(),
+              "pointer-events-none": !reviewOpen(),
            }}
-            style={{ width: reviewWidth() }}
          >
            <div class="size-full min-w-0 h-full bg-background-base">
              <DragDropProvider
@@ -339,7 +330,7 @@ export function SessionSidePanel(props: {
                  <Tabs.Content value="empty" class="flex flex-col h-full overflow-hidden contain-strict">
                    <Show when={activeTab() === "empty"}>
                      <div class="relative pt-2 flex-1 min-h-0 overflow-hidden">
-                        <div class="h-full px-6 pb-42 flex flex-col items-center justify-center text-center gap-6">
+                        <div class="h-full px-6 pb-42 -mt-4 flex flex-col items-center justify-center text-center gap-6">
                          <Mark class="w-14 opacity-10" />
                          <div class="text-14-regular text-text-weak max-w-56">
                            {language.t("session.files.selectToOpen")}
@@ -385,9 +376,8 @@ export function SessionSidePanel(props: {
            inert={!fileOpen()}
            class="relative min-w-0 h-full shrink-0 overflow-hidden"
            classList={{
-              "opacity-100": fileOpen(),
-              "opacity-0 pointer-events-none": !fileOpen(),
-              "transition-[width,opacity] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-[width] motion-reduce:transition-none":
+              "pointer-events-none": !fileOpen(),
+              "transition-[width] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-[width] motion-reduce:transition-none":
                !props.size.active(),
            }}
            style={{ width: treeWidth() }}
@@ -435,7 +425,11 @@ export function SessionSidePanel(props: {
                        />
                      </Show>
                    </Match>
-                    <Match when={true}>{empty(language.t(reviewEmptyKey()))}</Match>
+                    <Match when={true}>
+                      {empty(
+                        language.t(sync.project && !sync.project.vcs ? "session.review.noChanges" : reviewEmptyKey()),
+                      )}
+                    </Match>
                  </Switch>
                </Tabs.Content>
                <Tabs.Content value="all" class="bg-background-stronger px-3 py-0">
@@ -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>
-  )
-}
@@ -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)}
                            />
@@ -1,5 +1,6 @@
 import type { UserMessage } from "@opencode-ai/sdk/v2"
-import { createEffect, createMemo, onCleanup, onMount } from "solid-js"
+import { useLocation, useNavigate } from "@solidjs/router"
+import { createEffect, createMemo, onMount } from "solid-js"
 import { messageIdFromHash } from "./message-id-from-hash"

 export { 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
@@ -26,13 +27,18 @@ export const useSessionHashScroll = (input: {
  const messageIndex = createMemo(() => new Map(visibleUserMessages().map((m, i) => [m.id, i])))
  let pendingKey = ""

+  const location = useLocation()
+  const navigate = useNavigate()
+
  const clearMessageHash = () => {
-    if (!window.location.hash) return
-    window.history.replaceState(null, "", window.location.pathname + window.location.search)
+    if (!location.hash) return
+    navigate(location.pathname + location.search, { replace: true })
  }

  const updateHash = (id: string) => {
-    window.history.replaceState(null, "", `${window.location.pathname}${window.location.search}#${input.anchor(id)}`)
+    navigate(location.pathname + location.search + `#${input.anchor(id)}`, {
+      replace: true,
+    })
  }

  const scrollToElement = (el: HTMLElement, behavior: ScrollBehavior) => {
@@ -41,15 +47,15 @@ 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 scrollToMessage = (message: UserMessage, behavior: ScrollBehavior = "smooth") => {
+    console.log({ message, behavior })
    if (input.currentMessageId() !== message.id) input.setActiveMessage(message)

    const index = messageIndex().get(message.id) ?? -1
@@ -97,9 +103,9 @@ export const useSessionHashScroll = (input: {
  }

  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,26 +129,13 @@ 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(() => {
+    location.hash
    if (!input.sessionID() || !input.messagesReady()) return
    requestAnimationFrame(() => applyHash("auto"))
  })
@@ -166,6 +159,7 @@ export const useSessionHashScroll = (input: {
      }
    }

+    if (!targetId) targetId = messageIdFromHash(location.hash)
    if (!targetId) return
    if (input.currentMessageId() === targetId) return

@@ -177,6 +171,12 @@ export const useSessionHashScroll = (input: {
    requestAnimationFrame(() => scrollToMessage(msg, "auto"))
  })

+  onMount(() => {
+    if (typeof window !== "undefined" && "scrollRestoration" in window.history) {
+      window.history.scrollRestoration = "manual"
+    }
+  })
+
  return {
    clearMessageHash,
    scrollToMessage,
@@ -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;")
+  })
+})
@@ -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()
+  })
 })
@@ -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 = {
@@ -1,6 +1,6 @@
 {
  "name": "@opencode-ai/console-app",
-  "version": "1.2.21",
+  "version": "1.2.23",
  "type": "module",
  "license": "MIT",
  "scripts": {
@@ -480,7 +480,6 @@ export const dict = {
  "workspace.cost.deletedSuffix": "(محذوف)",
  "workspace.cost.empty": "لا توجد بيانات استخدام متاحة للفترة المحددة.",
  "workspace.cost.subscriptionShort": "اشتراك",
-  "workspace.cost.liteShort": "lite",

  "workspace.keys.title": "مفاتيح API",
  "workspace.keys.subtitle": "إدارة مفاتيح API الخاصة بك للوصول إلى خدمات opencode.",
@@ -488,7 +488,6 @@ export const dict = {
  "workspace.cost.deletedSuffix": "(excluído)",
  "workspace.cost.empty": "Nenhum dado de uso disponível para o período selecionado.",
  "workspace.cost.subscriptionShort": "ass",
-  "workspace.cost.liteShort": "lite",

  "workspace.keys.title": "Chaves de API",
  "workspace.keys.subtitle": "Gerencie suas chaves de API para acessar os serviços opencode.",
@@ -484,7 +484,6 @@ export const dict = {
  "workspace.cost.deletedSuffix": "(slettet)",
  "workspace.cost.empty": "Ingen brugsdata tilgængelige for den valgte periode.",
  "workspace.cost.subscriptionShort": "sub",
-  "workspace.cost.liteShort": "lite",

  "workspace.keys.title": "API-nøgler",
  "workspace.keys.subtitle": "Administrer dine API-nøgler for at få adgang til opencode-tjenester.",
@@ -487,7 +487,6 @@ export const dict = {
  "workspace.cost.deletedSuffix": "(gelöscht)",
  "workspace.cost.empty": "Keine Nutzungsdaten für den gewählten Zeitraum verfügbar.",
  "workspace.cost.subscriptionShort": "Abo",
-  "workspace.cost.liteShort": "lite",

  "workspace.keys.title": "API Keys",
  "workspace.keys.subtitle": "Verwalte deine API Keys für den Zugriff auf OpenCode-Dienste.",
@@ -480,7 +480,6 @@ export const dict = {
  "workspace.cost.deletedSuffix": "(deleted)",
  "workspace.cost.empty": "No usage data available for the selected period.",
  "workspace.cost.subscriptionShort": "sub",
-  "workspace.cost.liteShort": "lite",

  "workspace.keys.title": "API Keys",
  "workspace.keys.subtitle": "Manage your API keys for accessing opencode services.",
@@ -489,7 +489,6 @@ export const dict = {
  "workspace.cost.deletedSuffix": "(eliminado)",
  "workspace.cost.empty": "No hay datos de uso disponibles para el periodo seleccionado.",
  "workspace.cost.subscriptionShort": "sub",
-  "workspace.cost.liteShort": "lite",

  "workspace.keys.title": "Claves API",
  "workspace.keys.subtitle": "Gestiona tus claves API para acceder a los servicios de opencode.",
@@ -490,7 +490,6 @@ export const dict = {
  "workspace.cost.deletedSuffix": "(supprimé)",
  "workspace.cost.empty": "Aucune donnée d'utilisation disponible pour la période sélectionnée.",
  "workspace.cost.subscriptionShort": "abo",
-  "workspace.cost.liteShort": "lite",

  "workspace.keys.title": "Clés API",
  "workspace.keys.subtitle": "Gérez vos clés API pour accéder aux services OpenCode.",
@@ -487,7 +487,6 @@ export const dict = {
  "workspace.cost.deletedSuffix": "(eliminato)",
  "workspace.cost.empty": "Nessun dato di utilizzo disponibile per il periodo selezionato.",
  "workspace.cost.subscriptionShort": "sub",
-  "workspace.cost.liteShort": "lite",

  "workspace.keys.title": "Chiavi API",
  "workspace.keys.subtitle": "Gestisci le tue chiavi API per accedere ai servizi opencode.",
@@ -486,7 +486,6 @@ export const dict = {
  "workspace.cost.deletedSuffix": "(削除済み)",
  "workspace.cost.empty": "選択した期間の使用状況データはありません。",
  "workspace.cost.subscriptionShort": "サブ",
-  "workspace.cost.liteShort": "lite",

  "workspace.keys.title": "APIキー",
  "workspace.keys.subtitle": "OpenCodeサービスにアクセスするためのAPIキーを管理します。",
@@ -480,7 +480,6 @@ export const dict = {
  "workspace.cost.deletedSuffix": "(삭제됨)",
  "workspace.cost.empty": "선택한 기간에 사용 데이터가 없습니다.",
  "workspace.cost.subscriptionShort": "구독",
-  "workspace.cost.liteShort": "lite",

  "workspace.keys.title": "API 키",
  "workspace.keys.subtitle": "OpenCode 서비스 액세스를 위한 API 키를 관리하세요.",
@@ -485,7 +485,6 @@ export const dict = {
  "workspace.cost.deletedSuffix": "(slettet)",
  "workspace.cost.empty": "Ingen bruksdata tilgjengelig for den valgte perioden.",
  "workspace.cost.subscriptionShort": "sub",
-  "workspace.cost.liteShort": "lite",

  "workspace.keys.title": "API-nøkler",
  "workspace.keys.subtitle": "Administrer API-nøklene dine for å få tilgang til opencode-tjenester.",
@@ -486,7 +486,6 @@ export const dict = {
  "workspace.cost.deletedSuffix": "(usunięte)",
  "workspace.cost.empty": "Brak danych o użyciu dla wybranego okresu.",
  "workspace.cost.subscriptionShort": "sub",
-  "workspace.cost.liteShort": "lite",

  "workspace.keys.title": "Klucze API",
  "workspace.keys.subtitle": "Zarządzaj kluczami API do usług opencode.",
@@ -492,7 +492,6 @@ export const dict = {
  "workspace.cost.deletedSuffix": "(удалено)",
  "workspace.cost.empty": "Нет данных об использовании за выбранный период.",
  "workspace.cost.subscriptionShort": "подписка",
-  "workspace.cost.liteShort": "lite",

  "workspace.keys.title": "API Ключи",
  "workspace.keys.subtitle": "Управляйте вашими API ключами для доступа к сервисам opencode.",
@@ -483,7 +483,6 @@ export const dict = {
  "workspace.cost.deletedSuffix": "(ลบแล้ว)",
  "workspace.cost.empty": "ไม่มีข้อมูลการใช้งานในช่วงเวลาที่เลือก",
  "workspace.cost.subscriptionShort": "sub",
-  "workspace.cost.liteShort": "lite",

  "workspace.keys.title": "API Keys",
  "workspace.keys.subtitle": "จัดการ API keys ของคุณสำหรับการเข้าถึงบริการ OpenCode",
@@ -488,7 +488,6 @@ export const dict = {
  "workspace.cost.deletedSuffix": "(silindi)",
  "workspace.cost.empty": "Seçilen döneme ait kullanım verisi yok.",
  "workspace.cost.subscriptionShort": "abonelik",
-  "workspace.cost.liteShort": "lite",

  "workspace.keys.title": "API Anahtarları",
  "workspace.keys.subtitle": "opencode hizmetlerine erişim için API anahtarlarınızı yönetin.",
@@ -463,7 +463,6 @@ export const dict = {
  "workspace.cost.deletedSuffix": "(已删除)",
  "workspace.cost.empty": "所选期间无可用使用数据。",
  "workspace.cost.subscriptionShort": "订阅",
-  "workspace.cost.liteShort": "lite",

  "workspace.keys.title": "API 密钥",
  "workspace.keys.subtitle": "管理访问 OpenCode 服务的 API 密钥。",
@@ -464,7 +464,6 @@ export const dict = {
  "workspace.cost.deletedSuffix": "（已刪除）",
  "workspace.cost.empty": "所選期間沒有可用的使用資料。",
  "workspace.cost.subscriptionShort": "訂",
-  "workspace.cost.liteShort": "lite",

  "workspace.keys.title": "API 金鑰",
  "workspace.keys.subtitle": "管理你的 API 金鑰以存取 OpenCode 服務。",
@@ -218,7 +218,7 @@ export function GraphSection() {
    const colorTextSecondary = styles.getPropertyValue("--color-text-secondary").trim()
    const colorBorder = styles.getPropertyValue("--color-border").trim()
    const subSuffix = ` (${i18n.t("workspace.cost.subscriptionShort")})`
-    const liteSuffix = ` (${i18n.t("workspace.cost.liteShort")})`
+    const liteSuffix = " (go)"

    const dailyDataRegular = new Map<string, Map<string, number>>()
    const dailyDataSub = new Map<string, Map<string, number>>()
@@ -1,7 +1,7 @@
 {
  "$schema": "https://json.schemastore.org/package.json",
  "name": "@opencode-ai/console-core",
-  "version": "1.2.21",
+  "version": "1.2.23",
  "private": true,
  "type": "module",
  "license": "MIT",
@@ -1,6 +1,6 @@
 {
  "name": "@opencode-ai/console-function",
-  "version": "1.2.21",
+  "version": "1.2.23",
  "$schema": "https://json.schemastore.org/package.json",
  "private": true,
  "type": "module",
@@ -1,6 +1,6 @@
 {
  "name": "@opencode-ai/console-mail",
-  "version": "1.2.21",
+  "version": "1.2.23",
  "dependencies": {
    "@jsx-email/all": "2.2.3",
    "@jsx-email/cli": "1.4.3",
@@ -1,7 +1,7 @@
 {
  "name": "@opencode-ai/desktop-electron",
  "private": true,
-  "version": "1.2.21",
+  "version": "1.2.23",
  "type": "module",
  "license": "MIT",
  "homepage": "https://opencode.ai",
@@ -1,7 +1,7 @@
 {
  "name": "@opencode-ai/desktop",
  "private": true,
-  "version": "1.2.21",
+  "version": "1.2.23",
  "type": "module",
  "license": "MIT",
  "scripts": {
@@ -1,6 +1,6 @@
 {
  "name": "@opencode-ai/enterprise",
-  "version": "1.2.21",
+  "version": "1.2.23",
  "private": true,
  "type": "module",
  "license": "MIT",
@@ -1,7 +1,7 @@
 id = "opencode"
 name = "OpenCode"
 description = "The open source coding agent."
-version = "1.2.21"
+version = "1.2.23"
 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.23/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.23/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.23/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.23/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.23/opencode-windows-x64.zip"
 cmd = "./opencode.exe"
 args = ["acp"]
@@ -1,6 +1,6 @@
 {
  "name": "@opencode-ai/function",
-  "version": "1.2.21",
+  "version": "1.2.23",
  "$schema": "https://json.schemastore.org/package.json",
  "private": true,
  "type": "module",
@@ -1,6 +1,6 @@
 {
  "$schema": "https://json.schemastore.org/package.json",
-  "version": "1.2.21",
+  "version": "1.2.23",
  "name": "opencode",
  "type": "module",
  "license": "MIT",
@@ -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)
    }

@@ -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",
@@ -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()
+          },
+        },
+      ]}
+    />
+  )
+}
@@ -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} />)
+          },
+        },
+      ]}
+    />
+  )
+}
@@ -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,
@@ -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,
+    }
  },
 })
@@ -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
@@ -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>
@@ -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)
@@ -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()
@@ -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()
@@ -57,10 +57,13 @@ 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"]
  export const OPENCODE_DISABLE_CHANNEL_DB = truthy("OPENCODE_DISABLE_CHANNEL_DB")
+  export const OPENCODE_SKIP_MIGRATIONS = truthy("OPENCODE_SKIP_MIGRATIONS")

  function number(key: string) {
    const value = process.env[key]
@@ -46,11 +46,6 @@ process.on("uncaughtException", (e) => {
  })
 })

-// Ensure the process exits on terminal hangup (eg. closing the terminal tab).
-// Without this, long-running commands like `serve` block on a never-resolving
-// promise and survive as orphaned processes.
-process.on("SIGHUP", () => process.exit())
-
 let cli = yargs(hideBin(process.argv))
  .parserConfiguration({ "populate--": true })
  .scriptName("opencode")
@@ -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
  }

@@ -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) => [
@@ -14,6 +14,7 @@ import { readFileSync, readdirSync, existsSync } from "fs"
 import * as schema from "./schema"
 import { Installation } from "../installation"
 import { Flag } from "../flag/flag"
+import { iife } from "@/util/iife"

 declare const OPENCODE_MIGRATIONS: { sql: string; timestamp: number; name: string }[] | undefined

@@ -27,15 +28,13 @@ export const NotFoundError = NamedError.create(
 const log = Log.create({ service: "db" })

 export namespace Database {
-  export function file(channel: string) {
-    if (channel === "latest" || Flag.OPENCODE_DISABLE_CHANNEL_DB) return "opencode.db"
+  export const Path = iife(() => {
+    const channel = Installation.CHANNEL
+    if (["latest", "beta"].includes(channel) || Flag.OPENCODE_DISABLE_CHANNEL_DB)
+      return path.join(Global.Path.data, "opencode.db")
    const safe = channel.replace(/[^a-zA-Z0-9._-]/g, "-")
-    return `opencode-${safe}.db`
-  }
-
-  export const Path = (() => {
-    return path.join(Global.Path.data, file(Installation.CHANNEL))
-  })()
+    return path.join(Global.Path.data, `opencode-${safe}.db`)
+  })

  type Schema = typeof schema
  export type Transaction = SQLiteTransaction<"sync", void, Schema>
@@ -106,6 +105,11 @@ export namespace Database {
        count: entries.length,
        mode: typeof OPENCODE_MIGRATIONS !== "undefined" ? "bundled" : "dev",
      })
+      if (Flag.OPENCODE_SKIP_MIGRATIONS) {
+        for (const item of entries) {
+          item.sql = "select 1;"
+        }
+      }
      migrate(db, entries)
    }

@@ -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,
@@ -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(".")
+  })
+})
@@ -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([])
+  })
 })
@@ -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")
+  })
+})
@@ -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) => {
@@ -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", () => {
@@ -1,12 +1,14 @@
 import { describe, expect, test } from "bun:test"
+import path from "path"
+import { Installation } from "../../src/installation"
 import { Database } from "../../src/storage/db"

-describe("Database.file", () => {
-  test("uses the shared database for latest", () => {
-    expect(Database.file("latest")).toBe("opencode.db")
-  })
-
-  test("sanitizes preview channels for filenames", () => {
-    expect(Database.file("fix/windows-modified-files-tracking")).toBe("opencode-fix-windows-modified-files-tracking.db")
+describe("Database.Path", () => {
+  test("returns database path for the current channel", () => {
+    const file = path.basename(Database.Path)
+    const expected = ["latest", "beta"].includes(Installation.CHANNEL)
+      ? "opencode.db"
+      : `opencode-${Installation.CHANNEL.replace(/[^a-zA-Z0-9._-]/g, "-")}.db`
+    expect(file).toBe(expected)
  })
 })
@@ -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")
+  })
 })
@@ -1,7 +1,7 @@
 {
  "$schema": "https://json.schemastore.org/package.json",
  "name": "@opencode-ai/plugin",
-  "version": "1.2.21",
+  "version": "1.2.23",
  "type": "module",
  "license": "MIT",
  "scripts": {
@@ -1,7 +1,7 @@
 {
  "$schema": "https://json.schemastore.org/package.json",
  "name": "@opencode-ai/sdk",
-  "version": "1.2.21",
+  "version": "1.2.23",
  "type": "module",
  "license": "MIT",
  "scripts": {
@@ -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 })
 }
@@ -1,6 +1,6 @@
 {
  "name": "@opencode-ai/slack",
-  "version": "1.2.21",
+  "version": "1.2.23",
  "type": "module",
  "license": "MIT",
  "scripts": {
@@ -1,6 +1,6 @@
 {
  "name": "@opencode-ai/ui",
-  "version": "1.2.21",
+  "version": "1.2.23",
  "type": "module",
  "license": "MIT",
  "exports": {
@@ -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));
  }

@@ -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>
  )
@@ -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,16 +79,25 @@
    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;
    font-size: 14px;
    font-style: normal;
    font-weight: var(--font-weight-regular);
@@ -105,9 +139,11 @@
  [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;
    font-size: 14px;
    font-style: normal;
    font-weight: var(--font-weight-regular);
@@ -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}
    />
  )
 }
@@ -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;
+  }
+}
@@ -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>
-  )
-}
@@ -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>
-  )
-}
@@ -244,6 +244,7 @@ export const LineCommentEditor = (props: LineCommentEditorProps) => {
            event.stopPropagation()
            if (e.key === "Escape") {
              event.preventDefault()
+              e.currentTarget.blur()
              split.onCancel()
              return
            }
@@ -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;
-  }
 }
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
James Long	a73ac650e9	fix(tui): revert "fix(core): handle SIGHUP and kill process (#16057 )" This reverts commit `45ac20b8aa`.	2026-03-09 11:56:47 -04:00
James Long	366b8a8034	feat(tui): add initial support for workspaces into the tui (#16230 )	2026-03-09 10:28:04 -04:00
Armin PašalićandAiden Cline	ef9bc4ec9e	feat(gitlab): send context-1m-2025-08-07 beta header to enable 1M context window (#16153 ) Co-authored-by: Aiden Cline <63023139+rekram1-node@users.noreply.github.com>	2026-03-09 09:22:00 -05:00
Jack	5838b58913	add copilot gpt-5.4 xhigh support (#16294 )	2026-03-09 22:07:12 +08:00
opencode	2712244ad3	release: v1.2.23	2026-03-09 13:50:43 +00:00
Adam	6388cbaf92	fix(app): remove oc-1 theme	2026-03-09 08:25:41 -05:00
David Hill	5cc61e1b53	tui: fix sidebar workspace container sizing by adding box-border class to prevent content overflow issues	2026-03-09 13:05:43 +00:00
Adam	0243be86a7	fix(app): don't animate review panel in/out	2026-03-09 07:49:11 -05:00
opencode-agent[bot]	9154cd64e7	chore: update nix node_modules hashes	2026-03-09 12:46:47 +00:00
Adam	c71d1bde5e	revert(app): "STUPID SEXY TIMELINE (#16420 )" (#16745 )	2026-03-09 07:36:39 -05:00
Luke Parker	f27ef595f6	fix(app): sanitize workspace store filenames on Windows (#16703 )	2026-03-09 20:26:53 +10:00
Yihui Khuu	34328828ae	fix(app): fix issue with scroll jumping when pressing escape in comment text area (#15374 )	2026-03-09 15:29:24 +05:30
Eric Clemmons Claude Opus 4.6 Shoubhit Dash	18fb19da3b	fix(opencode): pass missing auth headers in `run --attach` (#16097 ) Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com> Co-authored-by: Shoubhit Dash <shoubhit2005@gmail.com>	2026-03-09 07:32:13 +00:00
opencode-agent[bot]	849e1ac543	docs(i18n): sync locale docs from english changes	2026-03-09 02:08:46 +00:00
Ariane Emory	656a8d8f55	docs: add session_child_first keybinding to documentation (#16631 )	2026-03-08 21:03:52 -05:00
Adam	b976f339e8	feat(app): generate color palettes (#16232 )	2026-03-08 19:28:58 -05:00
Dax Raad	7d7837e5b6	disable fallback to free nano for small model	2026-03-08 19:27:15 -04:00
opencode	1db292f4df	release: v1.2.22	2026-03-08 22:34:59 +00:00
Sebastian	49a3a9fe36	guard tui exit (#16640 )	2026-03-08 23:14:41 +01:00
Luke Parker	e51ed460a6	fix(tui): canonicalize cwd after chdir (#16641 )	2026-03-09 07:57:48 +10:00
David Hill	d15c2ce349	tui: fix sidebar background color when collapsed When the sidebar was collapsed (not on mobile), the background color was showing as the stronger variant instead of matching the base background. This fixes the hover state detection so users see a consistent lighter background when the sidebar is in collapsed mode.	2026-03-08 13:34:56 +00:00
David Hill	5cc4bb4089	app: suppress hover when opening project menu or right-clicking to prevent flickering	2026-03-08 13:31:18 +00:00
Shoubhit Dash	6e9e027886	fix: trim retained desktop terminal buffers (#16583 )	2026-03-08 07:50:04 -05:00
opencode-agent[bot]	f9a3d129a4	chore: update nix node_modules hashes	2026-03-08 12:25:35 +00:00
Adam	c53d1d3ad8	fix(app): less auto-expand/collapse	2026-03-08 07:11:15 -05:00
Adam	f386137fba	chore: refactoring ui hooks	2026-03-08 07:11:15 -05:00
Adam	c797b60069	fix(app): messages not loading reliably	2026-03-08 07:11:15 -05:00
Shoubhit Dash	a139e9297d	fix: prune and evict stale app session caches (#16584 )	2026-03-08 07:10:00 -05:00
Shoubhit Dash	050f99ec54	test: make process cwd check cross-platform (#16594 )	2026-03-08 06:56:45 -05:00
Roy Bruschini	23ed652901	docs(zen.mdx): correct Italian grammar and punctuation errors (#16590 )	2026-03-08 16:40:06 +05:30
tobwenandShoubhit Dash	13a68f3de3	fix(opencode): avoid TTY corruption from double cleanup (#16565 ) Co-authored-by: Shoubhit Dash <shoubhit2005@gmail.com>	2026-03-08 13:55:33 +05:30
Nate WilliamsandShoubhit Dash	fdad35aaa7	fix(tui): fix broken /mcp toggling (#16431 ) Co-authored-by: Shoubhit Dash <shoubhit2005@gmail.com>	2026-03-08 13:31:09 +05:30
Dax	a2ce4eb650	test: remove unused Ripgrep.search coverage (#16554 )	2026-03-07 21:40:57 -05:00
David Hill	8fa04986cf	Revert "tui: dock auto-accept after thinking and move Add file to bottom-left" This reverts commit `69cb49f7cc`.	2026-03-08 01:31:09 +00:00
David Hill	a5710ed3e1	Revert "tui: keep model + thinking selectors beside Add file" This reverts commit `426dcfa3b0`.	2026-03-08 01:31:06 +00:00
David Hill	2efdc9df93	Revert "tui: add more editor bottom padding for prompt controls" This reverts commit `981353793d`.	2026-03-08 01:31:03 +00:00
David Hill	0c245886fe	Revert "tui: expose auto-accept as a permissions select" This reverts commit `12d862dbd3`.	2026-03-08 01:31:00 +00:00
David Hill	f03288b411	Revert "tui: use text-base color for prompt selects" This reverts commit `207ebf4b8c`.	2026-03-08 01:30:55 +00:00
David Hill	09388c98f3	Revert "tui: remove prompt model/thinking/permissions selectors on dev so the composer stays simple" This reverts commit `ae25c1e7b7`.	2026-03-08 01:27:45 +00:00
David Hill	ae25c1e7b7	tui: remove prompt model/thinking/permissions selectors on dev so the composer stays simple	2026-03-08 01:21:45 +00:00
David Hill	0813c14cc6	tui: restore new-session logo on dev so users recognize OpenCode immediately	2026-03-08 01:18:42 +00:00
David Hill	b5151c421f	tui: revert new-session logo on dev so this UI change only ships with auto-accept-permissions	2026-03-08 01:10:52 +00:00
David Hill	e66fd079db	tui: add opencode logo to new session screen so users can immediately identify the app when starting a fresh session	2026-03-08 00:59:03 +00:00
David Hill	207ebf4b8c	tui: use text-base color for prompt selects Select triggers in the composer now use the normal text color so model/thinking/permissions controls read consistently with the rest of the input UI.	2026-03-08 00:53:57 +00:00
David Hill	12d862dbd3	tui: expose auto-accept as a permissions select Lets people explicitly choose between normal permission prompts and auto-accept while composing, without relying on an ambiguous icon state.	2026-03-08 00:53:57 +00:00
David Hill	981353793d	tui: add more editor bottom padding for prompt controls Gives typed text more breathing room above the Add file/model/thinking row so the controls don’t visually crowd what you’re writing.	2026-03-08 00:53:57 +00:00
David Hill	426dcfa3b0	tui: keep model + thinking selectors beside Add file People change models and thinking settings while composing, so keeping those controls next to the Add file button avoids hunting in the footer and reduces context switching mid-message.	2026-03-08 00:53:57 +00:00
David Hill	69cb49f7cc	tui: dock auto-accept after thinking and move Add file to bottom-left Auto-accept now lives in the footer dock beside the thinking control so it stays easy to find without crowding the text box. The Add file button moves to the bottom-left of the editor and the input gets a bit more bottom padding so the control row doesn’t overlap what you’re typing.	2026-03-08 00:53:57 +00:00
Dax Raad	e30678a088	test: normalize ripgrep path assertion on windows	2026-03-07 19:47:57 -05:00
opencode-agent[bot]	771b29a857	chore: generate	2026-03-08 00:31:35 +00:00
Dax Raad	e6d1aae33a	test: lock in process, ripgrep, and installation helpers	2026-03-07 19:30:32 -05:00
David Hill	9dc8ac4734	tui: revert prompt control docking Restore the previous prompt control layout after the dock/position changes made the composer feel less familiar. This brings auto-accept back to its prior spot and returns Add file to the previous placement.	2026-03-08 00:17:28 +00:00
David Hill	fdd037ba20	tui: dock auto-accept after thinking and move Add file to bottom-left Auto-accept now lives in the footer dock beside the thinking control so it stays easy to find without crowding the text box. The Add file button moves to the bottom-left of the editor and the input gets a bit more bottom padding so the control row doesn’t overlap what you’re typing.	2026-03-08 00:08:37 +00:00
Dax Raad	523f792b48	core: update database path test to verify correct channel-based filename The test now validates that the database file is named according to the current installation channel (latest/beta get 'opencode.db', others get sanitized names). This ensures users' data is stored in the correct location based on their update channel.	2026-03-07 18:53:29 -05:00
Dax Raad	2230c3c401	core: allow beta channel to share database with stable channel	2026-03-07 18:53:29 -05:00
David Hill	1b494e5087	tui: balance titlebar columns so center content doesn't get squeezed by long side content	2026-03-07 23:50:23 +00:00
David Hill	9c43893a0f	tui: align numeric displays consistently across tool outputs and diff counters using tabular numerals	2026-03-07 23:49:10 +00:00
David Hill	6dfe19b445	tui: center empty states vertically in session view and improve review panel messaging for projects without version control	2026-03-07 23:45:16 +00:00
Dax Raad	a965a06259	core: add OPENCODE_SKIP_MIGRATIONS flag to bypass database migrations Allows users to skip automatic database migrations by setting the OPENCODE_SKIP_MIGRATIONS environment variable. Useful for testing scenarios or when manually managing database state.	2026-03-07 16:17:00 -05:00
Frank	0654f28c72	zen: fix graph legend	2026-03-07 14:28:36 -05:00
Adam	a32b76dee0	fix(app): review panel transition	2026-03-07 13:27:44 -06:00