Merge branch 'dev' into opencode-2-0

- Add concurrency settings to cancel outdated runs when new commits are pushed
- Add contents: read permission for security hardening
- Remove redundant required job that checked test results

.github/actions/setup-bun/action.yml

@@ -31,6 +31,10 @@ runs:
         bun-version-file: ${{ !steps.bun-url.outputs.url && 'package.json' || '' }}
         bun-download-url: ${{ steps.bun-url.outputs.url }}
 
+    - name: Install setuptools for distutils compatibility
+      run: python3 -m pip install setuptools || pip install setuptools || true
+      shell: bash
+
     - name: Install dependencies
       run: bun install
       shell: bash

.github/workflows/storybook.yml

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

.github/workflows/test.yml

@@ -6,6 +6,14 @@ on:
       - dev
   pull_request:
   workflow_dispatch:
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+permissions:
+  contents: read
+
 jobs:
   unit:
     name: unit (${{ matrix.settings.name }})
@@ -86,18 +94,3 @@ jobs:
           path: |
             packages/app/e2e/test-results
             packages/app/e2e/playwright-report
-
-  required:
-    name: test (linux)
-    runs-on: blacksmith-4vcpu-ubuntu-2404
-    needs:
-      - unit
-      - e2e
-    if: always()
-    steps:
-      - name: Verify upstream test jobs passed
-        run: |
-          echo "unit=${{ needs.unit.result }}"
-          echo "e2e=${{ needs.e2e.result }}"
-          test "${{ needs.unit.result }}" = "success"
-          test "${{ needs.e2e.result }}" = "success"

.opencode/.gitignore

@@ -1,3 +1,6 @@
-plans/
-bun.lock
+node_modules
+plans
 package.json
+bun.lock
+.gitignore
+package-lock.json

.opencode/opencode.jsonc

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

.opencode/tool/github-pr-search.ts

@@ -1,6 +1,5 @@
 /// <reference path="../env.d.ts" />
 import { tool } from "@opencode-ai/plugin"
-import DESCRIPTION from "./github-pr-search.txt"
 
 async function githubFetch(endpoint: string, options: RequestInit = {}) {
   const response = await fetch(`https://api.github.com${endpoint}`, {
@@ -24,7 +23,16 @@ interface PR {
 }
 
 export default tool({
-  description: DESCRIPTION,
+  description: `Use this tool to search GitHub pull requests by title and description.
+
+This tool searches PRs in the anomalyco/opencode repository and returns LLM-friendly results including:
+- PR number and title
+- Author
+- State (open/closed/merged)
+- Labels
+- Description snippet
+
+Use the query parameter to search for keywords that might appear in PR titles or descriptions.`,
   args: {
     query: tool.schema.string().describe("Search query for PR titles and descriptions"),
     limit: tool.schema.number().describe("Maximum number of results to return").default(10),

.opencode/tool/github-pr-search.txt

@@ -1,10 +0,0 @@
-Use this tool to search GitHub pull requests by title and description.
-
-This tool searches PRs in the anomalyco/opencode repository and returns LLM-friendly results including:
-- PR number and title
-- Author
-- State (open/closed/merged)
-- Labels
-- Description snippet
-
-Use the query parameter to search for keywords that might appear in PR titles or descriptions.

.opencode/tool/github-triage.ts

@@ -1,20 +1,11 @@
 /// <reference path="../env.d.ts" />
 import { tool } from "@opencode-ai/plugin"
-import DESCRIPTION from "./github-triage.txt"
 
 const TEAM = {
   desktop: ["adamdotdevin", "iamdavidhill", "Brendonovich", "nexxeln"],
   zen: ["fwang", "MrMushrooooom"],
-  tui: [
-    "thdxr",
-    "kommander",
-    // "rekram1-node" (on vacation)
-  ],
-  core: [
-    "thdxr",
-    // "rekram1-node", (on vacation)
-    "jlongster",
-  ],
+  tui: ["thdxr", "kommander", "rekram1-node"],
+  core: ["thdxr", "rekram1-node", "jlongster"],
   docs: ["R44VC0RP"],
   windows: ["Hona"],
 } as const
@@ -48,9 +39,17 @@ async function githubFetch(endpoint: string, options: RequestInit = {}) {
 }
 
 export default tool({
-  description: DESCRIPTION,
+  description: `Use this tool to assign and/or label a GitHub issue.
+
+Choose labels and assignee using the current triage policy and ownership rules.
+Pick the most fitting labels for the issue and assign one owner.
+
+If unsure, choose the team/section with the most overlap with the issue and assign a member from that team at random.`,
   args: {
-    assignee: tool.schema.enum(ASSIGNEES as [string, ...string[]]).describe("The username of the assignee"),
+    assignee: tool.schema
+      .enum(ASSIGNEES as [string, ...string[]])
+      .describe("The username of the assignee")
+      .default("rekram1-node"),
     labels: tool.schema
       .array(tool.schema.enum(["nix", "opentui", "perf", "web", "desktop", "zen", "docs", "windows", "core"]))
       .describe("The labels(s) to add to the issue")
@@ -73,8 +72,7 @@ export default tool({
       results.push("Dropped label: nix (issue does not mention nix)")
     }
 
-    // const assignee = nix ? "rekram1-node" : web ? pick(TEAM.desktop) : args.assignee
-    const assignee = web ? pick(TEAM.desktop) : args.assignee
+    const assignee = nix ? "rekram1-node" : web ? pick(TEAM.desktop) : args.assignee
 
     if (labels.includes("zen") && !zen) {
       throw new Error("Only add the zen label when issue title/body contains 'zen'")

.opencode/tool/github-triage.txt

@@ -1,8 +0,0 @@
-Use this tool to assign and/or label a GitHub issue.
-
-Choose labels and assignee using the current triage policy and ownership rules.
-Pick the most fitting labels for the issue and assign one owner.
-
-If unsure, choose the team/section with the most overlap with the issue and assign a member from that team at random.
-
-(Note: rekram1-node is on vacation, do not assign issues to him.)

AGENTS.md

@@ -122,3 +122,7 @@ const table = sqliteTable("session", {
 - Avoid mocks as much as possible
 - Test actual implementation, do not duplicate logic into tests
 - Tests cannot run from repo root (guard: `do-not-run-tests-from-root`); run from package dirs like `packages/opencode`.
+
+## Type Checking
+
+- Always run `bun typecheck` from package directories (e.g., `packages/opencode`), never `tsc` directly.

README.md

@@ -128,7 +128,7 @@ If you are working on a project that's related to OpenCode and is using "opencod
 
 #### How is this different from Claude Code?
 
-It's very similar to Claude Code in terms of capability. Here are the key differences:
+It's very similar to Claude Code in terms of capability. Here are the key differences::
 
 - 100% open source
 - Not coupled to any provider. Although we recommend the models we provide through [OpenCode Zen](https://opencode.ai/zen), OpenCode can be used with Claude, OpenAI, Google, or even local models. As models evolve, the gaps between them will close and pricing will drop, so being provider-agnostic is important.

nix/hashes.json

@@ -1,8 +1,8 @@
 {
   "nodeModules": {
-    "x86_64-linux": "sha256-4kjoJ06VNvHltPHfzQRBG0bC6R39jao10ffGzrNZ230=",
-    "aarch64-linux": "sha256-6Uio+S2rcyBWbBEeOZb9N1CCKgkbKi68lOIKi3Ws/pQ=",
-    "aarch64-darwin": "sha256-8ngN5KVN4vhdsk0QJ11BGgSVBrcaEbwSj23c77HBpgs=",
-    "x86_64-darwin": "sha256-v/ueYGb9a0Nymzy+mkO4uQr78DAuJnES1qOT0onFgnQ="
+    "x86_64-linux": "sha256-dhL4YeSi4Lm9yDp919Fx7N2hyLUbZQa2qWoCf/50ce8=",
+    "aarch64-linux": "sha256-//YxCsrvYlxuvd0MtFFO+pLxjmuemyrvGzSIPxzO+rA=",
+    "aarch64-darwin": "sha256-c65kSWteQNaBcQUsjbXNqT61vt98JPNYo9yMNvUygCw=",
+    "x86_64-darwin": "sha256-hlTzEFv3nZHwlDXU65LfMC+NaqYjjyZqagdJ366CNxY="
   }
 }

package.json

@@ -41,8 +41,9 @@
       "@tailwindcss/vite": "4.1.11",
       "diff": "8.0.2",
       "dompurify": "3.3.1",
-      "drizzle-kit": "1.0.0-beta.16-ea816b6",
-      "drizzle-orm": "1.0.0-beta.16-ea816b6",
+      "effect": "4.0.0-beta.29",
+      "drizzle-kit": "1.0.0-beta.16-c2458b2",
+      "drizzle-orm": "1.0.0-beta.16-c2458b2",
       "ai": "5.0.124",
       "hono": "4.10.7",
       "hono-openapi": "1.1.2",

packages/app/e2e/actions.ts

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

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

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

packages/app/e2e/selectors.ts

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

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

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

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

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

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

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

packages/app/e2e/utils.ts

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

packages/app/package.json

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

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

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

packages/app/src/components/debug-bar.tsx

@@ -0,0 +1,441 @@
+import { useIsRouting, useLocation } from "@solidjs/router"
+import { batch, createEffect, onCleanup, onMount } from "solid-js"
+import { createStore } from "solid-js/store"
+import { Tooltip } from "@opencode-ai/ui/tooltip"
+
+type Mem = Performance & {
+  memory?: {
+    usedJSHeapSize: number
+    jsHeapSizeLimit: number
+  }
+}
+
+type Evt = PerformanceEntry & {
+  interactionId?: number
+  processingStart?: number
+}
+
+type Shift = PerformanceEntry & {
+  hadRecentInput: boolean
+  value: number
+}
+
+type Obs = PerformanceObserverInit & {
+  durationThreshold?: number
+}
+
+const span = 5000
+
+const ms = (n?: number, d = 0) => {
+  if (n === undefined || Number.isNaN(n)) return "n/a"
+  return `${n.toFixed(d)}ms`
+}
+
+const time = (n?: number) => {
+  if (n === undefined || Number.isNaN(n)) return "n/a"
+  return `${Math.round(n)}`
+}
+
+const mb = (n?: number) => {
+  if (n === undefined || Number.isNaN(n)) return "n/a"
+  const v = n / 1024 / 1024
+  return `${v >= 1024 ? v.toFixed(0) : v.toFixed(1)}MB`
+}
+
+const bad = (n: number | undefined, limit: number, low = false) => {
+  if (n === undefined || Number.isNaN(n)) return false
+  return low ? n < limit : n > limit
+}
+
+const session = (path: string) => path.includes("/session")
+
+function Cell(props: { bad?: boolean; dim?: boolean; label: string; tip: string; value: string; wide?: boolean }) {
+  return (
+    <Tooltip value={props.tip} placement="top">
+      <div
+        classList={{
+          "flex min-h-[42px] w-full min-w-0 flex-col items-center justify-center rounded-[8px] bg-white/5 px-0.5 py-1 text-center": true,
+          "col-span-2": !!props.wide,
+        }}
+      >
+        <div class="text-[10px] leading-none font-black uppercase tracking-[0.04em] opacity-70">{props.label}</div>
+        <div
+          classList={{
+            "text-[13px] leading-none font-bold tabular-nums sm:text-[14px]": true,
+            "text-text-on-critical-base": !!props.bad,
+            "opacity-70": !!props.dim,
+          }}
+        >
+          {props.value}
+        </div>
+      </div>
+    </Tooltip>
+  )
+}
+
+export function DebugBar() {
+  const location = useLocation()
+  const routing = useIsRouting()
+  const [state, setState] = createStore({
+    cls: undefined as number | undefined,
+    delay: undefined as number | undefined,
+    fps: undefined as number | undefined,
+    gap: undefined as number | undefined,
+    heap: {
+      limit: undefined as number | undefined,
+      used: undefined as number | undefined,
+    },
+    inp: undefined as number | undefined,
+    jank: undefined as number | undefined,
+    long: {
+      block: undefined as number | undefined,
+      count: undefined as number | undefined,
+      max: undefined as number | undefined,
+    },
+    nav: {
+      dur: undefined as number | undefined,
+      pending: false,
+    },
+  })
+
+  const heap = () => (state.heap.limit ? (state.heap.used ?? 0) / state.heap.limit : undefined)
+  const heapv = () => {
+    const value = heap()
+    if (value === undefined) return "n/a"
+    return `${Math.round(value * 100)}%`
+  }
+  const longv = () => (state.long.count === undefined ? "n/a" : `${time(state.long.block)}/${state.long.count}`)
+  const navv = () => (state.nav.pending ? "..." : time(state.nav.dur))
+
+  let prev = ""
+  let start = 0
+  let init = false
+  let one = 0
+  let two = 0
+
+  createEffect(() => {
+    const busy = routing()
+    const next = `${location.pathname}${location.search}`
+
+    if (!init) {
+      init = true
+      prev = next
+      return
+    }
+
+    if (busy) {
+      if (one !== 0) cancelAnimationFrame(one)
+      if (two !== 0) cancelAnimationFrame(two)
+      one = 0
+      two = 0
+      if (start !== 0) return
+      start = performance.now()
+      if (session(prev)) setState("nav", { dur: undefined, pending: true })
+      return
+    }
+
+    if (start === 0) {
+      prev = next
+      return
+    }
+
+    const at = start
+    const from = prev
+    start = 0
+    prev = next
+
+    if (!(session(from) || session(next))) return
+
+    if (one !== 0) cancelAnimationFrame(one)
+    if (two !== 0) cancelAnimationFrame(two)
+    one = requestAnimationFrame(() => {
+      one = 0
+      two = requestAnimationFrame(() => {
+        two = 0
+        setState("nav", { dur: performance.now() - at, pending: false })
+      })
+    })
+  })
+
+  onMount(() => {
+    const obs: PerformanceObserver[] = []
+    const fps: Array<{ at: number; dur: number }> = []
+    const long: Array<{ at: number; dur: number }> = []
+    const seen = new Map<number | string, { at: number; delay: number; dur: number }>()
+    let hasLong = false
+    let poll: number | undefined
+    let raf = 0
+    let last = 0
+    let snap = 0
+
+    const trim = (list: Array<{ at: number; dur: number }>, span: number, at: number) => {
+      while (list[0] && at - list[0].at > span) list.shift()
+    }
+
+    const syncFrame = (at: number) => {
+      trim(fps, span, at)
+      const total = fps.reduce((sum, entry) => sum + entry.dur, 0)
+      const gap = fps.reduce((max, entry) => Math.max(max, entry.dur), 0)
+      const jank = fps.filter((entry) => entry.dur > 32).length
+      batch(() => {
+        setState("fps", total > 0 ? (fps.length * 1000) / total : undefined)
+        setState("gap", gap > 0 ? gap : undefined)
+        setState("jank", jank)
+      })
+    }
+
+    const syncLong = (at = performance.now()) => {
+      if (!hasLong) return
+      trim(long, span, at)
+      const block = long.reduce((sum, entry) => sum + Math.max(0, entry.dur - 50), 0)
+      const max = long.reduce((hi, entry) => Math.max(hi, entry.dur), 0)
+      setState("long", { block, count: long.length, max })
+    }
+
+    const syncInp = (at = performance.now()) => {
+      for (const [key, entry] of seen) {
+        if (at - entry.at > span) seen.delete(key)
+      }
+      let delay = 0
+      let inp = 0
+      for (const entry of seen.values()) {
+        delay = Math.max(delay, entry.delay)
+        inp = Math.max(inp, entry.dur)
+      }
+      batch(() => {
+        setState("delay", delay > 0 ? delay : undefined)
+        setState("inp", inp > 0 ? inp : undefined)
+      })
+    }
+
+    const syncHeap = () => {
+      const mem = (performance as Mem).memory
+      if (!mem) return
+      setState("heap", { limit: mem.jsHeapSizeLimit, used: mem.usedJSHeapSize })
+    }
+
+    const reset = () => {
+      fps.length = 0
+      long.length = 0
+      seen.clear()
+      last = 0
+      snap = 0
+      batch(() => {
+        setState("fps", undefined)
+        setState("gap", undefined)
+        setState("jank", undefined)
+        setState("delay", undefined)
+        setState("inp", undefined)
+        if (hasLong) setState("long", { block: 0, count: 0, max: 0 })
+      })
+    }
+
+    const watch = (type: string, init: Obs, fn: (entries: PerformanceEntry[]) => void) => {
+      if (typeof PerformanceObserver === "undefined") return false
+      if (!(PerformanceObserver.supportedEntryTypes ?? []).includes(type)) return false
+      const ob = new PerformanceObserver((list) => fn(list.getEntries()))
+      try {
+        ob.observe(init)
+        obs.push(ob)
+        return true
+      } catch {
+        ob.disconnect()
+        return false
+      }
+    }
+
+    if (
+      watch("layout-shift", { buffered: true, type: "layout-shift" }, (entries) => {
+        const add = entries.reduce((sum, entry) => {
+          const item = entry as Shift
+          if (item.hadRecentInput) return sum
+          return sum + item.value
+        }, 0)
+        if (add === 0) return
+        setState("cls", (value) => (value ?? 0) + add)
+      })
+    ) {
+      setState("cls", 0)
+    }
+
+    if (
+      watch("longtask", { buffered: true, type: "longtask" }, (entries) => {
+        const at = performance.now()
+        long.push(...entries.map((entry) => ({ at: entry.startTime, dur: entry.duration })))
+        syncLong(at)
+      })
+    ) {
+      hasLong = true
+      setState("long", { block: 0, count: 0, max: 0 })
+    }
+
+    watch("event", { buffered: true, durationThreshold: 16, type: "event" }, (entries) => {
+      for (const raw of entries) {
+        const entry = raw as Evt
+        if (entry.duration < 16) continue
+        const key =
+          entry.interactionId && entry.interactionId > 0
+            ? entry.interactionId
+            : `${entry.name}:${Math.round(entry.startTime)}`
+        const prev = seen.get(key)
+        const delay = Math.max(0, (entry.processingStart ?? entry.startTime) - entry.startTime)
+        seen.set(key, {
+          at: entry.startTime,
+          delay: Math.max(prev?.delay ?? 0, delay),
+          dur: Math.max(prev?.dur ?? 0, entry.duration),
+        })
+        if (seen.size <= 200) continue
+        const first = seen.keys().next().value
+        if (first !== undefined) seen.delete(first)
+      }
+      syncInp()
+    })
+
+    const loop = (at: number) => {
+      if (document.visibilityState !== "visible") {
+        raf = 0
+        return
+      }
+
+      if (last === 0) {
+        last = at
+        raf = requestAnimationFrame(loop)
+        return
+      }
+
+      fps.push({ at, dur: at - last })
+      last = at
+
+      if (at - snap >= 250) {
+        snap = at
+        syncFrame(at)
+      }
+
+      raf = requestAnimationFrame(loop)
+    }
+
+    const stop = () => {
+      if (raf !== 0) cancelAnimationFrame(raf)
+      raf = 0
+      if (poll === undefined) return
+      clearInterval(poll)
+      poll = undefined
+    }
+
+    const start = () => {
+      if (document.visibilityState !== "visible") return
+      if (poll === undefined) {
+        poll = window.setInterval(() => {
+          syncLong()
+          syncInp()
+          syncHeap()
+        }, 1000)
+      }
+      if (raf !== 0) return
+      raf = requestAnimationFrame(loop)
+    }
+
+    const vis = () => {
+      if (document.visibilityState !== "visible") {
+        stop()
+        return
+      }
+      reset()
+      start()
+    }
+
+    syncHeap()
+    start()
+    document.addEventListener("visibilitychange", vis)
+
+    onCleanup(() => {
+      if (one !== 0) cancelAnimationFrame(one)
+      if (two !== 0) cancelAnimationFrame(two)
+      stop()
+      document.removeEventListener("visibilitychange", vis)
+      for (const ob of obs) ob.disconnect()
+    })
+  })
+
+  return (
+    <aside
+      aria-label="Development performance diagnostics"
+      class="pointer-events-auto fixed bottom-3 right-3 z-50 w-[308px] max-w-[calc(100vw-1.5rem)] overflow-hidden rounded-xl border p-0.5 text-text-on-interactive-base shadow-[var(--shadow-lg-border-base)] sm:bottom-4 sm:right-4 sm:w-[324px]"
+      style={{
+        "background-color": "color-mix(in srgb, var(--icon-interactive-base) 42%, black)",
+        "border-color": "color-mix(in srgb, white 14%, transparent)",
+      }}
+    >
+      <div class="grid grid-cols-5 gap-px font-mono">
+        <Cell
+          label="NAV"
+          tip="Last completed route transition touching a session page, measured from router start until the first paint after it settles."
+          value={navv()}
+          bad={bad(state.nav.dur, 400)}
+          dim={state.nav.dur === undefined && !state.nav.pending}
+        />
+        <Cell
+          label="FPS"
+          tip="Rolling frames per second over the last 5 seconds."
+          value={state.fps === undefined ? "n/a" : `${Math.round(state.fps)}`}
+          bad={bad(state.fps, 50, true)}
+          dim={state.fps === undefined}
+        />
+        <Cell
+          label="FRM"
+          tip="Worst frame time over the last 5 seconds."
+          value={time(state.gap)}
+          bad={bad(state.gap, 50)}
+          dim={state.gap === undefined}
+        />
+        <Cell
+          label="JNK"
+          tip="Frames over 32ms in the last 5 seconds."
+          value={state.jank === undefined ? "n/a" : `${state.jank}`}
+          bad={bad(state.jank, 8)}
+          dim={state.jank === undefined}
+        />
+        <Cell
+          label="LNG"
+          tip={`Blocked time and long-task count in the last 5 seconds. Max task: ${ms(state.long.max)}.`}
+          value={longv()}
+          bad={bad(state.long.block, 200)}
+          dim={state.long.count === undefined}
+        />
+        <Cell
+          label="DLY"
+          tip="Worst observed input delay in the last 5 seconds."
+          value={time(state.delay)}
+          bad={bad(state.delay, 100)}
+          dim={state.delay === undefined}
+        />
+        <Cell
+          label="INP"
+          tip="Approximate interaction duration over the last 5 seconds. This is INP-like, not the official Web Vitals INP."
+          value={time(state.inp)}
+          bad={bad(state.inp, 200)}
+          dim={state.inp === undefined}
+        />
+        <Cell
+          label="CLS"
+          tip="Cumulative layout shift for the current app lifetime."
+          value={state.cls === undefined ? "n/a" : state.cls.toFixed(2)}
+          bad={bad(state.cls, 0.1)}
+          dim={state.cls === undefined}
+        />
+        <Cell
+          label="MEM"
+          tip={
+            state.heap.used === undefined
+              ? "Used JS heap vs heap limit. Chromium only."
+              : `Used JS heap vs heap limit. ${mb(state.heap.used)} of ${mb(state.heap.limit)}.`
+          }
+          value={heapv()}
+          bad={bad(heap(), 0.8)}
+          dim={state.heap.used === undefined}
+          wide
+        />
+      </div>
+    </aside>
+  )
+}

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

@@ -957,14 +957,6 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     return permission.isAutoAccepting(id, sdk.directory)
   })
 
-  const flip = () => {
-    if (!params.id) {
-      permission.toggleAutoAcceptDirectory(sdk.directory)
-      return
-    }
-    permission.toggleAutoAccept(params.id, sdk.directory)
-  }
-
   const { abort, handleSubmit } = createPromptSubmit({
     info,
     imageAttachments,
@@ -1222,7 +1214,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
               onKeyDown={handleKeyDown}
               classList={{
                 "select-text": true,
-                "w-full pl-3 pr-2 pt-2 pb-[76px] text-14-regular text-text-strong focus:outline-none whitespace-pre-wrap": true,
+                "w-full pl-3 pr-2 pt-2 pb-11 text-14-regular text-text-strong focus:outline-none whitespace-pre-wrap": true,
                 "[&_[data-type=file]]:text-syntax-property": true,
                 "[&_[data-type=agent]]:text-syntax-type": true,
                 "font-mono!": store.mode === "shell",
@@ -1230,7 +1222,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
             />
             <Show when={!prompt.dirty()}>
               <div
-                class="absolute top-0 inset-x-0 pl-3 pr-2 pt-2 pb-[76px] text-14-regular text-text-weak pointer-events-none whitespace-nowrap truncate"
+                class="absolute top-0 inset-x-0 pl-3 pr-2 pt-2 pb-11 text-14-regular text-text-weak pointer-events-none whitespace-nowrap truncate"
                 classList={{ "font-mono!": store.mode === "shell" }}
               >
                 {placeholder()}
@@ -1258,6 +1250,30 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                 "pointer-events": buttonsSpring() > 0.5 ? "auto" : "none",
               }}
             >
+              <TooltipKeybind
+                placement="top"
+                title={language.t("prompt.action.attachFile")}
+                keybind={command.keybind("file.attach")}
+              >
+                <Button
+                  data-action="prompt-attach"
+                  type="button"
+                  variant="ghost"
+                  class="size-8 p-0"
+                  style={{
+                    opacity: buttonsSpring(),
+                    transform: `scale(${0.95 + buttonsSpring() * 0.05})`,
+                    filter: `blur(${(1 - buttonsSpring()) * 2}px)`,
+                  }}
+                  onClick={pick}
+                  disabled={store.mode !== "normal"}
+                  tabIndex={store.mode === "normal" ? undefined : -1}
+                  aria-label={language.t("prompt.action.attachFile")}
+                >
+                  <Icon name="plus" class="size-4.5" />
+                </Button>
+              </TooltipKeybind>
+
               <Tooltip
                 placement="top"
                 inactive={!prompt.dirty() && !working()}
@@ -1298,129 +1314,44 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
           </div>
 
           <div class="pointer-events-none absolute bottom-2 left-2">
-            <div
-              class="pointer-events-auto flex items-center gap-1.5"
-              style={{
-                "pointer-events": buttonsSpring() > 0.5 ? "auto" : "none",
-              }}
-            >
+            <div class="pointer-events-auto">
               <TooltipKeybind
                 placement="top"
                 gutter={8}
-                title={language.t("prompt.action.attachFile")}
-                keybind={command.keybind("file.attach")}
+                title={language.t(
+                  accepting() ? "command.permissions.autoaccept.disable" : "command.permissions.autoaccept.enable",
+                )}
+                keybind={command.keybind("permissions.autoaccept")}
               >
                 <Button
-                  data-action="prompt-attach"
-                  type="button"
+                  data-action="prompt-permissions"
                   variant="ghost"
-                  class="size-8 p-0"
-                  style={{
-                    opacity: buttonsSpring(),
-                    transform: `scale(${0.95 + buttonsSpring() * 0.05})`,
-                    filter: `blur(${(1 - buttonsSpring()) * 2}px)`,
+                  onClick={() => {
+                    if (!params.id) {
+                      permission.toggleAutoAcceptDirectory(sdk.directory)
+                      return
+                    }
+                    permission.toggleAutoAccept(params.id, sdk.directory)
                   }}
-                  onClick={pick}
-                  disabled={store.mode !== "normal"}
-                  tabIndex={store.mode === "normal" ? undefined : -1}
-                  aria-label={language.t("prompt.action.attachFile")}
+                  classList={{
+                    "size-6 flex items-center justify-center": true,
+                    "text-text-base": !accepting(),
+                    "hover:bg-surface-success-base": accepting(),
+                  }}
+                  aria-label={
+                    accepting()
+                      ? language.t("command.permissions.autoaccept.disable")
+                      : language.t("command.permissions.autoaccept.enable")
+                  }
+                  aria-pressed={accepting()}
                 >
-                  <Icon name="plus" class="size-4.5" />
+                  <Icon
+                    name="chevron-double-right"
+                    size="small"
+                    classList={{ "text-icon-success-base": accepting() }}
+                  />
                 </Button>
               </TooltipKeybind>
-
-              <Show
-                when={providers.paid().length > 0}
-                fallback={
-                  <TooltipKeybind
-                    placement="top"
-                    gutter={8}
-                    title={language.t("command.model.choose")}
-                    keybind={command.keybind("model.choose")}
-                  >
-                    <Button
-                      as="div"
-                      variant="ghost"
-                      size="small"
-                      class="min-w-0 max-w-[240px] text-13-regular text-text-base group"
-                      style={{
-                        opacity: buttonsSpring(),
-                        transform: `scale(${0.95 + buttonsSpring() * 0.05})`,
-                        filter: `blur(${(1 - buttonsSpring()) * 2}px)`,
-                      }}
-                      onClick={() => dialog.show(() => <DialogSelectModelUnpaid />)}
-                    >
-                      <Show when={local.model.current()?.provider?.id}>
-                        <ProviderIcon
-                          id={local.model.current()!.provider.id}
-                          class="size-4 shrink-0 opacity-40 group-hover:opacity-100 transition-opacity duration-150"
-                          style={{ "will-change": "opacity", transform: "translateZ(0)" }}
-                        />
-                      </Show>
-                      <span class="truncate">
-                        {local.model.current()?.name ?? language.t("dialog.model.select.title")}
-                      </span>
-                      <Icon name="chevron-down" size="small" class="shrink-0" />
-                    </Button>
-                  </TooltipKeybind>
-                }
-              >
-                <TooltipKeybind
-                  placement="top"
-                  gutter={8}
-                  title={language.t("command.model.choose")}
-                  keybind={command.keybind("model.choose")}
-                >
-                  <ModelSelectorPopover
-                    triggerAs={Button}
-                    triggerProps={{
-                      variant: "ghost",
-                      size: "small",
-                      style: {
-                        opacity: buttonsSpring(),
-                        transform: `scale(${0.95 + buttonsSpring() * 0.05})`,
-                        filter: `blur(${(1 - buttonsSpring()) * 2}px)`,
-                      },
-                      class: "min-w-0 max-w-[240px] text-13-regular text-text-base group",
-                    }}
-                  >
-                    <Show when={local.model.current()?.provider?.id}>
-                      <ProviderIcon
-                        id={local.model.current()!.provider.id}
-                        class="size-4 shrink-0 opacity-40 group-hover:opacity-100 transition-opacity duration-150"
-                        style={{ "will-change": "opacity", transform: "translateZ(0)" }}
-                      />
-                    </Show>
-                    <span class="truncate">
-                      {local.model.current()?.name ?? language.t("dialog.model.select.title")}
-                    </span>
-                    <Icon name="chevron-down" size="small" class="shrink-0" />
-                  </ModelSelectorPopover>
-                </TooltipKeybind>
-              </Show>
-
-              <TooltipKeybind
-                placement="top"
-                gutter={8}
-                title={language.t("command.model.variant.cycle")}
-                keybind={command.keybind("model.variant.cycle")}
-              >
-                <Select
-                  size="small"
-                  options={variants()}
-                  current={local.model.variant.current() ?? "default"}
-                  label={(x) => (x === "default" ? language.t("common.default") : x)}
-                  onSelect={(x) => local.model.variant.set(x === "default" ? undefined : x)}
-                  class="capitalize max-w-[160px]"
-                  valueClass="truncate text-13-regular text-text-base"
-                  triggerStyle={{
-                    opacity: buttonsSpring(),
-                    transform: `scale(${0.95 + buttonsSpring() * 0.05})`,
-                    filter: `blur(${(1 - buttonsSpring()) * 2}px)`,
-                  }}
-                  variant="ghost"
-                />
-              </TooltipKeybind>
             </div>
           </div>
         </div>
@@ -1455,7 +1386,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                     current={local.agent.current()?.name ?? ""}
                     onSelect={local.agent.set}
                     class="capitalize max-w-[160px]"
-                    valueClass="truncate text-13-regular text-text-base"
+                    valueClass="truncate text-13-regular"
                     triggerStyle={{
                       height: "28px",
                       opacity: buttonsSpring(),
@@ -1466,32 +1397,93 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                     variant="ghost"
                   />
                 </TooltipKeybind>
-
+                <Show
+                  when={providers.paid().length > 0}
+                  fallback={
+                    <TooltipKeybind
+                      placement="top"
+                      gutter={4}
+                      title={language.t("command.model.choose")}
+                      keybind={command.keybind("model.choose")}
+                    >
+                      <Button
+                        as="div"
+                        variant="ghost"
+                        size="normal"
+                        class="min-w-0 max-w-[320px] text-13-regular group"
+                        style={{
+                          height: "28px",
+                          opacity: buttonsSpring(),
+                          transform: `scale(${0.95 + buttonsSpring() * 0.05})`,
+                          filter: `blur(${(1 - buttonsSpring()) * 2}px)`,
+                          "pointer-events": buttonsSpring() > 0.5 ? "auto" : "none",
+                        }}
+                        onClick={() => dialog.show(() => <DialogSelectModelUnpaid />)}
+                      >
+                        <Show when={local.model.current()?.provider?.id}>
+                          <ProviderIcon
+                            id={local.model.current()!.provider.id}
+                            class="size-4 shrink-0 opacity-40 group-hover:opacity-100 transition-opacity duration-150"
+                            style={{ "will-change": "opacity", transform: "translateZ(0)" }}
+                          />
+                        </Show>
+                        <span class="truncate">
+                          {local.model.current()?.name ?? language.t("dialog.model.select.title")}
+                        </span>
+                        <Icon name="chevron-down" size="small" class="shrink-0" />
+                      </Button>
+                    </TooltipKeybind>
+                  }
+                >
+                  <TooltipKeybind
+                    placement="top"
+                    gutter={4}
+                    title={language.t("command.model.choose")}
+                    keybind={command.keybind("model.choose")}
+                  >
+                    <ModelSelectorPopover
+                      triggerAs={Button}
+                      triggerProps={{
+                        variant: "ghost",
+                        size: "normal",
+                        style: {
+                          height: "28px",
+                          opacity: buttonsSpring(),
+                          transform: `scale(${0.95 + buttonsSpring() * 0.05})`,
+                          filter: `blur(${(1 - buttonsSpring()) * 2}px)`,
+                          "pointer-events": buttonsSpring() > 0.5 ? "auto" : "none",
+                        },
+                        class: "min-w-0 max-w-[320px] text-13-regular group",
+                      }}
+                    >
+                      <Show when={local.model.current()?.provider?.id}>
+                        <ProviderIcon
+                          id={local.model.current()!.provider.id}
+                          class="size-4 shrink-0 opacity-40 group-hover:opacity-100 transition-opacity duration-150"
+                          style={{ "will-change": "opacity", transform: "translateZ(0)" }}
+                        />
+                      </Show>
+                      <span class="truncate">
+                        {local.model.current()?.name ?? language.t("dialog.model.select.title")}
+                      </span>
+                      <Icon name="chevron-down" size="small" class="shrink-0" />
+                    </ModelSelectorPopover>
+                  </TooltipKeybind>
+                </Show>
                 <TooltipKeybind
                   placement="top"
                   gutter={4}
-                  title={language.t(
-                    accepting() ? "command.permissions.autoaccept.disable" : "command.permissions.autoaccept.enable",
-                  )}
-                  keybind={command.keybind("permissions.autoaccept")}
+                  title={language.t("command.model.variant.cycle")}
+                  keybind={command.keybind("model.variant.cycle")}
                 >
                   <Select
                     size="normal"
-                    options={["default", "autoaccept"] as const}
-                    current={accepting() ? "autoaccept" : "default"}
-                    label={(x) =>
-                      x === "autoaccept"
-                        ? language.t("command.permissions.autoaccept.enable")
-                        : `${language.t("common.default")} ${language.t("command.category.permissions")}`
-                    }
-                    onSelect={(x) => {
-                      if (!x) return
-                      if (x === "autoaccept" && accepting()) return
-                      if (x === "default" && !accepting()) return
-                      flip()
-                    }}
-                    class="max-w-[220px]"
-                    valueClass="truncate text-13-regular text-text-base"
+                    options={variants()}
+                    current={local.model.variant.current() ?? "default"}
+                    label={(x) => (x === "default" ? language.t("common.default") : x)}
+                    onSelect={(x) => local.model.variant.set(x === "default" ? undefined : x)}
+                    class="capitalize max-w-[160px]"
+                    valueClass="truncate text-13-regular"
                     triggerStyle={{
                       height: "28px",
                       opacity: buttonsSpring(),

packages/app/src/components/session/session-header.tsx

@@ -21,6 +21,8 @@ import { useLayout } from "@/context/layout"
 import { usePlatform } from "@/context/platform"
 import { useServer } from "@/context/server"
 import { useSync } from "@/context/sync"
+import { useTerminal } from "@/context/terminal"
+import { focusTerminalById } from "@/pages/session/helpers"
 import { decode64 } from "@/utils/base64"
 import { Persist, persisted } from "@/utils/persist"
 import { StatusPopover } from "../status-popover"
@@ -229,6 +231,7 @@ export function SessionHeader() {
   const sync = useSync()
   const platform = usePlatform()
   const language = useLanguage()
+  const terminal = useTerminal()
 
   const projectDirectory = createMemo(() => decode64(params.dir) ?? "")
   const project = createMemo(() => {
@@ -296,6 +299,16 @@ export function SessionHeader() {
     ] as const
   })
 
+  const toggleTerminal = () => {
+    const next = !view().terminal.opened()
+    view().terminal.toggle()
+    if (!next) return
+
+    const id = terminal.active()
+    if (!id) return
+    focusTerminalById(id)
+  }
+
   const [prefs, setPrefs] = persisted(Persist.global("open.app"), createStore({ app: "finder" as OpenApp }))
   const [menu, setMenu] = createStore({ open: false })
   const [openRequest, setOpenRequest] = createStore({
@@ -617,39 +630,39 @@ export function SessionHeader() {
                 </div>
               </Show>
               <div class="flex items-center gap-1">
-                <div class="hidden md:flex items-center gap-1 shrink-0">
-                  <TooltipKeybind
-                    title={language.t("command.terminal.toggle")}
-                    keybind={command.keybind("terminal.toggle")}
+                <TooltipKeybind
+                  title={language.t("command.terminal.toggle")}
+                  keybind={command.keybind("terminal.toggle")}
+                >
+                  <Button
+                    variant="ghost"
+                    class="group/terminal-toggle titlebar-icon w-8 h-6 p-0 box-border shrink-0"
+                    onClick={toggleTerminal}
+                    aria-label={language.t("command.terminal.toggle")}
+                    aria-expanded={view().terminal.opened()}
+                    aria-controls="terminal-panel"
                   >
-                    <Button
-                      variant="ghost"
-                      class="group/terminal-toggle titlebar-icon w-8 h-6 p-0 box-border"
-                      onClick={() => view().terminal.toggle()}
-                      aria-label={language.t("command.terminal.toggle")}
-                      aria-expanded={view().terminal.opened()}
-                      aria-controls="terminal-panel"
-                    >
-                      <div class="relative flex items-center justify-center size-4 [&>*]:absolute [&>*]:inset-0">
-                        <Icon
-                          size="small"
-                          name={view().terminal.opened() ? "layout-bottom-partial" : "layout-bottom"}
-                          class="group-hover/terminal-toggle:hidden"
-                        />
-                        <Icon
-                          size="small"
-                          name="layout-bottom-partial"
-                          class="hidden group-hover/terminal-toggle:inline-block"
-                        />
-                        <Icon
-                          size="small"
-                          name={view().terminal.opened() ? "layout-bottom" : "layout-bottom-partial"}
-                          class="hidden group-active/terminal-toggle:inline-block"
-                        />
-                      </div>
-                    </Button>
-                  </TooltipKeybind>
+                    <div class="relative flex items-center justify-center size-4 [&>*]:absolute [&>*]:inset-0">
+                      <Icon
+                        size="small"
+                        name={view().terminal.opened() ? "layout-bottom-partial" : "layout-bottom"}
+                        class="group-hover/terminal-toggle:hidden"
+                      />
+                      <Icon
+                        size="small"
+                        name="layout-bottom-partial"
+                        class="hidden group-hover/terminal-toggle:inline-block"
+                      />
+                      <Icon
+                        size="small"
+                        name={view().terminal.opened() ? "layout-bottom" : "layout-bottom-partial"}
+                        class="hidden group-active/terminal-toggle:inline-block"
+                      />
+                    </div>
+                  </Button>
+                </TooltipKeybind>
 
+                <div class="hidden md:flex items-center gap-1 shrink-0">
                   <TooltipKeybind
                     title={language.t("command.review.toggle")}
                     keybind={command.keybind("review.toggle")}

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

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

packages/app/src/components/terminal.tsx

@@ -17,6 +17,7 @@ const TOGGLE_TERMINAL_ID = "terminal.toggle"
 const DEFAULT_TOGGLE_TERMINAL_KEYBIND = "ctrl+`"
 export interface TerminalProps extends ComponentProps<"div"> {
   pty: LocalPTY
+  autoFocus?: boolean
   onSubmit?: () => void
   onCleanup?: (pty: Partial<LocalPTY> & { id: string }) => void
   onConnect?: () => void
@@ -157,7 +158,7 @@ export const Terminal = (props: TerminalProps) => {
   const language = useLanguage()
   const server = useServer()
   let container!: HTMLDivElement
-  const [local, others] = splitProps(props, ["pty", "class", "classList", "onConnect", "onConnectError"])
+  const [local, others] = splitProps(props, ["pty", "class", "classList", "autoFocus", "onConnect", "onConnectError"])
   const id = local.pty.id
   const restore = typeof local.pty.buffer === "string" ? local.pty.buffer : ""
   const restoreSize =
@@ -217,7 +218,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
@@ -386,7 +387,7 @@ export const Terminal = (props: TerminalProps) => {
         handleLinkClick,
       })
 
-      focusTerminal()
+      if (local.autoFocus !== false) focusTerminal()
 
       if (typeof document !== "undefined" && document.fonts) {
         document.fonts.ready.then(scheduleFit)

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

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

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

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

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

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

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

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

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

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

packages/app/src/context/sync.tsx

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

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

@@ -2,6 +2,7 @@ import { beforeAll, describe, expect, mock, test } from "bun:test"
 
 let getWorkspaceTerminalCacheKey: (dir: string) => string
 let getLegacyTerminalStorageKeys: (dir: string, legacySessionID?: string) => string[]
+let migrateTerminalState: (value: unknown) => unknown
 
 beforeAll(async () => {
   mock.module("@solidjs/router", () => ({
@@ -17,6 +18,7 @@ beforeAll(async () => {
   const mod = await import("./terminal")
   getWorkspaceTerminalCacheKey = mod.getWorkspaceTerminalCacheKey
   getLegacyTerminalStorageKeys = mod.getLegacyTerminalStorageKeys
+  migrateTerminalState = mod.migrateTerminalState
 })
 
 describe("getWorkspaceTerminalCacheKey", () => {
@@ -37,3 +39,44 @@ describe("getLegacyTerminalStorageKeys", () => {
     ])
   })
 })
+
+describe("migrateTerminalState", () => {
+  test("drops invalid terminals and restores a valid active terminal", () => {
+    expect(
+      migrateTerminalState({
+        active: "missing",
+        all: [
+          null,
+          { id: "one", title: "Terminal 2" },
+          { id: "one", title: "duplicate", titleNumber: 9 },
+          { id: "two", title: "logs", titleNumber: 4, rows: 24, cols: 80 },
+          { title: "no-id" },
+        ],
+      }),
+    ).toEqual({
+      active: "one",
+      all: [
+        { id: "one", title: "Terminal 2", titleNumber: 2 },
+        { id: "two", title: "logs", titleNumber: 4, rows: 24, cols: 80 },
+      ],
+    })
+  })
+
+  test("keeps a valid active id", () => {
+    expect(
+      migrateTerminalState({
+        active: "two",
+        all: [
+          { id: "one", title: "Terminal 1" },
+          { id: "two", title: "shell", titleNumber: 7 },
+        ],
+      }),
+    ).toEqual({
+      active: "two",
+      all: [
+        { id: "one", title: "Terminal 1", titleNumber: 1 },
+        { id: "two", title: "shell", titleNumber: 7 },
+      ],
+    })
+  })
+})

packages/app/src/context/terminal.tsx

@@ -1,6 +1,6 @@
 import { createStore, produce } from "solid-js/store"
 import { createSimpleContext } from "@opencode-ai/ui/context"
-import { batch, createEffect, createMemo, createRoot, onCleanup } from "solid-js"
+import { batch, createEffect, createMemo, createRoot, on, onCleanup } from "solid-js"
 import { useParams } from "@solidjs/router"
 import { useSDK } from "./sdk"
 import type { Platform } from "./platform"
@@ -20,6 +20,71 @@ export type LocalPTY = {
 const WORKSPACE_KEY = "__workspace__"
 const MAX_TERMINAL_SESSIONS = 20
 
+function record(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value)
+}
+
+function text(value: unknown) {
+  return typeof value === "string" ? value : undefined
+}
+
+function num(value: unknown) {
+  return typeof value === "number" && Number.isFinite(value) ? value : undefined
+}
+
+function numberFromTitle(title: string) {
+  const match = title.match(/^Terminal (\d+)$/)
+  if (!match) return
+  const value = Number(match[1])
+  if (!Number.isFinite(value) || value <= 0) return
+  return value
+}
+
+function pty(value: unknown): LocalPTY | undefined {
+  if (!record(value)) return
+
+  const id = text(value.id)
+  if (!id) return
+
+  const title = text(value.title) ?? ""
+  const number = num(value.titleNumber)
+  const rows = num(value.rows)
+  const cols = num(value.cols)
+  const buffer = text(value.buffer)
+  const scrollY = num(value.scrollY)
+  const cursor = num(value.cursor)
+
+  return {
+    id,
+    title,
+    titleNumber: number && number > 0 ? number : (numberFromTitle(title) ?? 0),
+    ...(rows !== undefined ? { rows } : {}),
+    ...(cols !== undefined ? { cols } : {}),
+    ...(buffer !== undefined ? { buffer } : {}),
+    ...(scrollY !== undefined ? { scrollY } : {}),
+    ...(cursor !== undefined ? { cursor } : {}),
+  }
+}
+
+export function migrateTerminalState(value: unknown) {
+  if (!record(value)) return value
+
+  const seen = new Set<string>()
+  const all = (Array.isArray(value.all) ? value.all : []).flatMap((item) => {
+    const next = pty(item)
+    if (!next || seen.has(next.id)) return []
+    seen.add(next.id)
+    return [next]
+  })
+
+  const active = text(value.active)
+
+  return {
+    active: active && seen.has(active) ? active : all[0]?.id,
+    all,
+  }
+}
+
 export function getWorkspaceTerminalCacheKey(dir: string) {
   return `${dir}:${WORKSPACE_KEY}`
 }
@@ -38,6 +103,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) {
@@ -61,16 +136,11 @@ export function clearWorkspaceTerminals(dir: string, sessionIDs?: string[], plat
 function createWorkspaceTerminalSession(sdk: ReturnType<typeof useSDK>, dir: string, legacySessionID?: string) {
   const legacy = getLegacyTerminalStorageKeys(dir, legacySessionID)
 
-  const numberFromTitle = (title: string) => {
-    const match = title.match(/^Terminal (\d+)$/)
-    if (!match) return
-    const value = Number(match[1])
-    if (!Number.isFinite(value) || value <= 0) return
-    return value
-  }
-
   const [store, setStore, _, ready] = persisted(
-    Persist.workspace(dir, "terminal", legacy),
+    {
+      ...Persist.workspace(dir, "terminal", legacy),
+      migrate: migrateTerminalState,
+    },
     createStore<{
       active?: string
       all: LocalPTY[]
@@ -118,26 +188,6 @@ function createWorkspaceTerminalSession(sdk: ReturnType<typeof useSDK>, dir: str
   })
   onCleanup(unsub)
 
-  const meta = { migrated: false }
-
-  createEffect(() => {
-    if (!ready()) return
-    if (meta.migrated) return
-    meta.migrated = true
-
-    setStore("all", (all) => {
-      const next = all.map((pty) => {
-        const direct = Number.isFinite(pty.titleNumber) && pty.titleNumber > 0 ? pty.titleNumber : undefined
-        if (direct !== undefined) return pty
-        const parsed = numberFromTitle(pty.title)
-        if (parsed === undefined) return pty
-        return { ...pty, titleNumber: parsed }
-      })
-      if (next.every((pty, index) => pty === all[index])) return all
-      return next
-    })
-  })
-
   return {
     ready,
     all: createMemo(() => store.all),
@@ -188,6 +238,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 +384,27 @@ export const { use: useTerminal, provider: TerminalProvider } = createSimpleCont
 
     const workspace = createMemo(() => loadWorkspace(params.dir!, params.id))
 
+    createEffect(
+      on(
+        () => ({ dir: params.dir, id: params.id }),
+        (next, prev) => {
+          if (!prev?.dir) return
+          if (next.dir === prev.dir && next.id === prev.id) return
+          if (next.dir === prev.dir && next.id) return
+          loadWorkspace(prev.dir, prev.id).trimAll()
+        },
+        { defer: true },
+      ),
+    )
+
     return {
       ready: () => workspace().ready(),
       all: () => workspace().all(),
       active: () => workspace().active(),
       new: () => workspace().new(),
       update: (pty: Partial<LocalPTY> & { id: string }) => workspace().update(pty),
+      trim: (id: string) => workspace().trim(id),
+      trimAll: () => workspace().trimAll(),
       clone: (id: string) => workspace().clone(id),
       open: (id: string) => workspace().open(id),
       close: (id: string) => workspace().close(id),

packages/app/src/pages/layout.tsx

@@ -34,6 +34,7 @@ import { useProviders } from "@/hooks/use-providers"
 import { showToast, Toast, toaster } from "@opencode-ai/ui/toast"
 import { useGlobalSDK } from "@/context/global-sdk"
 import { clearWorkspaceTerminals } from "@/context/terminal"
+import { dropSessionCaches, pickSessionCacheEvictions } from "@/context/global-sync/session-cache"
 import { useNotification } from "@/context/notification"
 import { usePermission } from "@/context/permission"
 import { Binary } from "@opencode-ai/util/binary"
@@ -53,6 +54,7 @@ import { useCommand, type CommandOption } from "@/context/command"
 import { ConstrainDragXAxis } from "@/utils/solid-dnd"
 import { DialogSelectDirectory } from "@/components/dialog-select-directory"
 import { DialogEditProject } from "@/components/dialog-edit-project"
+import { DebugBar } from "@/components/debug-bar"
 import { Titlebar } from "@/components/titlebar"
 import { useServer } from "@/context/server"
 import { useLanguage, type Locale } from "@/context/language"
@@ -423,6 +425,17 @@ export default function Layout(props: ParentProps) {
           return
         }
 
+        if (
+          e.details?.type === "question.replied" ||
+          e.details?.type === "question.rejected" ||
+          e.details?.type === "permission.replied"
+        ) {
+          const props = e.details.properties as { sessionID: string }
+          const sessionKey = `${e.name}:${props.sessionID}`
+          dismissSessionAlert(sessionKey)
+          return
+        }
+
         if (e.details?.type !== "permission.asked" && e.details?.type !== "question.asked") return
         const title =
           e.details.type === "permission.asked"
@@ -657,25 +670,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 +736,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 +800,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 +1903,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 +1929,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,
         }}
@@ -2111,193 +2136,204 @@ export default function Layout(props: ParentProps) {
   }
 
   return (
-    <div class="relative bg-background-base flex-1 min-h-0 flex flex-col select-none [&_input]:select-text [&_textarea]:select-text [&_[contenteditable]]:select-text">
+    <div class="relative bg-background-base flex-1 min-h-0 min-w-0 flex flex-col select-none [&_input]:select-text [&_textarea]:select-text [&_[contenteditable]]:select-text">
       <Titlebar />
-      <div class="flex-1 min-h-0 relative overflow-x-hidden">
-        <nav
-          aria-label={language.t("sidebar.nav.projectsAndSessions")}
-          data-component="sidebar-nav-desktop"
-          classList={{
-            "hidden xl:block": true,
-            "absolute inset-y-0 left-0": true,
-            "z-10": true,
-          }}
-          style={{ width: `${Math.max(layout.sidebar.width(), 244)}px` }}
-          ref={(el) => {
-            setState("nav", el)
-          }}
-          onMouseEnter={() => {
-            disarm()
-          }}
-          onMouseLeave={() => {
-            aim.reset()
-            if (!sidebarHovering()) return
+      <div class="flex-1 min-h-0 min-w-0 flex">
+        <div class="flex-1 min-h-0 relative">
+          <div class="size-full relative overflow-x-hidden">
+            <nav
+              aria-label={language.t("sidebar.nav.projectsAndSessions")}
+              data-component="sidebar-nav-desktop"
+              classList={{
+                "hidden xl:block": true,
+                "absolute inset-y-0 left-0": true,
+                "z-10": true,
+              }}
+              style={{ width: `${Math.max(layout.sidebar.width(), 244)}px` }}
+              ref={(el) => {
+                setState("nav", el)
+              }}
+              onMouseEnter={() => {
+                disarm()
+              }}
+              onMouseLeave={() => {
+                aim.reset()
+                if (!sidebarHovering()) return
 
-            arm()
-          }}
-        >
-          <div class="@container w-full h-full contain-strict">
-            <SidebarContent
-              opened={() => layout.sidebar.opened()}
-              aimMove={aim.move}
-              projects={() => layout.projects.list()}
-              renderProject={(project) => (
-                <SortableProject ctx={projectSidebarCtx} project={project} sortNow={sortNow} />
-              )}
-              handleDragStart={handleDragStart}
-              handleDragEnd={handleDragEnd}
-              handleDragOver={handleDragOver}
-              openProjectLabel={language.t("command.project.open")}
-              openProjectKeybind={() => command.keybind("project.open")}
-              onOpenProject={chooseProject}
-              renderProjectOverlay={() => (
-                <ProjectDragOverlay projects={() => layout.projects.list()} activeProject={() => store.activeProject} />
-              )}
-              settingsLabel={() => language.t("sidebar.settings")}
-              settingsKeybind={() => command.keybind("settings.open")}
-              onOpenSettings={openSettings}
-              helpLabel={() => language.t("sidebar.help")}
-              onOpenHelp={() => platform.openLink("https://opencode.ai/desktop-feedback")}
-              renderPanel={() => (
-                <Show when={currentProject()} keyed>
-                  {(project) => <SidebarPanel project={project} merged />}
-                </Show>
-              )}
+                arm()
+              }}
+            >
+              <div class="@container w-full h-full contain-strict">
+                <SidebarContent
+                  opened={() => layout.sidebar.opened()}
+                  aimMove={aim.move}
+                  projects={() => layout.projects.list()}
+                  renderProject={(project) => (
+                    <SortableProject ctx={projectSidebarCtx} project={project} sortNow={sortNow} />
+                  )}
+                  handleDragStart={handleDragStart}
+                  handleDragEnd={handleDragEnd}
+                  handleDragOver={handleDragOver}
+                  openProjectLabel={language.t("command.project.open")}
+                  openProjectKeybind={() => command.keybind("project.open")}
+                  onOpenProject={chooseProject}
+                  renderProjectOverlay={() => (
+                    <ProjectDragOverlay
+                      projects={() => layout.projects.list()}
+                      activeProject={() => store.activeProject}
+                    />
+                  )}
+                  settingsLabel={() => language.t("sidebar.settings")}
+                  settingsKeybind={() => command.keybind("settings.open")}
+                  onOpenSettings={openSettings}
+                  helpLabel={() => language.t("sidebar.help")}
+                  onOpenHelp={() => platform.openLink("https://opencode.ai/desktop-feedback")}
+                  renderPanel={() => (
+                    <Show when={currentProject()} keyed>
+                      {(project) => <SidebarPanel project={project} merged />}
+                    </Show>
+                  )}
+                />
+              </div>
+              <Show when={layout.sidebar.opened()}>
+                <div onPointerDown={() => setSizing(true)}>
+                  <ResizeHandle
+                    direction="horizontal"
+                    size={layout.sidebar.width()}
+                    min={244}
+                    max={typeof window === "undefined" ? 1000 : window.innerWidth * 0.3 + 64}
+                    collapseThreshold={244}
+                    onResize={(w) => {
+                      setSizing(true)
+                      if (sizet !== undefined) clearTimeout(sizet)
+                      sizet = window.setTimeout(() => setSizing(false), 120)
+                      layout.sidebar.resize(w)
+                    }}
+                    onCollapse={layout.sidebar.close}
+                  />
+                </div>
+              </Show>
+            </nav>
+
+            <div
+              class="hidden xl:block pointer-events-none absolute top-0 right-0 z-0 border-t border-border-weaker-base"
+              style={{ left: "calc(4rem + 12px)" }}
             />
-          </div>
-          <Show when={layout.sidebar.opened()}>
-            <div onPointerDown={() => setSizing(true)}>
-              <ResizeHandle
-                direction="horizontal"
-                size={layout.sidebar.width()}
-                min={244}
-                max={typeof window === "undefined" ? 1000 : window.innerWidth * 0.3 + 64}
-                collapseThreshold={244}
-                onResize={(w) => {
-                  setSizing(true)
-                  if (sizet !== undefined) clearTimeout(sizet)
-                  sizet = window.setTimeout(() => setSizing(false), 120)
-                  layout.sidebar.resize(w)
+
+            <div class="xl:hidden">
+              <div
+                classList={{
+                  "fixed inset-x-0 top-10 bottom-0 z-40 transition-opacity duration-200": true,
+                  "opacity-100 pointer-events-auto": layout.mobileSidebar.opened(),
+                  "opacity-0 pointer-events-none": !layout.mobileSidebar.opened(),
+                }}
+                onClick={(e) => {
+                  if (e.target === e.currentTarget) layout.mobileSidebar.hide()
                 }}
-                onCollapse={layout.sidebar.close}
               />
+              <nav
+                aria-label={language.t("sidebar.nav.projectsAndSessions")}
+                data-component="sidebar-nav-mobile"
+                classList={{
+                  "@container fixed top-10 bottom-0 left-0 z-50 w-full max-w-[400px] overflow-hidden border-r border-border-weaker-base bg-background-base transition-transform duration-200 ease-out": true,
+                  "translate-x-0": layout.mobileSidebar.opened(),
+                  "-translate-x-full": !layout.mobileSidebar.opened(),
+                }}
+                onClick={(e) => e.stopPropagation()}
+              >
+                <SidebarContent
+                  mobile
+                  opened={() => layout.sidebar.opened()}
+                  aimMove={aim.move}
+                  projects={() => layout.projects.list()}
+                  renderProject={(project) => (
+                    <SortableProject ctx={projectSidebarCtx} project={project} sortNow={sortNow} mobile />
+                  )}
+                  handleDragStart={handleDragStart}
+                  handleDragEnd={handleDragEnd}
+                  handleDragOver={handleDragOver}
+                  openProjectLabel={language.t("command.project.open")}
+                  openProjectKeybind={() => command.keybind("project.open")}
+                  onOpenProject={chooseProject}
+                  renderProjectOverlay={() => (
+                    <ProjectDragOverlay
+                      projects={() => layout.projects.list()}
+                      activeProject={() => store.activeProject}
+                    />
+                  )}
+                  settingsLabel={() => language.t("sidebar.settings")}
+                  settingsKeybind={() => command.keybind("settings.open")}
+                  onOpenSettings={openSettings}
+                  helpLabel={() => language.t("sidebar.help")}
+                  onOpenHelp={() => platform.openLink("https://opencode.ai/desktop-feedback")}
+                  renderPanel={() => <SidebarPanel project={currentProject()} mobile />}
+                />
+              </nav>
             </div>
-          </Show>
-        </nav>
 
-        <div
-          class="hidden xl:block pointer-events-none absolute top-0 right-0 z-0 border-t border-border-weaker-base"
-          style={{ left: "calc(4rem + 12px)" }}
-        />
+            <div
+              classList={{
+                "absolute inset-0": true,
+                "xl:inset-y-0 xl:right-0 xl:left-[var(--main-left)]": true,
+                "z-20": true,
+                "transition-[left] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-[left] motion-reduce:transition-none":
+                  !sizing(),
+              }}
+              style={{
+                "--main-left": layout.sidebar.opened() ? `${Math.max(layout.sidebar.width(), 244)}px` : "4rem",
+              }}
+            >
+              <main
+                classList={{
+                  "size-full overflow-x-hidden flex flex-col items-start contain-strict border-t border-border-weak-base bg-background-base xl:border-l xl:rounded-tl-[12px]": true,
+                }}
+              >
+                <Show when={!autoselecting()} fallback={<div class="size-full" />}>
+                  {props.children}
+                </Show>
+              </main>
+            </div>
 
-        <div class="xl:hidden">
-          <div
-            classList={{
-              "fixed inset-x-0 top-10 bottom-0 z-40 transition-opacity duration-200": true,
-              "opacity-100 pointer-events-auto": layout.mobileSidebar.opened(),
-              "opacity-0 pointer-events-none": !layout.mobileSidebar.opened(),
-            }}
-            onClick={(e) => {
-              if (e.target === e.currentTarget) layout.mobileSidebar.hide()
-            }}
-          />
-          <nav
-            aria-label={language.t("sidebar.nav.projectsAndSessions")}
-            data-component="sidebar-nav-mobile"
-            classList={{
-              "@container fixed top-10 bottom-0 left-0 z-50 w-full max-w-[400px] overflow-hidden border-r border-border-weaker-base bg-background-base transition-transform duration-200 ease-out": true,
-              "translate-x-0": layout.mobileSidebar.opened(),
-              "-translate-x-full": !layout.mobileSidebar.opened(),
-            }}
-            onClick={(e) => e.stopPropagation()}
-          >
-            <SidebarContent
-              mobile
-              opened={() => layout.sidebar.opened()}
-              aimMove={aim.move}
-              projects={() => layout.projects.list()}
-              renderProject={(project) => (
-                <SortableProject ctx={projectSidebarCtx} project={project} sortNow={sortNow} mobile />
-              )}
-              handleDragStart={handleDragStart}
-              handleDragEnd={handleDragEnd}
-              handleDragOver={handleDragOver}
-              openProjectLabel={language.t("command.project.open")}
-              openProjectKeybind={() => command.keybind("project.open")}
-              onOpenProject={chooseProject}
-              renderProjectOverlay={() => (
-                <ProjectDragOverlay projects={() => layout.projects.list()} activeProject={() => store.activeProject} />
-              )}
-              settingsLabel={() => language.t("sidebar.settings")}
-              settingsKeybind={() => command.keybind("settings.open")}
-              onOpenSettings={openSettings}
-              helpLabel={() => language.t("sidebar.help")}
-              onOpenHelp={() => platform.openLink("https://opencode.ai/desktop-feedback")}
-              renderPanel={() => <SidebarPanel project={currentProject()} mobile />}
-            />
-          </nav>
-        </div>
-
-        <div
-          classList={{
-            "absolute inset-0": true,
-            "xl:inset-y-0 xl:right-0 xl:left-[var(--main-left)]": true,
-            "z-20": true,
-            "transition-[left] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-[left] motion-reduce:transition-none":
-              !sizing(),
-          }}
-          style={{
-            "--main-left": layout.sidebar.opened() ? `${Math.max(layout.sidebar.width(), 244)}px` : "4rem",
-          }}
-        >
-          <main
-            classList={{
-              "size-full overflow-x-hidden flex flex-col items-start contain-strict border-t border-border-weak-base bg-background-base xl:border-l xl:rounded-tl-[12px]": true,
-            }}
-          >
-            <Show when={!autoselecting()} fallback={<div class="size-full" />}>
-              {props.children}
-            </Show>
-          </main>
-        </div>
-
-        <div
-          classList={{
-            "hidden xl:flex absolute inset-y-0 left-16 z-30": true,
-            "opacity-100 translate-x-0 pointer-events-auto": peeked() && !layout.sidebar.opened(),
-            "opacity-0 -translate-x-2 pointer-events-none": !peeked() || layout.sidebar.opened(),
-            "transition-[opacity,transform] motion-reduce:transition-none": true,
-            "duration-180 ease-out": peeked() && !layout.sidebar.opened(),
-            "duration-120 ease-in": !peeked() || layout.sidebar.opened(),
-          }}
-          onMouseMove={disarm}
-          onMouseEnter={() => {
-            disarm()
-            aim.reset()
-          }}
-          onPointerDown={disarm}
-          onMouseLeave={() => {
-            arm()
-          }}
-        >
-          <Show when={peek()} keyed>
-            {(project) => <SidebarPanel project={project} merged={false} />}
-          </Show>
-        </div>
-
-        <div
-          classList={{
-            "hidden xl:block pointer-events-none absolute inset-y-0 right-0 z-25 overflow-hidden": true,
-            "opacity-100 translate-x-0": peeked() && !layout.sidebar.opened(),
-            "opacity-0 -translate-x-2": !peeked() || layout.sidebar.opened(),
-            "transition-[opacity,transform] motion-reduce:transition-none": true,
-            "duration-180 ease-out": peeked() && !layout.sidebar.opened(),
-            "duration-120 ease-in": !peeked() || layout.sidebar.opened(),
-          }}
-          style={{ left: `calc(4rem + ${Math.max(Math.max(layout.sidebar.width(), 244) - 64, 0)}px)` }}
-        >
-          <div class="h-full w-px" style={{ "box-shadow": "var(--shadow-sidebar-overlay)" }} />
+            <div
+              classList={{
+                "hidden xl:flex absolute inset-y-0 left-16 z-30": true,
+                "opacity-100 translate-x-0 pointer-events-auto": peeked() && !layout.sidebar.opened(),
+                "opacity-0 -translate-x-2 pointer-events-none": !peeked() || layout.sidebar.opened(),
+                "transition-[opacity,transform] motion-reduce:transition-none": true,
+                "duration-180 ease-out": peeked() && !layout.sidebar.opened(),
+                "duration-120 ease-in": !peeked() || layout.sidebar.opened(),
+              }}
+              onMouseMove={disarm}
+              onMouseEnter={() => {
+                disarm()
+                aim.reset()
+              }}
+              onPointerDown={disarm}
+              onMouseLeave={() => {
+                arm()
+              }}
+            >
+              <Show when={peek()} keyed>
+                {(project) => <SidebarPanel project={project} merged={false} />}
+              </Show>
+            </div>
+
+            <div
+              classList={{
+                "hidden xl:block pointer-events-none absolute inset-y-0 right-0 z-25 overflow-hidden": true,
+                "opacity-100 translate-x-0": peeked() && !layout.sidebar.opened(),
+                "opacity-0 -translate-x-2": !peeked() || layout.sidebar.opened(),
+                "transition-[opacity,transform] motion-reduce:transition-none": true,
+                "duration-180 ease-out": peeked() && !layout.sidebar.opened(),
+                "duration-120 ease-in": !peeked() || layout.sidebar.opened(),
+              }}
+              style={{ left: `calc(4rem + ${Math.max(Math.max(layout.sidebar.width(), 244) - 64, 0)}px)` }}
+            >
+              <div class="h-full w-px" style={{ "box-shadow": "var(--shadow-sidebar-overlay)" }} />
+            </div>
+          </div>
         </div>
+        {import.meta.env.DEV && <DebugBar />}
       </div>
       <Toast.Region />
     </div>

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

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

packages/app/src/pages/session.tsx

@@ -32,12 +32,12 @@ import { useLayout } from "@/context/layout"
 import { usePrompt } from "@/context/prompt"
 import { useSDK } from "@/context/sdk"
 import { useSync } from "@/context/sync"
+import { useTerminal } from "@/context/terminal"
 import { createSessionComposerState, SessionComposerRegion } from "@/pages/session/composer"
-import { createOpenReviewFile, createSizing } from "@/pages/session/helpers"
+import { createOpenReviewFile, createSizing, focusTerminalById } from "@/pages/session/helpers"
 import { MessageTimeline } from "@/pages/session/message-timeline"
 import { type DiffStyle, SessionReviewTab, type SessionReviewTabProps } from "@/pages/session/review-tab"
 import { resetSessionModel, syncSessionModel } from "@/pages/session/session-model-helpers"
-import { createScrollSpy } from "@/pages/session/scroll-spy"
 import { SessionMobileTabs } from "@/pages/session/session-mobile-tabs"
 import { SessionSidePanel } from "@/pages/session/session-side-panel"
 import { TerminalPanel } from "@/pages/session/terminal-panel"
@@ -122,9 +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) {
@@ -264,6 +268,7 @@ export default function Page() {
   const sdk = useSDK()
   const prompt = usePrompt()
   const comments = useComments()
+  const terminal = useTerminal()
   const [searchParams, setSearchParams] = useSearchParams<{ prompt?: string }>()
 
   createEffect(() => {
@@ -281,6 +286,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 +432,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 +462,21 @@ export default function Page() {
     return key
   }, sessionKey())
 
+  let reviewFrame: number | undefined
+
+  createComputed((prev) => {
+    const open = desktopReviewOpen()
+    if (prev === undefined || prev === open) return open
+
+    if (reviewFrame !== undefined) cancelAnimationFrame(reviewFrame)
+    setUi("reviewSnap", true)
+    reviewFrame = requestAnimationFrame(() => {
+      reviewFrame = undefined
+      setUi("reviewSnap", false)
+    })
+    return open
+  }, desktopReviewOpen())
+
   const turnDiffs = createMemo(() => lastUserMessage()?.summary?.diffs ?? [])
   const reviewDiffs = createMemo(() => (store.changes === "session" ? diffs() : turnDiffs()))
 
@@ -464,20 +487,49 @@ export default function Page() {
     return "main"
   })
 
-  const activeMessage = createMemo(() => {
-    if (!store.messageId) return lastUserMessage()
-    const found = visibleUserMessages()?.find((m) => m.id === store.messageId)
-    return found ?? lastUserMessage()
-  })
   const setActiveMessage = (message: UserMessage | undefined) => {
+    messageMark = scrollMark
     setStore("messageId", message?.id)
   }
 
+  const anchor = (id: string) => `message-${id}`
+
+  const cursor = () => {
+    const root = scroller
+    if (!root) return store.messageId
+
+    const box = root.getBoundingClientRect()
+    const line = box.top + 100
+    const list = [...root.querySelectorAll<HTMLElement>("[data-message-id]")]
+      .map((el) => {
+        const id = el.dataset.messageId
+        if (!id) return
+
+        const rect = el.getBoundingClientRect()
+        return { id, top: rect.top, bottom: rect.bottom }
+      })
+      .filter((item): item is { id: string; top: number; bottom: number } => !!item)
+
+    const shown = list.filter((item) => item.bottom > box.top && item.top < box.bottom)
+    const hit = shown.find((item) => item.top <= line && item.bottom >= line)
+    if (hit) return hit.id
+
+    const near = [...shown].sort((a, b) => {
+      const da = Math.abs(a.top - line)
+      const db = Math.abs(b.top - line)
+      if (da !== db) return da - db
+      return a.top - b.top
+    })[0]
+    if (near) return near.id
+
+    return list.filter((item) => item.top <= line).at(-1)?.id ?? list[0]?.id ?? store.messageId
+  }
+
   function navigateMessageByOffset(offset: number) {
     const msgs = visibleUserMessages()
     if (msgs.length === 0) return
 
-    const current = store.messageId
+    const current = store.messageId && messageMark === scrollMark ? store.messageId : cursor()
     const base = current ? msgs.findIndex((m) => m.id === current) : msgs.length
     const currentIndex = base === -1 ? msgs.length : base
     const targetIndex = currentIndex + offset
@@ -550,6 +602,8 @@ export default function Page() {
   let dockHeight = 0
   let scroller: HTMLDivElement | undefined
   let content: HTMLDivElement | undefined
+  let scrollMark = 0
+  let messageMark = 0
 
   const scrollGestureWindowMs = 250
 
@@ -594,6 +648,7 @@ export default function Page() {
       () => {
         setStore("messageId", undefined)
         setStore("changes", "session")
+        setUi("pendingMessage", undefined)
       },
       { defer: true },
     ),
@@ -706,8 +761,11 @@ export default function Page() {
       return
     }
 
-    // Don't autofocus chat if desktop terminal panel is open
-    if (isDesktop() && view().terminal.opened()) return
+    // Prefer the open terminal over the composer when it can take focus
+    if (view().terminal.opened()) {
+      const id = terminal.active()
+      if (id && focusTerminalById(id)) return
+    }
 
     // Only treat explicit scroll keys as potential "user scroll" gestures.
     if (event.key === "PageUp" || event.key === "PageDown" || event.key === "Home" || event.key === "End") {
@@ -1088,17 +1146,11 @@ export default function Page() {
 
   let scrollStateFrame: number | undefined
   let scrollStateTarget: HTMLDivElement | undefined
-  const scrollSpy = createScrollSpy({
-    onActive: (id) => {
-      if (id === store.messageId) return
-      setStore("messageId", id)
-    },
-  })
 
   const updateScrollState = (el: HTMLDivElement) => {
     const max = el.scrollHeight - el.clientHeight
     const overflow = max > 1
-    const bottom = !overflow || Math.abs(el.scrollTop) <= 2 || !autoScroll.userScrolled()
+    const bottom = !overflow || el.scrollTop >= max - 2
 
     if (ui.scroll.overflow === overflow && ui.scroll.bottom === bottom) return
     setUi("scroll", { overflow, bottom })
@@ -1121,7 +1173,7 @@ export default function Page() {
 
   const resumeScroll = () => {
     setStore("messageId", undefined)
-    autoScroll.smoothScrollToBottom()
+    autoScroll.forceScrollToBottom()
     clearMessageHash()
 
     const el = scroller
@@ -1141,31 +1193,21 @@ export default function Page() {
     ),
   )
 
-  createEffect(
-    on(
-      sessionKey,
-      () => {
-        scrollSpy.clear()
-      },
-      { defer: true },
-    ),
-  )
-
-  const anchor = (id: string) => `message-${id}`
-
   const setScrollRef = (el: HTMLDivElement | undefined) => {
     scroller = el
     autoScroll.scrollRef(el)
-    scrollSpy.setContainer(el)
     if (el) scheduleScrollState(el)
   }
 
+  const markUserScroll = () => {
+    scrollMark += 1
+  }
+
   createResizeObserver(
     () => content,
     () => {
       const el = scroller
       if (el) scheduleScrollState(el)
-      scrollSpy.markDirty()
     },
   )
 
@@ -1189,14 +1231,15 @@ export default function Page() {
 
       const el = scroller
       const delta = next - dockHeight
-      const stick = el ? Math.abs(el.scrollTop) < 10 + Math.max(0, delta) : false
+      const stick = el
+        ? !autoScroll.userScrolled() || el.scrollHeight - el.clientHeight - el.scrollTop < 10 + Math.max(0, delta)
+        : false
 
       dockHeight = next
 
-      if (stick) autoScroll.smoothScrollToBottom()
+      if (stick) autoScroll.forceScrollToBottom()
 
       if (el) scheduleScrollState(el)
-      scrollSpy.markDirty()
     },
   )
 
@@ -1224,7 +1267,7 @@ export default function Page() {
 
   onCleanup(() => {
     document.removeEventListener("keydown", handleKeyDown)
-    scrollSpy.destroy()
+    if (reviewFrame !== undefined) cancelAnimationFrame(reviewFrame)
     if (scrollStateFrame !== undefined) cancelAnimationFrame(scrollStateFrame)
   })
 
@@ -1246,7 +1289,7 @@ export default function Page() {
           classList={{
             "@container relative shrink-0 flex flex-col min-h-0 h-full bg-background-stronger flex-1 md:flex-none": true,
             "transition-[width] duration-[240ms] ease-[cubic-bezier(0.22,1,0.36,1)] will-change-[width] motion-reduce:transition-none":
-              !size.active(),
+              !size.active() && !ui.reviewSnap,
           }}
           style={{
             width: sessionPanelWidth(),
@@ -1255,7 +1298,7 @@ export default function Page() {
           <div class="flex-1 min-h-0 overflow-hidden">
             <Switch>
               <Match when={params.id}>
-                <Show when={activeMessage()}>
+                <Show when={lastUserMessage()}>
                   <MessageTimeline
                     mobileChanges={mobileChanges()}
                     mobileFallback={reviewContent({
@@ -1275,11 +1318,9 @@ export default function Page() {
                     onAutoScrollHandleScroll={autoScroll.handleScroll}
                     onMarkScrollGesture={markScrollGesture}
                     hasScrollGesture={hasScrollGesture}
-                    isDesktop={isDesktop()}
-                    onScrollSpyScroll={scrollSpy.onScroll}
+                    onUserScroll={markUserScroll}
                     onTurnBackfillScroll={historyWindow.onScrollerScroll}
                     onAutoScrollInteraction={autoScroll.handleInteraction}
-                    onPreserveScrollAnchor={autoScroll.preserve}
                     centered={centered()}
                     setContentRef={(el) => {
                       content = el
@@ -1296,8 +1337,6 @@ export default function Page() {
                     }}
                     renderedUserMessages={historyWindow.renderedUserMessages()}
                     anchor={anchor}
-                    onRegisterMessage={scrollSpy.register}
-                    onUnregisterMessage={scrollSpy.unregister}
                   />
                 </Show>
               </Match>
@@ -1362,6 +1401,7 @@ export default function Page() {
           reviewPanel={reviewPanel}
           activeDiff={tree.activeDiff}
           focusReviewDiff={focusReviewDiff}
+          reviewSnap={ui.reviewSnap}
           size={size}
         />
       </div>

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

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

packages/app/src/pages/session/composer/session-todo-dock.tsx

@@ -138,7 +138,6 @@ export function SessionTodoDock(props: {
               "--tool-motion-mask-height": `${props.countMaskHeight ?? 0}px`,
               "--tool-motion-spring-ms": `${props.countWidthDuration ?? 560}ms`,
               opacity: `${Math.max(0, Math.min(1, 1 - shut()))}`,
-              filter: `blur(${Math.max(0, Math.min(1, shut())) * 2}px)`,
             }}
           >
             <AnimatedNumber value={done()} />
@@ -196,7 +195,6 @@ export function SessionTodoDock(props: {
           style={{
             visibility: off() ? "hidden" : "visible",
             opacity: `${Math.max(0, Math.min(1, 1 - hide()))}`,
-            filter: `blur(${Math.max(0, Math.min(1, hide())) * 2}px)`,
           }}
         >
           <TodoList todos={props.todos} open={!store.collapsed} />

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,6 +1,5 @@
-import { For, Show, createEffect, createMemo, on } from "solid-js"
+import { For, Show, createEffect, createMemo, on, onCleanup } from "solid-js"
 import { createStore } from "solid-js/store"
-import { createMediaQuery } from "@solid-primitives/media"
 import { useParams } from "@solidjs/router"
 import { Tabs } from "@opencode-ai/ui/tabs"
 import { ResizeHandle } from "@opencode-ai/ui/resize-handle"
@@ -17,7 +16,7 @@ import { useLanguage } from "@/context/language"
 import { useLayout } from "@/context/layout"
 import { useTerminal, type LocalPTY } from "@/context/terminal"
 import { terminalTabLabel } from "@/pages/session/terminal-label"
-import { createPresence, createSizing, focusTerminalById } from "@/pages/session/helpers"
+import { createSizing, focusTerminalById } from "@/pages/session/helpers"
 import { getTerminalHandoff, setTerminalHandoff } from "@/pages/session/handoff"
 
 export function TerminalPanel() {
@@ -27,13 +26,10 @@ export function TerminalPanel() {
   const language = useLanguage()
   const command = useCommand()
 
-  const isDesktop = createMediaQuery("(min-width: 768px)")
   const sessionKey = createMemo(() => `${params.dir}${params.id ? "/" + params.id : ""}`)
   const view = createMemo(() => layout.view(sessionKey))
 
   const opened = createMemo(() => view().terminal.opened())
-  const open = createMemo(() => isDesktop() && opened())
-  const panel = createPresence(open)
   const size = createSizing()
   const height = createMemo(() => layout.terminal.height())
   const close = () => view().terminal.close()
@@ -42,6 +38,25 @@ export function TerminalPanel() {
   const [store, setStore] = createStore({
     autoCreated: false,
     activeDraggable: undefined as string | undefined,
+    view: typeof window === "undefined" ? 1000 : (window.visualViewport?.height ?? window.innerHeight),
+  })
+
+  const max = () => store.view * 0.6
+  const pane = () => Math.min(height(), max())
+
+  createEffect(() => {
+    if (typeof window === "undefined") return
+
+    const sync = () => setStore("view", window.visualViewport?.height ?? window.innerHeight)
+    const port = window.visualViewport
+
+    sync()
+    window.addEventListener("resize", sync)
+    port?.addEventListener("resize", sync)
+    onCleanup(() => {
+      window.removeEventListener("resize", sync)
+      port?.removeEventListener("resize", sync)
+    })
   })
 
   createEffect(() => {
@@ -66,21 +81,42 @@ export function TerminalPanel() {
     ),
   )
 
+  const focus = (id: string) => {
+    focusTerminalById(id)
+
+    const frame = requestAnimationFrame(() => {
+      if (!opened()) return
+      if (terminal.active() !== id) return
+      focusTerminalById(id)
+    })
+
+    const timers = [120, 240].map((ms) =>
+      window.setTimeout(() => {
+        if (!opened()) return
+        if (terminal.active() !== id) return
+        focusTerminalById(id)
+      }, ms),
+    )
+
+    return () => {
+      cancelAnimationFrame(frame)
+      for (const timer of timers) clearTimeout(timer)
+    }
+  }
+
   createEffect(
     on(
-      () => terminal.active(),
-      (activeId) => {
-        if (!activeId || !panel.open()) return
-        if (document.activeElement instanceof HTMLElement) {
-          document.activeElement.blur()
-        }
-        setTimeout(() => focusTerminalById(activeId), 0)
+      () => [opened(), terminal.active()] as const,
+      ([next, id]) => {
+        if (!next || !id) return
+        const stop = focus(id)
+        onCleanup(stop)
       },
     ),
   )
 
   createEffect(() => {
-    if (panel.open()) return
+    if (opened()) return
     const active = document.activeElement
     if (!(active instanceof HTMLElement)) return
     if (!root?.contains(active)) return
@@ -138,149 +174,156 @@ export function TerminalPanel() {
 
     const activeId = terminal.active()
     if (!activeId) return
-    setTimeout(() => {
+    requestAnimationFrame(() => {
+      if (terminal.active() !== activeId) return
       focusTerminalById(activeId)
-    }, 0)
+    })
   }
 
   return (
-    <Show when={panel.show()}>
+    <div
+      ref={root}
+      id="terminal-panel"
+      role="region"
+      aria-label={language.t("terminal.title")}
+      aria-hidden={!opened()}
+      inert={!opened()}
+      class="relative w-full shrink-0 overflow-hidden bg-background-stronger"
+      classList={{
+        "border-t border-border-weak-base": opened(),
+        "transition-[height] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-[height] motion-reduce:transition-none":
+          !size.active(),
+      }}
+      style={{ height: opened() ? `${pane()}px` : "0px" }}
+    >
       <div
-        ref={root}
-        id="terminal-panel"
-        role="region"
-        aria-label={language.t("terminal.title")}
-        aria-hidden={!panel.open()}
-        inert={!panel.open()}
-        class="relative w-full shrink-0 overflow-hidden"
+        class="absolute inset-x-0 top-0 flex flex-col"
         classList={{
-          "opacity-100": panel.open(),
-          "opacity-0 pointer-events-none": !panel.open(),
-          "transition-[height,opacity] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-[height] motion-reduce:transition-none":
+          "translate-y-0": opened(),
+          "translate-y-full pointer-events-none": !opened(),
+          "transition-transform duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform motion-reduce:transition-none":
             !size.active(),
         }}
-        style={{ height: panel.open() ? `${height()}px` : "0px" }}
+        style={{ height: `${pane()}px` }}
       >
-        <div class="size-full flex flex-col border-t border-border-weak-base">
-          <div onPointerDown={() => size.start()}>
-            <ResizeHandle
-              direction="vertical"
-              size={height()}
-              min={100}
-              max={typeof window === "undefined" ? 1000 : window.innerHeight * 0.6}
-              collapseThreshold={50}
-              onResize={(next) => {
-                size.touch()
-                layout.terminal.resize(next)
-              }}
-              onCollapse={close}
-            />
-          </div>
-          <Show
-            when={terminal.ready()}
-            fallback={
-              <div class="flex flex-col h-full pointer-events-none">
-                <div class="h-10 flex items-center gap-2 px-2 border-b border-border-weaker-base bg-background-stronger overflow-hidden">
-                  <For each={handoff()}>
-                    {(title) => (
-                      <div class="px-2 py-1 rounded-md bg-surface-base text-14-regular text-text-weak truncate max-w-40">
-                        {title}
-                      </div>
-                    )}
-                  </For>
-                  <div class="flex-1" />
-                  <div class="text-text-weak pr-2">
-                    {language.t("common.loading")}
-                    {language.t("common.loading.ellipsis")}
-                  </div>
-                </div>
-                <div class="flex-1 flex items-center justify-center text-text-weak">
-                  {language.t("terminal.loading")}
-                </div>
-              </div>
-            }
-          >
-            <DragDropProvider
-              onDragStart={handleTerminalDragStart}
-              onDragEnd={handleTerminalDragEnd}
-              onDragOver={handleTerminalDragOver}
-              collisionDetector={closestCenter}
-            >
-              <DragDropSensors />
-              <ConstrainDragYAxis />
-              <div class="flex flex-col h-full">
-                <Tabs
-                  variant="alt"
-                  value={terminal.active()}
-                  onChange={(id) => terminal.open(id)}
-                  class="!h-auto !flex-none"
-                >
-                  <Tabs.List class="h-10 border-b border-border-weaker-base">
-                    <SortableProvider ids={ids()}>
-                      <For each={ids()}>
-                        {(id) => (
-                          <Show when={byId().get(id)}>
-                            {(pty) => <SortableTerminalTab terminal={pty()} onClose={close} />}
-                          </Show>
-                        )}
-                      </For>
-                    </SortableProvider>
-                    <div class="h-full flex items-center justify-center">
-                      <TooltipKeybind
-                        title={language.t("command.terminal.new")}
-                        keybind={command.keybind("terminal.new")}
-                        class="flex items-center"
-                      >
-                        <IconButton
-                          icon="plus-small"
-                          variant="ghost"
-                          iconSize="large"
-                          onClick={terminal.new}
-                          aria-label={language.t("command.terminal.new")}
-                        />
-                      </TooltipKeybind>
+        <div class="hidden md:block" onPointerDown={() => size.start()}>
+          <ResizeHandle
+            direction="vertical"
+            size={pane()}
+            min={100}
+            max={max()}
+            collapseThreshold={50}
+            onResize={(next) => {
+              size.touch()
+              layout.terminal.resize(next)
+            }}
+            onCollapse={close}
+          />
+        </div>
+        <Show
+          when={terminal.ready()}
+          fallback={
+            <div class="flex flex-col h-full pointer-events-none">
+              <div class="h-10 flex items-center gap-2 px-2 border-b border-border-weaker-base bg-background-stronger overflow-hidden">
+                <For each={handoff()}>
+                  {(title) => (
+                    <div class="px-2 py-1 rounded-md bg-surface-base text-14-regular text-text-weak truncate max-w-40">
+                      {title}
                     </div>
-                  </Tabs.List>
-                </Tabs>
-                <div class="flex-1 min-h-0 relative">
-                  <Show when={terminal.active()} keyed>
-                    {(id) => (
-                      <Show when={byId().get(id)}>
-                        {(pty) => (
-                          <div id={`terminal-wrapper-${id}`} class="absolute inset-0">
-                            <Terminal
-                              pty={pty()}
-                              onCleanup={terminal.update}
-                              onConnectError={() => terminal.clone(id)}
-                            />
-                          </div>
-                        )}
-                      </Show>
-                    )}
-                  </Show>
+                  )}
+                </For>
+                <div class="flex-1" />
+                <div class="text-text-weak pr-2">
+                  {language.t("common.loading")}
+                  {language.t("common.loading.ellipsis")}
                 </div>
               </div>
-              <DragOverlay>
-                <Show when={store.activeDraggable}>
-                  {(draggedId) => (
-                    <Show when={byId().get(draggedId())}>
-                      {(t) => (
-                        <div class="relative p-1 h-10 flex items-center bg-background-stronger text-14-regular">
-                          {terminalTabLabel({
-                            title: t().title,
-                            titleNumber: t().titleNumber,
-                            t: language.t as (key: string, vars?: Record<string, string | number | boolean>) => string,
-                          })}
+              <div class="flex-1 flex items-center justify-center text-text-weak">{language.t("terminal.loading")}</div>
+            </div>
+          }
+        >
+          <DragDropProvider
+            onDragStart={handleTerminalDragStart}
+            onDragEnd={handleTerminalDragEnd}
+            onDragOver={handleTerminalDragOver}
+            collisionDetector={closestCenter}
+          >
+            <DragDropSensors />
+            <ConstrainDragYAxis />
+            <div class="flex flex-col h-full">
+              <Tabs
+                variant="alt"
+                value={terminal.active()}
+                onChange={(id) => terminal.open(id)}
+                class="!h-auto !flex-none"
+              >
+                <Tabs.List class="h-10 border-b border-border-weaker-base">
+                  <SortableProvider ids={ids()}>
+                    <For each={ids()}>
+                      {(id) => (
+                        <Show when={byId().get(id)}>
+                          {(pty) => <SortableTerminalTab terminal={pty()} onClose={close} />}
+                        </Show>
+                      )}
+                    </For>
+                  </SortableProvider>
+                  <div class="h-full flex items-center justify-center">
+                    <TooltipKeybind
+                      title={language.t("command.terminal.new")}
+                      keybind={command.keybind("terminal.new")}
+                      class="flex items-center"
+                    >
+                      <IconButton
+                        icon="plus-small"
+                        variant="ghost"
+                        iconSize="large"
+                        onClick={terminal.new}
+                        aria-label={language.t("command.terminal.new")}
+                      />
+                    </TooltipKeybind>
+                  </div>
+                </Tabs.List>
+              </Tabs>
+              <div class="flex-1 min-h-0 relative">
+                <Show when={terminal.active()} keyed>
+                  {(id) => (
+                    <Show when={byId().get(id)}>
+                      {(pty) => (
+                        <div id={`terminal-wrapper-${id}`} class="absolute inset-0">
+                          <Terminal
+                            pty={pty()}
+                            autoFocus={opened()}
+                            onConnect={() => terminal.trim(id)}
+                            onCleanup={terminal.update}
+                            onConnectError={() => terminal.clone(id)}
+                          />
                         </div>
                       )}
                     </Show>
                   )}
                 </Show>
-              </DragOverlay>
-            </DragDropProvider>
-          </Show>
-        </div>
+              </div>
+            </div>
+            <DragOverlay>
+              <Show when={store.activeDraggable}>
+                {(draggedId) => (
+                  <Show when={byId().get(draggedId())}>
+                    {(t) => (
+                      <div class="relative p-1 h-10 flex items-center bg-background-stronger text-14-regular">
+                        {terminalTabLabel({
+                          title: t().title,
+                          titleNumber: t().titleNumber,
+                          t: language.t as (key: string, vars?: Record<string, string | number | boolean>) => string,
+                        })}
+                      </div>
+                    )}
+                  </Show>
+                )}
+              </Show>
+            </DragOverlay>
+          </DragDropProvider>
+        </Show>
       </div>
-    </Show>
+    </div>
   )
 }

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

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

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

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

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

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

packages/app/src/utils/persist.ts

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

packages/console/app/package.json

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

packages/console/app/src/routes/zen/util/handler.ts

@@ -99,7 +99,13 @@ export async function handler(
     const dataDumper = createDataDumper(sessionId, requestId, projectId)
     const trialLimiter = createTrialLimiter(modelInfo.trialProvider, ip)
     const trialProvider = await trialLimiter?.check()
-    const rateLimiter = createRateLimiter(modelInfo.allowAnonymous, ip, input.request)
+    const rateLimiter = createRateLimiter(
+      modelInfo.id,
+      modelInfo.allowAnonymous,
+      modelInfo.rateLimit,
+      ip,
+      input.request,
+    )
     await rateLimiter?.check()
     const stickyTracker = createStickyTracker(modelInfo.stickyProvider, sessionId)
     const stickyProvider = await stickyTracker?.get()

packages/console/app/src/routes/zen/util/rateLimiter.ts

@@ -6,39 +6,63 @@ import { i18n } from "~/i18n"
 import { localeFromRequest } from "~/lib/language"
 import { Subscription } from "@opencode-ai/console-core/subscription.js"
 
-export function createRateLimiter(allowAnonymous: boolean | undefined, rawIp: string, request: Request) {
+export function createRateLimiter(
+  modelId: string,
+  allowAnonymous: boolean | undefined,
+  rateLimit: number | undefined,
+  rawIp: string,
+  request: Request,
+) {
   if (!allowAnonymous) return
   const dict = i18n(localeFromRequest(request))
 
   const limits = Subscription.getFreeLimits()
-  const limitValue =
-    limits.checkHeader && !request.headers.get(limits.checkHeader) ? limits.fallbackValue : limits.dailyRequests
+  const headerExists = request.headers.has(limits.checkHeader)
+  const dailyLimit = !headerExists ? limits.fallbackValue : (rateLimit ?? limits.dailyRequests)
+  const isDefaultModel = headerExists && !rateLimit
 
   const ip = !rawIp.length ? "unknown" : rawIp
   const now = Date.now()
-  const interval = buildYYYYMMDD(now)
+  const lifetimeInterval = ""
+  const dailyInterval = rateLimit ? `${buildYYYYMMDD(now)}${modelId.substring(0, 2)}` : buildYYYYMMDD(now)
+
+  let _isNew: boolean
 
   return {
-    track: async () => {
-      await Database.use((tx) =>
-        tx
-          .insert(IpRateLimitTable)
-          .values({ ip, interval, count: 1 })
-          .onDuplicateKeyUpdate({ set: { count: sql`${IpRateLimitTable.count} + 1` } }),
-      )
-    },
     check: async () => {
       const rows = await Database.use((tx) =>
         tx
           .select({ interval: IpRateLimitTable.interval, count: IpRateLimitTable.count })
           .from(IpRateLimitTable)
-          .where(and(eq(IpRateLimitTable.ip, ip), inArray(IpRateLimitTable.interval, [interval]))),
+          .where(
+            and(
+              eq(IpRateLimitTable.ip, ip),
+              isDefaultModel
+                ? inArray(IpRateLimitTable.interval, [lifetimeInterval, dailyInterval])
+                : inArray(IpRateLimitTable.interval, [dailyInterval]),
+            ),
+          ),
       )
-      const total = rows.reduce((sum, r) => sum + r.count, 0)
-      logger.debug(`rate limit total: ${total}`)
-      if (total >= limitValue)
+      const lifetimeCount = rows.find((r) => r.interval === lifetimeInterval)?.count ?? 0
+      const dailyCount = rows.find((r) => r.interval === dailyInterval)?.count ?? 0
+      logger.debug(`rate limit lifetime: ${lifetimeCount}, daily: ${dailyCount}`)
+
+      _isNew = isDefaultModel && lifetimeCount < dailyLimit * 7
+
+      if ((_isNew && dailyCount >= dailyLimit * 2) || (!_isNew && dailyCount >= dailyLimit))
         throw new FreeUsageLimitError(dict["zen.api.error.rateLimitExceeded"], getRetryAfterDay(now))
     },
+    track: async () => {
+      await Database.use((tx) =>
+        tx
+          .insert(IpRateLimitTable)
+          .values([
+            { ip, interval: dailyInterval, count: 1 },
+            ...(_isNew ? [{ ip, interval: lifetimeInterval, count: 1 }] : []),
+          ])
+          .onDuplicateKeyUpdate({ set: { count: sql`${IpRateLimitTable.count} + 1` } }),
+      )
+    },
   }
 }
 

packages/console/core/package.json

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

packages/console/core/src/model.ts

@@ -28,6 +28,7 @@ export namespace ZenData {
     stickyProvider: z.enum(["strict", "prefer"]).optional(),
     trialProvider: z.string().optional(),
     fallbackProvider: z.string().optional(),
+    rateLimit: z.number().optional(),
     providers: z.array(
       z.object({
         id: z.string(),

packages/console/function/package.json

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

packages/console/mail/package.json

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

packages/desktop-electron/package.json

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

packages/desktop/package.json

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

packages/enterprise/package.json

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

packages/extensions/zed/extension.toml

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

packages/function/package.json

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

packages/opencode/migration/20260228203230_blue_harpoon/migration.sql

@@ -0,0 +1,17 @@
+CREATE TABLE `account` (
+	`id` text PRIMARY KEY,
+	`email` text NOT NULL,
+	`url` text NOT NULL,
+	`access_token` text NOT NULL,
+	`refresh_token` text NOT NULL,
+	`token_expiry` integer,
+	`selected_org_id` text,
+	`time_created` integer NOT NULL,
+	`time_updated` integer NOT NULL
+);
+--> statement-breakpoint
+CREATE TABLE `account_state` (
+	`id` integer PRIMARY KEY NOT NULL,
+	`active_account_id` text,
+	FOREIGN KEY (`active_account_id`) REFERENCES `account`(`id`) ON UPDATE no action ON DELETE set null
+);

packages/opencode/migration/20260309230000_move_org_to_state/migration.sql

@@ -0,0 +1,3 @@
+ALTER TABLE `account_state` ADD `active_org_id` text;--> statement-breakpoint
+UPDATE `account_state` SET `active_org_id` = (SELECT `selected_org_id` FROM `account` WHERE `account`.`id` = `account_state`.`active_account_id`);--> statement-breakpoint
+ALTER TABLE `account` DROP COLUMN `selected_org_id`;

packages/opencode/package.json

@@ -1,13 +1,13 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
-  "version": "1.2.21",
+  "version": "1.2.24",
   "name": "opencode",
   "type": "module",
   "license": "MIT",
   "private": true,
   "scripts": {
     "typecheck": "tsgo --noEmit",
-    "test": "bun test --timeout 30000",
+    "test": "bun test --timeout 30000 registry",
     "build": "bun run script/build.ts",
     "dev": "bun run --conditions=browser ./src/index.ts",
     "random": "echo 'Random script updated at $(date)' && echo 'Change queued successfully' && echo 'Another change made' && echo 'Yet another change' && echo 'One more change' && echo 'Final change' && echo 'Another final change' && echo 'Yet another final change'",
@@ -25,6 +25,13 @@
   "exports": {
     "./*": "./src/*.ts"
   },
+  "imports": {
+    "#db": {
+      "bun": "./src/storage/db.bun.ts",
+      "node": "./src/storage/db.node.ts",
+      "default": "./src/storage/db.bun.ts"
+    }
+  },
   "devDependencies": {
     "@babel/core": "7.28.4",
     "@octokit/webhooks-types": "7.6.1",
@@ -41,12 +48,14 @@
     "@types/babel__core": "7.20.5",
     "@types/bun": "catalog:",
     "@types/mime-types": "3.0.1",
+    "@types/npmcli__arborist": "6.3.3",
+    "@types/semver": "^7.5.8",
     "@types/turndown": "5.0.5",
-    "@types/yargs": "17.0.33",
     "@types/which": "3.0.4",
+    "@types/yargs": "17.0.33",
     "@typescript/native-preview": "catalog:",
-    "drizzle-kit": "1.0.0-beta.16-ea816b6",
-    "drizzle-orm": "1.0.0-beta.16-ea816b6",
+    "effect": "catalog:",
+    "drizzle-kit": "catalog:",
     "typescript": "catalog:",
     "vscode-languageserver-types": "3.17.5",
     "why-is-node-running": "3.2.2",
@@ -79,9 +88,12 @@
     "@clack/prompts": "1.0.0-alpha.1",
     "@gitlab/gitlab-ai-provider": "3.6.0",
     "@gitlab/opencode-gitlab-auth": "1.3.3",
+    "@hono/node-server": "1.19.11",
+    "@hono/node-ws": "1.3.0",
     "@hono/standard-validator": "0.1.5",
     "@hono/zod-validator": "catalog:",
     "@modelcontextprotocol/sdk": "1.25.2",
+    "@npmcli/arborist": "9.4.0",
     "@octokit/graphql": "9.0.2",
     "@octokit/rest": "catalog:",
     "@openauthjs/openauth": "catalog:",
@@ -106,7 +118,7 @@
     "clipboardy": "4.0.0",
     "decimal.js": "10.5.0",
     "diff": "catalog:",
-    "drizzle-orm": "1.0.0-beta.16-ea816b6",
+    "drizzle-orm": "catalog:",
     "fuzzysort": "3.1.0",
     "glob": "13.0.5",
     "google-auth-library": "10.5.0",
@@ -121,6 +133,7 @@
     "opentui-spinner": "0.0.6",
     "partial-json": "0.1.7",
     "remeda": "catalog:",
+    "semver": "^7.6.3",
     "solid-js": "catalog:",
     "strip-ansi": "7.1.2",
     "tree-sitter-bash": "0.25.0",

packages/opencode/script/build-node.ts

@@ -0,0 +1,54 @@
+#!/usr/bin/env bun
+
+import fs from "fs"
+import path from "path"
+import { fileURLToPath } from "url"
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+const dir = path.resolve(__dirname, "..")
+
+process.chdir(dir)
+
+// Load migrations from migration directories
+const migrationDirs = (
+  await fs.promises.readdir(path.join(dir, "migration"), {
+    withFileTypes: true,
+  })
+)
+  .filter((entry) => entry.isDirectory() && /^\d{4}\d{2}\d{2}\d{2}\d{2}\d{2}/.test(entry.name))
+  .map((entry) => entry.name)
+  .sort()
+
+const migrations = await Promise.all(
+  migrationDirs.map(async (name) => {
+    const file = path.join(dir, "migration", name, "migration.sql")
+    const sql = await Bun.file(file).text()
+    const match = /^(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})/.exec(name)
+    const timestamp = match
+      ? Date.UTC(
+          Number(match[1]),
+          Number(match[2]) - 1,
+          Number(match[3]),
+          Number(match[4]),
+          Number(match[5]),
+          Number(match[6]),
+        )
+      : 0
+    return { sql, timestamp, name }
+  }),
+)
+console.log(`Loaded ${migrations.length} migrations`)
+
+await Bun.build({
+  target: "node",
+  entrypoints: ["./src/node.ts"],
+  outdir: "./dist",
+  format: "esm",
+  external: ["jsonc-parser"],
+  define: {
+    OPENCODE_MIGRATIONS: JSON.stringify(migrations),
+  },
+})
+
+console.log("Build complete")

packages/opencode/src/account/account.sql.ts

@@ -0,0 +1,35 @@
+import { sqliteTable, text, integer, primaryKey } from "drizzle-orm/sqlite-core"
+import { Timestamps } from "../storage/schema.sql"
+
+export const AccountTable = sqliteTable("account", {
+  id: text().primaryKey(),
+  email: text().notNull(),
+  url: text().notNull(),
+  access_token: text().notNull(),
+  refresh_token: text().notNull(),
+  token_expiry: integer(),
+  ...Timestamps,
+})
+
+export const AccountStateTable = sqliteTable("account_state", {
+  id: integer().primaryKey(),
+  active_account_id: text().references(() => AccountTable.id, { onDelete: "set null" }),
+  active_org_id: text(),
+})
+
+// LEGACY
+export const ControlAccountTable = sqliteTable(
+  "control_account",
+  {
+    email: text().notNull(),
+    url: text().notNull(),
+    access_token: text().notNull(),
+    refresh_token: text().notNull(),
+    token_expiry: integer(),
+    active: integer({ mode: "boolean" })
+      .notNull()
+      .$default(() => false),
+    ...Timestamps,
+  },
+  (table) => [primaryKey({ columns: [table.email, table.url] })],
+)

packages/opencode/src/account/index.ts

@@ -0,0 +1,43 @@
+import { Effect, Option, ServiceMap } from "effect"
+
+import {
+  Account as AccountSchema,
+  type AccountError,
+  type AccessToken,
+  AccountID,
+  AccountService,
+  OrgID,
+} from "./service"
+
+export { AccessToken, AccountID, OrgID } from "./service"
+
+import { runtime } from "@/effect/runtime"
+
+type AccountServiceShape = ServiceMap.Service.Shape<typeof AccountService>
+
+function runSync<A>(f: (service: AccountServiceShape) => Effect.Effect<A, AccountError>) {
+  return runtime.runSync(AccountService.use(f))
+}
+
+function runPromise<A>(f: (service: AccountServiceShape) => Effect.Effect<A, AccountError>) {
+  return runtime.runPromise(AccountService.use(f))
+}
+
+export namespace Account {
+  export const Account = AccountSchema
+  export type Account = AccountSchema
+
+  export function active(): Account | undefined {
+    return Option.getOrUndefined(runSync((service) => service.active()))
+  }
+
+  export async function config(accountID: AccountID, orgID: OrgID): Promise<Record<string, unknown> | undefined> {
+    const config = await runPromise((service) => service.config(accountID, orgID))
+    return Option.getOrUndefined(config)
+  }
+
+  export async function token(accountID: AccountID): Promise<AccessToken | undefined> {
+    const token = await runPromise((service) => service.token(accountID))
+    return Option.getOrUndefined(token)
+  }
+}

packages/opencode/src/account/repo.ts

@@ -0,0 +1,146 @@
+import { eq } from "drizzle-orm"
+import { Effect, Layer, Option, Schema, ServiceMap } from "effect"
+
+import { Database } from "@/storage/db"
+import { AccountStateTable, AccountTable } from "./account.sql"
+import { Account, AccountID, AccountRepoError, OrgID } from "./schema"
+
+export type AccountRow = (typeof AccountTable)["$inferSelect"]
+
+const decodeAccount = Schema.decodeUnknownSync(Account)
+
+type DbClient = Parameters<typeof Database.use>[0] extends (db: infer T) => unknown ? T : never
+
+const ACCOUNT_STATE_ID = 1
+
+const db = <A>(run: (db: DbClient) => A) =>
+  Effect.try({
+    try: () => Database.use(run),
+    catch: (cause) => new AccountRepoError({ message: "Database operation failed", cause }),
+  })
+
+const current = (db: DbClient) => {
+  const state = db.select().from(AccountStateTable).where(eq(AccountStateTable.id, ACCOUNT_STATE_ID)).get()
+  if (!state?.active_account_id) return
+  const account = db.select().from(AccountTable).where(eq(AccountTable.id, state.active_account_id)).get()
+  if (!account) return
+  return { ...account, active_org_id: state.active_org_id ?? null }
+}
+
+const setState = (db: DbClient, accountID: AccountID, orgID: string | null) =>
+  db
+    .insert(AccountStateTable)
+    .values({ id: ACCOUNT_STATE_ID, active_account_id: accountID, active_org_id: orgID })
+    .onConflictDoUpdate({
+      target: AccountStateTable.id,
+      set: { active_account_id: accountID, active_org_id: orgID },
+    })
+    .run()
+
+export class AccountRepo extends ServiceMap.Service<
+  AccountRepo,
+  {
+    readonly active: () => Effect.Effect<Option.Option<Account>, AccountRepoError>
+    readonly list: () => Effect.Effect<Account[], AccountRepoError>
+    readonly remove: (accountID: AccountID) => Effect.Effect<void, AccountRepoError>
+    readonly use: (accountID: AccountID, orgID: Option.Option<OrgID>) => Effect.Effect<void, AccountRepoError>
+    readonly getRow: (accountID: AccountID) => Effect.Effect<Option.Option<AccountRow>, AccountRepoError>
+    readonly persistToken: (input: {
+      accountID: AccountID
+      accessToken: string
+      refreshToken: string
+      expiry: Option.Option<number>
+    }) => Effect.Effect<void, AccountRepoError>
+    readonly persistAccount: (input: {
+      id: AccountID
+      email: string
+      url: string
+      accessToken: string
+      refreshToken: string
+      expiry: number
+      orgID: Option.Option<OrgID>
+    }) => Effect.Effect<void, AccountRepoError>
+  }
+>()("@opencode/AccountRepo") {
+  static readonly layer: Layer.Layer<AccountRepo> = Layer.succeed(
+    AccountRepo,
+    AccountRepo.of({
+      active: Effect.fn("AccountRepo.active")(() =>
+        db((db) => current(db)).pipe(Effect.map((row) => (row ? Option.some(decodeAccount(row)) : Option.none()))),
+      ),
+
+      list: Effect.fn("AccountRepo.list")(() =>
+        db((db) =>
+          db
+            .select()
+            .from(AccountTable)
+            .all()
+            .map((row) => decodeAccount({ ...row, active_org_id: null })),
+        ),
+      ),
+
+      remove: Effect.fn("AccountRepo.remove")((accountID: AccountID) =>
+        db((db) =>
+          Database.transaction((tx) => {
+            tx.update(AccountStateTable)
+              .set({ active_account_id: null, active_org_id: null })
+              .where(eq(AccountStateTable.active_account_id, accountID))
+              .run()
+            tx.delete(AccountTable).where(eq(AccountTable.id, accountID)).run()
+          }),
+        ).pipe(Effect.asVoid),
+      ),
+
+      use: Effect.fn("AccountRepo.use")((accountID: AccountID, orgID: Option.Option<OrgID>) =>
+        db((db) => setState(db, accountID, Option.getOrNull(orgID))).pipe(Effect.asVoid),
+      ),
+
+      getRow: Effect.fn("AccountRepo.getRow")((accountID: AccountID) =>
+        db((db) => db.select().from(AccountTable).where(eq(AccountTable.id, accountID)).get()).pipe(
+          Effect.map(Option.fromNullishOr),
+        ),
+      ),
+
+      persistToken: Effect.fn("AccountRepo.persistToken")((input) =>
+        db((db) =>
+          db
+            .update(AccountTable)
+            .set({
+              access_token: input.accessToken,
+              refresh_token: input.refreshToken,
+              token_expiry: Option.getOrNull(input.expiry),
+            })
+            .where(eq(AccountTable.id, input.accountID))
+            .run(),
+        ).pipe(Effect.asVoid),
+      ),
+
+      persistAccount: Effect.fn("AccountRepo.persistAccount")((input) => {
+        const orgID = Option.getOrNull(input.orgID)
+        return db((db) =>
+          Database.transaction((tx) => {
+            tx.insert(AccountTable)
+              .values({
+                id: input.id,
+                email: input.email,
+                url: input.url,
+                access_token: input.accessToken,
+                refresh_token: input.refreshToken,
+                token_expiry: input.expiry,
+              })
+              .onConflictDoUpdate({
+                target: AccountTable.id,
+                set: {
+                  access_token: input.accessToken,
+                  refresh_token: input.refreshToken,
+                  token_expiry: input.expiry,
+                },
+              })
+              .run()
+            setState(tx, input.id, orgID)
+          }),
+        ).pipe(Effect.asVoid)
+      }),
+    }),
+  )
+}

packages/opencode/src/account/schema.ts

@@ -0,0 +1,73 @@
+import { Schema } from "effect"
+
+import { withStatics } from "@/util/schema"
+
+export const AccountID = Schema.String.pipe(
+  Schema.brand("AccountId"),
+  withStatics((s) => ({ make: (id: string) => s.makeUnsafe(id) })),
+)
+export type AccountID = Schema.Schema.Type<typeof AccountID>
+
+export const OrgID = Schema.String.pipe(
+  Schema.brand("OrgId"),
+  withStatics((s) => ({ make: (id: string) => s.makeUnsafe(id) })),
+)
+export type OrgID = Schema.Schema.Type<typeof OrgID>
+
+export const AccessToken = Schema.String.pipe(
+  Schema.brand("AccessToken"),
+  withStatics((s) => ({ make: (token: string) => s.makeUnsafe(token) })),
+)
+export type AccessToken = Schema.Schema.Type<typeof AccessToken>
+
+export class Account extends Schema.Class<Account>("Account")({
+  id: AccountID,
+  email: Schema.String,
+  url: Schema.String,
+  active_org_id: Schema.NullOr(OrgID),
+}) {}
+
+export class Org extends Schema.Class<Org>("Org")({
+  id: OrgID,
+  name: Schema.String,
+}) {}
+
+export class AccountRepoError extends Schema.TaggedErrorClass<AccountRepoError>()("AccountRepoError", {
+  message: Schema.String,
+  cause: Schema.optional(Schema.Defect),
+}) {}
+
+export class AccountServiceError extends Schema.TaggedErrorClass<AccountServiceError>()("AccountServiceError", {
+  message: Schema.String,
+  cause: Schema.optional(Schema.Defect),
+}) {}
+
+export type AccountError = AccountRepoError | AccountServiceError
+
+export class Login extends Schema.Class<Login>("Login")({
+  code: Schema.String,
+  user: Schema.String,
+  url: Schema.String,
+  server: Schema.String,
+  expiry: Schema.Number,
+  interval: Schema.Number,
+}) {}
+
+export class PollSuccess extends Schema.TaggedClass<PollSuccess>()("PollSuccess", {
+  email: Schema.String,
+}) {}
+
+export class PollPending extends Schema.TaggedClass<PollPending>()("PollPending", {}) {}
+
+export class PollSlow extends Schema.TaggedClass<PollSlow>()("PollSlow", {}) {}
+
+export class PollExpired extends Schema.TaggedClass<PollExpired>()("PollExpired", {}) {}
+
+export class PollDenied extends Schema.TaggedClass<PollDenied>()("PollDenied", {}) {}
+
+export class PollError extends Schema.TaggedClass<PollError>()("PollError", {
+  cause: Schema.Defect,
+}) {}
+
+export const PollResult = Schema.Union([PollSuccess, PollPending, PollSlow, PollExpired, PollDenied, PollError])
+export type PollResult = Schema.Schema.Type<typeof PollResult>

packages/opencode/src/account/service.ts

@@ -0,0 +1,386 @@
+import { Clock, Effect, Layer, Option, Schema, ServiceMap } from "effect"
+import {
+  FetchHttpClient,
+  HttpClient,
+  HttpClientError,
+  HttpClientRequest,
+  HttpClientResponse,
+} from "effect/unstable/http"
+
+import { withTransientReadRetry } from "@/util/effect-http-client"
+import { AccountRepo, type AccountRow } from "./repo"
+import {
+  type AccountError,
+  AccessToken,
+  Account,
+  AccountID,
+  AccountServiceError,
+  Login,
+  Org,
+  OrgID,
+  PollDenied,
+  PollError,
+  PollExpired,
+  PollPending,
+  type PollResult,
+  PollSlow,
+  PollSuccess,
+} from "./schema"
+
+export * from "./schema"
+
+export type AccountOrgs = {
+  account: Account
+  orgs: Org[]
+}
+
+const RemoteOrg = Schema.Struct({
+  id: Schema.optional(OrgID),
+  name: Schema.optional(Schema.String),
+})
+
+const RemoteOrgs = Schema.Array(RemoteOrg)
+
+const RemoteConfig = Schema.Struct({
+  config: Schema.Record(Schema.String, Schema.Json),
+})
+
+const TokenRefresh = Schema.Struct({
+  access_token: Schema.String,
+  refresh_token: Schema.optional(Schema.String),
+  expires_in: Schema.optional(Schema.Number),
+})
+
+const DeviceCode = Schema.Struct({
+  device_code: Schema.String,
+  user_code: Schema.String,
+  verification_uri_complete: Schema.String,
+  expires_in: Schema.Number,
+  interval: Schema.Number,
+})
+
+const DeviceToken = Schema.Struct({
+  access_token: Schema.optional(Schema.String),
+  refresh_token: Schema.optional(Schema.String),
+  expires_in: Schema.optional(Schema.Number),
+  error: Schema.optional(Schema.String),
+  error_description: Schema.optional(Schema.String),
+})
+
+const User = Schema.Struct({
+  id: Schema.optional(AccountID),
+  email: Schema.optional(Schema.String),
+})
+
+const ClientId = Schema.Struct({ client_id: Schema.String })
+
+const DeviceTokenRequest = Schema.Struct({
+  grant_type: Schema.String,
+  device_code: Schema.String,
+  client_id: Schema.String,
+})
+
+const clientId = "opencode-cli"
+
+const toAccountServiceError = (message: string, cause?: unknown) => new AccountServiceError({ message, cause })
+
+const mapAccountServiceError =
+  (operation: string, message = "Account service operation failed") =>
+  <A, E, R>(effect: Effect.Effect<A, E, R>): Effect.Effect<A, AccountServiceError, R> =>
+    effect.pipe(
+      Effect.mapError((error) =>
+        error instanceof AccountServiceError ? error : toAccountServiceError(`${message} (${operation})`, error),
+      ),
+    )
+
+export class AccountService extends ServiceMap.Service<
+  AccountService,
+  {
+    readonly active: () => Effect.Effect<Option.Option<Account>, AccountError>
+    readonly list: () => Effect.Effect<Account[], AccountError>
+    readonly orgsByAccount: () => Effect.Effect<AccountOrgs[], AccountError>
+    readonly remove: (accountID: AccountID) => Effect.Effect<void, AccountError>
+    readonly use: (accountID: AccountID, orgID: Option.Option<OrgID>) => Effect.Effect<void, AccountError>
+    readonly orgs: (accountID: AccountID) => Effect.Effect<Org[], AccountError>
+    readonly config: (
+      accountID: AccountID,
+      orgID: OrgID,
+    ) => Effect.Effect<Option.Option<Record<string, unknown>>, AccountError>
+    readonly token: (accountID: AccountID) => Effect.Effect<Option.Option<AccessToken>, AccountError>
+    readonly login: (url: string) => Effect.Effect<Login, AccountError>
+    readonly poll: (input: Login) => Effect.Effect<PollResult, AccountError>
+  }
+>()("@opencode/Account") {
+  static readonly layer: Layer.Layer<AccountService, never, AccountRepo | HttpClient.HttpClient> = Layer.effect(
+    AccountService,
+    Effect.gen(function* () {
+      const repo = yield* AccountRepo
+      const http = yield* HttpClient.HttpClient
+      const httpRead = withTransientReadRetry(http)
+
+      const execute = (operation: string, request: HttpClientRequest.HttpClientRequest) =>
+        http.execute(request).pipe(mapAccountServiceError(operation, "HTTP request failed"))
+
+      const executeRead = (operation: string, request: HttpClientRequest.HttpClientRequest) =>
+        httpRead.execute(request).pipe(mapAccountServiceError(operation, "HTTP request failed"))
+
+      const executeEffect = <E>(operation: string, request: Effect.Effect<HttpClientRequest.HttpClientRequest, E>) =>
+        request.pipe(
+          Effect.flatMap((req) => http.execute(req)),
+          mapAccountServiceError(operation, "HTTP request failed"),
+        )
+
+      const okOrNone = (operation: string, response: HttpClientResponse.HttpClientResponse) =>
+        HttpClientResponse.filterStatusOk(response).pipe(
+          Effect.map(Option.some),
+          Effect.catch((error) =>
+            HttpClientError.isHttpClientError(error) && error.reason._tag === "StatusCodeError"
+              ? Effect.succeed(Option.none<HttpClientResponse.HttpClientResponse>())
+              : Effect.fail(error),
+          ),
+          mapAccountServiceError(operation),
+        )
+
+      const tokenForRow = Effect.fn("AccountService.tokenForRow")(function* (found: AccountRow) {
+        const now = yield* Clock.currentTimeMillis
+        if (found.token_expiry && found.token_expiry > now) return Option.some(AccessToken.make(found.access_token))
+
+        const response = yield* execute(
+          "token.refresh",
+          HttpClientRequest.post(`${found.url}/oauth/token`).pipe(
+            HttpClientRequest.acceptJson,
+            HttpClientRequest.bodyUrlParams({
+              grant_type: "refresh_token",
+              refresh_token: found.refresh_token,
+            }),
+          ),
+        )
+
+        const ok = yield* okOrNone("token.refresh", response)
+        if (Option.isNone(ok)) return Option.none()
+
+        const parsed = yield* HttpClientResponse.schemaBodyJson(TokenRefresh)(ok.value).pipe(
+          mapAccountServiceError("token.refresh", "Failed to decode response"),
+        )
+
+        const expiry = Option.fromNullishOr(parsed.expires_in).pipe(Option.map((e) => now + e * 1000))
+
+        yield* repo.persistToken({
+          accountID: AccountID.make(found.id),
+          accessToken: parsed.access_token,
+          refreshToken: parsed.refresh_token ?? found.refresh_token,
+          expiry,
+        })
+
+        return Option.some(AccessToken.make(parsed.access_token))
+      })
+
+      const resolveAccess = Effect.fn("AccountService.resolveAccess")(function* (accountID: AccountID) {
+        const maybeAccount = yield* repo.getRow(accountID)
+        if (Option.isNone(maybeAccount)) return Option.none<{ account: AccountRow; accessToken: AccessToken }>()
+
+        const account = maybeAccount.value
+        const accessToken = yield* tokenForRow(account)
+        if (Option.isNone(accessToken)) return Option.none<{ account: AccountRow; accessToken: AccessToken }>()
+
+        return Option.some({ account, accessToken: accessToken.value })
+      })
+
+      const token = Effect.fn("AccountService.token")((accountID: AccountID) =>
+        resolveAccess(accountID).pipe(Effect.map(Option.map((r) => r.accessToken))),
+      )
+
+      const orgsByAccount = Effect.fn("AccountService.orgsByAccount")(function* () {
+        const accounts = yield* repo.list()
+        return yield* Effect.forEach(
+          accounts,
+          (account) => orgs(account.id).pipe(Effect.map((orgs) => ({ account, orgs }))),
+          { concurrency: 3 },
+        )
+      })
+
+      const orgs = Effect.fn("AccountService.orgs")(function* (accountID: AccountID) {
+        const resolved = yield* resolveAccess(accountID)
+        if (Option.isNone(resolved)) return []
+
+        const { account, accessToken } = resolved.value
+
+        const response = yield* executeRead(
+          "orgs",
+          HttpClientRequest.get(`${account.url}/api/orgs`).pipe(
+            HttpClientRequest.acceptJson,
+            HttpClientRequest.bearerToken(accessToken),
+          ),
+        )
+
+        const ok = yield* okOrNone("orgs", response)
+        if (Option.isNone(ok)) return []
+
+        const orgs = yield* HttpClientResponse.schemaBodyJson(RemoteOrgs)(ok.value).pipe(
+          mapAccountServiceError("orgs", "Failed to decode response"),
+        )
+        return orgs
+          .filter((org) => org.id !== undefined && org.name !== undefined)
+          .map((org) => new Org({ id: org.id!, name: org.name! }))
+      })
+
+      const config = Effect.fn("AccountService.config")(function* (accountID: AccountID, orgID: OrgID) {
+        const resolved = yield* resolveAccess(accountID)
+        if (Option.isNone(resolved)) return Option.none()
+
+        const { account, accessToken } = resolved.value
+
+        const response = yield* executeRead(
+          "config",
+          HttpClientRequest.get(`${account.url}/api/config`).pipe(
+            HttpClientRequest.acceptJson,
+            HttpClientRequest.bearerToken(accessToken),
+            HttpClientRequest.setHeaders({ "x-org-id": orgID }),
+          ),
+        )
+
+        const ok = yield* okOrNone("config", response)
+        if (Option.isNone(ok)) return Option.none()
+
+        const parsed = yield* HttpClientResponse.schemaBodyJson(RemoteConfig)(ok.value).pipe(
+          mapAccountServiceError("config", "Failed to decode response"),
+        )
+        return Option.some(parsed.config)
+      })
+
+      const login = Effect.fn("AccountService.login")(function* (server: string) {
+        const response = yield* executeEffect(
+          "login",
+          HttpClientRequest.post(`${server}/auth/device/code`).pipe(
+            HttpClientRequest.acceptJson,
+            HttpClientRequest.schemaBodyJson(ClientId)({ client_id: clientId }),
+          ),
+        )
+
+        const ok = yield* okOrNone("login", response)
+        if (Option.isNone(ok)) {
+          const body = yield* response.text.pipe(Effect.orElseSucceed(() => ""))
+          return yield* toAccountServiceError(`Failed to initiate device flow: ${body || response.status}`)
+        }
+
+        const parsed = yield* HttpClientResponse.schemaBodyJson(DeviceCode)(ok.value).pipe(
+          mapAccountServiceError("login", "Failed to decode response"),
+        )
+        return new Login({
+          code: parsed.device_code,
+          user: parsed.user_code,
+          url: `${server}${parsed.verification_uri_complete}`,
+          server,
+          expiry: parsed.expires_in,
+          interval: parsed.interval,
+        })
+      })
+
+      const poll = Effect.fn("AccountService.poll")(function* (input: Login) {
+        const response = yield* executeEffect(
+          "poll",
+          HttpClientRequest.post(`${input.server}/auth/device/token`).pipe(
+            HttpClientRequest.acceptJson,
+            HttpClientRequest.schemaBodyJson(DeviceTokenRequest)({
+              grant_type: "urn:ietf:params:oauth:grant-type:device_code",
+              device_code: input.code,
+              client_id: clientId,
+            }),
+          ),
+        )
+
+        const parsed = yield* HttpClientResponse.schemaBodyJson(DeviceToken)(response).pipe(
+          mapAccountServiceError("poll", "Failed to decode response"),
+        )
+
+        if (!parsed.access_token) {
+          if (parsed.error === "authorization_pending") return new PollPending()
+          if (parsed.error === "slow_down") return new PollSlow()
+          if (parsed.error === "expired_token") return new PollExpired()
+          if (parsed.error === "access_denied") return new PollDenied()
+          return new PollError({ cause: parsed.error })
+        }
+
+        const access = parsed.access_token
+
+        const fetchUser = executeRead(
+          "poll.user",
+          HttpClientRequest.get(`${input.server}/api/user`).pipe(
+            HttpClientRequest.acceptJson,
+            HttpClientRequest.bearerToken(access),
+          ),
+        ).pipe(
+          Effect.flatMap((r) =>
+            HttpClientResponse.schemaBodyJson(User)(r).pipe(
+              mapAccountServiceError("poll.user", "Failed to decode response"),
+            ),
+          ),
+        )
+
+        const fetchOrgs = executeRead(
+          "poll.orgs",
+          HttpClientRequest.get(`${input.server}/api/orgs`).pipe(
+            HttpClientRequest.acceptJson,
+            HttpClientRequest.bearerToken(access),
+          ),
+        ).pipe(
+          Effect.flatMap((r) =>
+            HttpClientResponse.schemaBodyJson(RemoteOrgs)(r).pipe(
+              mapAccountServiceError("poll.orgs", "Failed to decode response"),
+            ),
+          ),
+        )
+
+        const [user, remoteOrgs] = yield* Effect.all([fetchUser, fetchOrgs], { concurrency: 2 })
+
+        const userId = user.id
+        const userEmail = user.email
+
+        if (!userId || !userEmail) {
+          return new PollError({ cause: "No id or email in response" })
+        }
+
+        const firstOrgID = remoteOrgs.length > 0 ? Option.fromNullishOr(remoteOrgs[0].id) : Option.none()
+
+        const now = yield* Clock.currentTimeMillis
+        const expiry = now + (parsed.expires_in ?? 0) * 1000
+        const refresh = parsed.refresh_token ?? ""
+        if (!refresh) {
+          yield* Effect.logWarning(
+            "Server did not return a refresh token — session may expire without ability to refresh",
+          )
+        }
+
+        yield* repo.persistAccount({
+          id: userId,
+          email: userEmail,
+          url: input.server,
+          accessToken: access,
+          refreshToken: refresh,
+          expiry,
+          orgID: firstOrgID,
+        })
+
+        return new PollSuccess({ email: userEmail })
+      })
+
+      return AccountService.of({
+        active: repo.active,
+        list: repo.list,
+        orgsByAccount,
+        remove: repo.remove,
+        use: repo.use,
+        orgs,
+        config,
+        token,
+        login,
+        poll,
+      })
+    }),
+  )
+
+  static readonly defaultLayer = AccountService.layer.pipe(
+    Layer.provide(AccountRepo.layer),
+    Layer.provide(FetchHttpClient.layer),
+  )
+}

packages/opencode/src/acp/agent.ts

@@ -29,7 +29,7 @@ import {
 } from "@agentclientprotocol/sdk"
 
 import { Log } from "../util/log"
-import { pathToFileURL } from "bun"
+import { pathToFileURL } from "url"
 import { Filesystem } from "../util/filesystem"
 import { Hash } from "../util/hash"
 import { ACPSessionManager } from "./session"

packages/opencode/src/bun/index.ts

@@ -1,13 +1,5 @@
-import z from "zod"
-import { Global } from "../global"
 import { Log } from "../util/log"
-import path from "path"
-import { Filesystem } from "../util/filesystem"
-import { NamedError } from "@opencode-ai/util/error"
 import { text } from "node:stream/consumers"
-import { Lock } from "../util/lock"
-import { PackageRegistry } from "./registry"
-import { proxied } from "@/util/proxied"
 import { Process } from "../util/process"
 
 export namespace BunProc {
@@ -45,87 +37,4 @@ export namespace BunProc {
   export function which() {
     return process.execPath
   }
-
-  export const InstallFailedError = NamedError.create(
-    "BunInstallFailedError",
-    z.object({
-      pkg: z.string(),
-      version: z.string(),
-    }),
-  )
-
-  export async function install(pkg: string, version = "latest") {
-    // Use lock to ensure only one install at a time
-    using _ = await Lock.write("bun-install")
-
-    const mod = path.join(Global.Path.cache, "node_modules", pkg)
-    const pkgjsonPath = path.join(Global.Path.cache, "package.json")
-    const parsed = await Filesystem.readJson<{ dependencies: Record<string, string> }>(pkgjsonPath).catch(async () => {
-      const result = { dependencies: {} as Record<string, string> }
-      await Filesystem.writeJson(pkgjsonPath, result)
-      return result
-    })
-    if (!parsed.dependencies) parsed.dependencies = {} as Record<string, string>
-    const dependencies = parsed.dependencies
-    const modExists = await Filesystem.exists(mod)
-    const cachedVersion = dependencies[pkg]
-
-    if (!modExists || !cachedVersion) {
-      // continue to install
-    } else if (version !== "latest" && cachedVersion === version) {
-      return mod
-    } else if (version === "latest") {
-      const isOutdated = await PackageRegistry.isOutdated(pkg, cachedVersion, Global.Path.cache)
-      if (!isOutdated) return mod
-      log.info("Cached version is outdated, proceeding with install", { pkg, cachedVersion })
-    }
-
-    // Build command arguments
-    const args = [
-      "add",
-      "--force",
-      "--exact",
-      // TODO: get rid of this case (see: https://github.com/oven-sh/bun/issues/19936)
-      ...(proxied() || process.env.CI ? ["--no-cache"] : []),
-      "--cwd",
-      Global.Path.cache,
-      pkg + "@" + version,
-    ]
-
-    // Let Bun handle registry resolution:
-    // - If .npmrc files exist, Bun will use them automatically
-    // - If no .npmrc files exist, Bun will default to https://registry.npmjs.org
-    // - No need to pass --registry flag
-    log.info("installing package using Bun's default registry resolution", {
-      pkg,
-      version,
-    })
-
-    await BunProc.run(args, {
-      cwd: Global.Path.cache,
-    }).catch((e) => {
-      throw new InstallFailedError(
-        { pkg, version },
-        {
-          cause: e,
-        },
-      )
-    })
-
-    // Resolve actual version from installed package when using "latest"
-    // This ensures subsequent starts use the cached version until explicitly updated
-    let resolvedVersion = version
-    if (version === "latest") {
-      const installedPkg = await Filesystem.readJson<{ version?: string }>(path.join(mod, "package.json")).catch(
-        () => null,
-      )
-      if (installedPkg?.version) {
-        resolvedVersion = installedPkg.version
-      }
-    }
-
-    parsed.dependencies[pkg] = resolvedVersion
-    await Filesystem.writeJson(pkgjsonPath, parsed)
-    return mod
-  }
 }

packages/opencode/src/bun/registry.ts

@@ -1,4 +1,3 @@
-import { semver } from "bun"
 import { text } from "node:stream/consumers"
 import { Log } from "../util/log"
 import { Process } from "../util/process"
@@ -34,17 +33,4 @@ export namespace PackageRegistry {
     if (!value) return null
     return value
   }
-
-  export async function isOutdated(pkg: string, cachedVersion: string, cwd?: string): Promise<boolean> {
-    const latestVersion = await info(pkg, "version", cwd)
-    if (!latestVersion) {
-      log.warn("Failed to resolve latest version, using cached", { pkg, cachedVersion })
-      return false
-    }
-
-    const isRange = /[\s^~*xX<>|=]/.test(cachedVersion)
-    if (isRange) return !semver.satisfies(latestVersion, cachedVersion)
-
-    return semver.order(cachedVersion, latestVersion) === -1
-  }
 }

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

@@ -0,0 +1,194 @@
+import { cmd } from "./cmd"
+import { Duration, Effect, Match, Option } from "effect"
+import { UI } from "../ui"
+import { runtime } from "@/effect/runtime"
+import { AccountID, AccountService, OrgID, PollExpired, type PollResult } from "@/account/service"
+import { type AccountError } from "@/account/schema"
+import * as Prompt from "../effect/prompt"
+import open from "open"
+
+const openBrowser = (url: string) => Effect.promise(() => open(url).catch(() => undefined))
+
+const println = (msg: string) => Effect.sync(() => UI.println(msg))
+
+const loginEffect = Effect.fn("login")(function* (url: string) {
+  const service = yield* AccountService
+
+  yield* Prompt.intro("Log in")
+  const login = yield* service.login(url)
+
+  yield* Prompt.log.info("Go to: " + login.url)
+  yield* Prompt.log.info("Enter code: " + login.user)
+  yield* openBrowser(login.url)
+
+  const s = Prompt.spinner()
+  yield* s.start("Waiting for authorization...")
+
+  const poll = (wait: number): Effect.Effect<PollResult, AccountError> =>
+    Effect.gen(function* () {
+      yield* Effect.sleep(wait)
+      const result = yield* service.poll(login)
+      if (result._tag === "PollPending") return yield* poll(wait)
+      if (result._tag === "PollSlow") return yield* poll(wait + 5000)
+      return result
+    })
+
+  const result = yield* poll(login.interval * 1000).pipe(
+    Effect.timeout(Duration.seconds(login.expiry)),
+    Effect.catchTag("TimeoutError", () => Effect.succeed(new PollExpired())),
+  )
+
+  yield* Match.valueTags(result, {
+    PollSuccess: (r) =>
+      Effect.gen(function* () {
+        yield* s.stop("Logged in as " + r.email)
+        yield* Prompt.outro("Done")
+      }),
+    PollExpired: () => s.stop("Device code expired", 1),
+    PollDenied: () => s.stop("Authorization denied", 1),
+    PollError: (r) => s.stop("Error: " + String(r.cause), 1),
+    PollPending: () => s.stop("Unexpected state", 1),
+    PollSlow: () => s.stop("Unexpected state", 1),
+  })
+})
+
+const logoutEffect = Effect.fn("logout")(function* (email?: string) {
+  const service = yield* AccountService
+  const accounts = yield* service.list()
+  if (accounts.length === 0) return yield* println("Not logged in")
+
+  if (email) {
+    const match = accounts.find((a) => a.email === email)
+    if (!match) return yield* println("Account not found: " + email)
+    yield* service.remove(match.id)
+    yield* Prompt.outro("Logged out from " + email)
+    return
+  }
+
+  const active = yield* service.active()
+  const activeID = Option.map(active, (a) => a.id)
+
+  yield* Prompt.intro("Log out")
+
+  const opts = accounts.map((a) => {
+    const isActive = Option.isSome(activeID) && activeID.value === a.id
+    const server = UI.Style.TEXT_DIM + a.url + UI.Style.TEXT_NORMAL
+    return {
+      value: a,
+      label: isActive ? `${a.email} ${server}` + UI.Style.TEXT_DIM + " (active)" : `${a.email} ${server}`,
+    }
+  })
+
+  const selected = yield* Prompt.select({ message: "Select account to log out", options: opts })
+  if (Option.isNone(selected)) return
+
+  yield* service.remove(selected.value.id)
+  yield* Prompt.outro("Logged out from " + selected.value.email)
+})
+
+interface OrgChoice {
+  orgID: OrgID
+  accountID: AccountID
+  label: string
+}
+
+const switchEffect = Effect.fn("switch")(function* () {
+  const service = yield* AccountService
+
+  const groups = yield* service.orgsByAccount()
+  if (groups.length === 0) return yield* println("Not logged in")
+
+  const active = yield* service.active()
+  const activeOrgID = Option.flatMap(active, (a) => Option.fromNullishOr(a.active_org_id))
+
+  const opts = groups.flatMap((group) =>
+    group.orgs.map((org) => {
+      const isActive = Option.isSome(activeOrgID) && activeOrgID.value === org.id
+      return {
+        value: { orgID: org.id, accountID: group.account.id, label: org.name },
+        label: isActive
+          ? `${org.name} (${group.account.email})` + UI.Style.TEXT_DIM + " (active)"
+          : `${org.name} (${group.account.email})`,
+      }
+    }),
+  )
+  if (opts.length === 0) return yield* println("No orgs found")
+
+  yield* Prompt.intro("Switch org")
+
+  const selected = yield* Prompt.select<OrgChoice>({ message: "Select org", options: opts })
+  if (Option.isNone(selected)) return
+
+  const choice = selected.value
+  yield* service.use(choice.accountID, Option.some(choice.orgID))
+  yield* Prompt.outro("Switched to " + choice.label)
+})
+
+const orgsEffect = Effect.fn("orgs")(function* () {
+  const service = yield* AccountService
+
+  const groups = yield* service.orgsByAccount()
+  if (groups.length === 0) return yield* println("No accounts found")
+  if (!groups.some((group) => group.orgs.length > 0)) return yield* println("No orgs found")
+
+  const active = yield* service.active()
+  const activeOrgID = Option.flatMap(active, (a) => Option.fromNullishOr(a.active_org_id))
+
+  for (const group of groups) {
+    for (const org of group.orgs) {
+      const isActive = Option.isSome(activeOrgID) && activeOrgID.value === org.id
+      const dot = isActive ? UI.Style.TEXT_SUCCESS + "●" + UI.Style.TEXT_NORMAL : " "
+      const name = isActive ? UI.Style.TEXT_HIGHLIGHT_BOLD + org.name + UI.Style.TEXT_NORMAL : org.name
+      const email = UI.Style.TEXT_DIM + group.account.email + UI.Style.TEXT_NORMAL
+      const id = UI.Style.TEXT_DIM + org.id + UI.Style.TEXT_NORMAL
+      yield* println(`  ${dot} ${name}  ${email}  ${id}`)
+    }
+  }
+})
+
+export const LoginCommand = cmd({
+  command: "login <url>",
+  describe: false,
+  builder: (yargs) =>
+    yargs.positional("url", {
+      describe: "server URL",
+      type: "string",
+      demandOption: true,
+    }),
+  async handler(args) {
+    UI.empty()
+    await runtime.runPromise(loginEffect(args.url))
+  },
+})
+
+export const LogoutCommand = cmd({
+  command: "logout [email]",
+  describe: false,
+  builder: (yargs) =>
+    yargs.positional("email", {
+      describe: "account email to log out from",
+      type: "string",
+    }),
+  async handler(args) {
+    UI.empty()
+    await runtime.runPromise(logoutEffect(args.email))
+  },
+})
+
+export const SwitchCommand = cmd({
+  command: "switch",
+  describe: false,
+  async handler() {
+    UI.empty()
+    await runtime.runPromise(switchEffect())
+  },
+})
+
+export const OrgsCommand = cmd({
+  command: "orgs",
+  describe: false,
+  async handler() {
+    UI.empty()
+    await runtime.runPromise(orgsEffect())
+  },
+})

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

@@ -23,7 +23,7 @@ export const AcpCommand = cmd({
     process.env.OPENCODE_CLIENT = "acp"
     await bootstrap(process.cwd(), async () => {
       const opts = await resolveNetworkOptions(args)
-      const server = Server.listen(opts)
+      const server = await Server.listen(opts)
 
       const sdk = createOpencodeClient({
         baseUrl: `http://${server.hostname}:${server.port}`,

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

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

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

@@ -10,7 +10,7 @@ import { ShareNext } from "../../share/share-next"
 import { EOL } from "os"
 import { Filesystem } from "../../util/filesystem"
 
-/** Discriminated union returned by the ShareNext API (GET /api/share/:id/data) */
+/** Discriminated union returned by the ShareNext API (GET /api/shares/:id/data) */
 export type ShareData =
   | { type: "session"; data: SDKSession }
   | { type: "message"; data: Message }
@@ -24,6 +24,14 @@ export function parseShareUrl(url: string): string | null {
   return match ? match[1] : null
 }
 
+export function shouldAttachShareAuthHeaders(shareUrl: string, accountBaseUrl: string): boolean {
+  try {
+    return new URL(shareUrl).origin === new URL(accountBaseUrl).origin
+  } catch {
+    return false
+  }
+}
+
 /**
  * Transform ShareNext API response (flat array) into the nested structure for local file storage.
  *
@@ -97,8 +105,21 @@ export const ImportCommand = cmd({
           return
         }
 
-        const baseUrl = await ShareNext.url()
-        const response = await fetch(`${baseUrl}/api/share/${slug}/data`)
+        const parsed = new URL(args.file)
+        const baseUrl = parsed.origin
+        const req = await ShareNext.request()
+        const headers = shouldAttachShareAuthHeaders(args.file, req.baseUrl) ? req.headers : {}
+
+        const dataPath = req.api.data(slug)
+        let response = await fetch(`${baseUrl}${dataPath}`, {
+          headers,
+        })
+
+        if (!response.ok && dataPath !== `/api/share/${slug}/data`) {
+          response = await fetch(`${baseUrl}/api/share/${slug}/data`, {
+            headers,
+          })
+        }
 
         if (!response.ok) {
           process.stdout.write(`Failed to fetch share data: ${response.statusText}`)

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

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

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

@@ -13,14 +13,9 @@ import { Instance } from "../../project/instance"
 import type { Hooks } from "@opencode-ai/plugin"
 import { Process } from "../../util/process"
 import { text } from "node:stream/consumers"
-import { setTimeout as sleep } from "node:timers/promises"
 
 type PluginAuth = NonNullable<Hooks["auth"]>
 
-/**
- * Handle plugin-based authentication flow.
- * Returns true if auth was handled, false if it should fall through to default handling.
- */
 async function handlePluginAuth(plugin: { auth: PluginAuth }, provider: string, methodName?: string): Promise<boolean> {
   let index = 0
   if (methodName) {
@@ -33,7 +28,7 @@ async function handlePluginAuth(plugin: { auth: PluginAuth }, provider: string,
     }
     index = match
   } else if (plugin.auth.methods.length > 1) {
-    const selected = await prompts.select({
+    const method = await prompts.select({
       message: "Login method",
       options: [
         ...plugin.auth.methods.map((x, index) => ({
@@ -42,13 +37,12 @@ async function handlePluginAuth(plugin: { auth: PluginAuth }, provider: string,
         })),
       ],
     })
-    if (prompts.isCancel(selected)) throw new UI.CancelledError()
-    index = parseInt(selected)
+    if (prompts.isCancel(method)) throw new UI.CancelledError()
+    index = parseInt(method)
   }
   const method = plugin.auth.methods[index]
 
-  // Handle prompts for all auth types
-  await sleep(10)
+  await new Promise((r) => setTimeout(r, 10))
   const inputs: Record<string, string> = {}
   if (method.prompts) {
     for (const prompt of method.prompts) {
@@ -171,11 +165,6 @@ async function handlePluginAuth(plugin: { auth: PluginAuth }, provider: string,
   return false
 }
 
-/**
- * Build a deduplicated list of plugin-registered auth providers that are not
- * already present in models.dev, respecting enabled/disabled provider lists.
- * Pure function with no side effects; safe to test without mocking.
- */
 export function resolvePluginProviders(input: {
   hooks: Hooks[]
   existingProviders: Record<string, unknown>
@@ -203,19 +192,20 @@ export function resolvePluginProviders(input: {
   return result
 }
 
-export const AuthCommand = cmd({
-  command: "auth",
-  describe: "manage credentials",
+export const ProvidersCommand = cmd({
+  command: "providers",
+  aliases: ["auth"],
+  describe: "manage AI providers and credentials",
   builder: (yargs) =>
-    yargs.command(AuthLoginCommand).command(AuthLogoutCommand).command(AuthListCommand).demandCommand(),
+    yargs.command(ProvidersListCommand).command(ProvidersLoginCommand).command(ProvidersLogoutCommand).demandCommand(),
   async handler() {},
 })
 
-export const AuthListCommand = cmd({
+export const ProvidersListCommand = cmd({
   command: "list",
   aliases: ["ls"],
-  describe: "list providers",
-  async handler() {
+  describe: "list providers and credentials",
+  async handler(_args) {
     UI.empty()
     const authPath = path.join(Global.Path.data, "auth.json")
     const homedir = os.homedir()
@@ -231,7 +221,6 @@ export const AuthListCommand = cmd({
 
     prompts.outro(`${results.length} credentials`)
 
-    // Environment variables section
     const activeEnvVars: Array<{ provider: string; envVar: string }> = []
 
     for (const [providerID, provider] of Object.entries(database)) {
@@ -258,7 +247,7 @@ export const AuthListCommand = cmd({
   },
 })
 
-export const AuthLoginCommand = cmd({
+export const ProvidersLoginCommand = cmd({
   command: "login [url]",
   describe: "log in to a provider",
   builder: (yargs) =>
@@ -356,7 +345,7 @@ export const AuthLoginCommand = cmd({
               value: x.id,
               hint: {
                 opencode: "recommended",
-                anthropic: "Claude Max or API key",
+                anthropic: "API key",
                 openai: "ChatGPT Plus/Pro or API key",
               }[x.id],
             })),
@@ -409,7 +398,6 @@ export const AuthLoginCommand = cmd({
           if (prompts.isCancel(custom)) throw new UI.CancelledError()
           provider = custom.replace(/^@ai-sdk\//, "")
 
-          // Check if a plugin provides auth for this custom provider
           const customPlugin = await Plugin.list().then((x) => x.findLast((x) => x.auth?.provider === provider))
           if (customPlugin && customPlugin.auth) {
             const handled = await handlePluginAuth({ auth: customPlugin.auth }, provider, args.method)
@@ -461,10 +449,10 @@ export const AuthLoginCommand = cmd({
   },
 })
 
-export const AuthLogoutCommand = cmd({
+export const ProvidersLogoutCommand = cmd({
   command: "logout",
   describe: "log out from a configured provider",
-  async handler() {
+  async handler(_args) {
     UI.empty()
     const credentials = await Auth.all().then((x) => Object.entries(x))
     prompts.intro("Remove credential")

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

@@ -1,6 +1,6 @@
 import type { Argv } from "yargs"
 import path from "path"
-import { pathToFileURL } from "bun"
+import { pathToFileURL } from "url"
 import { UI } from "../ui"
 import { cmd } from "./cmd"
 import { Flag } from "../../flag/flag"
@@ -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,14 +653,21 @@ 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)
     }
 
     await bootstrap(process.cwd(), async () => {
       const fetchFn = (async (input: RequestInfo | URL, init?: RequestInit) => {
         const request = new Request(input, init)
-        return Server.App().fetch(request)
+        return Server.Default().fetch(request)
       }) as typeof globalThis.fetch
       const sdk = createOpencodeClient({ baseUrl: "http://opencode.internal", fetch: fetchFn })
       await execute(sdk)

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

@@ -15,7 +15,7 @@ export const ServeCommand = cmd({
       console.log("Warning: OPENCODE_SERVER_PASSWORD is not set; server is unsecured.")
     }
     const opts = await resolveNetworkOptions(args)
-    const server = Server.listen(opts)
+    const server = await Server.listen(opts)
     console.log(`opencode server listening on http://${server.hostname}:${server.port}`)
 
     await new Promise(() => {})

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

@@ -20,6 +20,7 @@ import { DialogHelp } from "./ui/dialog-help"
 import { CommandProvider, useCommandDialog } from "@tui/component/dialog-command"
 import { DialogAgent } from "@tui/component/dialog-agent"
 import { DialogSessionList } from "@tui/component/dialog-session-list"
+import { DialogWorkspaceList } from "@tui/component/dialog-workspace-list"
 import { KeybindProvider } from "@tui/context/keybind"
 import { ThemeProvider, useTheme } from "@tui/context/theme"
 import { Home } from "@tui/routes/home"
@@ -111,7 +112,6 @@ export function tui(input: {
   fetch?: typeof fetch
   headers?: RequestInit["headers"]
   events?: EventSource
-  onExit?: () => Promise<void>
 }) {
   // promise to prevent immediate exit
   return new Promise<void>(async (resolve) => {
@@ -126,7 +126,6 @@ export function tui(input: {
 
     const onExit = async () => {
       unguard?.()
-      await input.onExit?.()
       resolve()
     }
 
@@ -373,6 +372,22 @@ function App() {
         dialog.replace(() => <DialogSessionList />)
       },
     },
+    ...(Flag.OPENCODE_EXPERIMENTAL_WORKSPACES
+      ? [
+          {
+            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",
@@ -387,9 +402,12 @@ function App() {
         const current = promptRef.current
         // Don't require focus - if there's any text, preserve it
         const currentPrompt = current?.current?.input ? current.current : undefined
+        const workspaceID =
+          route.data.type === "session" ? sync.session.get(route.data.sessionID)?.workspaceID : undefined
         route.navigate({
           type: "home",
           initialPrompt: currentPrompt,
+          workspaceID,
         })
         dialog.clear()
       },

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

@@ -36,7 +36,7 @@ export function createDialogProviderOptions() {
         value: provider.id,
         description: {
           opencode: "(Recommended)",
-          anthropic: "(Claude Max or API key)",
+          anthropic: "(API key)",
           openai: "(ChatGPT Plus/Pro or API key)",
           "opencode-go": "Low cost subscription for everyone",
         }[provider.id],

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

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

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

@@ -37,6 +37,7 @@ import { DialogSkill } from "../dialog-skill"
 
 export type PromptProps = {
   sessionID?: string
+  workspaceID?: string
   visible?: boolean
   disabled?: boolean
   onSubmit?: () => void
@@ -539,12 +540,27 @@ export function Prompt(props: PromptProps) {
       promptModelWarning()
       return
     }
-    const sessionID = props.sessionID
-      ? props.sessionID
-      : await (async () => {
-          const sessionID = await sdk.client.session.create({}).then((x) => x.data!.id)
-          return sessionID
-        })()
+
+    let sessionID = props.sessionID
+    if (sessionID == null) {
+      const res = await sdk.client.session.create({
+        workspaceID: props.workspaceID,
+      })
+
+      if (res.error) {
+        console.log("Creating a session failed:", res.error)
+
+        toast.show({
+          message: "Creating a session failed. Open console for more details.",
+          variant: "error",
+        })
+
+        return
+      }
+
+      sessionID = res.data.id
+    }
+
     const messageID = Identifier.ascending("message")
     let inputText = store.prompt.input
 

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

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

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

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

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

@@ -5,6 +5,7 @@ import type { PromptInfo } from "../component/prompt/history"
 export type HomeRoute = {
   type: "home"
   initialPrompt?: PromptInfo
+  workspaceID?: string
 }
 
 export type SessionRoute = {

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

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

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

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

packages/opencode/src/cli/cmd/tui/routes/home.tsx

@@ -1,5 +1,5 @@
 import { Prompt, type PromptRef } from "@tui/component/prompt"
-import { createMemo, Match, onMount, Show, Switch } from "solid-js"
+import { createEffect, createMemo, Match, on, onMount, Show, Switch } from "solid-js"
 import { useTheme } from "@tui/context/theme"
 import { useKeybind } from "@tui/context/keybind"
 import { Logo } from "../component/logo"
@@ -14,6 +14,7 @@ import { usePromptRef } from "../context/prompt"
 import { Installation } from "@/installation"
 import { useKV } from "../context/kv"
 import { useCommandDialog } from "../component/dialog-command"
+import { useLocal } from "../context/local"
 
 // TODO: what is the best way to do this?
 let once = false
@@ -76,6 +77,7 @@ export function Home() {
 
   let prompt: PromptRef
   const args = useArgs()
+  const local = useLocal()
   onMount(() => {
     if (once) return
     if (route.initialPrompt) {
@@ -84,9 +86,21 @@ export function Home() {
     } else if (args.prompt) {
       prompt.set({ input: args.prompt, parts: [] })
       once = true
-      prompt.submit()
     }
   })
+
+  // Wait for sync and model store to be ready before auto-submitting --prompt
+  createEffect(
+    on(
+      () => sync.ready && local.model.ready,
+      (ready) => {
+        if (!ready) return
+        if (!args.prompt) return
+        if (prompt.current?.input !== args.prompt) return
+        prompt.submit()
+      },
+    ),
+  )
   const directory = useDirectory()
 
   const keybind = useKeybind()
@@ -107,6 +121,7 @@ export function Home() {
               promptRef.set(r)
             }}
             hint={Hint}
+            workspaceID={route.workspaceID}
           />
         </box>
         <box height={4} minHeight={0} width="100%" maxWidth={75} alignItems="center" paddingTop={3} flexShrink={1}>

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

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

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

@@ -182,6 +182,12 @@ export function Session() {
     return new CustomSpeedScroll(3)
   })
 
+  createEffect(() => {
+    if (session()?.workspaceID) {
+      sdk.setWorkspace(session()?.workspaceID)
+    }
+  })
+
   createEffect(async () => {
     await sync.session
       .sync(route.sessionID)
@@ -377,7 +383,12 @@ export function Session() {
             sessionID: route.sessionID,
           })
           .then((res) => copy(res.data!.share!.url))
-          .catch(() => toast.show({ message: "Failed to share session", variant: "error" }))
+          .catch((error) => {
+            toast.show({
+              message: error instanceof Error ? error.message : "Failed to share session",
+              variant: "error",
+            })
+          })
         dialog.clear()
       },
     },
@@ -480,7 +491,12 @@ export function Session() {
             sessionID: route.sessionID,
           })
           .then(() => toast.show({ message: "Session unshared successfully", variant: "success" }))
-          .catch(() => toast.show({ message: "Failed to unshare session", variant: "error" }))
+          .catch((error) => {
+            toast.show({
+              message: error instanceof Error ? error.message : "Failed to unshare session",
+              variant: "error",
+            })
+          })
         dialog.clear()
       },
     },
@@ -891,12 +907,12 @@ export function Session() {
             const filename = options.filename.trim()
             const filepath = path.join(exportDir, filename)
 
-            await Bun.write(filepath, transcript)
+            await Filesystem.write(filepath, transcript)
 
             // Open with EDITOR if available
             const result = await Editor.open({ value: transcript, renderer })
             if (result !== undefined) {
-              await Bun.write(filepath, result)
+              await Filesystem.write(filepath, result)
             }
 
             toast.show({ message: `Session exported to ${filename}`, variant: "success" })

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

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

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

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